@progress/kendo-angular-treelist 11.0.0-develop.99 → 11.0.0

package/NOTICE.txt

@@ -1,6 +1,6 @@
 Progress Kendo UI for Angular 2023
 
-Copyright (c) 2016-2022 Progress Software Corporation and/or one of its
+Copyright © 2016-2023 Progress Software Corporation and/or one of its
 subsidiaries or affiliates. All rights reserved.
 
 Portions of the Product include certain open source and commercial third-party
@@ -65,7 +65,7 @@ the Product:
 
 (1) 	The Apache Software License, Version 2.0:
 
-Progress Kendo UI for Angular 2022 incorporates TsLib v1.9.3. Such technology
+Progress Kendo UI for Angular 2023 incorporates TsLib v1.9.3. Such technology
 is subject to the following terms and conditions: Apache Software License Version 2.0.
 
                                  Apache License
@@ -290,7 +290,7 @@ is subject to the following terms and conditions: Apache Software License Versio
 
 (2) 	BSD-Style Licenses:
 
-(a) Progress Kendo UI for Angular 2022 incorporates xlf-translate v2.0.4.  Such
+(a) Progress Kendo UI for Angular 2023 incorporates xlf-translate v2.0.4.  Such
 technology is subject to the following terms and conditions:
 
    BSD 3-Clause License
@@ -325,7 +325,7 @@ technology is subject to the following terms and conditions:
 
 (3) 	The ISC License:
 
-(a) Progress Kendo UI for Angular 2022 incorporates glob v7.1.3.  Such technology
+(a) Progress Kendo UI for Angular 2023 incorporates glob v7.1.3.  Such technology
 is subject to the following terms and conditions:
 
     The ISC License
@@ -352,7 +352,7 @@ is subject to the following terms and conditions:
 
 (4)	MIT-Style Licenses:
 
-(a) Progress Kendo UI for Angular 2022 incorporates HammerJS v2.0.8.  Such
+(a) Progress Kendo UI for Angular 2023 incorporates HammerJS v2.0.8.  Such
 technology is subject to the following terms and conditions:
 
    The MIT License (MIT)
@@ -377,7 +377,7 @@ technology is subject to the following terms and conditions:
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
    SOFTWARE.
 
-(b) Progress Kendo UI for Angular 2022 incorporates prosemirror-commands v1*,
+(b) Progress Kendo UI for Angular 2023 incorporates prosemirror-commands v1*,
 prosemirror-cursor v1*, prosemirror-gapcursor v1*, prosemirror-history v1*,
 prosemirror-inputrules v1*, prosemirror-keymap v1*, prosemirror-model v1*,
 prosemirror-schema-list v1*, prosemirror-state v1*, prosemirror-tables v0.7*,
@@ -404,7 +404,7 @@ subject to the following terms and conditions:
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
    THE SOFTWARE.
 
-(c) Progress Kendo UI for Angular 2022 incorporates cheerio v0.2.2.  Such technology is subject to the following terms and conditions:
+(c) Progress Kendo UI for Angular 2023 incorporates cheerio v0.2.2.  Such technology is subject to the following terms and conditions:
 
    MIT License
 
@@ -428,7 +428,7 @@ subject to the following terms and conditions:
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
    SOFTWARE.
 
-(d) Progress Kendo UI for Angular 2022 incorporates @types/prosemirror-commands v1*,
+(d) Progress Kendo UI for Angular 2023 incorporates @types/prosemirror-commands v1*,
 @types/prosemirror-dropcursor v1*, @types/prosemirror-gapcursor v1*, @types/prosemirror-history v1*,
 @types/prosemirror-inputrules v1*, @types/prosemirror-keymap v1*, @types/prosemirror-model v1*,
 @types/prosemirror-schema-list v1*, @types/prosemirror-state v1*, @types/prosemirror-tables v0.9*,
@@ -457,7 +457,7 @@ subject to the following terms and conditions:
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
     SOFTWARE.
 
-(e) Progress Kendo UI for Angular 2022 incorporates pako-esm v1.0.0.  Such
+(e) Progress Kendo UI for Angular 2023 incorporates pako-esm v1.0.0.  Such
 technology is subject to the following terms and conditions:
 
   Copyright © 2020 Progress Software Corporation and/or one of its subsidiaries
