28358286454

Committed 29 Jun 2026 08:17AM UTC coverage: 90.127% (-0.05%) from 90.174%

Build # 28358286454

Build Type

Pull #17246

github

Committed by

web-flow

Commit Message

Merge 21687d939 into 07bdcd752

Pull Request Pull Request #17246: fix(pivot-grid): fix date format based on the localization

Coverage Stats

14921 of 17392 branches covered (85.79%)

Branch coverage included in aggregate %.

29 of 32 new or added lines in 4 files covered. (90.63%)

735 existing lines in 76 files now uncovered.

29992 of 32441 relevant lines covered (92.45%)

34632.46 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

75.96

/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts

import { useAnimation } from "@angular/animations";
import { ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, Output, Renderer2, booleanAttribute, inject, ChangeDetectionStrategy } from "@angular/core";
import { first } from "rxjs/operators";
import { IgxFilterPivotItemsPipe } from "./pivot-grid.pipes";
import { fadeIn, fadeOut } from 'igniteui-angular/animations';
import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective } from 'igniteui-angular/input-group';
import { IgxIconComponent } from 'igniteui-angular/icon';
import { IgxListComponent, IgxListItemComponent } from 'igniteui-angular/list';
import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
import { IgxAccordionComponent } from 'igniteui-angular/accordion';
import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel';
import { IDragBaseEventArgs, IDragGhostBaseEventArgs, IDragMoveEventArgs, IDropBaseEventArgs, IDropDroppedEventArgs, IgxDragDirective, IgxDragHandleDirective, IgxDropDirective } from 'igniteui-angular/directives';
import { IgxChipComponent } from 'igniteui-angular/chips';
import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, ISelectionEventArgs } from 'igniteui-angular/drop-down';
import { AbsoluteScrollStrategy, AutoPositionStrategy, ColumnType, OverlaySettings, PositionSettings, ɵSize, SortingDirection, VerticalAlignment } from 'igniteui-angular/core';
import { IPivotAggregator, IPivotDimension, IPivotValue, PivotDimensionType, PivotGridType, PivotUtil } from 'igniteui-angular/grids/core';

interface IDataSelectorPanel {
    name: string;
    i18n: string;
    type?: PivotDimensionType;
    dataKey: string;
    icon: string;
    itemKey: string;
    displayKey?: string;
    sortable: boolean;
    dragChannels: string[];
}

/* blazorIndirectRender
   blazorComponent */
/* wcElementTag: igc-pivot-data-selector */
/**
 * Pivot Data Selector provides means to configure the pivot state of the Pivot Grid via a vertical panel UI
 *
 * @igxModule IgxPivotGridModule
 * @igxGroup Grids & Lists
 * @igxKeywords data selector, pivot, grid
 * @igxTheme pivot-data-selector-theme
 * @remarks
 * The Ignite UI Data Selector has a searchable list with the grid data columns,
 * there are also four expandable areas underneath for filters, rows, columns, and values
 * is used for grouping and aggregating simple flat data into a pivot table.
 * @example
 * ```html
 * <igx-pivot-grid #grid1 [data]="data" [pivotConfiguration]="configuration">
 * </igx-pivot-grid>
 * <igx-pivot-data-selector [grid]="grid1"></igx-pivot-data-selector>
 * ```
 */
@Component({
    selector: "igx-pivot-data-selector",
    templateUrl: "./pivot-data-selector.component.html",
    changeDetection: ChangeDetectionStrategy.Eager,
    imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, IgxInputDirective, IgxListComponent, IgxListItemComponent, IgxCheckboxComponent, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxDropDirective, IgxExpansionPanelTitleDirective, IgxChipComponent, IgxExpansionPanelBodyComponent, IgxDragDirective, IgxDropDownItemNavigationDirective, IgxDragHandleDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxFilterPivotItemsPipe]
})
export class IgxPivotDataSelectorComponent {
    private renderer = inject(Renderer2);
    private cdr = inject(ChangeDetectorRef);


    /**
     * Gets/sets whether the columns panel is expanded
     * Get
     * ```typescript
     *  const columnsPanelState: boolean = this.dataSelector.columnsExpanded;
     * ```
     * Set
     * ```html
     * <igx-pivot-data-selector [grid]="grid1" [columnsExpanded]="columnsPanelState"></igx-pivot-data-selector>
     * ```
     *
     * Two-way data binding:
     * ```html
     * <igx-pivot-data-selector [grid]="grid1" [(columnsExpanded)]="columnsPanelState"></igx-pivot-data-selector>
     * ```
     */
    @Input({ transform: booleanAttribute })
    public columnsExpanded = true;

    /**
     * Emitted when the columns panel is expanded or collapsed.
     *
     * @example
     * ```html
     * <igx-pivot-data-selector #grid [data]="localData" [height]="'305px'"
     *              (columnsExpandedChange)="columnsExpandedChange($event)"></igx-pivot-data-selector>
     * ```
    */
    @Output()
    public columnsExpandedChange = new EventEmitter<boolean>();

    /**
     * Gets/sets whether the rows panel is expanded
     * Get
     * ```typescript
     *  const rowsPanelState: boolean = this.dataSelector.rowsExpanded;
     * ```
     * Set
     * ```html
     * <igx-pivot-data-selector [grid]="grid1" [rowsExpanded]="rowsPanelState"></igx-pivot-data-selector>
     * ```
     *
     * Two-way data binding:
     * ```html
     * <igx-pivot-data-selector [grid]="grid1" [(rowsExpanded)]="rowsPanelState"></igx-pivot-data-selector>
     * ```
     */
    @Input({ transform: booleanAttribute })
    public rowsExpanded = true;

