@progress/kendo-angular-pivotgrid 11.0.0-develop.108 → 11.0.0-develop.109

package/fesm2020/progress-kendo-angular-pivotgrid.mjs

@@ -5,7 +5,7 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Injectable, Output, Component, HostBinding, Input, Directive, ContentChildren, isDevMode, Optional, ContentChild, forwardRef, ViewChild, ElementRef, NgModule } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
-import * as i3 from '@progress/kendo-angular-common';
+import * as i1$1 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, PreventableEvent, Keys, isChanged, hasObservers, anyChanged, EventsModule, DraggableModule } from '@progress/kendo-angular-common';
 import { toTree, toRows, toColumns, toData, configuratorReducer, PIVOT_CONFIGURATOR_ACTION, PivotGridNavigation, ConfiguratorNavigation, HEADERS_ACTION, headersReducer, createFlatSchemaDimensions, createDataTree, createLocalDataState, rootFields, fetchData, createDataState, fetchDiscover, addKPI, buildKPIMeasures } from '@progress/kendo-pivotgrid-common';
 export { averageAggregate, maxAggregate, minAggregate, sumAggregate } from '@progress/kendo-pivotgrid-common';
@@ -13,19 +13,22 @@ import { BehaviorSubject, Subscription, Subject, from, of, fromEvent } from 'rxj
 import { take, mergeMap, merge } from 'rxjs/operators';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import { chevronUpIcon, chevronDownIcon, sortAscSmallIcon, sortDescSmallIcon, filterIcon, moreVerticalIcon, gearIcon } from '@progress/kendo-svg-icons';
+import * as i2 from '@progress/kendo-angular-icons';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i7 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i5$1 from '@progress/kendo-angular-indicators';
 import { IndicatorsModule } from '@progress/kendo-angular-indicators';
 import * as i4 from '@progress/kendo-angular-treeview';
 import { TreeViewComponent, TreeViewModule } from '@progress/kendo-angular-treeview';
-import * as i1$1 from '@progress/kendo-angular-popup';
+import * as i1$2 from '@progress/kendo-angular-popup';
 import * as i5 from '@progress/kendo-angular-buttons';
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import * as i3$1 from '@angular/forms';
+import * as i3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import * as i1$2 from '@progress/kendo-angular-dropdowns';
+import * as i1$3 from '@progress/kendo-angular-dropdowns';
 import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
 import * as i6 from '@progress/kendo-angular-inputs';
 import { InputsModule } from '@progress/kendo-angular-inputs';
