@progress/kendo-angular-buttons 6.4.0 → 7.0.0-dev.202201101733

package/dist/fesm2015/index.js

@@ -4,13 +4,13 @@
 *-------------------------------------------------------------------------------------------*/
 import { __decorate, __metadata, __param } from 'tslib';
 import { Injectable, EventEmitter, Input, Output, 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';
 
 /**
@@ -21,16 +21,12 @@ let KendoButtonService = class KendoButtonService {
      * @hidden
      */
     constructor() {
-        this.buttonLookChange = new BehaviorSubject('default');
         this.buttonClicked = new Subject();
         this.buttonClicked$ = this.buttonClicked.asObservable();
     }
     click(button) {
         this.buttonClicked.next(button);
     }
-    setButtonLook(look) {
-        this.buttonLookChange.next(look);
-    }
 };
 KendoButtonService = __decorate([
     Injectable()
@@ -43,11 +39,103 @@ const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635407170,
+    publishDate: 1641835943,
     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 */
+const resolvedPromise = Promise.resolve(null);
+/**
+ * @hidden
+ */
+const isPresent = (value) => value !== null && value !== undefined;
+/**
+ * @hidden
+ */
+const tick = (f) => (resolvedPromise.then(f));
+/**
+ * @hidden
+ */
+function isDocumentNode(container) {
+    return container.nodeType === 9;
+}
+/**
+ * @hidden
+ */
+function closest(element, selector) {
+    if (element.closest) {
+        return element.closest(selector);
+    }
+    const matches = Element.prototype.matches ?
+        (el, sel) => el.matches(sel)
+        : (el, sel) => el.msMatchesSelector(sel);
+    let node = element;
+    while (node && !isDocumentNode(node)) {
+        if (matches(node, selector)) {
+            return node;
+        }
+        node = node.parentNode;
+    }
+}
+/**
+ * @hidden
+ */
+const replaceMessagePlaceholder = (message, name, value) => message.replace(new RegExp(`\{\\s*${name}\\s*\}`, 'g'), value);
+/**
+ * @hidden
+ */
+const SIZES = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg'
+};
+const ROUNDNESS = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg',
+    full: 'full'
+};
+/**
+ * @hidden
+ *
+ * Returns the styling classes to be added and removed
+ */
+const getStylingClasses = (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
+ */
+const getThemeColorClasses = (componentType, prevFillMode, fillMode, previousValue, newValue) => {
+    return {
+        toRemove: `k-${componentType}-${prevFillMode}-${previousValue}`,
+        toAdd: newValue ? `k-${componentType}-${fillMode}-${newValue}` : null
+    };
+};
+
 const SPAN_TAG_NAME = 'SPAN';
 /**
  * Represents the Kendo UI Button component for Angular.
@@ -61,19 +149,6 @@ let ButtonDirective = class ButtonDirective {
          * 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
          */
@@ -91,12 +166,16 @@ let ButtonDirective = class ButtonDirective {
         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(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr');
+        this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr'));
         this.element = element.nativeElement;
         this.renderer = renderer;
     }
@@ -140,7 +219,7 @@ let ButtonDirective = class ButtonDirective {
         if (icon) {
             this.iconSetter(icon, () => {
                 this.isIcon = true;
-                const classes = 'k-icon k-i-' + icon;
+                const classes = 'k-button-icon k-icon k-i-' + icon;
                 this.addIcon(classes);
             });
         }
@@ -157,7 +236,8 @@ let ButtonDirective = class ButtonDirective {
         if (iconClassName) {
             this.iconSetter(iconClassName, () => {
                 this.isIconClass = true;
-                this.addIcon(iconClassName);
+                const classes = 'k-button-icon k-icon ' + iconClassName;
+                this.addIcon(classes);
             });
         }
         else {
@@ -187,8 +267,101 @@ let ButtonDirective = class ButtonDirective {
     get disabled() {
         return this.isDisabled;
     }
+    /**
+     * 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 size(size) {
+        this.handleClasses(size, 'size');
+        this._size = size;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * 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 rounded(rounded) {
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * 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 fillMode(fillMode) {
+        this.handleClasses(fillMode, 'fillMode');
+        this._fillMode = fillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
+    /**
+     * 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 themeColor(themeColor) {
+        this.handleThemeColor(themeColor);
+        this._themeColor = themeColor;
+    }
+    get themeColor() {
+        return this._themeColor;
+    }
+    /**
+     * 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 shape(shape) {
+        this.handleClasses(shape, 'shape');
+        this._shape = shape;
+    }
+    get shape() {
+        return this._shape;
+    }
     set isFocused(isFocused) {
-        this.toggleClass('k-state-focused', isFocused);
+        this.toggleClass('k-focus', isFocused);
         this._focused = isFocused;
     }
     get isFocused() {
@@ -197,24 +370,9 @@ let ButtonDirective = class ButtonDirective {
     get classButton() {
         return true;
     }
-    get classPrimary() {
-        return this.primary;
-    }
     get isToggleable() {
         return this.toggleable;
     }
-    get isFlat() {
-        return this.look === 'flat';
-    }
-    get isBare() {
-        return this.look === 'bare';
-    }
-    get isOutline() {
-        return this.look === 'outline';
-    }
-    get isClear() {
-        return this.look === 'clear';
-    }
     get roleSetter() {
         return this.role;
     }
@@ -239,13 +397,31 @@ let ButtonDirective = class ButtonDirective {
     onBlur() {
         this.isFocused = false;
     }
+    /**
+     * @hidden
+     */
+    set primary(value) {
+        this.themeColor = value ? 'primary' : 'base';
+    }
+    /**
+     * @hidden
+     */
+    set look(value) {
+        switch (value) {
+            case 'default':
+                this.fillMode = 'solid';
+                break;
+            case 'clear':
+                this.fillMode = 'flat';
+                break;
+            default:
+                this.fillMode = value;
+                break;
+        }
+    }
     ngOnInit() {
         const isSpan = this.element.tagName === SPAN_TAG_NAME;
-        if (this.service) {
-            this.buttonLookChangeSubscription = this.service.buttonLookChange
-                .pipe(filter((look) => look !== 'default'))
-                .subscribe((look) => this.look = look);
-        }
+        this.addTextSpan();
         if (!this.element.hasAttribute('role') && this.togglable) {
             this.toggleAriaPressed(this.toggleable);
         }
@@ -255,7 +431,8 @@ let ButtonDirective = class ButtonDirective {
         this.ngZone.runOutsideAngular(() => {
             this.domEvents.push(this.renderer.listen(this.element, 'click', this._onButtonClick.bind(this)));
             this.domEvents.push(this.renderer.listen(this.element, 'keydown', (event) => {
-                if (isSpan && (event.keyCode === Keys.Space || event.keyCode === Keys.Enter)) {
+                const isSpaceOrEnter = event.keyCode === Keys.Space || event.keyCode === Keys.Enter;
+                if (isSpan && isSpaceOrEnter) {
                     this.click.emit(event);
                     this._onButtonClick();
                 }
@@ -267,17 +444,21 @@ let ButtonDirective = class ButtonDirective {
             this.toggleAriaPressed(this.toggleable);
         }
     }
+    ngAfterViewInit() {
+        const stylingOptions = ['size', 'rounded', 'shape', 'fillMode'];
+        stylingOptions.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
+    }
     ngAfterViewChecked() {
         this.setIconTextClasses();
     }
     ngOnDestroy() {
         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(unbindHandler => unbindHandler());
     }
@@ -320,7 +501,7 @@ let ButtonDirective = class ButtonDirective {
         const 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(() => {
                 this.selectedChange.emit(value);
@@ -340,14 +521,21 @@ let ButtonDirective = class ButtonDirective {
     }
     hasText() {
         if (isDocumentAvailable()) {
-            return String(this.element.textContent).trim().length > 0;
+            return this.element.textContent.trim().length > 0;
         }
         else {
             return false;
         }
     }
+    get text() {
+        if (isDocumentAvailable()) {
+            return this.element.innerHTML.trim();
+        }
+    }
     addImgIcon(imageUrl) {
         let 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);
         }
@@ -356,8 +544,9 @@ let ButtonDirective = class ButtonDirective {
             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);
     }
     addIcon(classNames) {
         let renderer = this.renderer;
@@ -371,6 +560,11 @@ let ButtonDirective = class ButtonDirective {
             this.prependChild(this.iconNode);
         }
     }
+    addTextSpan() {
+        if (isDocumentAvailable() && this.hasText()) {
+            this.element.innerHTML = `<span class='k-button-text'>${this.text}</span>`;
+        }
+    }
     prependChild(node) {
         this.defer(() => {
             if (this.renderer && node !== this.element.firstChild) {
@@ -392,7 +586,9 @@ let ButtonDirective = class ButtonDirective {
     removeImageNode() {
         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;
         }
     }
     removeIconNode() {
@@ -400,6 +596,10 @@ let ButtonDirective = class ButtonDirective {
             this.renderer.removeChild(this.element, this.iconNode);
             this.iconNode = null;
         }
+        if (this.iconSpanNode) {
+            this.renderer.removeChild(this.element, this.iconSpanNode);
+            this.iconSpanNode = null;
+        }
     }
     updateIconNode() {
         if (!this.isIcon && !this.isIconClass) {
@@ -408,9 +608,7 @@ let ButtonDirective = class ButtonDirective {
     }
     setIconTextClasses() {
         const hasIcon = this.isIcon || this.isIconClass || this.imageNode;
-        const 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());
     }
     toggleClass(className, add) {
         if (add) {
@@ -430,6 +628,31 @@ let ButtonDirective = class ButtonDirective {
             this.setSelected(!this.selected);
         }
     }
+    handleClasses(value, input) {
+        const elem = this.element;
+        const 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);
+        }
+    }
+    handleThemeColor(value, prevFillMode, fillMode) {
+        const elem = this.element;
+        const removeFillMode = prevFillMode ? prevFillMode : this.fillMode;
+        const addFillMode = fillMode ? fillMode : this.fillMode;
+        const 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(),
@@ -440,14 +663,6 @@ __decorate([
     __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),
@@ -478,6 +693,31 @@ __decorate([
     __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)
@@ -495,36 +735,11 @@ __decorate([
     __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),
@@ -532,12 +747,12 @@ __decorate([
 ], 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);
@@ -558,6 +773,16 @@ __decorate([
     __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',
@@ -568,7 +793,7 @@ ButtonDirective = __decorate([
                 useValue: 'kendo.button'
             }
         ],
-        selector: 'button[kendoButton], span[kendoButton]' // tslint:disable-line
+        selector: 'button[kendoButton], span[kendoButton]',
     }),
     __param(2, Optional()),
     __metadata("design:paramtypes", [ElementRef,
@@ -578,46 +803,6 @@ ButtonDirective = __decorate([
         NgZone])
 ], ButtonDirective);
 
-/* tslint:disable:no-null-keyword */
-/* tslint:disable:no-bitwise */
-const resolvedPromise = Promise.resolve(null);
-/**
- * @hidden
- */
-const isPresent = (value) => value !== null && value !== undefined;
-/**
- * @hidden
- */
-const tick = (f) => (resolvedPromise.then(f));
-/**
- * @hidden
- */
-function isDocumentNode(container) {
-    return container.nodeType === 9;
-}
-/**
- * @hidden
- */
-function closest(element, selector) {
-    if (element.closest) {
-        return element.closest(selector);
-    }
-    const matches = Element.prototype.matches ?
-        (el, sel) => el.matches(sel)
-        : (el, sel) => el.msMatchesSelector(sel);
-    let node = element;
-    while (node && !isDocumentNode(node)) {
-        if (matches(node, selector)) {
-            return node;
-        }
-        node = node.parentNode;
-    }
-}
-/**
- * @hidden
- */
-const replaceMessagePlaceholder = (message, name, value) => message.replace(new RegExp(`\{\\s*${name}\\s*\}`, 'g'), value);
-
 /**
  * @hidden
  */
@@ -657,17 +842,6 @@ let ButtonGroupComponent = class ButtonGroupComponent {
          * 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.
          */
@@ -695,15 +869,6 @@ let ButtonGroupComponent = class ButtonGroupComponent {
     get stretchedClass() {
         return !!this.width;
     }
-    get isFlat() {
-        return this.look === 'flat';
-    }
-    get isBare() {
-        return this.look === 'bare';
-    }
-    get isOutline() {
-        return this.look === 'outline';
-    }
     get getRole() {
         return this.isSelectionSingle() ? 'radiogroup' : 'group';
     }
@@ -748,7 +913,6 @@ let ButtonGroupComponent = class ButtonGroupComponent {
         }
     }
     ngOnInit() {
-        this.service.setButtonLook(this.look);
         this.subscription = this.service.buttonClicked$.subscribe((button) => {
             let newSelectionValue;
             if (this.isSelectionSingle()) {
@@ -868,10 +1032,6 @@ __decorate([
     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),
@@ -891,7 +1051,7 @@ __decorate([
     __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);
@@ -900,21 +1060,6 @@ __decorate([
     __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),
@@ -1104,8 +1249,17 @@ let ListComponent = class ListComponent {
     constructor() {
         this.onItemClick = new EventEmitter();
         this.onItemBlur = new EventEmitter();
+        this.sizeClass = '';
         validatePackage(packageMetadata);
     }
+    set size(size) {
+        if (size) {
+            this.sizeClass = `k-menu-group-${SIZES[size]}`;
+        }
+        else {
+            this.sizeClass = '';
+        }
+    }
     getText(dataItem) {
         if (dataItem) {
             return this.textField ? dataItem[this.textField] : dataItem.text || dataItem;
@@ -1145,37 +1299,44 @@ __decorate([
     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: `
-        <ul class="k-list k-reset" unselectable="on" role="menu">
-            <li role="menuitem" unselectable="on" tabindex="-1"
+        <ul class="k-group k-menu-group k-reset" [ngClass]="sizeClass" unselectable="on" role="menu">
+            <li role="menuitem" unselectable="on"
                 kendoButtonFocusable
                 *ngFor="let dataItem of data; let index = index;"
-                [index]="index"
-                [ngClass]="{'k-item': true, 'k-state-disabled': dataItem.disabled}"
+                class="k-item k-menu-item"
                 (click)="onClick(index)"
                 (blur)="onBlur()"
                 [attr.aria-disabled]="dataItem.disabled ? true : false">
-                <ng-template *ngIf="itemTemplate?.templateRef"
-                    [templateContext]="{
-                        templateRef: itemTemplate?.templateRef,
-                        $implicit: dataItem
-                    }">
+                <ng-template [ngIf]="itemTemplate?.templateRef">
+                    <span kendoButtonFocusable [index]="index" class="k-link k-menu-link" [class.k-disabled]="dataItem.disabled" tabindex="-1">
+                        <ng-template [templateContext]="{templateRef: itemTemplate?.templateRef, $implicit: dataItem}"></ng-template>
+                    </span>
                 </ng-template>
                 <ng-template [ngIf]="!itemTemplate?.templateRef">
-                    <span
-                        *ngIf="dataItem.icon || dataItem.iconClass"
-                        [ngClass]="getIconClasses(dataItem)"
-                    ></span>
-                    <img
-                        *ngIf="dataItem.imageUrl"
-                        class="k-image"
-                        [src]="dataItem.imageUrl"
-                        alt=""
-                    >
-                    {{ getText(dataItem) }}
+                    <span kendoButtonFocusable [index]="index" class="k-link k-menu-link" [class.k-disabled]="dataItem.disabled" tabindex="-1">
+                        <span
+                            *ngIf="dataItem.icon || dataItem.iconClass"
+                            [ngClass]="getIconClasses(dataItem)"
+                        ></span>
+                        <img
+                            *ngIf="dataItem.imageUrl"
+                            class="k-image"
+                            [src]="dataItem.imageUrl"
+                            alt=""
+                        >
+                        <span *ngIf="getText(dataItem)" class="k-menu-link-text">
+                        {{ getText(dataItem) }}
+                        </span>
+                    </span>
                 </ng-template>
             </li>
         </ul>
@@ -1231,10 +1392,10 @@ let FocusableDirective = class FocusableDirective {
     }
     ngOnInit() {
         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');
         }
     }
     /**
@@ -1249,11 +1410,11 @@ let FocusableDirective = class FocusableDirective {
         }
         this.focusSubscription = this.focusService.onFocus.subscribe((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');
             }
         });
     }
@@ -1375,7 +1536,7 @@ class ListButton {
         this.subscribeEvents();
     }
     get popupClasses() {
-        const popupClasses = ['k-list-container', 'k-reset', 'k-group'];
+        const popupClasses = ['k-menu-popup'];
         if (this._popupSettings.popupClass) {
             popupClasses.push(this._popupSettings.popupClass);
         }
@@ -1719,11 +1880,12 @@ const NAVIGATION_SETTINGS_PROVIDER = {
  * ```
  */
 let SplitButtonComponent = class SplitButtonComponent extends ListButton {
-    constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr) {
+    constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, renderer) {
         super(focusService, navigationService, wrapperRef, zone, localization, cdr);
         this.popupService = popupService;
         this.elRef = elRef;
         this.localization = localization;
+        this.renderer = renderer;
         /**
          * Sets the text of the SplitButton.
          */
@@ -1748,13 +1910,46 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
          */
         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 fillMode property specifies the background and border styles of the SplitButton
+         * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-fillMode)).
          *
          * The available values are:
+         * * `solid` (default)
          * * `flat`
          * * `outline`
+         * * `link`
+         */
+        this.fillMode = 'solid';
+        /**
+         * The SplitButton allows you to specify predefined theme colors.
+         * The theme color will be applied as a background and border color while also amending the text color accordingly
+         * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-themeColor)).
+         *
+         * The possible values are:
+         * * `base` &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.look = 'default';
+        this.themeColor = 'base';
         /**
          * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
          */
@@ -1839,9 +2034,28 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
         this.activeArrow = false;
         this.buttonText = '';
         this.lockFocus = false;
+        this._rounded = 'medium';
         this._itemClick = this.itemClick;
         this._blur = this.onBlur;
     }
+    /**
+     * 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`
+     */
+    set rounded(rounded) {
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
     /**
      * When set to `true`, disables a SplitButton item
      * ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)).
@@ -1927,12 +2141,6 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
     get isFocused() {
         return this._isFocused && !this._disabled;
     }
-    get isFlat() {
-        return this.look === 'flat';
-    }
-    get isOutline() {
-        return this.look === 'outline';
-    }
     get widgetClasses() {
         return true;
     }
@@ -2019,6 +2227,7 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
      */
     ngAfterViewInit() {
         this.updateButtonText();
+        this.handleClasses(this.rounded, 'rounded');
     }
     /**
      * @hidden
@@ -2166,6 +2375,16 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
             this.popupRef = null;
         }
     }
+    handleClasses(value, input) {
+        const elem = this.wrapperRef.nativeElement;
+        const classes = getStylingClasses('button', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
 };
 __decorate([
     Input(),
@@ -2190,7 +2409,20 @@ __decorate([
 __decorate([
     Input(),
     __metadata("design:type", String)
-], SplitButtonComponent.prototype, "look", void 0);
+], SplitButtonComponent.prototype, "size", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], SplitButtonComponent.prototype, "rounded", null);
+__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),
@@ -2271,20 +2503,10 @@ __decorate([
     __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'),
@@ -2337,11 +2559,15 @@ SplitButtonComponent = __decorate([
             kendoButton
             #button
             [type]="type"
-            [look]="look"
             [tabindex]="componentTabIndex"
             [disabled]="disabled"
+            [size]="size"
+            [rounded]="rounded"
+            [fillMode]="fillMode"
+            [themeColor]="themeColor"
             [icon]="icon"
-            [class.k-state-active]="active"
+            [class.k-active]="active"
+            [class.k-icon-button]="!text && icon"
             [iconClass]="iconClass"
             [imageUrl]="imageUrl"
             [ngClass]="buttonClass"
@@ -2356,16 +2582,21 @@ SplitButtonComponent = __decorate([
             [attr.aria-owns]="listId"
             [attr.aria-label]="ariaLabel"
         >
-            {{ text }}<ng-content></ng-content>
+            <span *ngIf="text" class="k-button-text">
+                {{ text }}
+            </span><ng-content></ng-content>
         </button>
         <button
             kendoButton
             #arrowButton
             type="button"
-            [class.k-state-active]="activeArrow"
+            [class.k-active]="activeArrow"
             [disabled]="disabled"
             [icon]="arrowButtonIcon"
-            [look]="look"
+            [size]="size"
+            [rounded]="rounded"
+            [fillMode]="fillMode"
+            [themeColor]="fillMode ? themeColor : null"
             [tabindex]="-1"
             [ngClass]="arrowButtonClass"
             (click)="onArrowButtonClick()"
@@ -2383,6 +2614,7 @@ SplitButtonComponent = __decorate([
                 (keypress)="keyPressHandler($event)"
                 (keyup)="keyUpHandler($event)"
                 [attr.dir]="dir"
+                [size]="size"
             >
             </kendo-button-list>
         </ng-template>
@@ -2396,7 +2628,8 @@ SplitButtonComponent = __decorate([
         PopupService,
         ElementRef,
         LocalizationService,
-        ChangeDetectorRef])
+        ChangeDetectorRef,
+        Renderer2])
 ], SplitButtonComponent);
 
 /**
@@ -2532,17 +2765,70 @@ let DropDownButtonComponent = class DropDownButtonComponent extends ListButton {
          */
         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.primary = false;
+        this.shape = 'rectangle';
         /**
-         * Changes the visual appearance by using alternative styling options.
+         * The rounded property specifies the border radius of the DropDownButton
+         * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-rounded)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `'full'`
+         * * `null`
+         */
+        this.rounded = 'medium';
+        /**
+         * The fillMode property specifies the background and border styles of the DropDownButton
+         * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-fillMode)).
          *
          * The available values are:
+         * * `solid` (default)
          * * `flat`
          * * `outline`
+         * * `link`
+         * * `null`
+         */
+        this.fillMode = 'solid';
+        /**
+         * The DropDownButton allows you to specify predefined theme colors.
+         * The theme color will be applied as a background and border color while also amending the text color accordingly
+         * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
+         *
+         * The possible values are:
+         * * `base` &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.
          */
@@ -2652,12 +2938,6 @@ let DropDownButtonComponent = class DropDownButtonComponent extends ListButton {
     get focused() {
         return this._isFocused && !this._disabled;
     }
-    get isFlat() {
-        return this.look === 'flat';
-    }
-    get isOutline() {
-        return this.look === 'outline';
-    }
     get widgetClasses() {
         return true;
     }
@@ -2910,12 +3190,24 @@ __decorate([
 ], 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)
@@ -2945,20 +3237,10 @@ __decorate([
     __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),
@@ -3038,12 +3320,17 @@ DropDownButtonComponent = __decorate([
             role="menu"
             type="button"
             [tabindex]="componentTabIndex"
-            [class.k-state-active]="active"
+            [class.k-active]="active"
             [disabled]="disabled"
             [icon]="icon"
             [iconClass]="iconClass"
             [imageUrl]="imageUrl"
             [ngClass]="buttonClass"
+            [size]="size"
+            [shape]="shape"
+            [rounded]="rounded"
+            [fillMode]="fillMode"
+            [themeColor]="fillMode ? themeColor : null"
             (click)="openPopup()"
             (focus)="handleFocus()"
             (blur)="onButtonBlur()"
@@ -3051,9 +3338,7 @@ DropDownButtonComponent = __decorate([
             [attr.aria-expanded]="openState"
             [attr.aria-haspopup]="true"
             [attr.aria-owns]="listId"
-            [look]="look"
-            [primary]="primary"
-            >
+        >
             <ng-content></ng-content>
         </button>
         <ng-template #popupTemplate>
@@ -3068,6 +3353,7 @@ DropDownButtonComponent = __decorate([
                 (keypress)="keyPressHandler($event)"
                 (keyup)="keyUpHandler($event)"
                 [attr.dir]="dir"
+                [size]="size"
             >
             </kendo-button-list>
         </ng-template>
@@ -3111,38 +3397,20 @@ let ChipComponent = class ChipComponent {
         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;
         /**
@@ -3155,21 +3423,90 @@ let ChipComponent = class ChipComponent {
         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';
     }
-    get ariaChecked() {
-        return this.selected;
+    /**
+     * 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 size(size) {
+        this.handleClasses(size, 'size');
+        this._size = size;
     }
-    get outlineClass() {
-        return this.look === 'outline' || this.look === 'outlined';
+    get size() {
+        return this._size;
+    }
+    /**
+     * 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 rounded(rounded) {
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
     }
-    get solidClass() {
-        return this.look === 'solid' || this.look === 'filled';
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * 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 fillMode(fillMode) {
+        this.handleClasses(fillMode, 'fillMode');
+        this._fillMode = fillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
+    /**
+     * 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 themeColor(themeColor) {
+        this.handleThemeColor(themeColor);
+        this._themeColor = themeColor;
+    }
+    get themeColor() {
+        return this._themeColor;
+    }
+    get ariaChecked() {
+        return this.selected;
     }
     get hasIconClass() {
-        return this.icon || this.iconClass ? true : false;
+        return this.icon || this.iconClass || this.avatarClass ? true : false;
     }
     get disabledClass() {
         return this.disabled;
@@ -3194,54 +3531,41 @@ let ChipComponent = class ChipComponent {
     }
     ngAfterViewInit() {
         const chip = this.element.nativeElement;
-        const typeClass = this.typeClass();
-        if (this.type !== 'none') {
-            this.renderer.addClass(chip, typeClass);
-        }
+        const stylingOptions = ['size', 'rounded', 'fillMode'];
+        stylingOptions.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
         this.attachElementEventHandlers(chip);
     }
     /**
      * @hidden
      */
-    get iconClasses() {
-        const classes = [];
-        if (this.iconClass) {
-            classes.push(`${this.iconClass}`);
-        }
-        if (this.icon) {
-            classes.push(`k-icon k-i-${this.icon}`);
-        }
-        return classes;
+    get kendoIconClass() {
+        this.verifyIconSettings([this.iconClass, this.avatarClass]);
+        return `k-i-${this.icon}`;
     }
     /**
      * @hidden
      */
-    get selectedIconClasses() {
-        if (this.selectedIcon) {
-            return `${this.selectedIcon}`;
-        }
-        return `k-icon k-i-check`;
+    get customIconClass() {
+        this.verifyIconSettings([this.icon, this.avatarClass]);
+        return `${this.iconClass}`;
     }
     /**
      * @hidden
      */
-    get removeIconClasses() {
-        if (this.removeIcon) {
-            return `${this.removeIcon}`;
-        }
-        return `k-icon k-i-close-circle`;
+    get chipAvatarClass() {
+        this.verifyIconSettings([this.icon, this.iconClass]);
+        return `${this.avatarClass}`;
     }
     /**
      * @hidden
      */
-    typeClass() {
-        return {
-            'none': '',
-            'success': 'k-chip-success',
-            'warning': 'k-chip-warning',
-            'error': 'k-chip-error',
-            'info': 'k-chip-info'
-        }[this.type];
+    get removeIconClass() {
+        if (this.removeIcon) {
+            return `${this.removeIcon}`;
+        }
+        return `k-i-close-circle`;
     }
     /**
      * Focuses the Chip component.
@@ -3276,7 +3600,7 @@ let ChipComponent = class ChipComponent {
                 this.renderer.removeClass(chip, 'k-focus');
             });
             const contentClickListener = this.renderer.listen(chip, 'click', (e) => {
-                const isRemoveClicked = closest(e.target, '.k-remove-icon');
+                const isRemoveClicked = closest(e.target, '.k-chip-remove-action');
                 if (!isRemoveClicked) {
                     this.ngZone.run(() => {
                         this.contentClick.emit({ sender: this, originalEvent: e });
@@ -3290,11 +3614,43 @@ let ChipComponent = class ChipComponent {
             };
         });
     }
+    /**
+     * @hidden
+     */
+    verifyIconSettings(iconsToCheck) {
+        if (isDevMode()) {
+            if (iconsToCheck.filter(icon => 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.');
+            }
+        }
+    }
+    handleClasses(value, input) {
+        const elem = this.element.nativeElement;
+        const 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);
+        }
+    }
+    handleThemeColor(value, prevFillMode, fillMode) {
+        const elem = this.element.nativeElement;
+        const removeFillMode = prevFillMode ? prevFillMode : this.fillMode;
+        const addFillMode = fillMode ? fillMode : this.fillMode;
+        const 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)
-], ChipComponent.prototype, "look", void 0);
 __decorate([
     Input(),
     __metadata("design:type", String)
@@ -3309,12 +3665,12 @@ __decorate([
 ], 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)
@@ -3323,14 +3679,30 @@ __decorate([
     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)
@@ -3352,16 +3724,6 @@ __decorate([
     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),
@@ -3391,20 +3753,27 @@ ChipComponent = __decorate([
     Component({
         selector: 'kendo-chip',
         template: `
-        <span class="k-selected-icon-wrapper">
-            <span *ngIf="selected"
-                class="k-selected-icon"
-                [ngClass]="selectedIconClasses"
-            >
-            </span>
+        <span
+            *ngIf="icon"
+            class="k-chip-icon k-icon"
+            [ngClass]="kendoIconClass"
+        >
         </span>
 
-        <span *ngIf="icon || iconClass"
+        <span
+            *ngIf="iconClass"
             class="k-chip-icon"
-            [ngClass]="iconClasses"
+            [ngClass]="customIconClass"
         >
         </span>
 
+        <span
+            *ngIf="avatarClass"
+            class="k-chip-avatar k-avatar k-rounded-full"
+        >
+            <span class="k-avatar-image" [ngClass]="chipAvatarClass"></span>
+        </span>
+
         <span class="k-chip-content">
             <span class="k-chip-label" *ngIf="label">
                 {{ label }}
@@ -3412,11 +3781,17 @@ ChipComponent = __decorate([
             <ng-content *ngIf="!label"></ng-content>
         </span>
 
-        <span *ngIf="removable"
-            class="k-remove-icon"
-            (click)="onRemoveClick($event)"
-        >
-            <span [ngClass]="removeIconClasses"></span>
+        <span class="k-chip-actions">
+            <span class="k-chip-action k-chip-remove-action"
+                *ngIf="removable"
+                (click)="onRemoveClick($event)"
+                >
+                <span
+                    class="k-icon"
+                    [ngClass]="removeIconClass"
+                >
+                </span>
+            </span>
         </span>
     `,
         providers: [
@@ -3434,9 +3809,10 @@ ChipComponent = __decorate([
 ], ChipComponent);
 
 let ChipListComponent = class ChipListComponent {
-    constructor(localizationService, renderer) {
+    constructor(localizationService, renderer, element) {
         this.localizationService = localizationService;
         this.renderer = renderer;
+        this.element = element;
         this.hostClass = true;
         /**
          * Sets the selection mode of the ChipList.
@@ -3456,8 +3832,26 @@ let ChipListComponent = class ChipListComponent {
          */
         this.remove = new EventEmitter();
         this.role = 'listbox';
+        this._size = 'medium';
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
+    /**
+     * 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 size(size) {
+        this.handleClasses(size, 'size');
+        this._size = size;
+    }
+    get size() {
+        return this._size;
+    }
     get single() {
         return this.selection === 'single';
     }
@@ -3469,7 +3863,7 @@ let ChipListComponent = class ChipListComponent {
      */
     onClick($event) {
         const target = $event.target;
-        const isRemoveClicked = closest(target, '.k-remove-icon');
+        const isRemoveClicked = closest(target, '.k-chip-remove-action');
         const clickedChip = closest(target, '.k-chip');
         const chip = this.chips.find((chip) => clickedChip === chip.element.nativeElement);
         if (isRemoveClicked && clickedChip) {
@@ -3484,6 +3878,12 @@ let ChipListComponent = class ChipListComponent {
         this.dynamicRTLSubscription = this.localizationService.changes
             .subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr');
     }
+    ngAfterViewInit() {
+        const stylingInputs = ['size'];
+        stylingInputs.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
+    }
     ngAfterContentInit() {
         this.chips.forEach((chip) => {
             this.renderer.setAttribute(chip.element.nativeElement, 'role', 'option');
@@ -3514,6 +3914,16 @@ let ChipListComponent = class ChipListComponent {
             }
         });
     }
+    handleClasses(value, input) {
+        const elem = this.element.nativeElement;
+        const 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'),
@@ -3527,6 +3937,11 @@ __decorate([
     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)
@@ -3561,7 +3976,7 @@ __decorate([
 ], ChipListComponent.prototype, "onClick", null);
 ChipListComponent = __decorate([
     Component({
-        selector: 'kendo-chip-list, kendo-chiplist',
+        selector: 'kendo-chiplist, kendo-chip-list',
         template: `
         <ng-content></ng-content>
     `,
@@ -3569,11 +3984,13 @@ ChipListComponent = __decorate([
             LocalizationService,
             {
                 provide: L10N_PREFIX,
-                useValue: 'kendo.chip-list'
+                useValue: 'kendo.chiplist'
             }
         ]
     }),
-    __metadata("design:paramtypes", [LocalizationService, Renderer2])
+    __metadata("design:paramtypes", [LocalizationService,
+        Renderer2,
+        ElementRef])
 ], ChipListComponent);
 
 const exportedModules = [
@@ -3737,12 +4154,16 @@ const SIZE_CLASSES = {
     large: 'k-fab-lg'
 };
 const 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'
 };
+const ROUNDED_CLASSES = {
+    small: 'k-rounded-sm',
+    medium: 'k-rounded-md',
+    large: 'k-rounded-lg',
+    full: 'k-rounded-full'
+};
+const FILLMODE_CLASS = 'k-fab-solid';
 const DEFAULT_DURATION = 180;
 const DEFAULT_ITEM_GAP = 90;
 const DEFAULT_OFFSET = '16px';
@@ -3822,13 +4243,15 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
         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(({ rtl }) => {
@@ -3848,18 +4271,16 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
      * 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 themeColor(themeColor) {
         this.handleClasses(themeColor, 'themeColor');
@@ -3873,10 +4294,9 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
      * ([see example]({% slug appearance_floatingactionbutton %}#toc-size)).
      *
      * The possible values are:
-     * * `small`
-     * * `medium` (Default)
-     * * `large`
-     *
+     * * `'small'`
+     * * `'medium'` (Default)
+     * * `'large'`
      */
     set size(size) {
         this.handleClasses(size, 'size');
@@ -3885,15 +4305,29 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
     get size() {
         return this._size;
     }
+    /**
+     * The rounded property specifies the border radius of the FloatingActionButton.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'`
+     * * `'large'`
+     * * `'full'` (default)
+     * * `null`
+     */
+    set rounded(rounded) {
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
     /**
      * Specifies the shape of the FloatingActionButton
      * ([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.
      *
      */
@@ -3951,8 +4385,10 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
         return this.disabled ? (-1) : this.tabIndex;
     }
     ngAfterViewInit() {
-        this.applyClasses();
+        ['shape', 'size', 'rounded', 'themeColor'].forEach(option => this.handleClasses(this[option], option));
+        this.renderer.addClass(this.element.nativeElement, this.alignClass());
         this.offsetStyles();
+        this.initialSetup = false;
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
@@ -4094,20 +4530,24 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
         this.toggleDialWithEvents(false);
     }
     handleClasses(inputValue, input) {
-        if (isPresent(this.button) && (this[input] !== inputValue)) {
+        if (isPresent(this.button) && (this[input] !== inputValue || this.initialSetup)) {
             const button = this.button.nativeElement;
             const 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]
             };
             const 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]);
+            }
         }
     }
     onEnterPressed() {
@@ -4162,14 +4602,6 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
     alignClass() {
         return `k-pos-${this.align.vertical}-${this.align.horizontal}`;
     }
-    applyClasses() {
-        const hostElement = this.element.nativeElement;
-        const 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());
-    }
     toggleDialWithEvents(open) {
         if (open === this.isOpen) {
             return;
@@ -4389,6 +4821,11 @@ __decorate([
     __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),
@@ -4485,8 +4922,8 @@ FloatingActionButtonComponent = __decorate([
             [attr.role]="role"
             [tabIndex]="componentTabIndex"
             type="button"
-            [class.k-fab]="true"
-            [class.k-state-disabled]="disabled"
+            class="k-fab k-fab-solid"
+            [class.k-disabled]="disabled"
             [ngClass]="buttonClass"
             [disabled]="disabled"
             [attr.aria-disabled]="disabled"
@@ -4670,7 +5107,7 @@ __decorate([
 ], 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);