How to use @delon/util - 10 common examples

if (Array.isArray(result)) {
            ret = result;
            retTotal = ret.length;
            retPs = retTotal;
            showPage = false;
          } else {
            // list
            ret = deepGet(result, res.reName!.list as string[], []);
            if (ret == null || !Array.isArray(ret)) {
              ret = [];
            }
            // total
            const resultTotal = res.reName!.total && deepGet(result, res.reName!.total as string[], null);
            retTotal = resultTotal == null ? total || 0 : +resultTotal;
          }
          return deepCopy(ret);
        }),
      );

_btnClick(record: STData, btn: STColumnButton, e?: Event) {
    // should be stop propagation when expandRowByClick is true
    if (e && this.expandRowByClick === true) {
      e.stopPropagation();
    }
    if (btn.type === 'modal' || btn.type === 'static') {
      const { modal } = btn;
      const obj = { [modal!.paramsName!]: record };
      (this.modalHelper[btn.type === 'modal' ? 'create' : 'createStatic'] as any)(
        modal!.component,
        { ...obj, ...(modal!.params && modal!.params!(record)) },
        deepMergeKey({}, true, this.copyCog.modal, modal),
      )
        .pipe(filter(w => typeof w !== 'undefined'))
        .subscribe(res => this.btnCallback(record, btn, res));
      return;
    } else if (btn.type === 'drawer') {
      const { drawer } = btn;
      const obj = { [drawer!.paramsName!]: record };
      this.drawerHelper
        .create(
          drawer!.title!,
          drawer!.component,
          { ...obj, ...(drawer!.params && drawer!.params!(record)) },
          deepMergeKey({}, true, this.copyCog.drawer, drawer),
        )
        .pipe(filter(w => typeof w !== 'undefined'))
        .subscribe(res => this.btnCallback(record, btn, res));

changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
})
export class SVComponent implements AfterViewInit, OnChanges {
  @ViewChild('conEl', { static: false })
  private conEl: ElementRef;
  private el: HTMLElement;
  private clsMap: string[] = [];

  // #region fields

  @Input() optional: string | TemplateRef;
  @Input() optionalHelp: string | TemplateRef;
  @Input() label: string | TemplateRef;
  @Input() unit: string | TemplateRef;
  @Input() @InputNumber(null) col: number;
  @Input() @InputBoolean(null) default: boolean;
  @Input() type: 'primary' | 'success' | 'danger' | 'warning';

  // #endregion

  get paddingValue(): number {
    return this.parent && this.parent.gutter / 2;
  }

  get labelWidth(): number | null {
    const { labelWidth, layout } = this.parent;
    return layout === 'horizontal' ? labelWidth : null;
  }

  constructor(
    el: ElementRef,

exportAs: 'svContainer',
  templateUrl: './view-container.component.html',
  preserveWhitespaces: false,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
})
export class SVContainerComponent implements OnInit, OnChanges {
  private el: HTMLElement;
  // #region fields

  @Input() title: string | TemplateRef;
  @Input() size: 'small' | 'large' = 'large';
  /** 列表项间距，单位为 `px` */
  @Input() @InputNumber() gutter: number;
  @Input() layout: 'horizontal' | 'vertical' = 'horizontal';
  @Input() @InputNumber(null) labelWidth: number;
  /** 指定信息最多分几列展示，最终一行几列由 col 配置结合响应式规则决定 */
  @Input() @InputNumber() col: number;
  @Input() default: boolean;

  // #endregion

  constructor(el: ElementRef, private ren: Renderer2, cog: SVConfig) {
    this.el = el.nativeElement;
    Object.assign(this, { ...new SVConfig(), ...cog });
  }

