13331632524

Committed 14 Feb 2025 02:51PM CUT 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

13.46

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

import { NgIf, NgTemplateOutlet } from '@angular/common';
import {
    Component,
    ContentChild,
    ContentChildren,
    ElementRef,
    EventEmitter,
    forwardRef,
    HostBinding,
    Input,
    Output,
    QueryList,
    TemplateRef,
    ViewChild,
    Directive,
    booleanAttribute
} from '@angular/core';



import { IgxListItemComponent } from './list-item.component';
import {
    IgxListBaseDirective,
    IgxDataLoadingTemplateDirective,
    IgxEmptyListTemplateDirective,
    IgxListPanState,
    IgxListItemLeftPanningTemplateDirective,
    IgxListItemRightPanningTemplateDirective
} from './list.common';
import { IBaseEventArgs } from '../core/utils';
import { IListResourceStrings, ListResourceStringsEN } from '../core/i18n/list-resources';
import { getCurrentResourceStrings } from '../core/i18n/resources';

let NEXT_ID = 0;

/**
 * Interface for the panStateChange igxList event arguments
 */
export interface IPanStateChangeEventArgs extends IBaseEventArgs {
    oldState: IgxListPanState;
    newState: IgxListPanState;
    item: IgxListItemComponent;
}

/**
 * Interface for the listItemClick igxList event arguments
 */
export interface IListItemClickEventArgs extends IBaseEventArgs {
    item: IgxListItemComponent;
    event: Event;
    direction: IgxListPanState;
}

/**
 * Interface for the listItemPanning igxList event arguments
 */
export interface IListItemPanningEventArgs extends IBaseEventArgs {
    item: IgxListItemComponent;
    direction: IgxListPanState;
    keepItem: boolean;
}

/**
 * igxListThumbnail is container for the List media
 * Use it to wrap anything you want to be used as a thumbnail.
 */
@Directive({
    selector: '[igxListThumbnail]',
    standalone: true
})
export class IgxListThumbnailDirective { }

/**
 * igxListAction is container for the List action
 * Use it to wrap anything you want to be used as a list action: icon, checkbox...
 */
@Directive({
    selector: '[igxListAction]',
    standalone: true
})
export class IgxListActionDirective { }

/**
 * igxListLine is container for the List text content
 * Use it to wrap anything you want to be used as a plane text.
 */
@Directive({
    selector: '[igxListLine]',
    standalone: true
})
export class IgxListLineDirective { }

/**
 * igxListLineTitle is a directive that add class to the target element
 * Use it to make anything to look like list Title.
 */
@Directive({
    selector: '[igxListLineTitle]',
    standalone: true
})
export class IgxListLineTitleDirective {
    @HostBinding('class.igx-list__item-line-title')
    public cssClass = 'igx-list__item-line-title';
}

/**
 * igxListLineSubTitle is a directive that add class to the target element
 * Use it to make anything to look like list Subtitle.
 */
@Directive({
    selector: '[igxListLineSubTitle]',
    standalone: true
})
export class IgxListLineSubTitleDirective {
    @HostBinding('class.igx-list__item-line-subtitle')
    public cssClass = 'igx-list__item-line-subtitle';
}

/**
 * Displays a collection of data items in a templatable list format
 *
 * @igxModule IgxListModule
 *
 * @igxTheme igx-list-theme
 *
 * @igxKeywords list, data
 *
 * @igxGroup Grids & Lists
 *
 * @remarks
 * The Ignite UI List displays rows of items and supports one or more header items as well as search and filtering
 * of list items. Each list item is completely templatable and will support any valid HTML or Angular component.
 *
 * @example
 * ```html
 * <igx-list>
 *   <igx-list-item isHeader="true">Contacts</igx-list-item>
 *   <igx-list-item *ngFor="let contact of contacts">
 *     <span class="name">{{ contact.name }}</span>
 *     <span class="phone">{{ contact.phone }}</span>
 *   </igx-list-item>
 * </igx-list>
 * ```
 */
@Component({
    selector: 'igx-list',
    templateUrl: 'list.component.html',
    providers: [{ provide: IgxListBaseDirective, useExisting: IgxListComponent }],
    imports: [NgIf, NgTemplateOutlet]
})
export class IgxListComponent extends IgxListBaseDirective {
    /**
     * Returns a collection of all items and headers in the list.
     *
     * @example
     * ```typescript
     * let listChildren: QueryList = this.list.children;
     * ```
     */
    @ContentChildren(forwardRef(() => IgxListItemComponent), { descendants: true })
    public override children: QueryList<IgxListItemComponent>;

