@progress/kendo-angular-pivotgrid 17.0.0-develop.2 → 17.0.0-develop.21

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

@@ -20,12 +20,12 @@ 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 { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
-import { TextBoxDirective, CheckBoxDirective } from '@progress/kendo-angular-inputs';
+import { TextBoxDirective, CheckBoxComponent } from '@progress/kendo-angular-inputs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
 import * as i1$3 from '@progress/kendo-angular-popup';
 import { PopupService } from '@progress/kendo-angular-popup';
-import { TreeViewComponent, ExpandDirective, NodeTemplateDirective } from '@progress/kendo-angular-treeview';
+import { TreeViewComponent, ExpandDirective, CheckDirective, NodeTemplateDirective } from '@progress/kendo-angular-treeview';
 import { validatePackage } from '@progress/kendo-licensing';
 import { LoaderComponent } from '@progress/kendo-angular-indicators';
 import { DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
@@ -883,7 +883,7 @@ FilterMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
                 </div>
             </div>
         </form>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: StringFilterMenuComponent, selector: "kendo-pivot-string-filter-menu", inputs: ["chip", "menuTabbingService"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: StringFilterMenuComponent, selector: "kendo-pivot-string-filter-menu", inputs: ["chip", "menuTabbingService"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterMenuContainerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1640,22 +1640,22 @@ class ChipMenuComponent {
         this.close();
         this.closeSubscription.unsubscribe();
     }
-    toggle(e, template) {
-        if (e) {
-            e.preventDefault();
-            e.stopImmediatePropagation();
+    toggle(e) {
+        if (e?.originalEvent) {
+            e.originalEvent.preventDefault();
+            e.originalEvent.stopImmediatePropagation();
         }
-        const anchor = this.anchor.nativeElement;
-        this.popupRef = this.popupService.open(anchor, template, this.popupRef, POPUP_CLASS);
+        const anchorElement = this.anchor.element.nativeElement;
+        this.popupRef = this.popupService.open(anchorElement, this.template, this.popupRef, POPUP_CLASS);
         this.popupRef && this.renderer.setAttribute(this.popupRef.popupElement, 'dir', this.localization.rtl ? 'rtl' : 'ltr');
         if (!this.popupRef) {
-            anchor.focus();
+            anchorElement.focus();
         }
     }
     close() {
         this.popupService.destroy();
         this.popupRef = null;
-        this.anchor.nativeElement.closest('.k-chip').focus();
+        this.anchor.element.nativeElement.closest('.k-chip').focus();
     }
     get chipMenuTitle() {
         const localizationMsg = this.localization.get('chipMenuIconTitle') || '';
@@ -1664,19 +1664,10 @@ class ChipMenuComponent {
     }
 }
 ChipMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuComponent, deps: [{ token: SinglePopupService }, { token: PivotLocalizationService }, { token: ChipMenuService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ChipMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChipMenuComponent, isStandalone: true, selector: "kendo-pivot-chip-menu", inputs: { chip: "chip", tabIndex: "tabIndex", isMeasureField: "isMeasureField" }, providers: [
+ChipMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChipMenuComponent, isStandalone: true, selector: "kendo-pivot-chip-menu", inputs: { chip: "chip", tabIndex: "tabIndex", isMeasureField: "isMeasureField", anchor: "anchor" }, providers: [
         ChipMenuService,
         MenuTabbingService
-    ], 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"
-        >
-        </kendo-icon-wrapper>
+    ], viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }], ngImport: i0, template: `
         <ng-template #template>
             <kendo-pivot-chipmenu-container
                 (keydown.escape)="close()"
@@ -1705,7 +1696,7 @@ ChipMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
                     [service]="service"></kendo-pivot-chipmenu-reorder>
             </kendo-pivot-chipmenu-container>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ChipMenuContainerComponent, selector: "kendo-pivot-chipmenu-container" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChipMenuSortComponent, selector: "kendo-pivot-chipmenu-sort", inputs: ["chip"] }, { kind: "directive", type: ChipMenuItemDirective, selector: "[kendoPivotChipMenuItem]", inputs: ["kendoPivotChipMenuItem"] }, { kind: "component", type: ChipMenuFilterComponent, selector: "kendo-pivot-chipmenu-filter", inputs: ["chip", "expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ChipMenuReorderComponent, selector: "kendo-pivot-chipmenu-reorder", inputs: ["chip"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ChipMenuContainerComponent, selector: "kendo-pivot-chipmenu-container" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChipMenuSortComponent, selector: "kendo-pivot-chipmenu-sort", inputs: ["chip"] }, { kind: "directive", type: ChipMenuItemDirective, selector: "[kendoPivotChipMenuItem]", inputs: ["kendoPivotChipMenuItem"] }, { kind: "component", type: ChipMenuFilterComponent, selector: "kendo-pivot-chipmenu-filter", inputs: ["chip", "expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ChipMenuReorderComponent, selector: "kendo-pivot-chipmenu-reorder", inputs: ["chip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -1715,15 +1706,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     ],
                     selector: 'kendo-pivot-chip-menu',
                     template: `
-        <kendo-icon-wrapper
-            #anchor
-            name="more-vertical"
-            [svgIcon]="menuItemSVGIcon"
-            (click)="toggle($event, template)"
-            [tabindex]="tabIndex"
-            [attr.title]="chipMenuTitle"
-        >
-        </kendo-icon-wrapper>
         <ng-template #template>
             <kendo-pivot-chipmenu-container
                 (keydown.escape)="close()"
@@ -1763,8 +1745,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], isMeasureField: [{
                 type: Input
             }], anchor: [{
+                type: Input
+            }], template: [{
                 type: ViewChild,
-                args: ['anchor', { static: true, read: ElementRef }]
+                args: ['template', { static: true }]
             }] } });
 
 /**
@@ -1838,14 +1822,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class DraggableChipDirective {
-    constructor(draggable, element, zone, service, cue, renderer, cdr) {
+    constructor(draggable, element, zone, service, cue, renderer) {
         this.draggable = draggable;
         this.element = element;
         this.zone = zone;
         this.service = service;
         this.cue = cue;
         this.renderer = renderer;
-        this.cdr = cdr;
         this.touchActions = 'none';
         this.initialX = {};
         this.initialY = {};
@@ -1924,7 +1907,7 @@ class DraggableChipDirective {
         this.subs.unsubscribe();
     }
 }
-DraggableChipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DraggableChipDirective, deps: [{ token: i1$4.DraggableDirective, optional: true }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: ConfiguratorService }, { token: DropCueService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+DraggableChipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DraggableChipDirective, deps: [{ token: i1$4.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: "14.0.0", version: "15.2.10", type: DraggableChipDirective, isStandalone: true, 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: "15.2.10", ngImport: i0, type: DraggableChipDirective, decorators: [{
             type: Directive,
@@ -1934,7 +1917,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$4.DraggableDirective, decorators: [{
                     type: Optional
-                }] }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: ConfiguratorService }, { type: DropCueService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { pointerEvents: [{
+                }] }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: ConfiguratorService }, { type: DropCueService }, { type: i0.Renderer2 }]; }, propDecorators: { pointerEvents: [{
                 type: HostBinding,
                 args: ['style.pointerEvents']
             }], touchActions: [{
@@ -2133,6 +2116,9 @@ class PivotGridConfiguratorComponent {
          * A function which determines if a specific node has child nodes.
          */
         this.hasChildren = (node) => !('hierarchyUniqueName' in node) && !('aggregator' in node);
+        this.checkItemBy = (context) => {
+            return context.dataItem;
+        };
         /**
          * A function which provides the child nodes for a given parent node.
          */
@@ -2287,16 +2273,6 @@ class PivotGridConfiguratorComponent {
         ].some((h) => (h === f.uniqueName || h === f.defaultHierarchy)));
         this.checked = checked;
     }
