@progress/kendo-angular-pivotgrid
Version:
PivotGrid package for Angular
196 lines (195 loc) • 10.2 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { ChangeDetectorRef, Component, Input, NgZone, Renderer2 } from '@angular/core';
import { ChipMenuItemBase } from './chip-menu-item-base';
import { ConfiguratorService } from '../configurator.service';
import { PivotLocalizationService } from '../../localization/pivot-localization.service';
import { arrowLeftIcon, arrowRightIcon, columnsIcon, rowsIcon } from '@progress/kendo-svg-icons';
import { PivotGridDataService } from '../../data-binding/pivotgrid-data.service';
import { swapItems } from '../../util';
import { ChipMenuItemComponent } from './chip-menu-item.component';
import { NgIf } from '@angular/common';
import * as i0 from "@angular/core";
import * as i1 from "../../localization/pivot-localization.service";
import * as i2 from "../configurator.service";
import * as i3 from "../../data-binding/pivotgrid-data.service";
/**
* @hidden
*
* Represents a chip-menu item for reordering PivotGrid fields.
*/
export class ChipMenuReorderComponent extends ChipMenuItemBase {
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);
}
get isRowsField() {
return this.configuratorService.state.rowAxes.some(item => item === this.chip);
}
get isMeasureField() {
return this.configuratorService.state.measureAxes.some(item => item === this.chip);
}
get isFirst() {
const state = this.configuratorService.state;
return this.isColumnsField && state.columnAxes[0] === this.chip ||
this.isRowsField && state.rowAxes[0] === this.chip ||
this.isMeasureField && state.measureAxes[0] === this.chip;
}
get isLast() {
const state = this.configuratorService.state;
return this.isColumnsField && state.columnAxes[state.columnAxes.length - 1] === this.chip ||
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();
}
messageFor(localizationToken) {
return this.localization.get(localizationToken);
}
move(e, target) {
const isDisabled = e.target.closest('.k-columnmenu-item').getAttribute('aria-disabled') !== 'false';
if (isDisabled) {
return;
}
const currentState = this.configuratorService.state;
switch (target) {
case 'columns':
{
const newRows = currentState.rowAxes.filter(item => item !== this.chip);
const newCols = [...currentState.columnAxes, this.chip];
const newState = { ...currentState, rowAxes: newRows, columnAxes: newCols };
this.configuratorService.configuratorInstance.setState(newState);
this.ngZone.runOutsideAngular(() => setTimeout(() => this.configuratorService.configuratorInstance[`${target}List`]?.chips.last.element.nativeElement.click()));
}
break;
case 'rows':
{
const newCols = currentState.columnAxes.filter(item => item !== this.chip);
const newRows = [...currentState.rowAxes, this.chip];
const newState = { ...currentState, rowAxes: newRows, columnAxes: newCols };
this.configuratorService.configuratorInstance.setState(newState);
this.ngZone.runOutsideAngular(() => setTimeout(() => this.configuratorService.configuratorInstance[`${target}List`]?.chips.last.element.nativeElement.click()));
}
break;
case 'prev':
{
const axis = currentState.rowAxes.indexOf(this.chip) > -1 ? 'row' : currentState.columnAxes.indexOf(this.chip) > -1 ? 'column' : 'measure';
const index = currentState[`${axis}Axes`].indexOf(this.chip);
swapItems(currentState[`${axis}Axes`], index, index - 1);
const newState = { ...currentState };
this.configuratorService.configuratorInstance.setState(newState);
}
break;
case 'next':
{
const axis = currentState.rowAxes.indexOf(this.chip) > -1 ? 'row' : currentState.columnAxes.indexOf(this.chip) > -1 ? 'column' : 'measure';
const index = currentState[`${axis}Axes`].indexOf(this.chip);
swapItems(currentState[`${axis}Axes`], index, index + 1);
const newState = { ...currentState };
this.configuratorService.configuratorInstance.setState(newState);
}
break;
}
this.close();
}
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"
[text]="messageFor('fieldMenuMoveToColumnsItem')"
icon="columns"
[svgIcon]="columnsIcon"
(itemClick)="move($event, 'columns')">
</kendo-pivot-chipmenu-item>
<kendo-pivot-chipmenu-item
*ngIf="!isMeasureField"
[disabled]="isRowsField"
[text]="messageFor('fieldMenuMoveToRowsItem')"
icon="rows"
[svgIcon]="rowsIcon"
(itemClick)="move($event, 'rows')">
</kendo-pivot-chipmenu-item>
<kendo-pivot-chipmenu-item
[disabled]="isFirst"
[text]="messageFor('fieldMenuMovePreviousItem')"
[icon]="rtl ? 'arrow-right' : 'arrow-left'"
[svgIcon]="rtl ? arrowRightIcon : arrowLeftIcon"
(itemClick)="move($event, 'prev')">
</kendo-pivot-chipmenu-item>
<kendo-pivot-chipmenu-item
[disabled]="isLast"
[text]="messageFor('fieldMenuMoveNextItem')"
[icon]="rtl ? 'arrow-left' : 'arrow-right'"
[svgIcon]="rtl ? arrowLeftIcon : arrowRightIcon"
(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: "16.2.12", ngImport: i0, type: ChipMenuReorderComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-pivot-chipmenu-reorder',
template: `
<kendo-pivot-chipmenu-item
*ngIf="!isMeasureField"
[disabled]="isColumnsField"
[text]="messageFor('fieldMenuMoveToColumnsItem')"
icon="columns"
[svgIcon]="columnsIcon"
(itemClick)="move($event, 'columns')">
</kendo-pivot-chipmenu-item>
<kendo-pivot-chipmenu-item
*ngIf="!isMeasureField"
[disabled]="isRowsField"
[text]="messageFor('fieldMenuMoveToRowsItem')"
icon="rows"
[svgIcon]="rowsIcon"
(itemClick)="move($event, 'rows')">
</kendo-pivot-chipmenu-item>
<kendo-pivot-chipmenu-item
[disabled]="isFirst"
[text]="messageFor('fieldMenuMovePreviousItem')"
[icon]="rtl ? 'arrow-right' : 'arrow-left'"
[svgIcon]="rtl ? arrowRightIcon : arrowLeftIcon"
(itemClick)="move($event, 'prev')">
</kendo-pivot-chipmenu-item>
<kendo-pivot-chipmenu-item
[disabled]="isLast"
[text]="messageFor('fieldMenuMoveNextItem')"
[icon]="rtl ? 'arrow-left' : 'arrow-right'"
[svgIcon]="rtl ? arrowLeftIcon : arrowRightIcon"
(itemClick)="move($event, 'next')">
</kendo-pivot-chipmenu-item>
`,
standalone: true,
imports: [NgIf, ChipMenuItemComponent]
}]
}], ctorParameters: function () { return [{ type: i1.PivotLocalizationService }, { type: i0.Renderer2 }, { type: i2.ConfiguratorService }, { type: i3.PivotGridDataService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { chip: [{
type: Input
}] } });