@progress/kendo-angular-dropdowns 5.5.1 → 6.0.1-dev.202201201129

package/dist/es2015/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';
@@ -32,8 +32,9 @@ let ListComponent = class ListComponent {
         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();
@@ -41,11 +42,13 @@ let ListComponent = class ListComponent {
         this.lastLoaded = 0;
         this.lastScrollTop = 0;
         this.scrollToFocused = false;
+        this._size = 'medium';
         this.selectSubscription = merge(this.selectionService.onSelect.pipe(map((args) => args.indices[0])), this.selectionService.onFocus)
             .pipe(
         // handle only the very last onSelect/onFocus emission
         switchMap(event => this.zone.onStable.pipe(take(1), map(() => event))))
             .subscribe(this.scrollToItem.bind(this));
+        this.prepareClasses();
     }
     set data(data) {
         this._data = data[0] && data[0].header ? data.slice(0) : data;
@@ -53,6 +56,18 @@ let ListComponent = class ListComponent {
     get data() {
         return this._data;
     }
+    set size(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;
+        }
+    }
+    get size() {
+        return this._size;
+    }
     get pageSize() {
         if (this.virtual.pageSize) {
             return this.virtual.pageSize;
@@ -69,6 +84,12 @@ let ListComponent = class ListComponent {
             return overflow;
         }
     }
+    /**
+     * @hidden
+     */
+    get checkboxClasses() {
+        return `${this.size ? getSizeClass('checkbox', this.size) : ''} ${this.rounded ? getRoundedClass(this.rounded) : ''}`;
+    }
     ngOnChanges(changes) {
         if (isChanged('data', changes, false)) {
             if (this.lastLoaded <= 0) {
@@ -80,8 +101,12 @@ let ListComponent = class ListComponent {
         if (isChanged('virtual', changes, false)) {
             this.setOverflow();
         }
+        if (isChanged('type', changes, false)) {
+            this.prepareClasses();
+        }
     }
     ngAfterViewInit() {
+        this.setComponentClasses();
         this.zone.runOutsideAngular(() => {
             this.scrollSubscription = fromEvent(this.content.nativeElement, "scroll").pipe(auditTime(100), tap(this.prefetchData.bind(this)), tap(this.findCurrentGroup.bind(this))).subscribe(() => {
                 this.lastScrollTop = this.content.nativeElement.scrollTop;
@@ -117,6 +142,28 @@ let ListComponent = class ListComponent {
             this.selectionService.unselect(index);
         }
     }
+    prepareClasses() {
+        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';
+        }
+    }
     isChecked(index) {
         const normalizedIndex = this.virtual ? index + this.virtual.skip : index;
         return this.selectionService.isSelected(normalizedIndex);
@@ -125,7 +172,7 @@ let ListComponent = class ListComponent {
         const content = this.content.nativeElement;
         const rect = content.getBoundingClientRect();
         // IE9 hack
-        const disabled = Array.prototype.slice.call(content.querySelectorAll(".k-state-disabled"));
+        const disabled = Array.prototype.slice.call(content.querySelectorAll(".k-disabled"));
         // This is a workaround for finding elements with pointer-events: none;
         disabled.forEach((el) => this.renderer.setStyle(el, "pointer-events", "auto"));
         const item = document.elementFromPoint(rect.left + 1, rect.top + 1);
@@ -203,6 +250,9 @@ let ListComponent = class ListComponent {
         }
         return this.disabledItemsService.isIndexDisabled(index);
     }
+    isAltRow(index) {
+        return this.type === 'dropdowngrid' && index % 2 !== 0;
+    }
     scrollToItem(index) {
         let flatIndex = index;
         if (this.dataService.grouped) {
@@ -293,6 +343,17 @@ let ListComponent = class ListComponent {
         }
         return this.virtual.skip === 0 && (this.virtual.pageSize > itemIndex);
     }
+    setComponentClasses() {
+        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(),
@@ -349,7 +410,7 @@ tslib_1.__decorate([
 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)
@@ -359,6 +420,15 @@ tslib_1.__decorate([
     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)
@@ -392,8 +462,7 @@ ListComponent = tslib_1.__decorate([
         selector: 'kendo-list',
         template: `
     <div *ngIf="dataService.grouped"
-        class='k-outer-group-header k-first'
-        [ngClass]="{'k-virtual-item': virtual}"
+        [class]="listGroupStickyHeaderClass"
         [ngStyle]="{
             'height.px': virtual?.itemHeight,
             'minHeight.px' : virtual?.itemHeight,
@@ -405,17 +474,16 @@ ListComponent = tslib_1.__decorate([
                 $implicit: currentGroup
             }">
         </ng-template>
-        <ng-template [ngIf]="!fixedGroupTemplate"><strong>{{ currentGroup }}</strong> </ng-template>
+        <ng-template [ngIf]="!fixedGroupTemplate"><span [class]="listGroupStickyHeaderTextClass">{{ currentGroup }}</span></ng-template>
     </div>
     <div #content
-         [ngClass]="{ 'k-virtual-content': virtual, 'k-list-scroller': !virtual }"
-         [style.overscrollBehavior]="'none'"
-         [style.maxHeight.px]="height"
-         unselectable="on">
+        [class]="listContentClass"
+        [style.overscrollBehavior]="'none'"
+        [style.maxHeight.px]="height"
+        unselectable="on">
     <ul #list
         role="listbox"
         [class]="listClass"
-        [ngClass]="{ 'k-virtual-list': virtual }"
         [attr.id]="id"
         [attr.aria-hidden]="!show">
          <ng-template *ngIf="!dataService.grouped && show" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
@@ -428,31 +496,35 @@ ListComponent = tslib_1.__decorate([
                 [multipleSelection]="multipleSelection"
                 [attr.id]="optionPrefix + '-' + getValue(dataItem)"
                 [attr.tabIndex]="-1"
-                class="k-item"
-                [ngClass]="{ 'k-virtual-item': virtual, 'k-state-disabled': isDisabled(itemIndex) }">
-                <label *ngIf="checkboxes.enabled"
-                    class="k-checkbox-label">
-                    <input type="checkbox"
-                        class="k-checkbox"
-                        (change)="onCheckedChange($event, itemIndex)"
-                        [checked]="isChecked(itemIndex)"
-                    />
-                </label>
+                [class]="listItemClass"
+                [ngClass]="{
+                    'k-disabled': isDisabled(itemIndex),
+                    'k-table-alt-row': isAltRow(itemIndex)
+                }"
+            >
+                <input
+                    *ngIf="checkboxes.enabled"
+                    type="checkbox"
+                    class="k-checkbox"
+                    [ngClass]="checkboxClasses"
+                    (change)="onCheckedChange($event, itemIndex)"
+                    [checked]="isChecked(itemIndex)"
+                />
                 <ng-template *ngIf="template"
                     [templateContext]="{
                         templateRef: template.templateRef,
                         $implicit: dataItem
                     }">
                 </ng-template>
-                <ng-template [ngIf]="!template">{{ getText(dataItem) }}</ng-template>
+                <ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(dataItem) }}</span></ng-template>
             </li>
          </ng-template>
          <ng-template *ngIf="dataService.grouped" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
             <li
                 *ngIf="dataItem.header && dataItem.index > 0"
                 role="group"
-                class='k-outer-group-header'
-                [ngClass]="{ 'k-virtual-item': virtual }"
+                [class]="listGroupItemClass"
+                [class.k-table-alt-row]="isAltRow(itemIndex - 1)"
                 [ngStyle]="{
                     'height.px': virtual?.itemHeight,
                     'minHeight.px' : virtual?.itemHeight,
@@ -460,15 +532,17 @@ ListComponent = tslib_1.__decorate([
                 [attr.group-index]="dataItem.index"
                 [attr.id]="optionPrefix + '-' + getValue(dataItem.value)"
                 [attr.tabIndex]="-1">
-                    <ng-template *ngIf="groupTemplate"
-                          [templateContext]="{
-                            templateRef: groupTemplate.templateRef,
-                            $implicit: dataItem.value
-                    }">
-                    </ng-template>
-                    <ng-template [ngIf]="!groupTemplate"><strong> {{ dataItem.value }}</strong> </ng-template>
-              </li>
-              <li
+                    <span [class]="listGroupItemTextClass">
+                        <ng-template *ngIf="groupTemplate"
+                            [templateContext]="{
+                                templateRef: groupTemplate.templateRef,
+                                $implicit: dataItem.value
+                        }">
+                        </ng-template>
+                        <ng-template [ngIf]="!groupTemplate">{{ dataItem.value }}</ng-template>
+                    </span>
+            </li>
+            <li
                 *ngIf="!dataItem.header"
                 role="option"
                 kendoDropDownsSelectable
@@ -478,15 +552,19 @@ ListComponent = tslib_1.__decorate([
                 [attr.absolute-index]="dataItem.index"
                 [attr.id]="optionPrefix + '-' + getValue(dataItem.value)"
                 [attr.tabIndex]="-1"
-                class="k-item"
-                [ngClass]="{ 'k-virtual-item': virtual, 'k-state-disabled': isDisabled(dataItem.offsetIndex) }">
+                [class]="listItemClass"
+                [ngClass]="{
+                    'k-disabled': isDisabled(dataItem.offsetIndex),
+                    'k-table-alt-row': isAltRow(itemIndex - 1)
+                }"
+            >
                 <ng-template *ngIf="template"
                     [templateContext]="{
                         templateRef: template.templateRef,
                         $implicit: dataItem.value
                     }">
                 </ng-template>
-                <ng-template [ngIf]="!template">{{ getText(dataItem.value) }}</ng-template>
+                <ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(dataItem.value) }}</span></ng-template>
             </li>
         </ng-template>
         <kendo-resize-sensor

package/dist/es2015/common/models/fillmode.d.ts

@@ -0,0 +1,14 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the possible fillMode options of the dropdowns.
+ *
+ * The possible values are:
+ * - `'solid'`
+ * - `'flat'`
+ * - `'outline'`
+ * - `null`
+ */
+export declare type DropDownFillMode = 'solid' | 'flat' | 'outline';

package/dist/es2015/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/es2015/common/models/list-type.d.ts

@@ -0,0 +1,8 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export declare type ListType = 'list' | 'dropdowngrid';

package/dist/es2015/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/es2015/common/models/rounded.d.ts

@@ -0,0 +1,15 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the possible rounded options of the dropdowns.
+ *
+ * The possible values are:
+ * - `'small'`
+ * - `'medium'`
+ * - `'large'`
+ * - `'full'`
+ * - `null`
+ */
+export declare type DropDownRounded = 'small' | 'medium' | 'large' | 'full';

package/dist/es2015/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/es2015/common/models/size.d.ts

@@ -0,0 +1,14 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the possible size options of the dropdowns.
+ *
+ * The possible values are:
+ * - `'small'`
+ * - `'medium'`
+ * - `'large'`
+ * - `null`
+ */
+export declare type DropDownSize = 'small' | 'medium' | 'large';

package/dist/es2015/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/es2015/common/searchbar.component.js

@@ -228,7 +228,7 @@ SearchBarComponent = tslib_1.__decorate([
             [disabled]="disabled"
             [readonly]="readonly"
             [placeholder]="placeholder"
-            [class]="'k-input'"
+            [class]="'k-input-inner'"
             (input)="handleInput($event)"
             (keydown)="handleKeydown($event)"
             [kendoEventsOutsideAngular]="{

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

@@ -60,12 +60,12 @@ tslib_1.__decorate([
     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/es2015/common/taglist.component.d.ts

@@ -2,13 +2,18 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, Renderer2, ElementRef } from '@angular/core';
 import { TagTemplateDirective } from '../common/templates/tag-template.directive';
 import { GroupTagTemplateDirective } from '../common/templates/group-tag-template.directive';
+import { DropDownSize } from './models/size';
+import { DropDownRounded } from './models/rounded';
+import { DropDownFillMode } from './models/fillmode';
 /**
  * @hidden
  */
 export declare class TagListComponent {
+    private renderer;
+    private hostElement;
     tags: any[];
     textField: string | string[];
     valueField: string;
@@ -19,11 +24,18 @@ export declare class TagListComponent {
     disabled: boolean;
     tagPrefix: string;
     id: string;
+    size: DropDownSize;
+    rounded: DropDownRounded;
+    fillMode: DropDownFillMode;
     /**
      * A collection with the disabled tags' indices.
      */
     disabledIndices: Set<number>;
     removeTag: EventEmitter<any>;
+    hostClasses: boolean;
+    readonly hostId: string;
+    private _size;
+    constructor(renderer: Renderer2, hostElement: ElementRef<HTMLElement>);
     tagProp(tag: any, prop: string | string[], index: number): string;
     isTagDisabled(tag: any, positionIndex: number): boolean;
     deleteTag(event: any, tag: any, index: number): void;

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

@@ -3,23 +3,39 @@
 * 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
  */
 let TagListComponent = class TagListComponent {
-    /**
-     * @hidden
-     */
-    constructor() {
+    constructor(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';
+    }
+    set size(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;
+    }
+    get size() {
+        return this._size;
+    }
+    get hostId() {
+        return this.id;
     }
     tagProp(tag, prop, index) {
         const propField = prop && this.getPropField(tag, prop, index);
@@ -110,6 +126,19 @@ tslib_1.__decorate([
     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)
@@ -118,55 +147,81 @@ tslib_1.__decorate([
     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: `
-        <ul [attr.id]="id" class="k-reset">
-            <li
-                *ngFor="let tag of tags; let index = index;"
-                role="option"
-                [attr.id]="itemId(tag, index)"
-                [attr.aria-hidden]="tagAriaHidden(index)"
-                aria-selected="true"
-                [attr.aria-setsize]="tags?.length"
-                class="k-button"
-                [ngClass]="{
-                    'k-state-focused': index === focused,
-                    'k-state-disabled': isTagDisabled(tag, index)
-                }"
-            >
+        <div
+            *ngFor="let tag of tags; let index = index;"
+            role="option"
+            [attr.id]="itemId(tag, index)"
+            [attr.aria-hidden]="tagAriaHidden(index)"
+            aria-selected="true"
+            [attr.aria-setsize]="tags?.length"
+            class="k-chip"
+            [ngClass]="{
+                'k-focus': index === focused,
+                'k-disabled': isTagDisabled(tag, index),
+                'k-chip-sm': size === 'small',
+                'k-chip-md': size === 'medium',
+                'k-chip-lg': size === 'large',
+                'k-rounded-sm': rounded === 'small',
+                'k-rounded-md': rounded === 'medium',
+                'k-rounded-lg': rounded === 'large',
+                'k-rounded-full': rounded === 'full',
+                'k-chip-solid k-chip-solid-base': fillMode === 'solid',
+                'k-chip-flat k-chip-flat-base': fillMode === 'flat',
+                'k-chip-outline k-chip-outline-base': fillMode === 'outline'
+            }"
+        >
+            <span class="k-chip-content">
                 <ng-template *ngIf="isGroupTag(tag); then groupTag else singleTag"></ng-template>
-                    <ng-template #groupTag>
-                        <span>
-                            <ng-template *ngIf="groupTemplate"
-                                [templateContext]="{
-                                templateRef: groupTemplate.templateRef,
-                                $implicit: tag
-                            }">
-                            </ng-template>
-                            <ng-template [ngIf]="!groupTemplate">{{ tag.length }} {{ tag.length === 1 ? 'item' : 'items' }} selected</ng-template>
-                        </span>
-                    </ng-template>
-                    <ng-template #singleTag>
-                        <span>
-                            <ng-template *ngIf="template"
-                                [templateContext]="{
-                                templateRef: template.templateRef,
-                                $implicit: tag
-                            }">
-                            </ng-template>
-                            <ng-template [ngIf]="!template">{{ tagProp(tag, textField, index) }}</ng-template>
-                        </span>
-                    </ng-template>
+                <ng-template #groupTag>
+                    <span class="k-chip-label k-text-ellipsis">
+                        <ng-template *ngIf="groupTemplate"
+                            [templateContext]="{
+                            templateRef: groupTemplate.templateRef,
+                            $implicit: tag
+                        }">
+                        </ng-template>
+                        <ng-template [ngIf]="!groupTemplate">{{ tag.length }} {{ tag.length === 1 ? 'item' : 'items' }} selected</ng-template>
+                    </span>
+                </ng-template>
+                <ng-template #singleTag>
+                    <span class="k-chip-label k-text-ellipsis">
+                        <ng-template *ngIf="template"
+                            [templateContext]="{
+                            templateRef: template.templateRef,
+                            $implicit: tag
+                        }">
+                        </ng-template>
+                        <ng-template [ngIf]="!template">{{ tagProp(tag, textField, index) }}</ng-template>
+                    </span>
+                </ng-template>
+            </span>
 
-                <span aria-label="delete" [attr.aria-hidden]="index !== focused" class="k-select">
-                    <span class="k-icon k-i-close" (mousedown)="deleteTag($event, tag, index)">
+            <span class="k-chip-actions">
+                <span aria-label="delete" [attr.aria-hidden]="index !== focused" class="k-chip-action k-chip-remove-action">
+                    <span class="k-icon k-i-x-circle" (mousedown)="deleteTag($event, tag, index)">
                     </span>
                 </span>
-            </li>
-        </ul>
+            </span>
+        </div>
+        <ng-content></ng-content>
   `
-    })
+    }),
+    tslib_1.__metadata("design:paramtypes", [Renderer2,
+        ElementRef])
 ], TagListComponent);
 export { TagListComponent };