    /**
     * Sets/gets the empty list template.
     *
     * @remarks
     * This template is used by IgxList in case there are no list items
     * defined and `isLoading` is set to `false`.
     *
     * @example
     * ```html
     * <igx-list>
     *   <ng-template igxEmptyList>
     *     <p class="empty">No contacts! :(</p>
     *   </ng-template>
     * </igx-list>
     * ```
     * ```typescript
     * let emptyTemplate = this.list.emptyListTemplate;
     * ```
     */
    @ContentChild(IgxEmptyListTemplateDirective, { read: IgxEmptyListTemplateDirective })
    public emptyListTemplate: IgxEmptyListTemplateDirective;

    /**
     * Sets/gets the list loading template.
     *
     * @remarks
     * This template is used by IgxList in case there are no list items defined and `isLoading` is set to `true`.
     *
     * @example
     * ```html
     * <igx-list>
     *   <ng-template igxDataLoading>
     *     <p>Patience, we are currently loading your data...</p>
     *   </ng-template>
     * </igx-list>
     * ```
     * ```typescript
     * let loadingTemplate = this.list.dataLoadingTemplate;
     * ```
     */
    @ContentChild(IgxDataLoadingTemplateDirective, { read: IgxDataLoadingTemplateDirective })
    public dataLoadingTemplate: IgxDataLoadingTemplateDirective;

    /**
     * Sets/gets the template for left panning a list item.
     *
     * @remarks
     * Default value is `null`.
     *
     * @example
     * ```html
     * <igx-list [allowLeftPanning]="true">
     *   <ng-template igxListItemLeftPanning>
     *     <igx-icon>delete</igx-icon>Delete
     *   </ng-template>
     * </igx-list>
     * ```
     * ```typescript
     * let itemLeftPanTmpl = this.list.listItemLeftPanningTemplate;
     * ```
     */
    @ContentChild(IgxListItemLeftPanningTemplateDirective, { read: IgxListItemLeftPanningTemplateDirective })
    public override listItemLeftPanningTemplate: IgxListItemLeftPanningTemplateDirective;

    /**
     * Sets/gets the template for right panning a list item.
     *
     * @remarks
     * Default value is `null`.
     *
     * @example
     * ```html
     * <igx-list [allowRightPanning] = "true">
     *   <ng-template igxListItemRightPanning>
     *     <igx-icon>call</igx-icon>Dial
     *   </ng-template>
     * </igx-list>
     * ```
     * ```typescript
     * let itemRightPanTmpl = this.list.listItemRightPanningTemplate;
     * ```
     */
    @ContentChild(IgxListItemRightPanningTemplateDirective, { read: IgxListItemRightPanningTemplateDirective })
    public override listItemRightPanningTemplate: IgxListItemRightPanningTemplateDirective;

    /**
     * Provides a threshold after which the item's panning will be completed automatically.
     *
     * @remarks
     * By default this property is set to 0.5 which is 50% of the list item's width.
     *
     * @example
     * ```html
     * <igx-list [panEndTriggeringThreshold]="0.8"></igx-list>
     * ```
     */
    @Input()
    public override panEndTriggeringThreshold = 0.5;

    /**
     * Sets/gets the `id` of the list.
     *
     * @remarks
     * If not set, the `id` of the first list component will be `"igx-list-0"`.
     *
     * @example
     * ```html
     * <igx-list id="my-first-list"></igx-list>
     * ```
     * ```typescript
     * let listId = this.list.id;
     * ```
     */
    @HostBinding('attr.id')
    @Input()
    public id = `igx-list-${NEXT_ID++}`;

    /**
     * Sets/gets whether the left panning of an item is allowed.
     *
     * @remarks
     * Default value is `false`.
     *
     * @example
     * ```html
     * <igx-list [allowLeftPanning]="true"></igx-list>
     * ```
     * ```typescript
     * let isLeftPanningAllowed = this.list.allowLeftPanning;
     * ```
     */
    @Input({ transform: booleanAttribute })
    public override allowLeftPanning = false;

