fix(module:tag): missing styles on view engine

fix #6732
NG-ZORRO · Jun 7, 2021 · 5606e0d · 5606e0d
1 parent 7199ad5
commit 5606e0d
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 23 deletions.
diff --git a/components/core/color/color.ts b/components/core/color/color.ts
@@ -5,6 +5,8 @@
 
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
+export const statusColors = ['success', 'processing', 'error', 'default', 'warning'] as const;
+
 export const presetColors = [
   'pink',
   'red',
@@ -22,15 +24,12 @@ export const presetColors = [
 ] as const;
 
 export type NzPresetColor = typeof presetColors[number];
+export type NzStatusColor = typeof statusColors[number];
 
 export function isPresetColor(color: string): color is NzPresetColor {
   return presetColors.indexOf(color as NzSafeAny) !== -1;
 }
 
-// export const presetStatusColors = ['success', 'processing', 'error', 'default', 'warning'];
-
-// export type NzPresetStatusColor = typeof presetStatusColors[number];
-
-// export function isPresetStatusColor(color: string): color is NzPresetStatusColor {
-//   return presetStatusColors.indexOf(color as NzSafeAny) !== -1;
-// }
+export function isStatusColor(color: string): color is NzPresetColor {
+  return statusColors.indexOf(color as NzSafeAny) !== -1;
+}
diff --git a/components/tag/tag.component.ts b/components/tag/tag.component.ts
@@ -20,7 +20,7 @@ import {
   SimpleChanges,
   ViewEncapsulation
 } from '@angular/core';
-import { isPresetColor, NzPresetColor } from 'ng-zorro-antd/core/color';
+import { isPresetColor, isStatusColor, NzPresetColor, NzStatusColor, presetColors, statusColors } from 'ng-zorro-antd/core/color';
 import { BooleanInput } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 import { Subject } from 'rxjs';
@@ -38,7 +38,6 @@ import { takeUntil } from 'rxjs/operators';
   encapsulation: ViewEncapsulation.None,
   host: {
     '[style.background-color]': `isPresetColor ? '' : nzColor`,
-    '[class]': `isPresetColor ? ('ant-tag-' + nzColor) : ''`,
     '[class.ant-tag-has-color]': `nzColor && !isPresetColor`,
     '[class.ant-tag-checkable]': `nzMode === 'checkable'`,
     '[class.ant-tag-checkable-checked]': `nzChecked`,
@@ -50,13 +49,23 @@ export class NzTagComponent implements OnChanges, OnDestroy, OnInit {
   static ngAcceptInputType_nzChecked: BooleanInput;
   isPresetColor = false;
   @Input() nzMode: 'default' | 'closeable' | 'checkable' = 'default';
-  @Input() nzColor?: string | NzPresetColor;
+  @Input() nzColor?: string | NzStatusColor | NzPresetColor;
   @Input() @InputBoolean() nzChecked = false;
   @Output() readonly nzOnClose = new EventEmitter<MouseEvent>();
   @Output() readonly nzCheckedChange = new EventEmitter<boolean>();
   dir: Direction = 'ltr';
   private destroy$ = new Subject<void>();
 
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private renderer: Renderer2,
+    private elementRef: ElementRef,
+    @Optional() private directionality: Directionality
+  ) {
+    // TODO: move to host after View Engine deprecation
+    this.elementRef.nativeElement.classList.add('ant-tag');
+  }
+
   updateCheckedStatus(): void {
     if (this.nzMode === 'checkable') {
       this.nzChecked = !this.nzChecked;
@@ -71,14 +80,45 @@ export class NzTagComponent implements OnChanges, OnDestroy, OnInit {
     }
   }
 
-  constructor(
-    private cdr: ChangeDetectorRef,
-    private renderer: Renderer2,
-    private elementRef: ElementRef,
-    @Optional() private directionality: Directionality
-  ) {
-    // TODO: move to host after View Engine deprecation
-    this.elementRef.nativeElement.classList.add('ant-tag');
+  /**
+   * @deprecated
+   * move to host after View Engine deprecation
+   * host: {
+   *   '[class]': `isPresetColor ? ('ant-tag-' + nzColor) : ''`
+   * }
+   */
+  private clearPresetColor(): void {
+    const hostElement = this.elementRef.nativeElement as HTMLElement;
+    // /(ant-tag-(?:pink|red|...))/g
+    const regexp = new RegExp(`(ant-tag-(?:${[...presetColors, ...statusColors].join('|')}))`, 'g');
+    const classname = hostElement.classList.toString();
+    const matches: string[] = [];
+    let match: RegExpExecArray | null = regexp.exec(classname);
+    while (match !== null) {
+      matches.push(match[1]);
+      match = regexp.exec(classname);
+    }
+    hostElement.classList.remove(...matches);
+  }
+
+  /**
+   * @deprecated
+   * move to host after View Engine deprecation
+   * host: {
+   *   '[class]': `isPresetColor ? ('ant-tag-' + nzColor) : ''`
+   * }
+   */
+  private setPresetColor(): void {
+    const hostElement = this.elementRef.nativeElement as HTMLElement;
+    this.clearPresetColor();
+    if (!this.nzColor) {
+      this.isPresetColor = false;
+    } else {
+      this.isPresetColor = isPresetColor(this.nzColor) || isStatusColor(this.nzColor);
+    }
+    if (this.isPresetColor) {
+      hostElement.classList.add(`ant-tag-${this.nzColor}`);
+    }
   }
 
   ngOnInit(): void {
@@ -93,11 +133,7 @@ export class NzTagComponent implements OnChanges, OnDestroy, OnInit {
   ngOnChanges(changes: SimpleChanges): void {
     const { nzColor } = changes;
     if (nzColor) {
-      if (!this.nzColor) {
-        this.isPresetColor = false;
-      } else {
-        this.isPresetColor = isPresetColor(this.nzColor) || /^(success|processing|error|default|warning)$/.test(this.nzColor);
-      }
+      this.setPresetColor();
     }
   }