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

package/dist/fesm5/index.js

@@ -4,13 +4,13 @@
 *-------------------------------------------------------------------------------------------*/
 import { __decorate, __metadata, __param, __extends } from 'tslib';
 import { Injectable, Input, Output, EventEmitter, HostBinding, HostListener, Directive, Optional, ElementRef, Renderer2, NgZone, isDevMode, ContentChildren, QueryList, Component, NgModule, TemplateRef, ViewContainerRef, InjectionToken, Inject, ContentChild, ViewChild, ChangeDetectorRef, forwardRef } from '@angular/core';
-import { BehaviorSubject, Subject, fromEvent, merge, Subscription } from 'rxjs';
+import { Subject, fromEvent, merge, Subscription } from 'rxjs';
 import { Keys, isChanged, isDocumentAvailable, hasObservers, guid, EventsModule } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
-import { filter, take } from 'rxjs/operators';
 import { validatePackage } from '@progress/kendo-licensing';
 import { CommonModule } from '@angular/common';
 import { PopupService, PopupModule } from '@progress/kendo-angular-popup';
+import { filter, take } from 'rxjs/operators';
 import { sequence, query, style, stagger, animate, AnimationBuilder } from '@angular/animations';
 
 /**
@@ -18,16 +18,12 @@ import { sequence, query, style, stagger, animate, AnimationBuilder } from '@ang
  */
 var KendoButtonService = /** @class */ (function () {
     function KendoButtonService() {
-        this.buttonLookChange = new BehaviorSubject('default');
         this.buttonClicked = new Subject();
         this.buttonClicked$ = this.buttonClicked.asObservable();
     }
     KendoButtonService.prototype.click = function (button) {
         this.buttonClicked.next(button);
     };
-    KendoButtonService.prototype.setButtonLook = function (look) {
-        this.buttonLookChange.next(look);
-    };
     KendoButtonService = __decorate([
         Injectable()
     ], KendoButtonService);
@@ -41,11 +37,105 @@ 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'
 };
 
+/* tslint:disable:no-null-keyword */
+/* tslint:disable:no-bitwise */
+var resolvedPromise = Promise.resolve(null);
+/**
+ * @hidden
+ */
+var isPresent = function (value) { return value !== null && value !== undefined; };
+/**
+ * @hidden
+ */
+var tick = function (f) { return (resolvedPromise.then(f)); };
+/**
+ * @hidden
+ */
+function isDocumentNode(container) {
+    return container.nodeType === 9;
+}
+/**
+ * @hidden
+ */
+function closest(element, selector) {
+    if (element.closest) {
+        return element.closest(selector);
+    }
+    var matches = Element.prototype.matches ?
+        function (el, sel) { return el.matches(sel); }
+        : function (el, sel) { return el.msMatchesSelector(sel); };
+    var node = element;
+    while (node && !isDocumentNode(node)) {
+        if (matches(node, selector)) {
+            return node;
+        }
+        node = node.parentNode;
+    }
+}
+/**
+ * @hidden
+ */
+var replaceMessagePlaceholder = function (message, name, value) {
+    return message.replace(new RegExp("{\\s*" + name + "\\s*}", 'g'), value);
+};
+/**
+ * @hidden
+ */
+var SIZES = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg'
+};
+var ROUNDNESS = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg',
+    full: 'full'
+};
+/**
+ * @hidden
+ *
+ * Returns the styling classes to be added and removed
+ */
+var getStylingClasses = function (componentType, stylingOption, previousValue, newValue) {
+    switch (stylingOption) {
+        case 'size':
+            return {
+                toRemove: "k-" + componentType + "-" + SIZES[previousValue],
+                toAdd: newValue ? "k-" + componentType + "-" + SIZES[newValue] : null
+            };
+        case 'rounded':
+            return {
+                toRemove: "k-rounded-" + ROUNDNESS[previousValue],
+                toAdd: newValue ? "k-rounded-" + ROUNDNESS[newValue] : null
+            };
+        case 'fillMode':
+        case 'shape':
+            return {
+                toRemove: "k-" + componentType + "-" + previousValue,
+                toAdd: newValue ? "k-" + componentType + "-" + newValue : null
+            };
+        default:
+            break;
+    }
+};
+/**
+ * @hidden
+ *
+ * Returns the themeColor classes to be added and removed
+ */
+var getThemeColorClasses = function (componentType, prevFillMode, fillMode, previousValue, newValue) {
+    return {
+        toRemove: "k-" + componentType + "-" + prevFillMode + "-" + previousValue,
+        toAdd: newValue ? "k-" + componentType + "-" + fillMode + "-" + newValue : null
+    };
+};
+
 var SPAN_TAG_NAME = 'SPAN';
 /**
  * Represents the Kendo UI Button component for Angular.
@@ -60,19 +150,6 @@ var ButtonDirective = /** @class */ (function () {
          * By default, `toggleable` is set to `false`.
          */
         this.toggleable = false;
-        /**
-         * Adds visual weight to the Button and makes it primary.
-         */
-        this.primary = false;
-        /**
-         * Changes the visual appearance by using alternative styling options
-         * ([more information and examples]({% slug appearance_button %})).
-         *
-         * The available values are:
-         * * [`ButtonLook`]({% slug api_buttons_buttonlook %}) = `flat` | `outline`
-         * * `clear`
-         */
-        this.look = 'default';
         /**
          * @hidden
          */
@@ -90,14 +167,18 @@ var ButtonDirective = /** @class */ (function () {
         this.isDisabled = false;
         this.isIcon = false;
         this.isIconClass = false;
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._shape = 'rectangle';
+        this._fillMode = 'solid';
+        this._themeColor = 'base';
         this._focused = false;
         this.domEvents = [];
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.localizationChangeSubscription = localization.changes
-            .subscribe(function (_a) {
+        this.localizationChangeSubscription = localization.changes.subscribe(function (_a) {
             var rtl = _a.rtl;
-            return _this.direction = rtl ? 'rtl' : 'ltr';
+            return (_this.direction = rtl ? 'rtl' : 'ltr');
         });
         this.element = element.nativeElement;
         this.renderer = renderer;
@@ -156,7 +237,7 @@ var ButtonDirective = /** @class */ (function () {
             if (icon) {
                 this.iconSetter(icon, function () {
                     _this.isIcon = true;
-                    var classes = 'k-icon k-i-' + icon;
+                    var classes = 'k-button-icon k-icon k-i-' + icon;
                     _this.addIcon(classes);
                 });
             }
@@ -178,7 +259,8 @@ var ButtonDirective = /** @class */ (function () {
             if (iconClassName) {
                 this.iconSetter(iconClassName, function () {
                     _this.isIconClass = true;
-                    _this.addIcon(iconClassName);
+                    var classes = 'k-button-icon k-icon ' + iconClassName;
+                    _this.addIcon(classes);
                 });
             }
             else {
@@ -219,62 +301,140 @@ var ButtonDirective = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ButtonDirective.prototype, "isFocused", {
+    Object.defineProperty(ButtonDirective.prototype, "size", {
         get: function () {
-            return this._focused;
+            return this._size;
         },
-        set: function (isFocused) {
-            this.toggleClass('k-state-focused', isFocused);
-            this._focused = isFocused;
+        /**
+         * The size property specifies the width and height of the Button
+         * ([see example]({% slug appearance_buttondirective %}#toc-size)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
+         */
+        set: function (size) {
+            this.handleClasses(size, 'size');
+            this._size = size;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ButtonDirective.prototype, "classButton", {
+    Object.defineProperty(ButtonDirective.prototype, "rounded", {
         get: function () {
-            return true;
+            return this._rounded;
+        },
+        /**
+         * The rounded property specifies the border radius of the Button
+         * ([see example]({% slug appearance_buttondirective %}#toc-rounded)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `'full'`
+         * * `null`
+         */
+        set: function (rounded) {
+            this.handleClasses(rounded, 'rounded');
+            this._rounded = rounded;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ButtonDirective.prototype, "classPrimary", {
+    Object.defineProperty(ButtonDirective.prototype, "fillMode", {
         get: function () {
-            return this.primary;
+            return this._fillMode;
+        },
+        /**
+         * The fillMode property specifies the background and border styles of the Button
+         * ([see example]({% slug appearance_buttondirective %}#toc-fillMode)).
+         *
+         * The possible values are:
+         * * `'flat'`
+         * * `'solid'` (default)
+         * * `'outline'`
+         * * `'link'`
+         * * `null`
+         */
+        set: function (fillMode) {
+            this.handleClasses(fillMode, 'fillMode');
+            this._fillMode = fillMode;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ButtonDirective.prototype, "isToggleable", {
+    Object.defineProperty(ButtonDirective.prototype, "themeColor", {
         get: function () {
-            return this.toggleable;
+            return this._themeColor;
+        },
+        /**
+         * 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 appearance_buttondirective %}#toc-themeColor)).
+         *
+         * The possible values are:
+         * * `'base'` (default)
+         * * `'primary'`
+         * * `'secondary'`
+         * * `'tertiary'`
+         * * `'info'`
+         * * `'success'`
+         * * `'warning'`
+         * * `'error'`
+         * * `'dark'`
+         * * `'light`'
+         * * `'inverse'`
+         */
+        set: function (themeColor) {
+            this.handleThemeColor(themeColor);
+            this._themeColor = themeColor;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ButtonDirective.prototype, "isFlat", {
+    Object.defineProperty(ButtonDirective.prototype, "shape", {
         get: function () {
-            return this.look === 'flat';
+            return this._shape;
+        },
+        /**
+         * The shape property specifies if the Button will form a rectangle or square.
+         * ([see example]({% slug appearance_buttondirective %}#toc-shape)).
+         *
+         * The possible values are:
+         * * `'square'`
+         * * `'rectangle'` (default)
+         */
+        set: function (shape) {
+            this.handleClasses(shape, 'shape');
+            this._shape = shape;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ButtonDirective.prototype, "isBare", {
+    Object.defineProperty(ButtonDirective.prototype, "isFocused", {
         get: function () {
-            return this.look === 'bare';
+            return this._focused;
+        },
+        set: function (isFocused) {
+            this.toggleClass('k-focus', isFocused);
+            this._focused = isFocused;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ButtonDirective.prototype, "isOutline", {
+    Object.defineProperty(ButtonDirective.prototype, "classButton", {
         get: function () {
-            return this.look === 'outline';
+            return true;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ButtonDirective.prototype, "isClear", {
+    Object.defineProperty(ButtonDirective.prototype, "isToggleable", {
         get: function () {
-            return this.look === 'clear';
+            return this.toggleable;
         },
         enumerable: true,
         configurable: true
@@ -319,14 +479,40 @@ var ButtonDirective = /** @class */ (function () {
     ButtonDirective.prototype.onBlur = function () {
         this.isFocused = false;
     };
+    Object.defineProperty(ButtonDirective.prototype, "primary", {
+        /**
+         * @hidden
+         */
+        set: function (value) {
+            this.themeColor = value ? 'primary' : 'base';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ButtonDirective.prototype, "look", {
+        /**
+         * @hidden
+         */
+        set: function (value) {
+            switch (value) {
+                case 'default':
+                    this.fillMode = 'solid';
+                    break;
+                case 'clear':
+                    this.fillMode = 'link';
+                    break;
+                default:
+                    this.fillMode = value;
+                    break;
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     ButtonDirective.prototype.ngOnInit = function () {
         var _this = this;
         var isSpan = this.element.tagName === SPAN_TAG_NAME;
-        if (this.service) {
-            this.buttonLookChangeSubscription = this.service.buttonLookChange
-                .pipe(filter(function (look) { return look !== 'default'; }))
-                .subscribe(function (look) { return _this.look = look; });
-        }
+        this.addTextSpan();
         if (!this.element.hasAttribute('role') && this.togglable) {
             this.toggleAriaPressed(this.toggleable);
         }
@@ -336,7 +522,8 @@ var ButtonDirective = /** @class */ (function () {
         this.ngZone.runOutsideAngular(function () {
             _this.domEvents.push(_this.renderer.listen(_this.element, 'click', _this._onButtonClick.bind(_this)));
             _this.domEvents.push(_this.renderer.listen(_this.element, 'keydown', function (event) {
-                if (isSpan && (event.keyCode === Keys.Space || event.keyCode === Keys.Enter)) {
+                var isSpaceOrEnter = event.keyCode === Keys.Space || event.keyCode === Keys.Enter;
+                if (isSpan && isSpaceOrEnter) {
                     _this.click.emit(event);
                     _this._onButtonClick();
                 }
@@ -348,17 +535,22 @@ var ButtonDirective = /** @class */ (function () {
             this.toggleAriaPressed(this.toggleable);
         }
     };
+    ButtonDirective.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        var stylingOptions = ['size', 'rounded', 'shape', 'fillMode'];
+        stylingOptions.forEach(function (input) {
+            _this.handleClasses(_this[input], input);
+        });
+    };
     ButtonDirective.prototype.ngAfterViewChecked = function () {
         this.setIconTextClasses();
     };
     ButtonDirective.prototype.ngOnDestroy = function () {
         this.imageNode = null;
         this.iconNode = null;
+        this.iconSpanNode = null;
         this.renderer = null;
         this.localizationChangeSubscription.unsubscribe();
-        if (this.service && this.buttonLookChangeSubscription) {
-            this.buttonLookChangeSubscription.unsubscribe();
-        }
         clearTimeout(this.deferTimeout);
         this.domEvents.forEach(function (unbindHandler) { return unbindHandler(); });
     };
@@ -402,7 +594,7 @@ var ButtonDirective = /** @class */ (function () {
         var changed = this.selected !== value;
         this.selected = value;
         this.setAttribute('aria-pressed', this.selected.toString());
-        this.toggleClass('k-state-selected', this.selected);
+        this.toggleClass('k-selected', this.selected);
         if (changed && hasObservers(this.selectedChange)) {
             this.ngZone.run(function () {
                 _this.selectedChange.emit(value);
@@ -422,14 +614,25 @@ var ButtonDirective = /** @class */ (function () {
     };
     ButtonDirective.prototype.hasText = function () {
         if (isDocumentAvailable()) {
-            return String(this.element.textContent).trim().length > 0;
+            return this.element.textContent.trim().length > 0;
         }
         else {
             return false;
         }
     };
+    Object.defineProperty(ButtonDirective.prototype, "text", {
+        get: function () {
+            if (isDocumentAvailable()) {
+                return this.element.innerHTML.trim();
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     ButtonDirective.prototype.addImgIcon = function (imageUrl) {
         var renderer = this.renderer;
+        this.iconSpanNode = renderer.createElement('span');
+        renderer.setProperty(this.iconSpanNode, 'className', 'k-button-icon k-icon');
         if (this.imageNode) {
             renderer.setProperty(this.imageNode, 'src', imageUrl);
         }
@@ -438,8 +641,9 @@ var ButtonDirective = /** @class */ (function () {
             renderer.setProperty(this.imageNode, 'src', imageUrl);
             renderer.setProperty(this.imageNode, 'className', 'k-image');
             renderer.setAttribute(this.imageNode, 'role', 'presentation');
-            this.prependChild(this.imageNode);
         }
+        this.iconSpanNode.appendChild(this.imageNode);
+        this.prependChild(this.iconSpanNode);
     };
     ButtonDirective.prototype.addIcon = function (classNames) {
         var renderer = this.renderer;
@@ -453,6 +657,11 @@ var ButtonDirective = /** @class */ (function () {
             this.prependChild(this.iconNode);
         }
     };
+    ButtonDirective.prototype.addTextSpan = function () {
+        if (isDocumentAvailable() && this.hasText()) {
+            this.element.innerHTML = "<span class='k-button-text'>" + this.text + "</span>";
+        }
+    };
     ButtonDirective.prototype.prependChild = function (node) {
         var _this = this;
         this.defer(function () {
@@ -476,7 +685,9 @@ var ButtonDirective = /** @class */ (function () {
     ButtonDirective.prototype.removeImageNode = function () {
         if (this.imageNode && this.renderer.parentNode(this.imageNode)) {
             this.renderer.removeChild(this.element, this.imageNode);
+            this.renderer.removeChild(this.element, this.iconSpanNode);
             this.imageNode = null;
+            this.iconSpanNode = null;
         }
     };
     ButtonDirective.prototype.removeIconNode = function () {
@@ -484,6 +695,10 @@ var ButtonDirective = /** @class */ (function () {
             this.renderer.removeChild(this.element, this.iconNode);
             this.iconNode = null;
         }
+        if (this.iconSpanNode) {
+            this.renderer.removeChild(this.element, this.iconSpanNode);
+            this.iconSpanNode = null;
+        }
     };
     ButtonDirective.prototype.updateIconNode = function () {
         if (!this.isIcon && !this.isIconClass) {
@@ -492,9 +707,7 @@ var ButtonDirective = /** @class */ (function () {
     };
     ButtonDirective.prototype.setIconTextClasses = function () {
         var hasIcon = this.isIcon || this.isIconClass || this.imageNode;
-        var hasText = this.hasText();
-        this.toggleClass('k-button-icon', hasIcon && !hasText);
-        this.toggleClass('k-button-icontext', hasIcon && hasText);
+        this.toggleClass('k-icon-button', hasIcon && !this.hasText());
     };
     ButtonDirective.prototype.toggleClass = function (className, add) {
         if (add) {
@@ -515,6 +728,31 @@ var ButtonDirective = /** @class */ (function () {
             this.setSelected(!this.selected);
         }
     };
+    ButtonDirective.prototype.handleClasses = function (value, input) {
+        var elem = this.element;
+        var classes = getStylingClasses('button', input, this[input], value);
+        if (input === 'fillMode') {
+            this.handleThemeColor(this.themeColor, this[input], value);
+        }
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    };
+    ButtonDirective.prototype.handleThemeColor = function (value, prevFillMode, fillMode) {
+        var elem = this.element;
+        var removeFillMode = prevFillMode ? prevFillMode : this.fillMode;
+        var addFillMode = fillMode ? fillMode : this.fillMode;
+        var themeColorClass = getThemeColorClasses('button', removeFillMode, addFillMode, this.themeColor, value);
+        this.renderer.removeClass(elem, themeColorClass.toRemove);
+        if (addFillMode !== null && fillMode !== null) {
+            if (themeColorClass.toAdd) {
+                this.renderer.addClass(elem, themeColorClass.toAdd);
+            }
+        }
+    };
     __decorate([
         Input(),
         __metadata("design:type", Boolean)
@@ -524,14 +762,6 @@ var ButtonDirective = /** @class */ (function () {
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [Boolean])
     ], ButtonDirective.prototype, "togglable", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean)
-    ], ButtonDirective.prototype, "primary", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ButtonDirective.prototype, "look", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Boolean),
@@ -562,6 +792,31 @@ var ButtonDirective = /** @class */ (function () {
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [Boolean])
     ], ButtonDirective.prototype, "disabled", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], ButtonDirective.prototype, "size", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], ButtonDirective.prototype, "rounded", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], ButtonDirective.prototype, "fillMode", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], ButtonDirective.prototype, "themeColor", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], ButtonDirective.prototype, "shape", null);
     __decorate([
         Input(),
         __metadata("design:type", String)
@@ -579,36 +834,11 @@ var ButtonDirective = /** @class */ (function () {
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], ButtonDirective.prototype, "classButton", null);
-    __decorate([
-        HostBinding('class.k-primary'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], ButtonDirective.prototype, "classPrimary", null);
     __decorate([
         HostBinding('class.k-toggle-button'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], ButtonDirective.prototype, "isToggleable", null);
-    __decorate([
-        HostBinding('class.k-flat'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], ButtonDirective.prototype, "isFlat", null);
-    __decorate([
-        HostBinding('class.k-bare'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], ButtonDirective.prototype, "isBare", null);
-    __decorate([
-        HostBinding('class.k-outline'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], ButtonDirective.prototype, "isOutline", null);
-    __decorate([
-        HostBinding('class.k-button-clear'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], ButtonDirective.prototype, "isClear", null);
     __decorate([
         HostBinding('attr.role'),
         __metadata("design:type", String),
@@ -616,12 +846,12 @@ var ButtonDirective = /** @class */ (function () {
     ], ButtonDirective.prototype, "roleSetter", null);
     __decorate([
         HostBinding('attr.aria-disabled'),
-        HostBinding('class.k-state-disabled'),
+        HostBinding('class.k-disabled'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], ButtonDirective.prototype, "classDisabled", null);
     __decorate([
-        HostBinding('class.k-state-selected'),
+        HostBinding('class.k-selected'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], ButtonDirective.prototype, "classActive", null);
@@ -642,6 +872,16 @@ var ButtonDirective = /** @class */ (function () {
         __metadata("design:paramtypes", []),
         __metadata("design:returntype", void 0)
     ], ButtonDirective.prototype, "onBlur", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [Boolean])
+    ], ButtonDirective.prototype, "primary", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], ButtonDirective.prototype, "look", null);
     ButtonDirective = __decorate([
         Directive({
             exportAs: 'kendoButton',
@@ -652,7 +892,7 @@ var ButtonDirective = /** @class */ (function () {
                     useValue: 'kendo.button'
                 }
             ],
-            selector: 'button[kendoButton], span[kendoButton]' // tslint:disable-line
+            selector: 'button[kendoButton], span[kendoButton]',
         }),
         __param(2, Optional()),
         __metadata("design:paramtypes", [ElementRef,
@@ -664,48 +904,6 @@ var ButtonDirective = /** @class */ (function () {
     return ButtonDirective;
 }());
 
-/* tslint:disable:no-null-keyword */
-/* tslint:disable:no-bitwise */
-var resolvedPromise = Promise.resolve(null);
-/**
- * @hidden
- */
-var isPresent = function (value) { return value !== null && value !== undefined; };
-/**
- * @hidden
- */
-var tick = function (f) { return (resolvedPromise.then(f)); };
-/**
- * @hidden
- */
-function isDocumentNode(container) {
-    return container.nodeType === 9;
-}
-/**
- * @hidden
- */
-function closest(element, selector) {
-    if (element.closest) {
-        return element.closest(selector);
-    }
-    var matches = Element.prototype.matches ?
-        function (el, sel) { return el.matches(sel); }
-        : function (el, sel) { return el.msMatchesSelector(sel); };
-    var node = element;
-    while (node && !isDocumentNode(node)) {
-        if (matches(node, selector)) {
-            return node;
-        }
-        node = node.parentNode;
-    }
-}
-/**
- * @hidden
- */
-var replaceMessagePlaceholder = function (message, name, value) {
-    return message.replace(new RegExp("{\\s*" + name + "\\s*}", 'g'), value);
-};
-
 /**
  * @hidden
  */
@@ -747,17 +945,6 @@ var ButtonGroupComponent = /** @class */ (function () {
          * By default, the selection mode of the ButtonGroup is set to `multiple`.
          */
         this.selection = 'multiple';
-        /**
-         * Changes the visual appearance by using alternative styling options
-         * ([more information and examples]({% slug styling_buttongroup %})).
-         * The `look` property of the ButtonGroup takes precedence over the `look` property
-         * of the individual buttons that are part of the group.
-         *
-         * The available values are:
-         * * `flat`
-         * * `outline`
-         */
-        this.look = 'default';
         /**
          * Fires every time keyboard navigation occurs.
          */
@@ -804,27 +991,6 @@ var ButtonGroupComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ButtonGroupComponent.prototype, "isFlat", {
-        get: function () {
-            return this.look === 'flat';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ButtonGroupComponent.prototype, "isBare", {
-        get: function () {
-            return this.look === 'bare';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ButtonGroupComponent.prototype, "isOutline", {
-        get: function () {
-            return this.look === 'outline';
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(ButtonGroupComponent.prototype, "getRole", {
         get: function () {
             return this.isSelectionSingle() ? 'radiogroup' : 'group';
@@ -890,7 +1056,6 @@ var ButtonGroupComponent = /** @class */ (function () {
     };
     ButtonGroupComponent.prototype.ngOnInit = function () {
         var _this = this;
-        this.service.setButtonLook(this.look);
         this.subscription = this.service.buttonClicked$.subscribe(function (button) {
             var newSelectionValue;
             if (_this.isSelectionSingle()) {
@@ -1010,10 +1175,6 @@ var ButtonGroupComponent = /** @class */ (function () {
         Input('width'),
         __metadata("design:type", String)
     ], ButtonGroupComponent.prototype, "width", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ButtonGroupComponent.prototype, "look", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Number),
@@ -1033,7 +1194,7 @@ var ButtonGroupComponent = /** @class */ (function () {
         __metadata("design:paramtypes", [])
     ], ButtonGroupComponent.prototype, "wrapperClass", null);
     __decorate([
-        HostBinding('class.k-state-disabled'),
+        HostBinding('class.k-disabled'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], ButtonGroupComponent.prototype, "disabledClass", null);
@@ -1042,21 +1203,6 @@ var ButtonGroupComponent = /** @class */ (function () {
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], ButtonGroupComponent.prototype, "stretchedClass", null);
-    __decorate([
-        HostBinding('class.k-button-group-flat'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], ButtonGroupComponent.prototype, "isFlat", null);
-    __decorate([
-        HostBinding('class.k-button-group-bare'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], ButtonGroupComponent.prototype, "isBare", null);
-    __decorate([
-        HostBinding('class.k-button-group-outline'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], ButtonGroupComponent.prototype, "isOutline", null);
     __decorate([
         HostBinding('attr.role'),
         __metadata("design:type", String),
@@ -1253,8 +1399,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;
@@ -1293,10 +1452,15 @@ var ListComponent = /** @class */ (function () {
         Output(),
         __metadata("design:type", EventEmitter)
     ], ListComponent.prototype, "onItemBlur", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], ListComponent.prototype, "size", null);
     ListComponent = __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      "
         }),
         __metadata("design:paramtypes", [])
     ], ListComponent);
@@ -1352,10 +1516,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');
         }
     };
     /**
@@ -1371,11 +1535,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');
             }
         });
     };
@@ -1511,7 +1675,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);
             }
@@ -1900,13 +2064,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.look = 'default';
+        _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` &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.
+         */
+        _this.themeColor = 'base';
         /**
          * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
          */
@@ -2091,33 +2300,19 @@ var SplitButtonComponent = /** @class */ (function (_super) {
     Object.defineProperty(SplitButtonComponent.prototype, "componentTabIndex", {
         /**
          * @hidden
-         */
-        get: function () {
-            return this.disabled ? -1 : this.tabIndex;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SplitButtonComponent.prototype, "isFocused", {
-        get: function () {
-            return this._isFocused && !this._disabled;
-        },
-        set: function (value) {
-            this._isFocused = value;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SplitButtonComponent.prototype, "isFlat", {
+         */
         get: function () {
-            return this.look === 'flat';
+            return this.disabled ? -1 : this.tabIndex;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(SplitButtonComponent.prototype, "isOutline", {
+    Object.defineProperty(SplitButtonComponent.prototype, "isFocused", {
         get: function () {
-            return this.look === 'outline';
+            return this._isFocused && !this._disabled;
+        },
+        set: function (value) {
+            this._isFocused = value;
         },
         enumerable: true,
         configurable: true
@@ -2409,7 +2604,19 @@ var SplitButtonComponent = /** @class */ (function (_super) {
     __decorate([
         Input(),
         __metadata("design:type", String)
-    ], SplitButtonComponent.prototype, "look", void 0);
+    ], SplitButtonComponent.prototype, "size", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], SplitButtonComponent.prototype, "rounded", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], SplitButtonComponent.prototype, "fillMode", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], SplitButtonComponent.prototype, "themeColor", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Boolean),
@@ -2490,20 +2697,10 @@ var SplitButtonComponent = /** @class */ (function (_super) {
         __metadata("design:type", ViewContainerRef)
     ], SplitButtonComponent.prototype, "containerRef", void 0);
     __decorate([
-        HostBinding('class.k-state-focused'),
+        HostBinding('class.k-focus'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [Boolean])
     ], SplitButtonComponent.prototype, "isFocused", null);
-    __decorate([
-        HostBinding('class.k-flat'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], SplitButtonComponent.prototype, "isFlat", null);
-    __decorate([
-        HostBinding('class.k-outline'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], SplitButtonComponent.prototype, "isOutline", null);
     __decorate([
         HostBinding('class.k-split-button'),
         HostBinding('class.k-button-group'),
@@ -2547,7 +2744,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    "
         }),
         __metadata("design:paramtypes", [FocusService,
             NavigationService,
@@ -2715,17 +2912,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.size = 'medium';
+        /**
+         * 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.primary = false;
+        _this.rounded = 'medium';
         /**
-         * Changes the visual appearance by using alternative styling options.
+         * 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` &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 [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
          */
@@ -2864,20 +3114,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;
@@ -3155,12 +3391,24 @@ var DropDownButtonComponent = /** @class */ (function (_super) {
     ], DropDownButtonComponent.prototype, "data", null);
     __decorate([
         Input(),
-        __metadata("design:type", Boolean)
-    ], DropDownButtonComponent.prototype, "primary", void 0);
+        __metadata("design:type", String)
+    ], DropDownButtonComponent.prototype, "size", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], DropDownButtonComponent.prototype, "shape", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], DropDownButtonComponent.prototype, "rounded", void 0);
     __decorate([
         Input(),
         __metadata("design:type", String)
-    ], DropDownButtonComponent.prototype, "look", void 0);
+    ], DropDownButtonComponent.prototype, "fillMode", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], DropDownButtonComponent.prototype, "themeColor", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Object)
@@ -3190,20 +3438,10 @@ var DropDownButtonComponent = /** @class */ (function (_super) {
         __metadata("design:type", EventEmitter)
     ], DropDownButtonComponent.prototype, "onBlur", void 0);
     __decorate([
-        HostBinding('class.k-state-focused'),
+        HostBinding('class.k-focus'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], DropDownButtonComponent.prototype, "focused", null);
-    __decorate([
-        HostBinding('class.k-flat'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], DropDownButtonComponent.prototype, "isFlat", null);
-    __decorate([
-        HostBinding('class.k-outline'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], DropDownButtonComponent.prototype, "isOutline", null);
     __decorate([
         HostBinding('class.k-dropdown-button'),
         __metadata("design:type", Boolean),
@@ -3278,7 +3516,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    "
         }),
         __metadata("design:paramtypes", [FocusService,
             NavigationService,
@@ -3322,38 +3560,20 @@ var ChipComponent = /** @class */ (function () {
         this.renderer = renderer;
         this.ngZone = ngZone;
         this.localizationService = localizationService;
-        /**
-         * Changes the visual appearance by using alternative styling options.
-         *
-         * The available values are:
-         * * `solid`
-         * * `outline`
-         * * `filled` (The `filled` option will be deprecated. To apply identical styling, use `solid` instead).
-         * * `outlined` (The `outlined` option will be deprecated. To apply identical styling, use `outline` instead).
-         */
-        this.look = 'solid';
         /**
          * Specifies the selected state of the Chip.
+         * @default false
          */
         this.selected = false;
         /**
          * Specifies if the Chip will be removable or not.
          * If the property is set to `true`, the Chip renders a remove icon.
+         * @default false
          */
         this.removable = false;
-        /**
-         * Specifies the Chip type.
-         *
-         * The possible values are:
-         * - `none` (default)
-         * - `success`
-         * - `error`
-         * - `warning`
-         * - `info`
-         */
-        this.type = 'none';
         /**
          * If set to `true`, the Chip will be disabled.
+         * @default false
          */
         this.disabled = false;
         /**
@@ -3366,34 +3586,111 @@ var ChipComponent = /** @class */ (function () {
         this.contentClick = new EventEmitter();
         this.tabIndex = 0;
         this.hostClass = true;
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
+        this._themeColor = 'base';
         this.focused = false;
         validatePackage(packageMetadata);
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
-    Object.defineProperty(ChipComponent.prototype, "ariaChecked", {
+    Object.defineProperty(ChipComponent.prototype, "size", {
         get: function () {
-            return this.selected;
+            return this._size;
+        },
+        /**
+         * The size property specifies the height, padding and line height of the Chip
+         * ([see example]({% slug appearance_chip %}#toc-size)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
+         */
+        set: function (size) {
+            this.handleClasses(size, 'size');
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ChipComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * The rounded property specifies the border radius of the Chip
+         * ([see example]({% slug appearance_chip %}#toc-rounded)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `'full'`
+         * * `null`
+         */
+        set: function (rounded) {
+            this.handleClasses(rounded, 'rounded');
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ChipComponent.prototype, "fillMode", {
+        get: function () {
+            return this._fillMode;
+        },
+        /**
+         * The fillMode property specifies the background and border styles of the Chip
+         * ([see example]({% slug appearance_chip %}#toc-fillMode)).
+         *
+         * The possible values are:
+         * * `'solid'` (default)
+         * * `'outline'`
+         * * `null`
+         */
+        set: function (fillMode) {
+            this.handleClasses(fillMode, 'fillMode');
+            this._fillMode = fillMode;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ChipComponent.prototype, "outlineClass", {
+    Object.defineProperty(ChipComponent.prototype, "themeColor", {
         get: function () {
-            return this.look === 'outline' || this.look === 'outlined';
+            return this._themeColor;
+        },
+        /**
+         * The Chip 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 appearance_chip %}#toc-themeColor)).
+         *
+         * The possible values are:
+         * * `'base'` (default)
+         * * `'info'`
+         * * `'success'`
+         * * `'warning'`
+         * * `'error'`
+         * * `null`
+         */
+        set: function (themeColor) {
+            this.handleThemeColor(themeColor);
+            this._themeColor = themeColor;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ChipComponent.prototype, "solidClass", {
+    Object.defineProperty(ChipComponent.prototype, "ariaChecked", {
         get: function () {
-            return this.look === 'solid' || this.look === 'filled';
+            return this.selected;
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(ChipComponent.prototype, "hasIconClass", {
         get: function () {
-            return this.icon || this.iconClass ? true : false;
+            return this.icon || this.iconClass || this.avatarClass ? true : false;
         },
         enumerable: true,
         configurable: true
@@ -3436,44 +3733,48 @@ var ChipComponent = /** @class */ (function () {
         }
     };
     ChipComponent.prototype.ngAfterViewInit = function () {
+        var _this = this;
         var chip = this.element.nativeElement;
-        var typeClass = this.typeClass();
-        if (this.type !== 'none') {
-            this.renderer.addClass(chip, typeClass);
-        }
+        var stylingOptions = ['size', 'rounded', 'fillMode'];
+        stylingOptions.forEach(function (input) {
+            _this.handleClasses(_this[input], input);
+        });
         this.attachElementEventHandlers(chip);
     };
-    Object.defineProperty(ChipComponent.prototype, "iconClasses", {
+    Object.defineProperty(ChipComponent.prototype, "kendoIconClass", {
         /**
          * @hidden
          */
         get: function () {
-            var classes = [];
-            if (this.iconClass) {
-                classes.push("" + this.iconClass);
-            }
-            if (this.icon) {
-                classes.push("k-icon k-i-" + this.icon);
-            }
-            return classes;
+            this.verifyIconSettings([this.iconClass, this.avatarClass]);
+            return "k-i-" + this.icon;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ChipComponent.prototype, "selectedIconClasses", {
+    Object.defineProperty(ChipComponent.prototype, "customIconClass", {
         /**
          * @hidden
          */
         get: function () {
-            if (this.selectedIcon) {
-                return "" + this.selectedIcon;
-            }
-            return "k-icon k-i-check";
+            this.verifyIconSettings([this.icon, this.avatarClass]);
+            return "" + this.iconClass;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ChipComponent.prototype, "chipAvatarClass", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            this.verifyIconSettings([this.icon, this.iconClass]);
+            return "" + this.avatarClass;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ChipComponent.prototype, "removeIconClasses", {
+    Object.defineProperty(ChipComponent.prototype, "removeIconClass", {
         /**
          * @hidden
          */
@@ -3481,23 +3782,11 @@ var ChipComponent = /** @class */ (function () {
             if (this.removeIcon) {
                 return "" + this.removeIcon;
             }
-            return "k-icon k-i-close-circle";
+            return "k-i-close-circle";
         },
         enumerable: true,
         configurable: true
     });
-    /**
-     * @hidden
-     */
-    ChipComponent.prototype.typeClass = function () {
-        return {
-            'none': '',
-            'success': 'k-chip-success',
-            'warning': 'k-chip-warning',
-            'error': 'k-chip-error',
-            'info': 'k-chip-info'
-        }[this.type];
-    };
     /**
      * Focuses the Chip component.
      */
@@ -3532,7 +3821,7 @@ var ChipComponent = /** @class */ (function () {
                 _this.renderer.removeClass(chip, 'k-focus');
             });
             var contentClickListener = _this.renderer.listen(chip, 'click', function (e) {
-                var isRemoveClicked = closest(e.target, '.k-remove-icon');
+                var isRemoveClicked = closest(e.target, '.k-chip-remove-action');
                 if (!isRemoveClicked) {
                     _this.ngZone.run(function () {
                         _this.contentClick.emit({ sender: _this, originalEvent: e });
@@ -3546,10 +3835,42 @@ var ChipComponent = /** @class */ (function () {
             };
         });
     };
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ChipComponent.prototype, "look", void 0);
+    /**
+     * @hidden
+     */
+    ChipComponent.prototype.verifyIconSettings = function (iconsToCheck) {
+        if (isDevMode()) {
+            if (iconsToCheck.filter(function (icon) { return icon !== null && icon !== undefined; }).length > 0) {
+                this.renderer.removeClass(this.element.nativeElement, 'k-chip-has-icon');
+                throw new Error('Invalid configuration: Having multiple icons is not supported. Only a single icon on a chip can be displayed.');
+            }
+        }
+    };
+    ChipComponent.prototype.handleClasses = function (value, input) {
+        var elem = this.element.nativeElement;
+        var classes = getStylingClasses('chip', input, this[input], value);
+        if (input === 'fillMode') {
+            this.handleThemeColor(this.themeColor, this[input], value);
+        }
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    };
+    ChipComponent.prototype.handleThemeColor = function (value, prevFillMode, fillMode) {
+        var elem = this.element.nativeElement;
+        var removeFillMode = prevFillMode ? prevFillMode : this.fillMode;
+        var addFillMode = fillMode ? fillMode : this.fillMode;
+        var themeColorClass = getThemeColorClasses('chip', removeFillMode, addFillMode, this.themeColor, value);
+        this.renderer.removeClass(elem, themeColorClass.toRemove);
+        if (addFillMode !== null && fillMode !== null) {
+            if (themeColorClass.toAdd) {
+                this.renderer.addClass(elem, themeColorClass.toAdd);
+            }
+        }
+    };
     __decorate([
         Input(),
         __metadata("design:type", String)
@@ -3564,12 +3885,12 @@ var ChipComponent = /** @class */ (function () {
     ], ChipComponent.prototype, "iconClass", void 0);
     __decorate([
         Input(),
-        __metadata("design:type", Boolean)
-    ], ChipComponent.prototype, "selected", void 0);
+        __metadata("design:type", String)
+    ], ChipComponent.prototype, "avatarClass", void 0);
     __decorate([
         Input(),
-        __metadata("design:type", String)
-    ], ChipComponent.prototype, "selectedIcon", void 0);
+        __metadata("design:type", Boolean)
+    ], ChipComponent.prototype, "selected", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Boolean)
@@ -3578,14 +3899,30 @@ var ChipComponent = /** @class */ (function () {
         Input(),
         __metadata("design:type", String)
     ], ChipComponent.prototype, "removeIcon", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ChipComponent.prototype, "type", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Boolean)
     ], ChipComponent.prototype, "disabled", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], ChipComponent.prototype, "size", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], ChipComponent.prototype, "rounded", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], ChipComponent.prototype, "fillMode", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], ChipComponent.prototype, "themeColor", null);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
@@ -3607,16 +3944,6 @@ var ChipComponent = /** @class */ (function () {
         HostBinding('class.k-chip'),
         __metadata("design:type", Boolean)
     ], ChipComponent.prototype, "hostClass", void 0);
-    __decorate([
-        HostBinding('class.k-chip-outline'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], ChipComponent.prototype, "outlineClass", null);
-    __decorate([
-        HostBinding('class.k-chip-solid'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], ChipComponent.prototype, "solidClass", null);
     __decorate([
         HostBinding('class.k-chip-has-icon'),
         __metadata("design:type", Boolean),
@@ -3645,7 +3972,7 @@ var ChipComponent = /** @class */ (function () {
     ChipComponent = __decorate([
         Component({
             selector: 'kendo-chip',
-            template: "\n        <span class=\"k-selected-icon-wrapper\">\n            <span *ngIf=\"selected\"\n                class=\"k-selected-icon\"\n                [ngClass]=\"selectedIconClasses\"\n            >\n            </span>\n        </span>\n\n        <span *ngIf=\"icon || iconClass\"\n            class=\"k-chip-icon\"\n            [ngClass]=\"iconClasses\"\n        >\n        </span>\n\n        <span class=\"k-chip-content\">\n            <span class=\"k-chip-label\" *ngIf=\"label\">\n                {{ label }}\n            </span>\n            <ng-content *ngIf=\"!label\"></ng-content>\n        </span>\n\n        <span *ngIf=\"removable\"\n            class=\"k-remove-icon\"\n            (click)=\"onRemoveClick($event)\"\n        >\n            <span [ngClass]=\"removeIconClasses\"></span>\n        </span>\n    ",
+            template: "\n        <span\n            *ngIf=\"icon\"\n            class=\"k-chip-icon k-icon\"\n            [ngClass]=\"kendoIconClass\"\n        >\n        </span>\n\n        <span\n            *ngIf=\"iconClass\"\n            class=\"k-chip-icon\"\n            [ngClass]=\"customIconClass\"\n        >\n        </span>\n\n        <span\n            *ngIf=\"avatarClass\"\n            class=\"k-chip-avatar k-avatar k-rounded-full\"\n        >\n            <span class=\"k-avatar-image\" [ngClass]=\"chipAvatarClass\"></span>\n        </span>\n\n        <span class=\"k-chip-content\">\n            <span class=\"k-chip-label\" *ngIf=\"label\">\n                {{ label }}\n            </span>\n            <ng-content *ngIf=\"!label\"></ng-content>\n        </span>\n\n        <span class=\"k-chip-actions\">\n            <span class=\"k-chip-action k-chip-remove-action\"\n                *ngIf=\"removable\"\n                (click)=\"onRemoveClick($event)\"\n                >\n                <span\n                    class=\"k-icon\"\n                    [ngClass]=\"removeIconClass\"\n                >\n                </span>\n            </span>\n        </span>\n    ",
             providers: [
                 LocalizationService,
                 {
@@ -3663,9 +3990,10 @@ var ChipComponent = /** @class */ (function () {
 }());
 
 var ChipListComponent = /** @class */ (function () {
-    function ChipListComponent(localizationService, renderer) {
+    function ChipListComponent(localizationService, renderer, element) {
         this.localizationService = localizationService;
         this.renderer = renderer;
+        this.element = element;
         this.hostClass = true;
         /**
          * Sets the selection mode of the ChipList.
@@ -3685,8 +4013,30 @@ var ChipListComponent = /** @class */ (function () {
          */
         this.remove = new EventEmitter();
         this.role = 'listbox';
+        this._size = 'medium';
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
+    Object.defineProperty(ChipListComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * The size property specifies the gap between the Chips in the ChipList
+         * ([see example]({% slug appearance_chiplist %}#toc-size)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
+         */
+        set: function (size) {
+            this.handleClasses(size, 'size');
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(ChipListComponent.prototype, "single", {
         get: function () {
             return this.selection === 'single';
@@ -3706,7 +4056,7 @@ var ChipListComponent = /** @class */ (function () {
      */
     ChipListComponent.prototype.onClick = function ($event) {
         var target = $event.target;
-        var isRemoveClicked = closest(target, '.k-remove-icon');
+        var isRemoveClicked = closest(target, '.k-chip-remove-action');
         var clickedChip = closest(target, '.k-chip');
         var chip = this.chips.find(function (chip) { return clickedChip === chip.element.nativeElement; });
         if (isRemoveClicked && clickedChip) {
@@ -3725,6 +4075,13 @@ var ChipListComponent = /** @class */ (function () {
             return _this.direction = rtl ? 'rtl' : 'ltr';
         });
     };
+    ChipListComponent.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        var stylingInputs = ['size'];
+        stylingInputs.forEach(function (input) {
+            _this.handleClasses(_this[input], input);
+        });
+    };
     ChipListComponent.prototype.ngAfterContentInit = function () {
         var _this = this;
         this.chips.forEach(function (chip) {
@@ -3756,6 +4113,16 @@ var ChipListComponent = /** @class */ (function () {
             }
         });
     };
+    ChipListComponent.prototype.handleClasses = function (value, input) {
+        var elem = this.element.nativeElement;
+        var classes = getStylingClasses('chip-list', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    };
     __decorate([
         HostBinding('class.k-chip-list'),
         __metadata("design:type", Boolean)
@@ -3768,6 +4135,11 @@ var ChipListComponent = /** @class */ (function () {
         Input(),
         __metadata("design:type", String)
     ], ChipListComponent.prototype, "selection", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], ChipListComponent.prototype, "size", null);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
@@ -3802,17 +4174,19 @@ var ChipListComponent = /** @class */ (function () {
     ], ChipListComponent.prototype, "onClick", null);
     ChipListComponent = __decorate([
         Component({
-            selector: 'kendo-chip-list, kendo-chiplist',
+            selector: 'kendo-chiplist, kendo-chip-list',
             template: "\n        <ng-content></ng-content>\n    ",
             providers: [
                 LocalizationService,
                 {
                     provide: L10N_PREFIX,
-                    useValue: 'kendo.chip-list'
+                    useValue: 'kendo.chiplist'
                 }
             ]
         }),
-        __metadata("design:paramtypes", [LocalizationService, Renderer2])
+        __metadata("design:paramtypes", [LocalizationService,
+            Renderer2,
+            ElementRef])
     ], ChipListComponent);
     return ChipListComponent;
 }());
@@ -3981,12 +4355,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';
@@ -4067,13 +4445,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) {
@@ -4106,18 +4486,16 @@ var FloatingActionButtonComponent = /** @class */ (function () {
          * The theme color will be applied as background color of the component.
          *
          * The possible values are:
-         * * `primary` (Default)&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.
-         * * `inherit`&mdash; Applies inherited coloring value.
-         * * `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.
-         *
+         * * `'primary'` (Default)&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.
          */
         set: function (themeColor) {
             this.handleClasses(themeColor, 'themeColor');
@@ -4135,10 +4513,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');
@@ -4147,6 +4524,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;
@@ -4156,10 +4554,7 @@ var FloatingActionButtonComponent = /** @class */ (function () {
          * ([see example]({% slug appearance_floatingactionbutton %}#toc-shape)).
          *
          * The possible values are:
-         * * `pill` (Default)&mdash;Applies border radius equal to half of the height of the FloatingActionButton.
-         * * `circle`&mdash;Applies circle shape on the FloatingActionButton.
-         * * `rectangle`&mdash;Applies rectangular shape on the FloatingActionButton.
-         * * `rounded`&mdash;Applies rounded shape on the FloatingActionButton.
+         * * `rectangle` (Default)&mdash;Applies rectangular shape on the FloatingActionButton.
          * * `square`&mdash;Applies square shape on the FloatingActionButton.
          *
          */
@@ -4233,8 +4628,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();
@@ -4398,20 +4796,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 () {
@@ -4468,14 +4870,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;
@@ -4717,6 +5111,11 @@ var FloatingActionButtonComponent = /** @class */ (function () {
         __metadata("design:type", String),
         __metadata("design:paramtypes", [String])
     ], FloatingActionButtonComponent.prototype, "size", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], FloatingActionButtonComponent.prototype, "rounded", null);
     __decorate([
         Input(),
         __metadata("design:type", String),
@@ -4806,7 +5205,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    "
         }),
         __metadata("design:paramtypes", [Renderer2,
             ElementRef,
@@ -4969,7 +5368,7 @@ var DialItemComponent = /** @class */ (function () {
     ], DialItemComponent.prototype, "role", void 0);
     __decorate([
         HostBinding('attr.aria-disabled'),
-        HostBinding('class.k-state-disabled'),
+        HostBinding('class.k-disabled'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], DialItemComponent.prototype, "disabledClass", null);