chore: update type

packages/abc/cell/cell.component.ts

@@ -10,9 +10,10 @@ import {
   OnDestroy,
   Output,
   Renderer2,
+  SimpleChange,
   ViewEncapsulation
 } from '@angular/core';
-import { SafeHtml } from '@angular/platform-browser';
+import type { SafeValue } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 
@@ -23,7 +24,7 @@ import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { NzImage, NzImageService } from 'ng-zorro-antd/image';
 
 import { CellService } from './cell.service';
-import type { CellOptions, CellTextResult, CellWidgetData } from './cell.types';
+import type { CellOptions, CellTextResult, CellValue, CellWidgetData } from './cell.types';
 
 @Component({
   selector: 'cell, [cell]',
@@ -36,16 +37,18 @@ import type { CellOptions, CellTextResult, CellWidgetData } from './cell.types';
           [nzDisabled]="disabled"
           [ngModel]="value"
           (ngModelChange)="change($event)"
-          >{{ safeOpt.checkbox?.label }}</label
         >
+          {{ safeOpt.checkbox?.label }}
+        </label>
         <label
           *ngSwitchCase="'radio'"
           nz-radio
           [nzDisabled]="disabled"
           [ngModel]="value"
           (ngModelChange)="change($event)"
-          >{{ safeOpt.radio?.label }}</label
         >
+          {{ safeOpt.radio?.label }}
+        </label>
         <a
           *ngSwitchCase="'link'"
           (click)="_link($event)"
@@ -98,12 +101,12 @@ export class CellComponent implements OnChanges, OnDestroy {
 
   private destroy$?: Subscription;
 
-  _text!: string | SafeHtml;
+  _text!: string | SafeValue | string[] | number;
   _unit?: string;
   res?: CellTextResult;
   showDefault = false;
 
-  @Input() value?: unknown;
+  @Input() value?: CellValue;
   @Output() readonly valueChange = new EventEmitter<NzSafeAny>();
   @Input() default = '-';
   @Input() defaultCondition?: unknown = null;
@@ -113,7 +116,7 @@ export class CellComponent implements OnChanges, OnDestroy {
   @Input() @InputBoolean() loading = false;
   @Input() @InputBoolean() disabled = false;
   @Input() type?: 'primary' | 'success' | 'danger' | 'warning';
-  @Input() size?: 'large' | 'small';
+  @Input() size?: 'large' | 'small' | null;
 
   /**
    * 货币快捷项
@@ -184,8 +187,13 @@ export class CellComponent implements OnChanges, OnDestroy {
     el.nativeElement.dataset.type = this.safeOpt.type;
   }
 
-  ngOnChanges(): void {
-    this.updateValue();
+  ngOnChanges(changes: { [p in keyof CellComponent]?: SimpleChange }): void {
+    // Do not call updateValue when only updating loading, disabled, size
+    if (Object.keys(changes).every(k => ['loading', 'disabled', 'size'].includes(k))) {
+      this.setClass();
+    } else {
+      this.updateValue();
+    }
   }
 
   change(value: NzSafeAny): void {
@@ -221,7 +229,7 @@ export class CellComponent implements OnChanges, OnDestroy {
     });
     this.imgSrv
       .preview(
-        list.map(p => ({ src: p } as NzImage)),
+        list.map(p => ({ src: p }) as NzImage),
         config.previewOptions
       )
       .switchTo(idx);

packages/abc/cell/cell.service.ts

@@ -7,6 +7,7 @@ import { AlainCellConfig, AlainConfigService } from '@delon/util/config';
 import { formatDate } from '@delon/util/date-time';
 import { CurrencyService, formatMask } from '@delon/util/format';
 import { deepMerge } from '@delon/util/other';
+import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { NzI18nService } from 'ng-zorro-antd/i18n';
 
 import type {
@@ -115,8 +116,15 @@ export class CellService {
     const type = this.genType(value, { ...options });
     const opt = this.fixOptions(options);
     opt.type = type;
+    const isSafeHtml =
+      typeof value === 'object' &&
+      typeof (value as NzSafeAny)?.getTypeName === 'function' &&
+      (value as NzSafeAny)?.getTypeName() != null;
     let res: CellTextResult = {
-      result: typeof value === 'object' ? (value as CellTextUnit) : { text: value == null ? '' : `${value}` },
+      result:
+        typeof value === 'object' && !isSafeHtml
+          ? (value as CellTextUnit)
+          : { text: value == null ? '' : isSafeHtml ? value : `${value}` },
       options: opt
     };
 
@@ -138,6 +146,9 @@ export class CellService {
           case 'html':
             res.safeHtml = opt.html?.safe;
             break;
+          case 'string':
+            if (isSafeHtml) res.safeHtml = 'safeHtml';
+            break;
         }
         if (opt.mask != null) {
           res.result.text = formatMask(res.result.text as string, opt.mask);

packages/abc/cell/cell.spec.ts

@@ -1,6 +1,6 @@
 import { Component, DebugElement, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
+import { BrowserModule, By, DomSanitizer } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
@@ -26,7 +26,7 @@ describe('abc: cell', () => {
 
   const moduleAction = (): void => {
     TestBed.configureTestingModule({
-      imports: [CellModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
+      imports: [CellModule, NoopAnimationsModule, BrowserModule, RouterTestingModule.withRoutes([])],
       declarations: [TestComponent, TestWidget]
     });
   };
@@ -129,6 +129,10 @@ describe('abc: cell', () => {
             .update(`<strong>2</strong>`, { html: { safe: 'text' } })
             .check(`<strong>2</strong>`);
         });
+        it('with SafeHtml', () => {
+          const safeHtml = TestBed.inject(DomSanitizer).bypassSecurityTrustHtml('<a>a</a>');
+          page.update(safeHtml).check('a');
+        });
         describe('with link', () => {
           it('navgation router', () => {
             const router = TestBed.inject(Router);

packages/abc/cell/cell.types.ts

@@ -1,5 +1,5 @@
 import type { Type } from '@angular/core';
-import type { SafeHtml } from '@angular/platform-browser';
+import type { SafeValue } from '@angular/platform-browser';
 import type { Observable } from 'rxjs';
 
 import type {
@@ -10,20 +10,22 @@ import type {
 } from '@delon/util/format';
 import type { NzImagePreviewOptions } from 'ng-zorro-antd/image';
 
+export type CellBaseValue = string | number | boolean | Date | null | undefined | SafeValue;
+
 export interface CellTextUnit {
-  text?: string | SafeHtml | string[] | number;
+  text?: string | SafeValue | string[] | number;
   color?: string;
   unit?: string;
 }
 
-export type CellTextType = string | CellTextUnit | undefined | null;
-
 export interface CellTextResult {
   result: CellTextUnit;
   safeHtml?: 'text' | 'html' | 'safeHtml';
   options: CellOptions;
 }
 
+export type CellValue = CellBaseValue | CellBaseValue[] | CellTextUnit | CellFuValue;
+
 export type CellFuValue = (value: unknown, options: CellOptions) => Observable<CellTextUnit>;
 
 export type CellWidgetFn = (value: unknown, options: CellOptions) => CellTextUnit;

packages/abc/cell/demo/shortcut.md

@@ -23,5 +23,5 @@ import { Component } from '@angular/core';
     </div>
   `
 })
-export class DemoComponent { }
+export class DemoComponent {}
 ```

packages/abc/cell/demo/simple.md

@@ -14,8 +14,9 @@ order: 0
 Simplest of usage.
 
 ```ts
-import { Component, OnInit } from '@angular/core';
-import { delay, finalize, of } from 'rxjs';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { delay, finalize, of, take } from 'rxjs';
 
 import { subDays } from 'date-fns';
 
@@ -65,6 +66,11 @@ import { CellBadge, CellFuValue, CellOptions } from '@delon/abc/cell';
         html =>
         <span cell [value]="HTML" [options]="{ type: 'html' }"></span>
       </div>
+      <div nz-col nzSpan="8">
+        SafeHtml =>
+        <span cell [value]="safeHtml"></span>
+        <a (click)="updateSafeHtml()" class="ml-sm">updateSafeHtml</a>
+      </div>
       <div nz-col nzSpan="8">
         badge =>
         <span cell value="FINISHED" [options]="{ badge: { data: status } }"></span>
@@ -81,15 +87,13 @@ import { CellBadge, CellFuValue, CellOptions } from '@delon/abc/cell';
           [options]="{ type: 'checkbox', tooltip: 'Tooltip' }"
           [disabled]="disabled"
         ></span>
-        {{ checkbox | json }}
         <a (click)="disabled = !disabled" class="ml-sm">Change Disabled</a>
       </div>
       <div nz-col nzSpan="8">
         radio =>
         <span cell [(value)]="radio" [options]="{ type: 'radio', tooltip: 'Tooltip' }" [disabled]="disabled"></span>
         <a (click)="radio = !radio">Change Value</a>
         <a (click)="disabled = !disabled" class="ml-sm">Change Disabled</a>
-        {{ radio | json }}
       </div>
       <div nz-col nzSpan="8">
         default =>
@@ -100,13 +104,10 @@ import { CellBadge, CellFuValue, CellOptions } from '@delon/abc/cell';
         <span cell [value]="i" [type]="$any(i)"></span>
       </div>
       <div nz-col nzSpan="8">
-        large =>
+        size =>
+        <span cell value="small" size="small"></span>, <span cell value="default"></span>,
         <span cell value="large" size="large"></span>
       </div>
-      <div nz-col nzSpan="8">
-        small =>
-        <span cell value="small" size="small"></span>
-      </div>
       <div nz-col nzSpan="8">
         tooltip =>
         <span cell value="tooltip" [options]="{ tooltip: 'Tooltip' }"></span>
@@ -138,7 +139,8 @@ import { CellBadge, CellFuValue, CellOptions } from '@delon/abc/cell';
         margin-bottom: 8px;
       }
     `
-  ]
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DemoComponent implements OnInit {
   value: unknown = 'string';
@@ -161,24 +163,39 @@ export class DemoComponent implements OnInit {
   loading = true;
   asyncLoading = true;
   async?: CellFuValue;
+  safeHtml = this.ds.bypassSecurityTrustHtml(`<strong>Strong Html</strong>`);
+
+  constructor(
+    private ds: DomSanitizer,
+    private cdr: ChangeDetectorRef
+  ) {}
 
   ngOnInit(): void {
     this.again();
   }
 
   refresh(): void {
     this.value = new Date();
+    this.cdr.detectChanges();
   }
 
   again(): void {
     this.asyncLoading = true;
     this.async = (() =>
       of({ text: `${+new Date()}` }).pipe(
-        delay(1000 * 2),
+        take(1),
+        delay(1000 * 1),
         finalize(() => {
           this.asyncLoading = false;
+          this.cdr.detectChanges();
         })
       )) as CellFuValue;
+    this.cdr.detectChanges();
+  }
+
+  updateSafeHtml(): void {
+    this.safeHtml = this.ds.bypassSecurityTrustHtml(`alert('a');<script>alert('a')</script>`);
+    this.cdr.detectChanges();
   }
 }
 ```