ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
233 lines (224 loc) • 10.9 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, ElementRef, Input, Renderer2, TemplateRef, ViewEncapsulation, ContentChildren, NgModule } from '@angular/core';
import { NzAvatarModule } from 'ng-zorro-antd/avatar';
import { InputBoolean, NzUpdateHostClassService, NzAddOnModule } from 'ng-zorro-antd/core';
import { NzEmptyModule } from 'ng-zorro-antd/empty';
import { NzGridModule } from 'ng-zorro-antd/grid';
import { NzSpinModule } from 'ng-zorro-antd/spin';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzListItemMetaComponent {
/**
* @param {?} elementRef
* @param {?} renderer
*/
constructor(elementRef, renderer) {
this.elementRef = elementRef;
this.renderer = renderer;
this.avatarStr = '';
this.renderer.addClass(elementRef.nativeElement, 'ant-list-item-meta');
}
/**
* @param {?} value
* @return {?}
*/
set nzAvatar(value) {
if (value instanceof TemplateRef) {
this.avatarStr = '';
this.avatarTpl = value;
}
else {
this.avatarStr = value;
}
}
}
NzListItemMetaComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-list-item-meta',
exportAs: 'nzListItemMeta',
template: "<div *ngIf=\"avatarStr || avatarTpl\" class=\"ant-list-item-meta-avatar\">\n <ng-container *ngIf=\"avatarStr; else avatarTpl\">\n <nz-avatar [nzSrc]=\"avatarStr\"></nz-avatar>\n </ng-container>\n</div>\n<div *ngIf=\"nzTitle || nzDescription\" class=\"ant-list-item-meta-content\">\n <h4 *ngIf=\"nzTitle\" class=\"ant-list-item-meta-title\">\n <ng-container *nzStringTemplateOutlet=\"nzTitle\">{{ nzTitle }}</ng-container>\n </h4>\n <div *ngIf=\"nzDescription\" class=\"ant-list-item-meta-description\">\n <ng-container *nzStringTemplateOutlet=\"nzDescription\">{{ nzDescription }}</ng-container>\n </div>\n</div>",
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
}] }
];
/** @nocollapse */
NzListItemMetaComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 }
];
NzListItemMetaComponent.propDecorators = {
nzAvatar: [{ type: Input }],
nzTitle: [{ type: Input }],
nzDescription: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzListItemComponent {
/**
* @param {?} elementRef
* @param {?} renderer
*/
constructor(elementRef, renderer) {
this.elementRef = elementRef;
this.renderer = renderer;
this.nzActions = [];
this.renderer.addClass(this.elementRef.nativeElement, 'ant-list-item');
}
}
NzListItemComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-list-item',
exportAs: 'nzListItem',
template: "<ng-template #contentTpl>\n <div *ngIf=\"nzContent\" class=\"ant-list-item-content\" [ngClass]=\"{'ant-list-item-content-single': metas.length < 1}\">\n <ng-container *nzStringTemplateOutlet=\"nzContent\">{{ nzContent }}</ng-container>\n </div>\n</ng-template>\n<ng-template #actionsTpl>\n <ul *ngIf=\"nzActions?.length > 0\" class=\"ant-list-item-action\">\n <li *ngFor=\"let i of nzActions; let last=last;\">\n <ng-template [ngTemplateOutlet]=\"i\"></ng-template>\n <em *ngIf=\"!last\" class=\"ant-list-item-action-split\"></em>\n </li>\n </ul>\n</ng-template>\n<ng-template #mainTpl>\n <ng-content></ng-content>\n <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n <ng-template [ngTemplateOutlet]=\"actionsTpl\"></ng-template>\n</ng-template>\n<div *ngIf=\"nzExtra; else mainTpl\" class=\"ant-list-item-extra-wrap\">\n <div class=\"ant-list-item-main\">\n <ng-template [ngTemplateOutlet]=\"mainTpl\"></ng-template>\n </div>\n <div class=\"ant-list-item-extra\">\n <ng-template [ngTemplateOutlet]=\"nzExtra\"></ng-template>\n </div>\n</div>",
preserveWhitespaces: false,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
}] }
];
/** @nocollapse */
NzListItemComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 }
];
NzListItemComponent.propDecorators = {
metas: [{ type: ContentChildren, args: [NzListItemMetaComponent,] }],
nzActions: [{ type: Input }],
nzContent: [{ type: Input }],
nzExtra: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzListComponent {
// #endregion
/**
* @param {?} el
* @param {?} updateHostClassService
*/
constructor(el, updateHostClassService) {
this.el = el;
this.updateHostClassService = updateHostClassService;
this.nzBordered = false;
this.nzItemLayout = 'horizontal';
this.nzLoading = false;
this.nzSize = 'default';
this.nzSplit = true;
// #endregion
// #region styles
this.prefixCls = 'ant-list';
}
/**
* @private
* @return {?}
*/
_setClassMap() {
/** @type {?} */
const classMap = {
[this.prefixCls]: true,
[`${this.prefixCls}-vertical`]: this.nzItemLayout === 'vertical',
[`${this.prefixCls}-lg`]: this.nzSize === 'large',
[`${this.prefixCls}-sm`]: this.nzSize === 'small',
[`${this.prefixCls}-split`]: this.nzSplit,
[`${this.prefixCls}-bordered`]: this.nzBordered,
[`${this.prefixCls}-loading`]: this.nzLoading,
[`${this.prefixCls}-grid`]: this.nzGrid,
[`${this.prefixCls}-something-after-last-item`]: !!(this.nzLoadMore || this.nzPagination || this.nzFooter)
};
this.updateHostClassService.updateHostClass(this.el.nativeElement, classMap);
}
/**
* @return {?}
*/
ngOnInit() {
this._setClassMap();
}
/**
* @return {?}
*/
ngOnChanges() {
this._setClassMap();
}
}
NzListComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-list',
exportAs: 'nzList',
template: "<ng-template #itemsTpl>\n <ng-container *ngFor=\"let item of nzDataSource; let index = index\">\n <ng-template [ngTemplateOutlet]=\"nzRenderItem\" [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"></ng-template>\n </ng-container>\n</ng-template>\n<div *ngIf=\"nzHeader\" class=\"ant-list-header\">\n <ng-container *nzStringTemplateOutlet=\"nzHeader\">{{ nzHeader }}</ng-container>\n</div>\n<nz-spin [nzSpinning]=\"nzLoading\">\n <ng-container *ngIf=\"nzDataSource\">\n <div *ngIf=\"nzLoading && nzDataSource.length === 0\" [style.min-height.px]=\"53\"></div>\n <div *ngIf=\"nzGrid; else itemsTpl\" nz-row [nzGutter]=\"nzGrid.gutter\">\n <div nz-col [nzSpan]=\"nzGrid.span\" [nzXs]=\"nzGrid.xs\" [nzSm]=\"nzGrid.sm\" [nzMd]=\"nzGrid.md\" [nzLg]=\"nzGrid.lg\" [nzXl]=\"nzGrid.xl\"\n [nzXXl]=\"nzGrid.xxl\" *ngFor=\"let item of nzDataSource; let index = index\">\n <ng-template [ngTemplateOutlet]=\"nzRenderItem\" [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"></ng-template>\n </div>\n </div>\n <div *ngIf=\"!nzLoading && nzDataSource.length === 0\" class=\"ant-list-empty-text\">\n <nz-embed-empty [nzComponentName]=\"'list'\" [specificContent]=\"nzNoResult\"></nz-embed-empty>\n </div>\n </ng-container>\n <ng-content></ng-content>\n</nz-spin>\n<div *ngIf=\"nzFooter\" class=\"ant-list-footer\">\n <ng-container *nzStringTemplateOutlet=\"nzFooter\">{{ nzFooter }}</ng-container>\n</div>\n<ng-template [ngTemplateOutlet]=\"nzLoadMore\"></ng-template>\n<div *ngIf=\"nzPagination\" class=\"ant-list-pagination\">\n <ng-template [ngTemplateOutlet]=\"nzPagination\"></ng-template>\n</div>",
providers: [NzUpdateHostClassService],
preserveWhitespaces: false,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [`
nz-list,
nz-list nz-spin {
display: block;
}
`]
}] }
];
/** @nocollapse */
NzListComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: NzUpdateHostClassService }
];
NzListComponent.propDecorators = {
nzDataSource: [{ type: Input }],
nzBordered: [{ type: Input }],
nzGrid: [{ type: Input }],
nzHeader: [{ type: Input }],
nzFooter: [{ type: Input }],
nzItemLayout: [{ type: Input }],
nzRenderItem: [{ type: Input }],
nzLoading: [{ type: Input }],
nzLoadMore: [{ type: Input }],
nzPagination: [{ type: Input }],
nzSize: [{ type: Input }],
nzSplit: [{ type: Input }],
nzNoResult: [{ type: Input }]
};
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzListComponent.prototype, "nzBordered", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzListComponent.prototype, "nzLoading", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzListComponent.prototype, "nzSplit", void 0);
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzListModule {
}
NzListModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, NzSpinModule, NzGridModule, NzAvatarModule, NzAddOnModule, NzEmptyModule],
declarations: [NzListComponent, NzListItemComponent, NzListItemMetaComponent],
exports: [NzListComponent, NzListItemComponent, NzListItemMetaComponent]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NzListItemMetaComponent, NzListItemComponent, NzListComponent, NzListModule };
//# sourceMappingURL=ng-zorro-antd-list.js.map