refactor(module:card): refactor card (NG-ZORRO#4778)

components/card/nz-card-grid.directive.ts → components/card/card-grid.directive.ts

@@ -6,19 +6,17 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
+import { Directive, Input } from '@angular/core';
 import { InputBoolean } from 'ng-zorro-antd/core';
 
 @Directive({
   selector: '[nz-card-grid]',
   exportAs: 'nzCardGrid',
   host: {
+    '[class.ant-card-grid]': 'true',
     '[class.ant-card-hoverable]': 'nzHoverable'
   }
 })
 export class NzCardGridDirective {
-  @Input() @InputBoolean() nzHoverable: boolean = true;
-  constructor(elementRef: ElementRef, renderer: Renderer2) {
-    renderer.addClass(elementRef.nativeElement, 'ant-card-grid');
-  }
+  @Input() @InputBoolean() nzHoverable = true;
 }

components/card/card-loading.component.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * 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, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'nz-card-loading',
+  exportAs: 'nzCardLoading',
+  template: `
+    <div class="ant-card-loading-content">
+      <div class="ant-row" style="margin-left: -4px; margin-right: -4px;" *ngFor="let listOfClassName of listOfLoading">
+        <div *ngFor="let className of listOfClassName" [class]="className" style="padding-left: 4px; padding-right: 4px;">
+          <div class="ant-card-loading-block"></div>
+        </div>
+      </div>
+    </div>
+  `,
+  preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    '[class.ant-card-loading-content]': 'true'
+  }
+})
+export class NzCardLoadingComponent {
+  listOfLoading: string[][] = [
+    ['ant-col-22'],
+    ['ant-col-8', 'ant-col-15'],
+    ['ant-col-6', 'ant-col-18'],
+    ['ant-col-13', 'ant-col-9'],
+    ['ant-col-4', 'ant-col-3', 'ant-col-16'],
+    ['ant-col-8', 'ant-col-6', 'ant-col-8']
+  ];
+  constructor() {}
+}

