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

package/dist/es2015/button/button.directive.js

@@ -7,9 +7,9 @@ import { Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input,
 import { KendoButtonService } from './button.service';
 import { isDocumentAvailable, isChanged, hasObservers, Keys } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { filter } from 'rxjs/operators';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
+import { getStylingClasses, getThemeColorClasses } from '../util';
 const SPAN_TAG_NAME = 'SPAN';
 /**
  * Represents the Kendo UI Button component for Angular.
@@ -23,19 +23,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
          */
@@ -53,12 +40,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;
     }
@@ -102,7 +93,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);
             });
         }
@@ -119,7 +110,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 {
@@ -149,8 +141,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() {
@@ -159,24 +244,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;
     }
@@ -201,13 +271,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);
         }
@@ -217,7 +305,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();
                 }
@@ -229,17 +318,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());
     }
@@ -282,7 +375,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);
@@ -302,14 +395,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);
         }
@@ -318,8 +418,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;
@@ -333,6 +434,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) {
@@ -354,7 +460,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() {
@@ -362,6 +470,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) {
@@ -370,9 +482,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) {
@@ -392,6 +502,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);
+            }
+        }
+    }
 };
 tslib_1.__decorate([
     Input(),
@@ -402,14 +537,6 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [Boolean])
 ], ButtonDirective.prototype, "togglable", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], ButtonDirective.prototype, "primary", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], ButtonDirective.prototype, "look", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Boolean),
@@ -440,6 +567,31 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [Boolean])
 ], ButtonDirective.prototype, "disabled", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ButtonDirective.prototype, "size", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ButtonDirective.prototype, "rounded", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ButtonDirective.prototype, "fillMode", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ButtonDirective.prototype, "themeColor", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ButtonDirective.prototype, "shape", null);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
@@ -457,36 +609,11 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
 ], ButtonDirective.prototype, "classButton", null);
