@progress/kendo-angular-dropdowns 5.5.0 → 6.0.0-dev.202201171002

package/dist/es/common/list.component.js

@@ -9,7 +9,7 @@ import { ListItemDirective } from './list-item.directive';
 import { ItemTemplateDirective } from './templates/item-template.directive';
 import { GroupTemplateDirective } from './templates/group-template.directive';
 import { FixedGroupTemplateDirective } from './templates/fixed-group-template.directive';
-import { isPresent, getter, closest } from './util';
+import { isPresent, getter, closest, getSizeClass, getRoundedClass } from './util';
 import { SelectionService } from './selection/selection.service';
 import { fromEvent, merge } from 'rxjs';
 import { map, tap, auditTime, switchMap, take } from 'rxjs/operators';
@@ -33,8 +33,9 @@ var ListComponent = /** @class */ (function () {
         this.focused = -1;
         this.show = true;
         this.multipleSelection = false;
-        this.listClass = 'k-list k-reset';
+        this.type = 'list';
         this.checkboxes = { enabled: false };
+        this.rounded = 'medium';
         this.onClick = new EventEmitter();
         this.pageChange = new EventEmitter();
         this.listResize = new EventEmitter();
@@ -42,11 +43,13 @@ var ListComponent = /** @class */ (function () {
         this.lastLoaded = 0;
         this.lastScrollTop = 0;
         this.scrollToFocused = false;
+        this._size = 'medium';
         this.selectSubscription = merge(this.selectionService.onSelect.pipe(map(function (args) { return args.indices[0]; })), this.selectionService.onFocus)
             .pipe(
         // handle only the very last onSelect/onFocus emission
         switchMap(function (event) { return _this.zone.onStable.pipe(take(1), map(function () { return event; })); }))
             .subscribe(this.scrollToItem.bind(this));
+        this.prepareClasses();
     }
     Object.defineProperty(ListComponent.prototype, "data", {
         get: function () {
@@ -58,6 +61,22 @@ var ListComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(ListComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        set: function (size) {
+            if (this.type === 'list') {
+                this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('list', this.size));
+                if (size) {
+                    this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('list', size));
+                }
+                this._size = size;
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(ListComponent.prototype, "pageSize", {
         get: function () {
             if (this.virtual.pageSize) {
@@ -86,21 +105,40 @@ var ListComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(ListComponent.prototype, "checkboxClasses", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return (this.size ? getSizeClass('checkbox', this.size) : '') + " " + (this.rounded ? getRoundedClass(this.rounded) : '');
+        },
+        enumerable: true,
+        configurable: true
+    });
     ListComponent.prototype.ngOnChanges = function (changes) {
         if (isChanged('data', changes, false)) {
             if (this.lastLoaded <= 0) {
                 this.lastLoaded = this.data.length - 1;
                 this.scrollToFocused = !changes.data.isFirstChange();
             }
+            this.setOverflow();
+        }
+        if (isChanged('virtual', changes, false)) {
+            this.setOverflow();
+        }
+        if (isChanged('type', changes, false)) {
+            this.prepareClasses();
         }
     };
     ListComponent.prototype.ngAfterViewInit = function () {
         var _this = this;
+        this.setComponentClasses();
         this.zone.runOutsideAngular(function () {
             _this.scrollSubscription = fromEvent(_this.content.nativeElement, "scroll").pipe(auditTime(100), tap(_this.prefetchData.bind(_this)), tap(_this.findCurrentGroup.bind(_this))).subscribe(function () {
                 _this.lastScrollTop = _this.content.nativeElement.scrollTop;
             });
         });
+        this.setOverflow();
     };
     ListComponent.prototype.ngAfterViewChecked = function () {
         if (this.virtual) {
@@ -130,6 +168,28 @@ var ListComponent = /** @class */ (function () {
             this.selectionService.unselect(index);
         }
     };
+    ListComponent.prototype.prepareClasses = function () {
+        if (this.type === 'list') {
+            this.listContentClass = 'k-list-content';
+            this.listClass = 'k-list-ul';
+            this.listItemClass = 'k-list-item';
+            this.listVirtualClass = 'k-virtual-list';
+            this.listGroupStickyHeaderClass = 'k-list-group-sticky-header';
+            this.listGroupStickyHeaderTextClass = 'k-list-header-text';
+            this.listGroupItemClass = 'k-list-group-item';
+            this.listGroupItemTextClass = 'k-list-item-text';
+        }
+        else {
+            this.listContentClass = 'k-table-body k-table-scroller';
+            this.listClass = 'k-table k-table-list';
+            this.listItemClass = 'k-table-row';
+            this.listVirtualClass = 'k-virtual-table';
+            this.listGroupStickyHeaderClass = 'k-table-group-sticky-header';
+            this.listGroupStickyHeaderTextClass = 'k-table-th';
+            this.listGroupItemClass = 'k-table-group-row';
+            this.listGroupItemTextClass = 'k-table-th';
+        }
+    };
     ListComponent.prototype.isChecked = function (index) {
         var normalizedIndex = this.virtual ? index + this.virtual.skip : index;
         return this.selectionService.isSelected(normalizedIndex);
@@ -139,7 +199,7 @@ var ListComponent = /** @class */ (function () {
         var content = this.content.nativeElement;
         var rect = content.getBoundingClientRect();
         // IE9 hack
-        var disabled = Array.prototype.slice.call(content.querySelectorAll(".k-state-disabled"));
+        var disabled = Array.prototype.slice.call(content.querySelectorAll(".k-disabled"));
         // This is a workaround for finding elements with pointer-events: none;
         disabled.forEach(function (el) { return _this.renderer.setStyle(el, "pointer-events", "auto"); });
         var item = document.elementFromPoint(rect.left + 1, rect.top + 1);
@@ -218,6 +278,9 @@ var ListComponent = /** @class */ (function () {
         }
         return this.disabledItemsService.isIndexDisabled(index);
     };
+    ListComponent.prototype.isAltRow = function (index) {
+        return this.type === 'dropdowngrid' && index % 2 !== 0;
+    };
     ListComponent.prototype.scrollToItem = function (index) {
         var flatIndex = index;
         if (this.dataService.grouped) {
@@ -276,6 +339,15 @@ var ListComponent = /** @class */ (function () {
         var hasVirtualScroll = isPresent(this.virtual) && this.hasVirtualScrollbar();
         return hasVirtualScroll || this.list.nativeElement.scrollHeight > this.content.nativeElement.offsetHeight;
     };
+    /**
+     * Sets the list's content overflow (hides/shows scrollbar)
+     */
+    ListComponent.prototype.setOverflow = function () {
+        if (this.virtual) {
+            var overflow = this.hasVirtualScrollbar() ? 'scroll' : 'hidden';
+            this.renderer.setStyle(this.content.nativeElement, 'overflow-y', overflow);
+        }
+    };
     /**
      * Indicates whether the scrollbar should be visible in virtual mode.
      */
@@ -300,6 +372,17 @@ var ListComponent = /** @class */ (function () {
         }
         return this.virtual.skip === 0 && (this.virtual.pageSize > itemIndex);
     };
+    ListComponent.prototype.setComponentClasses = function () {
+        if (this.type === 'list') {
+            this.renderer.addClass(this.wrapper.nativeElement, 'k-list');
+            if (this.size) {
+                this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('list', this.size));
+            }
+        }
+        if (isPresent(this.virtual)) {
+            this.renderer.addClass(this.wrapper.nativeElement, this.listVirtualClass);
+        }
+    };
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Array)
@@ -355,7 +438,7 @@ var ListComponent = /** @class */ (function () {
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", String)
-    ], ListComponent.prototype, "listClass", void 0);
+    ], ListComponent.prototype, "type", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Object)
@@ -365,6 +448,15 @@ var ListComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", Array),
         tslib_1.__metadata("design:paramtypes", [Array])
     ], ListComponent.prototype, "data", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ListComponent.prototype, "size", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ListComponent.prototype, "rounded", void 0);
     tslib_1.__decorate([
         Output(),
         tslib_1.__metadata("design:type", EventEmitter)
@@ -396,7 +488,7 @@ var ListComponent = /** @class */ (function () {
     ListComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-list',
-            template: "\n    <div *ngIf=\"dataService.grouped\"\n        class='k-outer-group-header k-first'\n        [ngClass]=\"{'k-virtual-item': virtual}\"\n        [ngStyle]=\"{\n            'height.px': virtual?.itemHeight,\n            'minHeight.px' : virtual?.itemHeight,\n            'boxSizing' : virtual ? 'border-box' : 'inherit'}\"\n        >\n        <ng-template *ngIf=\"fixedGroupTemplate\"\n            [templateContext]=\"{\n                templateRef: fixedGroupTemplate.templateRef,\n                $implicit: currentGroup\n            }\">\n        </ng-template>\n        <ng-template [ngIf]=\"!fixedGroupTemplate\"><strong>{{ currentGroup }}</strong> </ng-template>\n    </div>\n    <div #content\n         [ngClass]=\"{ 'k-virtual-content': virtual, 'k-list-scroller': !virtual }\"\n         [style.maxHeight.px]=\"height\"\n         [style.overflowY]=\"overflowY\"\n         unselectable=\"on\">\n    <ul #list\n        role=\"listbox\"\n        [class]=\"listClass\"\n        [ngClass]=\"{ 'k-virtual-list': virtual }\"\n        [attr.id]=\"id\"\n        [attr.aria-hidden]=\"!show\">\n         <ng-template *ngIf=\"!dataService.grouped && show\" ngFor let-dataItem let-itemIndex=\"index\" [ngForOf]=\"data\">\n            <li\n                role=\"option\"\n                kendoDropDownsSelectable\n                [checkboxes]=\"checkboxes\"\n                [height]=\"virtual?.itemHeight\"\n                [index]=\"itemIndex + startFrom\"\n                [multipleSelection]=\"multipleSelection\"\n                [attr.id]=\"optionPrefix + '-' + getValue(dataItem)\"\n                [attr.tabIndex]=\"-1\"\n                class=\"k-item\"\n                [ngClass]=\"{ 'k-virtual-item': virtual, 'k-state-disabled': isDisabled(itemIndex) }\">\n                <label *ngIf=\"checkboxes.enabled\"\n                    class=\"k-checkbox-label\">\n                    <input type=\"checkbox\"\n                        class=\"k-checkbox\"\n                        (change)=\"onCheckedChange($event, itemIndex)\"\n                        [checked]=\"isChecked(itemIndex)\"\n                    />\n                </label>\n                <ng-template *ngIf=\"template\"\n                    [templateContext]=\"{\n                        templateRef: template.templateRef,\n                        $implicit: dataItem\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!template\">{{ getText(dataItem) }}</ng-template>\n            </li>\n         </ng-template>\n         <ng-template *ngIf=\"dataService.grouped\" ngFor let-dataItem let-itemIndex=\"index\" [ngForOf]=\"data\">\n            <li\n                *ngIf=\"dataItem.header && dataItem.index > 0\"\n                role=\"group\"\n                class='k-outer-group-header'\n                [ngClass]=\"{ 'k-virtual-item': virtual }\"\n                [ngStyle]=\"{\n                    'height.px': virtual?.itemHeight,\n                    'minHeight.px' : virtual?.itemHeight,\n                    'boxSizing' : virtual ? 'border-box' : 'inherit'}\"\n                [attr.group-index]=\"dataItem.index\"\n                [attr.id]=\"optionPrefix + '-' + getValue(dataItem.value)\"\n                [attr.tabIndex]=\"-1\">\n                    <ng-template *ngIf=\"groupTemplate\"\n                          [templateContext]=\"{\n                            templateRef: groupTemplate.templateRef,\n                            $implicit: dataItem.value\n                    }\">\n                    </ng-template>\n                    <ng-template [ngIf]=\"!groupTemplate\"><strong> {{ dataItem.value }}</strong> </ng-template>\n              </li>\n              <li\n                *ngIf=\"!dataItem.header\"\n                role=\"option\"\n                kendoDropDownsSelectable\n                [height]=\"virtual?.itemHeight\"\n                [index]=\"dataItem.offsetIndex\"\n                [multipleSelection]=\"multipleSelection\"\n                [attr.absolute-index]=\"dataItem.index\"\n                [attr.id]=\"optionPrefix + '-' + getValue(dataItem.value)\"\n                [attr.tabIndex]=\"-1\"\n                class=\"k-item\"\n                [ngClass]=\"{ 'k-virtual-item': virtual, 'k-state-disabled': isDisabled(dataItem.offsetIndex) }\">\n                <ng-template *ngIf=\"template\"\n                    [templateContext]=\"{\n                        templateRef: template.templateRef,\n                        $implicit: dataItem.value\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!template\">{{ getText(dataItem.value) }}</ng-template>\n            </li>\n        </ng-template>\n        <kendo-resize-sensor\n            *ngIf=\"!virtual\"\n            (resize)=\"listResize.emit()\"\n        >\n        </kendo-resize-sensor>\n    </ul>\n    <div *ngIf=\"virtual\" #virtualContainer class=\"k-height-container\" role=\"presentation\">\n        <div [style.height.px]=\"scrollHeight\">\n            <kendo-resize-sensor (resize)=\"listResize.emit()\"></kendo-resize-sensor>\n        </div>\n    </div>\n    </div>\n  "
+            template: "\n    <div *ngIf=\"dataService.grouped\"\n        [class]=\"listGroupStickyHeaderClass\"\n        [ngStyle]=\"{\n            'height.px': virtual?.itemHeight,\n            'minHeight.px' : virtual?.itemHeight,\n            'boxSizing' : virtual ? 'border-box' : 'inherit'}\"\n        >\n        <ng-template *ngIf=\"fixedGroupTemplate\"\n            [templateContext]=\"{\n                templateRef: fixedGroupTemplate.templateRef,\n                $implicit: currentGroup\n            }\">\n        </ng-template>\n        <ng-template [ngIf]=\"!fixedGroupTemplate\"><span [class]=\"listGroupStickyHeaderTextClass\">{{ currentGroup }}</span></ng-template>\n    </div>\n    <div #content\n        [class]=\"listContentClass\"\n        [style.overscrollBehavior]=\"'none'\"\n        [style.maxHeight.px]=\"height\"\n        unselectable=\"on\">\n    <ul #list\n        role=\"listbox\"\n        [class]=\"listClass\"\n        [attr.id]=\"id\"\n        [attr.aria-hidden]=\"!show\">\n         <ng-template *ngIf=\"!dataService.grouped && show\" ngFor let-dataItem let-itemIndex=\"index\" [ngForOf]=\"data\">\n            <li\n                role=\"option\"\n                kendoDropDownsSelectable\n                [checkboxes]=\"checkboxes\"\n                [height]=\"virtual?.itemHeight\"\n                [index]=\"itemIndex + startFrom\"\n                [multipleSelection]=\"multipleSelection\"\n                [attr.id]=\"optionPrefix + '-' + getValue(dataItem)\"\n                [attr.tabIndex]=\"-1\"\n                [class]=\"listItemClass\"\n                [ngClass]=\"{\n                    'k-disabled': isDisabled(itemIndex),\n                    'k-table-alt-row': isAltRow(itemIndex)\n                }\"\n            >\n                <input\n                    *ngIf=\"checkboxes.enabled\"\n                    type=\"checkbox\"\n                    class=\"k-checkbox\"\n                    [ngClass]=\"checkboxClasses\"\n                    (change)=\"onCheckedChange($event, itemIndex)\"\n                    [checked]=\"isChecked(itemIndex)\"\n                />\n                <ng-template *ngIf=\"template\"\n                    [templateContext]=\"{\n                        templateRef: template.templateRef,\n                        $implicit: dataItem\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!template\"><span class=\"k-list-item-text\">{{ getText(dataItem) }}</span></ng-template>\n            </li>\n         </ng-template>\n         <ng-template *ngIf=\"dataService.grouped\" ngFor let-dataItem let-itemIndex=\"index\" [ngForOf]=\"data\">\n            <li\n                *ngIf=\"dataItem.header && dataItem.index > 0\"\n                role=\"group\"\n                [class]=\"listGroupItemClass\"\n                [class.k-table-alt-row]=\"isAltRow(itemIndex - 1)\"\n                [ngStyle]=\"{\n                    'height.px': virtual?.itemHeight,\n                    'minHeight.px' : virtual?.itemHeight,\n                    'boxSizing' : virtual ? 'border-box' : 'inherit'}\"\n                [attr.group-index]=\"dataItem.index\"\n                [attr.id]=\"optionPrefix + '-' + getValue(dataItem.value)\"\n                [attr.tabIndex]=\"-1\">\n                    <span [class]=\"listGroupItemTextClass\">\n                        <ng-template *ngIf=\"groupTemplate\"\n                            [templateContext]=\"{\n                                templateRef: groupTemplate.templateRef,\n                                $implicit: dataItem.value\n                        }\">\n                        </ng-template>\n                        <ng-template [ngIf]=\"!groupTemplate\">{{ dataItem.value }}</ng-template>\n                    </span>\n            </li>\n            <li\n                *ngIf=\"!dataItem.header\"\n                role=\"option\"\n                kendoDropDownsSelectable\n                [height]=\"virtual?.itemHeight\"\n                [index]=\"dataItem.offsetIndex\"\n                [multipleSelection]=\"multipleSelection\"\n                [attr.absolute-index]=\"dataItem.index\"\n                [attr.id]=\"optionPrefix + '-' + getValue(dataItem.value)\"\n                [attr.tabIndex]=\"-1\"\n                [class]=\"listItemClass\"\n                [ngClass]=\"{\n                    'k-disabled': isDisabled(dataItem.offsetIndex),\n                    'k-table-alt-row': isAltRow(itemIndex - 1)\n                }\"\n            >\n                <ng-template *ngIf=\"template\"\n                    [templateContext]=\"{\n                        templateRef: template.templateRef,\n                        $implicit: dataItem.value\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!template\"><span class=\"k-list-item-text\">{{ getText(dataItem.value) }}</span></ng-template>\n            </li>\n        </ng-template>\n        <kendo-resize-sensor\n            *ngIf=\"!virtual\"\n            (resize)=\"listResize.emit()\"\n        >\n        </kendo-resize-sensor>\n    </ul>\n    <div *ngIf=\"virtual\" #virtualContainer class=\"k-height-container\" role=\"presentation\">\n        <div [style.height.px]=\"scrollHeight\">\n            <kendo-resize-sensor (resize)=\"listResize.emit()\"></kendo-resize-sensor>\n        </div>\n    </div>\n    </div>\n  "
         }),
         tslib_1.__metadata("design:paramtypes", [DataService,
             ElementRef,

package/dist/es/common/models/fillmode.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es/common/models/list-type.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es/common/models/rounded.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es/common/models/size.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es/common/searchbar.component.js

@@ -236,7 +236,7 @@ var SearchBarComponent = /** @class */ (function () {
     SearchBarComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-searchbar',
-            template: "\n        <input #input\n            autocomplete=\"off\"\n            [id]=\"id\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [placeholder]=\"placeholder\"\n            [class]=\"'k-input'\"\n            (input)=\"handleInput($event)\"\n            (keydown)=\"handleKeydown($event)\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleFocus,\n                blur: handleBlur\n            }\"\n            [scope]=\"this\"\n            [attr.tabIndex]=\"tabIndex\"\n            [attr.dir]=\"direction\"\n            [attr.role]=\"role\"\n            [attr.aria-disabled]=\"disabled\"\n            [attr.aria-readonly]=\"readonly\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"popupOpen\"\n            [attr.aria-owns]=\"listId\"\n            [attr.aria-describedby]=\"tagListId\"\n            [attr.aria-activedescendant]=\"activeDescendant\"\n            [attr.aria-label]=\"noDataLabel\"\n        />\n   "
+            template: "\n        <input #input\n            autocomplete=\"off\"\n            [id]=\"id\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [placeholder]=\"placeholder\"\n            [class]=\"'k-input-inner'\"\n            (input)=\"handleInput($event)\"\n            (keydown)=\"handleKeydown($event)\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleFocus,\n                blur: handleBlur\n            }\"\n            [scope]=\"this\"\n            [attr.tabIndex]=\"tabIndex\"\n            [attr.dir]=\"direction\"\n            [attr.role]=\"role\"\n            [attr.aria-disabled]=\"disabled\"\n            [attr.aria-readonly]=\"readonly\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"popupOpen\"\n            [attr.aria-owns]=\"listId\"\n            [attr.aria-describedby]=\"tagListId\"\n            [attr.aria-activedescendant]=\"activeDescendant\"\n            [attr.aria-label]=\"noDataLabel\"\n        />\n   "
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService,
             Renderer2])

package/dist/es/common/selection/selectable.directive.js

@@ -67,12 +67,12 @@ var SelectableDirective = /** @class */ (function () {
         tslib_1.__metadata("design:type", Boolean)
     ], SelectableDirective.prototype, "multipleSelection", 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", [])
     ], SelectableDirective.prototype, "focusedClassName", null);
     tslib_1.__decorate([
-        HostBinding('class.k-state-selected'),
+        HostBinding('class.k-selected'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], SelectableDirective.prototype, "selectedClassName", null);

package/dist/es/common/taglist.component.js

@@ -3,21 +3,48 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, HostBinding, Renderer2, ElementRef } from '@angular/core';
 import { TagTemplateDirective } from '../common/templates/tag-template.directive';
 import { GroupTagTemplateDirective } from '../common/templates/group-tag-template.directive';
-import { getter, isPresent } from '../common/util';
+import { getSizeClass, getter, isPresent } from '../common/util';
 /**
  * @hidden
  */
 var TagListComponent = /** @class */ (function () {
-    function TagListComponent() {
+    function TagListComponent(renderer, hostElement) {
+        this.renderer = renderer;
+        this.hostElement = hostElement;
+        this.rounded = 'medium';
+        this.fillMode = 'solid';
         /**
          * A collection with the disabled tags' indices.
          */
         this.disabledIndices = new Set();
         this.removeTag = new EventEmitter();
+        this.hostClasses = true;
+        this._size = 'medium';
     }
+    Object.defineProperty(TagListComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        set: function (size) {
+            this.renderer.removeClass(this.hostElement.nativeElement, getSizeClass('chip-list', this.size));
+            if (size) {
+                this.renderer.addClass(this.hostElement.nativeElement, getSizeClass('chip-list', size));
+            }
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TagListComponent.prototype, "hostId", {
+        get: function () {
+            return this.id;
+        },
+        enumerable: true,
+        configurable: true
+    });
     TagListComponent.prototype.tagProp = function (tag, prop, index) {
         var propField = prop && this.getPropField(tag, prop, index);
         return getter(tag, propField);
@@ -107,6 +134,19 @@ var TagListComponent = /** @class */ (function () {
         Input(),
         tslib_1.__metadata("design:type", String)
     ], TagListComponent.prototype, "id", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], TagListComponent.prototype, "size", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], TagListComponent.prototype, "rounded", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], TagListComponent.prototype, "fillMode", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Set)
@@ -115,11 +155,24 @@ var TagListComponent = /** @class */ (function () {
         Output(),
         tslib_1.__metadata("design:type", EventEmitter)
     ], TagListComponent.prototype, "removeTag", void 0);
+    tslib_1.__decorate([
+        HostBinding('class.k-input-values'),
+        HostBinding('class.k-chip-list'),
+        HostBinding('class.k-selection-multiple'),
+        tslib_1.__metadata("design:type", Boolean)
+    ], TagListComponent.prototype, "hostClasses", void 0);
+    tslib_1.__decorate([
+        HostBinding('attr.id'),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], TagListComponent.prototype, "hostId", null);
     TagListComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-taglist',
-            template: "\n        <ul [attr.id]=\"id\" class=\"k-reset\">\n            <li\n                *ngFor=\"let tag of tags; let index = index;\"\n                role=\"option\"\n                [attr.id]=\"itemId(tag, index)\"\n                [attr.aria-hidden]=\"tagAriaHidden(index)\"\n                aria-selected=\"true\"\n                [attr.aria-setsize]=\"tags?.length\"\n                class=\"k-button\"\n                [ngClass]=\"{\n                    'k-state-focused': index === focused,\n                    'k-state-disabled': isTagDisabled(tag, index)\n                }\"\n            >\n                <ng-template *ngIf=\"isGroupTag(tag); then groupTag else singleTag\"></ng-template>\n                    <ng-template #groupTag>\n                        <span>\n                            <ng-template *ngIf=\"groupTemplate\"\n                                [templateContext]=\"{\n                                templateRef: groupTemplate.templateRef,\n                                $implicit: tag\n                            }\">\n                            </ng-template>\n                            <ng-template [ngIf]=\"!groupTemplate\">{{ tag.length }} {{ tag.length === 1 ? 'item' : 'items' }} selected</ng-template>\n                        </span>\n                    </ng-template>\n                    <ng-template #singleTag>\n                        <span>\n                            <ng-template *ngIf=\"template\"\n                                [templateContext]=\"{\n                                templateRef: template.templateRef,\n                                $implicit: tag\n                            }\">\n                            </ng-template>\n                            <ng-template [ngIf]=\"!template\">{{ tagProp(tag, textField, index) }}</ng-template>\n                        </span>\n                    </ng-template>\n\n                <span aria-label=\"delete\" [attr.aria-hidden]=\"index !== focused\" class=\"k-select\">\n                    <span class=\"k-icon k-i-close\" (mousedown)=\"deleteTag($event, tag, index)\">\n                    </span>\n                </span>\n            </li>\n        </ul>\n  "
-        })
+            template: "\n        <div\n            *ngFor=\"let tag of tags; let index = index;\"\n            role=\"option\"\n            [attr.id]=\"itemId(tag, index)\"\n            [attr.aria-hidden]=\"tagAriaHidden(index)\"\n            aria-selected=\"true\"\n            [attr.aria-setsize]=\"tags?.length\"\n            class=\"k-chip\"\n            [ngClass]=\"{\n                'k-focus': index === focused,\n                'k-disabled': isTagDisabled(tag, index),\n                'k-chip-sm': size === 'small',\n                'k-chip-md': size === 'medium',\n                'k-chip-lg': size === 'large',\n                'k-rounded-sm': rounded === 'small',\n                'k-rounded-md': rounded === 'medium',\n                'k-rounded-lg': rounded === 'large',\n                'k-rounded-full': rounded === 'full',\n                'k-chip-solid k-chip-solid-base': fillMode === 'solid',\n                'k-chip-flat k-chip-flat-base': fillMode === 'flat',\n                'k-chip-outline k-chip-outline-base': fillMode === 'outline'\n            }\"\n        >\n            <span class=\"k-chip-content\">\n                <ng-template *ngIf=\"isGroupTag(tag); then groupTag else singleTag\"></ng-template>\n                <ng-template #groupTag>\n                    <span class=\"k-chip-label k-text-ellipsis\">\n                        <ng-template *ngIf=\"groupTemplate\"\n                            [templateContext]=\"{\n                            templateRef: groupTemplate.templateRef,\n                            $implicit: tag\n                        }\">\n                        </ng-template>\n                        <ng-template [ngIf]=\"!groupTemplate\">{{ tag.length }} {{ tag.length === 1 ? 'item' : 'items' }} selected</ng-template>\n                    </span>\n                </ng-template>\n                <ng-template #singleTag>\n                    <span class=\"k-chip-label k-text-ellipsis\">\n                        <ng-template *ngIf=\"template\"\n                            [templateContext]=\"{\n                            templateRef: template.templateRef,\n                            $implicit: tag\n                        }\">\n                        </ng-template>\n                        <ng-template [ngIf]=\"!template\">{{ tagProp(tag, textField, index) }}</ng-template>\n                    </span>\n                </ng-template>\n            </span>\n\n            <span class=\"k-chip-actions\">\n                <span aria-label=\"delete\" [attr.aria-hidden]=\"index !== focused\" class=\"k-chip-action k-chip-remove-action\">\n                    <span class=\"k-icon k-i-x-circle\" (mousedown)=\"deleteTag($event, tag, index)\">\n                    </span>\n                </span>\n            </span>\n        </div>\n        <ng-content></ng-content>\n  "
+        }),
+        tslib_1.__metadata("design:paramtypes", [Renderer2,
+            ElementRef])
     ], TagListComponent);
     return TagListComponent;
 }());

package/dist/es/common/util.js

@@ -297,4 +297,41 @@ export var valueFrom = function (_a, valueField) {
     var field = fields[normalizedLevel];
     return fieldAccessor(field)(dataItem);
 };
+/**
+ * @hidden
+ * Returns the size class based on the component and size input.
+ */
+export var getSizeClass = function (component, size) {
+    var SIZE_CLASSES = {
+        'small': "k-" + component + "-sm",
+        'medium': "k-" + component + "-md",
+        'large': "k-" + component + "-lg"
+    };
+    return SIZE_CLASSES[size];
+};
+/**
+ * @hidden
+ * Returns the rounded class based on the rounded input.
+ */
+export var getRoundedClass = function (rounded) {
+    var ROUNDED_CLASSES = {
+        'small': 'k-rounded-sm',
+        'medium': 'k-rounded-md',
+        'large': 'k-rounded-lg',
+        'full': 'k-rounded-full'
+    };
+    return ROUNDED_CLASSES[rounded];
+};
+/**
+ * @hidden
+ * Return the fillMode class based on the component and fillMode input.
+ */
+export var getFillModeClass = function (component, fillMode) {
+    var FILLMODE_CLASSES = {
+        'solid': "k-" + component + "-solid",
+        'flat': "k-" + component + "-flat",
+        'outline': "k-" + component + "-outline"
+    };
+    return FILLMODE_CLASSES[fillMode];
+};
 export { ɵ0 };