feat(module:typography): support nzOnEllipsis output (#5297)

components/typography/demo/ellipsis.ts

@@ -3,11 +3,11 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-typography-ellipsis',
   template: `
-    <p nz-typography nzEllipsis>
+    <p nz-typography nzEllipsis nzEllipsisRows="3">
       Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background
       applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant
       Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background
-      applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
+      applications, is refined by Ant UED Team. Ant Design
     </p>
     <br />
     <p nz-typography nzEllipsis nzExpandable [nzEllipsisRows]="3">
@@ -21,9 +21,11 @@ import { Component } from '@angular/core';
   `
 })
 export class NzDemoTypographyEllipsisComponent {
-  dynamicContent = `Ant Design, a design language for background applications, is refined by Ant UED Team.
-Ant Design, a design language for background applications, is refined by Ant UED Team.
-Ant Design, a design language for background applications, is refined by Ant UED Team.`;
+  dynamicContent =
+    'Ant Design, a design language for background applications, is refined by Ant UED Team. ' +
+    'Ant Design, a design language for background applications, is refined by Ant UED Team. ' +
+    'Ant Design, a design language for background applications, is refined by Ant UED Team. ' +
+    'Ant Design, a design language for background applications, is refined by Ant UED Team.';
 
   onChange(event: string): void {
     this.dynamicContent = event;

components/typography/demo/interactive.md

@@ -7,8 +7,8 @@ title:
 
 ## zh-CN
 
-提供额外的交互能力。
+提供可编辑和可复制等额外的交互能力。
 
 ## en-US
 
-Provide additional interactive capacity.
+Provide additional interactive capacity of editable and copyable.

components/typography/demo/suffix.ts

@@ -4,14 +4,32 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-typography-suffix',
   template: `
     <nz-slider [(ngModel)]="rows" [nzMax]="10" [nzMin]="1"></nz-slider>
-    <p nz-typography nzEllipsis nzExpandable [attr.title]="content + suffix" [nzEllipsisRows]="rows" [nzSuffix]="suffix">
+    <p
+      nz-typography
+      nzEllipsis
+      nzExpandable
+      [attr.title]="content + suffix"
+      [nzEllipsisRows]="rows"
+      [nzSuffix]="suffix"
+      (nzOnEllipsis)="onEllipsisChange($event)"
+    >
       {{ content }}
     </p>
   `
 })
 export class NzDemoTypographySuffixComponent {
   content =
-    'To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune';
+    'To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of ' +
+    'outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; ' +
+    'No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, ' +
+    "'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! " +
+    'For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. ' +
+    "There 's the respect That makes calamity of so long life";
+
   suffix = '--William Shakespeare';
   rows = 1;
+
+  onEllipsisChange(ellipsis: boolean): void {
+    console.log(ellipsis);
+  }
 }

components/typography/doc/index.en-US.md

@@ -29,4 +29,5 @@ Basic text writing, including headings, body text, lists, and more.
 | `[nzEllipsisRows]` | Line number | `number` | `1` | ✅ |
 | `[nzType]` | Content type | `'secondary'｜'warning'｜'danger'` | - ||
 | `(nzContentChange)` | Trigger when user edit the content | `EventEmitter<string>` | - ||
-| `(nzExpandChange)` | Trigger when user expanded the content | `EventEmitter<void>` | - ||
+| `(nzExpandChange)` | Trigger when user expanded the content | `EventEmitter<void>` | - ||
+| `(nzOnEllipsis)` | Trigger when ellipsis status changed | `EventEmitter<boolean>` | - ||

components/typography/doc/index.zh-CN.md

@@ -22,11 +22,12 @@ cols: 1
 | `[nzCopyable]` | 是否可拷贝，需要配合 `[nzContent]` 使用 | `boolean` | `false` |
 | `[nzEditable]` | 是否可编辑，需要配合 `[nzContent]` 使用 | `boolean` | `false` |
 | `[nzEllipsis]` | 自动溢出省略，动态内容时需要配合 `[nzContent]` 使用 | `boolean` | `false` |
-| `[nzExpandable]` | 自动溢出省略时是否可展开 | `boolean` | `false` |
-| `[nzSuffix]` | 自动溢出省略时的文本后缀 | `string` | - |
-| `[nzCopyText]` | 自定义被拷贝的文本 | `string` | - |
-| `[nzDisabled]` | 禁用文本 | `boolean` | `false` |
+| `[nzExpandable]` | 自动溢出省略时是否可展开 | `boolean` | `false` ||
+| `[nzSuffix]` | 自动溢出省略时的文本后缀 | `string` | - ||
+| `[nzCopyText]` | 自定义被拷贝的文本 | `string` | - ||
+| `[nzDisabled]` | 禁用文本 | `boolean` | `false` ||
 | `[nzEllipsisRows]` | 自动溢出省略时省略行数 | `number` | `1` | ✅ |
-| `[nzType]` | 文本类型 | `'secondary'｜'warning'｜'danger'` | - |
-| `(nzContentChange)` | 当用户提交编辑内容时触发 | `EventEmitter<string>` | - |
-| `(nzExpandChange)` | 展开省略文本时触发 | `EventEmitter<void>` | - |
+| `[nzType]` | 文本类型 | `'secondary'｜'warning'｜'danger'` | - ||
+| `(nzContentChange)` | 当用户提交编辑内容时触发 | `EventEmitter<string>` | - ||
+| `(nzExpandChange)` | 展开省略文本时触发 | `EventEmitter<void>` | - ||
+| `(nzOnEllipsis)` | 当省略状态变化时触发 | `EventEmitter<boolean>` | - ||

