16193550997

Committed 10 Jul 2025 11:12AM UTC coverage: 4.657% (-87.0%) from 91.64%

Build # 16193550997

Build Type

Pull #16028

github

Committed by

web-flow

Commit Message

Merge f7a9963b8 into 87246e3ce

Pull Request Pull Request #16028: fix(radio-group): dynamically added radio buttons do not initialize

Run Details

178 of 15764 branches covered (1.13%)

18 of 19 new or added lines in 2 files covered. (94.74%)

25721 existing lines in 324 files now uncovered.

1377 of 29570 relevant lines covered (4.66%)

0.53 hits per line

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

0.77

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

import { useAnimation } from "@angular/animations";
import {
    ChangeDetectorRef,
    Component,
    EventEmitter,
    HostBinding,
    Input,
    Output,
    Renderer2,
    booleanAttribute
} from "@angular/core";
import { first } from "rxjs/operators";
import { SortingDirection } from "../../data-operations/sorting-strategy";
import { IDragBaseEventArgs, IDragGhostBaseEventArgs, IDragMoveEventArgs, IDropBaseEventArgs, IDropDroppedEventArgs, IgxDropDirective, IgxDragDirective, IgxDragHandleDirective } from "../../directives/drag-drop/drag-drop.directive";
import { ISelectionEventArgs } from "../../drop-down/drop-down.common";
import { IgxDropDownComponent } from "../../drop-down/drop-down.component";
import {
    AbsoluteScrollStrategy,
    AutoPositionStrategy,
    OverlaySettings,
    PositionSettings,
    VerticalAlignment
} from "../../services/public_api";
import { ColumnType, PivotGridType } from "../common/grid.interface";
import {
    IPivotAggregator,
    IPivotDimension,
    IPivotValue,
    PivotDimensionType
} from "./pivot-grid.interface";
import { PivotUtil } from './pivot-util';
import { IgxFilterPivotItemsPipe } from "./pivot-grid.pipes";
import { IgxDropDownItemComponent } from "../../drop-down/drop-down-item.component";
import { IgxDropDownItemNavigationDirective } from "../../drop-down/drop-down-navigation.directive";
import { IgxExpansionPanelBodyComponent } from "../../expansion-panel/expansion-panel-body.component";
import { IgxChipComponent } from "../../chips/chip.component";
import { IgxExpansionPanelTitleDirective } from "../../expansion-panel/expansion-panel.directives";
import { IgxExpansionPanelHeaderComponent } from "../../expansion-panel/expansion-panel-header.component";
import { IgxExpansionPanelComponent } from "../../expansion-panel/expansion-panel.component";
import { IgxAccordionComponent } from "../../accordion/accordion.component";
import { IgxCheckboxComponent } from "../../checkbox/checkbox.component";
import { IgxListItemComponent } from "../../list/list-item.component";
import { IgxListComponent } from "../../list/list.component";
import { IgxInputDirective } from "../../directives/input/input.directive";
import { IgxPrefixDirective } from "../../directives/prefix/prefix.directive";
import { IgxIconComponent } from "../../icon/icon.component";
import { IgxInputGroupComponent } from "../../input-group/input-group.component";
import { fadeIn, fadeOut } from 'igniteui-angular/animations';
import { Size } from '../common/enums';
import { GridColumnDataType } from '../../data-operations/data-util';

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 {

    /**
     * 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 || [];
    }

    constructor(private renderer: Renderer2, private cdr: ChangeDetectorRef) { }

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

IgniteUI / igniteui-angular / 16193550997

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