@progress/kendo-angular-treelist 11.0.0-develop.107 → 11.0.0-develop.108

package/esm2020/column-menu/column-menu.component.mjs

@@ -8,15 +8,17 @@ import { SinglePopupService } from '../common/single-popup.service';
 import { ColumnMenuService } from './column-menu.service';
 import { filtersByField } from '../filtering/base-filter-cell.component';
 import { hasFilter, hasSort, hasLock, hasColumnChooser } from './utils';
+import { moreVerticalIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "../common/single-popup.service";
 import * as i2 from "@progress/kendo-angular-l10n";
 import * as i3 from "./column-menu.service";
-import * as i4 from "./column-menu-sort.component";
-import * as i5 from "./column-menu-lock.component";
-import * as i6 from "./column-menu-chooser.component";
-import * as i7 from "./column-menu-filter.component";
-import * as i8 from "@angular/common";
+import * as i4 from "@progress/kendo-angular-icons";
+import * as i5 from "./column-menu-sort.component";
+import * as i6 from "./column-menu-lock.component";
+import * as i7 from "./column-menu-chooser.component";
+import * as i8 from "./column-menu-filter.component";
+import * as i9 from "@angular/common";
 const POPUP_CLASS = 'k-grid-columnmenu-popup';
 /**
  * Represents the [column menu]({% slug columnmenu_treelist %}) component.
@@ -46,6 +48,7 @@ export class ColumnMenuComponent {
          * @hidden
          */
         this.expandedColumns = false;
+        this.moreVerticalIcon = moreVerticalIcon;
         this.closeSubscription = service.closeMenu.subscribe(this.close.bind(this));
     }
     /**
@@ -129,7 +132,9 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             href="#"
             tabindex="-1"
             [attr.title]="localization.get('columnMenu')">
-            <span class="k-icon k-i-more-vertical"></span>
+            <kendo-icon-wrapper
+                name="more-vertical"
+                [svgIcon]="moreVerticalIcon"></kendo-icon-wrapper>
         </a>
         <ng-template #template>
             <ng-container [ngTemplateOutlet]="column.columnMenuTemplateRef || columnMenuTemplate || defaultTemplate"
@@ -148,7 +153,7 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 [expanded]="expandedFilter" (expand)="onFilterExpand()">
             </kendo-treelist-columnmenu-filter>
         </ng-template>
-    `, isInline: true, components: [{ type: i4.ColumnMenuSortComponent, selector: "kendo-treelist-columnmenu-sort" }, { type: i5.ColumnMenuLockComponent, selector: "kendo-treelist-columnmenu-lock" }, { type: i6.ColumnMenuChooserComponent, selector: "kendo-treelist-columnmenu-chooser", inputs: ["expanded"], outputs: ["expand", "collapse"] }, { type: i7.ColumnMenuFilterComponent, selector: "kendo-treelist-columnmenu-filter", inputs: ["expanded"], outputs: ["expand", "collapse"] }], directives: [{ type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i5.ColumnMenuSortComponent, selector: "kendo-treelist-columnmenu-sort" }, { type: i6.ColumnMenuLockComponent, selector: "kendo-treelist-columnmenu-lock" }, { type: i7.ColumnMenuChooserComponent, selector: "kendo-treelist-columnmenu-chooser", inputs: ["expanded"], outputs: ["expand", "collapse"] }, { type: i8.ColumnMenuFilterComponent, selector: "kendo-treelist-columnmenu-filter", inputs: ["expanded"], outputs: ["expand", "collapse"] }], directives: [{ type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -162,7 +167,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             href="#"
             tabindex="-1"
             [attr.title]="localization.get('columnMenu')">
-            <span class="k-icon k-i-more-vertical"></span>
+            <kendo-icon-wrapper
+                name="more-vertical"
+                [svgIcon]="moreVerticalIcon"></kendo-icon-wrapper>
         </a>
         <ng-template #template>
             <ng-container [ngTemplateOutlet]="column.columnMenuTemplateRef || columnMenuTemplate || defaultTemplate"

package/esm2020/column-menu/column-menu.module.mjs

@@ -15,6 +15,7 @@ import { ColumnMenuComponent } from './column-menu.component';
 import { ColumnMenuLockComponent } from './column-menu-lock.component';
 import { FilterMenuModule } from '../filtering/menu/filter-menu.module';
 import { ColumnMenuTemplateDirective } from './column-menu-template.directive';
+import { ButtonModule } from '@progress/kendo-angular-buttons';
 import * as i0 from "@angular/core";
 const COMPONENTS = [
     ColumnListComponent,
@@ -56,7 +57,7 @@ ColumnMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         ColumnMenuSortComponent,
         ColumnMenuComponent,
         ColumnMenuLockComponent,
-        ColumnMenuTemplateDirective], imports: [CommonModule, FilterMenuModule], exports: [ColumnListComponent,
+        ColumnMenuTemplateDirective], imports: [CommonModule, FilterMenuModule, ButtonModule], exports: [ColumnListComponent,
         ColumnChooserComponent,
         ColumnMenuChooserComponent,
         ColumnMenuFilterComponent,
@@ -66,12 +67,12 @@ ColumnMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         ColumnMenuComponent,
         ColumnMenuLockComponent,
         ColumnMenuTemplateDirective] });
-ColumnMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuModule, imports: [[CommonModule, FilterMenuModule]] });
+ColumnMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuModule, imports: [[CommonModule, FilterMenuModule, ButtonModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [COMPONENTS],
-                    imports: [CommonModule, FilterMenuModule],
+                    imports: [CommonModule, FilterMenuModule, ButtonModule],
                     exports: [COMPONENTS]
                 }]
         }] });

package/esm2020/dragdrop/draggable-column.directive.mjs

@@ -23,8 +23,8 @@ import * as i5 from "../navigation/navigation.service";
  */
 const preventOnDblClick = release => mouseDown => of(mouseDown).pipe(delay(150), takeUntil(release));
 const hasClass = className => el => new RegExp(`(^| )${className}( |$)`).test(el.className);
