13561607909

Committed 27 Feb 2025 08:03AM UTC coverage: 91.644% (+0.003%) from 91.641%

Build # 13561607909

Build Type

push

github

Committed by

web-flow

Commit Message

fix(grid): Update grid cell active state selector specificity (#15402)

Run Details

13328 of 15596 branches covered (85.46%)

26882 of 29333 relevant lines covered (91.64%)

33708.8 hits per line

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

95.65

/projects/igniteui-angular/src/lib/paginator/paginator.component.ts

import { ChangeDetectorRef, Component, ContentChild, Directive, ElementRef, EventEmitter, Host, HostBinding, Input, Output, forwardRef } from '@angular/core';
import { IPageCancellableEventArgs, IPageEventArgs } from './paginator-interfaces';
import { IPaginatorResourceStrings, PaginatorResourceStringsEN } from '../core/i18n/paginator-resources';
import { OverlaySettings } from '../services/overlay/utilities';
import { IgxSelectItemComponent } from '../select/select-item.component';
import { FormsModule } from '@angular/forms';
import { IgxSelectComponent } from '../select/select.component';
import { IgxIconComponent } from '../icon/icon.component';
import { IgxRippleDirective } from '../directives/ripple/ripple.directive';
import { getCurrentResourceStrings } from '../core/i18n/resources';
import { IgxIconButtonDirective } from '../directives/button/icon-button.directive';
import { IgxPaginatorToken } from './token';

@Directive({
    selector: '[igxPaginatorContent],igx-paginator-content',
    standalone: true
})
export class IgxPaginatorContentDirective {
    /**
     * @internal
     * @hidden
     */
    @HostBinding('class.igx-paginator-content')
    public cssClass = 'igx-paginator-content';
}

/* blazorElement */
/* mustUseNGParentAnchor */
/* wcElementTag: igc-paginator */
/* blazorIndirectRender */
/* singleInstanceIdentifier */
/* contentParent: GridBaseDirective */
/* contentParent: RowIsland */
/* contentParent: HierarchicalGrid */
/* jsonAPIManageCollectionInMarkup */
/**
 * Paginator component description
 * @igxParent IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxPivotGridComponent, *
 */
@Component({
    selector: 'igx-paginator',
    templateUrl: 'paginator.component.html',
    imports: [forwardRef(() => IgxPageSizeSelectorComponent), forwardRef(() => IgxPageNavigationComponent)],
    providers: [
        { provide: IgxPaginatorToken, useExisting: IgxPaginatorComponent }
    ]
})
// switch IgxPaginatorToken to extends once density is dropped
export class IgxPaginatorComponent implements IgxPaginatorToken {

    /**
     * @hidden
     * @internal
     */
    @ContentChild(IgxPaginatorContentDirective)
    public customContent: IgxPaginatorContentDirective;

    /**
     * Emitted when `perPage` property value of the paginator is changed.
     *
     * @example
     * ```html
     * <igx-paginator (perPageChange)="onPerPageChange($event)"></igx-paginator>
     * ```
     * ```typescript
     * public onPerPageChange(perPage: number) {
     *   this.perPage = perPage;
     * }
     * ```
     */
    @Output()
    public perPageChange = new EventEmitter<number>();

    /**
     * Emitted after the current page is changed.
     *
     * @example
     * ```html
     * <igx-paginator (pageChange)="onPageChange($event)"></igx-paginator>
     * ```
     * ```typescript
     * public onPageChange(page: number) {
     *   this.currentPage = page;
     * }
     * ```
     */
    @Output()
    public pageChange = new EventEmitter<number>();

    /**
     * Emitted before paging is performed.
     *
     * @remarks
     * Returns an object consisting of the current and next pages.
     * @example
     * ```html
     * <igx-paginator (paging)="pagingHandler($event)"></igx-paginator>
     * ```
     */
    @Output()
    public paging = new EventEmitter<IPageCancellableEventArgs>();

    /**
     * Emitted after paging is performed.
     *
     * @remarks
     * Returns an object consisting of the previous and current pages.
     * @example
     * ```html
     * <igx-paginator (pagingDone)="pagingDone($event)"></igx-paginator>
     * ```
     */
    @Output()
    public pagingDone = new EventEmitter<IPageEventArgs>();

    /**
     * Total pages calculated from totalRecords and perPage
     */
    public totalPages: number;
    protected _page = 0;
    protected _totalRecords: number;
    protected _selectOptions = [5, 10, 15, 25, 50, 100, 500];
    protected _perPage = 15;

    private _resourceStrings = getCurrentResourceStrings(PaginatorResourceStringsEN);
    private _overlaySettings: OverlaySettings = {};
    private defaultSelectValues = [5, 10, 15, 25, 50, 100, 500];

    /** @hidden @internal */
    @HostBinding('class.igx-paginator')
    public cssClass = 'igx-paginator';

    /**
     * Gets/Sets the current page of the paginator.
     * The default is 0.
     * ```typescript
     * let page = this.paginator.page;
     * ```
     *
     * @memberof IgxPaginatorComponent
     */
    @Input()
    public get page() {
        return this._page;
    }

    public set page(value: number) {
        if (this._page === value || value < 0 || value > this.totalPages) {
            return;
        }
        const cancelEventArgs: IPageCancellableEventArgs = { current: this._page, next: value, cancel: false };
        const eventArgs: IPageEventArgs = { previous: this._page, current: value };

        this.paging.emit(cancelEventArgs);
        if (cancelEventArgs.cancel) {
            return;
        }
        this._page = value;
        this.pageChange.emit(this._page);

        this.pagingDone.emit(eventArgs);
    }

    /**
     * Gets/Sets the number of visible items per page in the paginator.
     * The default is 15.
     * ```typescript
     * let itemsPerPage = this.paginator.perPage;
     * ```
     *
     * @memberof IgxPaginatorComponent
     */
    @Input()
    public get perPage() {
        return this._perPage;
    }

    public set perPage(value: number) {
        if (value < 0 || this.perPage === value) {
            return;
        }
        this._perPage = Number(value);
        this.perPageChange.emit(this._perPage);
        this._selectOptions = this.sortUniqueOptions(this.defaultSelectValues, this._perPage);
        this.totalPages = Math.ceil(this.totalRecords / this._perPage);
        if (this.totalPages !== 0 && this.page >= this.totalPages) {
            this.page = this.totalPages - 1;
        }
    }

    /**
     * Sets the total records.
     * ```typescript
     * let totalRecords = this.paginator.totalRecords;
     * ```
     *
     * @memberof IgxPaginatorComponent
     */
    @Input()
    public get totalRecords() {
        return this._totalRecords;
    }

    public set totalRecords(value: number) {
        this._totalRecords = value;
        this.totalPages = Math.ceil(this.totalRecords / this.perPage);
        if (this.page > this.totalPages) {
            this.page = 0;
        }
        this.cdr.detectChanges();
    }

    /**
     * Sets custom options in the select of the paginator
     * ```typescript
     * let options = this.paginator.selectOptions;
     * ```
     *
     * @memberof IgxPaginatorComponent
     */
    @Input()
    public get selectOptions() {
        return this._selectOptions;
    }

    public set selectOptions(value: Array<number>) {
        this._selectOptions = this.sortUniqueOptions(value, this._perPage);
        this.defaultSelectValues = [...value];
    }

    /**
     * Sets custom OverlaySettings.
     * ```html
     * <igx-paginator [overlaySettings] = "customOverlaySettings"></igx-paginator>
     * ```
     */
    @Input()
    public get overlaySettings(): OverlaySettings {
        return this._overlaySettings;
    }

    public set overlaySettings(value: OverlaySettings) {
        this._overlaySettings = Object.assign({}, this._overlaySettings, value);
    }

    /* mustSetInCodePlatforms: WebComponents;Blazor;React */
    /**
     * An accessor that sets the resource strings.
     * By default it uses EN resources.
     */
    @Input()
    public set resourceStrings(value: IPaginatorResourceStrings) {
        this._resourceStrings = Object.assign({}, this._resourceStrings, value);
    }

    /**
     * An accessor that returns the resource strings.
     */
    public get resourceStrings(): IPaginatorResourceStrings {
        return this._resourceStrings;
    }

    constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef) { }

    /**
     * Returns if the current page is the last page.
     * ```typescript
     * const lastPage = this.paginator.isLastPage;
     * ```
     */
    public get isLastPage(): boolean {
        return this.page + 1 >= this.totalPages;
    }

    /**
     * Returns if the current page is the first page.
     * ```typescript
     * const lastPage = this.paginator.isFirstPage;
     * ```
     */
    public get isFirstPage(): boolean {
        return this.page === 0;
    }


    /**
     * Returns if the first pager buttons should be disabled
     * @hidden
     * @deprecated in version 18.1.0. Use the `isFirstPage` property instead.
     */
    public get isFirstPageDisabled(): boolean {
        return this.isFirstPage;
    }

    /**
     * Returns if the last pager buttons should be disabled
     * @hidden
     * @deprecated in version 18.1.0. Use the `isLastPage` property instead.
     */
    public get isLastPageDisabled(): boolean {
        return this.isLastPage;
    }

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

    /**
     * Goes to the next page of the `IgxPaginatorComponent`, if the paginator is not already at the last page.
     * ```typescript
     * this.paginator.nextPage();
     * ```
     *
     * @memberof IgxPaginatorComponent
     */
    public nextPage(): void {
        if (!this.isLastPage) {
            this.page += 1;
        }
    }
    /**
     * Goes to the previous page of the `IgxPaginatorComponent`, if the paginator is not already at the first page.
     * ```typescript
     * this.paginator.previousPage();
     * ```
     *
     * @memberof IgxPaginatorComponent
     */
    public previousPage(): void {
        if (!this.isFirstPage) {
            this.page -= 1;
        }
    }
    /**
     * Goes to the desired page index.
     * ```typescript
     * this.paginator.paginate(1);
     * ```
     *
     * @param val
     * @memberof IgxPaginatorComponent
     */
    public paginate(val: number): void {
        if (val < 0 || val > this.totalPages - 1) {
            return;
        }
        this.page = val;
    }

    private sortUniqueOptions(values: Array<number>, newOption: number): number[] {
        return Array.from(new Set([...values, newOption])).sort((a, b) => a - b);
    }
}