-tslib_1.__decorate([
-    HostBinding('class.k-primary'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ButtonDirective.prototype, "classPrimary", null);
 tslib_1.__decorate([
     HostBinding('class.k-toggle-button'),
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
 ], ButtonDirective.prototype, "isToggleable", null);
-tslib_1.__decorate([
-    HostBinding('class.k-flat'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ButtonDirective.prototype, "isFlat", null);
-tslib_1.__decorate([
-    HostBinding('class.k-bare'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ButtonDirective.prototype, "isBare", null);
-tslib_1.__decorate([
-    HostBinding('class.k-outline'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ButtonDirective.prototype, "isOutline", null);
-tslib_1.__decorate([
-    HostBinding('class.k-button-clear'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ButtonDirective.prototype, "isClear", null);
 tslib_1.__decorate([
     HostBinding('attr.role'),
     tslib_1.__metadata("design:type", String),
@@ -494,12 +621,12 @@ tslib_1.__decorate([
 ], ButtonDirective.prototype, "roleSetter", null);
 tslib_1.__decorate([
     HostBinding('attr.aria-disabled'),
-    HostBinding('class.k-state-disabled'),
+    HostBinding('class.k-disabled'),
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
 ], ButtonDirective.prototype, "classDisabled", null);
 tslib_1.__decorate([
-    HostBinding('class.k-state-selected'),
+    HostBinding('class.k-selected'),
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
 ], ButtonDirective.prototype, "classActive", null);
@@ -520,6 +647,16 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:paramtypes", []),
     tslib_1.__metadata("design:returntype", void 0)
 ], ButtonDirective.prototype, "onBlur", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [Boolean])
+], ButtonDirective.prototype, "primary", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ButtonDirective.prototype, "look", null);
 ButtonDirective = tslib_1.__decorate([
     Directive({
         exportAs: 'kendoButton',
@@ -530,7 +667,7 @@ ButtonDirective = tslib_1.__decorate([
                 useValue: 'kendo.button'
             }
         ],
-        selector: 'button[kendoButton], span[kendoButton]' // tslint:disable-line
+        selector: 'button[kendoButton], span[kendoButton]',
     }),
     tslib_1.__param(2, Optional()),
     tslib_1.__metadata("design:paramtypes", [ElementRef,

package/dist/es2015/button/button.service.d.ts

@@ -2,16 +2,13 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Observable, BehaviorSubject, Subject } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import { ButtonDirective } from "./button.directive";
-import { ButtonLook } from '../button-look';
 /**
  * @hidden
  */
 export declare class KendoButtonService {
-    buttonLookChange: BehaviorSubject<ButtonLook>;
     buttonClicked: Subject<ButtonDirective>;
     buttonClicked$: Observable<ButtonDirective>;
     click(button: ButtonDirective): void;
-    setButtonLook(look: ButtonLook): void;
 }

package/dist/es2015/button/button.service.js

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
 import { Injectable } from '@angular/core';
-import { BehaviorSubject, Subject } from 'rxjs';
+import { Subject } from 'rxjs';
 /**
  * @hidden
  */
@@ -13,16 +13,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 = tslib_1.__decorate([
     Injectable()

package/dist/es2015/buttongroup/buttongroup.component.d.ts

@@ -7,7 +7,6 @@ import { EventEmitter, QueryList, OnInit, OnDestroy, AfterContentChecked, AfterV
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ButtonGroupSelection } from '../button/selection-settings';
 import { KendoButtonService } from '../button/button.service';
-import { ButtonLook } from '../button-look';
 import { PreventableEvent } from '../preventable-event';
 /**
  * Represents the Kendo UI ButtonGroup component for Angular.
@@ -39,17 +38,6 @@ export declare class ButtonGroupComponent implements OnInit, OnDestroy, AfterCon
      * - The buttons acquire the same width.
      */
     width: string;
-    /**
-     * 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`
-     */
-    look: ButtonLook;
     /**
      * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      */
@@ -67,9 +55,6 @@ export declare class ButtonGroupComponent implements OnInit, OnDestroy, AfterCon
     readonly wrapperClass: boolean;
     readonly disabledClass: boolean;
     readonly stretchedClass: boolean;
-    readonly isFlat: boolean;
-    readonly isBare: boolean;
-    readonly isOutline: boolean;
     readonly getRole: string;
     readonly dir: string;
     readonly ariaDisabled: boolean;

package/dist/es2015/buttongroup/buttongroup.component.js

@@ -25,17 +25,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.
          */
@@ -63,15 +52,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';
     }
@@ -116,7 +96,6 @@ let ButtonGroupComponent = class ButtonGroupComponent {
         }
     }
     ngOnInit() {
-        this.service.setButtonLook(this.look);
         this.subscription = this.service.buttonClicked$.subscribe((button) => {
             let newSelectionValue;
             if (this.isSelectionSingle()) {
@@ -236,10 +215,6 @@ tslib_1.__decorate([
     Input('width'),
     tslib_1.__metadata("design:type", String)
 ], ButtonGroupComponent.prototype, "width", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], ButtonGroupComponent.prototype, "look", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Number),
@@ -259,7 +234,7 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:paramtypes", [])
 ], ButtonGroupComponent.prototype, "wrapperClass", null);
 tslib_1.__decorate([
-    HostBinding('class.k-state-disabled'),
+    HostBinding('class.k-disabled'),
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
 ], ButtonGroupComponent.prototype, "disabledClass", null);
@@ -268,21 +243,6 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
 ], ButtonGroupComponent.prototype, "stretchedClass", null);
-tslib_1.__decorate([
-    HostBinding('class.k-button-group-flat'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ButtonGroupComponent.prototype, "isFlat", null);
-tslib_1.__decorate([
-    HostBinding('class.k-button-group-bare'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ButtonGroupComponent.prototype, "isBare", null);
-tslib_1.__decorate([
-    HostBinding('class.k-button-group-outline'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ButtonGroupComponent.prototype, "isOutline", null);
 tslib_1.__decorate([
     HostBinding('attr.role'),
     tslib_1.__metadata("design:type", String),