29572405564

Committed 17 Jul 2026 10:07AM UTC coverage: 90.116% (-0.02%) from 90.135%

Build # 29572405564

Build Type

Pull #15125

github

Committed by

web-flow

Commit Message

Merge 637b7229e into 8ebabbb38

Pull Request Pull Request #15125: refactor(*): bundle styles with components

Coverage Stats

14920 of 17397 branches covered (85.76%)

Branch coverage included in aggregate %.

30030 of 32483 relevant lines covered (92.45%)

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

IgniteUI / igniteui-angular / 29572405564

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