    /**
     * Sets/gets whether the right panning of an item is allowed.
     *
     * @remarks
     * Default value is `false`.
     *
     * @example
     * ```html
     * <igx-list [allowRightPanning]="true"></igx-list>
     * ```
     * ```typescript
     * let isRightPanningAllowed = this.list.allowRightPanning;
     * ```
     */
    @Input({ transform: booleanAttribute })
    public override allowRightPanning = false;

    /**
     * Sets/gets whether the list is currently loading data.
     *
     * @remarks
     * Set it to display the dataLoadingTemplate while data is being retrieved.
     * Default value is `false`.
     *
     * @example
     * ```html
     *  <igx-list [isLoading]="true"></igx-list>
     * ```
     * ```typescript
     * let isLoading = this.list.isLoading;
     * ```
     */
    @Input({ transform: booleanAttribute })
    public isLoading = false;

    /**
     * Event emitted when a left pan gesture is executed on a list item.
     *
     * @remarks
     * Provides a reference to an object of type `IListItemPanningEventArgs` as an event argument.
     *
     * @example
     * ```html
     * <igx-list [allowLeftPanning]="true" (leftPan)="leftPan($event)"></igx-list>
     * ```
     */
    @Output()
    public override leftPan = new EventEmitter<IListItemPanningEventArgs>();

    /**
     * Event emitted when a right pan gesture is executed on a list item.
     *
     * @remarks
     * Provides a reference to an object of type `IListItemPanningEventArgs` as an event argument.
     *
     * @example
     * ```html
     * <igx-list [allowRightPanning]="true" (rightPan)="rightPan($event)"></igx-list>
     * ```
     */
    @Output()
    public override rightPan = new EventEmitter<IListItemPanningEventArgs>();

    /**
     * Event emitted when a pan gesture is started.
     *
     * @remarks
     * Provides a reference to an object of type `IListItemPanningEventArgs` as an event argument.
     *
     * @example
     * ```html
     * <igx-list (startPan)="startPan($event)"></igx-list>
     * ```
     */
    @Output()
    public override startPan = new EventEmitter<IListItemPanningEventArgs>();

    /**
     * Event emitted when a pan gesture is completed or canceled.
     *
     * @remarks
     * Provides a reference to an object of type `IListItemPanningEventArgs` as an event argument.
     *
     * @example
     * ```html
     * <igx-list (endPan)="endPan($event)"></igx-list>
     * ```
     */
    @Output()
    public override endPan = new EventEmitter<IListItemPanningEventArgs>();

    /**
     * Event emitted when a pan item is returned to its original position.
     *
     * @remarks
     * Provides a reference to an object of type `IgxListComponent` as an event argument.
     *
     * @example
     * ```html
     * <igx-list (resetPan)="resetPan($event)"></igx-list>
     * ```
     */
    @Output()
    public override resetPan = new EventEmitter<IgxListComponent>();

    /**
     *
     * Event emitted when a pan gesture is executed on a list item.
     *
     * @remarks
     * Provides references to the `IgxListItemComponent` and `IgxListPanState` as event arguments.
     *
     * @example
     * ```html
     * <igx-list (panStateChange)="panStateChange($event)"></igx-list>
     * ```
     */
    @Output()
    public override panStateChange = new EventEmitter<IPanStateChangeEventArgs>();

    /**
     * Event emitted when a list item is clicked.
     *
     * @remarks
     * Provides references to the `IgxListItemComponent` and `Event` as event arguments.
     *
     * @example
     * ```html
     * <igx-list (itemClicked)="onItemClicked($event)"></igx-list>
     * ```
     */
    @Output()
    public override itemClicked = new EventEmitter<IListItemClickEventArgs>();

    /**
     * @hidden
     * @internal
     */
    @ViewChild('defaultEmptyList', { read: TemplateRef, static: true })
    protected defaultEmptyListTemplate: TemplateRef<any>;

    /**
     * @hidden
     * @internal
     */
    @ViewChild('defaultDataLoading', { read: TemplateRef, static: true })
    protected defaultDataLoadingTemplate: TemplateRef<any>;

    private _resourceStrings = getCurrentResourceStrings(ListResourceStringsEN);

    /**
     * Sets the resource strings.
     * By default it uses EN resources.
     */
    @Input()
    public set resourceStrings(value: IListResourceStrings) {
        this._resourceStrings = Object.assign({}, this._resourceStrings, value);
    }

    /**
     * Returns the resource strings.
     */
    public get resourceStrings(): IListResourceStrings {
        return this._resourceStrings;
    }

