26023601418

Committed 18 May 2026 08:57AM UTC coverage: 4.854% (-85.3%) from 90.174%

Build # 26023601418

Build Type

Pull #17281

github

Committed by

web-flow

Commit Message

Merge e7ce7a18e into 5a85df190

Pull Request Pull Request #17281: feat: Added virtual scroll component and sample implementation

Coverage Stats

400 of 17347 branches covered (2.31%)

Branch coverage included in aggregate %.

63 of 222 new or added lines in 4 files covered. (28.38%)

27932 existing lines in 341 files now uncovered.

2022 of 32547 relevant lines covered (6.21%)

0.72 hits per line

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

2.78

/projects/igniteui-angular/combo/src/combo/combo-item.component.ts

import {
    Component,
    HostBinding,
    Input,
    booleanAttribute,
    inject
} from '@angular/core';
import { IgxComboAPIService } from './combo.api';
import { rem } from 'igniteui-angular/core';
import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
import { IgxDropDownItemComponent, Navigate } from 'igniteui-angular/drop-down';

/** @hidden */
@Component({
    selector: 'igx-combo-item',
    templateUrl: 'combo-item.component.html',
    imports: [IgxCheckboxComponent]
})
export class IgxComboItemComponent extends IgxDropDownItemComponent {
    protected comboAPI = inject(IgxComboAPIService);


    /**
     * Gets the height of a list item
     *
     * @hidden
     */
    @Input()
    public itemHeight: string | number = '';

    /** @hidden @internal */
    @HostBinding('style.height.rem')
    public get _itemHeightToRem() {
        if (this.itemHeight) {
            return rem(this.itemHeight);
        }
    }

    @HostBinding('attr.aria-label')
    @Input()
    public override get ariaLabel(): string {
        const valueKey = this.comboAPI.valueKey;
        return (valueKey !== null && this.value != null) ? this.value[valueKey] : this.value;
    }

    /** @hidden @internal */
    @Input({ transform: booleanAttribute })
    public singleMode: boolean;

    /**
     * @hidden
     */
    public override get itemID() {
        const valueKey = this.comboAPI.valueKey;
        return valueKey !== null ? this.value[valueKey] : this.value;
    }

    /**
     * @hidden
     */
    public get comboID() {
        return this.comboAPI.comboID;
    }

    /**
     * @hidden
     * @internal
     */
    public get disableTransitions() {
        return this.comboAPI.disableTransitions;
    }

    /**
     * @hidden
     */
    public override get selected(): boolean {
        return this.comboAPI.is_item_selected(this.itemID);
    }

    public override set selected(value: boolean) {
        if (this.isHeader) {
            return;
        }
        this._selected = value;
    }

    /**
     * @hidden
     */
    public isVisible(direction: Navigate): boolean {
        const rect = this.element.nativeElement.getBoundingClientRect();
        const parentDiv = this.element.nativeElement.parentElement.parentElement.getBoundingClientRect();
        if (direction === Navigate.Down) {
            return rect.y + rect.height <= parentDiv.y + parentDiv.height;
        }
        return rect.y >= parentDiv.y;
    }

    public override clicked(event): void {
        this.comboAPI.disableTransitions = false;
        if (!this.isSelectable) {
            return;
        }
        this.dropDown.navigateItem(this.index);
        this.comboAPI.set_selected_item(this.itemID, event);
    }

    /**
     * @hidden
     * @internal
     * The event that is prevented is the click on the checkbox label element.
     * That is the only visible element that a user can interact with.
     * The click propagates to the host and the preventDefault is to stop it from
     * switching focus to the input it's base on.
     * The toggle happens in an internal handler in the drop-down on the next task queue cycle.
     */
    public disableCheck(event: MouseEvent) {
        event.preventDefault();
    }
}

1	import {
2	Component,
3	HostBinding,
4	Input,
5	booleanAttribute,
6	inject
7	} from '@angular/core';
8	import { IgxComboAPIService } from './combo.api';
9	import { rem } from 'igniteui-angular/core';
10	import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
11	import { IgxDropDownItemComponent, Navigate } from 'igniteui-angular/drop-down';
12
13	/** @hidden */
14	@Component({
15	selector: 'igx-combo-item',
16	templateUrl: 'combo-item.component.html',
17	imports: [IgxCheckboxComponent]
18	})
19	export class IgxComboItemComponent extends IgxDropDownItemComponent {	3✔
UNCOV 20	protected comboAPI = inject(IgxComboAPIService);	×
21
22
23	/**
24	* Gets the height of a list item
25	*
26	* @hidden
27	*/
28	@Input()
UNCOV 29	public itemHeight: string \| number = '';	×
30
31	/** @hidden @internal */
32	@HostBinding('style.height.rem')
33	public get _itemHeightToRem() {
UNCOV 34	if (this.itemHeight) {	×
UNCOV 35	return rem(this.itemHeight);	×
36	}
37	}
38
39	@HostBinding('attr.aria-label')
40	@Input()
41	public override get ariaLabel(): string {
UNCOV 42	const valueKey = this.comboAPI.valueKey;	×
UNCOV 43	return (valueKey !== null && this.value != null) ? this.value[valueKey] : this.value;	×
44	}
45
46	/** @hidden @internal */
47	@Input({ transform: booleanAttribute })
48	public singleMode: boolean;
49
50	/**
51	* @hidden
52	*/
53	public override get itemID() {
UNCOV 54	const valueKey = this.comboAPI.valueKey;	×
UNCOV 55	return valueKey !== null ? this.value[valueKey] : this.value;	×
56	}
57
58	/**
59	* @hidden
60	*/
61	public get comboID() {
62	return this.comboAPI.comboID;	×
63	}
64
65	/**
66	* @hidden
67	* @internal
68	*/
69	public get disableTransitions() {
UNCOV 70	return this.comboAPI.disableTransitions;	×
71	}
72
73	/**
74	* @hidden
75	*/
76	public override get selected(): boolean {
UNCOV 77	return this.comboAPI.is_item_selected(this.itemID);	×
78	}
79
80	public override set selected(value: boolean) {
81	if (this.isHeader) {	×
82	return;	×
83	}
84	this._selected = value;	×
85	}
86
87	/**
88	* @hidden
89	*/
90	public isVisible(direction: Navigate): boolean {
91	const rect = this.element.nativeElement.getBoundingClientRect();	×
92	const parentDiv = this.element.nativeElement.parentElement.parentElement.getBoundingClientRect();	×
93	if (direction === Navigate.Down) {	×
94	return rect.y + rect.height <= parentDiv.y + parentDiv.height;	×
95	}
96	return rect.y >= parentDiv.y;	×
97	}
98
99	public override clicked(event): void {
UNCOV 100	this.comboAPI.disableTransitions = false;	×
UNCOV 101	if (!this.isSelectable) {	×
UNCOV 102	return;	×
103	}
UNCOV 104	this.dropDown.navigateItem(this.index);	×
UNCOV 105	this.comboAPI.set_selected_item(this.itemID, event);	×
106	}
107
108	/**
109	* @hidden
110	* @internal
111	* The event that is prevented is the click on the checkbox label element.
112	* That is the only visible element that a user can interact with.
113	* The click propagates to the host and the preventDefault is to stop it from
114	* switching focus to the input it's base on.
115	* The toggle happens in an internal handler in the drop-down on the next task queue cycle.
116	*/
117	public disableCheck(event: MouseEvent) {
UNCOV 118	event.preventDefault();	×
119	}
120	}

IgniteUI / igniteui-angular / 26023601418

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