ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
132 lines (130 loc) • 14.3 kB
JavaScript
import { __decorate } from "tslib";
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
import { ChangeDetectionStrategy, Component, ContentChild, HostBinding, Input, ViewEncapsulation } from '@angular/core';
import { InputBoolean } from 'ng-zorro-antd/core/util';
import { NzListItemExtraComponent } from './list-item-cell';
import * as i0 from "@angular/core";
import * as i1 from "./list.component";
import * as i2 from "./list-item-cell";
import * as i3 from "@angular/common";
import * as i4 from "ng-zorro-antd/core/outlet";
export class NzListItemComponent {
constructor(elementRef, renderer, parentComp, cdr) {
this.parentComp = parentComp;
this.cdr = cdr;
this.nzActions = [];
this.nzExtra = null;
this.nzNoFlex = false;
renderer.addClass(elementRef.nativeElement, 'ant-list-item');
}
get isVerticalAndExtra() {
return this.itemLayout === 'vertical' && (!!this.listItemExtraDirective || !!this.nzExtra);
}
ngAfterViewInit() {
this.itemLayout$ = this.parentComp.itemLayoutNotify$.subscribe(val => {
this.itemLayout = val;
this.cdr.detectChanges();
});
}
ngOnDestroy() {
if (this.itemLayout$) {
this.itemLayout$.unsubscribe();
}
}
}
NzListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NzListItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.NzListComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
NzListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: NzListItemComponent, selector: "nz-list-item, [nz-list-item]", inputs: { nzActions: "nzActions", nzContent: "nzContent", nzExtra: "nzExtra", nzNoFlex: "nzNoFlex" }, host: { properties: { "class.ant-list-item-no-flex": "this.nzNoFlex" } }, queries: [{ propertyName: "listItemExtraDirective", first: true, predicate: NzListItemExtraComponent, descendants: true }], exportAs: ["nzListItem"], ngImport: i0, template: `
<ng-template #actionsTpl>
<ul nz-list-item-actions *ngIf="nzActions && nzActions.length > 0" [nzActions]="nzActions"></ul>
<ng-content select="nz-list-item-actions, [nz-list-item-actions]"></ng-content>
</ng-template>
<ng-template #contentTpl>
<ng-content select="nz-list-item-meta, [nz-list-item-meta]"></ng-content>
<ng-content></ng-content>
<ng-container *ngIf="nzContent">
<ng-container *nzStringTemplateOutlet="nzContent">{{ nzContent }}</ng-container>
</ng-container>
</ng-template>
<ng-template #extraTpl>
<ng-content select="nz-list-item-extra, [nz-list-item-extra]"></ng-content>
</ng-template>
<ng-template #simpleTpl>
<ng-template [ngTemplateOutlet]="contentTpl"></ng-template>
<ng-template [ngTemplateOutlet]="nzExtra"></ng-template>
<ng-template [ngTemplateOutlet]="extraTpl"></ng-template>
<ng-template [ngTemplateOutlet]="actionsTpl"></ng-template>
</ng-template>
<ng-container *ngIf="isVerticalAndExtra; else simpleTpl">
<div class="ant-list-item-main">
<ng-template [ngTemplateOutlet]="contentTpl"></ng-template>
<ng-template [ngTemplateOutlet]="actionsTpl"></ng-template>
</div>
<nz-list-item-extra *ngIf="nzExtra">
<ng-template [ngTemplateOutlet]="nzExtra"></ng-template>
</nz-list-item-extra>
<ng-template [ngTemplateOutlet]="extraTpl"></ng-template>
</ng-container>
`, isInline: true, components: [{ type: i2.NzListItemActionsComponent, selector: "ul[nz-list-item-actions]", inputs: ["nzActions"], exportAs: ["nzListItemActions"] }, { type: i2.NzListItemExtraComponent, selector: "nz-list-item-extra, [nz-list-item-extra]", exportAs: ["nzListItemExtra"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
__decorate([
InputBoolean()
], NzListItemComponent.prototype, "nzNoFlex", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NzListItemComponent, decorators: [{
type: Component,
args: [{
selector: 'nz-list-item, [nz-list-item]',
exportAs: 'nzListItem',
template: `
<ng-template #actionsTpl>
<ul nz-list-item-actions *ngIf="nzActions && nzActions.length > 0" [nzActions]="nzActions"></ul>
<ng-content select="nz-list-item-actions, [nz-list-item-actions]"></ng-content>
</ng-template>
<ng-template #contentTpl>
<ng-content select="nz-list-item-meta, [nz-list-item-meta]"></ng-content>
<ng-content></ng-content>
<ng-container *ngIf="nzContent">
<ng-container *nzStringTemplateOutlet="nzContent">{{ nzContent }}</ng-container>
</ng-container>
</ng-template>
<ng-template #extraTpl>
<ng-content select="nz-list-item-extra, [nz-list-item-extra]"></ng-content>
</ng-template>
<ng-template #simpleTpl>
<ng-template [ngTemplateOutlet]="contentTpl"></ng-template>
<ng-template [ngTemplateOutlet]="nzExtra"></ng-template>
<ng-template [ngTemplateOutlet]="extraTpl"></ng-template>
<ng-template [ngTemplateOutlet]="actionsTpl"></ng-template>
</ng-template>
<ng-container *ngIf="isVerticalAndExtra; else simpleTpl">
<div class="ant-list-item-main">
<ng-template [ngTemplateOutlet]="contentTpl"></ng-template>
<ng-template [ngTemplateOutlet]="actionsTpl"></ng-template>
</div>
<nz-list-item-extra *ngIf="nzExtra">
<ng-template [ngTemplateOutlet]="nzExtra"></ng-template>
</nz-list-item-extra>
<ng-template [ngTemplateOutlet]="extraTpl"></ng-template>
</ng-container>
`,
preserveWhitespaces: false,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.NzListComponent }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { nzActions: [{
type: Input
}], nzContent: [{
type: Input
}], nzExtra: [{
type: Input
}], nzNoFlex: [{
type: Input
}, {
type: HostBinding,
args: ['class.ant-list-item-no-flex']
}], listItemExtraDirective: [{
type: ContentChild,
args: [NzListItemExtraComponent]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlzdC1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvbGlzdC9saXN0LWl0ZW0uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQTs7O0dBR0c7QUFFSCxPQUFPLEVBRUwsdUJBQXVCLEVBRXZCLFNBQVMsRUFDVCxZQUFZLEVBRVosV0FBVyxFQUNYLEtBQUssRUFJTCxpQkFBaUIsRUFDbEIsTUFBTSxlQUFlLENBQUM7QUFJdkIsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBRXZELE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLGtCQUFrQixDQUFDOzs7Ozs7QUEyQzVELE1BQU0sT0FBTyxtQkFBbUI7SUFpQjlCLFlBQ0UsVUFBc0IsRUFDdEIsUUFBbUIsRUFDWCxVQUEyQixFQUMzQixHQUFzQjtRQUR0QixlQUFVLEdBQVYsVUFBVSxDQUFpQjtRQUMzQixRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQWxCdkIsY0FBUyxHQUE2QixFQUFFLENBQUM7UUFFekMsWUFBTyxHQUE2QixJQUFJLENBQUM7UUFDbUIsYUFBUSxHQUFZLEtBQUssQ0FBQztRQWlCN0YsUUFBUSxDQUFDLFFBQVEsQ0FBQyxVQUFVLENBQUMsYUFBYSxFQUFFLGVBQWUsQ0FBQyxDQUFDO0lBQy9ELENBQUM7SUFYRCxJQUFJLGtCQUFrQjtRQUNwQixPQUFPLElBQUksQ0FBQyxVQUFVLEtBQUssVUFBVSxJQUFJLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxzQkFBc0IsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQzdGLENBQUM7SUFXRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLGlCQUFpQixDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsRUFBRTtZQUNuRSxJQUFJLENBQUMsVUFBVSxHQUFHLEdBQUcsQ0FBQztZQUN0QixJQUFJLENBQUMsR0FBRyxDQUFDLGFBQWEsRUFBRSxDQUFDO1FBQzNCLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUU7WUFDcEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxXQUFXLEVBQUUsQ0FBQztTQUNoQztJQUNILENBQUM7O2dIQXJDVSxtQkFBbUI7b0dBQW5CLG1CQUFtQix3U0FRaEIsd0JBQXdCLDBFQTdDNUI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBZ0NUO0FBV29FO0lBQTNELFlBQVksRUFBRTtxREFBdUU7MkZBTnBGLG1CQUFtQjtrQkF4Qy9CLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLDhCQUE4QjtvQkFDeEMsUUFBUSxFQUFFLFlBQVk7b0JBQ3RCLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FnQ1Q7b0JBQ0QsbUJBQW1CLEVBQUUsS0FBSztvQkFDMUIsYUFBYSxFQUFFLGlCQUFpQixDQUFDLElBQUk7b0JBQ3JDLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO2lCQUNoRDt1TEFJVSxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUMrRCxRQUFRO3NCQUE1RSxLQUFLOztzQkFBb0IsV0FBVzt1QkFBQyw2QkFBNkI7Z0JBRTNCLHNCQUFzQjtzQkFBN0QsWUFBWTt1QkFBQyx3QkFBd0IiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGFuIE1JVC1zdHlsZSBsaWNlbnNlIHRoYXQgY2FuIGJlXG4gKiBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlIGF0IGh0dHBzOi8vZ2l0aHViLmNvbS9ORy1aT1JSTy9uZy16b3Jyby1hbnRkL2Jsb2IvbWFzdGVyL0xJQ0VOU0VcbiAqL1xuXG5pbXBvcnQge1xuICBBZnRlclZpZXdJbml0LFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkLFxuICBFbGVtZW50UmVmLFxuICBIb3N0QmluZGluZyxcbiAgSW5wdXQsXG4gIE9uRGVzdHJveSxcbiAgUmVuZGVyZXIyLFxuICBUZW1wbGF0ZVJlZixcbiAgVmlld0VuY2Fwc3VsYXRpb25cbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcblxuaW1wb3J0IHsgQm9vbGVhbklucHV0LCBOekRpcmVjdGlvblZIVHlwZSB9IGZyb20gJ25nLXpvcnJvLWFudGQvY29yZS90eXBlcyc7XG5pbXBvcnQgeyBJbnB1dEJvb2xlYW4gfSBmcm9tICduZy16b3Jyby1hbnRkL2NvcmUvdXRpbCc7XG5cbmltcG9ydCB7IE56TGlzdEl0ZW1FeHRyYUNvbXBvbmVudCB9IGZyb20gJy4vbGlzdC1pdGVtLWNlbGwnO1xuaW1wb3J0IHsgTnpMaXN0Q29tcG9uZW50IH0gZnJvbSAnLi9saXN0LmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ256LWxpc3QtaXRlbSwgW256LWxpc3QtaXRlbV0nLFxuICBleHBvcnRBczogJ256TGlzdEl0ZW0nLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxuZy10ZW1wbGF0ZSAjYWN0aW9uc1RwbD5cbiAgICAgIDx1bCBuei1saXN0LWl0ZW0tYWN0aW9ucyAqbmdJZj1cIm56QWN0aW9ucyAmJiBuekFjdGlvbnMubGVuZ3RoID4gMFwiIFtuekFjdGlvbnNdPVwibnpBY3Rpb25zXCI+PC91bD5cbiAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIm56LWxpc3QtaXRlbS1hY3Rpb25zLCBbbnotbGlzdC1pdGVtLWFjdGlvbnNdXCI+PC9uZy1jb250ZW50PlxuICAgIDwvbmctdGVtcGxhdGU+XG4gICAgPG5nLXRlbXBsYXRlICNjb250ZW50VHBsPlxuICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwibnotbGlzdC1pdGVtLW1ldGEsIFtuei1saXN0LWl0ZW0tbWV0YV1cIj48L25nLWNvbnRlbnQ+XG4gICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwibnpDb250ZW50XCI+XG4gICAgICAgIDxuZy1jb250YWluZXIgKm56U3RyaW5nVGVtcGxhdGVPdXRsZXQ9XCJuekNvbnRlbnRcIj57eyBuekNvbnRlbnQgfX08L25nLWNvbnRhaW5lcj5cbiAgICAgIDwvbmctY29udGFpbmVyPlxuICAgIDwvbmctdGVtcGxhdGU+XG4gICAgPG5nLXRlbXBsYXRlICNleHRyYVRwbD5cbiAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIm56LWxpc3QtaXRlbS1leHRyYSwgW256LWxpc3QtaXRlbS1leHRyYV1cIj48L25nLWNvbnRlbnQ+XG4gICAgPC9uZy10ZW1wbGF0ZT5cbiAgICA8bmctdGVtcGxhdGUgI3NpbXBsZVRwbD5cbiAgICAgIDxuZy10ZW1wbGF0ZSBbbmdUZW1wbGF0ZU91dGxldF09XCJjb250ZW50VHBsXCI+PC9uZy10ZW1wbGF0ZT5cbiAgICAgIDxuZy10ZW1wbGF0ZSBbbmdUZW1wbGF0ZU91dGxldF09XCJuekV4dHJhXCI+PC9uZy10ZW1wbGF0ZT5cbiAgICAgIDxuZy10ZW1wbGF0ZSBbbmdUZW1wbGF0ZU91dGxldF09XCJleHRyYVRwbFwiPjwvbmctdGVtcGxhdGU+XG4gICAgICA8bmctdGVtcGxhdGUgW25nVGVtcGxhdGVPdXRsZXRdPVwiYWN0aW9uc1RwbFwiPjwvbmctdGVtcGxhdGU+XG4gICAgPC9uZy10ZW1wbGF0ZT5cblxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJpc1ZlcnRpY2FsQW5kRXh0cmE7IGVsc2Ugc2ltcGxlVHBsXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiYW50LWxpc3QtaXRlbS1tYWluXCI+XG4gICAgICAgIDxuZy10ZW1wbGF0ZSBbbmdUZW1wbGF0ZU91dGxldF09XCJjb250ZW50VHBsXCI+PC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgPG5nLXRlbXBsYXRlIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImFjdGlvbnNUcGxcIj48L25nLXRlbXBsYXRlPlxuICAgICAgPC9kaXY+XG4gICAgICA8bnotbGlzdC1pdGVtLWV4dHJhICpuZ0lmPVwibnpFeHRyYVwiPlxuICAgICAgICA8bmctdGVtcGxhdGUgW25nVGVtcGxhdGVPdXRsZXRdPVwibnpFeHRyYVwiPjwvbmctdGVtcGxhdGU+XG4gICAgICA8L256LWxpc3QtaXRlbS1leHRyYT5cbiAgICAgIDxuZy10ZW1wbGF0ZSBbbmdUZW1wbGF0ZU91dGxldF09XCJleHRyYVRwbFwiPjwvbmctdGVtcGxhdGU+XG4gICAgPC9uZy1jb250YWluZXI+XG4gIGAsXG4gIHByZXNlcnZlV2hpdGVzcGFjZXM6IGZhbHNlLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxufSlcbmV4cG9ydCBjbGFzcyBOekxpc3RJdGVtQ29tcG9uZW50IGltcGxlbWVudHMgT25EZXN0cm95LCBBZnRlclZpZXdJbml0IHtcbiAgc3RhdGljIG5nQWNjZXB0SW5wdXRUeXBlX256Tm9GbGV4OiBCb29sZWFuSW5wdXQ7XG5cbiAgQElucHV0KCkgbnpBY3Rpb25zOiBBcnJheTxUZW1wbGF0ZVJlZjx2b2lkPj4gPSBbXTtcbiAgQElucHV0KCkgbnpDb250ZW50Pzogc3RyaW5nIHwgVGVtcGxhdGVSZWY8dm9pZD47XG4gIEBJbnB1dCgpIG56RXh0cmE6IFRlbXBsYXRlUmVmPHZvaWQ+IHwgbnVsbCA9IG51bGw7XG4gIEBJbnB1dCgpIEBJbnB1dEJvb2xlYW4oKSBASG9zdEJpbmRpbmcoJ2NsYXNzLmFudC1saXN0LWl0ZW0tbm8tZmxleCcpIG56Tm9GbGV4OiBib29sZWFuID0gZmFsc2U7XG5cbiAgQENvbnRlbnRDaGlsZChOekxpc3RJdGVtRXh0cmFDb21wb25lbnQpIGxpc3RJdGVtRXh0cmFEaXJlY3RpdmU/OiBOekxpc3RJdGVtRXh0cmFDb21wb25lbnQ7XG5cbiAgcHJpdmF0ZSBpdGVtTGF5b3V0PzogTnpEaXJlY3Rpb25WSFR5cGU7XG4gIHByaXZhdGUgaXRlbUxheW91dCQ/OiBTdWJzY3JpcHRpb247XG5cbiAgZ2V0IGlzVmVydGljYWxBbmRFeHRyYSgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5pdGVtTGF5b3V0ID09PSAndmVydGljYWwnICYmICghIXRoaXMubGlzdEl0ZW1FeHRyYURpcmVjdGl2ZSB8fCAhIXRoaXMubnpFeHRyYSk7XG4gIH1cblxuICBjb25zdHJ1Y3RvcihcbiAgICBlbGVtZW50UmVmOiBFbGVtZW50UmVmLFxuICAgIHJlbmRlcmVyOiBSZW5kZXJlcjIsXG4gICAgcHJpdmF0ZSBwYXJlbnRDb21wOiBOekxpc3RDb21wb25lbnQsXG4gICAgcHJpdmF0ZSBjZHI6IENoYW5nZURldGVjdG9yUmVmXG4gICkge1xuICAgIHJlbmRlcmVyLmFkZENsYXNzKGVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCwgJ2FudC1saXN0LWl0ZW0nKTtcbiAgfVxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLml0ZW1MYXlvdXQkID0gdGhpcy5wYXJlbnRDb21wLml0ZW1MYXlvdXROb3RpZnkkLnN1YnNjcmliZSh2YWwgPT4ge1xuICAgICAgdGhpcy5pdGVtTGF5b3V0ID0gdmFsO1xuICAgICAgdGhpcy5jZHIuZGV0ZWN0Q2hhbmdlcygpO1xuICAgIH0pO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuaXRlbUxheW91dCQpIHtcbiAgICAgIHRoaXMuaXRlbUxheW91dCQudW5zdWJzY3JpYmUoKTtcbiAgICB9XG4gIH1cbn1cbiJdfQ==