@Component({
    selector: 'igx-page-size',
    templateUrl: 'page-size-selector.component.html',
    imports: [IgxSelectComponent, FormsModule, IgxSelectItemComponent]
})
export class IgxPageSizeSelectorComponent {
    /**
     * @internal
     * @hidden
     */
    @HostBinding('class.igx-page-size')
    public cssClass = 'igx-page-size';

    constructor(@Host() public paginator: IgxPaginatorComponent) { }
}


@Component({
    selector: 'igx-page-nav',
    templateUrl: 'pager.component.html',
    imports: [IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective]
})
export class IgxPageNavigationComponent {
    /**
     * @internal
     * @hidden
     */
    @HostBinding('class.igx-page-nav')
    public cssClass = 'igx-page-nav';

    /**
     * Sets the `role` attribute of the element.
     */
    @HostBinding('attr.role')
    @Input()
    public role = 'navigation';

    constructor(
        @Host()
        public paginator: IgxPaginatorComponent) { }
}

1	import { ChangeDetectorRef, Component, ContentChild, Directive, ElementRef, EventEmitter, Host, HostBinding, Input, Output, forwardRef } from '@angular/core';
2	import { IPageCancellableEventArgs, IPageEventArgs } from './paginator-interfaces';
3	import { IPaginatorResourceStrings, PaginatorResourceStringsEN } from '../core/i18n/paginator-resources';
4	import { OverlaySettings } from '../services/overlay/utilities';
5	import { IgxSelectItemComponent } from '../select/select-item.component';
6	import { FormsModule } from '@angular/forms';
7	import { IgxSelectComponent } from '../select/select.component';
8	import { IgxIconComponent } from '../icon/icon.component';
9	import { IgxRippleDirective } from '../directives/ripple/ripple.directive';
10	import { getCurrentResourceStrings } from '../core/i18n/resources';
11	import { IgxIconButtonDirective } from '../directives/button/icon-button.directive';
12	import { IgxPaginatorToken } from './token';
13
14	@Directive({
15	selector: '[igxPaginatorContent],igx-paginator-content',
16	standalone: true
17	})
18	export class IgxPaginatorContentDirective {	2✔
19	/**
20	* @internal
21	* @hidden
22	*/
23	@HostBinding('class.igx-paginator-content')
24	public cssClass = 'igx-paginator-content';	5✔
25	}
26
27	/* blazorElement */
28	/* mustUseNGParentAnchor */
29	/* wcElementTag: igc-paginator */
30	/* blazorIndirectRender */
31	/* singleInstanceIdentifier */
32	/* contentParent: GridBaseDirective */
33	/* contentParent: RowIsland */
34	/* contentParent: HierarchicalGrid */
35	/* jsonAPIManageCollectionInMarkup */
36	/**
37	* Paginator component description
38	* @igxParent IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxPivotGridComponent, *
39	*/
40	@Component({
41	selector: 'igx-paginator',
42	templateUrl: 'paginator.component.html',
43	imports: [forwardRef(() => IgxPageSizeSelectorComponent), forwardRef(() => IgxPageNavigationComponent)],	2,798✔
44	providers: [
45	{ provide: IgxPaginatorToken, useExisting: IgxPaginatorComponent }
46	]
47	})
48	// switch IgxPaginatorToken to extends once density is dropped
49	export class IgxPaginatorComponent implements IgxPaginatorToken {	2✔
50
51	/**
52	* @hidden
53	* @internal
54	*/
55	@ContentChild(IgxPaginatorContentDirective)
56	public customContent: IgxPaginatorContentDirective;
57
58	/**
59	* Emitted when `perPage` property value of the paginator is changed.
60	*
61	* @example
62	* ```html
63	* <igx-paginator (perPageChange)="onPerPageChange($event)"></igx-paginator>
64	* ```
65	* ```typescript
66	* public onPerPageChange(perPage: number) {
67	* this.perPage = perPage;
68	* }
69	* ```
70	*/
71	@Output()
72	public perPageChange = new EventEmitter<number>();	237✔
73
74	/**
75	* Emitted after the current page is changed.
76	*
77	* @example
78	* ```html
79	* <igx-paginator (pageChange)="onPageChange($event)"></igx-paginator>
80	* ```
81	* ```typescript
82	* public onPageChange(page: number) {
83	* this.currentPage = page;
84	* }
85	* ```
86	*/
87	@Output()
88	public pageChange = new EventEmitter<number>();	237✔
89
90	/**
91	* Emitted before paging is performed.
92	*
93	* @remarks
94	* Returns an object consisting of the current and next pages.
95	* @example
96	* ```html
97	* <igx-paginator (paging)="pagingHandler($event)"></igx-paginator>
98	* ```
99	*/
100	@Output()
101	public paging = new EventEmitter<IPageCancellableEventArgs>();	237✔
102
103	/**
104	* Emitted after paging is performed.
105	*
106	* @remarks
107	* Returns an object consisting of the previous and current pages.
108	* @example
109	* ```html
110	* <igx-paginator (pagingDone)="pagingDone($event)"></igx-paginator>
111	* ```
112	*/
113	@Output()
114	public pagingDone = new EventEmitter<IPageEventArgs>();	237✔
115
116	/**
117	* Total pages calculated from totalRecords and perPage
118	*/
119	public totalPages: number;
120	protected _page = 0;	237✔
121	protected _totalRecords: number;
122	protected _selectOptions = [5, 10, 15, 25, 50, 100, 500];	237✔
123	protected _perPage = 15;	237✔
124
125	private _resourceStrings = getCurrentResourceStrings(PaginatorResourceStringsEN);	237✔
126	private _overlaySettings: OverlaySettings = {};	237✔
127	private defaultSelectValues = [5, 10, 15, 25, 50, 100, 500];	237✔
128
129	/** @hidden @internal */
130	@HostBinding('class.igx-paginator')
131	public cssClass = 'igx-paginator';	237✔
132
133	/**
134	* Gets/Sets the current page of the paginator.
135	* The default is 0.
136	* ```typescript
137	* let page = this.paginator.page;
138	* ```
139	*
140	* @memberof IgxPaginatorComponent
141	*/
142	@Input()
143	public get page() {
144	return this._page;	96,615✔
145	}
146
147	public set page(value: number) {
148	if (this._page === value \|\| value < 0 \|\| value > this.totalPages) {	425✔
149	return;	298✔
150	}
151	const cancelEventArgs: IPageCancellableEventArgs = { current: this._page, next: value, cancel: false };	127✔
152	const eventArgs: IPageEventArgs = { previous: this._page, current: value };	127✔
153
154	this.paging.emit(cancelEventArgs);	127✔
155	if (cancelEventArgs.cancel) {	127✔
156	return;	2✔
157	}
158	this._page = value;	125✔
159	this.pageChange.emit(this._page);	125✔
160
161	this.pagingDone.emit(eventArgs);	125✔
162	}
163
164	/**
165	* Gets/Sets the number of visible items per page in the paginator.
166	* The default is 15.
167	* ```typescript
168	* let itemsPerPage = this.paginator.perPage;
169	* ```
170	*
171	* @memberof IgxPaginatorComponent
172	*/
173	@Input()
174	public get perPage() {
175	return this._perPage;	79,137✔
176	}
177
178	public set perPage(value: number) {
179	if (value < 0 \|\| this.perPage === value) {	180✔
180	return;	1✔
181	}
182	this._perPage = Number(value);	179✔
183	this.perPageChange.emit(this._perPage);	179✔
184	this._selectOptions = this.sortUniqueOptions(this.defaultSelectValues, this._perPage);	179✔
185	this.totalPages = Math.ceil(this.totalRecords / this._perPage);	179✔
186	if (this.totalPages !== 0 && this.page >= this.totalPages) {	179✔
187	this.page = this.totalPages - 1;	1✔
188	}
189	}
190
191	/**
192	* Sets the total records.
193	* ```typescript
194	* let totalRecords = this.paginator.totalRecords;
195	* ```
196	*
197	* @memberof IgxPaginatorComponent
198	*/
199	@Input()
200	public get totalRecords() {
201	return this._totalRecords;	712✔
202	}
203
204	public set totalRecords(value: number) {
205	this._totalRecords = value;	519✔
206	this.totalPages = Math.ceil(this.totalRecords / this.perPage);	519✔
207	if (this.page > this.totalPages) {	519✔
208	this.page = 0;	2✔
209	}
210	this.cdr.detectChanges();	519✔
211	}
212
213	/**
214	* Sets custom options in the select of the paginator
215	* ```typescript
216	* let options = this.paginator.selectOptions;
217	* ```
218	*
219	* @memberof IgxPaginatorComponent
220	*/
221	@Input()
222	public get selectOptions() {
223	return this._selectOptions;	2,140✔
224	}
225
226	public set selectOptions(value: Array<number>) {
227	this._selectOptions = this.sortUniqueOptions(value, this._perPage);	3✔
228	this.defaultSelectValues = [...value];	3✔
229	}
230
231	/**
232	* Sets custom OverlaySettings.
233	* ```html
234	* <igx-paginator [overlaySettings] = "customOverlaySettings"></igx-paginator>
235	* ```
236	*/
237	@Input()
238	public get overlaySettings(): OverlaySettings {
239	return this._overlaySettings;	2,139✔
240	}
241
242	public set overlaySettings(value: OverlaySettings) {
243	this._overlaySettings = Object.assign({}, this._overlaySettings, value);	73✔
244	}
245
246	/* mustSetInCodePlatforms: WebComponents;Blazor;React */
247	/**
248	* An accessor that sets the resource strings.
249	* By default it uses EN resources.
250	*/
251	@Input()
252	public set resourceStrings(value: IPaginatorResourceStrings) {
253	this._resourceStrings = Object.assign({}, this._resourceStrings, value);	×
254	}
255
256	/**
257	* An accessor that returns the resource strings.
258	*/
259	public get resourceStrings(): IPaginatorResourceStrings {
260	return this._resourceStrings;	12,836✔
261	}
262
263	constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef) { }	237✔
264
265	/**
266	* Returns if the current page is the last page.
267	* ```typescript
268	* const lastPage = this.paginator.isLastPage;
269	* ```
270	*/
271	public get isLastPage(): boolean {
272	return this.page + 1 >= this.totalPages;	8,592✔
273	}
274
275	/**
276	* Returns if the current page is the first page.
277	* ```typescript
278	* const lastPage = this.paginator.isFirstPage;
279	* ```
280	*/
281	public get isFirstPage(): boolean {
282	return this.page === 0;	8,580✔
283	}
284
285
286	/**
287	* Returns if the first pager buttons should be disabled
288	* @hidden
289	* @deprecated in version 18.1.0. Use the `isFirstPage` property instead.
290	*/
291	public get isFirstPageDisabled(): boolean {
292	return this.isFirstPage;	×
293	}
294
295	/**
296	* Returns if the last pager buttons should be disabled
297	* @hidden
298	* @deprecated in version 18.1.0. Use the `isLastPage` property instead.
299	*/
300	public get isLastPageDisabled(): boolean {
301	return this.isLastPage;	×
302	}
303
304	public get nativeElement() {
305	return this.elementRef.nativeElement;	91,501✔
306	}
307
308	/**
309	* Goes to the next page of the `IgxPaginatorComponent`, if the paginator is not already at the last page.
310	* ```typescript
311	* this.paginator.nextPage();
312	* ```
313	*
314	* @memberof IgxPaginatorComponent
315	*/
316	public nextPage(): void {
317	if (!this.isLastPage) {	25✔
318	this.page += 1;	24✔
319	}
320	}
321	/**
322	* Goes to the previous page of the `IgxPaginatorComponent`, if the paginator is not already at the first page.
323	* ```typescript
324	* this.paginator.previousPage();
325	* ```
326	*
327	* @memberof IgxPaginatorComponent
328	*/
329	public previousPage(): void {
330	if (!this.isFirstPage) {	13✔
331	this.page -= 1;	12✔
332	}
333	}
334	/**
335	* Goes to the desired page index.
336	* ```typescript
337	* this.paginator.paginate(1);
338	* ```
339	*
340	* @param val
341	* @memberof IgxPaginatorComponent
342	*/
343	public paginate(val: number): void {
344	if (val < 0 \|\| val > this.totalPages - 1) {	34✔
345	return;	4✔
346	}
347	this.page = val;	30✔
348	}
349
350	private sortUniqueOptions(values: Array<number>, newOption: number): number[] {
351	return Array.from(new Set([...values, newOption])).sort((a, b) => a - b);	1,360✔
352	}
353	}
354
355
356	@Component({
357	selector: 'igx-page-size',
358	templateUrl: 'page-size-selector.component.html',
359	imports: [IgxSelectComponent, FormsModule, IgxSelectItemComponent]
360	})
361	export class IgxPageSizeSelectorComponent {	2✔
362	/**
363	* @internal
364	* @hidden
365	*/
366	@HostBinding('class.igx-page-size')
367	public cssClass = 'igx-page-size';	230✔
368
369	constructor(@Host() public paginator: IgxPaginatorComponent) { }	230✔
370	}
371
372
373	@Component({
374	selector: 'igx-page-nav',
375	templateUrl: 'pager.component.html',
376	imports: [IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective]
377	})
378	export class IgxPageNavigationComponent {	2✔
379	/**
380	* @internal
381	* @hidden
382	*/
383	@HostBinding('class.igx-page-nav')
384	public cssClass = 'igx-page-nav';	230✔
385
386	/**
387	* Sets the `role` attribute of the element.
388	*/
389	@HostBinding('attr.role')
390	@Input()
391	public role = 'navigation';	230✔
392
393	constructor(
394	@Host()
395	public paginator: IgxPaginatorComponent) { }	230✔
396	}

IgniteUI / igniteui-angular / 13561607909

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