igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
1,059 lines (1,051 loc) • 47.1 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ElementRef, Directive, TemplateRef, Renderer2, booleanAttribute, HostListener, HostBinding, Input, ViewChild, ChangeDetectionStrategy, Component, EventEmitter, Output, ContentChild, forwardRef, ContentChildren, NgModule } from '@angular/core';
import { rem, HammerGesturesManager, getCurrentResourceStrings, ListResourceStringsEN } from 'igniteui-angular/core';
import { NgTemplateOutlet } from '@angular/common';
/** @hidden */
class IgxListBaseDirective {
constructor() {
this.el = inject(ElementRef, { optional: true });
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxListBaseDirective, isStandalone: true, selector: "[igxListBase]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListBaseDirective, decorators: [{
type: Directive,
args: [{
selector: '[igxListBase]',
standalone: true
}]
}] });
var IgxListPanState;
(function (IgxListPanState) {
IgxListPanState[IgxListPanState["NONE"] = 0] = "NONE";
IgxListPanState[IgxListPanState["LEFT"] = 1] = "LEFT";
IgxListPanState[IgxListPanState["RIGHT"] = 2] = "RIGHT";
})(IgxListPanState || (IgxListPanState = {}));
class IgxEmptyListTemplateDirective {
constructor() {
this.template = inject(TemplateRef);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxEmptyListTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxEmptyListTemplateDirective, isStandalone: true, selector: "[igxEmptyList]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxEmptyListTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[igxEmptyList]',
standalone: true
}]
}] });
class IgxDataLoadingTemplateDirective {
constructor() {
this.template = inject(TemplateRef);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxDataLoadingTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxDataLoadingTemplateDirective, isStandalone: true, selector: "[igxDataLoading]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxDataLoadingTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[igxDataLoading]',
standalone: true
}]
}] });
class IgxListItemLeftPanningTemplateDirective {
constructor() {
this.template = inject(TemplateRef);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListItemLeftPanningTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxListItemLeftPanningTemplateDirective, isStandalone: true, selector: "[igxListItemLeftPanning]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListItemLeftPanningTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[igxListItemLeftPanning]',
standalone: true
}]
}] });
class IgxListItemRightPanningTemplateDirective {
constructor() {
this.template = inject(TemplateRef);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListItemRightPanningTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxListItemRightPanningTemplateDirective, isStandalone: true, selector: "[igxListItemRightPanning]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListItemRightPanningTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[igxListItemRightPanning]',
standalone: true
}]
}] });
/**
* The Ignite UI List Item component is a container intended for row items in the Ignite UI for Angular List 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>
* ```
*/
class IgxListItemComponent {
constructor() {
this.list = inject(IgxListBaseDirective);
this.elementRef = inject(ElementRef);
this._renderer = inject(Renderer2);
/**
* Sets/gets whether the `list item` is hidden.
* By default the `hidden` value is `false`.
* ```html
* <igx-list-item [hidden] = "true">Hidden Item</igx-list-item>
* ```
* ```typescript
* let isHidden = this.listItem.hidden;
* ```
*
* @memberof IgxListItemComponent
*/
this.hidden = false;
/**
* Gets the `touch-action` style of the `list item`.
* ```typescript
* let touchAction = this.listItem.touchAction;
* ```
*/
this.touchAction = 'pan-y';
/**
* @hidden
*/
this._panState = IgxListPanState.NONE;
/**
* @hidden
*/
this.panOffset = 0;
/**
* @hidden
*/
this._index = null;
/**
* @hidden
*/
this.lastPanDir = IgxListPanState.NONE;
this._role = '';
this._selected = false;
}
;
/**
* Gets the `panState` of a `list item`.
* ```typescript
* let itemPanState = this.listItem.panState;
* ```
*
* @memberof IgxListItemComponent
*/
get panState() {
return this._panState;
}
/**
* Gets the `index` of a `list item`.
* ```typescript
* let itemIndex = this.listItem.index;
* ```
*
* @memberof IgxListItemComponent
*/
get index() {
return this._index !== null ? this._index : this.list.children.toArray().indexOf(this);
}
/**
* Sets the `index` of the `list item`.
* ```typescript
* this.listItem.index = index;
* ```
*
* @memberof IgxListItemComponent
*/
set index(value) {
this._index = value;
}
/**
* Returns an element reference to the list item.
* ```typescript
* let listItemElement = this.listItem.element.
* ```
*
* @memberof IgxListItemComponent
*/
get element() {
return this.elementRef.nativeElement;
}
/**
* Returns a reference container which contains the list item's content.
* ```typescript
* let listItemContainer = this.listItem.contentElement.
* ```
*
* @memberof IgxListItemComponent
*/
get contentElement() {
const candidates = this.element.getElementsByClassName('igx-list__item-content');
return (candidates && candidates.length > 0) ? candidates[0] : null;
}
/**
* 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() {
return {
$implicit: this
};
}
/**
* Gets the width of a `list item`.
* ```typescript
* let itemWidth = this.listItem.width;
* ```
*
* @memberof IgxListItemComponent
*/
get width() {
if (this.element) {
return this.element.offsetWidth;
}
}
/**
* Gets the maximum left position of the `list item`.
* ```typescript
* let maxLeft = this.listItem.maxLeft;
* ```
*
* @memberof IgxListItemComponent
*/
get maxLeft() {
return -this.width;
}
/**
* Gets the maximum right position of the `list item`.
* ```typescript
* let maxRight = this.listItem.maxRight;
* ```
*
* @memberof IgxListItemComponent
*/
get maxRight() {
return this.width;
}
/** @hidden @internal */
get offsetWidthInRem() {
return rem(this.element.offsetWidth);
}
/** @hidden @internal */
get offsetHeightInRem() {
return rem(this.element.offsetHeight);
}
/**
* Gets/Sets the `role` attribute of the `list item`.
* ```typescript
* let itemRole = this.listItem.role;
* ```
*
* @memberof IgxListItemComponent
*/
get role() {
return this._role ? this._role : this.isHeader ? 'separator' : 'listitem';
}
set role(val) {
this._role = val;
}
/**
* 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
* <igx-list-item [selected]="true">Selected Item</igx-list-item>
* ```
* ```typescript
* let isSelected = this.listItem.selected;
* this.listItem.selected = true;
* ```
*
* @memberof IgxListItemComponent
*/
get selected() {
return this._selected && !this.isHeader;
}
set selected(value) {
this._selected = value;
}
/**
* Indicates whether `list item` should have header style.
* ```typescript
* let headerStyle = this.listItem.headerStyle;
* ```
*
* @memberof IgxListItemComponent
*/
get headerStyle() {
return this.isHeader;
}
/**
* 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() {
return !this.isHeader;
}
/**
* Returns string value which describes the display mode of the `list item`.
* ```typescript
* let isHidden = this.listItem.display;
* ```
*
* @memberof IgxListItemComponent
*/
get display() {
return this.hidden ? 'none' : '';
}
/**
* @hidden
*/
clicked(evt) {
this.list.itemClicked.emit({ item: this, event: evt, direction: this.lastPanDir });
this.lastPanDir = IgxListPanState.NONE;
}
/**
* @hidden
*/
panStart() {
if (this.isTrue(this.isHeader)) {
return;
}
if (!this.isTrue(this.list.allowLeftPanning) && !this.isTrue(this.list.allowRightPanning)) {
return;
}
this.list.startPan.emit({ item: this, direction: this.lastPanDir, keepitem: false });
}
/**
* @hidden
*/
panCancel() {
this.resetPanPosition();
this.list.endPan.emit({ item: this, direction: this.lastPanDir, keepItem: false });
}
/**
* @hidden
*/
panMove(ev) {
if (this.isTrue(this.isHeader)) {
return;
}
if (!this.isTrue(this.list.allowLeftPanning) && !this.isTrue(this.list.allowRightPanning)) {
return;
}
const isPanningToLeft = ev.deltaX < 0;
if (isPanningToLeft && this.isTrue(this.list.allowLeftPanning)) {
this.showLeftPanTemplate();
this.setContentElementLeft(Math.max(this.maxLeft, ev.deltaX));
}
else if (!isPanningToLeft && this.isTrue(this.list.allowRightPanning)) {
this.showRightPanTemplate();
this.setContentElementLeft(Math.min(this.maxRight, ev.deltaX));
}
}
/**
* @hidden
*/
panEnd() {
if (this.isTrue(this.isHeader)) {
return;
}
if (!this.isTrue(this.list.allowLeftPanning) && !this.isTrue(this.list.allowRightPanning)) {
return;
}
// the translation offset of the current list item content
const relativeOffset = this.panOffset;
const widthTriggeringGrip = this.width * this.list.panEndTriggeringThreshold;
if (relativeOffset === 0) {
return; // no panning has occured
}
const dir = relativeOffset > 0 ? IgxListPanState.RIGHT : IgxListPanState.LEFT;
this.lastPanDir = dir;
const args = { item: this, direction: dir, keepItem: false };
this.list.endPan.emit(args);
const oldPanState = this._panState;
if (Math.abs(relativeOffset) < widthTriggeringGrip) {
this.resetPanPosition();
this.list.resetPan.emit(this);
return;
}
if (dir === IgxListPanState.LEFT) {
this.list.leftPan.emit(args);
}
else {
this.list.rightPan.emit(args);
}
if (args.keepItem === true) {
this.setContentElementLeft(0);
this._panState = IgxListPanState.NONE;
}
else {
if (dir === IgxListPanState.LEFT) {
this.setContentElementLeft(this.maxLeft);
this._panState = IgxListPanState.LEFT;
}
else {
this.setContentElementLeft(this.maxRight);
this._panState = IgxListPanState.RIGHT;
}
}
if (oldPanState !== this._panState) {
const args2 = { oldState: oldPanState, newState: this._panState, item: this };
this.list.panStateChange.emit(args2);
}
this.hideLeftAndRightPanTemplates();
}
/**
* @hidden
*/
showLeftPanTemplate() {
this.setLeftAndRightTemplatesVisibility('visible', 'hidden');
}
/**
* @hidden
*/
showRightPanTemplate() {
this.setLeftAndRightTemplatesVisibility('hidden', 'visible');
}
/**
* @hidden
*/
hideLeftAndRightPanTemplates() {
setTimeout(() => {
this.setLeftAndRightTemplatesVisibility('hidden', 'hidden');
}, 500);
}
/**
* @hidden
*/
setLeftAndRightTemplatesVisibility(leftVisibility, rightVisibility) {
if (this.leftPanningTemplateElement && this.leftPanningTemplateElement.nativeElement) {
this.leftPanningTemplateElement.nativeElement.style.visibility = leftVisibility;
}
if (this.rightPanningTemplateElement && this.rightPanningTemplateElement.nativeElement) {
this.rightPanningTemplateElement.nativeElement.style.visibility = rightVisibility;
}
}
/**
* @hidden
*/
setContentElementLeft(value) {
this.panOffset = value;
this.contentElement.style.transform = 'translateX(' + value + 'px)';
}
/**
* @hidden
*/
isTrue(value) {
if (typeof (value) === 'boolean') {
return value;
}
else {
return value === 'true';
}
}
/**
* @hidden
*/
resetPanPosition() {
this.setContentElementLeft(0);
this._panState = IgxListPanState.NONE;
this.hideLeftAndRightPanTemplates();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxListItemComponent, isStandalone: true, selector: "igx-list-item", inputs: { isHeader: ["isHeader", "isHeader", booleanAttribute], hidden: ["hidden", "hidden", booleanAttribute], index: "index", role: "role", selected: ["selected", "selected", booleanAttribute] }, host: { listeners: { "click": "clicked($event)", "panstart": "panStart()", "pancancel": "panCancel()", "panmove": "panMove($event)", "panend": "panEnd()" }, properties: { "attr.aria-label": "this.ariaLabel", "style.touch-action": "this.touchAction", "attr.role": "this.role", "class.igx-list__item-base--selected": "this.selected", "class.igx-list__header": "this.headerStyle", "class.igx-list__item-base": "this.innerStyle", "style.display": "this.display" } }, providers: [HammerGesturesManager], viewQueries: [{ propertyName: "leftPanningTemplateElement", first: true, predicate: ["leftPanningTmpl"], descendants: true }, { propertyName: "rightPanningTemplateElement", first: true, predicate: ["rightPanningTmpl"], descendants: true }], ngImport: i0, template: "\n@if (!isHeader && list.listItemLeftPanningTemplate) {\n <div #leftPanningTmpl class=\"igx-list__item-right\"\n [style.width.rem]=\"offsetWidthInRem\" [style.height.rem]=\"offsetHeightInRem\">\n <ng-container *ngTemplateOutlet=\"list.listItemLeftPanningTemplate.template; context: context\">\n </ng-container>\n </div>\n}\n\n@if (!isHeader && list.listItemRightPanningTemplate) {\n <div #rightPanningTmpl class=\"igx-list__item-left\"\n [style.width.rem]=\"offsetWidthInRem\" [style.height.rem]=\"offsetHeightInRem\">\n <ng-container *ngTemplateOutlet=\"list.listItemRightPanningTemplate.template; context: context\">\n </ng-container>\n </div>\n}\n\n<ng-template #itemsContent>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #itemThumbnails>\n <div class=\"igx-list__item-thumbnail\">\n <ng-content select=\"[igxListThumbnail], igx-list__item-thumbnail, igx-avatar\"></ng-content>\n </div>\n</ng-template>\n\n<ng-template #itemLines>\n <div class=\"igx-list__item-lines\">\n <ng-content select=\"[igxListLine], .igx-list__item-lines, [igxListLineTitle], [igxListLineSubTitle], .igx-list__item-line-title, .igx-list__item-line-subtitle\"></ng-content>\n </div>\n</ng-template>\n\n<ng-template #itemActions>\n <div class=\"igx-list__item-actions\">\n <ng-content select=\"[igxListAction], .igx-list__item-actions\"></ng-content>\n </div>\n</ng-template>\n\n@if (isHeader) {\n <ng-container *ngTemplateOutlet=\"itemsContent\"></ng-container>\n}\n\n@if (!isHeader) {\n <div class=\"igx-list__item-content\">\n <ng-container *ngTemplateOutlet=\"itemThumbnails\"></ng-container>\n <ng-container *ngTemplateOutlet=\"itemLines\"></ng-container>\n <ng-container *ngTemplateOutlet=\"itemActions\"></ng-container>\n <ng-container *ngTemplateOutlet=\"itemsContent\"></ng-container>\n </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListItemComponent, decorators: [{
type: Component,
args: [{ providers: [HammerGesturesManager], selector: 'igx-list-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "\n@if (!isHeader && list.listItemLeftPanningTemplate) {\n <div #leftPanningTmpl class=\"igx-list__item-right\"\n [style.width.rem]=\"offsetWidthInRem\" [style.height.rem]=\"offsetHeightInRem\">\n <ng-container *ngTemplateOutlet=\"list.listItemLeftPanningTemplate.template; context: context\">\n </ng-container>\n </div>\n}\n\n@if (!isHeader && list.listItemRightPanningTemplate) {\n <div #rightPanningTmpl class=\"igx-list__item-left\"\n [style.width.rem]=\"offsetWidthInRem\" [style.height.rem]=\"offsetHeightInRem\">\n <ng-container *ngTemplateOutlet=\"list.listItemRightPanningTemplate.template; context: context\">\n </ng-container>\n </div>\n}\n\n<ng-template #itemsContent>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #itemThumbnails>\n <div class=\"igx-list__item-thumbnail\">\n <ng-content select=\"[igxListThumbnail], igx-list__item-thumbnail, igx-avatar\"></ng-content>\n </div>\n</ng-template>\n\n<ng-template #itemLines>\n <div class=\"igx-list__item-lines\">\n <ng-content select=\"[igxListLine], .igx-list__item-lines, [igxListLineTitle], [igxListLineSubTitle], .igx-list__item-line-title, .igx-list__item-line-subtitle\"></ng-content>\n </div>\n</ng-template>\n\n<ng-template #itemActions>\n <div class=\"igx-list__item-actions\">\n <ng-content select=\"[igxListAction], .igx-list__item-actions\"></ng-content>\n </div>\n</ng-template>\n\n@if (isHeader) {\n <ng-container *ngTemplateOutlet=\"itemsContent\"></ng-container>\n}\n\n@if (!isHeader) {\n <div class=\"igx-list__item-content\">\n <ng-container *ngTemplateOutlet=\"itemThumbnails\"></ng-container>\n <ng-container *ngTemplateOutlet=\"itemLines\"></ng-container>\n <ng-container *ngTemplateOutlet=\"itemActions\"></ng-container>\n <ng-container *ngTemplateOutlet=\"itemsContent\"></ng-container>\n </div>\n}\n" }]
}], propDecorators: { leftPanningTemplateElement: [{
type: ViewChild,
args: ['leftPanningTmpl']
}], rightPanningTemplateElement: [{
type: ViewChild,
args: ['rightPanningTmpl']
}], isHeader: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], hidden: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], ariaLabel: [{
type: HostBinding,
args: ['attr.aria-label']
}], touchAction: [{
type: HostBinding,
args: ['style.touch-action']
}], index: [{
type: Input
}], role: [{
type: HostBinding,
args: ['attr.role']
}, {
type: Input
}], selected: [{
type: HostBinding,
args: ['class.igx-list__item-base--selected']
}, {
type: Input,
args: [{ transform: booleanAttribute }]
}], headerStyle: [{
type: HostBinding,
args: ['class.igx-list__header']
}], innerStyle: [{
type: HostBinding,
args: ['class.igx-list__item-base']
}], display: [{
type: HostBinding,
args: ['style.display']
}], clicked: [{
type: HostListener,
args: ['click', ['$event']]
}], panStart: [{
type: HostListener,
args: ['panstart']
}], panCancel: [{
type: HostListener,
args: ['pancancel']
}], panMove: [{
type: HostListener,
args: ['panmove', ['$event']]
}], panEnd: [{
type: HostListener,
args: ['panend']
}] } });
let NEXT_ID = 0;
/**
* igxListThumbnail is container for the List media
* Use it to wrap anything you want to be used as a thumbnail.
*/
class IgxListThumbnailDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListThumbnailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxListThumbnailDirective, isStandalone: true, selector: "[igxListThumbnail]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListThumbnailDirective, decorators: [{
type: Directive,
args: [{
selector: '[igxListThumbnail]',
standalone: true
}]
}] });
/**
* igxListAction is container for the List action
* Use it to wrap anything you want to be used as a list action: icon, checkbox...
*/
class IgxListActionDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxListActionDirective, isStandalone: true, selector: "[igxListAction]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListActionDirective, decorators: [{
type: Directive,
args: [{
selector: '[igxListAction]',
standalone: true
}]
}] });
/**
* igxListLine is container for the List text content
* Use it to wrap anything you want to be used as a plane text.
*/
class IgxListLineDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListLineDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxListLineDirective, isStandalone: true, selector: "[igxListLine]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListLineDirective, decorators: [{
type: Directive,
args: [{
selector: '[igxListLine]',
standalone: true
}]
}] });
/**
* igxListLineTitle is a directive that add class to the target element
* Use it to make anything to look like list Title.
*/
class IgxListLineTitleDirective {
constructor() {
this.cssClass = 'igx-list__item-line-title';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListLineTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxListLineTitleDirective, isStandalone: true, selector: "[igxListLineTitle]", host: { properties: { "class.igx-list__item-line-title": "this.cssClass" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListLineTitleDirective, decorators: [{
type: Directive,
args: [{
selector: '[igxListLineTitle]',
standalone: true
}]
}], propDecorators: { cssClass: [{
type: HostBinding,
args: ['class.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.
*/
class IgxListLineSubTitleDirective {
constructor() {
this.cssClass = 'igx-list__item-line-subtitle';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListLineSubTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxListLineSubTitleDirective, isStandalone: true, selector: "[igxListLineSubTitle]", host: { properties: { "class.igx-list__item-line-subtitle": "this.cssClass" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListLineSubTitleDirective, decorators: [{
type: Directive,
args: [{
selector: '[igxListLineSubTitle]',
standalone: true
}]
}], propDecorators: { cssClass: [{
type: HostBinding,
args: ['class.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>
* ```
*/
class IgxListComponent extends IgxListBaseDirective {
constructor() {
super(...arguments);
this.element = inject(ElementRef);
/**
* 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>
* ```
*/
this.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;
* ```
*/
this.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;
* ```
*/
this.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;
* ```
*/
this.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;
* ```
*/
this.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>
* ```
*/
this.leftPan = new 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
* <igx-list [allowRightPanning]="true" (rightPan)="rightPan($event)"></igx-list>
* ```
*/
this.rightPan = new 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
* <igx-list (startPan)="startPan($event)"></igx-list>
* ```
*/
this.startPan = new 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
* <igx-list (endPan)="endPan($event)"></igx-list>
* ```
*/
this.endPan = new 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
* <igx-list (resetPan)="resetPan($event)"></igx-list>
* ```
*/
this.resetPan = new 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
* <igx-list (panStateChange)="panStateChange($event)"></igx-list>
* ```
*/
this.panStateChange = new EventEmitter();
/**
* 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>
* ```
*/
this.itemClicked = new EventEmitter();
this._resourceStrings = getCurrentResourceStrings(ListResourceStringsEN);
this._role = 'list';
}
/**
* Sets the resource strings.
* By default it uses EN resources.
*/
set resourceStrings(value) {
this._resourceStrings = Object.assign({}, this._resourceStrings, value);
}
/**
* Returns the resource strings.
*/
get resourceStrings() {
return this._resourceStrings;
}
/**
* @hidden
* @internal
*/
get sortedChildren() {
if (this.children !== undefined) {
return this.children.toArray()
.sort((a, b) => a.index - b.index);
}
return null;
}
/**
* Gets/Sets the `role` attribute value.
*
* @example
* ```typescript
* let listRole = this.list.role;
* ```
*/
get role() {
return this._role;
}
set role(val) {
this._role = val;
}
/**
* Gets a boolean indicating if the list is empty.
*
* @example
* ```typescript
* let isEmpty = this.list.isListEmpty;
* ```
*/
get isListEmpty() {
return !this.children || this.children.length === 0;
}
/**
* @hidden
* @internal
*/
get cssClass() {
return !this.isListEmpty;
}
/**
* Gets the list `items` excluding the header ones.
*
* @example
* ```typescript
* let listItems: IgxListItemComponent[] = this.list.items;
* ```
*/
get items() {
const items = [];
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;
* ```
*/
get headers() {
const headers = [];
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;
* ```
*/
get context() {
return {
$implicit: this
};
}
/**
* Gets a `TemplateRef` to the currently used template.
*
* @example
* ```typescript
* let listTemplate = this.list.template;
* ```
*/
get template() {
if (this.isLoading) {
return this.dataLoadingTemplate ? this.dataLoadingTemplate.template : this.defaultDataLoadingTemplate;
}
else {
return this.emptyListTemplate ? this.emptyListTemplate.template : this.defaultEmptyListTemplate;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxListComponent, isStandalone: true, selector: "igx-list", inputs: { panEndTriggeringThreshold: "panEndTriggeringThreshold", id: "id", allowLeftPanning: ["allowLeftPanning", "allowLeftPanning", booleanAttribute], allowRightPanning: ["allowRightPanning", "allowRightPanning", booleanAttribute], isLoading: ["isLoading", "isLoading", booleanAttribute], resourceStrings: "resourceStrings", role: "role" }, outputs: { leftPan: "leftPan", rightPan: "rightPan", startPan: "startPan", endPan: "endPan", resetPan: "resetPan", panStateChange: "panStateChange", itemClicked: "itemClicked" }, host: { properties: { "attr.id": "this.id", "attr.role": "this.role", "class.igx-list--empty": "this.isListEmpty", "class.igx-list": "this.cssClass" } }, providers: [{ provide: IgxListBaseDirective, useExisting: IgxListComponent }], queries: [{ propertyName: "emptyListTemplate", first: true, predicate: IgxEmptyListTemplateDirective, descendants: true, read: IgxEmptyListTemplateDirective }, { propertyName: "dataLoadingTemplate", first: true, predicate: IgxDataLoadingTemplateDirective, descendants: true, read: IgxDataLoadingTemplateDirective }, { propertyName: "listItemLeftPanningTemplate", first: true, predicate: IgxListItemLeftPanningTemplateDirective, descendants: true, read: IgxListItemLeftPanningTemplateDirective }, { propertyName: "listItemRightPanningTemplate", first: true, predicate: IgxListItemRightPanningTemplateDirective, descendants: true, read: IgxListItemRightPanningTemplateDirective }, { propertyName: "children", predicate: i0.forwardRef(() => IgxListItemComponent), descendants: true }], viewQueries: [{ propertyName: "defaultEmptyListTemplate", first: true, predicate: ["defaultEmptyList"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultDataLoadingTemplate", first: true, predicate: ["defaultDataLoading"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n\n<ng-template #defaultEmptyList>\n <article class=\"igx-list__message\">\n {{resourceStrings.igx_list_no_items}}\n </article>\n</ng-template>\n\n<ng-template #defaultDataLoading>\n <article class=\"igx-list__message\">\n {{resourceStrings.igx_list_loading}}\n </article>\n</ng-template>\n\n@if (!children || children.length === 0 || isLoading) {\n <ng-container *ngTemplateOutlet=\"template; context: context\">\n </ng-container>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListComponent, decorators: [{
type: Component,
args: [{ selector: 'igx-list', providers: [{ provide: IgxListBaseDirective, useExisting: IgxListComponent }], imports: [NgTemplateOutlet], template: "<ng-content></ng-content>\n\n<ng-template #defaultEmptyList>\n <article class=\"igx-list__message\">\n {{resourceStrings.igx_list_no_items}}\n </article>\n</ng-template>\n\n<ng-template #defaultDataLoading>\n <article class=\"igx-list__message\">\n {{resourceStrings.igx_list_loading}}\n </article>\n</ng-template>\n\n@if (!children || children.length === 0 || isLoading) {\n <ng-container *ngTemplateOutlet=\"template; context: context\">\n </ng-container>\n}\n" }]
}], propDecorators: { children: [{
type: ContentChildren,
args: [forwardRef(() => IgxListItemComponent), { descendants: true }]
}], emptyListTemplate: [{
type: ContentChild,
args: [IgxEmptyListTemplateDirective, { read: IgxEmptyListTemplateDirective }]
}], dataLoadingTemplate: [{
type: ContentChild,
args: [IgxDataLoadingTemplateDirective, { read: IgxDataLoadingTemplateDirective }]
}], listItemLeftPanningTemplate: [{
type: ContentChild,
args: [IgxListItemLeftPanningTemplateDirective, { read: IgxListItemLeftPanningTemplateDirective }]
}], listItemRightPanningTemplate: [{
type: ContentChild,
args: [IgxListItemRightPanningTemplateDirective, { read: IgxListItemRightPanningTemplateDirective }]
}], panEndTriggeringThreshold: [{
type: Input
}], id: [{
type: HostBinding,
args: ['attr.id']
}, {
type: Input
}], allowLeftPanning: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], allowRightPanning: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], isLoading: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], leftPan: [{
type: Output
}], rightPan: [{
type: Output
}], startPan: [{
type: Output
}], endPan: [{
type: Output
}], resetPan: [{
type: Output
}], panStateChange: [{
type: Output
}], itemClicked: [{
type: Output
}], defaultEmptyListTemplate: [{
type: ViewChild,
args: ['defaultEmptyList', { read: TemplateRef, static: true }]
}], defaultDataLoadingTemplate: [{
type: ViewChild,
args: ['defaultDataLoading', { read: TemplateRef, static: true }]
}], resourceStrings: [{
type: Input
}], role: [{
type: HostBinding,
args: ['attr.role']
}, {
type: Input
}], isListEmpty: [{
type: HostBinding,
args: ['class.igx-list--empty']
}], cssClass: [{
type: HostBinding,
args: ['class.igx-list']
}] } });
/* NOTE: List directives collection for ease-of-use import in standalone components scenario */
const IGX_LIST_DIRECTIVES = [
IgxListComponent,
IgxListItemComponent,
IgxListThumbnailDirective,
IgxListActionDirective,
IgxListLineDirective,
IgxListLineTitleDirective,
IgxListLineSubTitleDirective,
IgxDataLoadingTemplateDirective,
IgxEmptyListTemplateDirective,
IgxListItemLeftPanningTemplateDirective,
IgxListItemRightPanningTemplateDirective
];
/**
* @hidden
* IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
*/
class IgxListModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxListModule, imports: [IgxListComponent, IgxListItemComponent, IgxListThumbnailDirective, IgxListActionDirective, IgxListLineDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxDataLoadingTemplateDirective, IgxEmptyListTemplateDirective, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective], exports: [IgxListComponent, IgxListItemComponent, IgxListThumbnailDirective, IgxListActionDirective, IgxListLineDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxDataLoadingTemplateDirective, IgxEmptyListTemplateDirective, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListModule, decorators: [{
type: NgModule,
args: [{
imports: [
...IGX_LIST_DIRECTIVES
],
exports: [
...IGX_LIST_DIRECTIVES
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { IGX_LIST_DIRECTIVES, IgxDataLoadingTemplateDirective, IgxEmptyListTemplateDirective, IgxListActionDirective, IgxListBaseDirective, IgxListComponent, IgxListItemComponent, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective, IgxListLineDirective, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListModule, IgxListPanState, IgxListThumbnailDirective };
//# sourceMappingURL=igniteui-angular-list.mjs.map