import { Component , ViewEncapsulation , TemplateRef , Input , ContentChild } from '@angular/core' ; import { coerceBooleanProperty } from '@angular/cdk/coercion' ; @ Component ( { selector : 'chart-card' , template : `
    <nz-card [nzBodyStyle]="{padding: '20px 24px 8px 24px'}" [nzBordered]="bordered">
        <nz-spin [nzSpinning]="loading">
            <div class="chart-card">
                <div class="chart-top">
                    <div class="avatar"><ng-container *ngIf="_avatar; else _avatarTpl">{{ _avatar }}</ng-container></div>
                    <div class="meta-wrap">
                        <div class="meta">
                            <span class="title" *ngIf="_title; else _titleTpl">{{ _title }}</span>
                            <span class="action" *ngIf="_action || _actionTpl">
                                <ng-container *ngIf="_action; else _actionTpl">{{ _action }}</ng-container>
                            </span>
                        </div>
                        <p *ngIf="total" class="total" [innerHTML]="total"></p>
                    </div>
                </div>
                <div class="desc" [ngStyle]="{'height':_height}">
                    <div [ngClass]="{'fixed': !!_orgHeight }">
                        <ng-content></ng-content>
                    </div>
                </div>
                <div class="footer" *ngIf="_footer || _footerTpl">
                    <ng-container *ngIf="_footer; else _footerTpl">{{ _footer }}</ng-container>
                </div>
            </div>
        </nz-spin>
    </nz-card>
    ` , styleUrls : [ './card.less' ] } ) export class ChartCardComponent { /** 是否显示边框 */ @ Input ( ) get bordered ( ) { return this . _bordered ; } set bordered ( value ) { this . _bordered = coerceBooleanProperty ( value ) ; } private _bordered = false ; _avatar = '' ; _avatarTpl : TemplateRef < any > ; @ Input ( ) set avatar ( value ) { if ( value instanceof TemplateRef ) { this . _avatar = null ; this . _avatarTpl = value ; } else this . _avatar = value ; } _title = '' ; _titleTpl : TemplateRef < any > ; @ Input ( ) set title ( value ) { if ( value instanceof TemplateRef ) { this . _title = null ; this . _titleTpl = value ; } else this . _title = value ; } _action = '' ; _actionTpl : TemplateRef < any > ; @ Input ( ) set action ( value ) { if ( value instanceof TemplateRef ) { this . _action = null ; this . _actionTpl = value ; } else this . _action = value ; } @ Input ( ) total = '' ; _height = 'auto' ; _orgHeight : any ; @ Input ( ) set contentHeight ( value ) { this . _orgHeight = value ; this . _height = typeof value === 'number' ? this . _height = `${ value }px` : value ; } _footer = '' ; _footerTpl : TemplateRef < any > ; @ Input ( ) set footer ( value ) { if ( value instanceof TemplateRef ) { this . _footer = null ; this . _footerTpl = value ; } else this . _footer = value ; } /** 是否显示Loading */ @ Input ( ) get loading ( ) { return this . _loading ; } set loading ( value ) { this . _loading = coerceBooleanProperty ( value ) ; } private _loading = false ; }