fix(module:water-mark): nzWaterMark is a block element && standalone (#…

…8197) fix: #8187
NG-ZORRO · Dec 2, 2023 · e4d6082 · e4d6082
1 parent 165f171
commit e4d6082
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 6 deletions.
diff --git a/components/water-mark/doc/index.en-US.md b/components/water-mark/doc/index.en-US.md
@@ -14,13 +14,18 @@ Add specific text or patterns to the page.
 - Use when the page needs to be watermarked to identify the copyright.
 - Suitable for preventing information theft.
 
+module:
 ```ts
 import { NzWaterMarkModule } from 'ng-zorro-antd/water-mark';
 ```
+standalone:
+```ts
+import { NzWaterMarkComponent } from 'ng-zorro-antd/water-mark';
+```
 
 ## API
 
-### nz-water-mark
+### nz-water-mark:standalone
 
 | Property    | Description                                                                                       | Type                 | Default                  |
 | ----------- | ------------------------------------------------------------------------------------------------- | -------------------- | ------------------------ |

diff --git a/components/water-mark/doc/index.zh-CN.md b/components/water-mark/doc/index.zh-CN.md
@@ -15,13 +15,18 @@ cover: https://img.alicdn.com/imgextra/i3/O1CN0194FGAd1FlrwQShfR8_!!600000000052
 - 页面需要添加水印标识版权时使用。
 - 适用于防止信息盗用。
 
+module:
 ```ts
 import { NzWaterMarkModule } from 'ng-zorro-antd/water-mark';
 ```
+standalone:
+```ts
+import { NzWaterMarkComponent } from 'ng-zorro-antd/water-mark';
+```
 
 ## API
 
-### nz-water-mark
+### nz-water-mark:standalone
 
 | 参数        | 说明                                                        | 类型                 | 默认值                   |
 | ----------- | ----------------------------------------------------------- | -------------------- | ------------------------ |

diff --git a/components/water-mark/style/index.less b/components/water-mark/style/index.less
@@ -4,5 +4,6 @@
 @water-mark-prefix-cls: ~'@{ant-prefix}-water-mark';
 
 .@{water-mark-prefix-cls} {
+  display: block;
   position: relative;
 }
diff --git a/components/water-mark/typings.ts b/components/water-mark/typings.ts
@@ -21,6 +21,7 @@ export interface MarkStyleType {
   pointerEvents: string;
   backgroundRepeat: string;
   backgroundPosition?: string;
+  visibility: string;
 }
 
 export interface MarkStyleCanvasType extends MarkStyleType {

diff --git a/components/water-mark/water-mark.component.ts b/components/water-mark/water-mark.component.ts
@@ -30,6 +30,7 @@ const FontGap = 3;
 
 @Component({
   selector: 'nz-water-mark',
+  standalone: true,
   exportAs: 'NzWaterMark',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: ` <ng-content></ng-content> `,
@@ -120,7 +121,8 @@ export class NzWaterMarkComponent implements AfterViewInit, OnInit, OnChanges, O
       width: '100%',
       height: '100%',
       pointerEvents: 'none',
-      backgroundRepeat: 'repeat'
+      backgroundRepeat: 'repeat',
+      visibility: 'visible'
     };
 
     /** Calculate the style of the nzOffset */

diff --git a/components/water-mark/water-mark.module.ts b/components/water-mark/water-mark.module.ts
@@ -3,14 +3,12 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { NzWaterMarkComponent } from './water-mark.component';
 
 @NgModule({
   exports: [NzWaterMarkComponent],
-  declarations: [NzWaterMarkComponent],
-  imports: [CommonModule]
+  imports: [NzWaterMarkComponent]
 })
 export class NzWaterMarkModule {}