    /**
     * Emitted when the rows panel is expanded or collapsed.
     *
     * @example
     * ```html
     * <igx-pivot-data-selector #grid [data]="localData" [height]="'305px'"
     *              (rowsExpandedChange)="rowsExpandedChange($event)"></igx-pivot-data-selector>
     * ```
    */
    @Output()
    public rowsExpandedChange = new EventEmitter<boolean>();

    /**
     * Gets/sets whether the filters panel is expanded
     * Get
     * ```typescript
     *  const filtersPanelState: boolean = this.dataSelector.filtersExpanded;
     * ```
     * Set
     * ```html
     * <igx-pivot-data-selector [grid]="grid1" [filtersExpanded]="filtersPanelState"></igx-pivot-data-selector>
     * ```
     *
     * Two-way data binding:
     * ```html
     * <igx-pivot-data-selector [grid]="grid1" [(filtersExpanded)]="filtersPanelState"></igx-pivot-data-selector>
     * ```
     */
    @Input({ transform: booleanAttribute })
    public filtersExpanded = true;

    /**
     * Emitted when the filters panel is expanded or collapsed.
     *
     * @example
     * ```html
     * <igx-pivot-data-selector #grid [data]="localData" [height]="'305px'"
     *              (filtersExpandedChange)="filtersExpandedChange($event)"></igx-pivot-data-selector>
     * ```
    */
    @Output()
    public filtersExpandedChange = new EventEmitter<boolean>();

    /**
     * Gets/sets whether the values panel is expanded
     * Get
     * ```typescript
     *  const valuesPanelState: boolean = this.dataSelector.valuesExpanded;
     * ```
     * Set
     * ```html
     * <igx-pivot-data-selector [grid]="grid1" [valuesExpanded]="valuesPanelState"></igx-pivot-data-selector>
     * ```
     *
     * Two-way data binding:
     * ```html
     * <igx-pivot-data-selector [grid]="grid1" [(valuesExpanded)]="valuesPanelState"></igx-pivot-data-selector>
     * ```
     */
    @Input({ transform: booleanAttribute })
    public valuesExpanded = true;

    /**
     * Emitted when the values panel is expanded or collapsed.
     *
     * @example
     * ```html
     * <igx-pivot-data-selector #grid [data]="localData" [height]="'305px'"
     *              (valuesExpandedChange)="valuesExpandedChange($event)"></igx-pivot-data-selector>
     * ```
    */
    @Output()
    public valuesExpandedChange = new EventEmitter<boolean>();

    private _grid: PivotGridType;
    private _dropDelta = 0;

    /** @hidden @internal **/
    @HostBinding("class.igx-pivot-data-selector")
    public cssClass = "igx-pivot-data-selector";

    @HostBinding("style.--ig-size")
    protected get size(): ɵSize {
        return this.grid?.gridSize;
    }

    /** @hidden @internal **/
    public dimensions: IPivotDimension[];

    private _subMenuPositionSettings: PositionSettings = {
        verticalStartPoint: VerticalAlignment.Bottom,
        closeAnimation: undefined,
    };

    private _subMenuOverlaySettings: OverlaySettings = {
        closeOnOutsideClick: true,
        modal: false,
        positionStrategy: new AutoPositionStrategy(
            this._subMenuPositionSettings
        ),
        scrollStrategy: new AbsoluteScrollStrategy(),
    };

    /* blazorSuppress */
    public animationSettings = {
        closeAnimation: useAnimation(fadeOut, {
            params: {
                duration: "0ms",
            },
        }),
        openAnimation: useAnimation(fadeIn, {
            params: {
                duration: "0ms",
            },
        }),
    };

    /** @hidden @internal */
    public aggregateList: IPivotAggregator[] = [];
    /** @hidden @internal */
    public value: IPivotValue;
    /** @hidden @internal */
    public ghostText: string;
    /** @hidden @internal */
    public ghostWidth: number;
    /** @hidden @internal */
    public dropAllowed: boolean;
    /** @hidden @internal */
    public get dims(): IPivotDimension[] {
        return this._grid?.allDimensions || [];
    }
    /** @hidden @internal */
    public get values(): IPivotValue[] {
        return this._grid?.pivotConfiguration.values || [];
    }

    /**
     * @hidden @internal
     */
    public _panels: IDataSelectorPanel[] = [
        {
            name: "Filters",
            i18n: 'igx_grid_pivot_selector_filters',
            type: PivotDimensionType.Filter,
            dataKey: "filterDimensions",
            icon: "filter_list",
            itemKey: "memberName",
            displayKey: 'displayName',
            sortable: false,
            dragChannels: ["Filters", "Columns", "Rows"]
        },
        {
            name: "Columns",
            i18n: 'igx_grid_pivot_selector_columns',
            type: PivotDimensionType.Column,
            dataKey: "columnDimensions",
            icon: "view_column",
            itemKey: "memberName",
            displayKey: 'displayName',
            sortable: true,
            dragChannels: ["Filters", "Columns", "Rows"]
        },
        {
            name: "Rows",
            i18n: 'igx_grid_pivot_selector_rows',
            type: PivotDimensionType.Row,
            dataKey: "rowDimensions",
            icon: "table_rows",
            itemKey: "memberName",
            displayKey: 'displayName',
            sortable: true,
            dragChannels: ["Filters", "Columns", "Rows"]
        },
        {
            name: "Values",
            i18n: 'igx_grid_pivot_selector_values',
            type: null,
            dataKey: "values",
            icon: "functions",
            itemKey: "member",
            displayKey: 'displayName',
            sortable: false,
            dragChannels: ["Values"]
        },
    ];


