@progress/kendo-angular-pivotgrid 17.0.0-develop.4 → 17.0.0-develop.41

package/{esm2020 → esm2022}/configurator/chip-menu/chip-menu-item.component.mjs

@@ -14,24 +14,49 @@ import * as i0 from "@angular/core";
  *
  */
 export class ChipMenuItemComponent {
-    constructor() {
-        /**
-         * Fires when the item is clicked.
-         */
-        this.itemClick = new EventEmitter();
-        /**
-         * Fires when the content is expanded.
-         */
-        this.expand = new EventEmitter();
-        /**
-         * Fires when the content is collapsed.
-         */
-        this.collapse = new EventEmitter();
-        this.contentState = 'collapsed';
-    }
+    /**
+     * Fires when the item is clicked.
+     */
+    itemClick = new EventEmitter();
+    /**
+     * Fires when the content is expanded.
+     */
+    expand = new EventEmitter();
+    /**
+     * Fires when the content is collapsed.
+     */
+    collapse = new EventEmitter();
+    /**
+     * Specifies the name of the [font icon]({% slug icons %}#toc-list-of-font-icons)
+     * that will be rendered for the item.
+     */
+    icon;
+    /**
+     * Defines an SVGIcon to be rendered for the column menu items.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    svgIcon;
+    /**
+     * Specifies the item text.
+     */
+    text;
+    /**
+     * Specifies if the item is selected.
+     */
+    selected;
+    /**
+     * Specifies if the item is expanded.
+     */
+    expanded;
+    /**
+     * Specified if the item is disabled
+     */
+    disabled;
+    contentTemplate;
     get iconClass() {
         return `k-i-${this.icon}`;
     }
+    contentState = 'collapsed';
     ngOnChanges(changes) {
         if (changes.expanded) {
             this.updateContentState();
@@ -53,9 +78,8 @@ export class ChipMenuItemComponent {
     updateContentState() {
         this.contentState = this.expanded ? 'expanded' : 'collapsed';
     }
-}
-ChipMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChipMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChipMenuItemComponent, isStandalone: true, selector: "kendo-pivot-chipmenu-item", inputs: { icon: "icon", svgIcon: "svgIcon", text: "text", selected: "selected", expanded: "expanded", disabled: "disabled" }, outputs: { itemClick: "itemClick", expand: "expand", collapse: "collapse" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ChipMenuItemContentTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChipMenuItemComponent, isStandalone: true, selector: "kendo-pivot-chipmenu-item", inputs: { icon: "icon", svgIcon: "svgIcon", text: "text", selected: "selected", expanded: "expanded", disabled: "disabled" }, outputs: { itemClick: "itemClick", expand: "expand", collapse: "collapse" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ChipMenuItemContentTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <div
             class="k-columnmenu-item"
             (click)="onClick($event)"
@@ -77,29 +101,30 @@ ChipMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             <ng-container [ngTemplateOutlet]="contentTemplate.templateRef"></ng-container>
         <div>
     `, 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
-        trigger('state', [
-            state('collapsed', style({ display: 'none' })),
-            state('expanded', style({ display: 'block' })),
-            transition('collapsed => expanded', [
-                style({
-                    height: '0px',
-                    display: 'block'
-                }),
-                animate('100ms ease-in', style({
-                    height: '*'
-                }))
-            ]),
-            transition('expanded => collapsed', [
-                style({
-                    height: '*'
-                }),
-                animate('100ms ease-in', style({
-                    height: '0px'
-                }))
+            trigger('state', [
+                state('collapsed', style({ display: 'none' })),
+                state('expanded', style({ display: 'block' })),
+                transition('collapsed => expanded', [
+                    style({
+                        height: '0px',
+                        display: 'block'
+                    }),
+                    animate('100ms ease-in', style({
+                        height: '*'
+                    }))
+                ]),
+                transition('expanded => collapsed', [
+                    style({
+                        height: '*'
+                    }),
+                    animate('100ms ease-in', style({
+                        height: '0px'
+                    }))
+                ])
             ])
-        ])
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuItemComponent, decorators: [{
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuItemComponent, decorators: [{
             type: Component,
             args: [{
                     animations: [

package/{esm2020 → esm2022}/configurator/chip-menu/chip-menu-item.directive.mjs

@@ -10,31 +10,12 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class ChipMenuItemDirective {
-    constructor(hostElement, renderer, ngZone) {
-        this.hostElement = hostElement;
-        this.renderer = renderer;
-        this.ngZone = ngZone;
-        this._isFirst = false;
-        this._isLast = false;
-        this.subs = new Subscription();
-        this.onTab = (e) => {
-            if (e.keyCode !== Keys.Tab) {
-                return;
-            }
-            if (this.isFirst && e.shiftKey && e.target === this.chipMenuItems[0]) {
-                e.preventDefault();
-                this.menuItemComponent.service.menuTabbingService.lastFocusable.focus();
-            }
-            if (this.isLast && !e.shiftKey) {
-                const lastColumnMenuItem = this.getLastColumnMenuItem();
-                const isExpanded = this.menuItemComponent.expanded;
-                if (lastColumnMenuItem === e.target && !isExpanded) {
-                    e.preventDefault();
-                    this.menuItemComponent.service.menuTabbingService.firstFocusable.focus();
-                }
-            }
-        };
-    }
+    hostElement;
+    renderer;
+    ngZone;
+    menuItemComponent;
+    firstFocusableElement;
+    lastFocusableElement;
     set isFirst(value) {
         if (value) {
             const focusableElement = this.chipMenuItems[0];
@@ -66,6 +47,15 @@ export class ChipMenuItemDirective {
     get isLast() {
         return this._isLast;
     }
+    _isFirst = false;
+    _isLast = false;
+    chipMenuItems;
+    subs = new Subscription();
+    constructor(hostElement, renderer, ngZone) {
+        this.hostElement = hostElement;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+    }
     ngAfterViewInit() {
         this.chipMenuItems = this.hostElement.nativeElement.querySelectorAll('.k-columnmenu-item');
         this.chipMenuItems.forEach(el => this.renderer.setAttribute(el, 'tabindex', '0'));
@@ -73,13 +63,30 @@ export class ChipMenuItemDirective {
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
+    onTab = (e) => {
+        if (e.keyCode !== Keys.Tab) {
+            return;
+        }
+        if (this.isFirst && e.shiftKey && e.target === this.chipMenuItems[0]) {
+            e.preventDefault();
+            this.menuItemComponent.service.menuTabbingService.lastFocusable.focus();
+        }
+        if (this.isLast && !e.shiftKey) {
+            const lastColumnMenuItem = this.getLastColumnMenuItem();
+            const isExpanded = this.menuItemComponent.expanded;
+            if (lastColumnMenuItem === e.target && !isExpanded) {
+                e.preventDefault();
+                this.menuItemComponent.service.menuTabbingService.firstFocusable.focus();
+            }
+        }
+    };
     getLastColumnMenuItem() {
         return this.chipMenuItems[this.chipMenuItems.length - 1];
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuItemDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ChipMenuItemDirective, isStandalone: true, selector: "[kendoPivotChipMenuItem]", inputs: { menuItemComponent: ["kendoPivotChipMenuItem", "menuItemComponent"] }, ngImport: i0 });
 }
-ChipMenuItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuItemDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-ChipMenuItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ChipMenuItemDirective, isStandalone: true, selector: "[kendoPivotChipMenuItem]", inputs: { menuItemComponent: ["kendoPivotChipMenuItem", "menuItemComponent"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPivotChipMenuItem]',

package/{esm2020 → esm2022}/configurator/chip-menu/chip-menu-reorder.component.mjs

@@ -21,21 +21,18 @@ import * as i3 from "../../data-binding/pivotgrid-data.service";
  * Represents a chip-menu item for reordering PivotGrid fields.
  */
 export class ChipMenuReorderComponent extends ChipMenuItemBase {
-    constructor(localization, renderer, configuratorService, dataService, cdr, ngZone) {
-        super();
-        this.localization = localization;
-        this.renderer = renderer;
-        this.configuratorService = configuratorService;
-        this.dataService = dataService;
-        this.cdr = cdr;
-        this.ngZone = ngZone;
-        this.columnsIcon = columnsIcon;
-        this.rowsIcon = rowsIcon;
-        this.arrowLeftIcon = arrowLeftIcon;
-        this.arrowRightIcon = arrowRightIcon;
-        this.rtl = false;
-        this.subs = this.localization.localization.changes.subscribe(({ rtl }) => this.rtl = rtl);
-    }
+    localization;
+    renderer;
+    configuratorService;
+    dataService;
+    cdr;
+    ngZone;
+    chip;
+    columnsIcon = columnsIcon;
+    rowsIcon = rowsIcon;
+    arrowLeftIcon = arrowLeftIcon;
+    arrowRightIcon = arrowRightIcon;
+    rtl = false;
     get isColumnsField() {
         return this.configuratorService.state.columnAxes.some(item => item === this.chip);
     }
@@ -57,6 +54,17 @@ export class ChipMenuReorderComponent extends ChipMenuItemBase {
             this.isRowsField && state.rowAxes[state.rowAxes.length - 1] === this.chip ||
             this.isMeasureField && state.measureAxes[state.measureAxes.length - 1] === this.chip;
     }
+    subs;
+    constructor(localization, renderer, configuratorService, dataService, cdr, ngZone) {
+        super();
+        this.localization = localization;
+        this.renderer = renderer;
+        this.configuratorService = configuratorService;
+        this.dataService = dataService;
+        this.cdr = cdr;
+        this.ngZone = ngZone;
+        this.subs = this.localization.localization.changes.subscribe(({ rtl }) => this.rtl = rtl);
+    }
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
@@ -109,9 +117,8 @@ export class ChipMenuReorderComponent extends ChipMenuItemBase {
         }
         this.close();
     }
-}
-ChipMenuReorderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuReorderComponent, deps: [{ token: i1.PivotLocalizationService }, { token: i0.Renderer2 }, { token: i2.ConfiguratorService }, { token: i3.PivotGridDataService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ChipMenuReorderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChipMenuReorderComponent, isStandalone: true, selector: "kendo-pivot-chipmenu-reorder", inputs: { chip: "chip" }, usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuReorderComponent, deps: [{ token: i1.PivotLocalizationService }, { token: i0.Renderer2 }, { token: i2.ConfiguratorService }, { token: i3.PivotGridDataService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChipMenuReorderComponent, isStandalone: true, selector: "kendo-pivot-chipmenu-reorder", inputs: { chip: "chip" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-pivot-chipmenu-item
             *ngIf="!isMeasureField"
             [disabled]="isColumnsField"
@@ -143,7 +150,8 @@ ChipMenuReorderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
             (itemClick)="move($event, 'next')">
         </kendo-pivot-chipmenu-item>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "expanded", "disabled"], outputs: ["itemClick", "expand", "collapse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuReorderComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuReorderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-pivot-chipmenu-reorder',

package/{esm2020 → esm2022}/configurator/chip-menu/chip-menu-sort.component.mjs

@@ -19,13 +19,17 @@ import * as i2 from "../configurator.service";
  * Allows the user to sort the PivotGrid.
  */
 export class ChipMenuSortComponent extends ChipMenuItemBase {
+    localization;
+    renderer;
+    configuratorService;
+    chip;
+    sortAscSVGIcon = sortAscSmallIcon;
+    sortDescSVGIcon = sortDescSmallIcon;
     constructor(localization, renderer, configuratorService) {
         super();
         this.localization = localization;
         this.renderer = renderer;
         this.configuratorService = configuratorService;
-        this.sortAscSVGIcon = sortAscSmallIcon;
-        this.sortDescSVGIcon = sortDescSmallIcon;
     }
     get sortedAsc() {
         const descriptor = this.descriptor;
@@ -54,9 +58,8 @@ export class ChipMenuSortComponent extends ChipMenuItemBase {
     get descriptor() {
         return [].concat(this.configuratorService.state.sort || []).find(s => s.field === this.chip.name.toString());
     }
-}
-ChipMenuSortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuSortComponent, deps: [{ token: i1.PivotLocalizationService }, { token: i0.Renderer2 }, { token: i2.ConfiguratorService }], target: i0.ɵɵFactoryTarget.Component });
-ChipMenuSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChipMenuSortComponent, isStandalone: true, selector: "kendo-pivot-chipmenu-sort", inputs: { chip: "chip" }, usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuSortComponent, deps: [{ token: i1.PivotLocalizationService }, { token: i0.Renderer2 }, { token: i2.ConfiguratorService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChipMenuSortComponent, isStandalone: true, selector: "kendo-pivot-chipmenu-sort", inputs: { chip: "chip" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-pivot-chipmenu-item
             [text]="messageFor('fieldMenuSortAscendingItemLabel')"
             icon="sort-asc-small"
@@ -72,7 +75,8 @@ ChipMenuSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             [selected]="sortedDesc">
         </kendo-pivot-chipmenu-item>
     `, isInline: true, dependencies: [{ kind: "component", type: ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "expanded", "disabled"], outputs: ["itemClick", "expand", "collapse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuSortComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuSortComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-pivot-chipmenu-sort',

package/{esm2020 → esm2022}/configurator/chip-menu/chip-menu.component.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { MenuTabbingService } from './filtering/menu-tabbing.service';
-import { Component, Input, ElementRef, ViewChild, Renderer2 } from '@angular/core';
+import { Component, Input, ViewChild, Renderer2, TemplateRef } from '@angular/core';
 import { SinglePopupService } from './single-popup.service';
 import { ChipMenuService } from './chip-menu.service';
 import { PivotLocalizationService } from '../../localization/pivot-localization.service';
@@ -17,6 +17,7 @@ import { ChipMenuSortComponent } from './chip-menu-sort.component';
 import { NgIf } from '@angular/common';
 import { ChipMenuContainerComponent } from './chip-menu-container.component';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
+import { ChipComponent } from '@progress/kendo-angular-buttons';
 import * as i0 from "@angular/core";
 import * as i1 from "./single-popup.service";
 import * as i2 from "../../localization/pivot-localization.service";
@@ -28,57 +29,59 @@ const POPUP_CLASS = 'k-column-menu';
  * Represents the field chip menu component.
  */
 export class ChipMenuComponent {
+    popupService;
+    localization;
+    service;
+    renderer;
+    /**
+     * The Configurator field instance to control with the menu.
+     */
+    chip;
+    tabIndex = '-1';
+    isMeasureField = false;
+    anchor;
+    template;
+    menuItemSVGIcon = moreVerticalIcon;
+    popupRef;
+    closeSubscription;
     constructor(popupService, localization, service, renderer) {
         this.popupService = popupService;
         this.localization = localization;
         this.service = service;
         this.renderer = renderer;
-        this.tabIndex = '-1';
-        this.isMeasureField = false;
-        this.menuItemSVGIcon = moreVerticalIcon;
         this.closeSubscription = service.closeMenu.subscribe(this.close.bind(this));
     }
     ngOnDestroy() {
         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') || '';
         const chipName = this.chip.name.toString();
         return replaceMessagePlaceholder(localizationMsg, 'fieldName', chipName);
     }
-}
-ChipMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuComponent, deps: [{ token: i1.SinglePopupService }, { token: i2.PivotLocalizationService }, { token: i3.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: [
-        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>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuComponent, deps: [{ token: i1.SinglePopupService }, { token: i2.PivotLocalizationService }, { token: i3.ChipMenuService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChipMenuComponent, isStandalone: true, selector: "kendo-pivot-chip-menu", inputs: { chip: "chip", tabIndex: "tabIndex", isMeasureField: "isMeasureField", anchor: "anchor" }, providers: [
+            ChipMenuService,
+            MenuTabbingService
+        ], viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }], ngImport: i0, template: `
         <ng-template #template>
             <kendo-pivot-chipmenu-container
                 (keydown.escape)="close()"
@@ -107,8 +110,9 @@ 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuComponent, decorators: [{
+    `, 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: "16.2.12", ngImport: i0, type: ChipMenuComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -117,15 +121,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()"
@@ -165,6 +160,8 @@ 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 }]
             }] } });

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

@@ -14,25 +14,27 @@ import * as i2 from "../configurator.service";
  * Represents the service that is passed to the ChipMenuFilterComponent and ChipMenuSortComponent.
  */
 export class ChipMenuService {
-    constructor(menuTabbingService, configuratorService) {
-        this.configuratorService = configuratorService;
-        this.closeMenu = new EventEmitter();
-        this.sub = new Subscription();
-        this.menuTabbingService = menuTabbingService;
-        configuratorService && (this.sub = configuratorService.closeMenu.subscribe(() => this.close()));
-    }
+    configuratorService;
+    menuTabbingService;
+    closeMenu = new EventEmitter();
+    sub = new Subscription();
     /**
      * Closes the chip menu.
      */
     close() {
         this.closeMenu.emit();
     }
+    constructor(menuTabbingService, configuratorService) {
+        this.configuratorService = configuratorService;
+        this.menuTabbingService = menuTabbingService;
+        configuratorService && (this.sub = configuratorService.closeMenu.subscribe(() => this.close()));
+    }
     ngOnDestroy() {
         this.sub.unsubscribe();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuService, deps: [{ token: i1.MenuTabbingService }, { token: i2.ConfiguratorService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuService });
 }
-ChipMenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuService, deps: [{ token: i1.MenuTabbingService }, { token: i2.ConfiguratorService }], target: i0.ɵɵFactoryTarget.Injectable });
-ChipMenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.MenuTabbingService }, { type: i2.ConfiguratorService }]; } });

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