    constructor(public element: ElementRef) {
        super(element);
    }

    /**
     * @hidden
     * @internal
     */
    protected get sortedChildren(): IgxListItemComponent[] {
        if (this.children !== undefined) {
            return this.children.toArray()
                .sort((a: IgxListItemComponent, b: IgxListItemComponent) => a.index - b.index);
        }
        return null;
    }

    private _role = 'list';

    /**
     * Gets/Sets the `role` attribute value.
     *
     * @example
     * ```typescript
     * let listRole =  this.list.role;
     * ```
     */
    @HostBinding('attr.role')
    @Input()
    public get role() {
        return this._role;
    }

    public set role(val: string) {
        this._role = val;
    }

    /**
     * Gets a boolean indicating if the list is empty.
     *
     * @example
     * ```typescript
     * let isEmpty =  this.list.isListEmpty;
     * ```
     */
    @HostBinding('class.igx-list--empty')
    public get isListEmpty(): boolean {
        return !this.children || this.children.length === 0;
    }

    /**
     * @hidden
     * @internal
     */
    @HostBinding('class.igx-list')
    public get cssClass(): boolean {
        return !this.isListEmpty;
    }

    /**
     * Gets the list `items` excluding the header ones.
     *
     * @example
     * ```typescript
     * let listItems: IgxListItemComponent[] = this.list.items;
     * ```
     */
    public get items(): IgxListItemComponent[] {
        const items: IgxListItemComponent[] = [];
        if (this.children !== undefined) {
            for (const child of this.sortedChildren) {
                if (!child.isHeader) {
                    items.push(child);
                }
            }
        }
        return items;
    }

    /**
     * Gets the header list `items`.
     *
     * @example
     * ```typescript
     * let listHeaders: IgxListItemComponent[] =  this.list.headers;
     * ```
     */
    public get headers(): IgxListItemComponent[] {
        const headers: IgxListItemComponent[] = [];
        if (this.children !== undefined) {
            for (const child of this.children.toArray()) {
                if (child.isHeader) {
                    headers.push(child);
                }
            }
        }
        return headers;
    }

    /**
     * Gets the `context` object of the template binding.
     *
     * @remarks
     * Gets the `context` object which represents the `template context` binding into the `list container`
     * by providing the `$implicit` declaration which is the `IgxListComponent` itself.
     *
     * @example
     * ```typescript
     * let listComponent =  this.list.context;
     * ```
     */
    public get context(): any {
        return {
            $implicit: this
        };
    }

    /**
     * Gets a `TemplateRef` to the currently used template.
     *
     * @example
     * ```typescript
     * let listTemplate = this.list.template;
     * ```
     */
    public get template(): TemplateRef<any> {
        if (this.isLoading) {
            return this.dataLoadingTemplate ? this.dataLoadingTemplate.template : this.defaultDataLoadingTemplate;
        } else {
            return this.emptyListTemplate ? this.emptyListTemplate.template : this.defaultEmptyListTemplate;
        }
    }
}

/**
 * @hidden
 */


