@progress/kendo-vue-buttons 2.7.3 → 3.0.0-dev.202201141128

package/dist/es/util.js

@@ -7,10 +7,10 @@ var styles = {
     'outline': 'k-outline',
     'clear': 'k-button-clear',
     'primary': 'k-primary',
-    'state-selected': 'k-state-selected',
+    'state-selected': 'k-selected',
     'button-icon': 'k-button-icon',
     'button-icontext': 'k-button-icontext',
-    'state-disabled': 'k-state-disabled',
+    'state-disabled': 'k-disabled',
     'group-start': 'k-group-start',
     'group-end': 'k-group-end',
     'button-group': 'k-button-group',
@@ -18,15 +18,15 @@ var styles = {
     'ltr': 'k-ltr',
     'rtl': 'k-rtl'
 };
-var notDisabled = ':not(.k-state-disabled):not([disabled]):not([disabled="true"])';
+var notInternalButton = ':not(.k-dropdownlist > .k-button):not(.k-colorpicker > .k-button)';
 /**
  * @hidden
  */
 export var toolbarButtons = [
-    'button' + notDisabled,
-    '.k-button-group > button' + notDisabled,
-    '.k-dropdown > .k-dropdown-wrap' + notDisabled,
-    '.k-colorpicker > .k-picker-wrap' + notDisabled
+    'button' + notInternalButton,
+    '.k-button-group > button',
+    '.k-dropdownlist',
+    '.k-colorpicker'
 ];
 /**
  * @hidden

package/dist/npm/Button.d.ts

@@ -1,5 +1,4 @@
-import { DefineComponent } from './additionalTypes';
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from './additionalTypes';
 declare type DefaultData<V> = object | ((this: V) => {});
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
@@ -14,6 +13,75 @@ export interface ButtonProps extends ButtonInterface {
      * @hidden
      */
     children?: any;
+    /**
+     * Configures the `size` of the Button.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Configures the `shape` of the Button.
+     *
+     * The available options are:
+     * - rectangle
+     * - square
+     * - null&mdash;Does not set a shape `className`.
+     *
+     * @default `rectangle`
+     */
+    shape?: null | 'rectangle' | 'square' | string;
+    /**
+     * Configures the `roundness` of the Button.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - circle
+     * - full
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `fillMode` of the Button.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - link
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | 'link' | string;
+    /**
+     * Configures the `themeColor` of the Button.
+     *
+     * The available options are:
+     * - base
+     * - primary
+     * - secondary
+     * - tertiary
+     * - info
+     * - success
+     * - warning
+     * - dark
+     * - light
+     * - inverse
+     * - null&mdash;Does not set a themeColor `className`.
+     *
+     * @default `base`
+     */
+    themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'dark' | 'light' | 'inverse' | string;
 }
 /**
  * @hidden
@@ -26,6 +94,7 @@ export interface ButtonState {
  */
 export interface ButtonComputed {
     [key: string]: any;
+    buttonClasses: object;
 }
 /**
  * @hidden
@@ -45,8 +114,8 @@ export interface ButtonData {
 /**
  * @hidden
  */