    /* treatAsRef */
    /**
     * Sets the grid.
     */
    @Input()
    public set grid(value: PivotGridType) {
        this._grid = value;
    }

    /* treatAsRef */
    /**
     * Returns the grid.
     */
    public get grid(): PivotGridType {
        return this._grid;
    }

    /**
     * @hidden
     * @internal
     */
    public onItemSort(
        _: Event,
        dimension: IPivotDimension,
        dimensionType: PivotDimensionType
    ) {
        if (
            !this._panels.find(
                (panel: IDataSelectorPanel) => panel.type === dimensionType
            ).sortable
        )
            return;

        const startDirection = dimension.sortDirection || SortingDirection.None;
        const direction = startDirection + 1 > SortingDirection.Desc ?
            SortingDirection.None : startDirection + 1;
        this.grid.sortDimension(dimension, direction);
    }

    /**
     * @hidden
     * @internal
     */
    public onFilteringIconPointerDown(event: PointerEvent) {
        event.stopPropagation();
        event.preventDefault();
    }

    /**
     * @hidden
     * @internal
     */
    public onFilteringIconClick(event: MouseEvent, dimension: IPivotDimension) {
        event.stopPropagation();
        event.preventDefault();

        let dim = dimension;
        let col: ColumnType;

        while (dim) {
            col = this.grid.dimensionDataColumns.find(
                (x) => x.field === dim.memberName
            );
            if (col) {
                break;
            } else {
                dim = dim.childLevel;
            }
        }

        this.grid.filteringService.toggleFilterDropdown(event.target, col);
    }

    /**
     * @hidden
     * @internal
     */
    protected getDimensionState(dimensionType: PivotDimensionType) {
        switch (dimensionType) {
            case PivotDimensionType.Row:
                return this.grid.rowDimensions;
            case PivotDimensionType.Column:
                return this.grid.columnDimensions;
            case PivotDimensionType.Filter:
                return this.grid.filterDimensions;
            default:
                return null;
        }
    }

    /**
     * @hidden
     * @internal
     */
    protected moveValueItem(itemId: string) {
        const aggregation = this.grid.pivotConfiguration.values;
        const valueIndex =
            aggregation.findIndex((x) => x.member === itemId) !== -1
                ? aggregation?.findIndex((x) => x.member === itemId)
                : aggregation.length;
        const newValueIndex =
            valueIndex + this._dropDelta < 0 ? 0 : valueIndex + this._dropDelta;

        const aggregationItem = aggregation.find(
            (x) => x.member === itemId || x.displayName === itemId
        );

        if (aggregationItem) {
            this.grid.moveValue(aggregationItem, newValueIndex);
            this.grid.valuesChange.emit({
                values: this.grid.pivotConfiguration.values,
            });
        }
    }

    /**
     * @hidden
     * @internal
     */
    public onItemDropped(
        event: IDropDroppedEventArgs,
        dimensionType: PivotDimensionType
    ) {
        if (!this.dropAllowed) {
            return;
        }

        const dimension = this.grid.getDimensionsByType(dimensionType);
        const dimensionState = this.getDimensionState(dimensionType);
        const itemId = event.drag.element.nativeElement.id;
        const targetId = event.owner.element.nativeElement.id;
        const dimensionItem = dimension?.find((x) => x.memberName === itemId);
        const itemIndex =
            dimension?.findIndex((x) => x?.memberName === itemId) !== -1
                ? dimension?.findIndex((x) => x.memberName === itemId)
                : dimension?.length;
        const dimensions = this.grid.allDimensions.filter((x) => x && x.memberName === itemId);

        const reorder =
            dimensionState?.findIndex((item) => item.memberName === itemId) !==
            -1;

        let targetIndex =
            targetId !== ""
                ? dimension?.findIndex((x) => x.memberName === targetId)
                : dimension?.length;

        if (!dimension) {
            this.moveValueItem(itemId);
        }

        if (reorder) {
            targetIndex =
                itemIndex + this._dropDelta < 0
                    ? 0
                    : itemIndex + this._dropDelta;
        }

        if (dimensionItem) {
            this.grid.moveDimension(dimensionItem, dimensionType, targetIndex);
        } else {
            const newDim = dimensions.find((x) => x.memberName === itemId);
            this.grid.moveDimension(newDim, dimensionType, targetIndex);
        }

        this.grid.dimensionsChange.emit({
            dimensions: dimension,
            dimensionCollectionType: dimensionType,
        });
    }

    /**
     * @hidden
     * @internal
     */
    protected updateDropDown(
        value: IPivotValue,
        dropdown: IgxDropDownComponent
    ) {
        this.value = value;
        dropdown.width = "200px";
        this.aggregateList = PivotUtil.getAggregateList(value, this.grid);
        this.cdr.detectChanges();
        dropdown.open(this._subMenuOverlaySettings);
    }

    /**
     * @hidden
     * @internal
     */
    public onSummaryClick(
        event: MouseEvent,
        value: IPivotValue,
        dropdown: IgxDropDownComponent
    ) {
        this._subMenuOverlaySettings.target =
            event.currentTarget as HTMLElement;

        if (dropdown.collapsed) {
            this.updateDropDown(value, dropdown);
        } else {
            // close for previous chip
            dropdown.close();
            dropdown.closed.pipe(first()).subscribe(() => {
                this.updateDropDown(value, dropdown);
            });
        }
    }

