@progress/kendo-angular-pivotgrid 1.1.2-dev.202211281013 → 11.0.0-develop.79

package/{esm2015/configurator/chip-menu/chip-menu.service.js → esm2020/configurator/chip-menu/chip-menu.service.mjs}

@@ -1,7 +1,8 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { MenuTabbingService } from './filtering/menu-tabbing.service';
 import { Injectable, EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "./filtering/menu-tabbing.service";
@@ -21,8 +22,8 @@ export class ChipMenuService {
         this.closeMenu.emit();
     }
 }
-ChipMenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ChipMenuService, deps: [{ token: i1.MenuTabbingService }], target: i0.ɵɵFactoryTarget.Injectable });
-ChipMenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ChipMenuService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ChipMenuService, decorators: [{
+ChipMenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuService, deps: [{ token: i1.MenuTabbingService }], target: i0.ɵɵFactoryTarget.Injectable });
+ChipMenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.MenuTabbingService }]; } });

package/{esm2015/configurator/chip-menu/filtering/filter-menu-container.component.js → esm2020/configurator/chip-menu/filtering/filter-menu-container.component.mjs}

@@ -1,19 +1,21 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { MenuTabbingService } from './menu-tabbing.service';
-import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectorRef, ElementRef, ViewChild } from '@angular/core';
 import { isNullOrEmptyString } from "../../../util";
+import { PivotLocalizationService } from '../../../localization/pivot-localization.service';
+import { ConfiguratorService } from '../../configurator.service';
 import { PIVOT_CONFIGURATOR_ACTION } from '@progress/kendo-pivotgrid-common';
 import * as i0 from "@angular/core";
 import * as i1 from "../../../localization/pivot-localization.service";
 import * as i2 from "./menu-tabbing.service";
 import * as i3 from "../../configurator.service";
 import * as i4 from "./string-filter-menu.component";
