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

package/dist/npm/buttongroup/buttongroup.component.js

@@ -12,6 +12,8 @@ var kendo_angular_common_1 = require("@progress/kendo-angular-common");
 var button_service_1 = require("../button/button.service");
 var util_1 = require("../util");
 var preventable_event_1 = require("../preventable-event");
+var package_metadata_1 = require("../package-metadata");
+var kendo_licensing_1 = require("@progress/kendo-licensing");
 /**
  * @hidden
  */
@@ -28,23 +30,13 @@ var ButtonGroupComponent = /** @class */ (function () {
          * By default, the selection mode of the ButtonGroup is set to `multiple`.
          */
         this.selection = 'multiple';
-        /**
-         * Changes the visual appearance by using alternative styling options
-         * ([more information and examples]({% slug styling_buttongroup %})).
-         * The `look` property of the ButtonGroup takes precedence over the `look` property
-         * of the individual buttons that are part of the group.
-         *
-         * The available values are:
-         * * `flat`
-         * * `outline`
-         */
-        this.look = 'default';
         /**
          * Fires every time keyboard navigation occurs.
          */
         this.navigate = new core_1.EventEmitter();
         this._tabIndex = 0;
         this.currentTabIndex = 0;
+        kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
         this.localizationChangeSubscription = localization.changes.subscribe(function (_a) {
             var rtl = _a.rtl;
             return _this.direction = rtl ? 'rtl' : 'ltr';
@@ -85,27 +77,6 @@ var ButtonGroupComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ButtonGroupComponent.prototype, "isFlat", {
-        get: function () {
-            return this.look === 'flat';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ButtonGroupComponent.prototype, "isBare", {
-        get: function () {
-            return this.look === 'bare';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ButtonGroupComponent.prototype, "isOutline", {
-        get: function () {
-            return this.look === 'outline';
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(ButtonGroupComponent.prototype, "getRole", {
         get: function () {
             return this.isSelectionSingle() ? 'radiogroup' : 'group';
@@ -171,7 +142,6 @@ var ButtonGroupComponent = /** @class */ (function () {
     };
     ButtonGroupComponent.prototype.ngOnInit = function () {
         var _this = this;
-        this.service.setButtonLook(this.look);
         this.subscription = this.service.buttonClicked$.subscribe(function (button) {
             var newSelectionValue;
             if (_this.isSelectionSingle()) {
@@ -185,7 +155,7 @@ var ButtonGroupComponent = /** @class */ (function () {
             if (button.togglable) {
                 button.setSelected(newSelectionValue);
             }
-            button.setAttribute(tabindex, "0");
+            button.setAttribute(tabindex, '0');
         });
     };
     ButtonGroupComponent.prototype.ngOnChanges = function (change) {
@@ -201,10 +171,10 @@ var ButtonGroupComponent = /** @class */ (function () {
     ButtonGroupComponent.prototype.ngAfterContentInit = function () {
         this.buttons.forEach(function (button) {
             if (button.selected) {
-                button.setAttribute(tabindex, "0");
+                button.setAttribute(tabindex, '0');
             }
             else {
-                button.setAttribute(tabindex, "-1");
+                button.setAttribute(tabindex, '-1');
             }
         });
     };
@@ -248,24 +218,24 @@ var ButtonGroupComponent = /** @class */ (function () {
     ButtonGroupComponent.prototype.deactivate = function (buttons) {
         buttons.forEach(function (button) {
             button.setSelected(false);
-            button.setAttribute(tabindex, "-1");
+            button.setAttribute(tabindex, '-1');
         });
     };
     ButtonGroupComponent.prototype.activate = function (buttons) {
         buttons.forEach(function (button) {
             button.setSelected(true);
-            button.setAttribute(tabindex, "0");
+            button.setAttribute(tabindex, '0');
             button.focus();
         });
     };
     ButtonGroupComponent.prototype.defocus = function (buttons) {
         buttons.forEach(function (button) {
-            button.setAttribute(tabindex, "-1");
+            button.setAttribute(tabindex, '-1');
         });
     };
     ButtonGroupComponent.prototype.focus = function (buttons) {
         buttons.forEach(function (button) {
-            button.setAttribute(tabindex, "0");
+            button.setAttribute(tabindex, '0');
             button.focus();
         });
     };
@@ -291,10 +261,6 @@ var ButtonGroupComponent = /** @class */ (function () {
         core_1.Input('width'),
         tslib_1.__metadata("design:type", String)
     ], ButtonGroupComponent.prototype, "width", void 0);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", String)
-    ], ButtonGroupComponent.prototype, "look", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", Number),
@@ -314,7 +280,7 @@ var ButtonGroupComponent = /** @class */ (function () {
         tslib_1.__metadata("design:paramtypes", [])
     ], ButtonGroupComponent.prototype, "wrapperClass", null);
     tslib_1.__decorate([
-        core_1.HostBinding('class.k-state-disabled'),
+        core_1.HostBinding('class.k-disabled'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], ButtonGroupComponent.prototype, "disabledClass", null);
@@ -323,21 +289,6 @@ var ButtonGroupComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], ButtonGroupComponent.prototype, "stretchedClass", null);
-    tslib_1.__decorate([
-        core_1.HostBinding('class.k-button-group-flat'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], ButtonGroupComponent.prototype, "isFlat", null);
-    tslib_1.__decorate([
-        core_1.HostBinding('class.k-button-group-bare'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], ButtonGroupComponent.prototype, "isBare", null);
-    tslib_1.__decorate([
-        core_1.HostBinding('class.k-button-group-outline'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], ButtonGroupComponent.prototype, "isOutline", null);
     tslib_1.__decorate([
         core_1.HostBinding('attr.role'),
         tslib_1.__metadata("design:type", String),

package/dist/npm/chip/chip-list.component.js

@@ -9,10 +9,13 @@ var core_1 = require("@angular/core");
 var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
 var chip_component_1 = require("./chip.component");
 var util_1 = require("../util");
+var kendo_licensing_1 = require("@progress/kendo-licensing");
+var package_metadata_1 = require("../package-metadata");
 var ChipListComponent = /** @class */ (function () {
-    function ChipListComponent(localizationService, renderer) {
+    function ChipListComponent(localizationService, renderer, element) {
         this.localizationService = localizationService;
         this.renderer = renderer;
+        this.element = element;
         this.hostClass = true;
         /**
          * Sets the selection mode of the ChipList.
@@ -32,8 +35,31 @@ var ChipListComponent = /** @class */ (function () {
          */
         this.remove = new core_1.EventEmitter();
         this.role = 'listbox';
+        this._size = 'medium';
+        kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
+    Object.defineProperty(ChipListComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * The size property specifies the gap between the Chips in the ChipList
+         * ([see example]({% slug appearance_chiplist %}#toc-size)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
+         */
+        set: function (size) {
+            this.handleClasses(size, 'size');
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(ChipListComponent.prototype, "single", {
         get: function () {
             return this.selection === 'single';
@@ -53,7 +79,7 @@ var ChipListComponent = /** @class */ (function () {
      */
     ChipListComponent.prototype.onClick = function ($event) {
         var target = $event.target;
-        var isRemoveClicked = util_1.closest(target, '.k-remove-icon');
+        var isRemoveClicked = util_1.closest(target, '.k-chip-remove-action');
         var clickedChip = util_1.closest(target, '.k-chip');
         var chip = this.chips.find(function (chip) { return clickedChip === chip.element.nativeElement; });
         if (isRemoveClicked && clickedChip) {
@@ -72,6 +98,13 @@ var ChipListComponent = /** @class */ (function () {
             return _this.direction = rtl ? 'rtl' : 'ltr';
         });
     };
+    ChipListComponent.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        var stylingInputs = ['size'];
+        stylingInputs.forEach(function (input) {
+            _this.handleClasses(_this[input], input);
+        });
+    };
     ChipListComponent.prototype.ngAfterContentInit = function () {
         var _this = this;
         this.chips.forEach(function (chip) {
@@ -103,6 +136,16 @@ var ChipListComponent = /** @class */ (function () {
             }
         });
     };
+    ChipListComponent.prototype.handleClasses = function (value, input) {
+        var elem = this.element.nativeElement;
+        var classes = util_1.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);
+        }
+    };
     tslib_1.__decorate([
         core_1.HostBinding('class.k-chip-list'),
         tslib_1.__metadata("design:type", Boolean)
@@ -115,6 +158,11 @@ var ChipListComponent = /** @class */ (function () {
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
     ], ChipListComponent.prototype, "selection", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ChipListComponent.prototype, "size", null);
     tslib_1.__decorate([
         core_1.Output(),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
@@ -149,17 +197,19 @@ var ChipListComponent = /** @class */ (function () {
     ], ChipListComponent.prototype, "onClick", null);
     ChipListComponent = tslib_1.__decorate([
         core_1.Component({
-            selector: 'kendo-chip-list, kendo-chiplist',
+            selector: 'kendo-chiplist, kendo-chip-list',
             template: "\n        <ng-content></ng-content>\n    ",
             providers: [
                 kendo_angular_l10n_1.LocalizationService,
                 {
                     provide: kendo_angular_l10n_1.L10N_PREFIX,
-                    useValue: 'kendo.chip-list'
+                    useValue: 'kendo.chiplist'
                 }
             ]
         }),
-        tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService, core_1.Renderer2])
+        tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,
+            core_1.Renderer2,
+            core_1.ElementRef])
     ], ChipListComponent);
     return ChipListComponent;
 }());

package/dist/npm/chip/chip.component.js

@@ -20,38 +20,20 @@ var ChipComponent = /** @class */ (function () {
         this.renderer = renderer;
         this.ngZone = ngZone;
         this.localizationService = localizationService;
-        /**
-         * Changes the visual appearance by using alternative styling options.
-         *
-         * The available values are:
-         * * `solid`
-         * * `outline`
-         * * `filled` (The `filled` option will be deprecated. To apply identical styling, use `solid` instead).
-         * * `outlined` (The `outlined` option will be deprecated. To apply identical styling, use `outline` instead).
-         */
-        this.look = 'solid';
         /**
          * Specifies the selected state of the Chip.
+         * @default false
          */
         this.selected = false;
         /**
          * Specifies if the Chip will be removable or not.
          * If the property is set to `true`, the Chip renders a remove icon.
+         * @default false
          */
         this.removable = false;
-        /**
-         * Specifies the Chip type.
-         *
-         * The possible values are:
-         * - `none` (default)
-         * - `success`
-         * - `error`
-         * - `warning`
-         * - `info`
-         */
-        this.type = 'none';
         /**
          * If set to `true`, the Chip will be disabled.
+         * @default false
          */
         this.disabled = false;
         /**
@@ -64,34 +46,111 @@ var ChipComponent = /** @class */ (function () {
         this.contentClick = new core_1.EventEmitter();
         this.tabIndex = 0;
         this.hostClass = true;
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
+        this._themeColor = 'base';
         this.focused = false;
         kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
-    Object.defineProperty(ChipComponent.prototype, "ariaChecked", {
+    Object.defineProperty(ChipComponent.prototype, "size", {
         get: function () {
-            return this.selected;
+            return this._size;
+        },
+        /**
+         * The size property specifies the height, padding and line height of the Chip
+         * ([see example]({% slug appearance_chip %}#toc-size)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
+         */
+        set: function (size) {
+            this.handleClasses(size, 'size');
+            this._size = size;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ChipComponent.prototype, "outlineClass", {
+    Object.defineProperty(ChipComponent.prototype, "rounded", {
         get: function () {
-            return this.look === 'outline' || this.look === 'outlined';
+            return this._rounded;
+        },
+        /**
+         * The rounded property specifies the border radius of the Chip
+         * ([see example]({% slug appearance_chip %}#toc-rounded)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `'full'`
+         * * `null`
+         */
+        set: function (rounded) {
+            this.handleClasses(rounded, 'rounded');
+            this._rounded = rounded;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ChipComponent.prototype, "solidClass", {
+    Object.defineProperty(ChipComponent.prototype, "fillMode", {
         get: function () {
-            return this.look === 'solid' || this.look === 'filled';
+            return this._fillMode;
+        },
+        /**
+         * The fillMode property specifies the background and border styles of the Chip
+         * ([see example]({% slug appearance_chip %}#toc-fillMode)).
+         *
+         * The possible values are:
+         * * `'solid'` (default)
+         * * `'outline'`
+         * * `null`
+         */
+        set: function (fillMode) {
+            this.handleClasses(fillMode, 'fillMode');
+            this._fillMode = fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ChipComponent.prototype, "themeColor", {
+        get: function () {
+            return this._themeColor;
+        },
+        /**
+         * The Chip allows you to specify predefined theme colors.
+         * The theme color will be applied as a background and border color while also amending the text color accordingly
+         * ([see example]({% slug appearance_chip %}#toc-themeColor)).
+         *
+         * The possible values are:
+         * * `'base'` (default)
+         * * `'info'`
+         * * `'success'`
+         * * `'warning'`
+         * * `'error'`
+         * * `null`
+         */
+        set: function (themeColor) {
+            this.handleThemeColor(themeColor);
+            this._themeColor = themeColor;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ChipComponent.prototype, "ariaChecked", {
+        get: function () {
+            return this.selected;
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(ChipComponent.prototype, "hasIconClass", {
         get: function () {
-            return this.icon || this.iconClass ? true : false;
+            return this.icon || this.iconClass || this.avatarClass ? true : false;
         },
         enumerable: true,
         configurable: true
@@ -134,44 +193,48 @@ var ChipComponent = /** @class */ (function () {
         }
     };
     ChipComponent.prototype.ngAfterViewInit = function () {
+        var _this = this;
         var chip = this.element.nativeElement;
-        var typeClass = this.typeClass();
-        if (this.type !== 'none') {
-            this.renderer.addClass(chip, typeClass);
-        }
+        var stylingOptions = ['size', 'rounded', 'fillMode'];
+        stylingOptions.forEach(function (input) {
+            _this.handleClasses(_this[input], input);
+        });
         this.attachElementEventHandlers(chip);
     };
-    Object.defineProperty(ChipComponent.prototype, "iconClasses", {
+    Object.defineProperty(ChipComponent.prototype, "kendoIconClass", {
         /**
          * @hidden
          */
         get: function () {
-            var classes = [];
-            if (this.iconClass) {
-                classes.push("" + this.iconClass);
-            }
-            if (this.icon) {
-                classes.push("k-icon k-i-" + this.icon);
-            }
-            return classes;
+            this.verifyIconSettings([this.iconClass, this.avatarClass]);
+            return "k-i-" + this.icon;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ChipComponent.prototype, "selectedIconClasses", {
+    Object.defineProperty(ChipComponent.prototype, "customIconClass", {
         /**
          * @hidden
          */
         get: function () {
-            if (this.selectedIcon) {
-                return "" + this.selectedIcon;
-            }
-            return "k-icon k-i-check";
+            this.verifyIconSettings([this.icon, this.avatarClass]);
+            return "" + this.iconClass;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ChipComponent.prototype, "chipAvatarClass", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            this.verifyIconSettings([this.icon, this.iconClass]);
+            return "" + this.avatarClass;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ChipComponent.prototype, "removeIconClasses", {
+    Object.defineProperty(ChipComponent.prototype, "removeIconClass", {
         /**
          * @hidden
          */
@@ -179,23 +242,11 @@ var ChipComponent = /** @class */ (function () {
             if (this.removeIcon) {
                 return "" + this.removeIcon;
             }
-            return "k-icon k-i-close-circle";
+            return "k-i-close-circle";
         },
         enumerable: true,
         configurable: true
     });
-    /**
-     * @hidden
-     */
-    ChipComponent.prototype.typeClass = function () {
-        return {
-            'none': '',
-            'success': 'k-chip-success',
-            'warning': 'k-chip-warning',
-            'error': 'k-chip-error',
-            'info': 'k-chip-info'
-        }[this.type];
-    };
     /**
      * Focuses the Chip component.
      */
@@ -230,7 +281,7 @@ var ChipComponent = /** @class */ (function () {
                 _this.renderer.removeClass(chip, 'k-focus');
             });
             var contentClickListener = _this.renderer.listen(chip, 'click', function (e) {
-                var isRemoveClicked = util_1.closest(e.target, '.k-remove-icon');
+                var isRemoveClicked = util_1.closest(e.target, '.k-chip-remove-action');
                 if (!isRemoveClicked) {
                     _this.ngZone.run(function () {
                         _this.contentClick.emit({ sender: _this, originalEvent: e });
@@ -244,10 +295,42 @@ var ChipComponent = /** @class */ (function () {
             };
         });
     };
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", String)
-    ], ChipComponent.prototype, "look", void 0);
+    /**
+     * @hidden
+     */
+    ChipComponent.prototype.verifyIconSettings = function (iconsToCheck) {
+        if (core_1.isDevMode()) {
+            if (iconsToCheck.filter(function (icon) { return icon !== null && icon !== undefined; }).length > 0) {
+                this.renderer.removeClass(this.element.nativeElement, 'k-chip-has-icon');
+                throw new Error('Invalid configuration: Having multiple icons is not supported. Only a single icon on a chip can be displayed.');
+            }
+        }
+    };
+    ChipComponent.prototype.handleClasses = function (value, input) {
+        var elem = this.element.nativeElement;
+        var classes = util_1.getStylingClasses('chip', input, this[input], value);
+        if (input === 'fillMode') {
+            this.handleThemeColor(this.themeColor, this[input], value);
+        }
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    };
+    ChipComponent.prototype.handleThemeColor = function (value, prevFillMode, fillMode) {
+        var elem = this.element.nativeElement;
+        var removeFillMode = prevFillMode ? prevFillMode : this.fillMode;
+        var addFillMode = fillMode ? fillMode : this.fillMode;
+        var themeColorClass = util_1.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);
+            }
+        }
+    };
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
@@ -262,12 +345,12 @@ var ChipComponent = /** @class */ (function () {
     ], ChipComponent.prototype, "iconClass", void 0);
     tslib_1.__decorate([
         core_1.Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], ChipComponent.prototype, "selected", void 0);
+        tslib_1.__metadata("design:type", String)
+    ], ChipComponent.prototype, "avatarClass", void 0);
     tslib_1.__decorate([
         core_1.Input(),
-        tslib_1.__metadata("design:type", String)
-    ], ChipComponent.prototype, "selectedIcon", void 0);
+        tslib_1.__metadata("design:type", Boolean)
+    ], ChipComponent.prototype, "selected", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", Boolean)
@@ -276,14 +359,30 @@ var ChipComponent = /** @class */ (function () {
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
     ], ChipComponent.prototype, "removeIcon", void 0);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", String)
-    ], ChipComponent.prototype, "type", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", Boolean)
     ], ChipComponent.prototype, "disabled", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ChipComponent.prototype, "size", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ChipComponent.prototype, "rounded", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ChipComponent.prototype, "fillMode", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ChipComponent.prototype, "themeColor", null);
     tslib_1.__decorate([
         core_1.Output(),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
@@ -305,16 +404,6 @@ var ChipComponent = /** @class */ (function () {
         core_1.HostBinding('class.k-chip'),
         tslib_1.__metadata("design:type", Boolean)
     ], ChipComponent.prototype, "hostClass", void 0);
-    tslib_1.__decorate([
-        core_1.HostBinding('class.k-chip-outline'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], ChipComponent.prototype, "outlineClass", null);
-    tslib_1.__decorate([
-        core_1.HostBinding('class.k-chip-solid'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], ChipComponent.prototype, "solidClass", null);
     tslib_1.__decorate([
         core_1.HostBinding('class.k-chip-has-icon'),
         tslib_1.__metadata("design:type", Boolean),
@@ -343,7 +432,7 @@ var ChipComponent = /** @class */ (function () {
     ChipComponent = tslib_1.__decorate([
         core_1.Component({
             selector: 'kendo-chip',
-            template: "\n        <span class=\"k-selected-icon-wrapper\">\n            <span *ngIf=\"selected\"\n                class=\"k-selected-icon\"\n                [ngClass]=\"selectedIconClasses\"\n            >\n            </span>\n        </span>\n\n        <span *ngIf=\"icon || iconClass\"\n            class=\"k-chip-icon\"\n            [ngClass]=\"iconClasses\"\n        >\n        </span>\n\n        <span class=\"k-chip-content\">\n            <span class=\"k-chip-label\" *ngIf=\"label\">\n                {{ label }}\n            </span>\n            <ng-content *ngIf=\"!label\"></ng-content>\n        </span>\n\n        <span *ngIf=\"removable\"\n            class=\"k-remove-icon\"\n            (click)=\"onRemoveClick($event)\"\n        >\n            <span [ngClass]=\"removeIconClasses\"></span>\n        </span>\n    ",
+            template: "\n        <span\n            *ngIf=\"icon\"\n            class=\"k-chip-icon k-icon\"\n            [ngClass]=\"kendoIconClass\"\n        >\n        </span>\n\n        <span\n            *ngIf=\"iconClass\"\n            class=\"k-chip-icon\"\n            [ngClass]=\"customIconClass\"\n        >\n        </span>\n\n        <span\n            *ngIf=\"avatarClass\"\n            class=\"k-chip-avatar k-avatar k-rounded-full\"\n        >\n            <span class=\"k-avatar-image\" [ngClass]=\"chipAvatarClass\"></span>\n        </span>\n\n        <span class=\"k-chip-content\">\n            <span class=\"k-chip-label\" *ngIf=\"label\">\n                {{ label }}\n            </span>\n            <ng-content *ngIf=\"!label\"></ng-content>\n        </span>\n\n        <span class=\"k-chip-actions\">\n            <span class=\"k-chip-action k-chip-remove-action\"\n                *ngIf=\"removable\"\n                (click)=\"onRemoveClick($event)\"\n                >\n                <span\n                    class=\"k-icon\"\n                    [ngClass]=\"removeIconClass\"\n                >\n                </span>\n            </span>\n        </span>\n    ",
             providers: [
                 kendo_angular_l10n_1.LocalizationService,
                 {