-    /**
-     * A function which determines if a specific node is checked/
-     */
-    isItemChecked(node) {
-        const res = this.checked.some(s => node.defaultHierarchy
-            ? s.defaultHierarchy === node.defaultHierarchy
-            : s.uniqueName === node.uniqueName)
-            || (node.children?.length && node.children?.every((c) => c.checked));
-        return res || null;
-    }
     /**
      * Determines if a checkbox should be rendered.
      */
@@ -2317,21 +2293,14 @@ class PivotGridConfiguratorComponent {
         const fields = event.children.map(item => item.dataItem);
         this.setChecked(fields);
     }
-    handleCheckedChange(event, item) {
-        if (event.target.checked) {
-            this.checked = [...this.checked, item];
-        }
-        else {
-            const itemIndex = this.checked.findIndex(checkedItem => checkedItem.uniqueName === item.uniqueName);
-            this.checked.splice(itemIndex, 1);
-        }
+    handleCheckedChange(event) {
+        const itemIndex = this.checked.findIndex(checkedItem => checkedItem.uniqueName === event.item.dataItem.uniqueName);
+        this.checked.splice(itemIndex, 1);
         const action = {
             type: 'PIVOT_CONFIGURATOR_ACTION_TOGGLE_SELECTION',
-            payload: item
+            payload: event.item.dataItem
         };
         this.configuratorService.parseConfiguratorState(action);
-        const closestItem = event.target.closest('.k-treeview-item');
-        this.zone.runOutsideAngular(() => setTimeout(() => closestItem.focus()));
     }
     onTreeViewSelect(ev) {
         const closestItem = ev.target.closest('.k-treeview-item');
@@ -2420,7 +2389,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             </div>
 
             <div class="k-pivotgrid-configurator-content">
-                <div class="k-form" [class.k-form-horizontal]="isHorizontal" role="form">
+                <div class="k-form k-form-md" [class.k-form-horizontal]="isHorizontal" [class.k-form-vertical]="!isHorizontal" role="form">
                     <div class="k-form-field-wrapper" [ngStyle]="isHorizontal ? {'padding-left': 0 } : null">
                         <div class="k-form-field" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
                             <span [id]="contentLabelId('fields')" class="k-label">{{messageFor('configuratorFieldsText')}}</span>
@@ -2435,21 +2404,14 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                                     textField="caption"
                                     [children]="children"
                                     [hasChildren]="hasChildren"
+                                    kendoTreeViewCheckable
+                                    [hasCheckbox]="isSelectable"
+                                    [(checkedKeys)]="checked"
+                                    [checkBy]="checkItemBy"
+                                    (checkedChange)="handleCheckedChange($event)"
                                     kendoTreeViewExpandable
                                     (childrenLoaded)="handleChildrenLoaded($event)"
                                     (keydown.space)="onTreeViewSelect($event)">
-                                <ng-template kendoTreeViewNodeTemplate let-dataItem>
-                                    <input kendoCheckBox
-                                        *ngIf="isSelectable(dataItem)"
-                                        type="checkbox"
-                                        kendoCheckBox
-                                        tabindex="-1"
-                                        role="none"
-                                        aria-hidden="true"
-                                        [checked]="isItemChecked(dataItem)"
-                                        (change)="handleCheckedChange($event, dataItem)"/>
-                                    {{ dataItem.caption }}
-                                </ng-template>
                                 </kendo-treeview>
 
                             </div>
@@ -2467,8 +2429,10 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
 
                         <kendo-chiplist
                             *ngIf="state.columnAxes && state.columnAxes.length; else noColumnAxes"
+                            [navigable]="false"
                             #columnsChiplist
                             kendoDropTarget
+                            class="k-column-fields"
                             axes="columnAxes"
                             [style.width.%]="100"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('columns')"
@@ -2476,20 +2440,25 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                         >
                             <ng-container *ngFor="let item of state.columnAxes">
                                 <kendo-chip *ngIf="item.name.length === 1"
+                                    #chip
                                     kendoChipDraggable
                                     kendoDraggable
                                     kendoDropTarget
                                     kendoChipKeyboardNavigation
                                     [item]="item"
+                                    [label]="getName(item.name)"
                                     axes="columnAxes"
-                                    rounded="full"
                                     [removable]="true"
+                                    [hasMenu]="true"
+                                    (menuToggle)="chipMenuColumns.toggle($event)"
                                     (remove)="onChipRemove($event, item, 'column')"
                                     (reorder)="onReorder($event, 'column', item)"
-                                >{{ getName(item.name) }}
+                                >
                                     <kendo-pivot-chip-menu
-                                        [chip]="item">
-                                    </kendo-pivot-chip-menu>
+                                        #chipMenuColumns
+                                        [chip]="item"
+                                        [anchor]="chip"
+                                    ></kendo-pivot-chip-menu>
                                 </kendo-chip>
                             </ng-container>
                         </kendo-chiplist>
@@ -2504,8 +2473,10 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
 
                         <kendo-chiplist
                             *ngIf="state.rowAxes && state.rowAxes.length; else noRowAxes"
+                            [navigable]="false"
                             #rowsChiplist
                             kendoDropTarget
+                            class="k-row-fields"
                             axes="rowAxes"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('rows')"
                             [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
@@ -2513,22 +2484,25 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                         >
                             <ng-container *ngFor="let item of state.rowAxes">
                                 <kendo-chip *ngIf="item.name.length === 1"
+                                    #chip
                                     kendoChipDraggable
                                     kendoDraggable
                                     kendoDropTarget
                                     kendoChipKeyboardNavigation
                                     [item]="item"
+                                    [label]="getName(item.name)"
                                     axes="rowAxes"
-                                    rounded="full"
                                     [removable]="true"
+                                    [hasMenu]="true"
+                                    (menuToggle)="chipMenuRows.toggle($event)"
                                     (remove)="onChipRemove($event, item, 'row')"
                                     (reorder)="onReorder($event, 'row', item)"
                                 >
-                                    {{ getName(item.name) }}
-    
                                     <kendo-pivot-chip-menu
-                                        [chip]="item">
-                                    </kendo-pivot-chip-menu>
+                                        #chipMenuRows
+                                        [chip]="item"
+                                        [anchor]="chip"
+                                    ></kendo-pivot-chip-menu>
                                 </kendo-chip>
                             </ng-container>
                         </kendo-chiplist>
@@ -2549,30 +2523,34 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
 
                         <kendo-chiplist
                             *ngIf="state.measureAxes && state.measureAxes.length; else noMeasureAxes"
+                            [navigable]="false"
                             kendoDropTarget
+                            class="k-filter-fields"
                             axes="measureAxes"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('values')"
                             [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
                             [style.width.%]="100"
                         >
                             <kendo-chip *ngFor="let item of state.measureAxes"
+                                #chip
                                 kendoChipDraggable
                                 kendoDraggable
                                 kendoDropTarget
                                 kendoChipKeyboardNavigation
                                 [item]="item"
+                                [label]="getName(item.name)"
                                 axes="measureAxes"
-                                rounded="full"
                                 [removable]="true"
+                                [hasMenu]="true"
+                                (menuToggle)="chipMenuValues.toggle($event)"
                                 (remove)="onChipRemove($event, item, 'measure')"
                                 (reorder)="onReorder($event, 'measure', item)"
                                 >
-                                {{ getName(item.name) }}
-
-                                <kendo-pivot-chip-menu
-                                    [isMeasureField]="true"
-                                    [chip]="item">
-                                </kendo-pivot-chip-menu>
+                                    <kendo-pivot-chip-menu
+                                        #chipMenuValues
+                                        [chip]="item"
+                                        [anchor]="chip"
+                                    ></kendo-pivot-chip-menu>
                             </kendo-chip>
                         </kendo-chiplist>
 
@@ -2583,12 +2561,12 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                     
                 </div>
             </div>
-            <div class="k-pivotgrid-configurator-actions k-actions k-hstack k-justify-content-end">
+            <div class="k-pivotgrid-configurator-actions k-actions k-actions-end k-actions-horizontal">
                 <button kendoButton type="button" (click)="handleReset()">{{messageFor('configuratorCancelButtonText')}}</button>
                 <button kendoButton themeColor="primary" type="button" (click)="handleSubmit()">{{messageFor('configuratorApplyButtonText')}}</button>
             </div>
         </div>
-   `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "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"] }, { kind: "directive", type: ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { kind: "directive", type: NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["item", "axes"] }, { kind: "component", type: ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size", "role", "navigable"], outputs: ["selectedChange", "remove"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "svgIcon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "removeSvgIcon", "hasMenu", "menuIcon", "menuSvgIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "menuToggle", "contentClick"] }, { kind: "directive", type: DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: ["item"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: ChipKeyboardNavigationDirective, selector: "[kendoChipKeyboardNavigation]", outputs: ["reorder"] }, { kind: "component", type: ChipMenuComponent, selector: "kendo-pivot-chip-menu", inputs: ["chip", "tabIndex", "isMeasureField"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+   `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "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"] }, { kind: "directive", type: ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { kind: "directive", type: CheckDirective, selector: "[kendoTreeViewCheckable]", inputs: ["isChecked", "checkBy", "checkedKeys", "kendoTreeViewCheckable"], outputs: ["checkedKeysChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["item", "axes"] }, { kind: "component", type: ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size", "role", "navigable"], outputs: ["selectedChange", "remove"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "svgIcon", "iconClass", "avatarSettings", "selected", "removable", "removeIcon", "removeSvgIcon", "hasMenu", "menuIcon", "menuSvgIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "menuToggle", "contentClick"] }, { kind: "directive", type: DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: ["item"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: ChipKeyboardNavigationDirective, selector: "[kendoChipKeyboardNavigation]", outputs: ["reorder"] }, { kind: "component", type: ChipMenuComponent, selector: "kendo-pivot-chip-menu", inputs: ["chip", "tabIndex", "isMeasureField", "anchor"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridConfiguratorComponent, decorators: [{
             type: Component,
             args: [{
@@ -2613,7 +2591,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             </div>
 
             <div class="k-pivotgrid-configurator-content">
-                <div class="k-form" [class.k-form-horizontal]="isHorizontal" role="form">
+                <div class="k-form k-form-md" [class.k-form-horizontal]="isHorizontal" [class.k-form-vertical]="!isHorizontal" role="form">
                     <div class="k-form-field-wrapper" [ngStyle]="isHorizontal ? {'padding-left': 0 } : null">
                         <div class="k-form-field" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
                             <span [id]="contentLabelId('fields')" class="k-label">{{messageFor('configuratorFieldsText')}}</span>
@@ -2628,21 +2606,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                     textField="caption"
                                     [children]="children"
                                     [hasChildren]="hasChildren"
+                                    kendoTreeViewCheckable
+                                    [hasCheckbox]="isSelectable"
+                                    [(checkedKeys)]="checked"
+                                    [checkBy]="checkItemBy"
+                                    (checkedChange)="handleCheckedChange($event)"
                                     kendoTreeViewExpandable
                                     (childrenLoaded)="handleChildrenLoaded($event)"
                                     (keydown.space)="onTreeViewSelect($event)">
-                                <ng-template kendoTreeViewNodeTemplate let-dataItem>
-                                    <input kendoCheckBox
-                                        *ngIf="isSelectable(dataItem)"
-                                        type="checkbox"
-                                        kendoCheckBox
-                                        tabindex="-1"
-                                        role="none"
-                                        aria-hidden="true"
-                                        [checked]="isItemChecked(dataItem)"
-                                        (change)="handleCheckedChange($event, dataItem)"/>
-                                    {{ dataItem.caption }}
-                                </ng-template>
                                 </kendo-treeview>
 
                             </div>
@@ -2660,8 +2631,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 
                         <kendo-chiplist
                             *ngIf="state.columnAxes && state.columnAxes.length; else noColumnAxes"
+                            [navigable]="false"
                             #columnsChiplist
                             kendoDropTarget
+                            class="k-column-fields"
                             axes="columnAxes"
                             [style.width.%]="100"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('columns')"
@@ -2669,20 +2642,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         >
                             <ng-container *ngFor="let item of state.columnAxes">
                                 <kendo-chip *ngIf="item.name.length === 1"
+                                    #chip
                                     kendoChipDraggable
                                     kendoDraggable
                                     kendoDropTarget
                                     kendoChipKeyboardNavigation
                                     [item]="item"
+                                    [label]="getName(item.name)"
                                     axes="columnAxes"
-                                    rounded="full"
                                     [removable]="true"
+                                    [hasMenu]="true"
+                                    (menuToggle)="chipMenuColumns.toggle($event)"
                                     (remove)="onChipRemove($event, item, 'column')"
                                     (reorder)="onReorder($event, 'column', item)"
-                                >{{ getName(item.name) }}
+                                >
                                     <kendo-pivot-chip-menu
-                                        [chip]="item">
-                                    </kendo-pivot-chip-menu>
+                                        #chipMenuColumns
+                                        [chip]="item"
+                                        [anchor]="chip"
+                                    ></kendo-pivot-chip-menu>
                                 </kendo-chip>
                             </ng-container>
                         </kendo-chiplist>
@@ -2697,8 +2675,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 
                         <kendo-chiplist
                             *ngIf="state.rowAxes && state.rowAxes.length; else noRowAxes"
+                            [navigable]="false"
                             #rowsChiplist
                             kendoDropTarget
+                            class="k-row-fields"
                             axes="rowAxes"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('rows')"
                             [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
@@ -2706,22 +2686,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         >
                             <ng-container *ngFor="let item of state.rowAxes">
                                 <kendo-chip *ngIf="item.name.length === 1"
+                                    #chip
                                     kendoChipDraggable
                                     kendoDraggable
                                     kendoDropTarget
                                     kendoChipKeyboardNavigation
                                     [item]="item"
+                                    [label]="getName(item.name)"
                                     axes="rowAxes"
-                                    rounded="full"
                                     [removable]="true"
+                                    [hasMenu]="true"
+                                    (menuToggle)="chipMenuRows.toggle($event)"
                                     (remove)="onChipRemove($event, item, 'row')"
                                     (reorder)="onReorder($event, 'row', item)"
                                 >
-                                    {{ getName(item.name) }}
-    
                                     <kendo-pivot-chip-menu
-                                        [chip]="item">
-                                    </kendo-pivot-chip-menu>
+                                        #chipMenuRows
+                                        [chip]="item"
+                                        [anchor]="chip"
+                                    ></kendo-pivot-chip-menu>
                                 </kendo-chip>
                             </ng-container>
                         </kendo-chiplist>
@@ -2742,30 +2725,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 
                         <kendo-chiplist
                             *ngIf="state.measureAxes && state.measureAxes.length; else noMeasureAxes"
+                            [navigable]="false"
                             kendoDropTarget
+                            class="k-filter-fields"
                             axes="measureAxes"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('values')"
                             [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
                             [style.width.%]="100"
                         >
                             <kendo-chip *ngFor="let item of state.measureAxes"
+                                #chip
                                 kendoChipDraggable
                                 kendoDraggable
                                 kendoDropTarget
                                 kendoChipKeyboardNavigation
                                 [item]="item"
+                                [label]="getName(item.name)"
                                 axes="measureAxes"
-                                rounded="full"
                                 [removable]="true"
+                                [hasMenu]="true"
+                                (menuToggle)="chipMenuValues.toggle($event)"
                                 (remove)="onChipRemove($event, item, 'measure')"
                                 (reorder)="onReorder($event, 'measure', item)"
                                 >
-                                {{ getName(item.name) }}
-
-                                <kendo-pivot-chip-menu
-                                    [isMeasureField]="true"
-                                    [chip]="item">
-                                </kendo-pivot-chip-menu>
+                                    <kendo-pivot-chip-menu
+                                        #chipMenuValues
+                                        [chip]="item"
+                                        [anchor]="chip"
+                                    ></kendo-pivot-chip-menu>
                             </kendo-chip>
                         </kendo-chiplist>
 
@@ -2776,7 +2763,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     
                 </div>
             </div>
-            <div class="k-pivotgrid-configurator-actions k-actions k-hstack k-justify-content-end">
+            <div class="k-pivotgrid-configurator-actions k-actions k-actions-end k-actions-horizontal">
                 <button kendoButton type="button" (click)="handleReset()">{{messageFor('configuratorCancelButtonText')}}</button>
                 <button kendoButton themeColor="primary" type="button" (click)="handleSubmit()">{{messageFor('configuratorApplyButtonText')}}</button>
             </div>
@@ -2784,7 +2771,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
    `,
                     standalone: true,
                     imports: [
-                        NgClass, NgStyle, TreeViewComponent, ExpandDirective, NodeTemplateDirective, NgIf, CheckBoxDirective,
+                        NgClass, NgStyle, TreeViewComponent, ExpandDirective, CheckDirective, NodeTemplateDirective, NgIf, CheckBoxComponent,
                         NgTemplateOutlet, DropTargetDirective, ChipListComponent, NgFor, ChipComponent, DraggableChipDirective,
                         DraggableDirective, ChipKeyboardNavigationDirective, ChipMenuComponent, ButtonComponent
                     ]
@@ -3371,8 +3358,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-pivotgrid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1728914708,
-    version: '17.0.0-develop.2',
+    publishDate: 1729874461,
+    version: '17.0.0-develop.21',
     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'
 };
 
@@ -3666,9 +3653,10 @@ class PivotGridCellDirective {
         this.renderer.setAttribute(nativeElement, 'rowspan', this.kendoPivotGridCell.rowSpan || 1);
         this.renderer.setAttribute(nativeElement, 'colspan', this.kendoPivotGridCell.colSpan || 1);
         const classesToAdd = {
-            'k-pivotgrid-header-total': this.kendoPivotGridCell?.total || (this.tableType === 'values'
+            'k-pivotgrid-header-total': this.kendoPivotGridCell?.total,
+            'k-pivotgrid-total': this.tableType === 'values'
                 && (this.dataService.rowHeaderLeaves[this.rowIndex].total ||
-                    this.dataService.columnHeaderLeaves[this.colIndex].total)),
+                    this.dataService.columnHeaderLeaves[this.colIndex].total),
             'k-pivotgrid-header-root': this.kendoPivotGridCell?.levelNum === 0,
             'k-pivotgrid-expanded': this.kendoPivotGridCell?.hasChildren && this.kendoPivotGridCell.children.length,
             'k-first': this.colIndex > 0
@@ -3738,10 +3726,10 @@ PivotGridCellDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                 }">
             </ng-template>
             <!--default cell content-->
-            <span *ngIf="!customCellTemplate && isNotProvidedCellTemplatePerType">
+            <span *ngIf="!customCellTemplate && isNotProvidedCellTemplatePerType" [ngClass]="{'k-pivotgrid-header-title': !kendoPivotGridCell.data, 'k-pivotgrid-content': kendoPivotGridCell.data}">
                 {{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}
             </span>
-        `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridCellDirective, decorators: [{
             type: Component,
             args: [{
@@ -3804,12 +3792,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }">
             </ng-template>
             <!--default cell content-->
-            <span *ngIf="!customCellTemplate && isNotProvidedCellTemplatePerType">
+            <span *ngIf="!customCellTemplate && isNotProvidedCellTemplatePerType" [ngClass]="{'k-pivotgrid-header-title': !kendoPivotGridCell.data, 'k-pivotgrid-content': kendoPivotGridCell.data}">
                 {{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}
             </span>
         `,
                     standalone: true,
-                    imports: [NgIf, IconWrapperComponent, EventsOutsideAngularDirective, TemplateContextDirective]
+                    imports: [NgIf, IconWrapperComponent, EventsOutsideAngularDirective, TemplateContextDirective, NgClass]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: PivotGridDataService }]; }, propDecorators: { cellClass: [{
                 type: HostBinding,
@@ -4227,7 +4215,7 @@ class PivotGridComponent {
         this.scrollService.pivotGrid = this;
     }
     get rightPositionClass() {
-        return this.configuratorSettings?.position === 'right';
+        return !this.configuratorSettings || this.configuratorSettings.position === 'right';
     }
     get leftPositionClass() {
         return this.configuratorSettings?.position === 'left';
@@ -4555,7 +4543,7 @@ PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
             class="k-pivotgrid-configurator-button"
             aria-hidden="true"
             (click)="toggleConfigurator()">
-            <span>{{messageFor('configuratorButtonText')}}<kendo-icon-wrapper name="gear" innerCssClass="k-color-inherit" [svgIcon]="gearSVGIcon"></kendo-icon-wrapper>
+            <span>{{messageFor('configuratorButtonText')}}<kendo-icon-wrapper name="gear" [svgIcon]="gearSVGIcon"></kendo-icon-wrapper>
             </span>
         </div>
    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]" }, { kind: "component", type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType", "colWidth", "customCellTemplate", "valueCellTemplate", "rowHeaderCellTemplate", "columnHeaderCellTemplate", "scrollableSettings"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { kind: "component", type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: ["orientation", "sort", "filter", "navigation"], outputs: ["close"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
@@ -4728,7 +4716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             class="k-pivotgrid-configurator-button"
             aria-hidden="true"
             (click)="toggleConfigurator()">
-            <span>{{messageFor('configuratorButtonText')}}<kendo-icon-wrapper name="gear" innerCssClass="k-color-inherit" [svgIcon]="gearSVGIcon"></kendo-icon-wrapper>
+            <span>{{messageFor('configuratorButtonText')}}<kendo-icon-wrapper name="gear" [svgIcon]="gearSVGIcon"></kendo-icon-wrapper>
             </span>
         </div>
    `,