-import * as i5 from "@angular/forms";
-import * as i6 from "@angular/common";
-import * as i7 from "@progress/kendo-angular-buttons";
+import * as i5 from "@progress/kendo-angular-buttons";
+import * as i6 from "@angular/forms";
+import * as i7 from "@angular/common";
 const isNoValueOperator = operator => (operator === "isnull"
     || operator === "isnotnull"
     || operator === "isempty"
@@ -31,8 +33,6 @@ export class FilterMenuContainerComponent {
         this.actionsClass = 'k-action-buttons k-button-group';
         this.menuTabbingService = menuTabbingService;
     }
-    ngOnInit() {
-    }
     ngAfterViewChecked() {
         if (!this.menuTabbingService.isColumnMenu || (this.isLast && this.isExpanded)) {
             this.menuTabbingService.lastFocusable = this.disabled ?
@@ -46,7 +46,10 @@ export class FilterMenuContainerComponent {
         return !(this.filterDescriptorValue && validFilter(this.filterDescriptorValue));
     }
     submit() {
-        const filterDescriptor = Object.assign({ field: this.chip.name.toString() }, this.filterDescriptorValue);
+        const filterDescriptor = {
+            field: this.chip.name.toString(),
+            ...this.filterDescriptorValue
+        };
         const payload = !this.configuratorService.state.filter ?
             [filterDescriptor] :
             [
@@ -81,14 +84,15 @@ export class FilterMenuContainerComponent {
         return this.localization.get(localizationToken);
     }
 }
-FilterMenuContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FilterMenuContainerComponent, deps: [{ token: i1.PivotLocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.MenuTabbingService }, { token: i3.ConfiguratorService }], target: i0.ɵɵFactoryTarget.Component });
-FilterMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FilterMenuContainerComponent, selector: "kendo-pivot-filter-menu-container", inputs: { chip: "chip", isLast: "isLast", isExpanded: "isExpanded", menuTabbingService: "menuTabbingService", actionsClass: "actionsClass" }, outputs: { close: "close" }, providers: [
+FilterMenuContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterMenuContainerComponent, deps: [{ token: i1.PivotLocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.MenuTabbingService }, { token: i3.ConfiguratorService }], target: i0.ɵɵFactoryTarget.Component });
+FilterMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FilterMenuContainerComponent, selector: "kendo-pivot-filter-menu-container", inputs: { chip: "chip", isLast: "isLast", isExpanded: "isExpanded", menuTabbingService: "menuTabbingService", actionsClass: "actionsClass" }, outputs: { close: "close" }, providers: [
         MenuTabbingService
     ], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "filterButton", first: true, predicate: ["filterButton"], descendants: true }], ngImport: i0, template: `
         <form (submit)="submit()" (reset)="reset()"
             class="k-filter-menu k-group k-reset k-state-border-up">
             <div class="k-filter-menu-container">
                 <kendo-pivot-string-filter-menu
+                    [style]="'display: flex; flex-flow: column nowrap; align-items: stretch; gap: 8px;'"
                     [(ngModel)]="filterDescriptorValue"
                     name="'filterDescriptorValue'"
                     [chip]="chip"
@@ -109,8 +113,8 @@ FilterMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 </div>
             </div>
         </form>
-    `, isInline: true, styles: ["\n        kendo-pivot-string-filter-menu {\n            display: flex;\n            flex-flow: column nowrap;\n            align-items: stretch;\n            gap: 8px;\n        }\n    "], components: [{ type: i4.StringFilterMenuComponent, selector: "kendo-pivot-string-filter-menu", inputs: ["chip", "menuTabbingService"] }], directives: [{ type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FilterMenuContainerComponent, decorators: [{
+    `, isInline: true, components: [{ type: i4.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: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.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: [{
                     providers: [
@@ -122,6 +126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             class="k-filter-menu k-group k-reset k-state-border-up">
             <div class="k-filter-menu-container">
                 <kendo-pivot-string-filter-menu
+                    [style]="'display: flex; flex-flow: column nowrap; align-items: stretch; gap: 8px;'"
                     [(ngModel)]="filterDescriptorValue"
                     name="'filterDescriptorValue'"
                     [chip]="chip"
@@ -142,15 +147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 </div>
             </div>
         </form>
-    `,
-                    styles: [`
-        kendo-pivot-string-filter-menu {
-            display: flex;
-            flex-flow: column nowrap;
-            align-items: stretch;
-            gap: 8px;
-        }
-    `]
+    `
                 }]
         }], ctorParameters: function () { return [{ type: i1.PivotLocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.MenuTabbingService }, { type: i3.ConfiguratorService }]; }, propDecorators: { close: [{
                 type: Output

package/{esm2015/configurator/chip-menu/filtering/filter-menu-dropdownlist.directive.js → esm2020/configurator/chip-menu/filtering/filter-menu-dropdownlist.directive.mjs}

@@ -1,7 +1,8 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
 import { Directive, Input } from '@angular/core';
 import { Keys } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
@@ -28,9 +29,9 @@ export class FilterMenuDropDownListDirective {
         this.host.wrapper.nativeElement.removeEventListener('keydown', this.keydownHandler);
     }
 }
-FilterMenuDropDownListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FilterMenuDropDownListDirective, deps: [{ token: i1.DropDownListComponent }], target: i0.ɵɵFactoryTarget.Directive });
-FilterMenuDropDownListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: { filterMenuDropDownLabel: "filterMenuDropDownLabel" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FilterMenuDropDownListDirective, decorators: [{
+FilterMenuDropDownListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterMenuDropDownListDirective, deps: [{ token: i1.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.DropDownListComponent }]; }, propDecorators: { filterMenuDropDownLabel: [{

package/{esm2015/configurator/chip-menu/filtering/menu-tabbing.service.js → esm2020/configurator/chip-menu/filtering/menu-tabbing.service.mjs}

@@ -1,5 +1,5 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Injectable } from '@angular/core';
@@ -13,8 +13,8 @@ export class MenuTabbingService {
         this.isPopupOpen = false;
     }
 }
-MenuTabbingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MenuTabbingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-MenuTabbingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MenuTabbingService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MenuTabbingService, decorators: [{
+MenuTabbingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuTabbingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MenuTabbingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuTabbingService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuTabbingService, decorators: [{
             type: Injectable
         }] });

package/{esm2015/configurator/chip-menu/filtering/string-filter-menu.component.js → esm2020/configurator/chip-menu/filtering/string-filter-menu.component.mjs}

@@ -1,9 +1,12 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { MenuTabbingService } from './menu-tabbing.service';
 import { Component, Input, forwardRef } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { PivotLocalizationService } from '../../../localization/pivot-localization.service';
+import { FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ConfiguratorService } from '../../configurator.service';
 import { Subscription } from 'rxjs';
 import { replaceMessagePlaceholder } from '../../../util';
 import * as i0 from "@angular/core";
@@ -43,11 +46,11 @@ export class StringFilterMenuComponent {
         this.configuratorService = configuratorService;
         this.fb = fb;
         this.subscription = new Subscription();
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onTouched = () => { };
     }
     get currentFilter() {
-        var _a;
-        const filterValue = (_a = this.configuratorService.state.filter) === null || _a === void 0 ? void 0 : _a.filter(x => x.field === this.chip.name.toString());
+        const filterValue = this.configuratorService.state.filter?.filter(x => x.field === this.chip.name.toString());
         return filterValue && filterValue[0];
     }
     registerOnChange(fn) {
@@ -77,8 +80,8 @@ export class StringFilterMenuComponent {
         this.subscription.unsubscribe();
     }
 }
-StringFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: StringFilterMenuComponent, deps: [{ token: i1.PivotLocalizationService }, { token: i2.ConfiguratorService }, { token: i3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StringFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: StringFilterMenuComponent, selector: "kendo-pivot-string-filter-menu", inputs: { chip: "chip", menuTabbingService: "menuTabbingService" }, providers: [{
+StringFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringFilterMenuComponent, deps: [{ token: i1.PivotLocalizationService }, { token: i2.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),
             multi: true
@@ -98,8 +101,8 @@ StringFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                     formControlName="value"
                 />
         </ng-container>
-    `, isInline: true, components: [{ type: i4.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: i5.FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "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: "12.2.17", ngImport: i0, type: StringFilterMenuComponent, decorators: [{
+    `, isInline: true, components: [{ type: i4.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: i5.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: [{
                     selector: 'kendo-pivot-string-filter-menu',

package/{esm2015/configurator/chip-menu/single-popup.service.js → esm2020/configurator/chip-menu/single-popup.service.mjs}

@@ -1,10 +1,12 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Injectable } from '@angular/core';
+import { PopupService } from '@progress/kendo-angular-popup';
+import { Injectable, Renderer2, NgZone } from '@angular/core';
 import { Subject, Subscription } from 'rxjs';
 import { PreventableEvent } from '@progress/kendo-angular-common';
+import { PivotLocalizationService } from '../../localization/pivot-localization.service';
 import { isPresent } from '../../util';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-popup";
@@ -48,7 +50,6 @@ export class SinglePopupService {
         this.scrollSubscription = new Subscription();
     }
     open(anchor, template, popupRef, popupClass = DEFAULT_POPUP_CLASS) {
-        var _a;
         const toggle = isPresent(popupRef) && this.popupRef === popupRef;
         this.destroy();
         if (!toggle) {
@@ -64,7 +65,7 @@ export class SinglePopupService {
             this.renderer.setAttribute(this.popupRef.popupElement, 'dir', this.localization.rtl ? 'rtl' : 'ltr');
             this.attachClose(anchor);
         }
-        const popupEl = (_a = this.popupRef) === null || _a === void 0 ? void 0 : _a.popupElement;
+        const popupEl = this.popupRef?.popupElement;
         if (popupEl) {
             this.attachMouseListeners(popupEl);
         }
@@ -114,8 +115,8 @@ export class SinglePopupService {
         });
     }
 }
-SinglePopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SinglePopupService, deps: [{ token: i1.PopupService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i2.PivotLocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
-SinglePopupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SinglePopupService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SinglePopupService, decorators: [{
+SinglePopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SinglePopupService, deps: [{ token: i1.PopupService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i2.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.PopupService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i2.PivotLocalizationService }]; } });

package/{esm2015/configurator/configurator.component.js → esm2020/configurator/configurator.component.mjs}

@@ -1,15 +1,19 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, EventEmitter, HostBinding, Input, Output, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, NgZone, Output, ViewChild } from '@angular/core';
+import { ConfiguratorNavigation } from '@progress/kendo-pivotgrid-common';
 import { TreeViewComponent } from '@progress/kendo-angular-treeview';
+import { PivotGridDataService } from '../data-binding/pivotgrid-data.service';
 import { ConfiguratorService } from './configurator.service';
 import { DropCueService } from './drop-cue.service';
 import { from, of, Subscription } from 'rxjs';
 import { mergeMap } from 'rxjs/operators';
 import { clone, swapItems } from '../util';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { SinglePopupService } from './chip-menu/single-popup.service';
+import { ChipListComponent } from '@progress/kendo-angular-buttons';
 import * as i0 from "@angular/core";
 import * as i1 from "../data-binding/pivotgrid-data.service";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -69,7 +73,7 @@ export class PivotGridConfiguratorComponent {
         }));
         this.subs.add(this.dataService.configuredFields
             .subscribe(res => {
-            const normalizedState = clone(Object.assign(Object.assign({}, this.dataService.state), { dragItem: res.dragItem, dropTarget: res.dropTarget, dropZone: res.dropZone, dropDirection: res.dropDirection }));
+            const normalizedState = clone({ ...this.dataService.state, dragItem: res.dragItem, dropTarget: res.dropTarget, dropZone: res.dropZone, dropDirection: res.dropDirection });
             this.originalState = normalizedState;
             this.setState(normalizedState);
             this.setChecked();
@@ -94,7 +98,7 @@ export class PivotGridConfiguratorComponent {
         this.subs.unsubscribe();
     }
     ngOnChanges(changes) {
-        if (changes.orientation) {
+        if (changes['orientation']) {
             this.configuratorService.orientation = this.orientation;
         }
     }
@@ -177,7 +181,7 @@ export class PivotGridConfiguratorComponent {
     onChipRemove(ev, item, section) {
         const filteredItems = this.dataService.state[`${section}Axes`].filter(descriptor => descriptor !== item);
         this.dataService.state[`${section}Axes`] = filteredItems;
-        const newState = Object.assign(Object.assign({}, this.state), this.dataService.state);
+        const newState = { ...this.state, ...this.dataService.state };
         this.checked = this.checked.filter(checkedItem => checkedItem.uniqueName !== item.name[0]);
         this.setState(newState);
         if (!this.navigation) {
@@ -205,11 +209,10 @@ export class PivotGridConfiguratorComponent {
      * A function which determines if a specific node is checked/
      */
     isItemChecked(node) {
-        var _a, _b;
         const res = this.checked.some(s => node.defaultHierarchy
             ? s.defaultHierarchy === node.defaultHierarchy
             : s.uniqueName === node.uniqueName)
-            || (((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) && ((_b = node.children) === null || _b === void 0 ? void 0 : _b.every((c) => c.checked)));
+            || (node.children?.length && node.children?.every((c) => c.checked));
         return res || null;
     }
     /**
@@ -217,7 +220,7 @@ export class PivotGridConfiguratorComponent {
      */
     isSelectable(node) {
         const hasChildren = !('hierarchyUniqueName' in node) && !('aggregator' in node);
-        return !Boolean((!hasChildren && !node.aggregator && !node.measure)
+        return !((!hasChildren && !node.aggregator && !node.measure)
             || (node.type === 2)
             || node.uniqueName === '[KPIs]');
     }
@@ -249,10 +252,9 @@ export class PivotGridConfiguratorComponent {
         this.zone.runOutsideAngular(() => setTimeout(() => closestItem.focus()));
     }
     onTreeViewSelect(ev) {
-        var _a;
         const closestItem = ev.target.closest('.k-treeview-item');
         if (closestItem) {
-            (_a = closestItem.querySelector('.k-checkbox')) === null || _a === void 0 ? void 0 : _a.click();
+            closestItem.querySelector('.k-checkbox')?.click();
         }
     }
     onTreeViewEscape(ev) {
@@ -297,7 +299,7 @@ export class PivotGridConfiguratorComponent {
         const targetIndex = itemIndex + (direction === 'right' ? 1 : -1);
         swapItems(collection, itemIndex, targetIndex);
         this.dataService.state[`${name}Axes`] = collection;
-        const newState = Object.assign(Object.assign({}, this.state), this.dataService.state);
+        const newState = { ...this.state, ...this.dataService.state };
         this.setState(newState);
         this.cdr.detectChanges();
     }
@@ -305,21 +307,20 @@ export class PivotGridConfiguratorComponent {
      * Moves a chip from one ChipList to another
      */
     moveChip(collection, item, itemIndex, name) {
-        var _a;
         collection.splice(itemIndex, 1);
         const targetCollectionName = name === 'row' ? 'column' : 'row';
         const axes = this.state[`${targetCollectionName}Axes`];
         axes.push(item);
         this.dataService.state[`${name}Axes`] = collection;
         this.dataService.state[targetCollectionName] = axes;
-        const newState = Object.assign(Object.assign({}, this.state), this.dataService.state);
+        const newState = { ...this.state, ...this.dataService.state };
         this.setState(newState);
         this.cdr.detectChanges();
-        (_a = this[`${targetCollectionName}sList`]) === null || _a === void 0 ? void 0 : _a.chips.last.focus();
+        this[`${targetCollectionName}sList`]?.chips.last.focus();
     }
 }
-PivotGridConfiguratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PivotGridConfiguratorComponent, deps: [{ token: i1.PivotGridDataService }, { token: i2.LocalizationService }, { token: i3.ConfiguratorService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: { orientation: "orientation", sort: "sort", filter: "filter", navigation: "navigation" }, outputs: { close: "close" }, host: { properties: { "class.k-pivotgrid-configurator": "this.hostClass", "attr.role": "this.hostAriaRole", "attr.aria-labelledby": "this.headerTextId" } }, providers: [
+PivotGridConfiguratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotGridConfiguratorComponent, deps: [{ token: i1.PivotGridDataService }, { token: i2.LocalizationService }, { token: i3.ConfiguratorService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: { orientation: "orientation", sort: "sort", filter: "filter", navigation: "navigation" }, outputs: { close: "close" }, host: { properties: { "class.k-pivotgrid-configurator": "this.hostClass", "attr.role": "this.hostAriaRole", "attr.aria-labelledby": "this.headerTextId" } }, providers: [
         ConfiguratorService,
         DropCueService,
         SinglePopupService
@@ -339,11 +340,11 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
 
             <div class="k-pivotgrid-configurator-content">
                 <div class="k-form" [class.k-form-horizontal]="isHorizontal">
-                    <div class="k-form-field-wrapper">
-                        <div class="k-form-field">
+                    <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>
                         </div>
-                        <div class="k-form-field">
+                        <div class="k-form-field" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
                             <div class="k-fields-list-wrapper">
                                 <kendo-treeview
                                     #treeview
@@ -372,12 +373,12 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                         </div>
                     </div>
 
-                    <div *ngIf="isHorizontal; else verticalTemplate" class="k-form-field-wrapper">
+                    <div *ngIf="isHorizontal; else verticalTemplate" class="k-form-field-wrapper" [ngStyle]="isHorizontal ? {'padding-left': 0 } : null">
                         <ng-container *ngTemplateOutlet="verticalTemplate"></ng-container>
                     </div>
 
                     <ng-template #verticalTemplate>
-                        <div class="k-form-field" kendoDropTarget axes="columnAxes">
+                        <div class="k-form-field" kendoDropTarget axes="columnAxes" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
                             <span [id]="contentLabelId('columns')" class="k-label">{{messageFor('configuratorColumnsText')}}</span>
                         </div>
 
@@ -387,6 +388,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                             kendoDropTarget
                             axes="columnAxes"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('columns')"
+                            [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
                         >
                             <ng-container *ngFor="let item of state.columnAxes">
                                 <kendo-chip *ngIf="item.name.length === 1"
@@ -412,7 +414,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                             <div class="k-settings-description" kendoDropTarget axes="columnAxes">{{messageFor('configuratorEmptyColumnsText')}}</div>
                         </ng-template>
 
-                        <div class="k-form-field" kendoDropTarget axes="rowAxes">
+                        <div class="k-form-field" kendoDropTarget axes="rowAxes" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
                             <span [id]="contentLabelId('rows')" class="k-label">{{messageFor('configuratorRowsText')}}</span>
                         </div>
 
@@ -422,6 +424,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                             kendoDropTarget
                             axes="rowAxes"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('rows')"
+                            [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
                         >
                             <ng-container *ngFor="let item of state.rowAxes">
                                 <kendo-chip *ngIf="item.name.length === 1"
@@ -450,12 +453,12 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                         </ng-template>
                     </ng-template>
 
-                    <div *ngIf="isHorizontal; else verticalMeasuresTemplate" class="k-form-field-wrapper">
+                    <div *ngIf="isHorizontal; else verticalMeasuresTemplate" class="k-form-field-wrapper" [ngStyle]="isHorizontal ? {'padding-left': 0 } : null" >
                         <ng-container *ngTemplateOutlet="verticalMeasuresTemplate"></ng-container>
                     </div>
 
                     <ng-template #verticalMeasuresTemplate>
-                        <div class="k-form-field" kendoDropTarget axes="measureAxes">
+                        <div class="k-form-field" kendoDropTarget axes="measureAxes" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
                             <span [id]="contentLabelId('values')" class="k-label">{{messageFor('configuratorValuesText')}}</span>
                         </div>
 
@@ -464,6 +467,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                             kendoDropTarget
                             axes="measureAxes"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('values')"
+                            [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
                         >
                             <kendo-chip *ngFor="let item of state.measureAxes"
                                 kendoChipDraggable
@@ -493,8 +497,8 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 <button kendoButton themeColor="primary" type="button" (click)="handleSubmit()">{{messageFor('configuratorApplyButtonText')}}</button>
             </div>
         </div>
-   `, isInline: true, styles: ["\n        .k-form .k-chip-list {\n            width: 100%;\n        }\n\n        .k-form .k-form-field,\n        .k-form .k-settings-description {\n            padding-top: 1em;\n            margin-top: 0;\n        }\n\n        .k-form.k-form-horizontal .k-form-field,\n        .k-form.k-form-horizontal .k-chip-list {\n            padding-top: 0;\n            padding-left: 16px;\n        }\n\n        .k-form.k-form-horizontal .k-form-field-wrapper {\n            padding-left: 0;\n        }\n   "], 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", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }, { type: i6.ChipMenuComponent, selector: "kendo-pivot-chip-menu", inputs: ["chip", "tabIndex"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i8.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["item", "axes"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: ["item"] }, { type: i11.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i12.ChipKeyboardNavigationDirective, selector: "[kendoChipKeyboardNavigation]", outputs: ["reorder"] }, { type: i5.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PivotGridConfiguratorComponent, decorators: [{
+   `, 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: i6.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: i8.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["item", "axes"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: ["item"] }, { type: i11.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i12.ChipKeyboardNavigationDirective, selector: "[kendoChipKeyboardNavigation]", outputs: ["reorder"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotGridConfiguratorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-pivotgrid-configurator',
@@ -519,11 +523,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 
             <div class="k-pivotgrid-configurator-content">
                 <div class="k-form" [class.k-form-horizontal]="isHorizontal">
-                    <div class="k-form-field-wrapper">
-                        <div class="k-form-field">
+                    <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>
                         </div>
-                        <div class="k-form-field">
+                        <div class="k-form-field" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
                             <div class="k-fields-list-wrapper">
                                 <kendo-treeview
                                     #treeview
@@ -552,12 +556,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         </div>
                     </div>
 
-                    <div *ngIf="isHorizontal; else verticalTemplate" class="k-form-field-wrapper">
+                    <div *ngIf="isHorizontal; else verticalTemplate" class="k-form-field-wrapper" [ngStyle]="isHorizontal ? {'padding-left': 0 } : null">
                         <ng-container *ngTemplateOutlet="verticalTemplate"></ng-container>
                     </div>
 
                     <ng-template #verticalTemplate>
-                        <div class="k-form-field" kendoDropTarget axes="columnAxes">
+                        <div class="k-form-field" kendoDropTarget axes="columnAxes" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
                             <span [id]="contentLabelId('columns')" class="k-label">{{messageFor('configuratorColumnsText')}}</span>
                         </div>
 
@@ -567,6 +571,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                             kendoDropTarget
                             axes="columnAxes"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('columns')"
+                            [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
                         >
                             <ng-container *ngFor="let item of state.columnAxes">
                                 <kendo-chip *ngIf="item.name.length === 1"
@@ -592,7 +597,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                             <div class="k-settings-description" kendoDropTarget axes="columnAxes">{{messageFor('configuratorEmptyColumnsText')}}</div>
                         </ng-template>
 
-                        <div class="k-form-field" kendoDropTarget axes="rowAxes">
+                        <div class="k-form-field" kendoDropTarget axes="rowAxes" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
                             <span [id]="contentLabelId('rows')" class="k-label">{{messageFor('configuratorRowsText')}}</span>
                         </div>
 
@@ -602,6 +607,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                             kendoDropTarget
                             axes="rowAxes"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('rows')"
+                            [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
                         >
                             <ng-container *ngFor="let item of state.rowAxes">
                                 <kendo-chip *ngIf="item.name.length === 1"
@@ -630,12 +636,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         </ng-template>
                     </ng-template>
 
-                    <div *ngIf="isHorizontal; else verticalMeasuresTemplate" class="k-form-field-wrapper">
+                    <div *ngIf="isHorizontal; else verticalMeasuresTemplate" class="k-form-field-wrapper" [ngStyle]="isHorizontal ? {'padding-left': 0 } : null" >
                         <ng-container *ngTemplateOutlet="verticalMeasuresTemplate"></ng-container>
                     </div>
 
                     <ng-template #verticalMeasuresTemplate>
-                        <div class="k-form-field" kendoDropTarget axes="measureAxes">
+                        <div class="k-form-field" kendoDropTarget axes="measureAxes" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
                             <span [id]="contentLabelId('values')" class="k-label">{{messageFor('configuratorValuesText')}}</span>
                         </div>
 
@@ -644,6 +650,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                             kendoDropTarget
                             axes="measureAxes"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('values')"
+                            [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
                         >
                             <kendo-chip *ngFor="let item of state.measureAxes"
                                 kendoChipDraggable
@@ -673,28 +680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 <button kendoButton themeColor="primary" type="button" (click)="handleSubmit()">{{messageFor('configuratorApplyButtonText')}}</button>
             </div>
         </div>
-   `,
-                    styles: [`
-        .k-form .k-chip-list {
-            width: 100%;
-        }
-
-        .k-form .k-form-field,
-        .k-form .k-settings-description {
-            padding-top: 1em;
-            margin-top: 0;
-        }
-
-        .k-form.k-form-horizontal .k-form-field,
-        .k-form.k-form-horizontal .k-chip-list {
-            padding-top: 0;
-            padding-left: 16px;
-        }
-
-        .k-form.k-form-horizontal .k-form-field-wrapper {
-            padding-left: 0;
-        }
-   `]
+   `
                 }]
         }], ctorParameters: function () { return [{ type: i1.PivotGridDataService }, { type: i2.LocalizationService }, { type: i3.ConfiguratorService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,