feat(module:typography): support i18n

components/core/util/style-checke.ts

@@ -1,3 +1,11 @@
+/**
+ * @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
+ */
+
 export function isStyleSupport(styleName: string | string[]): boolean {
   if (typeof window !== 'undefined' && window.document && window.document.documentElement) {
     const styleNameList = Array.isArray(styleName) ? styleName : [styleName];

components/i18n/languages/en_US.ts

@@ -51,5 +51,14 @@ export default {
   },
   Empty: {
     description: 'No Data'
+  },
+  Text: {
+    edit: 'edit',
+    copy: 'copy',
+    copied: 'copy success',
+    expand: 'expand'
+  },
+  PageHeader: {
+    back: 'back'
   }
 };

components/i18n/languages/es_ES.ts

@@ -46,5 +46,14 @@ export default {
   },
   Empty: {
     description: 'No hay datos'
+  },
+  Text: {
+    edit: 'editar',
+    copy: 'copiar',
+    copied: 'copiado',
+    expand: 'expandir'
+  },
+  PageHeader: {
+    back: 'volver'
   }
 };

components/i18n/languages/it_IT.ts

@@ -47,5 +47,11 @@ export default {
   },
   Empty: {
     description: 'Nessun dato'
+  },
+  Text: {
+    edit: 'modifica',
+    copy: 'copia',
+    copied: 'copia effettuata',
+    expand: 'espandi'
   }
 };

components/i18n/languages/ru_RU.ts

@@ -46,5 +46,14 @@ export default {
   },
   Empty: {
     description: 'Нет данных'
+  },
+  Text: {
+    edit: 'редактировать',
+    copy: 'копировать',
+    copied: 'скопировано',
+    expand: 'раскрыть'
+  },
+  PageHeader: {
+    back: 'назад'
   }
 };

components/i18n/languages/tr_TR.ts

@@ -46,5 +46,11 @@ export default {
   },
   Empty: {
     description: 'Veri Yok'
+  },
+  Text: {
+    edit: 'düzenle',
+    copy: 'kopyala',
+    copied: 'kopyalandı',
+    expand: 'genişlet'
   }
 };

components/i18n/languages/zh_CN.ts

@@ -51,5 +51,14 @@ export default {
   },
   Empty: {
     description: '暂无数据'
+  },
+  Text: {
+    edit: '编辑',
+    copy: '复制',
+    copied: '复制成功',
+    expand: '展开'
+  },
+  PageHeader: {
+    back: '返回'
   }
 };

components/i18n/languages/zh_TW.ts

@@ -46,5 +46,8 @@ export default {
   },
   Empty: {
     description: '無此資料'
+  },
+  PageHeader: {
+    back: '返回'
   }
 };

components/input/nz-autosize.directive.ts

@@ -144,7 +144,7 @@ export class NzAutosizeDirective implements AfterViewInit, OnDestroy, DoCheck {
     textareaClone.style.overflow = 'hidden';
 
     this.el.parentNode!.appendChild(textareaClone);
-    this.cachedLineHeight = textareaClone.clientHeight - this.inputGap - 1;
+    this.cachedLineHeight = textareaClone.clientHeight;
     this.el.parentNode!.removeChild(textareaClone);
 
     // Min and max heights have to be re-calculated if the cached line height changes

components/typography/nz-text-copy.component.html

@@ -1,4 +1,4 @@
-<nz-tooltip [nzTitle]="copied ? '复制成功' : '复制'">
+<nz-tooltip [nzTitle]="copied ? locale?.copied : locale?.copy">
   <button
     nz-tooltip
     nz-trans-button

components/typography/nz-text-copy.component.ts

@@ -14,11 +14,15 @@ import {
   EventEmitter,
   Input,
   OnDestroy,
+  OnInit,
   Output,
   ViewEncapsulation
 } from '@angular/core';
 
 import { NzCopyToClipboardService } from 'ng-zorro-antd/core';
+import { NzI18nService } from 'ng-zorro-antd/i18n';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'nz-text-copy',
@@ -27,19 +31,30 @@ import { NzCopyToClipboardService } from 'ng-zorro-antd/core';
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false
 })
-export class NzTextCopyComponent implements OnDestroy {
+export class NzTextCopyComponent implements OnInit, OnDestroy {
   copied = false;
   copyId: number;
-  @Input() getText: () => string;
+  // tslint:disable-next-line:no-any
+  locale: any = {};
+  private destroy$ = new Subject();
 
+  @Input() getText: () => string;
   @Output() readonly textCopy = new EventEmitter<string>();
 
   constructor(
     public host: ElementRef,
     private cdr: ChangeDetectorRef,
-    private copyToClipboard: NzCopyToClipboardService
+    private copyToClipboard: NzCopyToClipboardService,
+    private i18n: NzI18nService
   ) {}
 
+  ngOnInit(): void {
+    this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
+      this.locale = this.i18n.getLocaleData('Text');
+      this.cdr.markForCheck();
+    });
+  }
+
   ngOnDestroy(): void {
     clearTimeout(this.copyId);
   }

