6770127961

Committed 06 Nov 2023 11:32AM UTC coverage: 92.123% (+0.04%) from 92.087%

Build # 6770127961

Build Type

push

github

Committed by

web-flow

Commit Message

fix(*): adjust header scroll position when focused el i scrolled in view #13547 (#13601)

Co-authored-by: Hristo <hanastasov@infragistics.com>

Run Details

15266 of 17956 branches covered (0.0%)

26418 of 28677 relevant lines covered (92.12%)

30205.99 hits per line

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

86.67

/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts

import {
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Component,
    DoCheck,
    ElementRef,
    HostBinding,
    Input,
    QueryList,
    TemplateRef,
    ViewChild,
    ViewChildren,
    booleanAttribute
} from '@angular/core';
import { DisplayDensity } from '../../core/density';
import { flatten } from '../../core/utils';
import { IgxGridForOfDirective } from '../../directives/for-of/for_of.directive';
import { ColumnType, GridType, IgxHeadSelectorTemplateContext } from '../common/grid.interface';
import { IgxGridFilteringCellComponent } from '../filtering/base/grid-filtering-cell.component';
import { IgxGridFilteringRowComponent } from '../filtering/base/grid-filtering-row.component';
import { IgxGridHeaderGroupComponent } from './grid-header-group.component';
import { IgxGridHeaderComponent } from './grid-header.component';
import { IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe } from './pipes';
import { IgxGridTopLevelColumns } from '../common/pipes';
import { IgxCheckboxComponent } from '../../checkbox/checkbox.component';
import { IgxColumnMovingDropDirective } from '../moving/moving.drop.directive';
import { NgIf, NgTemplateOutlet, NgClass, NgFor, NgStyle } from '@angular/common';

/**
 *
 * For all intents & purposes treat this component as what a <thead> usually is in the default <table> element.
 *
 * This container holds the grid header elements and their behavior/interactions.
 *
 * @hidden @internal
 */
@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'igx-grid-header-row',
    templateUrl: './grid-header-row.component.html',
    standalone: true,
    imports: [NgIf, IgxColumnMovingDropDirective, NgTemplateOutlet, NgClass, NgFor, IgxGridHeaderGroupComponent, NgStyle, IgxGridForOfDirective, IgxGridFilteringRowComponent, IgxCheckboxComponent, IgxGridTopLevelColumns, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe]
})
export class IgxGridHeaderRowComponent implements DoCheck {

    /** The grid component containing this element. */
    @Input()
    public grid: GridType;

    /** Pinned columns of the grid. */
    @Input()
    public pinnedColumnCollection: ColumnType[] = [];

    /** Unpinned columns of the grid. */
    @Input()
    public unpinnedColumnCollection: ColumnType[] = [];

    @Input()
    public activeDescendant: string;

    @Input({ transform: booleanAttribute })
    public hasMRL: boolean;

    @Input()
    public width: number;

    @Input()
    public density: DisplayDensity;

    /**
     * @hidden
     * @internal
     */
    @HostBinding('class.igx-grid-thead--cosy')
    public get cosyStyle() {
        return this.density === 'cosy';
    }

    /**
     * @hidden
     * @internal
     */
    @HostBinding('class.igx-grid-thead--compact')
    public get compactStyle() {
        return this.density === 'compact';
    }

    /**
     * Header groups inside the header row.
     *
     * @remark
     * Note: These are only the top level header groups in case there are multi-column headers
     * or a specific column layout. If you want to get the flattened collection use the `groups`
     * property below.
     *
     * @hidden @internal
     * */
    @ViewChildren(IgxGridHeaderGroupComponent)
    public _groups: QueryList<IgxGridHeaderGroupComponent>;

    /**
     * The flattened header groups collection.
     *
     * @hidden @internal
     */
    public get groups(): IgxGridHeaderGroupComponent[] {
        return flatten(this._groups?.toArray() ?? []);
    }