-export interface ButtonAll extends Vue, ButtonMethods, ButtonData, ButtonComputed, ButtonState {
+export interface ButtonAll extends Vue2type, ButtonMethods, ButtonData, ButtonComputed, ButtonState {
 }
-declare let Button: ComponentOptions<ButtonAll, DefaultData<ButtonData>, DefaultMethods<ButtonAll>, ButtonComputed, RecordPropsDefinition<ButtonProps>>;
-declare const ButtonVue3: DefineComponent<ButtonProps, any, ButtonData, ButtonComputed, ButtonMethods, {}, {}, {}, string, ButtonProps, ButtonProps, {}>;
-export { Button, ButtonVue3 };
+declare let ButtonVue2: ComponentOptions<ButtonAll, DefaultData<ButtonData>, DefaultMethods<ButtonAll>, ButtonComputed, RecordPropsDefinition<ButtonProps>>;
+declare const Button: DefineComponent<ButtonProps, any, ButtonData, ButtonComputed, ButtonMethods, {}, {}, {}, string, ButtonProps, ButtonProps, {}>;
+export { Button, ButtonVue2 };

package/dist/npm/Button.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ButtonVue3 = exports.Button = void 0; // @ts-ignore
+exports.ButtonVue2 = exports.Button = void 0; // @ts-ignore
 
 var Vue = require("vue");
 
@@ -18,7 +18,7 @@ var util_1 = require("./util");
 
 var styles = util_1.default.styles; // tslint:enable:max-line-length
 
-var Button = {
+var ButtonVue2 = {
   name: 'KendoButton',
   // @ts-ignore
   emits: {
@@ -32,16 +32,7 @@ var Button = {
     keypress: null
   },
   props: {
-    look: {
-      type: String,
-      default: function _default() {
-        return 'default';
-      }
-    },
-    primary: {
-      type: Boolean,
-      default: false
-    },
+    dir: String,
     selected: {
       type: Boolean,
       default: undefined
@@ -72,6 +63,36 @@ var Button = {
     disabled: {
       type: Boolean,
       default: undefined
+    },
+    size: {
+      type: String,
+      default: 'medium'
+    },
+    shape: {
+      type: String,
+      default: 'rectangle',
+      validator: function validator(value) {
+        return [null, 'rectangle', 'square'].includes(value);
+      }
+    },
+    rounded: {
+      type: String,
+      default: 'medium'
+    },
+    fillMode: {
+      type: String,
+      default: 'solid',
+      validator: function validator(value) {
+        return [null, 'flat', 'link', 'outline', 'solid'].includes(value);
+      }
+    },
+    // eslint-disable-next-line max-len
+    themeColor: {
+      type: String,
+      default: 'base',
+      validator: function validator(value) {
+        return [null, 'base', 'dark', 'error', 'info', 'inverse', 'inverse', 'light', 'primary', 'secondary', 'success', 'tertiary', 'warning'].includes(value);
+      }
     }
   },
   created: function created() {
@@ -87,6 +108,25 @@ var Button = {
   computed: {
     computedSelected: function computedSelected() {
       return this._activeTemp !== undefined ? this._activeTemp : this.$props.selected !== undefined ? this.$props.selected : this.currentActive;
+    },
+    buttonClasses: function buttonClasses() {
+      var _a;
+
+      var _b = this.$props,
+          disabled = _b.disabled,
+          icon = _b.icon,
+          iconClass = _b.iconClass,
+          imageUrl = _b.imageUrl,
+          dir = _b.dir,
+          size = _b.size,
+          shape = _b.shape,
+          rounded = _b.rounded,
+          fillMode = _b.fillMode,
+          themeColor = _b.themeColor;
+      var hasIcon = icon !== undefined || iconClass !== undefined || imageUrl !== undefined;
+      var defaultSlot = kendo_vue_common_1.getDefaultSlots(this);
+      var hasChildren = defaultSlot;
+      return _a = {}, _a[styles.button] = true, _a["k-button-" + (kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-button-" + shape] = shape && shape !== 'rectangle', _a["k-rounded-" + (kendo_vue_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-icon-button'] = !hasChildren && hasIcon, _a['k-disabled'] = disabled, _a['k-selected'] = this.computedSelected, _a['k-rtl'] = dir === 'rtl', _a["k-button-" + fillMode] = fillMode, _a["k-button-" + fillMode + "-" + themeColor] = fillMode && themeColor, _a;
     }
   },
   updated: function updated() {
@@ -158,21 +198,14 @@ var Button = {
   },
   // @ts-ignore
   render: function render(createElement) {
-    var _a;
-
     var h = gh || createElement;
-    var _b = this.$props,
-        look = _b.look,
-        primary = _b.primary,
-        togglable = _b.togglable,
-        icon = _b.icon,
-        iconClass = _b.iconClass,
-        imageUrl = _b.imageUrl,
-        imageAlt = _b.imageAlt;
-    var hasIcon = icon !== undefined || iconClass !== undefined || imageUrl !== undefined;
+    var _a = this.$props,
+        togglable = _a.togglable,
+        icon = _a.icon,
+        iconClass = _a.iconClass,
+        imageUrl = _a.imageUrl,
+        imageAlt = _a.imageAlt;
     var defaultSlot = kendo_vue_common_1.getDefaultSlots(this);
-    var hasChildren = defaultSlot;
-    var buttonClasses = kendo_vue_common_1.classNames([styles.button], (_a = {}, _a[styles["" + look]] = look !== 'default', _a[styles.primary] = primary, _a[styles['state-disabled']] = this.$props.disabled, _a[styles['state-selected']] = this.computedSelected, _a[styles['button-icon']] = !hasChildren && hasIcon, _a[styles['button-icontext']] = hasChildren && hasIcon, _a), [styles["" + this.$props.dir]]);
 
     var iconElement = function iconElement() {
       if (imageUrl) {
@@ -188,7 +221,7 @@ var Button = {
           src: imageUrl
         });
       } else if (icon) {
-        var iconClasses = kendo_vue_common_1.classNames('k-icon', 'k-i-' + icon);
+        var iconClasses = kendo_vue_common_1.classNames('k-icon', 'k-button-icon', 'k-i-' + icon);
         return h("span", {
           role: "presentation",
           attrs: this.v3 ? undefined : {
@@ -210,7 +243,7 @@ var Button = {
     };
 
     return h("button", {
-      "class": buttonClasses,
+      "class": this.buttonClasses,
       onClick: this.handleClick,
       on: this.v3 ? undefined : {
         "click": this.handleClick,
@@ -241,6 +274,6 @@ var Button = {
     }, [iconElement.call(this), defaultSlot]);
   }
 };
-exports.Button = Button;
-var ButtonVue3 = Button;
-exports.ButtonVue3 = ButtonVue3;
+exports.ButtonVue2 = ButtonVue2;
+var Button = ButtonVue2;
+exports.Button = Button;

package/dist/npm/ButtonGroup.d.ts

@@ -1,5 +1,4 @@
-import { DefineComponent } from './additionalTypes';
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from './additionalTypes';
 declare type DefaultData<V> = object | ((this: V) => {});
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
@@ -37,8 +36,8 @@ export interface ButtonGroupData {
 /**
  * @hidden
  */
-export interface ButtonGroupAll extends Vue, ButtonGroupMethods, ButtonGroupData, ButtonGroupState {
+export interface ButtonGroupAll extends Vue2type, ButtonGroupMethods, ButtonGroupData, ButtonGroupState {
 }
-declare let ButtonGroup: ComponentOptions<ButtonGroupAll, DefaultData<ButtonGroupData>, DefaultMethods<ButtonGroupAll>, {}, RecordPropsDefinition<ButtonGroupProps>>;
-declare const ButtonGroupVue3: DefineComponent<ButtonGroupProps, any, ButtonGroupData, {}, ButtonGroupMethods, {}, {}, {}, string, ButtonGroupProps, ButtonGroupProps, {}>;
-export { ButtonGroup, ButtonGroupVue3 };
+declare let ButtonGroupVue2: ComponentOptions<ButtonGroupAll, DefaultData<ButtonGroupData>, DefaultMethods<ButtonGroupAll>, {}, RecordPropsDefinition<ButtonGroupProps>>;
+declare const ButtonGroup: DefineComponent<ButtonGroupProps, any, ButtonGroupData, {}, ButtonGroupMethods, {}, {}, {}, string, ButtonGroupProps, ButtonGroupProps, {}>;
+export { ButtonGroup, ButtonGroupVue2 };

package/dist/npm/ButtonGroup.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ButtonGroupVue3 = exports.ButtonGroup = void 0; // @ts-ignore
+exports.ButtonGroupVue2 = exports.ButtonGroup = void 0; // @ts-ignore
 
 var Vue = require("vue");
 
@@ -20,7 +20,7 @@ var util_1 = require("./util");
 
 var styles = util_1.default.styles; // tslint:enable:max-line-length
 
-var ButtonGroup = {
+var ButtonGroupVue2 = {
   name: 'KendoButtonGroup',
   props: {
     disabled: {
@@ -81,7 +81,7 @@ var ButtonGroup = {
       });
     };
 
-    var groupClasses = kendo_vue_common_1.classNames([styles['button-group']], (_a = {}, _a[styles['state-disabled']] = this.$props.disabled, _a[styles['button-group-stretched']] = !!this.$props.width, _a));
+    var groupClasses = kendo_vue_common_1.classNames([styles['button-group']], (_a = {}, _a['k-disabled'] = this.$props.disabled, _a[styles['button-group-stretched']] = !!this.$props.width, _a));
     return h("div", {
       style: {
         width: this.width
@@ -108,6 +108,6 @@ var ButtonGroup = {
     }
   }
 };
-exports.ButtonGroup = ButtonGroup;
-var ButtonGroupVue3 = ButtonGroup;
-exports.ButtonGroupVue3 = ButtonGroupVue3;
+exports.ButtonGroupVue2 = ButtonGroupVue2;
+var ButtonGroup = ButtonGroupVue2;
+exports.ButtonGroup = ButtonGroup;

package/dist/npm/ButtonInterface.d.ts

@@ -3,7 +3,7 @@
  */
 export interface ButtonInterface {
     /**
-     * Changes the visual appearance by using alternative styling options ([more information and examples]({% slug appearance_button %})).
+     * **Deprecated**. Use [`fillMode`]({% slug api_buttons_buttonprops %}#toc-fillmode) prop instead.
      *
      * The available values are:
      * * [`ButtonLook`]({% slug api_buttons_buttonlook %}) = `flat` | `outline`
@@ -12,12 +12,19 @@ export interface ButtonInterface {
     look?: string;
     /**
      * Adds visual weight to the Button and makes it primary ([see example]({% slug primary_button %})).
+     * **Deprecated**. Use [`themeColor`]({% slug api_buttons_buttonprops %}#toc-themecolor) prop instead.
+     *
+     * @deprecated
      */
     primary?: boolean;
     /**
      * Specifies if the Button is disabled ([see example]({% slug disabled_button %})). Defaults to `false`.
      */
     disabled?: boolean;
+    /**
+     * Sets the direction of the Button.
+     */
+    dir?: string;
     /**
      * Sets the selected state of the Button. Can be used for controlled state.
      */

package/dist/npm/ButtonWrap.d.ts

@@ -1,5 +1,4 @@
-import { DefineComponent } from './additionalTypes';
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from './additionalTypes';
 declare type DefaultData<V> = object | ((this: V) => {});
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
@@ -7,8 +6,8 @@ declare type DefaultMethods<V> = {
 /**
  * @hidden
  */
-export interface ButtonAll extends Vue {
+export interface ButtonAll extends Vue2type {
 }
-declare let ButtonWrap: ComponentOptions<ButtonAll, DefaultData<{}>, DefaultMethods<ButtonAll>, {}, RecordPropsDefinition<{}>>;
-declare const ButtonWrapVue3: DefineComponent<{}, any, {}, {}, {}, {}, {}, {}, string, {}, {}, {}>;
-export { ButtonWrap, ButtonWrapVue3 };
+declare let ButtonWrapVue2: ComponentOptions<ButtonAll, DefaultData<{}>, DefaultMethods<ButtonAll>, {}, RecordPropsDefinition<{}>>;
+declare const ButtonWrap: DefineComponent<{}, any, {}, {}, {}, {}, {}, {}, string, {}, {}, {}>;
+export { ButtonWrap, ButtonWrapVue2 };

package/dist/npm/ButtonWrap.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ButtonWrapVue3 = exports.ButtonWrap = void 0; // @ts-ignore
+exports.ButtonWrapVue2 = exports.ButtonWrap = void 0; // @ts-ignore
 
 var Vue = require("vue");
 
@@ -13,7 +13,7 @@ var gh = allVue.h;
 var kendo_vue_common_1 = require("@progress/kendo-vue-common"); // tslint:enable:max-line-length
 
 
-var ButtonWrap = {
+var ButtonWrapVue2 = {
   name: 'KendoButtonWrap',
   props: {},
   // @ts-ignore
@@ -30,6 +30,6 @@ var ButtonWrap = {
     return defaultSlot[0];
   }
 };
-exports.ButtonWrap = ButtonWrap;
-var ButtonWrapVue3 = ButtonWrap;
-exports.ButtonWrapVue3 = ButtonWrapVue3;
+exports.ButtonWrapVue2 = ButtonWrapVue2;
+var ButtonWrap = ButtonWrapVue2;
+exports.ButtonWrap = ButtonWrap;

package/dist/npm/Chip/Chip.d.ts

@@ -1,5 +1,4 @@
-import { DefineComponent } from '../additionalTypes';
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
 declare type DefaultData<V> = object | ((this: V) => {});
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
@@ -13,10 +12,6 @@ export interface ChipProps {
      * Sets the `id` property of the top div element of the Chip.
      */
     id?: string;
-    /**
-     * Sets additional classes to the Chip.
-     */
-    className?: string;
     /**
      * Sets the `tabIndex` attribute.
      */
@@ -61,6 +56,57 @@ export interface ChipProps {
      * Determines if the Chip style is `filled` or `outlined`.
      */
     look?: string;
+    /**
+     * Configures the `size` of the Chip.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `class`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Configures the `roundness` of the Chip.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `class`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `fillMode` of the Chip.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - null&mdash;Does not set a fillMode `class`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | string;
+    /**
+     * Configures the `themeColor` of the Chip.
+     *
+     * The available options are:
+     * - base
+     * - info
+     * - success
+     * - warning
+     * - error
+     * - null&mdash;Does not set a themeColor `class`.
+     *
+     * @default `base`
+     */
+    themeColor?: null | 'base' | 'info' | 'success' | 'warning' | 'error' | string;
     /**
      * Triggered on Chip removing.
      */
@@ -140,7 +186,7 @@ export interface ChipComputed {
 /**
  * @hidden
  */
-export interface ChipAll extends ChipMethods, ChipState, ChipData, ChipComputed, Vue {
+export interface ChipAll extends ChipMethods, ChipState, ChipData, ChipComputed, Vue2type {
 }
 /**
  * @hidden
@@ -148,6 +194,6 @@ export interface ChipAll extends ChipMethods, ChipState, ChipData, ChipComputed,
 /**
  * Represents the default `Chip` component.
  */
-declare let Chip: ComponentOptions<Vue, DefaultData<ChipData>, DefaultMethods<ChipAll>, ChipComputed, RecordPropsDefinition<ChipProps>>;
-declare const ChipVue3: DefineComponent<ChipProps, any, ChipData, ChipComputed, ChipMethods, {}, {}, {}, string, ChipProps, ChipProps, {}>;
-export { Chip, ChipVue3 };
+declare let ChipVue2: ComponentOptions<Vue2type, DefaultData<ChipData>, DefaultMethods<ChipAll>, ChipComputed, RecordPropsDefinition<ChipProps>>;
+declare const Chip: DefineComponent<ChipProps, any, ChipData, ChipComputed, ChipMethods, {}, {}, {}, string, ChipProps, ChipProps, {}>;
+export { Chip, ChipVue2 };

package/dist/npm/Chip/Chip.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ChipVue3 = exports.Chip = void 0; // @ts-ignore
+exports.ChipVue2 = exports.Chip = void 0; // @ts-ignore
 
 var Vue = require("vue");
 
@@ -29,7 +29,7 @@ var package_metadata_1 = require("../package-metadata");
  */
 
 
-var Chip = {
+var ChipVue2 = {
   name: 'KendoVueChip',
   props: {
     id: String,
@@ -69,6 +69,29 @@ var Chip = {
         return 'solid';
       }
     },
+    size: {
+      type: String,
+      default: 'medium'
+    },
+    rounded: {
+      type: String,
+      default: 'medium'
+    },
+    fillMode: {
+      type: String,
+      default: 'solid',
+      validator: function validator(value) {
+        return [null, 'flat', 'outline', 'solid'].includes(value);
+      }
+    },
+    // eslint-disable-next-line max-len
+    themeColor: {
+      type: String,
+      default: 'base',
+      validator: function validator(value) {
+        return [null, 'base', 'error', 'info', 'success', 'warning'].includes(value);
+      }
+    },
     dataItem: Object,
     selected: Boolean,
     ariaDescribedBy: String
@@ -254,9 +277,18 @@ var Chip = {
     };
   },
   render: function render(createElement) {
+    var _a;
+
     var _this = this;
 
     var h = gh || createElement;
+    var _b = this.$props,
+        size = _b.size,
+        rounded = _b.rounded,
+        themeColor = _b.themeColor,
+        fillMode = _b.fillMode,
+        look = _b.look,
+        type = _b.type;
     return h("div", {
       role: this.$props.role,
       attrs: this.v3 ? undefined : {
@@ -274,19 +306,12 @@ var Chip = {
       } : 'chip',
       dir: this.currentDir,
       tabIndex: kendo_vue_common_1.getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined),
-      "class": kendo_vue_common_1.classNames('k-chip', {
+      "class": kendo_vue_common_1.classNames('k-chip', (_a = {
         'k-rtl': this.currentDir === 'rtl',
-        'k-state-disabled': this.$props.disabled,
-        'k-state-selected': this.currentSelected,
-        'k-state-focus': this.computedFocused(),
-        'k-chip-success': this.$props.type === 'success',
-        'k-chip-warning': this.$props.type === 'warning',
-        'k-chip-error': this.$props.type === 'error',
-        'k-chip-info': this.$props.type === 'info',
-        'k-chip-has-icon': this.$props.icon,
-        'k-chip-outline': this.$props.look === 'outline' || this.$props.look === 'outlined',
-        'k-chip-solid': this.$props.look === 'solid' || this.$props.look === 'filled'
-      }, this.$props.className),
+        'k-disabled': this.$props.disabled,
+        'k-selected': this.currentSelected,
+        'k-focus': this.computedFocused()
+      }, _a["k-chip-" + (kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-rounded-" + (kendo_vue_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a["k-chip-" + fillMode] = fillMode, _a["k-chip-" + fillMode + "-" + themeColor] = Boolean(fillMode && themeColor), _a['k-chip-success'] = type === 'success', _a['k-chip-warning'] = type === 'warning', _a['k-chip-error'] = type === 'error', _a['k-chip-info'] = type === 'info', _a['k-chip-outline'] = look === 'outline' || look === 'outlined', _a['k-chip-solid'] = look === 'solid' || look === 'filled', _a)),
       "aria-checked": this.currentSelected,
       "aria-disabled": this.$props.disabled,
       "aria-describedby": this.$props.ariaDescribedBy,
@@ -300,12 +325,10 @@ var Chip = {
       onBlur: this.handleBlur,
       onClick: this.handleClick,
       onKeydown: this.handleKeyDown
-    }, [this.currentSelected && h("span", {
-      "class": 'k-selected-icon-wrapper'
-    }, [h("span", {
-      "class": "k-selected-icon k-icon " + this.$props.selectedIcon
-    })]), this.$props.icon && h("span", {
-      "class": "k-icon k-chip-icon " + this.$props.icon
+    }, [this.currentSelected && this.$props.selectedIcon && h("span", {
+      "class": kendo_vue_common_1.classNames('k-chip-icon', 'k-icon', this.$props.selectedIcon)
+    }), this.$props.icon && h("span", {
+      "class": kendo_vue_common_1.classNames('k-chip-icon', 'k-icon', this.$props.icon)
     }), h("span", {
       "class": 'k-chip-content'
     }, [this.$props.text && h("span", {
@@ -315,16 +338,14 @@ var Chip = {
       },
       "class": 'k-chip-label'
     }, [this.$props.text])]), this.$props.removable && h("span", {
-      "class": 'k-remove-icon',
+      "class": kendo_vue_common_1.classNames('k-chip-icon', 'k-icon', this.$props.removeIcon),
       onClick: this.handleRemove,
       on: this.v3 ? undefined : {
         "click": this.handleRemove
       }
-    }, [h("span", {
-      "class": "k-icon " + this.$props.removeIcon
-    })])]);
+    })]);
   }
 };
-exports.Chip = Chip;
-var ChipVue3 = Chip;
-exports.ChipVue3 = ChipVue3;
+exports.ChipVue2 = ChipVue2;
+var Chip = ChipVue2;
+exports.Chip = Chip;