ng-zorro-antd/bundles/ng-zorro-antd-list.umd.js

An enterprise-class UI components based on Ant Design and Angular

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('ng-zorro-antd/core'), require('rxjs'), require('@angular/common'), require('ng-zorro-antd/avatar'), require('ng-zorro-antd/empty'), require('ng-zorro-antd/grid'), require('ng-zorro-antd/spin')) :
    typeof define === 'function' && define.amd ? define('ng-zorro-antd/list', ['exports', '@angular/core', 'ng-zorro-antd/core', 'rxjs', '@angular/common', 'ng-zorro-antd/avatar', 'ng-zorro-antd/empty', 'ng-zorro-antd/grid', 'ng-zorro-antd/spin'], factory) :
    (global = global || self, factory((global['ng-zorro-antd'] = global['ng-zorro-antd'] || {}, global['ng-zorro-antd'].list = {}), global.ng.core, global['ng-zorro-antd'].core, global.rxjs, global.ng.common, global['ng-zorro-antd'].avatar, global['ng-zorro-antd'].empty, global['ng-zorro-antd'].grid, global['ng-zorro-antd'].spin));
}(this, function (exports, core, core$1, rxjs, common, avatar, empty, grid, spin) { 'use strict';

    /*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */

    function __decorate(decorators, target, key, desc) {
        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
        return c > 3 && r && Object.defineProperty(target, key, r), r;
    }

    function __metadata(metadataKey, metadataValue) {
        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
    }

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var NzListItemMetaComponent = /** @class */ (function () {
        function NzListItemMetaComponent(elementRef, renderer) {
            this.elementRef = elementRef;
            this.renderer = renderer;
            this.avatarStr = '';
            this.renderer.addClass(elementRef.nativeElement, 'ant-list-item-meta');
        }
        Object.defineProperty(NzListItemMetaComponent.prototype, "nzAvatar", {
            set: /**
             * @param {?} value
             * @return {?}
             */
            function (value) {
                if (value instanceof core.TemplateRef) {
                    this.avatarStr = '';
                    this.avatarTpl = value;
                }
                else {
                    this.avatarStr = value;
                }
            },
            enumerable: true,
            configurable: true
        });
        NzListItemMetaComponent.decorators = [
            { type: core.Component, args: [{
                        selector: 'nz-list-item-meta, [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: core.ChangeDetectionStrategy.OnPush,
                        encapsulation: core.ViewEncapsulation.None
                    }] }
        ];
        /** @nocollapse */
        NzListItemMetaComponent.ctorParameters = function () { return [
            { type: core.ElementRef },
            { type: core.Renderer2 }
        ]; };
        NzListItemMetaComponent.propDecorators = {
            nzAvatar: [{ type: core.Input }],
            nzTitle: [{ type: core.Input }],
            nzDescription: [{ type: core.Input }]
        };
        return NzListItemMetaComponent;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var NzListComponent = /** @class */ (function () {
        function NzListComponent(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';
            // #endregion
            this.itemLayoutNotifySource = new rxjs.BehaviorSubject(this.nzItemLayout);
        }
        /**
         * @private
         * @return {?}
         */
        NzListComponent.prototype._setClassMap = /**
         * @private
         * @return {?}
         */
        function () {
            var _a;
            /** @type {?} */
            var classMap = (_a = {},
                _a[this.prefixCls] = true,
                _a[this.prefixCls + "-vertical"] = this.nzItemLayout === 'vertical',
                _a[this.prefixCls + "-lg"] = this.nzSize === 'large',
                _a[this.prefixCls + "-sm"] = this.nzSize === 'small',
                _a[this.prefixCls + "-split"] = this.nzSplit,
                _a[this.prefixCls + "-bordered"] = this.nzBordered,
                _a[this.prefixCls + "-loading"] = this.nzLoading,
                _a[this.prefixCls + "-grid"] = this.nzGrid,
                _a[this.prefixCls + "-something-after-last-item"] = !!(this.nzLoadMore || this.nzPagination || this.nzFooter),
                _a);
            this.updateHostClassService.updateHostClass(this.el.nativeElement, classMap);
        };
        Object.defineProperty(NzListComponent.prototype, "itemLayoutNotify$", {
            get: /**
             * @return {?}
             */
            function () {
                return this.itemLayoutNotifySource.asObservable();
            },
            enumerable: true,
            configurable: true
        });
        /**
         * @return {?}
         */
        NzListComponent.prototype.ngOnInit = /**
         * @return {?}
         */
        function () {
            this._setClassMap();
        };
        /**
         * @param {?} changes
         * @return {?}
         */
        NzListComponent.prototype.ngOnChanges = /**
         * @param {?} changes
         * @return {?}
         */
        function (changes) {
            this._setClassMap();
            if (changes.nzItemLayout) {
                this.itemLayoutNotifySource.next(this.nzItemLayout);
            }
        };
        /**
         * @return {?}
         */
        NzListComponent.prototype.ngOnDestroy = /**
         * @return {?}
         */
        function () {
            this.itemLayoutNotifySource.unsubscribe();
        };
        NzListComponent.decorators = [
            { type: core.Component, args: [{
                        selector: 'nz-list, [nz-list]',
                        exportAs: 'nzList',
                        template: "<ng-template #itemsTpl>\n  <div class=\"ant-list-items\" *ngIf=\"nzDataSource.length > 0\">\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  </div>\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: [core$1.NzUpdateHostClassService],
                        preserveWhitespaces: false,
                        encapsulation: core.ViewEncapsulation.None,
                        changeDetection: core.ChangeDetectionStrategy.OnPush,
                        styles: ["\n      nz-list,\n      nz-list nz-spin {\n        display: block;\n      }\n    "]
                    }] }
        ];
        /** @nocollapse */
        NzListComponent.ctorParameters = function () { return [
            { type: core.ElementRef },
            { type: core$1.NzUpdateHostClassService }
        ]; };
        NzListComponent.propDecorators = {
            nzDataSource: [{ type: core.Input }],
            nzBordered: [{ type: core.Input }],
            nzGrid: [{ type: core.Input }],
            nzHeader: [{ type: core.Input }],
            nzFooter: [{ type: core.Input }],
            nzItemLayout: [{ type: core.Input }],
            nzRenderItem: [{ type: core.Input }],
            nzLoading: [{ type: core.Input }],
            nzLoadMore: [{ type: core.Input }],
            nzPagination: [{ type: core.Input }],
            nzSize: [{ type: core.Input }],
            nzSplit: [{ type: core.Input }],
            nzNoResult: [{ type: core.Input }]
        };
        __decorate([
            core$1.InputBoolean(),
            __metadata("design:type", Object)
        ], NzListComponent.prototype, "nzBordered", void 0);
        __decorate([
            core$1.InputBoolean(),
            __metadata("design:type", Object)
        ], NzListComponent.prototype, "nzLoading", void 0);
        __decorate([
            core$1.InputBoolean(),
            __metadata("design:type", Object)
        ], NzListComponent.prototype, "nzSplit", void 0);
        return NzListComponent;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var NzListItemComponent = /** @class */ (function () {
        function NzListItemComponent(elementRef, renderer, parentComp, cdr) {
            this.parentComp = parentComp;
            this.cdr = cdr;
            this.nzActions = [];
            this.nzNoFlex = false;
            renderer.addClass(elementRef.nativeElement, 'ant-list-item');
        }
        Object.defineProperty(NzListItemComponent.prototype, "isVerticalAndExtra", {
            get: /**
             * @return {?}
             */
            function () {
                return this.itemLayout === 'vertical' && !!this.nzExtra;
            },
            enumerable: true,
            configurable: true
        });
        /**
         * @return {?}
         */
        NzListItemComponent.prototype.ngAfterViewInit = /**
         * @return {?}
         */
        function () {
            var _this = this;
            this.itemLayout$ = this.parentComp.itemLayoutNotify$.subscribe((/**
             * @param {?} val
             * @return {?}
             */
            function (val) {
                _this.itemLayout = val;
                _this.cdr.detectChanges();
            }));
        };
        /**
         * @return {?}
         */
        NzListItemComponent.prototype.ngOnDestroy = /**
         * @return {?}
         */
        function () {
            if (this.itemLayout$) {
                this.itemLayout$.unsubscribe();
            }
        };
        NzListItemComponent.decorators = [
            { type: core.Component, args: [{
                        selector: 'nz-list-item, [nz-list-item]',
                        exportAs: 'nzListItem',
                        template: "<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 #contentTpl>\n  <ng-content></ng-content>\n  <ng-container *ngIf=\"nzContent\">\n    <ng-container *nzStringTemplateOutlet=\"nzContent\">{{ nzContent }}</ng-container>\n  </ng-container>\n</ng-template>\n<ng-template #simpleTpl>\n  <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n  <ng-template [ngTemplateOutlet]=\"nzExtra\"></ng-template>\n  <ng-template [ngTemplateOutlet]=\"actionsTpl\"></ng-template>\n</ng-template>\n<ng-container *ngIf=\"isVerticalAndExtra; else simpleTpl\">\n  <div class=\"ant-list-item-main\">\n    <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n    <ng-template [ngTemplateOutlet]=\"actionsTpl\"></ng-template>\n  </div>\n  <div class=\"ant-list-item-extra\">\n    <ng-template [ngTemplateOutlet]=\"nzExtra\"></ng-template>\n  </div>\n</ng-container>",
                        preserveWhitespaces: false,
                        encapsulation: core.ViewEncapsulation.None,
                        changeDetection: core.ChangeDetectionStrategy.OnPush
                    }] }
        ];
        /** @nocollapse */
        NzListItemComponent.ctorParameters = function () { return [
            { type: core.ElementRef },
            { type: core.Renderer2 },
            { type: NzListComponent },
            { type: core.ChangeDetectorRef }
        ]; };
        NzListItemComponent.propDecorators = {
            metas: [{ type: core.ContentChildren, args: [NzListItemMetaComponent,] }],
            nzActions: [{ type: core.Input }],
            nzContent: [{ type: core.Input }],
            nzExtra: [{ type: core.Input }],
            nzNoFlex: [{ type: core.Input }, { type: core.HostBinding, args: ['class.ant-list-item-no-flex',] }]
        };
        __decorate([
            core$1.InputBoolean(),
            __metadata("design:type", Boolean)
        ], NzListItemComponent.prototype, "nzNoFlex", void 0);
        return NzListItemComponent;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var NzListModule = /** @class */ (function () {
        function NzListModule() {
        }
        NzListModule.decorators = [
            { type: core.NgModule, args: [{
                        imports: [common.CommonModule, spin.NzSpinModule, grid.NzGridModule, avatar.NzAvatarModule, core$1.NzAddOnModule, empty.NzEmptyModule],
                        declarations: [NzListComponent, NzListItemComponent, NzListItemMetaComponent],
                        exports: [NzListComponent, NzListItemComponent, NzListItemMetaComponent]
                    },] }
        ];
        return NzListModule;
    }());

    exports.NzListComponent = NzListComponent;
    exports.NzListItemComponent = NzListItemComponent;
    exports.NzListItemMetaComponent = NzListItemMetaComponent;
    exports.NzListModule = NzListModule;

    Object.defineProperty(exports, '__esModule', { value: true });

}));
//# sourceMappingURL=ng-zorro-antd-list.umd.js.map