components/card/card-meta.component.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * 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, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'nz-card-meta',
+  exportAs: 'nzCardMeta',
+  preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <div class="ant-card-meta-avatar" *ngIf="nzAvatar">
+      <ng-template [ngTemplateOutlet]="nzAvatar"></ng-template>
+    </div>
+    <div class="ant-card-meta-detail" *ngIf="nzTitle || nzDescription">
+      <div class="ant-card-meta-title" *ngIf="nzTitle">
+        <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
+      </div>
+      <div class="ant-card-meta-description" *ngIf="nzDescription">
+        <ng-container *nzStringTemplateOutlet="nzDescription">{{ nzDescription }}</ng-container>
+      </div>
+    </div>
+  `,
+  host: {
+    '[class.ant-card-meta]': 'true'
+  }
+})
+export class NzCardMetaComponent {
+  @Input() nzTitle: string | TemplateRef<void> | null = null;
+  @Input() nzDescription: string | TemplateRef<void> | null = null;
+  @Input() nzAvatar: TemplateRef<void> | null = null;
+}

components/card/nz-card-tab.component.ts → components/card/card-tab.component.ts

@@ -13,7 +13,11 @@ import { ChangeDetectionStrategy, Component, TemplateRef, ViewChild, ViewEncapsu
   exportAs: 'nzCardTab',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './nz-card-tab.component.html'
+  template: `
+    <ng-template>
+      <ng-content></ng-content>
+    </ng-template>
+  `
 })
 export class NzCardTabComponent {
   @ViewChild(TemplateRef, { static: true }) template: TemplateRef<void>;

components/card/card.component.ts

@@ -0,0 +1,104 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * 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,
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  ContentChildren,
+  Input,
+  OnDestroy,
+  QueryList,
+  TemplateRef,
+  ViewEncapsulation
+} from '@angular/core';
+import { InputBoolean, NzConfigService, NzSizeDSType, WithConfig } from 'ng-zorro-antd/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { NzCardGridDirective } from './card-grid.directive';
+import { NzCardTabComponent } from './card-tab.component';
+
+const NZ_CONFIG_COMPONENT_NAME = 'card';
+
+@Component({
+  selector: 'nz-card',
+  exportAs: 'nzCard',
+  preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <div class="ant-card-head" *ngIf="nzTitle || nzExtra || listOfNzCardTabComponent">
+      <div class="ant-card-head-wrapper">
+        <div class="ant-card-head-title" *ngIf="nzTitle">
+          <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
+        </div>
+        <div class="ant-card-extra" *ngIf="nzExtra">
+          <ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
+        </div>
+      </div>
+      <ng-container *ngIf="listOfNzCardTabComponent">
+        <ng-template [ngTemplateOutlet]="listOfNzCardTabComponent.template"></ng-template>
+      </ng-container>
+    </div>
+    <div class="ant-card-cover" *ngIf="nzCover">
+      <ng-template [ngTemplateOutlet]="nzCover"></ng-template>
+    </div>
+    <div class="ant-card-body" [ngStyle]="nzBodyStyle">
+      <ng-container *ngIf="!nzLoading; else loadingTemplate">
+        <ng-content></ng-content>
+      </ng-container>
+      <ng-template #loadingTemplate>
+        <nz-card-loading></nz-card-loading>
+      </ng-template>
+    </div>
+    <ul class="ant-card-actions" *ngIf="nzActions.length">
+      <li *ngFor="let action of nzActions" [style.width.%]="100 / nzActions.length">
+        <span><ng-template [ngTemplateOutlet]="action"></ng-template></span>
+      </li>
+    </ul>
+  `,
+  host: {
+    '[class.ant-card]': 'true',
+    '[class.ant-card-loading]': 'nzLoading',
+    '[class.ant-card-bordered]': 'nzBordered',
+    '[class.ant-card-hoverable]': 'nzHoverable',
+    '[class.ant-card-small]': 'nzSize === "small"',
+    '[class.ant-card-contain-grid]': 'listOfNzCardGridDirective && listOfNzCardGridDirective.length',
+    '[class.ant-card-type-inner]': 'nzType === "inner"',
+    '[class.ant-card-contain-tabs]': '!!listOfNzCardTabComponent'
+  }
+})
+export class NzCardComponent implements OnDestroy {
+  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, true) @InputBoolean() nzBordered: boolean;
+  @Input() @InputBoolean() nzLoading = false;
+  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, false) @InputBoolean() nzHoverable: boolean;
+  @Input() nzBodyStyle: { [key: string]: string };
+  @Input() nzCover: TemplateRef<void>;
+  @Input() nzActions: Array<TemplateRef<void>> = [];
+  @Input() nzType: string | 'inner' | null = null;
+  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 'default') nzSize: NzSizeDSType;
+  @Input() nzTitle: string | TemplateRef<void>;
+  @Input() nzExtra: string | TemplateRef<void>;
+  @ContentChild(NzCardTabComponent, { static: false }) listOfNzCardTabComponent: NzCardTabComponent;
+  @ContentChildren(NzCardGridDirective) listOfNzCardGridDirective: QueryList<NzCardGridDirective>;
+  private destroy$ = new Subject();
+
+  constructor(public nzConfigService: NzConfigService, private cdr: ChangeDetectorRef) {
+    this.nzConfigService
+      .getConfigChangeEventForComponent(NZ_CONFIG_COMPONENT_NAME)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        this.cdr.markForCheck();
+      });
+  }
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}

components/card/nz-card.module.ts → components/card/card.module.ts

@@ -10,11 +10,11 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { NzOutletModule } from 'ng-zorro-antd/core';
 
-import { NzCardGridDirective } from './nz-card-grid.directive';
-import { NzCardLoadingComponent } from './nz-card-loading.component';
-import { NzCardMetaComponent } from './nz-card-meta.component';
-import { NzCardTabComponent } from './nz-card-tab.component';
-import { NzCardComponent } from './nz-card.component';
+import { NzCardGridDirective } from './card-grid.directive';
+import { NzCardLoadingComponent } from './card-loading.component';
+import { NzCardMetaComponent } from './card-meta.component';
+import { NzCardTabComponent } from './card-tab.component';
+import { NzCardComponent } from './card.component';
 
 @NgModule({
   imports: [CommonModule, NzOutletModule],

components/card/nz-card.spec.ts → components/card/card.spec.ts

@@ -2,6 +2,9 @@ import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
 import { fakeAsync, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
+import { NzCardComponent } from './card.component';
+import { NzCardModule } from './card.module';
+
 import { NzDemoCardBasicComponent } from './demo/basic';
 import { NzDemoCardBorderLessComponent } from './demo/border-less';
 import { NzDemoCardFlexibleContentComponent } from './demo/flexible-content';
@@ -13,9 +16,6 @@ import { NzDemoCardMetaComponent } from './demo/meta';
 import { NzDemoCardSimpleComponent } from './demo/simple';
 import { NzDemoCardTabsComponent } from './demo/tabs';
 
-import { NzCardComponent } from './nz-card.component';
-import { NzCardModule } from './nz-card.module';
-
 describe('card', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({