@@ -37,7 +40,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-pivotgrid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673546563,
+    publishDate: 1673549015,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -316,6 +319,8 @@ class PivotGridCellDirective {
         this.renderer = renderer;
         this.dataService = dataService;
         this.cellClass = true;
+        this.chevronUpSVGIcon = chevronUpIcon;
+        this.chevronDownSVGIcon = chevronDownIcon;
         this.handleClick = () => {
             this.dataService.expandedStateChange.emit({
                 action: this.expanded ? 'collapse' : 'expand',
@@ -348,34 +353,28 @@ class PivotGridCellDirective {
 }
 PivotGridCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotGridCellDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: PivotGridDataService }], target: i0.ɵɵFactoryTarget.Component });
 PivotGridCellDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: { kendoPivotGridCell: "kendoPivotGridCell", tableType: "tableType", rowIndex: "rowIndex", colIndex: "colIndex" }, host: { properties: { "class.k-pivotgrid-cell": "this.cellClass" } }, ngImport: i0, template: `
-        <span 
+        <kendo-icon-wrapper
             *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"
-            class="k-icon"
             aria-hidden="true"
-            [kendoEventsOutsideAngular]="{
-                click: handleClick
-            }"
-            [ngClass]="{
-                'k-i-arrow-chevron-up': expanded,
-                'k-i-arrow-chevron-down': !expanded
-            }"></span>{{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}`, isInline: true, directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+            [kendoEventsOutsideAngular]="{ click: handleClick }"
+            [name]="expanded ? 'chevron-up' : 'chevron-down'"
+            [svgIcon]="expanded ? chevronUpSVGIcon : chevronDownSVGIcon">
+        </kendo-icon-wrapper>
+        {{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}`, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotGridCellDirective, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoPivotGridCell]',
                     template: `
-        <span 
+        <kendo-icon-wrapper
             *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"
-            class="k-icon"
             aria-hidden="true"
-            [kendoEventsOutsideAngular]="{
-                click: handleClick
-            }"
-            [ngClass]="{
-                'k-i-arrow-chevron-up': expanded,
-                'k-i-arrow-chevron-down': !expanded
-            }"></span>{{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}`
+            [kendoEventsOutsideAngular]="{ click: handleClick }"
+            [name]="expanded ? 'chevron-up' : 'chevron-down'"
+            [svgIcon]="expanded ? chevronUpSVGIcon : chevronDownSVGIcon">
+        </kendo-icon-wrapper>
+        {{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}`
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: PivotGridDataService }]; }, propDecorators: { cellClass: [{
                 type: HostBinding,
@@ -713,11 +712,11 @@ class SinglePopupService {
         });
     }
 }
-SinglePopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SinglePopupService, deps: [{ token: i1$1.PopupService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: PivotLocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
+SinglePopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SinglePopupService, deps: [{ token: i1$2.PopupService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: PivotLocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
 SinglePopupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SinglePopupService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SinglePopupService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$1.PopupService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: PivotLocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.PopupService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: PivotLocalizationService }]; } });
 
 /**
  * @hidden
@@ -928,6 +927,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     type: Optional
                 }] }]; } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * @hidden
  *
@@ -974,23 +974,26 @@ class ChipMenuItemComponent {
     }
 }
 ChipMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChipMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: { icon: "icon", text: "text", selected: "selected", expanded: "expanded" }, outputs: { itemClick: "itemClick", expand: "expand", collapse: "collapse" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ChipMenuItemContentTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+ChipMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: { icon: "icon", svgIcon: "svgIcon", text: "text", selected: "selected", expanded: "expanded" }, outputs: { itemClick: "itemClick", expand: "expand", collapse: "collapse" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ChipMenuItemContentTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <div
             class="k-columnmenu-item"
             (click)="onClick($event)"
             (keydown.enter)="onClick($event)"
             [class.k-selected]="selected"
             role="button"
-            [attr.aria-expanded]="expanded">
-           <span *ngIf="icon" class="k-icon" [ngClass]="iconClass">
-           </span>
+            [attr.aria-expanded]="expanded"
+        >
+            <kendo-icon-wrapper
+                *ngIf="icon"
+                [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>
+            <ng-container [ngTemplateOutlet]="contentTemplate.templateRef"></ng-container>
         <div>
-    `, isInline: true, directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
         trigger('state', [
             state('collapsed', style({ display: 'none' })),
             state('expanded', style({ display: 'block' })),
@@ -1047,14 +1050,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             (keydown.enter)="onClick($event)"
             [class.k-selected]="selected"
             role="button"
-            [attr.aria-expanded]="expanded">
-           <span *ngIf="icon" class="k-icon" [ngClass]="iconClass">
-           </span>
+            [attr.aria-expanded]="expanded"
+        >
+            <kendo-icon-wrapper
+                *ngIf="icon"
+                [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>
+            <ng-container [ngTemplateOutlet]="contentTemplate.templateRef"></ng-container>
         <div>
     `
                 }]
@@ -1066,6 +1072,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Output
             }], icon: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], text: [{
                 type: Input
             }], selected: [{
@@ -1089,6 +1097,8 @@ class ChipMenuSortComponent extends ChipMenuItemBase {
         this.localization = localization;
         this.renderer = renderer;
         this.configuratorService = configuratorService;
+        this.sortAscSVGIcon = sortAscSmallIcon;
+        this.sortDescSVGIcon = sortDescSmallIcon;
     }
     get sortedAsc() {
         const descriptor = this.descriptor;
@@ -1123,16 +1133,18 @@ ChipMenuSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         <kendo-pivot-chipmenu-item
             [text]="messageFor('fieldMenuSortAscendingItemLabel')"
             icon="sort-asc-small"
+            [svgIcon]="sortAscSVGIcon"
             (itemClick)="toggleSort('asc')"
             [selected]="sortedAsc">
         </kendo-pivot-chipmenu-item>
         <kendo-pivot-chipmenu-item
             [text]="messageFor('fieldMenuSortDescendingItemLabel')"
             icon="sort-desc-small"
+            [svgIcon]="sortDescSVGIcon"
             (itemClick)="toggleSort('desc')"
             [selected]="sortedDesc">
         </kendo-pivot-chipmenu-item>
-    `, isInline: true, components: [{ type: ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: ["icon", "text", "selected", "expanded"], outputs: ["itemClick", "expand", "collapse"] }] });
+    `, isInline: true, components: [{ type: ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "expanded"], outputs: ["itemClick", "expand", "collapse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuSortComponent, decorators: [{
             type: Component,
             args: [{
@@ -1141,12 +1153,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <kendo-pivot-chipmenu-item
             [text]="messageFor('fieldMenuSortAscendingItemLabel')"
             icon="sort-asc-small"
+            [svgIcon]="sortAscSVGIcon"
             (itemClick)="toggleSort('asc')"
             [selected]="sortedAsc">
         </kendo-pivot-chipmenu-item>
         <kendo-pivot-chipmenu-item
             [text]="messageFor('fieldMenuSortDescendingItemLabel')"
             icon="sort-desc-small"
+            [svgIcon]="sortDescSVGIcon"
             (itemClick)="toggleSort('desc')"
             [selected]="sortedDesc">
         </kendo-pivot-chipmenu-item>
@@ -1178,12 +1192,12 @@ class FilterMenuDropDownListDirective {
         this.host.wrapper.nativeElement.removeEventListener('keydown', this.keydownHandler);
     }
 }
-FilterMenuDropDownListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterMenuDropDownListDirective, deps: [{ token: i1$2.DropDownListComponent }], target: i0.ɵɵFactoryTarget.Directive });
+FilterMenuDropDownListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterMenuDropDownListDirective, deps: [{ token: i1$3.DropDownListComponent }], target: i0.ɵɵFactoryTarget.Directive });
 FilterMenuDropDownListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: { filterMenuDropDownLabel: "filterMenuDropDownLabel" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterMenuDropDownListDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[kendoFilterMenuDropDown]' }]
-        }], ctorParameters: function () { return [{ type: i1$2.DropDownListComponent }]; }, propDecorators: { filterMenuDropDownLabel: [{
+        }], ctorParameters: function () { return [{ type: i1$3.DropDownListComponent }]; }, propDecorators: { filterMenuDropDownLabel: [{
                 type: Input
             }] } });
 
@@ -1251,7 +1265,7 @@ class StringFilterMenuComponent {
         this.subscription.unsubscribe();
     }
 }
-StringFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringFilterMenuComponent, deps: [{ token: PivotLocalizationService }, { token: ConfiguratorService }, { token: i3$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+StringFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringFilterMenuComponent, deps: [{ token: PivotLocalizationService }, { token: ConfiguratorService }, { token: i3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
 StringFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StringFilterMenuComponent, selector: "kendo-pivot-string-filter-menu", inputs: { chip: "chip", menuTabbingService: "menuTabbingService" }, providers: [{
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => StringFilterMenuComponent),
@@ -1272,7 +1286,7 @@ StringFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                     formControlName="value"
                 />
         </ng-container>
-    `, isInline: true, components: [{ type: i1$2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }] });
+    `, isInline: true, components: [{ type: i1$3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringFilterMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -1300,7 +1314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: PivotLocalizationService }, { type: ConfiguratorService }, { type: i3$1.FormBuilder }]; }, propDecorators: { chip: [{
+        }], ctorParameters: function () { return [{ type: PivotLocalizationService }, { type: ConfiguratorService }, { type: i3.FormBuilder }]; }, propDecorators: { chip: [{
                 type: Input
             }], menuTabbingService: [{
                 type: Input
@@ -1403,7 +1417,7 @@ FilterMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 </div>
             </div>
         </form>
-    `, isInline: true, components: [{ type: StringFilterMenuComponent, selector: "kendo-pivot-string-filter-menu", inputs: ["chip", "menuTabbingService"] }, { type: i5.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"] }], directives: [{ type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: StringFilterMenuComponent, selector: "kendo-pivot-string-filter-menu", inputs: ["chip", "menuTabbingService"] }, { type: i5.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"] }], directives: [{ type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterMenuContainerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1482,6 +1496,7 @@ class ChipMenuFilterComponent extends ChipMenuItemBase {
         this.expanded = false;
         this.isLast = false;
         this.actionsClass = 'k-columnmenu-actions';
+        this.filterSVGIcon = filterIcon;
     }
     onCollapse() {
         this.expanded = false;
@@ -1507,6 +1522,7 @@ ChipMenuFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             classs="k-widget k-expander"
             [text]="messageFor('fieldMenuFilterItemLabel')"
             icon="filter"
+            [svgIcon]="filterSVGIcon"
             [expanded]="expanded"
             (collapse)="onCollapse()"
             (expand)="onExpand()">
@@ -1522,7 +1538,7 @@ ChipMenuFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </kendo-pivot-filter-menu-container>
             </ng-template>
         </kendo-pivot-chipmenu-item>
-    `, isInline: true, components: [{ type: ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: ["icon", "text", "selected", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: FilterMenuContainerComponent, selector: "kendo-pivot-filter-menu-container", inputs: ["chip", "isLast", "isExpanded", "menuTabbingService", "actionsClass"], outputs: ["close"] }], directives: [{ type: ChipMenuItemContentTemplateDirective, selector: "[kendoPivotChipMenuItemContentTemplate]" }] });
+    `, isInline: true, components: [{ type: ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: FilterMenuContainerComponent, selector: "kendo-pivot-filter-menu-container", inputs: ["chip", "isLast", "isExpanded", "menuTabbingService", "actionsClass"], outputs: ["close"] }], directives: [{ type: ChipMenuItemContentTemplateDirective, selector: "[kendoPivotChipMenuItemContentTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuFilterComponent, decorators: [{
             type: Component,
             args: [{
@@ -1532,6 +1548,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             classs="k-widget k-expander"
             [text]="messageFor('fieldMenuFilterItemLabel')"
             icon="filter"
+            [svgIcon]="filterSVGIcon"
             [expanded]="expanded"
             (collapse)="onCollapse()"
             (expand)="onExpand()">
@@ -1561,6 +1578,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }] } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const POPUP_CLASS = 'k-column-menu';
 /**
  * @hidden
@@ -1573,20 +1591,22 @@ class ChipMenuComponent {
         this.localization = localization;
         this.service = service;
         this.tabIndex = '-1';
+        this.menuItemSVGIcon = moreVerticalIcon;
         this.closeSubscription = service.closeMenu.subscribe(this.close.bind(this));
     }
     ngOnDestroy() {
         this.close();
         this.closeSubscription.unsubscribe();
     }
-    toggle(e, anchor, template) {
+    toggle(e, template) {
         if (e) {
             e.preventDefault();
             e.stopImmediatePropagation();
         }
+        const anchor = this.anchor.nativeElement;
         this.popupRef = this.popupService.open(anchor, template, this.popupRef, POPUP_CLASS);
         if (!this.popupRef) {
-            this.anchor.nativeElement.focus();
+            anchor.focus();
         }
     }
     close() {
@@ -1604,13 +1624,16 @@ ChipMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versio
 ChipMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ChipMenuComponent, selector: "kendo-pivot-chip-menu", inputs: { chip: "chip", tabIndex: "tabIndex" }, providers: [
         ChipMenuService,
         MenuTabbingService
-    ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, static: true }], ngImport: i0, template: `
-        <span #anchor
-            class="k-icon k-i-more-vertical"
-            (click)="toggle($event, anchor, template)"
+    ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: `
+        <kendo-icon-wrapper
+            #anchor
+            name="more-vertical"
+            [svgIcon]="menuItemSVGIcon"
+            (click)="toggle($event, template)"
             [tabindex]="tabIndex"
-            [attr.title]="chipMenuTitle">
-        </span>
+            [attr.title]="chipMenuTitle"
+        >
+        </kendo-icon-wrapper>
         <ng-template #template>
             <kendo-pivot-chipmenu-container
                 (keydown.escape)="close()"
@@ -1630,7 +1653,7 @@ ChipMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 </kendo-pivot-chipmenu-filter>
             </kendo-pivot-chipmenu-container>
         </ng-template>
-    `, isInline: true, components: [{ type: ChipMenuContainerComponent, selector: "kendo-pivot-chipmenu-container" }, { type: ChipMenuSortComponent, selector: "kendo-pivot-chipmenu-sort", inputs: ["chip"] }, { type: ChipMenuFilterComponent, selector: "kendo-pivot-chipmenu-filter", inputs: ["chip", "expanded", "isLast"], outputs: ["expand", "collapse"] }], directives: [{ type: ChipMenuItemDirective, selector: "[kendoPivotChipMenuItem]", inputs: ["kendoPivotChipMenuItem"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ChipMenuContainerComponent, selector: "kendo-pivot-chipmenu-container" }, { type: ChipMenuSortComponent, selector: "kendo-pivot-chipmenu-sort", inputs: ["chip"] }, { type: ChipMenuFilterComponent, selector: "kendo-pivot-chipmenu-filter", inputs: ["chip", "expanded", "isLast"], outputs: ["expand", "collapse"] }], directives: [{ type: ChipMenuItemDirective, selector: "[kendoPivotChipMenuItem]", inputs: ["kendoPivotChipMenuItem"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -1640,12 +1663,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     ],
                     selector: 'kendo-pivot-chip-menu',
                     template: `
-        <span #anchor
-            class="k-icon k-i-more-vertical"
-            (click)="toggle($event, anchor, template)"
+        <kendo-icon-wrapper
+            #anchor
+            name="more-vertical"
+            [svgIcon]="menuItemSVGIcon"
+            (click)="toggle($event, template)"
             [tabindex]="tabIndex"
-            [attr.title]="chipMenuTitle">
-        </span>
+            [attr.title]="chipMenuTitle"
+        >
+        </kendo-icon-wrapper>
         <ng-template #template>
             <kendo-pivot-chipmenu-container
                 (keydown.escape)="close()"
@@ -1673,7 +1699,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], anchor: [{
                 type: ViewChild,
-                args: ['anchor', { static: true }]
+                args: ['anchor', { static: true, read: ElementRef }]
             }] } });
 
 /**
@@ -1924,14 +1950,14 @@ class DraggableChipDirective {
         this.subs.unsubscribe();
     }
 }
-DraggableChipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DraggableChipDirective, deps: [{ token: i3.DraggableDirective, optional: true }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: ConfiguratorService }, { token: DropCueService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+DraggableChipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DraggableChipDirective, deps: [{ token: i1$1.DraggableDirective, optional: true }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: ConfiguratorService }, { token: DropCueService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
 DraggableChipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: { item: "item" }, host: { properties: { "style.pointerEvents": "this.pointerEvents", "style.touch-action": "this.touchActions" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DraggableChipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoChipDraggable]'
                 }]
-        }], ctorParameters: function () { return [{ type: i3.DraggableDirective, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$1.DraggableDirective, decorators: [{
                     type: Optional
                 }] }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: ConfiguratorService }, { type: DropCueService }, { type: i0.Renderer2 }]; }, propDecorators: { pointerEvents: [{
                 type: HostBinding,
@@ -2464,7 +2490,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 <button kendoButton themeColor="primary" type="button" (click)="handleSubmit()">{{messageFor('configuratorApplyButtonText')}}</button>
             </div>
         </div>
-   `, isInline: true, components: [{ type: i4.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { type: i5.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size"], outputs: ["selectedChange", "remove"] }, { type: i5.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "svgIcon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "removeSvgIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }, { type: ChipMenuComponent, selector: "kendo-pivot-chip-menu", inputs: ["chip", "tabIndex"] }, { type: i5.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"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { type: i4.NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["item", "axes"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: ["item"] }, { type: i3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: ChipKeyboardNavigationDirective, selector: "[kendoChipKeyboardNavigation]", outputs: ["reorder"] }] });
+   `, isInline: true, components: [{ type: i4.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { type: i5.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size"], outputs: ["selectedChange", "remove"] }, { type: i5.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "svgIcon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "removeSvgIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }, { type: ChipMenuComponent, selector: "kendo-pivot-chip-menu", inputs: ["chip", "tabIndex"] }, { type: i5.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"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { type: i4.NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["item", "axes"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: ["item"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: ChipKeyboardNavigationDirective, selector: "[kendoChipKeyboardNavigation]", outputs: ["reorder"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotGridConfiguratorComponent, decorators: [{
             type: Component,
             args: [{
@@ -2813,6 +2839,10 @@ class PivotGridComponent {
          * @default false
          */
         this.navigable = false;
+        /**
+         * @hidden
+         */
+        this.gearSVGIcon = gearIcon;
         this.resizeObservers = [];
         this._loaderSettings = DEFAULT_LOADER_SETTINGS;
         this.subs = new Subscription();
@@ -2994,7 +3024,7 @@ class PivotGridComponent {
         }
     }
 }
-PivotGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: PivotGridDataService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i3.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
+PivotGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: PivotGridDataService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i1$1.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
 PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PivotGridComponent, selector: "kendo-pivotgrid", inputs: { loaderSettings: "loaderSettings", configurator: "configurator", columnHeadersWidth: "columnHeadersWidth", navigable: "navigable" }, host: { properties: { "class.k-d-flex": "this.hostClass", "class.k-pos-relative": "this.hostClass", "class.k-flex-row": "this.rightPositionClass", "class.k-flex-row-reverse": "this.leftPositionClass", "class.k-flex-column": "this.bottomPositionClass", "class.k-flex-column-reverse": "this.topPositionClass", "attr.dir": "this.dir" } }, providers: [
         PivotGridDataService,
         LocalizationService,
@@ -3139,10 +3169,10 @@ PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             class="k-pivotgrid-configurator-button"
             aria-hidden="true"
             (click)="toggleConfigurator()">
-            <span>{{messageFor('configuratorButtonText')}}<span class="k-icon k-i-gear k-color-inherit"></span>
+            <span>{{messageFor('configuratorButtonText')}}<kendo-icon-wrapper name="gear" innerCssClass="k-color-inherit" [svgIcon]="gearSVGIcon"></kendo-icon-wrapper>
             </span>
         </div>
-   `, isInline: true, components: [{ type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType", "colWidth"] }, { type: i5$1.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: ["orientation", "sort", "filter", "navigation"], outputs: ["close"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+   `, isInline: true, components: [{ type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType", "colWidth"] }, { type: i5$1.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: ["orientation", "sort", "filter", "navigation"], outputs: ["close"] }, { type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotGridComponent, decorators: [{
             type: Component,
             args: [{
@@ -3292,12 +3322,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             class="k-pivotgrid-configurator-button"
             aria-hidden="true"
             (click)="toggleConfigurator()">
-            <span>{{messageFor('configuratorButtonText')}}<span class="k-icon k-i-gear k-color-inherit"></span>
+            <span>{{messageFor('configuratorButtonText')}}<kendo-icon-wrapper name="gear" innerCssClass="k-color-inherit" [svgIcon]="gearSVGIcon"></kendo-icon-wrapper>
             </span>
         </div>
    `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: PivotGridDataService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i3.ScrollbarWidthService }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: PivotGridDataService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i1$1.ScrollbarWidthService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-d-flex']
             }, {
@@ -3785,6 +3815,7 @@ const MODULES = [
     CommonModule,
     DropDownsModule,
     InputsModule,
+    IconsModule,
     ButtonsModule
 ];
 /**
@@ -3796,13 +3827,16 @@ SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "1
 SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, imports: [CommonModule,
         DropDownsModule,
         InputsModule,
+        IconsModule,
         ButtonsModule], exports: [CommonModule,
         DropDownsModule,
         InputsModule,
+        IconsModule,
         ButtonsModule] });
 SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, imports: [[MODULES], CommonModule,
         DropDownsModule,
         InputsModule,
+        IconsModule,
         ButtonsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
@@ -3884,7 +3918,8 @@ const IMPORTED_MODULES = [
     TreeViewModule,
     DraggableModule,
     ChipMenuModule,
-    SharedModule
+    SharedModule,
+    IconsModule
 ];
 const DECLARATIONS = [
     PivotGridComponent,
@@ -3928,7 +3963,8 @@ PivotGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         TreeViewModule,
         DraggableModule,
         ChipMenuModule,
-        SharedModule], exports: [PivotGridComponent,
+        SharedModule,
+        IconsModule], exports: [PivotGridComponent,
         PivotGridTableComponent,
         PivotGridCellDirective,
         PivotLocalBindingDirective,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-pivotgrid",
-  "version": "11.0.0-develop.108",
+  "version": "11.0.0-develop.109",
   "description": "PivotGrid package for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -25,16 +25,17 @@
     "@progress/kendo-drawing": "^1.16.3",
     "@progress/kendo-licensing": "^1.0.2",
     "@progress/kendo-pivotgrid-common": "0.5.1",
-    "@progress/kendo-angular-buttons": "11.0.0-develop.108",
-    "@progress/kendo-angular-common": "11.0.0-develop.108",
-    "@progress/kendo-angular-dropdowns": "11.0.0-develop.108",
-    "@progress/kendo-angular-indicators": "11.0.0-develop.108",
-    "@progress/kendo-angular-inputs": "11.0.0-develop.108",
-    "@progress/kendo-angular-intl": "11.0.0-develop.108",
-    "@progress/kendo-angular-l10n": "11.0.0-develop.108",
-    "@progress/kendo-angular-popup": "11.0.0-develop.108",
-    "@progress/kendo-angular-schematics": "11.0.0-develop.108",
-    "@progress/kendo-angular-treeview": "11.0.0-develop.108",
+    "@progress/kendo-angular-buttons": "11.0.0-develop.109",
+    "@progress/kendo-angular-common": "11.0.0-develop.109",
+    "@progress/kendo-angular-dropdowns": "11.0.0-develop.109",
+    "@progress/kendo-angular-indicators": "11.0.0-develop.109",
+    "@progress/kendo-angular-inputs": "11.0.0-develop.109",
+    "@progress/kendo-angular-intl": "11.0.0-develop.109",
+    "@progress/kendo-angular-l10n": "11.0.0-develop.109",
+    "@progress/kendo-angular-popup": "11.0.0-develop.109",
+    "@progress/kendo-angular-schematics": "11.0.0-develop.109",
+    "@progress/kendo-angular-icons": "11.0.0-develop.109",
+    "@progress/kendo-angular-treeview": "11.0.0-develop.109",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {

package/pivotgrid.component.d.ts

@@ -10,6 +10,7 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ConfiguratorSettings } from './models/configurator-settings';
 import { ConfiguratorNavigation } from '@progress/kendo-pivotgrid-common';
 import { PivotDataRowItem } from './models/data-row-item';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * Represents the Kendo UI PivotGrid component for Angular.
@@ -66,6 +67,10 @@ export declare class PivotGridComponent implements AfterViewInit, AfterContentIn
      * Holds the displayed aggregated PivotGrid values.
      */
     get aggregateData(): PivotDataRowItem[];
+    /**
+     * @hidden
+     */
+    gearSVGIcon: SVGIcon;
     loading: boolean;
     showConfigurator: boolean;
     configuratorNavigation: ConfiguratorNavigation;