feat(module:pipes): make the css-unit pipe support more units (#8260)

NG-ZORRO · Dec 7, 2023 · 5e611e7 · 5e611e7
1 parent 1f3010f
commit 5e611e7
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 14 deletions.
diff --git a/components/pipes/demo/css-unit.md b/components/pipes/demo/css-unit.md
@@ -9,7 +9,7 @@ title:
 
 Css 单位
 
-警告：在 `v17.0.0` 中被弃用，请使用 Angular 内置语法替代，例如：
+提示：如果条件允许，我们更推荐使用 Angular 内置语法，例如：
 
 ```html
 <div [style.border-radius.px]="1">px</div>
@@ -21,7 +21,7 @@ Css 单位
 
 Css unit
 
-WARNING: Deprecated in `v17.0.0`, please use angular's built-in syntax instead, eg:
+Tip: If possible, we prefer to use Angular's built-in syntax, for example:
 
 ```html
 <div [style.border-radius.px]="1">px</div>

diff --git a/components/pipes/nz-css-unit.pipe.ts b/components/pipes/nz-css-unit.pipe.ts
@@ -5,23 +5,12 @@
 
 import { Pipe, PipeTransform } from '@angular/core';
 
-/**
- * @deprecated v17.0.0 - Use angular's built-in syntax instead
- */
 @Pipe({
   name: 'nzToCssUnit',
   standalone: true
 })
 export class NzToCssUnitPipe implements PipeTransform {
   transform(value: number | string, defaultUnit: string = 'px'): string {
-    const absoluteLengthUnit = ['cm', 'mm', 'Q', 'in', 'pc', 'pt', 'px'];
-    const relativeLengthUnit = ['em', 'ex', 'ch', 'rem', '1h', 'vw', 'vh', 'vmin', 'vmax'];
-    const percentagesUnit = ['%'];
-    const listOfUnit = [...absoluteLengthUnit, ...relativeLengthUnit, ...percentagesUnit];
-    let unit = 'px';
-    if (listOfUnit.some(u => u === defaultUnit)) {
-      unit = defaultUnit;
-    }
-    return typeof value === 'number' ? `${value}${unit}` : `${value}`;
+    return typeof value === 'number' ? `${value}${defaultUnit}` : value;
   }
 }