1	import { NgIf, NgTemplateOutlet } from '@angular/common';
2	import {
3	Component,
4	ContentChild,
5	ContentChildren,
6	ElementRef,
7	EventEmitter,
8	forwardRef,
9	HostBinding,
10	Input,
11	Output,
12	QueryList,
13	TemplateRef,
14	ViewChild,
15	Directive,
16	booleanAttribute
17	} from '@angular/core';
18
19
20
21	import { IgxListItemComponent } from './list-item.component';
22	import {
23	IgxListBaseDirective,
24	IgxDataLoadingTemplateDirective,
25	IgxEmptyListTemplateDirective,
26	IgxListPanState,
27	IgxListItemLeftPanningTemplateDirective,
28	IgxListItemRightPanningTemplateDirective
29	} from './list.common';
30	import { IBaseEventArgs } from '../core/utils';
31	import { IListResourceStrings, ListResourceStringsEN } from '../core/i18n/list-resources';
32	import { getCurrentResourceStrings } from '../core/i18n/resources';
33
34	let NEXT_ID = 0;	2✔
35
36	/**
37	* Interface for the panStateChange igxList event arguments
38	*/
39	export interface IPanStateChangeEventArgs extends IBaseEventArgs {
40	oldState: IgxListPanState;
41	newState: IgxListPanState;
42	item: IgxListItemComponent;
43	}
44
45	/**
46	* Interface for the listItemClick igxList event arguments
47	*/
48	export interface IListItemClickEventArgs extends IBaseEventArgs {
49	item: IgxListItemComponent;
50	event: Event;
51	direction: IgxListPanState;
52	}
53
54	/**
55	* Interface for the listItemPanning igxList event arguments
56	*/
57	export interface IListItemPanningEventArgs extends IBaseEventArgs {
58	item: IgxListItemComponent;
59	direction: IgxListPanState;
60	keepItem: boolean;
61	}
62
63	/**
64	* igxListThumbnail is container for the List media
65	* Use it to wrap anything you want to be used as a thumbnail.
66	*/
67	@Directive({
68	selector: '[igxListThumbnail]',
69	standalone: true
70	})
71	export class IgxListThumbnailDirective { }	2✔
72
73	/**
74	* igxListAction is container for the List action
75	* Use it to wrap anything you want to be used as a list action: icon, checkbox...
76	*/
77	@Directive({
78	selector: '[igxListAction]',
79	standalone: true
80	})
81	export class IgxListActionDirective { }	2✔
82
83	/**
84	* igxListLine is container for the List text content
85	* Use it to wrap anything you want to be used as a plane text.
86	*/
87	@Directive({
88	selector: '[igxListLine]',
89	standalone: true
90	})
91	export class IgxListLineDirective { }	2✔
92
93	/**
94	* igxListLineTitle is a directive that add class to the target element
95	* Use it to make anything to look like list Title.
96	*/
97	@Directive({
98	selector: '[igxListLineTitle]',
99	standalone: true
100	})
101	export class IgxListLineTitleDirective {	2✔
102	@HostBinding('class.igx-list__item-line-title')
UNCOV 103	public cssClass = 'igx-list__item-line-title';	×
104	}
105
106	/**
107	* igxListLineSubTitle is a directive that add class to the target element
108	* Use it to make anything to look like list Subtitle.
109	*/
110	@Directive({
111	selector: '[igxListLineSubTitle]',
112	standalone: true
113	})
114	export class IgxListLineSubTitleDirective {	2✔
115	@HostBinding('class.igx-list__item-line-subtitle')
UNCOV 116	public cssClass = 'igx-list__item-line-subtitle';	×
117	}
118
119	/**
120	* Displays a collection of data items in a templatable list format
121	*
122	* @igxModule IgxListModule
123	*
124	* @igxTheme igx-list-theme
125	*
126	* @igxKeywords list, data
127	*
128	* @igxGroup Grids & Lists
129	*
130	* @remarks
131	* The Ignite UI List displays rows of items and supports one or more header items as well as search and filtering
132	* of list items. Each list item is completely templatable and will support any valid HTML or Angular component.
133	*
134	* @example
135	* ```html
136	* <igx-list>
137	* <igx-list-item isHeader="true">Contacts</igx-list-item>
138	* <igx-list-item *ngFor="let contact of contacts">
139	* <span class="name">{{ contact.name }}</span>
140	* <span class="phone">{{ contact.phone }}</span>
141	* </igx-list-item>
142	* </igx-list>
143	* ```
144	*/
145	@Component({
146	selector: 'igx-list',
147	templateUrl: 'list.component.html',
148	providers: [{ provide: IgxListBaseDirective, useExisting: IgxListComponent }],
149	imports: [NgIf, NgTemplateOutlet]
150	})
151	export class IgxListComponent extends IgxListBaseDirective {	2✔
152	/**
153	* Returns a collection of all items and headers in the list.
154	*
155	* @example
156	* ```typescript
157	* let listChildren: QueryList = this.list.children;
158	* ```
159	*/
UNCOV 160	@ContentChildren(forwardRef(() => IgxListItemComponent), { descendants: true })	×
161	public override children: QueryList<IgxListItemComponent>;
162
163	/**
164	* Sets/gets the empty list template.
165	*
166	* @remarks
167	* This template is used by IgxList in case there are no list items
168	* defined and `isLoading` is set to `false`.
169	*
170	* @example
171	* ```html
172	* <igx-list>
173	* <ng-template igxEmptyList>
174	* <p class="empty">No contacts! :(</p>
175	* </ng-template>
176	* </igx-list>
177	* ```
178	* ```typescript
179	* let emptyTemplate = this.list.emptyListTemplate;
180	* ```
181	*/
182	@ContentChild(IgxEmptyListTemplateDirective, { read: IgxEmptyListTemplateDirective })
183	public emptyListTemplate: IgxEmptyListTemplateDirective;
184
185	/**
186	* Sets/gets the list loading template.
187	*
188	* @remarks
189	* This template is used by IgxList in case there are no list items defined and `isLoading` is set to `true`.
190	*
191	* @example
192	* ```html
193	* <igx-list>
194	* <ng-template igxDataLoading>
195	* <p>Patience, we are currently loading your data...</p>
196	* </ng-template>
197	* </igx-list>
198	* ```
199	* ```typescript
200	* let loadingTemplate = this.list.dataLoadingTemplate;
201	* ```
202	*/
203	@ContentChild(IgxDataLoadingTemplateDirective, { read: IgxDataLoadingTemplateDirective })
204	public dataLoadingTemplate: IgxDataLoadingTemplateDirective;
205
206	/**
207	* Sets/gets the template for left panning a list item.
208	*
209	* @remarks
210	* Default value is `null`.
211	*
212	* @example
213	* ```html
214	* <igx-list [allowLeftPanning]="true">
215	* <ng-template igxListItemLeftPanning>
216	* <igx-icon>delete</igx-icon>Delete
217	* </ng-template>
218	* </igx-list>
219	* ```
220	* ```typescript
221	* let itemLeftPanTmpl = this.list.listItemLeftPanningTemplate;
222	* ```
223	*/
224	@ContentChild(IgxListItemLeftPanningTemplateDirective, { read: IgxListItemLeftPanningTemplateDirective })
225	public override listItemLeftPanningTemplate: IgxListItemLeftPanningTemplateDirective;
226
227	/**
228	* Sets/gets the template for right panning a list item.
229	*
230	* @remarks
231	* Default value is `null`.
232	*
233	* @example
234	* ```html
235	* <igx-list [allowRightPanning] = "true">
236	* <ng-template igxListItemRightPanning>
237	* <igx-icon>call</igx-icon>Dial
238	* </ng-template>
239	* </igx-list>
240	* ```
241	* ```typescript
242	* let itemRightPanTmpl = this.list.listItemRightPanningTemplate;
243	* ```
244	*/
245	@ContentChild(IgxListItemRightPanningTemplateDirective, { read: IgxListItemRightPanningTemplateDirective })
246	public override listItemRightPanningTemplate: IgxListItemRightPanningTemplateDirective;
247
248	/**
249	* Provides a threshold after which the item's panning will be completed automatically.
250	*
251	* @remarks
252	* By default this property is set to 0.5 which is 50% of the list item's width.
253	*
254	* @example
255	* ```html
256	* <igx-list [panEndTriggeringThreshold]="0.8"></igx-list>
257	* ```
258	*/
259	@Input()
UNCOV 260	public override panEndTriggeringThreshold = 0.5;	×
261
262	/**
263	* Sets/gets the `id` of the list.
264	*
265	* @remarks
266	* If not set, the `id` of the first list component will be `"igx-list-0"`.
267	*
268	* @example
269	* ```html
270	* <igx-list id="my-first-list"></igx-list>
271	* ```
272	* ```typescript
273	* let listId = this.list.id;
274	* ```
275	*/
276	@HostBinding('attr.id')
277	@Input()
UNCOV 278	public id = `igx-list-${NEXT_ID++}`;	×
279
280	/**
281	* Sets/gets whether the left panning of an item is allowed.
282	*
283	* @remarks
284	* Default value is `false`.
285	*
286	* @example
287	* ```html
288	* <igx-list [allowLeftPanning]="true"></igx-list>
289	* ```
290	* ```typescript
291	* let isLeftPanningAllowed = this.list.allowLeftPanning;
292	* ```
293	*/
294	@Input({ transform: booleanAttribute })
UNCOV 295	public override allowLeftPanning = false;	×
296
297	/**
298	* Sets/gets whether the right panning of an item is allowed.
299	*
300	* @remarks
301	* Default value is `false`.
302	*
303	* @example
304	* ```html
305	* <igx-list [allowRightPanning]="true"></igx-list>
306	* ```
307	* ```typescript
308	* let isRightPanningAllowed = this.list.allowRightPanning;
309	* ```
310	*/
311	@Input({ transform: booleanAttribute })
UNCOV 312	public override allowRightPanning = false;	×
313
314	/**
315	* Sets/gets whether the list is currently loading data.
316	*
317	* @remarks
318	* Set it to display the dataLoadingTemplate while data is being retrieved.
319	* Default value is `false`.
320	*
321	* @example
322	* ```html
323	* <igx-list [isLoading]="true"></igx-list>
324	* ```
325	* ```typescript
326	* let isLoading = this.list.isLoading;
327	* ```
328	*/
329	@Input({ transform: booleanAttribute })
UNCOV 330	public isLoading = false;	×
331
332	/**
333	* Event emitted when a left pan gesture is executed on a list item.
334	*
335	* @remarks
336	* Provides a reference to an object of type `IListItemPanningEventArgs` as an event argument.
337	*
338	* @example
339	* ```html
340	* <igx-list [allowLeftPanning]="true" (leftPan)="leftPan($event)"></igx-list>
341	* ```
342	*/
343	@Output()
UNCOV 344	public override leftPan = new EventEmitter<IListItemPanningEventArgs>();	×
345
346	/**
347	* Event emitted when a right pan gesture is executed on a list item.
348	*
349	* @remarks
350	* Provides a reference to an object of type `IListItemPanningEventArgs` as an event argument.
351	*
352	* @example
353	* ```html
354	* <igx-list [allowRightPanning]="true" (rightPan)="rightPan($event)"></igx-list>
355	* ```
356	*/
357	@Output()
UNCOV 358	public override rightPan = new EventEmitter<IListItemPanningEventArgs>();	×
359
360	/**
361	* Event emitted when a pan gesture is started.
362	*
363	* @remarks
364	* Provides a reference to an object of type `IListItemPanningEventArgs` as an event argument.
365	*
366	* @example
367	* ```html
368	* <igx-list (startPan)="startPan($event)"></igx-list>
369	* ```
370	*/
371	@Output()
UNCOV 372	public override startPan = new EventEmitter<IListItemPanningEventArgs>();	×
373
374	/**
375	* Event emitted when a pan gesture is completed or canceled.
376	*
377	* @remarks
378	* Provides a reference to an object of type `IListItemPanningEventArgs` as an event argument.
379	*
380	* @example
381	* ```html
382	* <igx-list (endPan)="endPan($event)"></igx-list>
383	* ```
384	*/
385	@Output()
UNCOV 386	public override endPan = new EventEmitter<IListItemPanningEventArgs>();	×
387
388	/**
389	* Event emitted when a pan item is returned to its original position.
390	*
391	* @remarks
392	* Provides a reference to an object of type `IgxListComponent` as an event argument.
393	*
394	* @example
395	* ```html
396	* <igx-list (resetPan)="resetPan($event)"></igx-list>
397	* ```
398	*/
399	@Output()
UNCOV 400	public override resetPan = new EventEmitter<IgxListComponent>();	×
401
402	/**
403	*
404	* Event emitted when a pan gesture is executed on a list item.
405	*
406	* @remarks
407	* Provides references to the `IgxListItemComponent` and `IgxListPanState` as event arguments.
408	*
409	* @example
410	* ```html
411	* <igx-list (panStateChange)="panStateChange($event)"></igx-list>
412	* ```
413	*/
414	@Output()
UNCOV 415	public override panStateChange = new EventEmitter<IPanStateChangeEventArgs>();	×
416
417	/**
418	* Event emitted when a list item is clicked.
419	*
420	* @remarks
421	* Provides references to the `IgxListItemComponent` and `Event` as event arguments.
422	*
423	* @example
424	* ```html
425	* <igx-list (itemClicked)="onItemClicked($event)"></igx-list>
426	* ```
427	*/
428	@Output()
UNCOV 429	public override itemClicked = new EventEmitter<IListItemClickEventArgs>();	×
430
431	/**
432	* @hidden
433	* @internal
434	*/
435	@ViewChild('defaultEmptyList', { read: TemplateRef, static: true })
436	protected defaultEmptyListTemplate: TemplateRef<any>;
437
438	/**
439	* @hidden
440	* @internal
441	*/
442	@ViewChild('defaultDataLoading', { read: TemplateRef, static: true })
443	protected defaultDataLoadingTemplate: TemplateRef<any>;
444
UNCOV 445	private _resourceStrings = getCurrentResourceStrings(ListResourceStringsEN);	×
446
447	/**
448	* Sets the resource strings.
449	* By default it uses EN resources.
450	*/
451	@Input()
452	public set resourceStrings(value: IListResourceStrings) {
453	this._resourceStrings = Object.assign({}, this._resourceStrings, value);	×
454	}
455
456	/**
457	* Returns the resource strings.
458	*/
459	public get resourceStrings(): IListResourceStrings {
UNCOV 460	return this._resourceStrings;	×
461	}
462
UNCOV 463	constructor(public element: ElementRef) {	×
UNCOV 464	super(element);	×
465	}
466
467	/**
468	* @hidden
469	* @internal
470	*/
471	protected get sortedChildren(): IgxListItemComponent[] {
UNCOV 472	if (this.children !== undefined) {	×
UNCOV 473	return this.children.toArray()	×
UNCOV 474	.sort((a: IgxListItemComponent, b: IgxListItemComponent) => a.index - b.index);	×
475	}
476	return null;	×
477	}
478
UNCOV 479	private _role = 'list';	×
480
481	/**
482	* Gets/Sets the `role` attribute value.
483	*
484	* @example
485	* ```typescript
486	* let listRole = this.list.role;
487	* ```
488	*/
489	@HostBinding('attr.role')
490	@Input()
491	public get role() {
UNCOV 492	return this._role;	×
493	}
494
495	public set role(val: string) {
UNCOV 496	this._role = val;	×
497	}
498
499	/**
500	* Gets a boolean indicating if the list is empty.
501	*
502	* @example
503	* ```typescript
504	* let isEmpty = this.list.isListEmpty;
505	* ```
506	*/
507	@HostBinding('class.igx-list--empty')
508	public get isListEmpty(): boolean {
UNCOV 509	return !this.children \|\| this.children.length === 0;	×
510	}
511
512	/**
513	* @hidden
514	* @internal
515	*/
516	@HostBinding('class.igx-list')
517	public get cssClass(): boolean {
UNCOV 518	return !this.isListEmpty;	×
519	}
520
521	/**
522	* Gets the list `items` excluding the header ones.
523	*
524	* @example
525	* ```typescript
526	* let listItems: IgxListItemComponent[] = this.list.items;
527	* ```
528	*/
529	public get items(): IgxListItemComponent[] {
UNCOV 530	const items: IgxListItemComponent[] = [];	×
UNCOV 531	if (this.children !== undefined) {	×
UNCOV 532	for (const child of this.sortedChildren) {	×
UNCOV 533	if (!child.isHeader) {	×
UNCOV 534	items.push(child);	×
535	}
536	}
537	}
UNCOV 538	return items;	×
539	}
540
541	/**
542	* Gets the header list `items`.
543	*
544	* @example
545	* ```typescript
546	* let listHeaders: IgxListItemComponent[] = this.list.headers;
547	* ```
548	*/
549	public get headers(): IgxListItemComponent[] {
UNCOV 550	const headers: IgxListItemComponent[] = [];	×
UNCOV 551	if (this.children !== undefined) {	×
UNCOV 552	for (const child of this.children.toArray()) {	×
UNCOV 553	if (child.isHeader) {	×
UNCOV 554	headers.push(child);	×
555	}
556	}
557	}
UNCOV 558	return headers;	×
559	}
560
561	/**
562	* Gets the `context` object of the template binding.
563	*
564	* @remarks
565	* Gets the `context` object which represents the `template context` binding into the `list container`
566	* by providing the `$implicit` declaration which is the `IgxListComponent` itself.
567	*
568	* @example
569	* ```typescript
570	* let listComponent = this.list.context;
571	* ```
572	*/
573	public get context(): any {
UNCOV 574	return {	×
575	$implicit: this
576	};
577	}
578
579	/**
580	* Gets a `TemplateRef` to the currently used template.
581	*
582	* @example
583	* ```typescript
584	* let listTemplate = this.list.template;
585	* ```
586	*/
587	public get template(): TemplateRef<any> {
UNCOV 588	if (this.isLoading) {	×
UNCOV 589	return this.dataLoadingTemplate ? this.dataLoadingTemplate.template : this.defaultDataLoadingTemplate;	×
590	} else {
UNCOV 591	return this.emptyListTemplate ? this.emptyListTemplate.template : this.defaultEmptyListTemplate;	×
592	}
593	}
594	}
595
596	/**
597	* @hidden
598	*/
599

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