    /**
     * @hidden
     * @internal
     */
    public onAggregationChange(event: ISelectionEventArgs) {

        if (!this.isSelected(event.newSelection.value)) {
            this.value.aggregate = event.newSelection.value;
            const isSingleValue = this.grid.values.length === 1;

            PivotUtil.updateColumnTypeByAggregator(this.grid.columns, this.value, isSingleValue);

            this.grid.pipeTrigger++;
            this.grid.cdr.markForCheck();
        }
    }

    /**
     * @hidden
     * @internal
     */
    public isSelected(val: IPivotAggregator) {
        return this.value.aggregate.key === val.key;
    }

    /**
     * @hidden
     * @internal
     */
    public ghostCreated(event: IDragGhostBaseEventArgs, value: string) {
        const { width: itemWidth } =
            event.owner.element.nativeElement.getBoundingClientRect();
        this.ghostWidth = itemWidth;
        this.ghostText = value;
        this.renderer.setStyle(
            event.owner.element.nativeElement,
            "position",
            "absolute"
        );
        this.renderer.setStyle(
            event.owner.element.nativeElement,
            "visibility",
            "hidden"
        );
    }

    /**
     * @hidden
     * @internal
     */
    public toggleItem(item: IPivotDimension | IPivotValue) {
        if (item as IPivotValue) {
            this.grid.toggleValue(item as IPivotValue);
        }

        if (item as IPivotDimension) {
            this.grid.toggleDimension(item as IPivotDimension);
        }
    }

    /**
     * @hidden
     * @internal
     */
    public onPanelEntry(event: IDropBaseEventArgs, panel: string) {
        this.dropAllowed = event.dragData.gridID === this.grid.id && event.dragData.selectorChannels?.some(
            (channel: string) => channel === panel
        );
    }

    /**
     * @hidden
     * @internal
     */
    public onItemDragMove(event: IDragMoveEventArgs) {
        const clientRect =
            event.owner.element.nativeElement.getBoundingClientRect();
        this._dropDelta = Math.round(
            (event.nextPageY - event.startY) / clientRect.height
        );
    }

    /**
     * @hidden
     * @internal
     */
    public onItemDragEnd(event: IDragBaseEventArgs) {
        this.renderer.setStyle(
            event.owner.element.nativeElement,
            "position",
            "static"
        );
        this.renderer.setStyle(
            event.owner.element.nativeElement,
            "visibility",
            "visible"
        );
    }

    /**
     * @hidden
     * @internal
     */
    public onItemDragOver(event: IDropBaseEventArgs) {
        if (this.dropAllowed) {
            this.renderer.addClass(
                event.owner.element.nativeElement,
                "igx-drag--push"
            );
        }
    }

    /**
     * @hidden
     * @internal
     */
    public onItemDragLeave(event: IDropBaseEventArgs) {
        if (this.dropAllowed) {
            this.renderer.removeClass(
                event.owner.element.nativeElement,
                "igx-drag--push"
            );
        }
    }

    /**
     * @hidden
     * @internal
     */
    public getPanelCollapsed(panelType: PivotDimensionType): boolean {
        switch (panelType) {
            case PivotDimensionType.Column:
                return !this.columnsExpanded;
            case PivotDimensionType.Filter:
                return !this.filtersExpanded;
            case PivotDimensionType.Row:
                return !this.rowsExpanded;
            default:
                return !this.valuesExpanded;
        }
    }

    /**
     * @hidden
     * @internal
     */
    public onCollapseChange(value: boolean, panelType: PivotDimensionType): void {
        switch (panelType) {
            case PivotDimensionType.Column:
                this.columnsExpanded = !value;
                this.columnsExpandedChange.emit(this.columnsExpanded);
                break;
            case PivotDimensionType.Filter:
                this.filtersExpanded = !value;
                this.filtersExpandedChange.emit(this.filtersExpanded);
                break;
            case PivotDimensionType.Row:
                this.rowsExpanded = !value;
                this.rowsExpandedChange.emit(this.rowsExpanded);
                break;
            default:
                this.valuesExpanded = !value;
                this.valuesExpandedChange.emit(this.valuesExpanded)
        }
    }
}