    /** Header components in the header row. */
    public get headers(): IgxGridHeaderComponent[] {
        return this.groups.map(group => group.header);
    }

    /** Filtering cell components in the header row. */
    public get filters(): IgxGridFilteringCellComponent[] {
        return this.groups.map(group => group.filter);
    }

    /** The virtualized part of the header row containing the unpinned header groups. */
    @ViewChild('headerVirtualContainer', { read: IgxGridForOfDirective, static: true })
    public headerContainer: IgxGridForOfDirective<ColumnType, ColumnType[]>;

    public get headerForOf() {
        return this.headerContainer;
    }

    @ViewChild('headerDragContainer')
    public headerDragContainer: ElementRef<HTMLElement>;

    @ViewChild('headerSelectorContainer')
    public headerSelectorContainer: ElementRef<HTMLElement>;

    @ViewChild('headerGroupContainer')
    public headerGroupContainer: ElementRef<HTMLElement>;

    @ViewChild('headSelectorBaseTemplate')
    public headSelectorBaseTemplate: TemplateRef<IgxHeadSelectorTemplateContext>;

    @ViewChild(IgxGridFilteringRowComponent)
    public filterRow: IgxGridFilteringRowComponent;

    /**
     * Expand/collapse all child grids area in a hierarchical grid.
     * `undefined` in the base and tree grids.
     *
     * @internal @hidden
     */
    @ViewChild('headerHierarchyExpander')
    public headerHierarchyExpander: ElementRef<HTMLElement>;

    public get navigation() {
        return this.grid.navigation;
    }

    public get nativeElement() {
        return this.ref.nativeElement;
    }

    /**
     * Returns whether the current grid instance is a hierarchical grid.
     * as only hierarchical grids have the `isHierarchicalRecord` method.
     *
     * @hidden @internal
     */
    public get isHierarchicalGrid() {
        return !!this.grid.isHierarchicalRecord;
    }

    public get indentationCSSClasses() {
        return `igx-grid__header-indentation igx-grid__row-indentation--level-${this.grid.groupingExpressions.length}`;
    }

    public get rowSelectorsContext(): IgxHeadSelectorTemplateContext {
        const ctx = {
            $implicit: {
                selectedCount: this.grid.selectionService.filteredSelectedRowIds.length as number,
                totalCount: this.grid.totalRowsCountAfterFilter as number
            }
        } as IgxHeadSelectorTemplateContext;

        if (this.isHierarchicalGrid) {
            ctx.$implicit.selectAll = () => this.grid.selectAllRows();
            ctx.$implicit.deselectAll = () => this.grid.deselectAllRows();
        }

        return ctx;
    }

    constructor(
        protected ref: ElementRef<HTMLElement>,
        protected cdr: ChangeDetectorRef
    ) { }

    /**
     * This hook exists as a workaround for the unfortunate fact
     * that when we have pinned columns in the grid, the unpinned columns headers
     * are affected by a delayed change detection cycle after a horizontal scroll :(
     * Thus, we tell the parent grid change detector to check us at each cycle.
     *
     * @hidden @internal
     */
    public ngDoCheck() {
        this.cdr.markForCheck();
    }

    /**
     * @hidden @internal
     */
    public scroll(event: Event) {
        this.grid.preventHeaderScroll(event);
    }

    public headerRowSelection(event: MouseEvent) {
        if (!this.grid.isMultiRowSelectionEnabled) {
            return;
        }

        if (this.grid.selectionService.areAllRowSelected()) {
            this.grid.selectionService.clearRowSelection(event);
        } else {
            this.grid.selectionService.selectAllRows(event);
        }
    }
}

