6850015339

Committed 13 Nov 2023 12:33PM CUT coverage: 92.266% (-0.02%) from 92.282%

Build # 6850015339

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #13669 from IgniteUI/mdragnev/esf-15.1.x

Add support for navigation in the ESF search list [15.1.x]

Run Details

15350 of 18038 branches covered (0.0%)

46 of 54 new or added lines in 3 files covered. (85.19%)

24 existing lines in 4 files now uncovered.

26925 of 29182 relevant lines covered (92.27%)

29682.16 hits per line

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

96.97

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

import { CommonModule } from '@angular/common';
import {
    Component,
    ContentChild,
    ContentChildren,
    ElementRef,
    EventEmitter,
    forwardRef,
    HostBinding,
    Input,
    NgModule,
    Output,
    QueryList,
    TemplateRef,
    ViewChild,
    Optional,
    Inject, Directive
} from '@angular/core';

import { IgxRippleModule } from '../directives/ripple/ripple.directive';

import { IgxListItemComponent } from './list-item.component';
import {
    IgxListBaseDirective,
    IgxDataLoadingTemplateDirective,
    IgxEmptyListTemplateDirective,
    IgxListPanState,
    IgxListItemLeftPanningTemplateDirective,
    IgxListItemRightPanningTemplateDirective
} from './list.common';
import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensity } from '../core/density';
import { IBaseEventArgs } from '../core/utils';
import { IListResourceStrings } from '../core/i18n/list-resources';
import { CurrentResourceStrings } 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({
    // eslint-disable-next-line @angular-eslint/directive-selector
    selector: '[igxListThumbnail]'
})
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({
    // eslint-disable-next-line @angular-eslint/directive-selector
    selector: '[igxListAction]'
})
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({
    // eslint-disable-next-line @angular-eslint/directive-selector
    selector: '[igxListLine]'
})
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({
    // eslint-disable-next-line @angular-eslint/directive-selector
    selector: '[igxListLineTitle]'
})
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({
    // eslint-disable-next-line @angular-eslint/directive-selector
    selector: '[igxListLineSubTitle]'
})
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 }]
})
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()
    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()
    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()
    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 = CurrentResourceStrings.ListResStrings;

    /**
     * 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,
        @Optional() @Inject(DisplayDensityToken) _displayDensityOptions: IDisplayDensityOptions) {
        super(_displayDensityOptions);
    }

    /**
     * @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 && this.displayDensity === DisplayDensity.comfortable;
    }

    /**
     * @hidden
     * @internal
     */
    @HostBinding('class.igx-list--compact')
    public get cssClassCompact(): boolean {
        return !this.isListEmpty && this.displayDensity === DisplayDensity.compact;
    }

    /**
     * @hidden
     * @internal
     */
    @HostBinding('class.igx-list--cosy')
    public get cssClassCosy(): boolean {
        return !this.isListEmpty && this.displayDensity === DisplayDensity.cosy;
    }

    /**
     * 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.
     *
     * @remark
     * 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
 */
@NgModule({
    declarations: [
        IgxListBaseDirective,
        IgxListComponent,
        IgxListItemComponent,
        IgxListThumbnailDirective,
        IgxListActionDirective,
        IgxListLineDirective,
        IgxListLineTitleDirective,
        IgxListLineSubTitleDirective,
        IgxDataLoadingTemplateDirective,
        IgxEmptyListTemplateDirective,
        IgxListItemLeftPanningTemplateDirective,
        IgxListItemRightPanningTemplateDirective
    ],
    exports: [
        IgxListComponent,
        IgxListItemComponent,
        IgxListThumbnailDirective,
        IgxListActionDirective,
        IgxListLineDirective,
        IgxListLineTitleDirective,
        IgxListLineSubTitleDirective,
        IgxDataLoadingTemplateDirective,
        IgxEmptyListTemplateDirective,
        IgxListItemLeftPanningTemplateDirective,
        IgxListItemRightPanningTemplateDirective
    ],
    imports: [
        CommonModule,
        IgxRippleModule
    ]
})
export class IgxListModule {
}

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

IgniteUI / igniteui-angular / 6850015339

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