1	import { useAnimation } from "@angular/animations";
2	import { ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, Output, Renderer2, booleanAttribute, inject, ChangeDetectionStrategy } from "@angular/core";
3	import { first } from "rxjs/operators";
4	import { IgxFilterPivotItemsPipe } from "./pivot-grid.pipes";
5	import { fadeIn, fadeOut } from 'igniteui-angular/animations';
6	import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective } from 'igniteui-angular/input-group';
7	import { IgxIconComponent } from 'igniteui-angular/icon';
8	import { IgxListComponent, IgxListItemComponent } from 'igniteui-angular/list';
9	import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
10	import { IgxAccordionComponent } from 'igniteui-angular/accordion';
11	import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel';
12	import { IDragBaseEventArgs, IDragGhostBaseEventArgs, IDragMoveEventArgs, IDropBaseEventArgs, IDropDroppedEventArgs, IgxDragDirective, IgxDragHandleDirective, IgxDropDirective } from 'igniteui-angular/directives';
13	import { IgxChipComponent } from 'igniteui-angular/chips';
14	import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, ISelectionEventArgs } from 'igniteui-angular/drop-down';
15	import { AbsoluteScrollStrategy, AutoPositionStrategy, ColumnType, OverlaySettings, PositionSettings, ɵSize, SortingDirection, VerticalAlignment } from 'igniteui-angular/core';
16	import { IPivotAggregator, IPivotDimension, IPivotValue, PivotDimensionType, PivotGridType, PivotUtil } from 'igniteui-angular/grids/core';
17
18	interface IDataSelectorPanel {
19	name: string;
20	i18n: string;
21	type?: PivotDimensionType;
22	dataKey: string;
23	icon: string;
24	itemKey: string;
25	displayKey?: string;
26	sortable: boolean;
27	dragChannels: string[];
28	}
29
30	/* blazorIndirectRender
31	blazorComponent */
32	/* wcElementTag: igc-pivot-data-selector */
33	/**
34	* Pivot Data Selector provides means to configure the pivot state of the Pivot Grid via a vertical panel UI
35	*
36	* @igxModule IgxPivotGridModule
37	* @igxGroup Grids & Lists
38	* @igxKeywords data selector, pivot, grid
39	* @igxTheme pivot-data-selector-theme
40	* @remarks
41	* The Ignite UI Data Selector has a searchable list with the grid data columns,
42	* there are also four expandable areas underneath for filters, rows, columns, and values
43	* is used for grouping and aggregating simple flat data into a pivot table.
44	* @example
45	* ```html
46	* <igx-pivot-grid #grid1 [data]="data" [pivotConfiguration]="configuration">
47	* </igx-pivot-grid>
48	* <igx-pivot-data-selector [grid]="grid1"></igx-pivot-data-selector>
49	* ```
50	*/
51	@Component({
52	selector: "igx-pivot-data-selector",
53	templateUrl: "./pivot-data-selector.component.html",
54	changeDetection: ChangeDetectionStrategy.Eager,
55	imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, IgxInputDirective, IgxListComponent, IgxListItemComponent, IgxCheckboxComponent, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxDropDirective, IgxExpansionPanelTitleDirective, IgxChipComponent, IgxExpansionPanelBodyComponent, IgxDragDirective, IgxDropDownItemNavigationDirective, IgxDragHandleDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxFilterPivotItemsPipe]
56	})
57	export class IgxPivotDataSelectorComponent {	3✔
58	private renderer = inject(Renderer2);	73✔
59	private cdr = inject(ChangeDetectorRef);	73✔
60
61
62	/**
63	* Gets/sets whether the columns panel is expanded
64	* Get
65	* ```typescript
66	* const columnsPanelState: boolean = this.dataSelector.columnsExpanded;
67	* ```
68	* Set
69	* ```html
70	* <igx-pivot-data-selector [grid]="grid1" [columnsExpanded]="columnsPanelState"></igx-pivot-data-selector>
71	* ```
72	*
73	* Two-way data binding:
74	* ```html
75	* <igx-pivot-data-selector [grid]="grid1" [(columnsExpanded)]="columnsPanelState"></igx-pivot-data-selector>
76	* ```
77	*/
78	@Input({ transform: booleanAttribute })
79	public columnsExpanded = true;	73✔
80
81	/**
82	* Emitted when the columns panel is expanded or collapsed.
83	*
84	* @example
85	* ```html
86	* <igx-pivot-data-selector #grid [data]="localData" [height]="'305px'"
87	* (columnsExpandedChange)="columnsExpandedChange($event)"></igx-pivot-data-selector>
88	* ```
89	*/
90	@Output()
91	public columnsExpandedChange = new EventEmitter<boolean>();	73✔
92
93	/**
94	* Gets/sets whether the rows panel is expanded
95	* Get
96	* ```typescript
97	* const rowsPanelState: boolean = this.dataSelector.rowsExpanded;
98	* ```
99	* Set
100	* ```html
101	* <igx-pivot-data-selector [grid]="grid1" [rowsExpanded]="rowsPanelState"></igx-pivot-data-selector>
102	* ```
103	*
104	* Two-way data binding:
105	* ```html
106	* <igx-pivot-data-selector [grid]="grid1" [(rowsExpanded)]="rowsPanelState"></igx-pivot-data-selector>
107	* ```
108	*/
109	@Input({ transform: booleanAttribute })
110	public rowsExpanded = true;	73✔
111
112	/**
113	* Emitted when the rows panel is expanded or collapsed.
114	*
115	* @example
116	* ```html
117	* <igx-pivot-data-selector #grid [data]="localData" [height]="'305px'"
118	* (rowsExpandedChange)="rowsExpandedChange($event)"></igx-pivot-data-selector>
119	* ```
120	*/
121	@Output()
122	public rowsExpandedChange = new EventEmitter<boolean>();	73✔
123
124	/**
125	* Gets/sets whether the filters panel is expanded
126	* Get
127	* ```typescript
128	* const filtersPanelState: boolean = this.dataSelector.filtersExpanded;
129	* ```
130	* Set
131	* ```html
132	* <igx-pivot-data-selector [grid]="grid1" [filtersExpanded]="filtersPanelState"></igx-pivot-data-selector>
133	* ```
134	*
135	* Two-way data binding:
136	* ```html
137	* <igx-pivot-data-selector [grid]="grid1" [(filtersExpanded)]="filtersPanelState"></igx-pivot-data-selector>
138	* ```
139	*/
140	@Input({ transform: booleanAttribute })
141	public filtersExpanded = true;	73✔
142
143	/**
144	* Emitted when the filters panel is expanded or collapsed.
145	*
146	* @example
147	* ```html
148	* <igx-pivot-data-selector #grid [data]="localData" [height]="'305px'"
149	* (filtersExpandedChange)="filtersExpandedChange($event)"></igx-pivot-data-selector>
150	* ```
151	*/
152	@Output()
153	public filtersExpandedChange = new EventEmitter<boolean>();	73✔
154
155	/**
156	* Gets/sets whether the values panel is expanded
157	* Get
158	* ```typescript
159	* const valuesPanelState: boolean = this.dataSelector.valuesExpanded;
160	* ```
161	* Set
162	* ```html
163	* <igx-pivot-data-selector [grid]="grid1" [valuesExpanded]="valuesPanelState"></igx-pivot-data-selector>
164	* ```
165	*
166	* Two-way data binding:
167	* ```html
168	* <igx-pivot-data-selector [grid]="grid1" [(valuesExpanded)]="valuesPanelState"></igx-pivot-data-selector>
169	* ```
170	*/
171	@Input({ transform: booleanAttribute })
172	public valuesExpanded = true;	73✔
173
174	/**
175	* Emitted when the values panel is expanded or collapsed.
176	*
177	* @example
178	* ```html
179	* <igx-pivot-data-selector #grid [data]="localData" [height]="'305px'"
180	* (valuesExpandedChange)="valuesExpandedChange($event)"></igx-pivot-data-selector>
181	* ```
182	*/
183	@Output()
184	public valuesExpandedChange = new EventEmitter<boolean>();	73✔
185
186	private _grid: PivotGridType;
187	private _dropDelta = 0;	73✔
188
189	/ @hidden @internal /
190	@HostBinding("class.igx-pivot-data-selector")
191	public cssClass = "igx-pivot-data-selector";	73✔
192
193	@HostBinding("style.--ig-size")
194	protected get size(): ɵSize {
195	return this.grid?.gridSize;	485✔
196	}
197
198	/ @hidden @internal /
199	public dimensions: IPivotDimension[];
200
201	private _subMenuPositionSettings: PositionSettings = {	73✔
202	verticalStartPoint: VerticalAlignment.Bottom,
203	closeAnimation: undefined,
204	};
205
206	private _subMenuOverlaySettings: OverlaySettings = {	73✔
207	closeOnOutsideClick: true,
208	modal: false,
209	positionStrategy: new AutoPositionStrategy(
210	this._subMenuPositionSettings
211	),
212	scrollStrategy: new AbsoluteScrollStrategy(),
213	};
214
215	/* blazorSuppress */
216	public animationSettings = {	73✔
217	closeAnimation: useAnimation(fadeOut, {
218	params: {
219	duration: "0ms",
220	},
221	}),
222	openAnimation: useAnimation(fadeIn, {
223	params: {
224	duration: "0ms",
225	},
226	}),
227	};
228
229	/** @hidden @internal */
230	public aggregateList: IPivotAggregator[] = [];	73✔
231	/** @hidden @internal */
232	public value: IPivotValue;
233	/** @hidden @internal */
234	public ghostText: string;
235	/** @hidden @internal */
236	public ghostWidth: number;
237	/** @hidden @internal */
238	public dropAllowed: boolean;
239	/** @hidden @internal */
240	public get dims(): IPivotDimension[] {
241	return this._grid?.allDimensions \|\| [];	557✔
242	}
243	/** @hidden @internal */
244	public get values(): IPivotValue[] {
245	return this._grid?.pivotConfiguration.values \|\| [];	557✔
246	}
247
248	/**
249	* @hidden @internal
250	*/
251	public _panels: IDataSelectorPanel[] = [	73✔
252	{
253	name: "Filters",
254	i18n: 'igx_grid_pivot_selector_filters',
255	type: PivotDimensionType.Filter,
256	dataKey: "filterDimensions",
257	icon: "filter_list",
258	itemKey: "memberName",
259	displayKey: 'displayName',
260	sortable: false,
261	dragChannels: ["Filters", "Columns", "Rows"]
262	},
263	{
264	name: "Columns",
265	i18n: 'igx_grid_pivot_selector_columns',
266	type: PivotDimensionType.Column,
267	dataKey: "columnDimensions",
268	icon: "view_column",
269	itemKey: "memberName",
270	displayKey: 'displayName',
271	sortable: true,
272	dragChannels: ["Filters", "Columns", "Rows"]
273	},
274	{
275	name: "Rows",
276	i18n: 'igx_grid_pivot_selector_rows',
277	type: PivotDimensionType.Row,
278	dataKey: "rowDimensions",
279	icon: "table_rows",
280	itemKey: "memberName",
281	displayKey: 'displayName',
282	sortable: true,
283	dragChannels: ["Filters", "Columns", "Rows"]
284	},
285	{
286	name: "Values",
287	i18n: 'igx_grid_pivot_selector_values',
288	type: null,
289	dataKey: "values",
290	icon: "functions",
291	itemKey: "member",
292	displayKey: 'displayName',
293	sortable: false,
294	dragChannels: ["Values"]
295	},
296	];
297
298
299	/* treatAsRef */
300	/**
301	* Sets the grid.
302	*/
303	@Input()
304	public set grid(value: PivotGridType) {
305	this._grid = value;	72✔
306	}
307
308	/* treatAsRef */
309	/**
310	* Returns the grid.
311	*/
312	public get grid(): PivotGridType {
313	return this._grid;	22,705✔
314	}
315
316	/**
317	* @hidden
318	* @internal
319	*/
320	public onItemSort(
321	_: Event,
322	dimension: IPivotDimension,
323	dimensionType: PivotDimensionType
324	) {
325	if (	6!
326	!this._panels.find(
327	(panel: IDataSelectorPanel) => panel.type === dimensionType	15✔
328	).sortable
329	)
UNCOV 330	return;	×
331
332	const startDirection = dimension.sortDirection \|\| SortingDirection.None;	6✔
333	const direction = startDirection + 1 > SortingDirection.Desc ?	6✔
334	SortingDirection.None : startDirection + 1;
335	this.grid.sortDimension(dimension, direction);	6✔
336	}
337
338	/**
339	* @hidden
340	* @internal
341	*/
342	public onFilteringIconPointerDown(event: PointerEvent) {
343	event.stopPropagation();	×
UNCOV 344	event.preventDefault();	×
345	}
346
347	/**
348	* @hidden
349	* @internal
350	*/
351	public onFilteringIconClick(event: MouseEvent, dimension: IPivotDimension) {
352	event.stopPropagation();	2✔
353	event.preventDefault();	2✔
354
355	let dim = dimension;	2✔
356	let col: ColumnType;
357
358	while (dim) {	2✔
359	col = this.grid.dimensionDataColumns.find(	2✔
360	(x) => x.field === dim.memberName	3✔
361	);
362	if (col) {	2!
363	break;	2✔
364	} else {
UNCOV 365	dim = dim.childLevel;	×
366	}
367	}
368
369	this.grid.filteringService.toggleFilterDropdown(event.target, col);	2✔
370	}
371
372	/**
373	* @hidden
374	* @internal
375	*/
376	protected getDimensionState(dimensionType: PivotDimensionType) {
377	switch (dimensionType) {	1!
378	case PivotDimensionType.Row:
UNCOV 379	return this.grid.rowDimensions;	×
380	case PivotDimensionType.Column:
UNCOV 381	return this.grid.columnDimensions;	×
382	case PivotDimensionType.Filter:
UNCOV 383	return this.grid.filterDimensions;	×
384	default:
385	return null;	1✔
386	}
387	}
388
389	/**
390	* @hidden
391	* @internal
392	*/
393	protected moveValueItem(itemId: string) {
394	const aggregation = this.grid.pivotConfiguration.values;	1✔
395	const valueIndex =
396	aggregation.findIndex((x) => x.member === itemId) !== -1	2!
397	? aggregation?.findIndex((x) => x.member === itemId)	2✔
398	: aggregation.length;
399	const newValueIndex =
400	valueIndex + this._dropDelta < 0 ? 0 : valueIndex + this._dropDelta;	1!
401
402	const aggregationItem = aggregation.find(	1✔
403	(x) => x.member === itemId \|\| x.displayName === itemId	2✔
404	);
405
406	if (aggregationItem) {	1✔
407	this.grid.moveValue(aggregationItem, newValueIndex);	1✔
408	this.grid.valuesChange.emit({	1✔
409	values: this.grid.pivotConfiguration.values,
410	});
411	}
412	}
413
414	/**
415	* @hidden
416	* @internal
417	*/
418	public onItemDropped(
419	event: IDropDroppedEventArgs,
420	dimensionType: PivotDimensionType
421	) {
422	if (!this.dropAllowed) {	1!
UNCOV 423	return;	×
424	}
425
426	const dimension = this.grid.getDimensionsByType(dimensionType);	1✔
427	const dimensionState = this.getDimensionState(dimensionType);	1✔
428	const itemId = event.drag.element.nativeElement.id;	1✔
429	const targetId = event.owner.element.nativeElement.id;	1✔
430	const dimensionItem = dimension?.find((x) => x.memberName === itemId);	1✔
431	const itemIndex =
432	dimension?.findIndex((x) => x?.memberName === itemId) !== -1	1!
UNCOV 433	? dimension?.findIndex((x) => x.memberName === itemId)	×
434	: dimension?.length;
435	const dimensions = this.grid.allDimensions.filter((x) => x && x.memberName === itemId);	2✔
436
437	const reorder =
438	dimensionState?.findIndex((item) => item.memberName === itemId) !==	1✔
439	-1;
440
441	let targetIndex =
442	targetId !== ""	1!
UNCOV 443	? dimension?.findIndex((x) => x.memberName === targetId)	×
444	: dimension?.length;
445
446	if (!dimension) {	1✔
447	this.moveValueItem(itemId);	1✔
448	}
449
450	if (reorder) {	1✔
451	targetIndex =	1✔
452	itemIndex + this._dropDelta < 0	1!
453	? 0
454	: itemIndex + this._dropDelta;
455	}
456
457	if (dimensionItem) {	1!
UNCOV 458	this.grid.moveDimension(dimensionItem, dimensionType, targetIndex);	×
459	} else {
460	const newDim = dimensions.find((x) => x.memberName === itemId);	1✔
461	this.grid.moveDimension(newDim, dimensionType, targetIndex);	1✔
462	}
463
464	this.grid.dimensionsChange.emit({	1✔
465	dimensions: dimension,
466	dimensionCollectionType: dimensionType,
467	});
468	}
469
470	/**
471	* @hidden
472	* @internal
473	*/
474	protected updateDropDown(
475	value: IPivotValue,
476	dropdown: IgxDropDownComponent
477	) {
478	this.value = value;	×
479	dropdown.width = "200px";	×
480	this.aggregateList = PivotUtil.getAggregateList(value, this.grid);	×
481	this.cdr.detectChanges();	×
UNCOV 482	dropdown.open(this._subMenuOverlaySettings);	×
483	}
484
485	/**
486	* @hidden
487	* @internal
488	*/
489	public onSummaryClick(
490	event: MouseEvent,
491	value: IPivotValue,
492	dropdown: IgxDropDownComponent
493	) {
UNCOV 494	this._subMenuOverlaySettings.target =	×
495	event.currentTarget as HTMLElement;
496
497	if (dropdown.collapsed) {	×
UNCOV 498	this.updateDropDown(value, dropdown);	×
499	} else {
500	// close for previous chip
501	dropdown.close();	×
502	dropdown.closed.pipe(first()).subscribe(() => {	×
UNCOV 503	this.updateDropDown(value, dropdown);	×
504	});
505	}
506	}
507
508	/**
509	* @hidden
510	* @internal
511	*/
512	public onAggregationChange(event: ISelectionEventArgs) {
513
514	if (!this.isSelected(event.newSelection.value)) {	×
515	this.value.aggregate = event.newSelection.value;	×
UNCOV 516	const isSingleValue = this.grid.values.length === 1;	×
517
UNCOV 518	PivotUtil.updateColumnTypeByAggregator(this.grid.columns, this.value, isSingleValue);	×
519
520	this.grid.pipeTrigger++;	×
UNCOV 521	this.grid.cdr.markForCheck();	×
522	}
523	}
524
525	/**
526	* @hidden
527	* @internal
528	*/
529	public isSelected(val: IPivotAggregator) {
UNCOV 530	return this.value.aggregate.key === val.key;	×
531	}
532
533	/**
534	* @hidden
535	* @internal
536	*/
537	public ghostCreated(event: IDragGhostBaseEventArgs, value: string) {
538	const { width: itemWidth } =
539	event.owner.element.nativeElement.getBoundingClientRect();	1✔
540	this.ghostWidth = itemWidth;	1✔
541	this.ghostText = value;	1✔
542	this.renderer.setStyle(	1✔
543	event.owner.element.nativeElement,
544	"position",
545	"absolute"
546	);
547	this.renderer.setStyle(	1✔
548	event.owner.element.nativeElement,
549	"visibility",
550	"hidden"
551	);
552	}
553
554	/**
555	* @hidden
556	* @internal
557	*/
558	public toggleItem(item: IPivotDimension \| IPivotValue) {
559	if (item as IPivotValue) {	1✔
560	this.grid.toggleValue(item as IPivotValue);	1✔
561	}
562
563	if (item as IPivotDimension) {	1✔
564	this.grid.toggleDimension(item as IPivotDimension);	1✔
565	}
566	}
567
568	/**
569	* @hidden
570	* @internal
571	*/
572	public onPanelEntry(event: IDropBaseEventArgs, panel: string) {
573	this.dropAllowed = event.dragData.gridID === this.grid.id && event.dragData.selectorChannels?.some(	2✔
574	(channel: string) => channel === panel	2✔
575	);
576	}
577
578	/**
579	* @hidden
580	* @internal
581	*/
582	public onItemDragMove(event: IDragMoveEventArgs) {
583	const clientRect =
584	event.owner.element.nativeElement.getBoundingClientRect();	2✔
585	this._dropDelta = Math.round(	2✔
586	(event.nextPageY - event.startY) / clientRect.height
587	);
588	}
589
590	/**
591	* @hidden
592	* @internal
593	*/
594	public onItemDragEnd(event: IDragBaseEventArgs) {
595	this.renderer.setStyle(	1✔
596	event.owner.element.nativeElement,
597	"position",
598	"static"
599	);
600	this.renderer.setStyle(	1✔
601	event.owner.element.nativeElement,
602	"visibility",
603	"visible"
604	);
605	}
606
607	/**
608	* @hidden
609	* @internal
610	*/
611	public onItemDragOver(event: IDropBaseEventArgs) {
612	if (this.dropAllowed) {	2✔
613	this.renderer.addClass(	2✔
614	event.owner.element.nativeElement,
615	"igx-drag--push"
616	);
617	}
618	}
619
620	/**
621	* @hidden
622	* @internal
623	*/
624	public onItemDragLeave(event: IDropBaseEventArgs) {
625	if (this.dropAllowed) {	2✔
626	this.renderer.removeClass(	2✔
627	event.owner.element.nativeElement,
628	"igx-drag--push"
629	);
630	}
631	}
632
633	/**
634	* @hidden
635	* @internal
636	*/
637	public getPanelCollapsed(panelType: PivotDimensionType): boolean {
638	switch (panelType) {	2,228✔
639	case PivotDimensionType.Column:
640	return !this.columnsExpanded;	557✔
641	case PivotDimensionType.Filter:
642	return !this.filtersExpanded;	557✔
643	case PivotDimensionType.Row:
644	return !this.rowsExpanded;	557✔
645	default:
646	return !this.valuesExpanded;	557✔
647	}
648	}
649
650	/**
651	* @hidden
652	* @internal
653	*/
654	public onCollapseChange(value: boolean, panelType: PivotDimensionType): void {
655	switch (panelType) {	4✔
656	case PivotDimensionType.Column:
657	this.columnsExpanded = !value;	1✔
658	this.columnsExpandedChange.emit(this.columnsExpanded);	1✔
659	break;	1✔
660	case PivotDimensionType.Filter:
661	this.filtersExpanded = !value;	1✔
662	this.filtersExpandedChange.emit(this.filtersExpanded);	1✔
663	break;	1✔
664	case PivotDimensionType.Row:
665	this.rowsExpanded = !value;	1✔
666	this.rowsExpandedChange.emit(this.rowsExpanded);	1✔
667	break;	1✔
668	default:
669	this.valuesExpanded = !value;	1✔
670	this.valuesExpandedChange.emit(this.valuesExpanded)	1✔
671	}
672	}
673	}

IgniteUI / igniteui-angular / 28358286454

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous