13331632524

Committed 14 Feb 2025 02:51PM UTC coverage: 22.015% (-69.6%) from 91.622%

Build # 13331632524

Build Type

Pull #15372

github

Committed by

web-flow

Commit Message

Merge d52d57714 into bcb78ae0a

Pull Request Pull Request #15372: chore(*): test ci passing

Run Details

1990 of 15592 branches covered (12.76%)

431 of 964 new or added lines in 18 files covered. (44.71%)

19956 existing lines in 307 files now uncovered.

6452 of 29307 relevant lines covered (22.02%)

249.17 hits per line

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

46.94

/projects/igniteui-angular/src/lib/drop-down/drop-down-item.base.ts

import { IDropDownBase, IGX_DROPDOWN_BASE } from './drop-down.common';
import { Directive, Input, HostBinding, HostListener, ElementRef, Optional, Inject, Output, EventEmitter, booleanAttribute, DoCheck } from '@angular/core';
import { IgxSelectionAPIService } from '../core/selection';
import { IgxDropDownGroupComponent } from './drop-down-group.component';

let NEXT_ID = 0;

/**
 * An abstract class defining a drop-down item:
 * With properties / styles for selection, highlight, height
 * Bindable property for passing data (`value: any`)
 * Parent component (has to be used under a parent with type `IDropDownBase`)
 * Method for handling click on Host()
 */
@Directive({
    selector: '[igxDropDownItemBase]',
    standalone: true
})
export class IgxDropDownItemBaseDirective implements DoCheck {
    /**
     * Sets/gets the `id` of the item.
     * ```html
     * <igx-drop-down-item [id] = 'igx-drop-down-item-0'></igx-drop-down-item>
     * ```
     * ```typescript
     * let itemId =  this.item.id;
     * ```
     *
     * @memberof IgxSelectItemComponent
     */
    @HostBinding('attr.id')
    @Input()
    public id = `igx-drop-down-item-${NEXT_ID++}`;

    @HostBinding('attr.aria-label')
    @Input()
    public get ariaLabel(): string {
        return this._label ? this._label : this.value ? this.value : this.id;
    }

    public set ariaLabel(value: string) {
        this._label = value;
    }

    /**
     * @hidden @internal
     */
    public get itemID() {
        return this;
    }

    /**
     * The data index of the dropdown item.
     *
     * ```typescript
     * // get the data index of the selected dropdown item
     * let selectedItemIndex = this.dropdown.selectedItem.index
     * ```
     */
    @Input()
    public get index(): number {
        if (this._index === null) {
            return this.itemIndex;
        }
        return this._index;
    }

    public set index(value) {
        this._index = value;
    }

    /**
     * Gets/sets the value of the item if the item is databound
     *
     * ```typescript
     * // usage in IgxDropDownItemComponent
     * // get
     * let mySelectedItemValue = this.dropdown.selectedItem.value;
     *
     * // set
     * let mySelectedItem = this.dropdown.selectedItem;
     * mySelectedItem.value = { id: 123, name: 'Example Name' }
     *
     * // usage in IgxComboItemComponent
     * // get
     * let myComboItemValue = this.combo.items[0].value;
     * ```
     */
    @Input()
    public value: any;

    /**
     * @hidden @internal
     */
    @HostBinding('class.igx-drop-down__item')
    public get itemStyle(): boolean {
        return !this.isHeader;
    }

    /**
     * Sets/Gets if the item is the currently selected one in the dropdown
     *
     * ```typescript
     *  let mySelectedItem = this.dropdown.selectedItem;
     *  let isMyItemSelected = mySelectedItem.selected; // true
     * ```
     *
     * Two-way data binding
     * ```html
     * <igx-drop-down-item [(selected)]='model.isSelected'></igx-drop-down-item>
     * ```
     */
    @Input({ transform: booleanAttribute })
    @HostBinding('attr.aria-selected')
    @HostBinding('class.igx-drop-down__item--selected')
    public get selected(): boolean {
        return this._selected;
    }

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

    /**
     * @hidden
     */
    @Output()
    public selectedChange = new EventEmitter<boolean>();

    /**
     * Sets/gets if the given item is focused
     * ```typescript
     *  let mySelectedItem = this.dropdown.selectedItem;
     *  let isMyItemFocused = mySelectedItem.focused;
     * ```
     */
    @HostBinding('class.igx-drop-down__item--focused')
    public get focused(): boolean {
        return this.isSelectable && this._focused;
    }

    /**
     * ```html
     *  <igx-drop-down-item *ngFor="let item of items" focused={{!item.focused}}>
     *      <div>
     *          {{item.field}}
     *      </div>
     *  </igx-drop-down-item>
     * ```
     */
    public set focused(value: boolean) {
        this._focused = value;
    }

    /**
     * Sets/gets if the given item is header
     * ```typescript
     *  // get
     *  let mySelectedItem = this.dropdown.selectedItem;
     *  let isMyItemHeader = mySelectedItem.isHeader;
     * ```
     *
     * ```html
     *  <!--set-->
     *  <igx-drop-down-item *ngFor="let item of items">
     *      <div *ngIf="items.indexOf(item) === 5; then item.isHeader = true">
     *          {{item.field}}
     *      </div>
     *  </igx-drop-down-item>
     * ```
     */
    @Input({ transform: booleanAttribute })
    @HostBinding('class.igx-drop-down__header')
    public isHeader: boolean;

    /**
     * Sets/gets if the given item is disabled
     *
     * ```typescript
     *  // get
     *  let mySelectedItem = this.dropdown.selectedItem;
     *  let myItemIsDisabled = mySelectedItem.disabled;
     * ```
     *
     * ```html
     *  <igx-drop-down-item *ngFor="let item of items" disabled={{!item.disabled}}>
     *      <div>
     *          {{item.field}}
     *      </div>
     *  </igx-drop-down-item>
     * ```
     * **NOTE:** Drop-down items inside of a disabled `IgxDropDownGroup` will always count as disabled
     */
    @Input({ transform: booleanAttribute })
    @HostBinding('attr.aria-disabled')
    @HostBinding('class.igx-drop-down__item--disabled')
    public get disabled(): boolean {
        return this.group ? this.group.disabled || this._disabled : this._disabled;
    }

    public set disabled(value: boolean) {
        this._disabled = value;
    }

    /**
     * Gets/sets the `role` attribute of the item. Default is 'option'.
     *
     * ```html
     *  <igx-drop-down-item [role]="customRole"></igx-drop-down-item>
     * ```
     */
    @Input()
    @HostBinding('attr.role')
    public role = 'option';

    /**
     * Gets item index
     *
     * @hidden @internal
     */
    public get itemIndex(): number {
        return this.dropDown.items.indexOf(this);
    }

    /**
     * Gets item element height
     *
     * @hidden @internal
     */
    public get elementHeight(): number {
        return this.elementRef.nativeElement.clientHeight;
    }

    /**
     * Get item html element
     *
     * @hidden @internal
     */
    public get element(): ElementRef {
        return this.elementRef;
    }

    protected get hasIndex(): boolean {
        return this._index !== null && this._index !== undefined;
    }

    /**
     * @hidden
     */
    protected _focused = false;
    protected _selected = false;
    protected _index = null;
    protected _disabled = false;
    protected _label = null;

    constructor(
        @Inject(IGX_DROPDOWN_BASE) protected dropDown: IDropDownBase,
        protected elementRef: ElementRef,
        @Optional() protected group: IgxDropDownGroupComponent,
        @Optional() @Inject(IgxSelectionAPIService) protected selection?: IgxSelectionAPIService
    ) { }

    /**
     * @hidden
     * @internal
     */
    @HostListener('click', ['$event'])
    public clicked(event): void { // eslint-disable-line
    }

    /**
     * @hidden
     * @internal
     */
    @HostListener('mousedown', ['$event'])
    public handleMousedown(event: MouseEvent): void {
        if (!this.dropDown.allowItemsFocus) {
            event.preventDefault();
        }
    }

    public ngDoCheck(): void {
        if (this._selected) {
            const dropDownSelectedItem = this.dropDown.selectedItem;
            if (!dropDownSelectedItem) {
                this.dropDown.selectItem(this, undefined, false);
            } else if (this.hasIndex
                ? this._index !== dropDownSelectedItem.index || this.value !== dropDownSelectedItem.value :
                this !== dropDownSelectedItem) {
                this.dropDown.selectItem(this, undefined, false);
            }
        }
    }

    /** Returns true if the items is not a header or disabled  */
    protected get isSelectable(): boolean {
        return !(this.disabled || this.isHeader);
    }

    /** If `allowItemsFocus` is enabled, keep the browser focus on the active item */
    protected ensureItemFocus() {
        if (this.dropDown.allowItemsFocus) {
            const focusedItem = this.dropDown.items.find((item) => item.focused);
            if (!focusedItem) {
                return;
            }
            focusedItem.element.nativeElement.focus({ preventScroll: true });
        }
    }
}