components/typography/typography.component.ts

@@ -57,10 +57,15 @@ const EXPAND_ELEMENT_CLASSNAME = 'ant-typography-expand';
       <ng-content *ngIf="!content"></ng-content>
       {{ content }}
     </ng-template>
-
     <ng-container *ngIf="!editing">
-      <ng-container *ngIf="(expanded || (!nzExpandable && nzEllipsisRows === 1) || canCssEllipsis) && !nzSuffix; else jsEllipsis">
+      <ng-container
+        *ngIf="
+          expanded || (!nzExpandable && nzEllipsisRows === 1 && !hasEllipsisObservers) || canCssEllipsis || (nzSuffix && expanded);
+          else jsEllipsis
+        "
+      >
         <ng-template [ngTemplateOutlet]="contentTemplate" [ngTemplateOutletContext]="{ content: nzContent }"></ng-template>
+        <ng-container *ngIf="nzSuffix">{{ nzSuffix }}</ng-container>
       </ng-container>
       <ng-template #jsEllipsis>
         <span #ellipsisContainer></span>
@@ -112,6 +117,8 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy,
   @Output() readonly nzContentChange = new EventEmitter<string>();
   @Output() readonly nzCopy = new EventEmitter<string>();
   @Output() readonly nzExpandChange = new EventEmitter<void>();
+  // This is not a two-way binding output with {@link nzEllipsis}
+  @Output() readonly nzOnEllipsis = new EventEmitter<boolean>();
 
   @ViewChild(NzTextEditComponent, { static: false }) textEditRef?: NzTextEditComponent;
   @ViewChild(NzTextCopyComponent, { static: false }) textCopyRef?: NzTextCopyComponent;
@@ -129,8 +136,12 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy,
   expanded: boolean = false;
   ellipsisStr = '...';
 
+  get hasEllipsisObservers(): boolean {
+    return this.nzOnEllipsis.observers.length > 0;
+  }
+
   get canCssEllipsis(): boolean {
-    return this.nzEllipsis && this.cssEllipsis && !this.expanded;
+    return this.nzEllipsis && this.cssEllipsis && !this.expanded && !this.hasEllipsisObservers;
   }
 
   private viewInit = false;
@@ -175,12 +186,17 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy,
     this.isEllipsis = false;
     this.expanded = true;
     this.nzExpandChange.emit();
+    this.nzOnEllipsis.emit(false);
   }
 
   canUseCSSEllipsis(): boolean {
     if (this.nzEditable || this.nzCopyable || this.nzExpandable || this.nzSuffix) {
       return false;
     }
+    // make sure {@link nzOnEllipsis} works, will force use JS to calculations
+    if (this.hasEllipsisObservers) {
+      return false;
+    }
     if (this.nzEllipsisRows === 1) {
       return isStyleSupport('textOverflow');
     } else {
@@ -233,7 +249,10 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy,
     removeView();
 
     this.ellipsisText = text;
-    this.isEllipsis = ellipsis;
+    if (ellipsis !== this.isEllipsis) {
+      this.isEllipsis = ellipsis;
+      this.nzOnEllipsis.emit(ellipsis);
+    }
     const ellipsisContainerNativeElement = this.ellipsisContainer!.nativeElement;
     while (ellipsisContainerNativeElement.firstChild) {
       this.renderer.removeChild(ellipsisContainerNativeElement, ellipsisContainerNativeElement.firstChild);

components/typography/typography.spec.ts

@@ -192,7 +192,6 @@ describe('typography', () => {
       const dynamicContent = componentElement.querySelector('.dynamic')!;
       expect(singleLine.classList).toContain('ant-typography-ellipsis-single-line');
       expect(multipleLine.classList).toContain('ant-typography-ellipsis-multiple-line');
-      expect(dynamicContent.classList).toContain('ant-typography-ellipsis-multiple-line');
       testComponent.expandable = true;
       fixture.detectChanges();
       expect(singleLine.classList).not.toContain('ant-typography-ellipsis-single-line');
@@ -279,6 +278,7 @@ describe('typography', () => {
       componentElement.querySelectorAll('p').forEach(e => {
         expect(e.innerText.includes('...')).toBe(false);
       });
+      expect(testComponent.onEllipsis).toHaveBeenCalledWith(false);
       viewport.set(400, 1000);
       dispatchFakeEvent(window, 'resize');
       fixture.detectChanges();
@@ -292,6 +292,7 @@ describe('typography', () => {
       componentElement.querySelectorAll('p').forEach(e => {
         expect(e.innerText.includes('...')).toBe(true);
       });
+      expect(testComponent.onEllipsis).toHaveBeenCalledWith(true);
       viewport.reset();
     }));
 
@@ -403,6 +404,7 @@ export class NzTestTypographyEditComponent {
       [nzExpandable]="expandable"
       [nzEllipsisRows]="2"
       (nzExpandChange)="onExpand()"
+      (nzOnEllipsis)="onEllipsis($event)"
       [nzContent]="str"
       [nzSuffix]="suffix"
       class="dynamic"
@@ -420,6 +422,7 @@ export class NzTestTypographyEllipsisComponent {
   expandable = false;
   onExpand = jasmine.createSpy('expand callback');
   suffix: string | null = null;
+  onEllipsis = jasmine.createSpy('ellipsis callback');
   @ViewChild(NzTypographyComponent, { static: false }) nzTypographyComponent!: NzTypographyComponent;
   str = new Array(5).fill('Ant Design, a design language for background applications, is refined by Ant UED Team.').join('');
 }