@@ -483,7 +483,7 @@ technology is subject to the following terms and conditions:
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 
-(f) Progress Kendo UI for Angular 2022 incorporates jszip-esm v1.0.0.  Such
+(f) Progress Kendo UI for Angular 2023 incorporates jszip-esm v1.0.0.  Such
 technology is subject to the following terms and conditions:
 
     Copyright © 2020 Progress Software Corporation and/or one of its subsidiaries
@@ -510,7 +510,7 @@ technology is subject to the following terms and conditions:
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     THE SOFTWARE.
 
-(g) Progress Kendo UI for Angular 2022 incorporates data.task v3.1.2.  Such
+(g) Progress Kendo UI for Angular 2023 incorporates data.task v3.1.2.  Such
 technology is subject to the following terms and conditions:
 
     The MIT License
@@ -535,7 +535,7 @@ technology is subject to the following terms and conditions:
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     THE SOFTWARE.
 
-(h) Progress Kendo UI for Angular 2022 incorporates ramda v0.23.  Such technology
+(h) Progress Kendo UI for Angular 2023 incorporates ramda v0.23.  Such technology
 is subject to the following terms and conditions:
 
     The MIT License (MIT)
@@ -560,7 +560,7 @@ is subject to the following terms and conditions:
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     THE SOFTWARE.
 
-(i) Progress Kendo UI for Angular 2022 incorporates js-yaml v3.14.0.  Such
+(i) Progress Kendo UI for Angular 2023 incorporates js-yaml v3.14.0.  Such
 technology is subject to the following terms and conditions:
 
     (The MIT License)
@@ -587,7 +587,7 @@ technology is subject to the following terms and conditions:
 
 (5)	UNICODE, INC. LICENSE AGREEMENT - DATA FILES AND SOFTWARE:
 
-Progress Kendo UI for Angular 2022 incorporates Unicode CLDR Database v33.
+Progress Kendo UI for Angular 2023 incorporates Unicode CLDR Database v33.
 Such technology is subject to the following terms and conditions:
 
    UNICODE, INC. LICENSE AGREEMENT - DATA FILES AND SOFTWARE
@@ -605,7 +605,7 @@ Such technology is subject to the following terms and conditions:
 
    COPYRIGHT AND PERMISSION NOTICE
 
-   Copyright © 1991-2021 Unicode, Inc. All rights reserved.
+   Copyright © 1991-2019 Unicode, Inc. All rights reserved.
    Distributed under the Terms of Use in https://www.unicode.org/copyright.html.
 
    Permission is hereby granted, free of charge, to any person obtaining
@@ -642,7 +642,7 @@ incorporated into the Product:  NONE
 
 3. Special Notices Regarding Progress Products incorporated into the Product:
 
-(a) Progress Kendo UI for Angular 2022 incorporates Kendo UI Licensing CLI v1.1
+(a) Progress Kendo UI for Angular 2023 incorporates Kendo UI Licensing CLI v1.1
 from Progress Software Corporation. See NOTICE.txt text file within product for
 third-party license information.
 
@@ -651,4 +651,4 @@ the release notes or other documentation that accompanies updates received in
 connection with support of the Product.
 
 
-Updated 1/6/2022
+Updated 13.Jan.2023

package/column-menu/column-chooser.component.d.ts

@@ -6,6 +6,8 @@ import { NgZone, Renderer2, OnDestroy, ChangeDetectorRef } from '@angular/core';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { ColumnInfoService } from '../common/column-info.service';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
+import { SVGIcon } from '@progress/kendo-svg-icons';
+import { Button } from '@progress/kendo-angular-buttons';
 import * as i0 from "@angular/core";
 /**
  * Represents the component for selecting columns in the TreeList. To enable the user to show or hide columns,
@@ -34,6 +36,7 @@ export declare class ColumnChooserComponent implements OnDestroy {
      */
     allowHideAll: boolean;
     get columns(): any[];
+    columnsIcon: SVGIcon;
     private popupRef;
     private closeClick;
     constructor(localization: LocalizationService, columnInfoService: ColumnInfoService, popupService: PopupService, ngZone: NgZone, renderer: Renderer2, changeDetector: ChangeDetectorRef);