1	import {
2	ChangeDetectionStrategy,
3	ChangeDetectorRef,
4	Component,
5	DoCheck,
6	ElementRef,
7	HostBinding,
8	Input,
9	QueryList,
10	TemplateRef,
11	ViewChild,
12	ViewChildren,
13	booleanAttribute
14	} from '@angular/core';
15	import { DisplayDensity } from '../../core/density';
16	import { flatten } from '../../core/utils';
17	import { IgxGridForOfDirective } from '../../directives/for-of/for_of.directive';
18	import { ColumnType, GridType, IgxHeadSelectorTemplateContext } from '../common/grid.interface';
19	import { IgxGridFilteringCellComponent } from '../filtering/base/grid-filtering-cell.component';
20	import { IgxGridFilteringRowComponent } from '../filtering/base/grid-filtering-row.component';
21	import { IgxGridHeaderGroupComponent } from './grid-header-group.component';	2✔
22	import { IgxGridHeaderComponent } from './grid-header.component';
23	import { IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe } from './pipes';	47,278✔
24	import { IgxGridTopLevelColumns } from '../common/pipes';
25	import { IgxCheckboxComponent } from '../../checkbox/checkbox.component';
26	import { IgxColumnMovingDropDirective } from '../moving/moving.drop.directive';	47,278✔
27	import { NgIf, NgTemplateOutlet, NgClass, NgFor, NgStyle } from '@angular/common';
28
29	/**
30	*
31	* For all intents & purposes treat this component as what a <thead> usually is in the default <table> element.
32	*
33	* This container holds the grid header elements and their behavior/interactions.
34	*	16,914✔
35	* @hidden @internal
36	*/
37	@Component({
38	changeDetection: ChangeDetectionStrategy.OnPush,	×
39	selector: 'igx-grid-header-row',
40	templateUrl: './grid-header-row.component.html',
41	standalone: true,
42	imports: [NgIf, IgxColumnMovingDropDirective, NgTemplateOutlet, NgClass, NgFor, IgxGridHeaderGroupComponent, NgStyle, IgxGridForOfDirective, IgxGridFilteringRowComponent, IgxCheckboxComponent, IgxGridTopLevelColumns, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe]	×
43	})
44	export class IgxGridHeaderRowComponent implements DoCheck {
45		10,071✔
46	/** The grid component containing this element. */
47	@Input()
48	public grid: GridType;	×
49
50	/** Pinned columns of the grid. */
51	@Input()	8,579✔
52	public pinnedColumnCollection: ColumnType[] = [];
53
54	/** Unpinned columns of the grid. */
55	@Input()
56	public unpinnedColumnCollection: ColumnType[] = [];
57
58	@Input()
59	public activeDescendant: string;
60		36,655✔
61	@Input({ transform: booleanAttribute })
62	public hasMRL: boolean;
63		1,759✔
64	@Input()
65	public width: number;
66		2,653✔
67	@Input()
68	public density: DisplayDensity;
69
70	/**
71	* @hidden
72	* @internal	2,653✔
73	*/	864✔
74	@HostBinding('class.igx-grid-thead--cosy')	864✔
75	public get cosyStyle() {
76	return this.density === 'cosy';	2,653✔
77	}
78
79	/**	4,601✔
80	* @hidden	4,601✔
81	* @internal	4,601✔
82	*/	4,601✔
83	@HostBinding('class.igx-grid-thead--compact')
84	public get compactStyle() {
85	return this.density === 'compact';
86	}
87
88	/**
89	* Header groups inside the header row.
90	*
91	* @remark
92	* Note: These are only the top level header groups in case there are multi-column headers
93	* or a specific column layout. If you want to get the flattened collection use the `groups`	47,278✔
94	* property below.
95	*
96	* @hidden @internal
97	* */
98	@ViewChildren(IgxGridHeaderGroupComponent)
99	public _groups: QueryList<IgxGridHeaderGroupComponent>;	×
100
101	/**
102	* The flattened header groups collection.	43✔
103	*	7✔
104	* @hidden @internal
105	*/	36✔
106	public get groups(): IgxGridHeaderGroupComponent[] {	11✔
107	return flatten(this._groups?.toArray() ?? []);
108	}
109		25✔
110	/** Header components in the header row. */
111	public get headers(): IgxGridHeaderComponent[] {
112	return this.groups.map(group => group.header);	2✔
113	}
114
115	/** Filtering cell components in the header row. */
116	public get filters(): IgxGridFilteringCellComponent[] {	2✔
117	return this.groups.map(group => group.filter);
118	}
119
120	/** The virtualized part of the header row containing the unpinned header groups. */
121	@ViewChild('headerVirtualContainer', { read: IgxGridForOfDirective, static: true })
122	public headerContainer: IgxGridForOfDirective<ColumnType, ColumnType[]>;
123
124	public get headerForOf() {
125	return this.headerContainer;
126	}
127
128	@ViewChild('headerDragContainer')
129	public headerDragContainer: ElementRef<HTMLElement>;
130
131	@ViewChild('headerSelectorContainer')
132	public headerSelectorContainer: ElementRef<HTMLElement>;
133
134	@ViewChild('headerGroupContainer')
135	public headerGroupContainer: ElementRef<HTMLElement>;
136		2✔
137	@ViewChild('headSelectorBaseTemplate')
138	public headSelectorBaseTemplate: TemplateRef<IgxHeadSelectorTemplateContext>;
139
140	@ViewChild(IgxGridFilteringRowComponent)
141	public filterRow: IgxGridFilteringRowComponent;
142
143	/**
144	* Expand/collapse all child grids area in a hierarchical grid.
145	* `undefined` in the base and tree grids.
146	*
147	* @internal @hidden
148	*/
149	@ViewChild('headerHierarchyExpander')
150	public headerHierarchyExpander: ElementRef<HTMLElement>;
151
152	public get navigation() {
153	return this.grid.navigation;
154	}
155
156	public get nativeElement() {
157	return this.ref.nativeElement;
158	}
159
160	/**
161	* Returns whether the current grid instance is a hierarchical grid.
162	* as only hierarchical grids have the `isHierarchicalRecord` method.
163	*
164	* @hidden @internal
165	*/
166	public get isHierarchicalGrid() {
167	return !!this.grid.isHierarchicalRecord;
168	}
169
170	public get indentationCSSClasses() {
171	return `igx-grid__header-indentation igx-grid__row-indentation--level-${this.grid.groupingExpressions.length}`;
172	}
173
174	public get rowSelectorsContext(): IgxHeadSelectorTemplateContext {
175	const ctx = {
176	$implicit: {
177	selectedCount: this.grid.selectionService.filteredSelectedRowIds.length as number,
178	totalCount: this.grid.totalRowsCountAfterFilter as number
179	}
180	} as IgxHeadSelectorTemplateContext;
181
182	if (this.isHierarchicalGrid) {
183	ctx.$implicit.selectAll = () => this.grid.selectAllRows();
184	ctx.$implicit.deselectAll = () => this.grid.deselectAllRows();
185	}
186
187	return ctx;
188	}
189
190	constructor(
191	protected ref: ElementRef<HTMLElement>,
192	protected cdr: ChangeDetectorRef
193	) { }
194
195	/**
196	* This hook exists as a workaround for the unfortunate fact
197	* that when we have pinned columns in the grid, the unpinned columns headers
198	* are affected by a delayed change detection cycle after a horizontal scroll :(
199	* Thus, we tell the parent grid change detector to check us at each cycle.
200	*
201	* @hidden @internal
202	*/
203	public ngDoCheck() {
204	this.cdr.markForCheck();
205	}
206
207	/**
208	* @hidden @internal
209	*/
210	public scroll(event: Event) {
211	this.grid.preventHeaderScroll(event);
212	}
213
214	public headerRowSelection(event: MouseEvent) {
215	if (!this.grid.isMultiRowSelectionEnabled) {
216	return;
217	}
218
219	if (this.grid.selectionService.areAllRowSelected()) {
220	this.grid.selectionService.clearRowSelection(event);
221	} else {
222	this.grid.selectionService.selectAllRows(event);
223	}
224	}
225	}

IgniteUI / igniteui-angular / 6770127961

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