@@ -26,12 +26,25 @@ const validFilter = ({ value, operator }) => !isNullOrEmptyString(value) || isNo
  * @hidden
  */
 export class FilterMenuContainerComponent {
+    localization;
+    cd;
+    configuratorService;
+    close = new EventEmitter();
+    /**
+     * The field with which the filter is associated.
+     */
+    chip;
+    isLast;
+    isExpanded;
+    menuTabbingService;
+    actionsClass = 'k-action-buttons k-button-group';
+    filterDescriptorValue;
+    resetButton;
+    filterButton;
     constructor(localization, cd, menuTabbingService, configuratorService) {
         this.localization = localization;
         this.cd = cd;
         this.configuratorService = configuratorService;
-        this.close = new EventEmitter();
-        this.actionsClass = 'k-action-buttons k-button-group';
         this.menuTabbingService = menuTabbingService;
     }
     ngAfterViewChecked() {
@@ -84,11 +97,10 @@ export class FilterMenuContainerComponent {
     messageFor(localizationToken) {
         return this.localization.get(localizationToken);
     }
-}
-FilterMenuContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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: "14.0.0", version: "15.2.10", type: FilterMenuContainerComponent, isStandalone: true, 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuContainerComponent, deps: [{ token: i1.PivotLocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.MenuTabbingService }, { token: i3.ConfiguratorService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuContainerComponent, isStandalone: true, 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">
@@ -114,8 +126,9 @@ FilterMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
                 </div>
             </div>
         </form>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterMenuContainerComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.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: "16.2.12", ngImport: i0, type: FilterMenuContainerComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [

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

@@ -11,14 +11,10 @@ import * as i1 from "@progress/kendo-angular-dropdowns";
  * @hidden
  */
 export class FilterMenuDropDownListDirective {
+    host;
+    filterMenuDropDownLabel;
     constructor(host) {
         this.host = host;
-        this.keydownHandler = (e) => {
-            if (e.keyCode === Keys.Escape && this.host.isOpen) {
-                e.stopPropagation();
-                this.host.toggle(false);
-            }
-        };
     }
     ngAfterViewInit() {
         const wrapperElement = this.host.wrapper.nativeElement;
@@ -28,10 +24,16 @@ export class FilterMenuDropDownListDirective {
     ngOnDestroy() {
         this.host.wrapper.nativeElement.removeEventListener('keydown', this.keydownHandler);
     }
+    keydownHandler = (e) => {
+        if (e.keyCode === Keys.Escape && this.host.isOpen) {
+            e.stopPropagation();
+            this.host.toggle(false);
+        }
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuDropDownListDirective, deps: [{ token: i1.DropDownListComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuDropDownListDirective, isStandalone: true, selector: "[kendoFilterMenuDropDown]", inputs: { filterMenuDropDownLabel: "filterMenuDropDownLabel" }, ngImport: i0 });
 }
-FilterMenuDropDownListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterMenuDropDownListDirective, deps: [{ token: i1.DropDownListComponent }], target: i0.ɵɵFactoryTarget.Directive });
-FilterMenuDropDownListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FilterMenuDropDownListDirective, isStandalone: true, selector: "[kendoFilterMenuDropDown]", inputs: { filterMenuDropDownLabel: "filterMenuDropDownLabel" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterMenuDropDownListDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuDropDownListDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoFilterMenuDropDown]',