@@ -41,7 +44,7 @@ export declare class ColumnChooserComponent implements OnDestroy {
     /**
      * @hidden
      */
-    toggle(anchor: any, template: any): void;
+    toggle(anchor: Button, template: any): void;
     /**
      * @hidden
      */

package/column-menu/column-menu-chooser.component.d.ts

@@ -6,6 +6,7 @@ import { EventEmitter, ChangeDetectorRef } from '@angular/core';
 import { ColumnInfoService } from '../common/column-info.service';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { ColumnMenuItemBase } from './column-menu-item-base';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * Represents the component for selecting columns in the TreeList that can be placed
@@ -42,6 +43,7 @@ export declare class ColumnMenuChooserComponent extends ColumnMenuItemBase {
      */
     actionsClass: string;
     get columns(): any;
+    columnsIcon: SVGIcon;
     constructor(localization: LocalizationService, columnInfoService: ColumnInfoService, changeDetector: ChangeDetectorRef);
     /**
      * @hidden

package/column-menu/column-menu-filter.component.d.ts

@@ -5,6 +5,7 @@
 import { EventEmitter } from '@angular/core';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { ColumnMenuItemBase } from './column-menu-item-base';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * Represents the component for editing column filters in the TreeList that can be placed
@@ -38,6 +39,7 @@ export declare class ColumnMenuFilterComponent extends ColumnMenuItemBase {
      * @hidden
      */
     actionsClass: string;
+    filterIcon: SVGIcon;
     constructor(localization: LocalizationService);
     static ɵfac: i0.ɵɵFactoryDeclaration<ColumnMenuFilterComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ColumnMenuFilterComponent, "kendo-treelist-columnmenu-filter", never, { "expanded": "expanded"; }, { "expand": "expand"; "collapse": "collapse"; }, never, never>;

package/column-menu/column-menu-item.component.d.ts

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { EventEmitter, OnChanges } from '@angular/core';
 import { ColumnMenuItemContentTemplateDirective } from './column-menu-item-content-template.directive';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * Represents an item that can be placed inside a
@@ -34,6 +35,11 @@ export declare class ColumnMenuItemComponent implements OnChanges {
      * that will be rendered for the item.
      */
     icon: string;
+    /**
+     * Specifies the name of the [SVG icon]({% slug svgicon_list %})
+     * that will be rendered for the item.
+     */
+    svgIcon: SVGIcon;
     /**
      * Specifies the item text.
      */
@@ -51,7 +57,6 @@ export declare class ColumnMenuItemComponent implements OnChanges {
      */
     expanded: boolean;
     contentTemplate: ColumnMenuItemContentTemplateDirective;
-    get iconClass(): string;
     contentState: string;
     ngOnChanges(changes: any): void;
     /**
@@ -60,5 +65,5 @@ export declare class ColumnMenuItemComponent implements OnChanges {
     onClick(e: any): void;
     private updateContentState;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColumnMenuItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ColumnMenuItemComponent, "kendo-treelist-columnmenu-item", never, { "icon": "icon"; "text": "text"; "selected": "selected"; "disabled": "disabled"; "expanded": "expanded"; }, { "itemClick": "itemClick"; "expand": "expand"; "collapse": "collapse"; }, ["contentTemplate"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColumnMenuItemComponent, "kendo-treelist-columnmenu-item", never, { "icon": "icon"; "svgIcon": "svgIcon"; "text": "text"; "selected": "selected"; "disabled": "disabled"; "expanded": "expanded"; }, { "itemClick": "itemClick"; "expand": "expand"; "collapse": "collapse"; }, ["contentTemplate"], never>;
 }

package/column-menu/column-menu-lock.component.d.ts

@@ -6,6 +6,7 @@ import { ChangeDetectorRef } from '@angular/core';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { ColumnInfoService } from '../common/column-info.service';
 import { ColumnMenuItemBase } from './column-menu-item-base';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * Represents a column-menu item that can be placed inside a
@@ -26,9 +27,12 @@ export declare class ColumnMenuLockComponent extends ColumnMenuItemBase {
     private localization;
     private columnInfoService;
     private changeDetector;
+    unlockIcon: SVGIcon;
+    lockIcon: SVGIcon;
     constructor(localization: LocalizationService, columnInfoService: ColumnInfoService, changeDetector: ChangeDetectorRef);
     get text(): string;
     get icon(): string;
+    get svgIcon(): SVGIcon;
     get disabled(): boolean;
     /**
      * @hidden

package/column-menu/column-menu-sort.component.d.ts

@@ -5,6 +5,7 @@
 import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { SortService } from '../common/sort.service';
 import { ColumnMenuItemBase } from './column-menu-item-base';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * Represents a column-menu item for sorting TreeList columns that can be placed inside a
@@ -24,6 +25,8 @@ import * as i0 from "@angular/core";
 export declare class ColumnMenuSortComponent extends ColumnMenuItemBase {
     localization: LocalizationService;
     protected sortService: SortService;
+    sortAscSmallIcon: SVGIcon;
+    sortDescSmallIcon: SVGIcon;
     constructor(localization: LocalizationService, sortService: SortService);
     get sortedAsc(): boolean;
     get sortedDesc(): boolean;

package/column-menu/column-menu.component.d.ts

@@ -7,6 +7,7 @@ import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { SinglePopupService } from '../common/single-popup.service';
 import { ColumnMenuService } from './column-menu.service';
 import { ColumnMenuSettings } from './column-menu-settings.interface';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * Represents the [column menu]({% slug columnmenu_treelist %}) component.
@@ -53,6 +54,7 @@ export declare class ColumnMenuComponent implements OnChanges, OnDestroy {
      * @hidden
      */
     expandedColumns: boolean;
+    moreVerticalIcon: SVGIcon;
     private popupRef;
     private closeSubscription;
     constructor(popupService: SinglePopupService, localization: LocalizationService, service: ColumnMenuService);

package/column-menu/column-menu.module.d.ts

@@ -15,12 +15,13 @@ import * as i9 from "./column-menu-lock.component";
 import * as i10 from "./column-menu-template.directive";
 import * as i11 from "@angular/common";
 import * as i12 from "../filtering/menu/filter-menu.module";
+import * as i13 from "@progress/kendo-angular-buttons";
 /**
  * @hidden
  */
 export declare class ColumnMenuModule {
     static exports(): any[];
     static ɵfac: i0.ɵɵFactoryDeclaration<ColumnMenuModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ColumnMenuModule, [typeof i1.ColumnListComponent, typeof i2.ColumnChooserComponent, typeof i3.ColumnMenuChooserComponent, typeof i4.ColumnMenuFilterComponent, typeof i5.ColumnMenuItemComponent, typeof i6.ColumnMenuItemContentTemplateDirective, typeof i7.ColumnMenuSortComponent, typeof i8.ColumnMenuComponent, typeof i9.ColumnMenuLockComponent, typeof i10.ColumnMenuTemplateDirective], [typeof i11.CommonModule, typeof i12.FilterMenuModule], [typeof i1.ColumnListComponent, typeof i2.ColumnChooserComponent, typeof i3.ColumnMenuChooserComponent, typeof i4.ColumnMenuFilterComponent, typeof i5.ColumnMenuItemComponent, typeof i6.ColumnMenuItemContentTemplateDirective, typeof i7.ColumnMenuSortComponent, typeof i8.ColumnMenuComponent, typeof i9.ColumnMenuLockComponent, typeof i10.ColumnMenuTemplateDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ColumnMenuModule, [typeof i1.ColumnListComponent, typeof i2.ColumnChooserComponent, typeof i3.ColumnMenuChooserComponent, typeof i4.ColumnMenuFilterComponent, typeof i5.ColumnMenuItemComponent, typeof i6.ColumnMenuItemContentTemplateDirective, typeof i7.ColumnMenuSortComponent, typeof i8.ColumnMenuComponent, typeof i9.ColumnMenuLockComponent, typeof i10.ColumnMenuTemplateDirective], [typeof i11.CommonModule, typeof i12.FilterMenuModule, typeof i13.ButtonModule], [typeof i1.ColumnListComponent, typeof i2.ColumnChooserComponent, typeof i3.ColumnMenuChooserComponent, typeof i4.ColumnMenuFilterComponent, typeof i5.ColumnMenuItemComponent, typeof i6.ColumnMenuItemContentTemplateDirective, typeof i7.ColumnMenuSortComponent, typeof i8.ColumnMenuComponent, typeof i9.ColumnMenuLockComponent, typeof i10.ColumnMenuTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ColumnMenuModule>;
 }

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

@@ -8,11 +8,13 @@ import { ColumnInfoService } from '../common/column-info.service';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { closest } from '../rendering/common/dom-queries';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
+import { columnsIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "../common/column-info.service";
 import * as i3 from "@progress/kendo-angular-popup";
-import * as i4 from "./column-list.component";
+import * as i4 from "@progress/kendo-angular-buttons";
+import * as i5 from "./column-list.component";
 /**
  * Represents the component for selecting columns in the TreeList. To enable the user to show or hide columns,
  * add the component inside a [`ToolbarTemplate`]({% slug api_treelist_toolbartemplatedirective %}) directive.
@@ -40,6 +42,7 @@ export class ColumnChooserComponent {
          * Specifies if all columns can be hidden.
          */
         this.allowHideAll = true;
+        this.columnsIcon = columnsIcon;
     }
     get columns() {
         return this.columnInfoService.leafNamedColumns;
@@ -54,7 +57,7 @@ export class ColumnChooserComponent {
         if (!this.popupRef) {
             const direction = this.localization.rtl ? 'right' : 'left';
             this.popupRef = this.popupService.open({
-                anchor: anchor,
+                anchor: anchor.element,
                 content: template,
                 positionMode: 'absolute',
                 anchorAlign: { vertical: 'bottom', horizontal: direction },
@@ -65,7 +68,7 @@ export class ColumnChooserComponent {
                 return;
             }
             this.ngZone.runOutsideAngular(() => this.closeClick = this.renderer.listen('document', 'click', ({ target }) => {
-                if (!closest(target, node => node === this.popupRef.popupElement || node === anchor)) {
+                if (!closest(target, node => node === this.popupRef.popupElement || node === anchor.element)) {
                     this.close();
                 }
             }));
@@ -108,12 +111,13 @@ export class ColumnChooserComponent {
 ColumnChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnChooserComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ColumnInfoService }, { token: i3.PopupService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ColumnChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColumnChooserComponent, selector: "kendo-treelist-column-chooser", inputs: { autoSync: "autoSync", allowHideAll: "allowHideAll" }, ngImport: i0, template: `
         <button #anchor
+            kendoButton
             type="button"
             (click)="toggle(anchor, template)"
-            class="k-button k-button-flat-base k-button-flat k-icon-button k-button-md k-rounded-md k-button-rectangle k-icon-button"
-            [attr.title]="localization.get('columns')">
-            <span class="k-button-icon k-icon k-i-columns"></span>
-        </button>
+            fillMode="flat"
+            [attr.title]="localization.get('columns')"
+            icon="columns"
+            [svgIcon]="columnsIcon"></button>
         <ng-template #template>
             <span class='k-column-chooser-title'>{{ localization.get('columns') }}</span>
             <kendo-treelist-columnlist
@@ -126,19 +130,20 @@ ColumnChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 (columnChange)="onChange($event)">
             </kendo-treelist-columnlist>
         </ng-template>
-    `, isInline: true, components: [{ type: i4.ColumnListComponent, selector: "kendo-treelist-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass"], outputs: ["reset", "apply", "columnChange"] }] });
+    `, isInline: true, components: [{ type: i4.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i5.ColumnListComponent, selector: "kendo-treelist-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass"], outputs: ["reset", "apply", "columnChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnChooserComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-treelist-column-chooser',
                     template: `
         <button #anchor
+            kendoButton
             type="button"
             (click)="toggle(anchor, template)"
-            class="k-button k-button-flat-base k-button-flat k-icon-button k-button-md k-rounded-md k-button-rectangle k-icon-button"
-            [attr.title]="localization.get('columns')">
-            <span class="k-button-icon k-icon k-i-columns"></span>
-        </button>
+            fillMode="flat"
+            [attr.title]="localization.get('columns')"
+            icon="columns"
+            [svgIcon]="columnsIcon"></button>
         <ng-template #template>
             <span class='k-column-chooser-title'>{{ localization.get('columns') }}</span>
             <kendo-treelist-columnlist

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

@@ -6,6 +6,7 @@ import { Component, Input, Output, EventEmitter, ChangeDetectorRef } from '@angu
 import { ColumnInfoService } from '../common/column-info.service';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { ColumnMenuItemBase } from './column-menu-item-base';
+import { columnsIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "../common/column-info.service";
@@ -48,6 +49,7 @@ export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
          * @hidden
          */
         this.actionsClass = 'k-columnmenu-actions';
+        this.columnsIcon = columnsIcon;
     }
     get columns() {
         return this.columnInfoService.leafNamedColumns;
@@ -65,8 +67,13 @@ export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
 }
 ColumnMenuChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuChooserComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ColumnInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColumnMenuChooserComponent, selector: "kendo-treelist-columnmenu-chooser", inputs: { expanded: "expanded" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
-        <kendo-treelist-columnmenu-item [text]="localization.get('columns')"
-            icon="columns" [expanded]="expanded" (collapse)="collapse.emit()" (expand)="expand.emit()">
+        <kendo-treelist-columnmenu-item 
+            [text]="localization.get('columns')"
+            icon="columns"
+            [svgIcon]="columnsIcon"
+            [expanded]="expanded"
+            (collapse)="collapse.emit()"
+            (expand)="expand.emit()">
             <ng-template kendoTreeListColumnMenuItemContentTemplate>
                 <kendo-treelist-columnlist
                     [applyText]="localization.get('columnsApply')"
@@ -79,14 +86,19 @@ ColumnMenuChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 </kendo-treelist-columnlist>
             </ng-template>
         </kendo-treelist-columnmenu-item>
-    `, isInline: true, components: [{ type: i3.ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: i4.ColumnListComponent, selector: "kendo-treelist-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: i5.ColumnMenuItemContentTemplateDirective, selector: "[kendoTreeListColumnMenuItemContentTemplate]" }] });
+    `, isInline: true, components: [{ type: i3.ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: i4.ColumnListComponent, selector: "kendo-treelist-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: i5.ColumnMenuItemContentTemplateDirective, selector: "[kendoTreeListColumnMenuItemContentTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuChooserComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-treelist-columnmenu-chooser',
                     template: `
-        <kendo-treelist-columnmenu-item [text]="localization.get('columns')"
-            icon="columns" [expanded]="expanded" (collapse)="collapse.emit()" (expand)="expand.emit()">
+        <kendo-treelist-columnmenu-item 
+            [text]="localization.get('columns')"
+            icon="columns"
+            [svgIcon]="columnsIcon"
+            [expanded]="expanded"
+            (collapse)="collapse.emit()"
+            (expand)="expand.emit()">
             <ng-template kendoTreeListColumnMenuItemContentTemplate>
                 <kendo-treelist-columnlist
                     [applyText]="localization.get('columnsApply')"

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

@@ -5,6 +5,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { ColumnMenuItemBase } from './column-menu-item-base';
+import { filterIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./column-menu-item.component";
@@ -44,12 +45,18 @@ export class ColumnMenuFilterComponent extends ColumnMenuItemBase {
          * @hidden
          */
         this.actionsClass = 'k-columnmenu-actions';
+        this.filterIcon = filterIcon;
     }
 }
 ColumnMenuFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuFilterComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColumnMenuFilterComponent, selector: "kendo-treelist-columnmenu-filter", inputs: { expanded: "expanded" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
-        <kendo-treelist-columnmenu-item [text]="localization.get('filter')" icon="filter"
-            [expanded]="expanded" (collapse)="collapse.emit()" (expand)="expand.emit()">
+        <kendo-treelist-columnmenu-item
+            [text]="localization.get('filter')"
+            icon="filter"
+            [svgIcon]="filterIcon"
+            [expanded]="expanded"
+            (collapse)="collapse.emit()"
+            (expand)="expand.emit()">
             <ng-template kendoTreeListColumnMenuItemContentTemplate>
                     <kendo-treelist-filter-menu-container
                         [column]="service.column"
@@ -59,14 +66,19 @@ ColumnMenuFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                     </kendo-treelist-filter-menu-container>
                 </ng-template>
         </kendo-treelist-columnmenu-item>
-    `, isInline: true, components: [{ type: i2.ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: i3.FilterMenuContainerComponent, selector: "kendo-treelist-filter-menu-container", inputs: ["column", "filter", "actionsClass"], outputs: ["close"] }], directives: [{ type: i4.ColumnMenuItemContentTemplateDirective, selector: "[kendoTreeListColumnMenuItemContentTemplate]" }] });
+    `, isInline: true, components: [{ type: i2.ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: i3.FilterMenuContainerComponent, selector: "kendo-treelist-filter-menu-container", inputs: ["column", "filter", "actionsClass"], outputs: ["close"] }], directives: [{ type: i4.ColumnMenuItemContentTemplateDirective, selector: "[kendoTreeListColumnMenuItemContentTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-treelist-columnmenu-filter',
                     template: `
-        <kendo-treelist-columnmenu-item [text]="localization.get('filter')" icon="filter"
-            [expanded]="expanded" (collapse)="collapse.emit()" (expand)="expand.emit()">
+        <kendo-treelist-columnmenu-item
+            [text]="localization.get('filter')"
+            icon="filter"
+            [svgIcon]="filterIcon"
+            [expanded]="expanded"
+            (collapse)="collapse.emit()"
+            (expand)="expand.emit()">
             <ng-template kendoTreeListColumnMenuItemContentTemplate>
                     <kendo-treelist-filter-menu-container
                         [column]="service.column"

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

@@ -6,7 +6,8 @@ import { Component, Input, Output, EventEmitter, ContentChild } from '@angular/c
 import { trigger, transition, style, animate, state } from '@angular/animations';
 import { ColumnMenuItemContentTemplateDirective } from './column-menu-item-content-template.directive';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
+import * as i1 from "@progress/kendo-angular-icons";
+import * as i2 from "@angular/common";
 /**
  * Represents an item that can be placed inside a
  * [`ColumnMenuTemplate`]({% slug api_treelist_columnmenutemplatedirective %}) directive.
@@ -34,9 +35,6 @@ export class ColumnMenuItemComponent {
         this.collapse = new EventEmitter();
         this.contentState = 'collapsed';
     }
-    get iconClass() {
-        return `k-i-${this.icon}`;
-    }
     ngOnChanges(changes) {
         if (changes.expanded) {
             this.updateContentState();
@@ -63,17 +61,18 @@ export class ColumnMenuItemComponent {
     }
 }
 ColumnMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColumnMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: { icon: "icon", text: "text", selected: "selected", disabled: "disabled", expanded: "expanded" }, outputs: { itemClick: "itemClick", expand: "expand", collapse: "collapse" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ColumnMenuItemContentTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+ColumnMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: { icon: "icon", svgIcon: "svgIcon", text: "text", selected: "selected", disabled: "disabled", expanded: "expanded" }, outputs: { itemClick: "itemClick", expand: "expand", collapse: "collapse" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ColumnMenuItemContentTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <div class="k-columnmenu-item" (click)="onClick($event)" [class.k-selected]="selected" [class.k-disabled]="disabled">
-           <span *ngIf="icon" class="k-icon" [ngClass]="iconClass">
-           </span>
-           {{ text }}
+            <kendo-icon-wrapper
+                [name]="icon"
+                [svgIcon]="svgIcon"></kendo-icon-wrapper>
+            {{ text }}
         </div>
         <div *ngIf="contentTemplate" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
             <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
             </ng-container>
         <div>
-    `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
+    `, isInline: true, components: [{ type: i1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
         trigger('state', [
             state('collapsed', style({ display: 'none' })),
             state('expanded', style({ display: 'block' })),
@@ -125,9 +124,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     selector: 'kendo-treelist-columnmenu-item',
                     template: `
         <div class="k-columnmenu-item" (click)="onClick($event)" [class.k-selected]="selected" [class.k-disabled]="disabled">
-           <span *ngIf="icon" class="k-icon" [ngClass]="iconClass">
-           </span>
-           {{ text }}
+            <kendo-icon-wrapper
+                [name]="icon"
+                [svgIcon]="svgIcon"></kendo-icon-wrapper>
+            {{ text }}
         </div>
         <div *ngIf="contentTemplate" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
             <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
@@ -143,6 +143,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Output
             }], icon: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], text: [{
                 type: Input
             }], selected: [{
@@ -153,5 +155,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], contentTemplate: [{
                 type: ContentChild,
-                args: [ColumnMenuItemContentTemplateDirective, { static: false }]
+                args: [ColumnMenuItemContentTemplateDirective]
             }] } });