Skip to content

Commit d7e387f

Browse files
ParsaArvanehPAParsaArvanehPA
authored
feat(module:typography): support standalone component (#8204)
1 parent dbb6fcb commit d7e387f

6 files changed

Lines changed: 63 additions & 69 deletions

File tree

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

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -19,24 +19,24 @@ import { NzTypographyModule } from 'ng-zorro-antd/typography';
1919

2020
## API
2121

22-
### [nz-typography]
22+
### [nz-typography]:standalone
2323

24-
| Property | Description | Type | Default | Global Config |
25-
| -------- | ----------- | ---- | ------- | ------------- |
26-
| `[nzContent]` | Component content | `string` | - ||
27-
| `[nzCopyable]` | Can copy, require use `[nzContent]` | `boolean` | `false` ||
28-
| `[nzEditable]` | Editable, require use `[nzContent]` | `boolean` | `false` ||
29-
| `[nzCopyIcons]` | Custom copy icons | `[string \| TemplateRef<void>, string \| TemplateRef<void>]` | `['copy', 'check']` | ✅ |
30-
| `[nzCopyTooltips]` | Custom tooltips text, hide when it is `null` | `null \| [string \| TemplateRef<void>, string \| TemplateRef<void>]` | - | ✅ |
31-
| `[nzEditIcon]` | Custom edit icon | `string \| TemplateRef<void>` | `'edit'` | ✅ |
32-
| `[nzEditTooltip]` | Custom tooltip text, hide when it is `null` | `null \| string \| TemplateRef<void>` | - | ✅ |
33-
| `[nzEllipsis]` | Display ellipsis when overflow, require use `[nzContent]` when dynamic content | `boolean` | `false` ||
34-
| `[nzSuffix]` | The text suffix when used `nzEllipsis` | `string` | - ||
35-
| `[nzCopyText]` | Customize the copy text | `string` | - ||
36-
| `[nzDisabled]` | Disable content | `boolean` | `false` ||
37-
| `[nzExpandable]` | Expandable when ellipsis | `boolean` | `false` ||
38-
| `[nzEllipsisRows]` | Line number | `number` | `1` | ✅ |
39-
| `[nzType]` | Content type | `'secondary' \| 'warning' \| 'danger' \| 'success'` | - ||
40-
| `(nzContentChange)` | Trigger when user edit the content | `EventEmitter<string>` | - ||
41-
| `(nzExpandChange)` | Trigger when user expanded the content | `EventEmitter<void>` | - ||
42-
| `(nzOnEllipsis)` | Trigger when ellipsis status changed | `EventEmitter<boolean>` | - ||
24+
| Property | Description | Type | Default | Global Config |
25+
| ------------------- | ------------------------------------------------------------------------------ | -------------------------------------------------------------------- | ------------------- | ------------- |
26+
| `[nzContent]` | Component content | `string` | - | |
27+
| `[nzCopyable]` | Can copy, require use `[nzContent]` | `boolean` | `false` | |
28+
| `[nzEditable]` | Editable, require use `[nzContent]` | `boolean` | `false` | |
29+
| `[nzCopyIcons]` | Custom copy icons | `[string \| TemplateRef<void>, string \| TemplateRef<void>]` | `['copy', 'check']` | ✅ |
30+
| `[nzCopyTooltips]` | Custom tooltips text, hide when it is `null` | `null \| [string \| TemplateRef<void>, string \| TemplateRef<void>]` | - | ✅ |
31+
| `[nzEditIcon]` | Custom edit icon | `string \| TemplateRef<void>` | `'edit'` | ✅ |
32+
| `[nzEditTooltip]` | Custom tooltip text, hide when it is `null` | `null \| string \| TemplateRef<void>` | - | ✅ |
33+
| `[nzEllipsis]` | Display ellipsis when overflow, require use `[nzContent]` when dynamic content | `boolean` | `false` | |
34+
| `[nzSuffix]` | The text suffix when used `nzEllipsis` | `string` | - | |
35+
| `[nzCopyText]` | Customize the copy text | `string` | - | |
36+
| `[nzDisabled]` | Disable content | `boolean` | `false` | |
37+
| `[nzExpandable]` | Expandable when ellipsis | `boolean` | `false` | |
38+
| `[nzEllipsisRows]` | Line number | `number` | `1` | ✅ |
39+
| `[nzType]` | Content type | `'secondary' \| 'warning' \| 'danger' \| 'success'` | - | |
40+
| `(nzContentChange)` | Trigger when user edit the content | `EventEmitter<string>` | - | |
41+
| `(nzExpandChange)` | Trigger when user expanded the content | `EventEmitter<void>` | - | |
42+
| `(nzOnEllipsis)` | Trigger when ellipsis status changed | `EventEmitter<boolean>` | - | |

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

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ title: Typography
66
cols: 1
77
cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
88
---
9+
910
文本的基本格式。
1011

1112
## 何时使用
@@ -19,24 +20,24 @@ import { NzTypographyModule } from 'ng-zorro-antd/typography';
1920

2021
## API
2122

22-
### [nz-typography]
23+
### [nz-typography]:standalone
2324

24-
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
25-
| --- | --- | --- | --- | --- |
26-
| `[nzContent]` | 组件内容 | `string` | - |
27-
| `[nzCopyable]` | 是否可拷贝，需要配合 `[nzContent]` 使用 | `boolean` | `false` |
28-
| `[nzEditable]` | 是否可编辑，需要配合 `[nzContent]` 使用 | `boolean` | `false` |
29-
| `[nzCopyIcons]` | 自定义拷贝图标 | `[string \| TemplateRef<void>, string \| TemplateRef<void>]` | `['copy', 'check']` | ✅ |
30-
| `[nzCopyTooltips]` | 自定义提示文案，为 `null` 时隐藏文案 | `null \| [string \| TemplateRef<void>, string \| TemplateRef<void>]` | - | ✅ |
31-
| `[nzEditIcon]` | 自定义编辑图标 | `string \| TemplateRef<void>` | `'edit'` | ✅ |
32-
| `[nzEditTooltip]` | 自定义提示文案，为 `null` 时隐藏文案 | `null \| string \| TemplateRef<void>` | - | ✅ |
33-
| `[nzEllipsis]` | 自动溢出省略，动态内容时需要配合 `[nzContent]` 使用 | `boolean` | `false` |
34-
| `[nzExpandable]` | 自动溢出省略时是否可展开 | `boolean` | `false` ||
35-
| `[nzSuffix]` | 自动溢出省略时的文本后缀 | `string` | - ||
36-
| `[nzCopyText]` | 自定义被拷贝的文本 | `string` | - ||
37-
| `[nzDisabled]` | 禁用文本 | `boolean` | `false` ||
38-
| `[nzEllipsisRows]` | 自动溢出省略时省略行数 | `number` | `1` | ✅ |
39-
| `[nzType]` | 文本类型 | `'secondary' \| 'warning' \| 'danger' \| 'success'` | - ||
40-
| `(nzContentChange)` | 当用户提交编辑内容时触发 | `EventEmitter<string>` | - ||
41-
| `(nzExpandChange)` | 展开省略文本时触发 | `EventEmitter<void>` | - ||
42-
| `(nzOnEllipsis)` | 当省略状态变化时触发 | `EventEmitter<boolean>` | - ||
25+
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
26+
| ------------------- | --------------------------------------------------- | -------------------------------------------------------------------- | ------------------- | -------- |
27+
| `[nzContent]` | 组件内容 | `string` | - |
28+
| `[nzCopyable]` | 是否可拷贝，需要配合 `[nzContent]` 使用 | `boolean` | `false` |
29+
| `[nzEditable]` | 是否可编辑，需要配合 `[nzContent]` 使用 | `boolean` | `false` |
30+
| `[nzCopyIcons]` | 自定义拷贝图标 | `[string \| TemplateRef<void>, string \| TemplateRef<void>]` | `['copy', 'check']` | ✅ |
31+
| `[nzCopyTooltips]` | 自定义提示文案，为 `null` 时隐藏文案 | `null \| [string \| TemplateRef<void>, string \| TemplateRef<void>]` | - | ✅ |
32+
| `[nzEditIcon]` | 自定义编辑图标 | `string \| TemplateRef<void>` | `'edit'` | ✅ |
33+
| `[nzEditTooltip]` | 自定义提示文案，为 `null` 时隐藏文案 | `null \| string \| TemplateRef<void>` | - | ✅ |
34+
| `[nzEllipsis]` | 自动溢出省略，动态内容时需要配合 `[nzContent]` 使用 | `boolean` | `false` |
35+
| `[nzExpandable]` | 自动溢出省略时是否可展开 | `boolean` | `false` | |
36+
| `[nzSuffix]` | 自动溢出省略时的文本后缀 | `string` | - | |
37+
| `[nzCopyText]` | 自定义被拷贝的文本 | `string` | - | |
38+
| `[nzDisabled]` | 禁用文本 | `boolean` | `false` | |
39+
| `[nzEllipsisRows]` | 自动溢出省略时省略行数 | `number` | `1` | ✅ |
40+
| `[nzType]` | 文本类型 | `'secondary' \| 'warning' \| 'danger' \| 'success'` | - | |
41+
| `(nzContentChange)` | 当用户提交编辑内容时触发 | `EventEmitter<string>` | - | |
42+
| `(nzExpandChange)` | 展开省略文本时触发 | `EventEmitter<void>` | - | |
43+
| `(nzOnEllipsis)` | 当省略状态变化时触发 | `EventEmitter<boolean>` | - | |

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,12 @@ import {
2121
import { Subject } from 'rxjs';
2222
import { takeUntil } from 'rxjs/operators';
2323

24+
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
25+
import { NzTransButtonModule } from 'ng-zorro-antd/core/trans-button';
2426
import { NzTSType } from 'ng-zorro-antd/core/types';
2527
import { NzI18nService, NzTextI18nInterface } from 'ng-zorro-antd/i18n';
28+
import { NzIconModule } from 'ng-zorro-antd/icon';
29+
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
2630

2731
@Component({
2832
selector: 'nz-text-copy',
@@ -44,7 +48,9 @@ import { NzI18nService, NzTextI18nInterface } from 'ng-zorro-antd/i18n';
4448
`,
4549
changeDetection: ChangeDetectionStrategy.OnPush,
4650
encapsulation: ViewEncapsulation.None,
47-
preserveWhitespaces: false
51+
preserveWhitespaces: false,
52+
imports: [NzToolTipModule, NzTransButtonModule, NzIconModule, NzOutletModule],
53+
standalone: true
4854
})
4955
export class NzTextCopyComponent implements OnInit, OnDestroy, OnChanges {
5056
copied = false;

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
*/
55

66
import { ENTER, ESCAPE } from '@angular/cdk/keycodes';
7+
import { NgIf } from '@angular/common';
78
import {
89
ChangeDetectionStrategy,
910
ChangeDetectorRef,
@@ -20,10 +21,14 @@ import {
2021
import { BehaviorSubject, EMPTY, from, fromEvent, Observable } from 'rxjs';
2122
import { switchMap, take, takeUntil, withLatestFrom } from 'rxjs/operators';
2223

24+
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
2325
import { NzDestroyService } from 'ng-zorro-antd/core/services';
26+
import { NzTransButtonModule } from 'ng-zorro-antd/core/trans-button';
2427
import { NzTSType } from 'ng-zorro-antd/core/types';
2528
import { NzI18nService, NzTextI18nInterface } from 'ng-zorro-antd/i18n';
26-
import { NzAutosizeDirective } from 'ng-zorro-antd/input';
29+
import { NzIconModule } from 'ng-zorro-antd/icon';
30+
import { NzAutosizeDirective, NzInputModule } from 'ng-zorro-antd/input';
31+
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
2732

2833
@Component({
2934
selector: 'nz-text-edit',
@@ -53,7 +58,9 @@ import { NzAutosizeDirective } from 'ng-zorro-antd/input';
5358
changeDetection: ChangeDetectionStrategy.OnPush,
5459
encapsulation: ViewEncapsulation.None,
5560
preserveWhitespaces: false,
56-
providers: [NzDestroyService]
61+
providers: [NzDestroyService],
62+
imports: [NgIf, NzInputModule, NzTransButtonModule, NzIconModule, NzToolTipModule, NzOutletModule],
63+
standalone: true
5764
})
5865
export class NzTextEditComponent implements OnInit {
5966
editing = false;

‎components/typography/typography.component.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
import { Direction, Directionality } from '@angular/cdk/bidi';
77
import { Platform } from '@angular/cdk/platform';
8-
import { DOCUMENT } from '@angular/common';
8+
import { DOCUMENT, NgIf, NgTemplateOutlet } from '@angular/common';
99
import {
1010
AfterViewInit,
1111
ChangeDetectionStrategy,
@@ -118,7 +118,9 @@ const EXPAND_ELEMENT_CLASSNAME = 'ant-typography-expand';
118118
'[class.ant-typography-ellipsis-single-line]': 'canCssEllipsis && nzEllipsisRows === 1',
119119
'[class.ant-typography-ellipsis-multiple-line]': 'canCssEllipsis && nzEllipsisRows > 1',
120120
'[style.-webkit-line-clamp]': '(canCssEllipsis && nzEllipsisRows > 1) ? nzEllipsisRows : null'
121-
}
121+
},
122+
imports: [NgIf, NgTemplateOutlet, NzTextEditComponent, NzTextCopyComponent],
123+
standalone: true
122124
})
123125
export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {
124126
readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;

‎components/typography/typography.module.ts‎

Lines changed: 2 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,36 +3,14 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6-
import { BidiModule } from '@angular/cdk/bidi';
7-
import { ClipboardModule } from '@angular/cdk/clipboard';
8-
import { PlatformModule } from '@angular/cdk/platform';
9-
import { CommonModule } from '@angular/common';
106
import { NgModule } from '@angular/core';
117

12-
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
13-
import { NzTransButtonModule } from 'ng-zorro-antd/core/trans-button';
14-
import { NzI18nModule } from 'ng-zorro-antd/i18n';
15-
import { NzIconModule } from 'ng-zorro-antd/icon';
16-
import { NzInputModule } from 'ng-zorro-antd/input';
17-
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
18-
198
import { NzTextCopyComponent } from './text-copy.component';
209
import { NzTextEditComponent } from './text-edit.component';
2110
import { NzTypographyComponent } from './typography.component';
2211

2312
@NgModule({
24-
imports: [
25-
BidiModule,
26-
CommonModule,
27-
NzIconModule,
28-
NzToolTipModule,
29-
NzInputModule,
30-
NzI18nModule,
31-
NzTransButtonModule,
32-
ClipboardModule,
33-
NzOutletModule
34-
],
35-
exports: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent, PlatformModule],
36-
declarations: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent]
13+
imports: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent],
14+
exports: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent]
3715
})
3816
export class NzTypographyModule {}

0 commit comments

Comments
 (0)