  private setClass() {
    const { el, ren, size, layout } = this;
    updateHostClass(el, ren, {
      [`${prefixCls}__container`]: true,
      [`${prefixCls}__${size}`]: true,

import { SEConfig } from './edit.config';

@Component({
  selector: 'se-container, [se-container]',
  exportAs: 'seContainer',
  templateUrl: './edit-container.component.html',
  preserveWhitespaces: false,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
})
export class SEContainerComponent {
  // #region fields

  @Input('se-container') @InputNumber(null) colInCon: REP_TYPE;
  @Input() @InputNumber(null) col: REP_TYPE;
  @Input() @InputNumber(null) labelWidth: number;
  @Input() title: string | TemplateRef;

  @Input()
  get gutter(): number {
    return this.nzLayout === 'horizontal' ? this._gutter : 0;
  }
  set gutter(value: number) {
    this._gutter = toNumber(value);
  }
  private _gutter: number;

  @Input()
  get nzLayout() {
    return this._nzLayout;
  }
  set nzLayout(value: string) {

private errorData: { [key: string]: string } = {};
  invalid = false;
  _labelWidth: number | null = null;
  _error: string;

  // #region fields

  @Input() optional: string | TemplateRef;
  @Input() optionalHelp: string | TemplateRef;
  @Input()
  set error(val: string | { [key: string]: string }) {
    this.errorData = typeof val === 'string' ? { '': val } : val;
  }
  @Input() extra: string;
  @Input() label: string | TemplateRef;
  @Input() @InputNumber(null) col: number;
  @Input() @InputBoolean() required = false;
  @Input() controlClass: string = '';
  @Input() @InputBoolean(null) line: boolean;
  @Input() @InputNumber(null) labelWidth: number;

  @Input()
  set id(value: string) {
    this._id = value;
    this._autoId = false;
  }

  _id = `_se-${nextUniqueId++}`;
  _autoId = true;

  // #endregion

private isSupportLineClamp = this.doc.body.style['webkitLineClamp'] !== undefined;
  @ViewChild('orgEl', { static: false }) private orgEl: ElementRef;
  @ViewChild('shadowOrgEl', { static: false }) private shadowOrgEl: ElementRef;
  @ViewChild('shadowTextEl', { static: false }) private shadowTextEl: ElementRef;
  private inited = false;
  orgHtml: SafeHtml;
  type = 'default';
  cls = {};
  text = '';
  targetCount = 0;

  // #region fields

  @Input() @InputBoolean() tooltip = false;
  @Input() @InputNumber(null) length: number;
  @Input() @InputNumber(null) lines: number;
  @Input() @InputBoolean() fullWidthRecognition = false;
  @Input() tail = '...';

  // #endregion

  get linsWord(): string {
    const { targetCount, text, tail } = this;
    return (targetCount > 0 ? text.substring(0, targetCount) : '') + (targetCount > 0 && targetCount < text.length ? tail : '');
  }

  constructor(
    private el: ElementRef,
    private ngZone: NgZone,
    private dom: DomSanitizer,
    @Inject(DOCUMENT) private doc: Document,
    private cdr: ChangeDetectorRef,

host: {
    '[style.margin-left.px]': 'marginValue',
    '[style.margin-right.px]': 'marginValue',
    '[class.ant-row]': 'true',
    '[class.sg__wrap]': 'true',
  },
  preserveWhitespaces: false,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
})
export class SGContainerComponent {
  // #region fields

  @Input() @InputNumber() gutter: number;
  @Input('sg-container') @InputNumber(null) colInCon: REP_TYPE;
  @Input() @InputNumber(null) col: REP_TYPE;

  // #endregion

  get marginValue(): number {
    return -(this.gutter / 2);
  }

  constructor(cog: SGConfig) {
    Object.assign(this, { ...new SGConfig(), ...cog });
  }
}

_error: string;

  // #region fields

  @Input() optional: string | TemplateRef;
  @Input() optionalHelp: string | TemplateRef;
  @Input()
  set error(val: string | { [key: string]: string }) {
    this.errorData = typeof val === 'string' ? { '': val } : val;
  }
  @Input() extra: string;
  @Input() label: string | TemplateRef;
  @Input() @InputNumber(null) col: number;
  @Input() @InputBoolean() required = false;
  @Input() controlClass: string = '';
  @Input() @InputBoolean(null) line: boolean;
  @Input() @InputNumber(null) labelWidth: number;

  @Input()
  set id(value: string) {
    this._id = value;
    this._autoId = false;
  }

  _id = `_se-${nextUniqueId++}`;
  _autoId = true;

  // #endregion

  get paddingValue(): number {
    return this.parent.gutter / 2;
  }

encapsulation: ViewEncapsulation.None,
})
export class SVComponent implements AfterViewInit, OnChanges {
  @ViewChild('conEl', { static: false })
  private conEl: ElementRef;
  private el: HTMLElement;
  private clsMap: string[] = [];

  // #region fields

  @Input() optional: string | TemplateRef;
  @Input() optionalHelp: string | TemplateRef;
  @Input() label: string | TemplateRef;
  @Input() unit: string | TemplateRef;
  @Input() @InputNumber(null) col: number;
  @Input() @InputBoolean(null) default: boolean;
  @Input() type: 'primary' | 'success' | 'danger' | 'warning';

  // #endregion

  get paddingValue(): number {
    return this.parent && this.parent.gutter / 2;
  }

  get labelWidth(): number | null {
    const { labelWidth, layout } = this.parent;
    return layout === 'horizontal' ? labelWidth : null;
  }

  constructor(
    el: ElementRef,
    @Host() @Optional() public parent: SVContainerComponent,