components/typography/nz-text-edit.component.html

@@ -1,4 +1,4 @@
-<nz-tooltip *ngIf="!editing" [nzTitle]="'编辑'">
+<nz-tooltip *ngIf="!editing" [nzTitle]="locale?.edit">
   <button
     nz-tooltip
     nz-trans-button

components/typography/nz-text-edit.component.ts

@@ -8,36 +8,56 @@
 
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
   Input,
   OnDestroy,
+  OnInit,
   Output,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
 
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { NzI18nService } from 'ng-zorro-antd/i18n';
+
 @Component({
   selector: 'nz-text-edit',
   templateUrl: './nz-text-edit.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false
 })
-export class NzTextEditComponent implements OnDestroy {
+export class NzTextEditComponent implements OnInit, OnDestroy {
   editing = false;
+  // tslint:disable-next-line:no-any
+  locale: any = {};
+  private destroy$ = new Subject();
 
   @Input() getText: () => string;
   @Output() readonly startEditing = new EventEmitter<void>();
   @Output() readonly endEditing = new EventEmitter<string>();
-  @ViewChild('textarea') textarea: ElementRef<HTMLTextAreaElement>;
+  @ViewChild('textarea', { static: false }) textarea: ElementRef<HTMLTextAreaElement>;
 
   beforeText: string;
   currentText: string;
-  constructor(public host: ElementRef) {}
+  constructor(public host: ElementRef, private cdr: ChangeDetectorRef, private i18n: NzI18nService) {}
+
+  ngOnInit(): void {
+    this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
+      this.locale = this.i18n.getLocaleData('Text');
+      this.cdr.markForCheck();
+    });
+  }
 
-  ngOnDestroy(): void {}
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 
   onClick(): void {
     this.beforeText = this.getText();

components/typography/nz-typography.component.html

@@ -1,13 +1,13 @@
 <ng-template #contentTemplate>
   <ng-content></ng-content>
 </ng-template>
-<ng-container *ngIf="!editing && nzEllipsisRows === 1">
+<ng-container *ngIf="!editing && (expanded || (!nzExpandable && nzEllipsisRows === 1))">
   <ng-template [ngTemplateOutlet]="contentTemplate"></ng-template>
 </ng-container>
-<ng-container *ngIf="nzEllipsis && nzEllipsisRows > 1">s
+<ng-container *ngIf="nzEllipsis && !expanded && (nzEllipsisRows > 1 || nzExpandable)">
   <span #ellipsisContainer></span>
-  <ng-container *ngIf="isEllipsis">...</ng-container>
-  <a #expandable class="ant-typography-expand">展开</a>
+  <ng-container *ngIf="isEllipsis">{{ellipsisStr}}</ng-container>
+  <a #expandable class="ant-typography-expand" (click)="onExpand()">{{locale?.expand}}</a>
 </ng-container>
 <nz-text-copy *ngIf="nzCopyable" [getText]="getCopyText" (textCopy)="onTextCopy($event)"></nz-text-copy>
 <nz-text-edit

components/typography/nz-typography.component.ts

@@ -30,6 +30,7 @@ import { fromEvent, Subject } from 'rxjs';
 import { auditTime, takeUntil } from 'rxjs/operators';
 
 import { cancelRequestAnimationFrame, isStyleSupport, measure, reqAnimFrame, InputBoolean } from 'ng-zorro-antd/core';
+import { NzI18nService } from 'ng-zorro-antd/i18n';
 
 import { NzTextCopyComponent } from './nz-text-copy.component';
 import { NzTextEditComponent } from './nz-text-edit.component';
@@ -52,8 +53,8 @@ import { NzTextEditComponent } from './nz-text-edit.component';
     '[class.ant-typography-warning]': 'nzType === "warning"',
     '[class.ant-typography-danger]': 'nzType === "danger"',
     '[class.ant-typography-disabled]': 'nzDisabled',
-    '[class.ant-typography-ellipsis]': 'nzEllipsis',
-    '[class.ant-typography-ellipsis-single-line]': 'nzEllipsis && nzEllipsisRows === 1'
+    '[class.ant-typography-ellipsis]': 'nzEllipsis && !expanded',
+    '[class.ant-typography-ellipsis-single-line]': 'nzEllipsis && !expanded && nzEllipsisRows === 1'
   }
 })
 export class NzTypographyComponent implements OnInit, AfterContentInit, OnDestroy {
@@ -69,20 +70,22 @@ export class NzTypographyComponent implements OnInit, AfterContentInit, OnDestro
   @Output() readonly nzCopy = new EventEmitter<string>();
   @Output() readonly nzExpand = new EventEmitter<void>();
 
-  @ViewChild(NzTextCopyComponent) textCopyRef: NzTextCopyComponent;
-  @ViewChild(NzTextEditComponent) textEditRef: NzTextEditComponent;
-  @ViewChild('ellipsisContainer') ellipsisContainer: ElementRef<HTMLSpanElement>;
-  @ViewChild('expandable') expandableBtn: ElementRef<HTMLSpanElement>;
-  @ViewChild('contentTemplate') contentTemplate: TemplateRef<void>;
+  @ViewChild(NzTextCopyComponent, { static: false }) textCopyRef: NzTextCopyComponent;
+  @ViewChild(NzTextEditComponent, { static: false }) textEditRef: NzTextEditComponent;
+  @ViewChild('ellipsisContainer', { static: false }) ellipsisContainer: ElementRef<HTMLSpanElement>;
+  @ViewChild('expandable', { static: false }) expandableBtn: ElementRef<HTMLSpanElement>;
+  @ViewChild('contentTemplate', { static: false }) contentTemplate: TemplateRef<void>;
 
   hasOtherChildren = false;
   editing = false;
   ellipsisText: string | undefined;
   isEllipsis: boolean = false;
-  ellipsisContent: Node[] = [];
+  expanded: boolean = false;
+  ellipsisStr = '...';
+  // tslint:disable-next-line:no-any
+  locale: any = {};
 
   private rfaId: number = -1;
-  private expanded: boolean = false;
   private destroy$ = new Subject();
   readonly getText = () => this.host.nativeElement.innerText;
   readonly getCopyText = () => (typeof this.nzCopyText === 'string' ? this.nzCopyText : this.getText());
@@ -92,10 +95,16 @@ export class NzTypographyComponent implements OnInit, AfterContentInit, OnDestro
     private viewContainerRef: ViewContainerRef,
     private renderer: Renderer2,
     private ngZone: NgZone,
-    private platform: Platform
+    private platform: Platform,
+    private i18n: NzI18nService
   ) {}
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
+      this.locale = this.i18n.getLocaleData('Text');
+      this.cdr.markForCheck();
+    });
+  }
 
   onTextCopy(text: string): void {
     this.nzCopy.emit(text);
@@ -110,6 +119,11 @@ export class NzTypographyComponent implements OnInit, AfterContentInit, OnDestro
     this.nzChange.emit(text);
   }
 