-const isDeleteButton = or(hasClass('k-i-x'), hasClass('k-icon-button'));
-const isSortIcon = or(hasClass('k-i-sort-asc-small'), hasClass('k-i-sort-desc-small'));
+const isDeleteButton = or(hasClass('k-i-x'), hasClass('k-svg-i-x'), hasClass('k-icon-button'));
+const isSortIcon = or(hasClass('k-i-sort-asc-small'), hasClass('k-i-sort-desc-small'), hasClass('k-svg-i-sort-asc-small'), hasClass('k-svg-i-sort-desc-small'));
 const skipButtons = and(not(isDeleteButton), not(isSortIcon), not(isFocusableWithTabKey), not(matchesNodeName('label')));
 const elementUnderCursor = ({ clientX, clientY }) => document.elementFromPoint(clientX, clientY);
 const hideThenShow = (element, cont) => {

package/esm2020/filtering/cell/filter-cell-operators.component.mjs

@@ -6,6 +6,7 @@ import { Component, EventEmitter, HostBinding, Input, Output, ViewChild } from '
 import { Keys } from '@progress/kendo-angular-common';
 import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { filterClearIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@progress/kendo-angular-dropdowns";
@@ -19,6 +20,7 @@ export class FilterCellOperatorsComponent {
     constructor(localization) {
         this.localization = localization;
         this.clearText = 'Clear';
+        this.filterClearIcon = filterClearIcon;
         /**
          * The filter operators that will be displayed.
          */
@@ -109,6 +111,7 @@ FilterCellOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             kendoTreeListFocusable
             *ngIf="showButton"
             icon="filter-clear"
+            [svgIcon]="filterClearIcon"
             [title]="clearText"
             (click)="clearClick()"
             (keydown)="clearKeydown($event)">
@@ -139,6 +142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             kendoTreeListFocusable
             *ngIf="showButton"
             icon="filter-clear"
+            [svgIcon]="filterClearIcon"
             [title]="clearText"
             (click)="clearClick()"
             (keydown)="clearKeydown($event)">

package/esm2020/filtering/menu/filter-menu.component.mjs

@@ -8,11 +8,13 @@ import { ColumnComponent } from '../../columns/column.component';
 import { SinglePopupService } from '../../common/single-popup.service';
 import { filtersByField } from '../base-filter-cell.component';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
+import { filterIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "../filter.service";
 import * as i2 from "../../common/single-popup.service";
 import * as i3 from "@progress/kendo-angular-l10n";
-import * as i4 from "./filter-menu-container.component";
+import * as i4 from "@progress/kendo-angular-icons";
+import * as i5 from "./filter-menu-container.component";
 /**
  * @hidden
  */
@@ -21,6 +23,7 @@ export class FilterMenuComponent {
         this.filterService = filterService;
         this.popupService = popupService;
         this.localization = localization;
+        this.filterIcon = filterIcon;
         /**
          * @hidden
          */
@@ -45,7 +48,9 @@ FilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             (click)="toggle(anchor, template)"
             href="#"
             [attr.title]="filterLabel">
-            <span class="k-icon k-i-filter"></span>
+            <kendo-icon-wrapper
+                name="filter"
+                [svgIcon]="filterIcon"></kendo-icon-wrapper>
         </a>
         <ng-template #template>
             <kendo-treelist-filter-menu-container
@@ -55,7 +60,7 @@ FilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 >
             </kendo-treelist-filter-menu-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i4.FilterMenuContainerComponent, selector: "kendo-treelist-filter-menu-container", inputs: ["column", "filter", "actionsClass"], outputs: ["close"] }] });
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i5.FilterMenuContainerComponent, selector: "kendo-treelist-filter-menu-container", inputs: ["column", "filter", "actionsClass"], outputs: ["close"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -67,7 +72,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             (click)="toggle(anchor, template)"
             href="#"
             [attr.title]="filterLabel">
-            <span class="k-icon k-i-filter"></span>
+            <kendo-icon-wrapper
+                name="filter"
+                [svgIcon]="filterIcon"></kendo-icon-wrapper>
         </a>
         <ng-template #template>
             <kendo-treelist-filter-menu-container

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-treelist',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673545466,
+    publishDate: 1673546643,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/pager/pager-next-buttons.component.mjs

@@ -7,6 +7,7 @@ import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/
 import { PagerContextService } from "./pager-context.service";
 import { PagerElementComponent } from './pager-element.component';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { caretAltRightIcon, caretAltToRightIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./pager-context.service";
@@ -17,6 +18,8 @@ import * as i3 from "@progress/kendo-angular-buttons";
 export class PagerNextButtonsComponent extends PagerElementComponent {
     constructor(localization, pagerContext, cd) {
         super(localization, pagerContext, cd);
+        this.caretAltRightIcon = caretAltRightIcon;
+        this.caretAltToRightIcon = caretAltToRightIcon;
     }
     /**
      * @hidden
@@ -41,6 +44,7 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             kendoButton
             type="button"
             icon="caret-alt-right"
+            [svgIcon]="caretAltRightIcon"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav"
@@ -55,6 +59,7 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             type="button"
             [tabIndex]="-1"
             icon="caret-alt-to-right"
+            [svgIcon]="caretAltToRightIcon"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav k-pager-last"
@@ -74,6 +79,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             kendoButton
             type="button"
             icon="caret-alt-right"
+            [svgIcon]="caretAltRightIcon"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav"
@@ -88,6 +94,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             type="button"
             [tabIndex]="-1"
             icon="caret-alt-to-right"
+            [svgIcon]="caretAltToRightIcon"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav k-pager-last"

package/esm2020/pager/pager-prev-buttons.component.mjs

@@ -7,6 +7,7 @@ import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/
 import { PagerContextService } from "./pager-context.service";
 import { PagerElementComponent } from './pager-element.component';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { caretAltLeftIcon, caretAltToLeftIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./pager-context.service";
@@ -17,6 +18,8 @@ import * as i3 from "@progress/kendo-angular-buttons";
 export class PagerPrevButtonsComponent extends PagerElementComponent {
     constructor(localization, pagerContext, cd) {
         super(localization, pagerContext, cd);
+        this.caretAltLeftIcon = caretAltLeftIcon;
+        this.caretAltToLeftIcon = caretAltToLeftIcon;
     }
     /**
      * @hidden
@@ -46,6 +49,7 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             (click)="currentPage !== 1 ? changePage(0) : false"
             role="button"
             icon="caret-alt-to-left"
+            [svgIcon]="caretAltToLeftIcon"
             class="k-pager-nav k-pager-first"
             [disabled]="disabled"
             fillMode="flat"
@@ -58,6 +62,7 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             class="k-pager-nav"
             [disabled]="disabled"
             icon="caret-alt-left"
+            [svgIcon]="caretAltLeftIcon"
             fillMode="flat"
             rounded="none"
             [title]="textFor('pagerPreviousPage')"
@@ -80,6 +85,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             (click)="currentPage !== 1 ? changePage(0) : false"
             role="button"
             icon="caret-alt-to-left"
+            [svgIcon]="caretAltToLeftIcon"
             class="k-pager-nav k-pager-first"
             [disabled]="disabled"
             fillMode="flat"
@@ -92,6 +98,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             class="k-pager-nav"
             [disabled]="disabled"
             icon="caret-alt-left"
+            [svgIcon]="caretAltLeftIcon"
             fillMode="flat"
             rounded="none"
             [title]="textFor('pagerPreviousPage')"

package/esm2020/rendering/cell.component.mjs

@@ -9,16 +9,18 @@ import { isColumnComponent } from '../columns/column.component';
 import { columnsToRender } from "../columns/column-common";
 import { isNullOrEmptyString, extractFormat, isColumnEditable } from '../utils';
 import { FocusGroup } from '../navigation/focus-group';
+import { caretAltDownIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "../editing/edit.service";
 import * as i2 from "../navigation/focus-group";
-import * as i3 from "@progress/kendo-angular-inputs";
-import * as i4 from "@progress/kendo-angular-dateinputs";
-import * as i5 from "@angular/common";
-import * as i6 from "../navigation/focusable.directive";
-import * as i7 from "@angular/forms";
-import * as i8 from "./common/level-items.pipe";
-import * as i9 from "./common/field-accessor.pipe";
+import * as i3 from "@progress/kendo-angular-icons";
+import * as i4 from "@progress/kendo-angular-inputs";
+import * as i5 from "@progress/kendo-angular-dateinputs";
+import * as i6 from "@angular/common";
+import * as i7 from "../navigation/focusable.directive";
+import * as i8 from "@angular/forms";
+import * as i9 from "./common/level-items.pipe";
+import * as i10 from "./common/field-accessor.pipe";
 /**
  * @hidden
  */
@@ -28,6 +30,8 @@ export class CellComponent {
         this.focusGroup = focusGroup;
         this.isNew = false;
         this.level = 0;
+        this.caretAltDownIcon = caretAltDownIcon;
+        this.caretAltRightIcon = caretAltRightIcon;
         this.cellContext = {};
         this._templateContext = {};
         this._editTemplateContext = {};
@@ -116,9 +120,11 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             <ng-container *ngSwitchCase="false">
                 <ng-container *ngIf="column.expandable">
                     <span class="k-icon k-i-none" *ngFor="let item of level | levelItems : hasChildren && expandIcons"></span>
-                    <span class="k-icon" *ngIf="hasChildren && expandIcons"
-                        [ngClass]="{ 'k-i-caret-alt-down': isExpanded && !loading, 'k-i-caret-alt-right': !isExpanded && !loading, 'k-i-loading': loading }">
-                    </span>
+                    <kendo-icon-wrapper
+                        *ngIf="hasChildren && expandIcons && !loading"
+                        [name]="isExpanded ? 'caret-alt-down' : 'caret-alt-right'"
+                        [svgIcon]="isExpanded ? caretAltDownIcon : caretAltRightIcon"></kendo-icon-wrapper>
+                    <span class="k-icon k-i-loading" *ngIf="hasChildren && expandIcons && loading"></span>
                 </ng-container>
                 <ng-container *ngIf="column.templateRef"
                     [ngTemplateOutlet]="column.templateRef"
@@ -177,7 +183,7 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 </ng-container>
             </ng-container>
         </ng-container>
-    `, isInline: true, components: [{ type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i4.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], pipes: { "levelItems": i8.LevelItemsPipe, "valueOf": i9.FieldAccessorPipe } });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i4.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i5.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i6.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], pipes: { "levelItems": i9.LevelItemsPipe, "valueOf": i10.FieldAccessorPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
             args: [{
@@ -187,9 +193,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             <ng-container *ngSwitchCase="false">
                 <ng-container *ngIf="column.expandable">
                     <span class="k-icon k-i-none" *ngFor="let item of level | levelItems : hasChildren && expandIcons"></span>
-                    <span class="k-icon" *ngIf="hasChildren && expandIcons"
-                        [ngClass]="{ 'k-i-caret-alt-down': isExpanded && !loading, 'k-i-caret-alt-right': !isExpanded && !loading, 'k-i-loading': loading }">
-                    </span>
+                    <kendo-icon-wrapper
+                        *ngIf="hasChildren && expandIcons && !loading"
+                        [name]="isExpanded ? 'caret-alt-down' : 'caret-alt-right'"
+                        [svgIcon]="isExpanded ? caretAltDownIcon : caretAltRightIcon"></kendo-icon-wrapper>
+                    <span class="k-icon k-i-loading" *ngIf="hasChildren && expandIcons && loading"></span>
                 </ng-container>
                 <ng-container *ngIf="column.templateRef"
                     [ngTemplateOutlet]="column.templateRef"

package/esm2020/rendering/constants.mjs

@@ -17,7 +17,7 @@ export const EMPTY_ICON_CLASS = 'k-i-none';
 /**
  * @hidden
  */
-export const ICON_CLASS = 'k-icon';
+export const ICON_CLASS = 'k-icon k-svg-icon';
 /**
  * @hidden
  */

package/esm2020/rendering/header/header.component.mjs

@@ -22,6 +22,7 @@ import { SortService } from '../../common/sort.service';
 import { hasItems } from '../../column-menu/utils';
 import { closestInScope, isFocusable } from '../common/dom-queries';
 import { SelectionService } from '../../selection/selection.service';
+import { sortAscSmallIcon, sortDescSmallIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "../../common/single-popup.service";
 import * as i2 from "../../dragdrop/drag-hint.service";
@@ -32,16 +33,17 @@ import * as i6 from "../../selection/selection.service";
 import * as i7 from "@progress/kendo-angular-l10n";
 import * as i8 from "../../filtering/menu/filter-menu.component";
 import * as i9 from "../../column-menu/column-menu.component";
-import * as i10 from "../../filtering/filter-row.component";
-import * as i11 from "@angular/common";
-import * as i12 from "../../navigation/logical-row.directive";
-import * as i13 from "../../navigation/logical-cell.directive";
-import * as i14 from "../../dragdrop/drop-target.directive";
-import * as i15 from "@progress/kendo-angular-common";
-import * as i16 from "../../dragdrop/draggable-column.directive";
-import * as i17 from "../common/template-context.directive";
-import * as i18 from "../../navigation/focusable.directive";
-import * as i19 from "../../column-resizing/column-handle.directive";
+import * as i10 from "@progress/kendo-angular-icons";
+import * as i11 from "../../filtering/filter-row.component";
+import * as i12 from "@angular/common";
+import * as i13 from "../../navigation/logical-row.directive";
+import * as i14 from "../../navigation/logical-cell.directive";
+import * as i15 from "../../dragdrop/drop-target.directive";
+import * as i16 from "@progress/kendo-angular-common";
+import * as i17 from "../../dragdrop/draggable-column.directive";
+import * as i18 from "../common/template-context.directive";
+import * as i19 from "../../navigation/focusable.directive";
+import * as i20 from "../../column-resizing/column-handle.directive";
 const mergeObjects = (...args) => Object.assign.apply(null, [{}].concat(args));
 const directions = initialDirection => initialDirection === "asc" ? ["asc", "desc"] : ["desc", "asc"];
 /**
@@ -86,6 +88,8 @@ export class HeaderComponent {
         this.sortedFields = {};
         this.hostClass = true;
         this.dropTargets = new QueryList();
+        this.sortAscSmallIcon = sortAscSmallIcon;
+        this.sortDescSmallIcon = sortDescSmallIcon;
         this.subscription = new Subscription();
     }
     get headerClass() {
@@ -137,14 +141,6 @@ export class HeaderComponent {
             .findIndex(x => x.field === field)
             + 1;
     }
-    sortIcon(field) {
-        const state = this.sortDescriptor(field);
-        return {
-            'k-icon': isPresent(state.dir),
-            'k-i-sort-desc-small': state.dir === "desc",
-            'k-i-sort-asc-small': state.dir === "asc"
-        };
-    }
     sortState(column) {
         if (!this.isSortable(column)) {
             return;
@@ -435,7 +431,12 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                                     <span class="k-column-title">{{column.displayTitle}}</span>
                                 </ng-container>
                                 <span class="k-sort-icon">
-                                    <span role="note" [attr.aria-label]="sortableLabel" [ngClass]="sortIcon(getColumnComponent(column).field)"></span>
+                                <kendo-icon-wrapper
+                                        *ngIf="sortDescriptor(getColumnComponent(column).field).dir"
+                                        role="note" [attr.aria-label]="sortableLabel"
+                                        name="sort-{{sortDescriptor(getColumnComponent(column).field).dir}}-small"
+                                        [svgIcon]="sortDescriptor(getColumnComponent(column).field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon"
+                                        ></kendo-icon-wrapper>
                                 </span>
                                 <span *ngIf="showSortNumbering(getColumnComponent(column))" class="k-sort-order">{{sortOrder(getColumnComponent(column).field)}}</span>
                             </span>
@@ -535,7 +536,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             [logicalSlaveCellsCount]="unlockedColumnsCount"
         >
         </tr>
-    `, isInline: true, components: [{ type: i8.FilterMenuComponent, selector: "kendo-treelist-filter-menu", inputs: ["column", "filter"] }, { type: i9.ColumnMenuComponent, selector: "kendo-treelist-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate"] }, { type: i10.FilterRowComponent, selector: "[kendoTreeListFilterRow]", inputs: ["columns", "filter", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "isNew"] }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable"] }, { type: i14.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i15.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i16.DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i17.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i18.FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i19.ColumnHandleDirective, selector: "[kendoTreeListColumnHandle]", inputs: ["columns", "column"] }] });
+    `, isInline: true, components: [{ type: i8.FilterMenuComponent, selector: "kendo-treelist-filter-menu", inputs: ["column", "filter"] }, { type: i9.ColumnMenuComponent, selector: "kendo-treelist-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate"] }, { type: i10.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i11.FilterRowComponent, selector: "[kendoTreeListFilterRow]", inputs: ["columns", "filter", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "isNew"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i14.LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable"] }, { type: i15.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i16.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i17.DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i18.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i19.FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i20.ColumnHandleDirective, selector: "[kendoTreeListColumnHandle]", inputs: ["columns", "column"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -616,7 +617,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                                     <span class="k-column-title">{{column.displayTitle}}</span>
                                 </ng-container>
                                 <span class="k-sort-icon">
-                                    <span role="note" [attr.aria-label]="sortableLabel" [ngClass]="sortIcon(getColumnComponent(column).field)"></span>
+                                <kendo-icon-wrapper
+                                        *ngIf="sortDescriptor(getColumnComponent(column).field).dir"
+                                        role="note" [attr.aria-label]="sortableLabel"
+                                        name="sort-{{sortDescriptor(getColumnComponent(column).field).dir}}-small"
+                                        [svgIcon]="sortDescriptor(getColumnComponent(column).field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon"
+                                        ></kendo-icon-wrapper>
                                 </span>
                                 <span *ngIf="showSortNumbering(getColumnComponent(column))" class="k-sort-order">{{sortOrder(getColumnComponent(column).field)}}</span>
                             </span>

package/esm2020/rendering/table-body.component.mjs

@@ -285,7 +285,7 @@ export class TableBodyComponent {
         return {};
     }
     expandClick(eventArg, row) {
-        if (eventArg.type === 'click' && hasClasses(eventArg.target, 'k-i-caret-alt-right k-i-caret-alt-down')) {
+        if (eventArg.type === 'click' && eventArg.target.closest('.k-icon-wrapper-host')) {
             eventArg.preventDefault();
             const viewItem = this.rowItem(row);
             if (viewItem.type === 'data') {