feat(module:hash-code): add HashCode component (#8111)

.github/CODEOWNERS

@@ -71,6 +71,7 @@ components/qr-code/**                     @OriginRing
 components/cron-expression/**             @OriginRing
 components/water-mark/**                  @OriginRing
 components/color-picker/**                @OriginRing
+components/hash-code/**                   @OriginRing
 
 # The `components/core/*` owners
 components/core/config/**                 @hullis

components/components.less

@@ -66,3 +66,4 @@
 @import './qr-code/style/entry.less';
 @import './water-mark/style/entry.less';
 @import './color-picker/style/entry.less';
+@import './hash-code/style/entry.less';

components/hash-code/demo/basic.md

@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+
+最简单的用法。
+
+## en-US
+
+The simplest usage.

components/hash-code/demo/basic.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-hash-code-basic',
+  template: ` <nz-hash-code [nzValue]="value"></nz-hash-code> `
+})
+export class NzDemoHashCodeBasicComponent {
+  value = 'dfb5fe9ef7b99b2b1db102114a6d7d445d992f40a5d575f801c148990199a068';
+}

components/hash-code/demo/copy.md

@@ -0,0 +1,14 @@
+---
+order: 1
+title:
+  zh-CN: 复制
+  en-US: Copy
+---
+
+## zh-CN
+
+点击复制的 icon
+
+## en-US
+
+Click on the copied icon.

components/hash-code/demo/copy.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-hash-code-copy',
+  template: ` <nz-hash-code [nzValue]="value" (nzOnCopy)="getCopy($event)"></nz-hash-code> `
+})
+export class NzDemoHashCodeCopyComponent {
+  value = 'dfb5fe9ef7b99b2b1db102114a6d7d445d992f40a5d575f801c148990199a068';
+
+  getCopy(value: string): void {
+    console.log(`hashCode:${value}`);
+  }
+}

components/hash-code/demo/logo.md

@@ -0,0 +1,14 @@
+---
+order: 6
+title:
+  zh-CN: 添加 Logo
+  en-US: Logo
+---
+
+## zh-CN
+
+可设置右上角的标志
+
+## en-US
+
+Possibility to set the logo in the upper right corner.

components/hash-code/demo/logo.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-hash-code-logo',
+  template: ` <nz-hash-code [nzValue]="value" nzLogo="Antd"></nz-hash-code> `
+})
+export class NzDemoHashCodeLogoComponent {
+  value = 'dfb5fe9ef7b99b2b1db102114a6d7d445d992f40a5d575f801c148990199a068';
+}

components/hash-code/demo/module

@@ -0,0 +1,3 @@
+import { NzHashCodeModule } from 'ng-zorro-antd/hash-code';
+
+export const moduleList = [NzHashCodeModule];

components/hash-code/demo/primary.md

@@ -0,0 +1,14 @@
+---
+order: 2
+title:
+  zh-CN: 更换样式
+  en-US: Style
+---
+
+## zh-CN
+
+更换样式。
+
+## en-US
+
+Replacement of styles.

components/hash-code/demo/primary.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-hash-code-primary',
+  template: ` <nz-hash-code [nzValue]="value" nzType="primary"></nz-hash-code> `
+})
+export class NzDemoHashCodePrimaryComponent {
+  value = 'dfb5fe9ef7b99b2b1db102114a6d7d445d992f40a5d575f801c148990199a068';
+}

components/hash-code/demo/rect.md

@@ -0,0 +1,14 @@
+---
+order: 5
+title:
+  zh-CN: 矩形模式
+  en-US: Rect
+---
+
+## zh-CN
+
+同单行模式一样，不会展示原有的 `icon` 和顶部描述内容
+
+## en-US
+
+As in one-line mode, the original `icon` and top description will not be displayed.

components/hash-code/demo/rect.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-hash-code-rect',
+  template: `
+    <nz-hash-code [nzValue]="value" nzMode="rect"></nz-hash-code>
+    <br />
+    <nz-hash-code [nzValue]="value" nzMode="rect" nzType="primary"></nz-hash-code>
+  `
+})
+export class NzDemoHashCodeRectComponent {
+  value = 'dfb5fe9ef7b99b2b1db102114a6d7d445d992f40a5d575f801c148990199a068';
+}

components/hash-code/demo/single.md

@@ -0,0 +1,14 @@
+---
+order: 3
+title:
+  zh-CN: 单行模式
+  en-US: Single
+---
+
+## zh-CN
+
+在单行模式下，不会展示原有的 `icon` 和顶部描述内容。
+
+## en-US
+
+In single-line mode, the original `icon` and top description are not displayed.

components/hash-code/demo/single.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-hash-code-single',
+  template: `
+    <nz-hash-code [nzValue]="value" nzMode="single"></nz-hash-code>
+    <br />
+    <nz-hash-code [nzValue]="value" nzMode="single" nzType="primary"></nz-hash-code>
+  `
+})
+export class NzDemoHashCodeSingleComponent {
+  value = 'dfb5fe9ef7b99b2b1db102114a6d7d445d992f40a5d575f801c148990199a068';
+}

components/hash-code/demo/strip.md

@@ -0,0 +1,14 @@
+---
+order: 4
+title:
+  zh-CN: 长条模式
+  en-US: Strip
+---
+
+## zh-CN
+
+仅展示一行数据。
+
+## en-US
+
+Show only one row of data.

components/hash-code/demo/strip.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-hash-code-strip',
+  template: `
+    <nz-hash-code [nzValue]="value" nzMode="strip"></nz-hash-code>
+    <br />
+    <nz-hash-code [nzValue]="value" nzMode="strip" nzType="primary"></nz-hash-code>
+  `
+})
+export class NzDemoHashCodeStripComponent {
+  value = 'dfb5fe9ef7b99b2b1db102114a6d7d445d992f40a5d575f801c148990199a068';
+}

components/hash-code/doc/index.en-US.md

@@ -0,0 +1,35 @@
+---
+category: Components
+type: Featured Components
+title: HashCode
+tag: New
+cover: https://img.alicdn.com/imgextra/i3/O1CN01ePPF8q1cxXFz041Q9_!!6000000003667-0-tps-172-57.jpg
+---
+
+## Import Module
+
+- The hash code component is styled for 64-bit design, and if the data given is less than or more than 64-bit, it may bring some differences in presentation.
+
+### Import Module
+
+module:
+```ts
+import { NzHashCodeModule } from 'ng-zorro-antd/hash-code';
+```
+standalone:
+```ts
+import { NzHashCodeComponent } from 'ng-zorro-antd/hash-code';
+```
+
+## API
+
+### nz-hashCode:standalone
+
+| Property              | Description                                         | Type                            | Default   |
+| -------------- |-----------------------------------------------------|-------------------------------------|------------|
+| `[nzValue]`    | The value of the hash code                          | `string`                            | -          |
+| `[nzTitle]`    | Description of the content in the upper left corner | `string`                            | `HashCode` |
+| `[nzLogo]` | Display in the upper right corner                   | `TemplateRef<void> \| string`       | -          |
+| `[nzMode]`     | Demonstration Mode               | `single \| double \| strip \| rect` | `double`   |
+| `[nzType]`  | style             | `defalut \| primary`                | `primary`  |
+| `(nzOnCopy)`  | Clicking the Copy callback            | `EventEmitter<string>`              | -          |

components/hash-code/doc/index.zh-CN.md

@@ -0,0 +1,36 @@
+---
+category: Components
+subtitle: 哈希码
+type: 特色组件
+title: HashCode
+tag: New
+cover: https://img.alicdn.com/imgextra/i3/O1CN01ePPF8q1cxXFz041Q9_!!6000000003667-0-tps-172-57.jpg
+---
+
+## 何时使用
+
+- 哈希码组件是以 64 位设计的样式，如果给出的数据不足或者高于 64 位，可能会带来一些展示上的差异。
+
+### 引入模块
+
+module:
+```ts
+import { NzHashCodeModule } from 'ng-zorro-antd/hash-code';
+```
+standalone:
+```ts
+import { NzHashCodeComponent } from 'ng-zorro-antd/hash-code';
+```
+
+## API
+
+### nz-hashCode:standalone
+
+| 参数           | 说明        | 类型                                  | 默认值        |
+| -------------- |-----------|-------------------------------------|------------|
+| `[nzValue]`    | 哈希码的值     | `string`                            | -          |
+| `[nzTitle]`    | 左上角的描述内容  | `string`                            | `HashCode` |
+| `[nzLogo]` | 右上角的展示    | `TemplateRef<void> \| string`       | -          |
+| `[nzMode]`     | 展示模式      | `single \| double \| strip \| rect` | `double`   |
+| `[nzType]`  | 样式        | `defalut \| primary`                | `primary`  |
+| `(nzOnCopy)`  | 点击"复制"的回调 | `EventEmitter<string>`              | -          |