import * as i0 from '@angular/core'; import { ElementRef, EventEmitter, QueryList, TemplateRef } from '@angular/core'; import { IBaseEventArgs, IListResourceStrings } from 'igniteui-angular/core'; interface IListChild { index: number; } /** @hidden */ declare class IgxListBaseDirective { protected el: ElementRef; itemClicked: EventEmitter; allowLeftPanning: boolean; allowRightPanning: boolean; panEndTriggeringThreshold: number; leftPan: EventEmitter; rightPan: EventEmitter; startPan: EventEmitter; endPan: EventEmitter; resetPan: EventEmitter; panStateChange: EventEmitter; children: QueryList; listItemLeftPanningTemplate: IgxListItemLeftPanningTemplateDirective; listItemRightPanningTemplate: IgxListItemRightPanningTemplateDirective; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare enum IgxListPanState { NONE = 0, LEFT = 1, RIGHT = 2 } declare class IgxEmptyListTemplateDirective { template: TemplateRef; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxDataLoadingTemplateDirective { template: TemplateRef; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxListItemLeftPanningTemplateDirective { template: TemplateRef; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class IgxListItemRightPanningTemplateDirective { template: TemplateRef; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * The Ignite UI List Item component is a container intended for row items in the Ignite UI for Angular List component. * * Example: * ```html * * Contacts * * {{ contact.name }} * {{ contact.phone }} * * * ``` */ declare class IgxListItemComponent implements IListChild { list: IgxListBaseDirective; private elementRef; private _renderer; /** * Provides a reference to the template's base element shown when left panning a list item. * ```typescript * const leftPanTmpl = this.listItem.leftPanningTemplateElement; * ``` */ leftPanningTemplateElement: any; /** * Provides a reference to the template's base element shown when right panning a list item. * ```typescript * const rightPanTmpl = this.listItem.rightPanningTemplateElement; * ``` */ rightPanningTemplateElement: any; /** * Sets/gets whether the `list item` is a header. * ```html * Header * ``` * ```typescript * let isHeader = this.listItem.isHeader; * ``` * * @memberof IgxListItemComponent */ isHeader: boolean; /** * Sets/gets whether the `list item` is hidden. * By default the `hidden` value is `false`. * ```html * Hidden Item * ``` * ```typescript * let isHidden = this.listItem.hidden; * ``` * * @memberof IgxListItemComponent */ hidden: boolean; /** * Sets/gets the `aria-label` attribute of the `list item`. * ```typescript * this.listItem.ariaLabel = "Item1"; * ``` * ```typescript * let itemAriaLabel = this.listItem.ariaLabel; * ``` * * @memberof IgxListItemComponent */ ariaLabel: string; /** * Gets the `touch-action` style of the `list item`. * ```typescript * let touchAction = this.listItem.touchAction; * ``` */ touchAction: string; /** * @hidden */ private _panState; /** * @hidden */ private panOffset; /** * @hidden */ private _index; /** * @hidden */ private lastPanDir; private _role; private _selected; /** * Gets the `panState` of a `list item`. * ```typescript * let itemPanState = this.listItem.panState; * ``` * * @memberof IgxListItemComponent */ get panState(): IgxListPanState; /** * Gets the `index` of a `list item`. * ```typescript * let itemIndex = this.listItem.index; * ``` * * @memberof IgxListItemComponent */ get index(): number; /** * Sets the `index` of the `list item`. * ```typescript * this.listItem.index = index; * ``` * * @memberof IgxListItemComponent */ set index(value: number); /** * Returns an element reference to the list item. * ```typescript * let listItemElement = this.listItem.element. * ``` * * @memberof IgxListItemComponent */ get element(): any; /** * Returns a reference container which contains the list item's content. * ```typescript * let listItemContainer = this.listItem.contentElement. * ``` * * @memberof IgxListItemComponent */ get contentElement(): any; /** * Returns the `context` object which represents the `template context` binding into the `list item container` * by providing the `$implicit` declaration which is the `IgxListItemComponent` itself. * ```typescript * let listItemComponent = this.listItem.context; * ``` */ get context(): any; /** * Gets the width of a `list item`. * ```typescript * let itemWidth = this.listItem.width; * ``` * * @memberof IgxListItemComponent */ get width(): any; /** * Gets the maximum left position of the `list item`. * ```typescript * let maxLeft = this.listItem.maxLeft; * ``` * * @memberof IgxListItemComponent */ get maxLeft(): number; /** * Gets the maximum right position of the `list item`. * ```typescript * let maxRight = this.listItem.maxRight; * ``` * * @memberof IgxListItemComponent */ get maxRight(): any; /** @hidden @internal */ get offsetWidthInRem(): number; /** @hidden @internal */ get offsetHeightInRem(): number; /** * Gets/Sets the `role` attribute of the `list item`. * ```typescript * let itemRole = this.listItem.role; * ``` * * @memberof IgxListItemComponent */ get role(): string; set role(val: string); /** * Sets/gets whether the `list item` is selected. * Selection is only applied to non-header items. * When selected, the CSS class 'igx-list__item-base--selected' is added to the item. * ```html * Selected Item * ``` * ```typescript * let isSelected = this.listItem.selected; * this.listItem.selected = true; * ``` * * @memberof IgxListItemComponent */ get selected(): boolean; set selected(value: boolean); /** * Indicates whether `list item` should have header style. * ```typescript * let headerStyle = this.listItem.headerStyle; * ``` * * @memberof IgxListItemComponent */ get headerStyle(): boolean; /** * Applies the inner style of the `list item` if the item is not counted as header. * ```typescript * let innerStyle = this.listItem.innerStyle; * ``` * * @memberof IgxListItemComponent */ get innerStyle(): boolean; /** * Returns string value which describes the display mode of the `list item`. * ```typescript * let isHidden = this.listItem.display; * ``` * * @memberof IgxListItemComponent */ get display(): string; /** * @hidden */ clicked(evt: any): void; /** * @hidden */ panStart(): void; /** * @hidden */ panCancel(): void; /** * @hidden */ panMove(ev: any): void; /** * @hidden */ panEnd(): void; /** * @hidden */ private showLeftPanTemplate; /** * @hidden */ private showRightPanTemplate; /** * @hidden */ private hideLeftAndRightPanTemplates; /** * @hidden */ private setLeftAndRightTemplatesVisibility; /** * @hidden */ private setContentElementLeft; /** * @hidden */ private isTrue; /** * @hidden */ private resetPanPosition; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_isHeader: unknown; static ngAcceptInputType_hidden: unknown; static ngAcceptInputType_selected: unknown; } /** * Interface for the panStateChange igxList event arguments */ interface IPanStateChangeEventArgs extends IBaseEventArgs { oldState: IgxListPanState; newState: IgxListPanState; item: IgxListItemComponent; } /** * Interface for the listItemClick igxList event arguments */ interface IListItemClickEventArgs extends IBaseEventArgs { item: IgxListItemComponent; event: Event; direction: IgxListPanState; } /** * Interface for the listItemPanning igxList event arguments */ 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. */ declare class IgxListThumbnailDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * igxListAction is container for the List action * Use it to wrap anything you want to be used as a list action: icon, checkbox... */ declare class IgxListActionDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * igxListLine is container for the List text content * Use it to wrap anything you want to be used as a plane text. */ declare class IgxListLineDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * igxListLineTitle is a directive that add class to the target element * Use it to make anything to look like list Title. */ declare class IgxListLineTitleDirective { cssClass: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * igxListLineSubTitle is a directive that add class to the target element * Use it to make anything to look like list Subtitle. */ declare class IgxListLineSubTitleDirective { cssClass: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * 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 * * Contacts * * {{ contact.name }} * {{ contact.phone }} * * * ``` */ declare class IgxListComponent extends IgxListBaseDirective { element: ElementRef; /** * Returns a collection of all items and headers in the list. * * @example * ```typescript * let listChildren: QueryList = this.list.children; * ``` */ children: QueryList; /** * 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 * * *

No contacts! :(

*
*
* ``` * ```typescript * let emptyTemplate = this.list.emptyListTemplate; * ``` */ 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 * * *

Patience, we are currently loading your data...

*
*
* ``` * ```typescript * let loadingTemplate = this.list.dataLoadingTemplate; * ``` */ dataLoadingTemplate: IgxDataLoadingTemplateDirective; /** * Sets/gets the template for left panning a list item. * * @remarks * Default value is `null`. * * @example * ```html * * * deleteDelete * * * ``` * ```typescript * let itemLeftPanTmpl = this.list.listItemLeftPanningTemplate; * ``` */ listItemLeftPanningTemplate: IgxListItemLeftPanningTemplateDirective; /** * Sets/gets the template for right panning a list item. * * @remarks * Default value is `null`. * * @example * ```html * * * callDial * * * ``` * ```typescript * let itemRightPanTmpl = this.list.listItemRightPanningTemplate; * ``` */ 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 * * ``` */ panEndTriggeringThreshold: number; /** * 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 * * ``` * ```typescript * let listId = this.list.id; * ``` */ id: string; /** * Sets/gets whether the left panning of an item is allowed. * * @remarks * Default value is `false`. * * @example * ```html * * ``` * ```typescript * let isLeftPanningAllowed = this.list.allowLeftPanning; * ``` */ allowLeftPanning: boolean; /** * Sets/gets whether the right panning of an item is allowed. * * @remarks * Default value is `false`. * * @example * ```html * * ``` * ```typescript * let isRightPanningAllowed = this.list.allowRightPanning; * ``` */ allowRightPanning: boolean; /** * 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 * * ``` * ```typescript * let isLoading = this.list.isLoading; * ``` */ isLoading: boolean; /** * 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 * * ``` */ leftPan: EventEmitter; /** * 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 * * ``` */ rightPan: EventEmitter; /** * Event emitted when a pan gesture is started. * * @remarks * Provides a reference to an object of type `IListItemPanningEventArgs` as an event argument. * * @example * ```html * * ``` */ startPan: EventEmitter; /** * 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 * * ``` */ endPan: EventEmitter; /** * 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 * * ``` */ resetPan: EventEmitter; /** * * 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 * * ``` */ panStateChange: EventEmitter; /** * Event emitted when a list item is clicked. * * @remarks * Provides references to the `IgxListItemComponent` and `Event` as event arguments. * * @example * ```html * * ``` */ itemClicked: EventEmitter; /** * @hidden * @internal */ protected defaultEmptyListTemplate: TemplateRef; /** * @hidden * @internal */ protected defaultDataLoadingTemplate: TemplateRef; private _resourceStrings; /** * Sets the resource strings. * By default it uses EN resources. */ set resourceStrings(value: IListResourceStrings); /** * Returns the resource strings. */ get resourceStrings(): IListResourceStrings; /** * @hidden * @internal */ protected get sortedChildren(): IgxListItemComponent[]; private _role; /** * Gets/Sets the `role` attribute value. * * @example * ```typescript * let listRole = this.list.role; * ``` */ get role(): string; set role(val: string); /** * Gets a boolean indicating if the list is empty. * * @example * ```typescript * let isEmpty = this.list.isListEmpty; * ``` */ get isListEmpty(): boolean; /** * @hidden * @internal */ get cssClass(): boolean; /** * Gets the list `items` excluding the header ones. * * @example * ```typescript * let listItems: IgxListItemComponent[] = this.list.items; * ``` */ get items(): IgxListItemComponent[]; /** * Gets the header list `items`. * * @example * ```typescript * let listHeaders: IgxListItemComponent[] = this.list.headers; * ``` */ get headers(): IgxListItemComponent[]; /** * 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; * ``` */ get context(): any; /** * Gets a `TemplateRef` to the currently used template. * * @example * ```typescript * let listTemplate = this.list.template; * ``` */ get template(): TemplateRef; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_allowLeftPanning: unknown; static ngAcceptInputType_allowRightPanning: unknown; static ngAcceptInputType_isLoading: unknown; } declare const IGX_LIST_DIRECTIVES: readonly [typeof IgxListComponent, typeof IgxListItemComponent, typeof IgxListThumbnailDirective, typeof IgxListActionDirective, typeof IgxListLineDirective, typeof IgxListLineTitleDirective, typeof IgxListLineSubTitleDirective, typeof IgxDataLoadingTemplateDirective, typeof IgxEmptyListTemplateDirective, typeof IgxListItemLeftPanningTemplateDirective, typeof IgxListItemRightPanningTemplateDirective]; /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxListModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } export { IGX_LIST_DIRECTIVES, IgxDataLoadingTemplateDirective, IgxEmptyListTemplateDirective, IgxListActionDirective, IgxListBaseDirective, IgxListComponent, IgxListItemComponent, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective, IgxListLineDirective, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListModule, IgxListPanState, IgxListThumbnailDirective }; export type { IListItemClickEventArgs, IListItemPanningEventArgs, IPanStateChangeEventArgs };