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

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

@@ -32,7 +32,7 @@ export 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);
         }

package/dist/es2015/listbutton/list.component.d.ts

@@ -5,6 +5,7 @@
 import { EventEmitter } from '@angular/core';
 import { ListItemModel } from './list-item-model';
 import { ButtonItemTemplateDirective } from './button-item-template.directive';
+import { ButtonSize } from '../common/models';
 /**
  * @hidden
  */
@@ -14,6 +15,8 @@ export declare class ListComponent {
     itemTemplate: ButtonItemTemplateDirective;
     onItemClick: EventEmitter<number>;
     onItemBlur: EventEmitter<any>;
+    size: ButtonSize;
+    sizeClass: string;
     constructor();
     getText(dataItem: any): any;
     getIconClasses(dataItem: ListItemModel): any;

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

@@ -7,6 +7,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { ButtonItemTemplateDirective } from './button-item-template.directive';
+import { SIZES } from '../util';
 /**
  * @hidden
  */
@@ -14,8 +15,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;
@@ -55,37 +65,44 @@ tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
 ], ListComponent.prototype, "onItemBlur", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ListComponent.prototype, "size", null);
 ListComponent = tslib_1.__decorate([
     Component({
         selector: 'kendo-button-list',
         template: `
-        <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>

package/dist/es2015/main.d.ts

@@ -12,7 +12,6 @@ export { SplitButtonModule } from './splitbutton/splitbutton.module';
 export { SplitButtonCustomMessagesComponent } from './splitbutton/localization/custom-messages.component';
 export { DropDownButtonComponent, DropDownButtonComponent as DropDownButton } from './dropdownbutton/dropdownbutton.component';
 export { DropDownButtonModule } from './dropdownbutton/dropdownbutton.module';
-export { ButtonLook } from './button-look';
 export { ListItemModel } from './listbutton/list-item-model';
 export { PopupSettings } from './listbutton/popup-settings';
 export { ChipComponent } from './chip/chip.component';
@@ -21,7 +20,6 @@ export { ChipModule } from './chip/chip.module';
 export { ChipListSelection } from './chip/models/selection';
 export { ChipRemoveEvent } from './chip/chip-remove-event-args.interface';
 export { ChipListRemoveEvent } from './chip/chip-list-remove-event-args.interface';
-export { ChipType } from './chip/models/type';
 export { FloatingActionButtonModule } from './floatingactionbutton/floatingactionbutton.module';
 export { FloatingActionButtonComponent } from './floatingactionbutton/floatingactionbutton.component';
 export { FloatingActionButtonTemplateDirective } from './floatingactionbutton/templates/fab-template.directive';
@@ -32,6 +30,8 @@ export { DialItemAnimation } from './floatingactionbutton/models/item-animation.
 export { FabAlign } from './floatingactionbutton/models/align';
 export { FabPositionMode } from './floatingactionbutton/models/position-mode';
 export { FabOffset } from './floatingactionbutton/models/offset';
-export { ButtonSize } from './common/models/size';
-export { ButtonThemeColor } from './common/models/theme-color';
+export { ButtonSize, ChipSize } from './common/models/size';
+export { ButtonRounded, ChipRounded } from './common/models/rounded';
+export { ButtonFillMode, ChipFillMode } from './common/models/fillmode';
+export { ButtonThemeColor, ChipThemeColor } from './common/models/theme-color';
 export { ButtonShape } from './common/models/shape';

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export 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'
 };

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

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ElementRef, TemplateRef, EventEmitter, ViewContainerRef, AfterViewInit, OnChanges, SimpleChanges, NgZone, ChangeDetectorRef } from '@angular/core';
+import { ElementRef, TemplateRef, EventEmitter, ViewContainerRef, AfterViewInit, OnChanges, SimpleChanges, NgZone, ChangeDetectorRef, Renderer2 } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { Align, PopupService, PopupRef } from '@progress/kendo-angular-popup';
 import { ListButton } from './../listbutton/list-button';
@@ -11,7 +11,7 @@ import { ButtonItemTemplateDirective } from './../listbutton/button-item-templat
 import { FocusService } from './../focusable/focus.service';
 import { NavigationService } from './../navigation/navigation.service';
 import { PreventableEvent } from '../preventable-event';
-import { ButtonLook } from '../button-look';
+import { ButtonFillMode, ButtonRounded, ButtonSize, ButtonThemeColor } from '../common/models';
 /**
  * Represents the Kendo UI SplitButton component for Angular.
  *
@@ -57,6 +57,7 @@ export declare class SplitButtonComponent extends ListButton implements AfterVie
     private popupService;
     private elRef;
     private localization;
+    private renderer;
     /**
      * Sets the text of the SplitButton.
      */
@@ -81,13 +82,58 @@ export declare class SplitButtonComponent extends ListButton implements AfterVie
      */
     imageUrl: string;
     /**
-     * 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`
+     */
+    size: ButtonSize;
+    /**
+     * 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`
+     */
+    rounded: ButtonRounded;
+    /**
+     * 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`
      */
-    look: ButtonLook;
+    fillMode: ButtonFillMode;
+    /**
+     * The SplitButton allows you to specify predefined theme colors.
+     * The theme color will be applied as a background and border color while also amending the text color accordingly
+     * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-themeColor)).
+     *
+     * The possible values are:
+     * * `base` —Applies coloring based on the `base` theme color. (default)
+     * * `primary` —Applies coloring based on the `primary` theme color.
+     * * `secondary`—Applies coloring based on the `secondary` theme color.
+     * * `tertiary`— Applies coloring based on the `tertiary` theme color.
+     * * `info`—Applies coloring based on the `info` theme color.
+     * * `success`— Applies coloring based on the `success` theme color.
+     * * `warning`— Applies coloring based on the `warning` theme color.
+     * * `error`— Applies coloring based on the `error` theme color.
+     * * `dark`— Applies coloring based on the `dark` theme color.
+     * * `light`— Applies coloring based on the `light` theme color.
+     * * `inverse`— Applies coloring based on the `inverse` theme color.
+     */
+    themeColor: ButtonThemeColor;
     /**
      * When set to `true`, disables a SplitButton item
      * ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)).
@@ -231,9 +277,8 @@ export declare class SplitButtonComponent extends ListButton implements AfterVie
     activeArrow: boolean;
     private buttonText;
     private lockFocus;
+    private _rounded;
     isFocused: boolean;
-    readonly isFlat: boolean;
-    readonly isOutline: boolean;
     readonly widgetClasses: boolean;
     readonly dir: string;
     /**
@@ -308,7 +353,7 @@ export declare class SplitButtonComponent extends ListButton implements AfterVie
      * Blurs the SplitButton component.
      */
     blur(): void;
-    constructor(focusService: FocusService, navigationService: NavigationService, wrapperRef: ElementRef, zone: NgZone, popupService: PopupService, elRef: ElementRef, localization: LocalizationService, cdr: ChangeDetectorRef);
+    constructor(focusService: FocusService, navigationService: NavigationService, wrapperRef: ElementRef, zone: NgZone, popupService: PopupService, elRef: ElementRef, localization: LocalizationService, cdr: ChangeDetectorRef, renderer: Renderer2);
     ngOnDestroy(): void;
     /**
      * Toggles the visibility of the popup.
@@ -327,4 +372,5 @@ export declare class SplitButtonComponent extends ListButton implements AfterVie
     private _toggle;
     private createPopup;
     private destroyPopup;
+    private handleClasses;
 }

package/dist/es2015/splitbutton/splitbutton.component.js

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
 /* tslint:disable:no-access-missing-member */
-import { Component, ElementRef, TemplateRef, Input, Output, HostBinding, HostListener, EventEmitter, ContentChild, ViewChild, ViewContainerRef, NgZone, ChangeDetectorRef } from '@angular/core';
+import { Component, ElementRef, TemplateRef, Input, Output, HostBinding, HostListener, EventEmitter, ContentChild, ViewChild, ViewContainerRef, NgZone, ChangeDetectorRef, Renderer2 } from '@angular/core';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { ListButton } from './../listbutton/list-button';
@@ -16,7 +16,7 @@ import { isDocumentAvailable, guid, isChanged } from '@progress/kendo-angular-co
 import { isPresent, tick } from './../util';
 import { PreventableEvent } from '../preventable-event';
 import { Keys } from '@progress/kendo-angular-common';
-import { replaceMessagePlaceholder } from '../util';
+import { replaceMessagePlaceholder, getStylingClasses } from '../util';
 const NAVIGATION_SETTINGS = {
     useLeftRightArrows: true
 };
@@ -67,11 +67,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.
          */
@@ -96,13 +97,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` —Applies coloring based on the `base` theme color. (default)
+         * * `primary` —Applies coloring based on the `primary` theme color.
+         * * `secondary`—Applies coloring based on the `secondary` theme color.
+         * * `tertiary`— Applies coloring based on the `tertiary` theme color.
+         * * `info`—Applies coloring based on the `info` theme color.
+         * * `success`— Applies coloring based on the `success` theme color.
+         * * `warning`— Applies coloring based on the `warning` theme color.
+         * * `error`— Applies coloring based on the `error` theme color.
+         * * `dark`— Applies coloring based on the `dark` theme color.
+         * * `light`— Applies coloring based on the `light` theme color.
+         * * `inverse`— Applies coloring based on the `inverse` theme color.
          */
-        this.look = 'default';
+        this.themeColor = 'base';
         /**
          * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
          */
@@ -187,9 +221,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)).
@@ -275,12 +328,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;
     }
@@ -367,6 +414,7 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
      */
     ngAfterViewInit() {
         this.updateButtonText();
+        this.handleClasses(this.rounded, 'rounded');
     }
     /**
      * @hidden
@@ -514,6 +562,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);
+        }
+    }
 };
 tslib_1.__decorate([
     Input(),
@@ -538,7 +596,20 @@ tslib_1.__decorate([
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
-], SplitButtonComponent.prototype, "look", void 0);
+], SplitButtonComponent.prototype, "size", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], SplitButtonComponent.prototype, "rounded", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], SplitButtonComponent.prototype, "fillMode", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], SplitButtonComponent.prototype, "themeColor", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Boolean),
@@ -619,20 +690,10 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", ViewContainerRef)
 ], SplitButtonComponent.prototype, "containerRef", void 0);
 tslib_1.__decorate([
-    HostBinding('class.k-state-focused'),
+    HostBinding('class.k-focus'),
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [Boolean])
 ], SplitButtonComponent.prototype, "isFocused", null);
-tslib_1.__decorate([
-    HostBinding('class.k-flat'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], SplitButtonComponent.prototype, "isFlat", null);
-tslib_1.__decorate([
-    HostBinding('class.k-outline'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], SplitButtonComponent.prototype, "isOutline", null);
 tslib_1.__decorate([
     HostBinding('class.k-split-button'),
     HostBinding('class.k-button-group'),
@@ -685,11 +746,15 @@ SplitButtonComponent = tslib_1.__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"
@@ -704,16 +769,21 @@ SplitButtonComponent = tslib_1.__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()"
@@ -731,6 +801,7 @@ SplitButtonComponent = tslib_1.__decorate([
                 (keypress)="keyPressHandler($event)"
                 (keyup)="keyUpHandler($event)"
                 [attr.dir]="dir"
+                [size]="size"
             >
             </kendo-button-list>
         </ng-template>
@@ -744,7 +815,8 @@ SplitButtonComponent = tslib_1.__decorate([
         PopupService,
         ElementRef,
         LocalizationService,
-        ChangeDetectorRef])
+        ChangeDetectorRef,
+        Renderer2])
 ], SplitButtonComponent);
 export { SplitButtonComponent };
 export { ɵ0 };

package/dist/es2015/util.d.ts

@@ -2,6 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { ButtonStylingClasses } from "./common/models";
 /**
  * @hidden
  */
@@ -18,3 +19,23 @@ export declare function closest(element: any, selector: string): any;
  * @hidden
  */
 export declare const replaceMessagePlaceholder: (message: string, name: string, value: string) => string;
+/**
+ * @hidden
+ */
+export declare const SIZES: {
+    small: string;
+    medium: string;
+    large: string;
+};
+/**
+ * @hidden
+ *
+ * Returns the styling classes to be added and removed
+ */
+export declare const getStylingClasses: (componentType: any, stylingOption: string, previousValue: any, newValue: any) => ButtonStylingClasses;
+/**
+ * @hidden
+ *
+ * Returns the themeColor classes to be added and removed
+ */
+export declare const getThemeColorClasses: (componentType: any, prevFillMode: any, fillMode: any, previousValue: any, newValue: any) => ButtonStylingClasses;

package/dist/es2015/util.js

@@ -41,3 +41,55 @@ export function closest(element, selector) {
  * @hidden
  */
 export const replaceMessagePlaceholder = (message, name, value) => message.replace(new RegExp(`\{\\s*${name}\\s*\}`, 'g'), value);
+/**
+ * @hidden
+ */
+export 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
+ */
+export 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
+ */
+export const getThemeColorClasses = (componentType, prevFillMode, fillMode, previousValue, newValue) => {
+    return {
+        toRemove: `k-${componentType}-${prevFillMode}-${previousValue}`,
+        toAdd: newValue ? `k-${componentType}-${fillMode}-${newValue}` : null
+    };
+};