1	import { IDropDownBase, IGX_DROPDOWN_BASE } from './drop-down.common';
2	import { Directive, Input, HostBinding, HostListener, ElementRef, Optional, Inject, Output, EventEmitter, booleanAttribute, DoCheck } from '@angular/core';
3	import { IgxSelectionAPIService } from '../core/selection';
4	import { IgxDropDownGroupComponent } from './drop-down-group.component';
5
6	let NEXT_ID = 0;	2✔
7
8	/**
9	* An abstract class defining a drop-down item:
10	* With properties / styles for selection, highlight, height
11	* Bindable property for passing data (`value: any`)
12	* Parent component (has to be used under a parent with type `IDropDownBase`)
13	* Method for handling click on Host()
14	*/
15	@Directive({
16	selector: '[igxDropDownItemBase]',
17	standalone: true
18	})
19	export class IgxDropDownItemBaseDirective implements DoCheck {	2✔
20	/**
21	* Sets/gets the `id` of the item.
22	* ```html
23	* <igx-drop-down-item [id] = 'igx-drop-down-item-0'></igx-drop-down-item>
24	* ```
25	* ```typescript
26	* let itemId = this.item.id;
27	* ```
28	*
29	* @memberof IgxSelectItemComponent
30	*/
31	@HostBinding('attr.id')
32	@Input()
33	public id = `igx-drop-down-item-${NEXT_ID++}`;	1,042✔
34
35	@HostBinding('attr.aria-label')
36	@Input()
37	public get ariaLabel(): string {
38	return this._label ? this._label : this.value ? this.value : this.id;	6,621!
39	}
40
41	public set ariaLabel(value: string) {
42	this._label = value;	×
43	}
44
45	/**
46	* @hidden @internal
47	*/
48	public get itemID() {
49	return this;	×
50	}
51
52	/**
53	* The data index of the dropdown item.
54	*
55	* ```typescript
56	* // get the data index of the selected dropdown item
57	* let selectedItemIndex = this.dropdown.selectedItem.index
58	* ```
59	*/
60	@Input()
61	public get index(): number {
UNCOV 62	if (this._index === null) {	×
UNCOV 63	return this.itemIndex;	×
64	}
UNCOV 65	return this._index;	×
66	}
67
68	public set index(value) {
69	this._index = value;	269✔
70	}
71
72	/**
73	* Gets/sets the value of the item if the item is databound
74	*
75	* ```typescript
76	* // usage in IgxDropDownItemComponent
77	* // get
78	* let mySelectedItemValue = this.dropdown.selectedItem.value;
79	*
80	* // set
81	* let mySelectedItem = this.dropdown.selectedItem;
82	* mySelectedItem.value = { id: 123, name: 'Example Name' }
83	*
84	* // usage in IgxComboItemComponent
85	* // get
86	* let myComboItemValue = this.combo.items[0].value;
87	* ```
88	*/
89	@Input()
90	public value: any;
91
92	/**
93	* @hidden @internal
94	*/
95	@HostBinding('class.igx-drop-down__item')
96	public get itemStyle(): boolean {
97	return !this.isHeader;	11,529✔
98	}
99
100	/**
101	* Sets/Gets if the item is the currently selected one in the dropdown
102	*
103	* ```typescript
104	* let mySelectedItem = this.dropdown.selectedItem;
105	* let isMyItemSelected = mySelectedItem.selected; // true
106	* ```
107	*
108	* Two-way data binding
109	* ```html
110	* <igx-drop-down-item [(selected)]='model.isSelected'></igx-drop-down-item>
111	* ```
112	*/
113	@Input({ transform: booleanAttribute })
114	@HostBinding('attr.aria-selected')
115	@HostBinding('class.igx-drop-down__item--selected')
116	public get selected(): boolean {
117	return this._selected;	×
118	}
119
120	public set selected(value: boolean) {
121	if (this.isHeader) {	×
122	return;	×
123	}
124	this._selected = value;	×
125	this.selectedChange.emit(this._selected);	×
126	}
127
128	/**
129	* @hidden
130	*/
131	@Output()
132	public selectedChange = new EventEmitter<boolean>();	1,042✔
133
134	/**
135	* Sets/gets if the given item is focused
136	* ```typescript
137	* let mySelectedItem = this.dropdown.selectedItem;
138	* let isMyItemFocused = mySelectedItem.focused;
139	* ```
140	*/
141	@HostBinding('class.igx-drop-down__item--focused')
142	public get focused(): boolean {
143	return this.isSelectable && this._focused;	×
144	}
145
146	/**
147	* ```html
148	* <igx-drop-down-item *ngFor="let item of items" focused={{!item.focused}}>
149	* <div>
150	* {{item.field}}
151	* </div>
152	* </igx-drop-down-item>
153	* ```
154	*/
155	public set focused(value: boolean) {
156	this._focused = value;	×
157	}
158
159	/**
160	* Sets/gets if the given item is header
161	* ```typescript
162	* // get
163	* let mySelectedItem = this.dropdown.selectedItem;
164	* let isMyItemHeader = mySelectedItem.isHeader;
165	* ```
166	*
167	* ```html
168	* <!--set-->
169	* <igx-drop-down-item *ngFor="let item of items">
170	* <div *ngIf="items.indexOf(item) === 5; then item.isHeader = true">
171	* {{item.field}}
172	* </div>
173	* </igx-drop-down-item>
174	* ```
175	*/
176	@Input({ transform: booleanAttribute })
177	@HostBinding('class.igx-drop-down__header')
178	public isHeader: boolean;
179
180	/**
181	* Sets/gets if the given item is disabled
182	*
183	* ```typescript
184	* // get
185	* let mySelectedItem = this.dropdown.selectedItem;
186	* let myItemIsDisabled = mySelectedItem.disabled;
187	* ```
188	*
189	* ```html
190	* <igx-drop-down-item *ngFor="let item of items" disabled={{!item.disabled}}>
191	* <div>
192	* {{item.field}}
193	* </div>
194	* </igx-drop-down-item>
195	* ```
196	* NOTE: Drop-down items inside of a disabled `IgxDropDownGroup` will always count as disabled
197	*/
198	@Input({ transform: booleanAttribute })
199	@HostBinding('attr.aria-disabled')
200	@HostBinding('class.igx-drop-down__item--disabled')
201	public get disabled(): boolean {
202	return this.group ? this.group.disabled \|\| this._disabled : this._disabled;	45,278!
203	}
204
205	public set disabled(value: boolean) {
206	this._disabled = value;	52✔
207	}
208
209	/**
210	* Gets/sets the `role` attribute of the item. Default is 'option'.
211	*
212	* ```html
213	* <igx-drop-down-item [role]="customRole"></igx-drop-down-item>
214	* ```
215	*/
216	@Input()
217	@HostBinding('attr.role')
218	public role = 'option';	1,042✔
219
220	/**
221	* Gets item index
222	*
223	* @hidden @internal
224	*/
225	public get itemIndex(): number {
UNCOV 226	return this.dropDown.items.indexOf(this);	×
227	}
228
229	/**
230	* Gets item element height
231	*
232	* @hidden @internal
233	*/
234	public get elementHeight(): number {
UNCOV 235	return this.elementRef.nativeElement.clientHeight;	×
236	}
237
238	/**
239	* Get item html element
240	*
241	* @hidden @internal
242	*/
243	public get element(): ElementRef {
244	return this.elementRef;	39✔
245	}
246
247	protected get hasIndex(): boolean {
248	return this._index !== null && this._index !== undefined;	14,193✔
249	}
250
251	/**
252	* @hidden
253	*/
254	protected _focused = false;	1,042✔
255	protected _selected = false;	1,042✔
256	protected _index = null;	1,042✔
257	protected _disabled = false;	1,042✔
258	protected _label = null;	1,042✔
259
260	constructor(
261	@Inject(IGX_DROPDOWN_BASE) protected dropDown: IDropDownBase,	1,042✔
262	protected elementRef: ElementRef,	1,042✔
263	@Optional() protected group: IgxDropDownGroupComponent,	1,042✔
264	@Optional() @Inject(IgxSelectionAPIService) protected selection?: IgxSelectionAPIService	1,042✔
265	) { }
266
267	/**
268	* @hidden
269	* @internal
270	*/
271	@HostListener('click', ['$event'])
272	public clicked(event): void { // eslint-disable-line
273	}
274
275	/**
276	* @hidden
277	* @internal
278	*/
279	@HostListener('mousedown', ['$event'])
280	public handleMousedown(event: MouseEvent): void {
UNCOV 281	if (!this.dropDown.allowItemsFocus) {	×
UNCOV 282	event.preventDefault();	×
283	}
284	}
285
286	public ngDoCheck(): void {
287	if (this._selected) {	7,477!
UNCOV 288	const dropDownSelectedItem = this.dropDown.selectedItem;	×
UNCOV 289	if (!dropDownSelectedItem) {	×
UNCOV 290	this.dropDown.selectItem(this, undefined, false);	×
UNCOV 291	} else if (this.hasIndex	×
292	? this._index !== dropDownSelectedItem.index \|\| this.value !== dropDownSelectedItem.value :	×
293	this !== dropDownSelectedItem) {
UNCOV 294	this.dropDown.selectItem(this, undefined, false);	×
295	}
296	}
297	}
298
299	/** Returns true if the items is not a header or disabled */
300	protected get isSelectable(): boolean {
301	return !(this.disabled \|\| this.isHeader);	11,566✔
302	}
303
304	/** If `allowItemsFocus` is enabled, keep the browser focus on the active item */
305	protected ensureItemFocus() {
UNCOV 306	if (this.dropDown.allowItemsFocus) {	×
UNCOV 307	const focusedItem = this.dropDown.items.find((item) => item.focused);	×
UNCOV 308	if (!focusedItem) {	×
309	return;	×
310	}
UNCOV 311	focusedItem.element.nativeElement.focus({ preventScroll: true });	×
312	}
313	}
314	}

IgniteUI / igniteui-angular / 13331632524

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