20960087204

Committed 13 Jan 2026 02:19PM UTC coverage: 12.713% (-78.8%) from 91.5%

Build # 20960087204

Build Type

Pull #16746

github

Committed by

web-flow

Commit Message

Merge 9afce6e5d into a967f087e

Pull Request Pull Request #16746: fix(csv): export summaries - master

Run Details

1008 of 16803 branches covered (6.0%)

19 of 23 new or added lines in 2 files covered. (82.61%)

24693 existing lines in 336 files now uncovered.

3985 of 31345 relevant lines covered (12.71%)

2.49 hits per line

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

0.76

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

IgniteUI / igniteui-angular / 20960087204

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