+  onExpand(): void {
+    this.expanded = true;
+    this.nzExpand.emit();
+  }
+
   canUseCSSEllipsis(): boolean {
     if (this.nzEditable || this.nzCopyable || this.nzExpandable) {
       return false;
@@ -139,7 +153,7 @@ export class NzTypographyComponent implements OnInit, AfterContentInit, OnDestro
       this.nzEllipsisRows,
       viewRef.rootNodes,
       this.expandableBtn.nativeElement,
-      '...'
+      this.ellipsisStr
     );
     this.viewContainerRef.remove(this.viewContainerRef.indexOf(viewRef));
     if (this.ellipsisText !== text || this.isEllipsis !== ellipsis || true) {
@@ -157,17 +171,19 @@ export class NzTypographyComponent implements OnInit, AfterContentInit, OnDestro
   }
 
   ngAfterContentInit(): void {
-    this.resizeOnNextFrame();
-
-    if (this.platform.isBrowser && this.nzEllipsis) {
-      this.ngZone.runOutsideAngular(() => {
-        fromEvent(window, 'resize')
-          .pipe(
-            auditTime(16),
-            takeUntil(this.destroy$)
-          )
-          .subscribe(() => this.resizeOnNextFrame());
-      });
+    if (this.platform.isBrowser) {
+      this.resizeOnNextFrame();
+
+      if (this.nzEllipsis) {
+        this.ngZone.runOutsideAngular(() => {
+          fromEvent(window, 'resize')
+            .pipe(
+              auditTime(16),
+              takeUntil(this.destroy$)
+            )
+            .subscribe(() => this.resizeOnNextFrame());
+        });
+      }
     }
   }
 

components/typography/nz-typography.module.ts

@@ -10,6 +10,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { NzTransButtonDirective } from 'ng-zorro-antd/core';
+import { NzI18nModule } from 'ng-zorro-antd/i18n';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzInputModule } from 'ng-zorro-antd/input';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
@@ -19,7 +20,7 @@ import { NzTextEditComponent } from './nz-text-edit.component';
 import { NzTypographyComponent } from './nz-typography.component';
 
 @NgModule({
-  imports: [CommonModule, NzIconModule, NzToolTipModule, NzInputModule],
+  imports: [CommonModule, NzIconModule, NzToolTipModule, NzInputModule, NzI18nModule],
   exports: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent, NzTransButtonDirective],
   declarations: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent, NzTransButtonDirective]
 })