ngx-antd-form-builder/fesm2022/ngx-antd-form-builder.mjs.map

Simple Drag&Drop form builder using ng-zorro-antd

{"version":3,"file":"ngx-antd-form-builder.mjs","sources":["../../../projects/ngx-antd-form-builder/src/lib/utils/sortablejs/sortablejs-binding.ts","../../../projects/ngx-antd-form-builder/src/lib/utils/sortablejs/sortablejs-bindings.ts","../../../projects/ngx-antd-form-builder/src/lib/utils/sortablejs/sortablejs.service.ts","../../../projects/ngx-antd-form-builder/src/lib/utils/sortablejs/sortablejs.directive.ts","../../../projects/ngx-antd-form-builder/src/lib/utils/sortablejs/sortablejs.module.ts","../../../projects/ngx-antd-form-builder/src/lib/components/collapse-item-list/collapse-item-list.component.ts","../../../projects/ngx-antd-form-builder/src/lib/components/collapse-item-list/collapse-item-list.component.html","../../../projects/ngx-antd-form-builder/src/lib/components/design-form-change-option/design-form-change-option.component.ts","../../../projects/ngx-antd-form-builder/src/lib/components/design-form-change-option/design-form-change-option.component.html","../../../projects/ngx-antd-form-builder/src/lib/components/design-form-item-checkbox/design-form-item-checkbox.component.ts","../../../projects/ngx-antd-form-builder/src/lib/components/design-form-item-checkbox/design-form-item-checkbox.component.html","../../../projects/ngx-antd-form-builder/src/lib/components/design-form-item-radio/design-form-item-radio.component.ts","../../../projects/ngx-antd-form-builder/src/lib/components/design-form-item-radio/design-form-item-radio.component.html","../../../projects/ngx-antd-form-builder/src/lib/components/pipes/has-rule.pipe.ts","../../../projects/ngx-antd-form-builder/src/lib/components/design-form-item/design-form-item.component.ts","../../../projects/ngx-antd-form-builder/src/lib/components/design-form-item/design-form-item.component.html","../../../projects/ngx-antd-form-builder/src/lib/components/design-form-node/design-form-node.component.ts","../../../projects/ngx-antd-form-builder/src/lib/components/design-form-node/design-form-node.component.html","../../../projects/ngx-antd-form-builder/src/lib/components/layout-item/layout-item.component.ts","../../../projects/ngx-antd-form-builder/src/lib/components/layout-item/layout-item.component.html","../../../projects/ngx-antd-form-builder/src/lib/components/preview-data-dialog/preview-data.dialog.ts","../../../projects/ngx-antd-form-builder/src/lib/components/preview-data-dialog/preview-data.dialog.html","../../../projects/ngx-antd-form-builder/src/lib/components/build-blocks/build-blocks.component.ts","../../../projects/ngx-antd-form-builder/src/lib/components/build-blocks/build-blocks.component.html","../../../projects/ngx-antd-form-builder/src/lib/ngx-antd-form-viewer.component.ts","../../../projects/ngx-antd-form-builder/src/lib/components/preview-dialog/preview.dialog.ts","../../../projects/ngx-antd-form-builder/src/lib/components/preview-dialog/preview.dialog.html","../../../projects/ngx-antd-form-builder/src/lib/utils/func.ts","../../../projects/ngx-antd-form-builder/src/lib/components/design-form-component-panel/design-form-component-panel.component.ts","../../../projects/ngx-antd-form-builder/src/lib/components/design-form-component-panel/design-form-component-panel.component.html","../../../projects/ngx-antd-form-builder/src/lib/components/design-form-item-properties/design-form-item-properties.component.ts","../../../projects/ngx-antd-form-builder/src/lib/components/design-form-item-properties/design-form-item-properties.component.html","../../../projects/ngx-antd-form-builder/src/lib/components/design-form-properties/design-form-properties.component.ts","../../../projects/ngx-antd-form-builder/src/lib/components/design-form-properties/design-form-properties.component.html","../../../projects/ngx-antd-form-builder/src/lib/utils/form-item.config.ts","../../../projects/ngx-antd-form-builder/src/lib/ngx-antd-form-builder.component.ts","../../../projects/ngx-antd-form-builder/src/public-api.ts","../../../projects/ngx-antd-form-builder/src/ngx-antd-form-builder.ts"],"sourcesContent":["import {SortableData} from './sortablejs.directive';\r\n\r\nexport class SortablejsBinding {\r\n\r\n  constructor(private target: SortableData) {\r\n  }\r\n\r\n  insert(index: number, item: any) {\r\n    if (this.isFormArray) {\r\n      this.target.insert(index, item);\r\n    } else {\r\n      this.target.splice(index, 0, item);\r\n    }\r\n  }\r\n\r\n  get(index: number) {\r\n    return this.isFormArray ? this.target.at(index) : this.target[index];\r\n  }\r\n\r\n  remove(index: number) {\r\n    let item;\r\n\r\n    if (this.isFormArray) {\r\n      item = this.target.at(index);\r\n      this.target.removeAt(index);\r\n    } else {\r\n      item = this.target.splice(index, 1)[0];\r\n    }\r\n\r\n    return item;\r\n  }\r\n\r\n  // we need this to identify that the target is a FormArray\r\n  // we don't want to have a dependency on @angular/forms just for that\r\n  private get isFormArray() {\r\n    // just checking for random FormArray methods not available on a standard array\r\n    return !!this.target.at && !!this.target.insert && !!this.target.reset;\r\n  }\r\n\r\n}\r\n","import { SortablejsBinding } from './sortablejs-binding';\r\nimport {SortableData} from './sortablejs.directive';\r\n\r\nexport class SortablejsBindings {\r\n\r\n  bindings: SortablejsBinding[];\r\n\r\n  constructor(bindingTargets: SortableData[]) {\r\n    this.bindings = bindingTargets.map(target => new SortablejsBinding(target));\r\n  }\r\n\r\n  injectIntoEvery(index: number, items: any[]) {\r\n    this.bindings.forEach((b, i) => b.insert(index, items[i]));\r\n  }\r\n\r\n  getFromEvery(index: number) {\r\n    return this.bindings.map(b => b.get(index));\r\n  }\r\n\r\n  extractFromEvery(index: number) {\r\n    return this.bindings.map(b => b.remove(index));\r\n  }\r\n\r\n  get provided() {\r\n    return !!this.bindings.length;\r\n  }\r\n\r\n}\r\n","import { Injectable } from '@angular/core';\r\n\r\n@Injectable({\r\n  providedIn: 'root',\r\n})\r\nexport class SortablejsService {\r\n\r\n  // original library calls the events in unnatural order\r\n  // first the item is added, then removed from the previous array\r\n  // this is a temporary event to work this around\r\n  // as long as only one sortable takes place at a certain time\r\n  // this is enough to have a single `global` event\r\n  transfer?: (items: any[]) => void ;\r\n\r\n}\r\n","import {\r\n  Directive,\r\n  ElementRef,\r\n  EventEmitter,\r\n  Inject,\r\n  Input,\r\n  NgZone,\r\n  OnChanges,\r\n  OnDestroy,\r\n  OnInit,\r\n  Optional,\r\n  Output,\r\n  Renderer2,\r\n  SimpleChange,\r\n} from '@angular/core';\r\nimport Sortable, {Options, SortableEvent} from 'sortablejs';\r\nimport {SortablejsBindings} from './sortablejs-bindings';\r\nimport {SortablejsService} from './sortablejs.service';\r\n\r\nexport type SortableData = any | any[];\r\n\r\nconst getIndexesFromEvent = (event: SortableEvent) => {\r\n  if (event.hasOwnProperty('newDraggableIndex') && event.hasOwnProperty('oldDraggableIndex')) {\r\n    return {\r\n      new: event.newDraggableIndex,\r\n      old: event.oldDraggableIndex,\r\n    };\r\n  } else {\r\n    return {\r\n      new: event.newIndex,\r\n      old: event.oldIndex,\r\n    };\r\n  }\r\n};\r\n\r\nfunction removeNode(node: HTMLElement) {\r\n  if (node.parentElement !== null) {\r\n    node.parentElement.removeChild(node);\r\n  }\r\n}\r\n\r\nfunction insertNodeAt(fatherNode: HTMLElement, node: HTMLElement, position: number) {\r\n  const refNode =\r\n    position === 0\r\n      ? fatherNode.children[0]\r\n      : fatherNode.children[position - 1].nextSibling;\r\n  fatherNode.insertBefore(node, refNode);\r\n}\r\n\r\n@Directive({\r\n  selector: '[sortablejs]',\r\n})\r\nexport class SortablejsDirective implements OnInit, OnChanges, OnDestroy {\r\n\r\n  @Input()\r\n  sortablejs: SortableData; // array or a FormArray\r\n\r\n  @Input()\r\n  sortablejsContainer!: string;\r\n\r\n  @Input()\r\n  sortablejsOptions!: Options;\r\n\r\n  @Input()\r\n  sortablejsCloneFunction!: (item: any) => any;\r\n\r\n  private sortableInstance: any;\r\n\r\n  @Output() sortablejsInit = new EventEmitter();\r\n\r\n  constructor(\r\n    private service: SortablejsService,\r\n    private element: ElementRef,\r\n    private zone: NgZone,\r\n    private renderer: Renderer2,\r\n  ) {\r\n  }\r\n\r\n  ngOnInit() {\r\n    //zone pollution\r\n    this.zone.runOutsideAngular(() => {\r\n      if (Sortable) { // Sortable does not exist in angular universal (SSR)\r\n        this.create();\r\n      }\r\n    })\r\n  }\r\n\r\n  ngOnChanges(changes: { [prop in keyof SortablejsDirective]: SimpleChange }) {\r\n    const optionsChange: SimpleChange = changes.sortablejsOptions;\r\n\r\n    if (optionsChange && !optionsChange.isFirstChange()) {\r\n      const previousOptions: Options = optionsChange.previousValue;\r\n      const currentOptions: Options = optionsChange.currentValue;\r\n\r\n      Object.keys(currentOptions).forEach(optionName => {\r\n        if (currentOptions[optionName as keyof Options] !== previousOptions[optionName as keyof Options]) {\r\n          // use low-level option setter\r\n          this.sortableInstance.option(optionName, this.options[optionName as keyof Options]);\r\n        }\r\n      });\r\n    }\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    if (this.sortableInstance) {\r\n      this.sortableInstance.destroy();\r\n    }\r\n  }\r\n\r\n  private create() {\r\n    const container = this.sortablejsContainer ? this.element.nativeElement.querySelector(this.sortablejsContainer) : this.element.nativeElement;\r\n\r\n    setTimeout(() => {\r\n      this.sortableInstance = Sortable.create(container, this.options);\r\n      this.sortablejsInit.emit(this.sortableInstance);\r\n    }, 0);\r\n  }\r\n\r\n  private getBindings(): SortablejsBindings {\r\n    if (!this.sortablejs) {\r\n      return new SortablejsBindings([]);\r\n    } else if (this.sortablejs instanceof SortablejsBindings) {\r\n      return this.sortablejs;\r\n    } else {\r\n      return new SortablejsBindings([this.sortablejs]);\r\n    }\r\n  }\r\n\r\n  private get options() {\r\n    return {...this.optionsWithoutEvents, ...this.overridenOptions};\r\n  }\r\n\r\n  private get optionsWithoutEvents() {\r\n    return {...(this.sortablejsOptions || {})};\r\n  }\r\n\r\n  private proxyEvent(eventName: string, ...params: any[]) {\r\n    this.zone.run(() => { // re-entering zone, see https://github.com/SortableJS/angular-sortablejs/issues/110#issuecomment-408874600\r\n      if (this.optionsWithoutEvents && this.optionsWithoutEvents[eventName as keyof Options]) {\r\n        (this.optionsWithoutEvents[eventName as keyof Options] as any)(...params);\r\n      }\r\n    });\r\n  }\r\n\r\n  private get isCloning() {\r\n    return this.sortableInstance.options.group.checkPull(this.sortableInstance, this.sortableInstance) === 'clone';\r\n  }\r\n\r\n  private clone<T>(item: T): T {\r\n    // by default pass the item through, no cloning performed\r\n    return (this.sortablejsCloneFunction || (subitem => subitem))(item);\r\n  }\r\n\r\n  private get overridenOptions(): Options {\r\n    // always intercept standard events but act only in case items are set (bindingEnabled)\r\n    // allows to forget about tracking this.items changes\r\n    return {\r\n      onAdd: (event: SortableEvent) => {\r\n        this.service.transfer = (items: any[]) => {\r\n          this.getBindings().injectIntoEvery(event.newIndex as number, items);\r\n          this.proxyEvent('onAdd', event);\r\n        };\r\n        removeNode(event.item);\r\n\r\n        this.proxyEvent('onAddOriginal', event);\r\n      },\r\n      onRemove: (event: SortableEvent) => {\r\n        const bindings = this.getBindings();\r\n\r\n        if (bindings.provided) {\r\n          if (this.isCloning && this.service.transfer) {\r\n            this.service.transfer(bindings.getFromEvery(event.oldIndex as number).map(item => this.clone(item)));\r\n\r\n            // great thanks to https://github.com/tauu\r\n            // event.item is the original item from the source list which is moved to the target list\r\n            // event.clone is a clone of the original item and will be added to source list\r\n            // If bindings are provided, adding the item dom element to the target list causes artifacts\r\n            // as it interferes with the rendering performed by the angular template.\r\n            // Therefore we remove it immediately and also move the original item back to the source list.\r\n            // (event handler may be attached to the original item and not its clone, therefore keeping\r\n            // the original dom node, circumvents side effects )\r\n            this.renderer.removeChild(event.item.parentNode, event.item);\r\n            this.renderer.insertBefore(event.clone.parentNode, event.item, event.clone);\r\n            this.renderer.removeChild(event.clone.parentNode, event.clone);\r\n          } else {\r\n            this.service.transfer && this.service.transfer(bindings.extractFromEvery(event.oldIndex as number));\r\n          }\r\n\r\n          this.service.transfer = undefined;\r\n        }\r\n\r\n        this.proxyEvent('onRemove', event);\r\n      },\r\n      onUpdate: (event: SortableEvent) => {\r\n        removeNode(event.item);\r\n        insertNodeAt(event['from'], event.item, event.oldIndex as number);\r\n        const bindings = this.getBindings();\r\n        const indexes = getIndexesFromEvent(event);\r\n\r\n        bindings.injectIntoEvery(indexes.new as number, bindings.extractFromEvery(indexes.old as number));\r\n        this.proxyEvent('onUpdate', event);\r\n      },\r\n    };\r\n  }\r\n\r\n}","import {ModuleWithProviders, NgModule} from '@angular/core';\r\nimport {SortablejsDirective} from './sortablejs.directive';\r\nimport {Options} from 'sortablejs';\r\n\r\n@NgModule({\r\n  declarations: [SortablejsDirective],\r\n  exports: [SortablejsDirective],\r\n})\r\nexport class SortablejsModule {\r\n}\r\n","import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';\r\nimport { Options, SortableEvent } from 'sortablejs';\r\nimport { NgxAntdFormBuilder } from '../../ngx-antd-form-builder.interface';\r\nimport { SortablejsModule } from '../../utils/sortablejs/sortablejs.module';\r\nimport { CommonModule } from '@angular/common';\r\n@Component({\r\n  standalone: true,\r\n  selector: 'app-collapse-item-list',\r\n  templateUrl: './collapse-item-list.component.html',\r\n  styleUrls: ['./collapse-item-list.component.scss'],\r\n  imports: [SortablejsModule, CommonModule]\r\n})\r\nexport class CollapseItemListComponent implements OnChanges {\r\n  @Input() fields: NgxAntdFormBuilder.AllType[] = []\r\n  @Output() readonly handleStart: EventEmitter<any> = new EventEmitter();\r\n  @Output() readonly generateKey: EventEmitter<any> = new EventEmitter();\r\n  _fields: NgxAntdFormBuilder.AllType[] = []\r\n  constructor(\r\n  ) {\r\n  }\r\n\r\n  options: Options = {\r\n    group: {\r\n      name:  'draggable-box',\r\n      pull: 'clone', put: false,\r\n    },\r\n    sort: false,\r\n    onStart: (event: SortableEvent) => {\r\n      this.handleStart.emit(this._fields[event.oldIndex as number].type)\r\n      this.generateKey.emit({\r\n        list: this._fields, \r\n        index: event.oldIndex\r\n      })\r\n    }\r\n  };\r\n  \r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    if (changes['fields']) {\r\n      this._fields = changes['fields'].currentValue\r\n    }\r\n  }\r\n\r\n}\r\n","<ul\r\n  [sortablejs]=\"_fields\" [sortablejsOptions]=\"options\"\r\n>\r\n  <li class=\"draggable-item\" *ngFor=\"let val of _fields; index as i\"\r\n    >\r\n    {{ val.label }}\r\n    </li>\r\n</ul>\r\n","import { CommonModule } from \"@angular/common\";\r\nimport { Component, Input, Output, EventEmitter, forwardRef, Inject, Optional } from \"@angular/core\";\r\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from \"@angular/forms\";\r\nimport { NzButtonModule } from \"ng-zorro-antd/button\";\r\nimport { NzGridModule } from \"ng-zorro-antd/grid\";\r\nimport { NzIconModule } from \"ng-zorro-antd/icon\";\r\nimport { NzInputModule } from \"ng-zorro-antd/input\";\r\nimport { NzInputNumberModule } from \"ng-zorro-antd/input-number\";\r\n\r\n@Component({\r\n  standalone: true,\r\n  selector: 'app-design-form-change-option',\r\n  templateUrl: './design-form-change-option.component.html',\r\n  styleUrls: ['./design-form-change-option.component.scss'],\r\n  imports: [\r\n    NzInputNumberModule, NzInputModule, FormsModule,CommonModule,NzIconModule,NzButtonModule,NzGridModule,\r\n  ],\r\n  providers: [\r\n    {\r\n      provide: NG_VALUE_ACCESSOR,\r\n      useExisting: forwardRef(() => DesignFormChangeOptionComponent),\r\n      multi: true\r\n    }\r\n  ]\r\n  \r\n})\r\nexport class DesignFormChangeOptionComponent implements ControlValueAccessor {\r\n  constructor(\r\n  ) {}\r\n  _value: any\r\n  onChange: (_: any) => void = (_: any) => { };\r\n  onTouched: () => void = () => { };\r\n  writeValue(obj: any): void {\r\n    this._value = obj\r\n  }\r\n  registerOnChange(fn: any): void {\r\n    this.onChange = fn\r\n  }\r\n  registerOnTouched(fn: any): void {\r\n    this.onTouched = fn;\r\n  }\r\n  setDisabledState?(isDisabled: boolean): void {\r\n    //throw new Error(\"Method not implemented.\");\r\n  }\r\n\r\n\r\n  //@Input() value: Array<any>;\r\n  @Input() type: string = 'option';\r\n  //@Output() readonly changeValue = new EventEmitter();\r\n\r\n  handleAdd() {\r\n    // 添加\r\n    const addData = [\r\n      ...this._value,\r\n      {\r\n        value: `${this._value.length + 1}`,\r\n        label: (this.type == 'collapse' ? \"Panel \" : \"Option \") + (this._value.length + 1),\r\n        list: this.type === \"tab\" || this.type == 'collapse' ? [] : undefined\r\n      }\r\n    ];\r\n    this._value = addData\r\n    this.onChange(addData)\r\n    //this.$emit(\"input\", addData);\r\n  }\r\n  handleAddCol() {\r\n    // 添加栅格Col\r\n    const addData = [\r\n      ...this._value,\r\n      {\r\n        span: 12,\r\n        list: []\r\n      }\r\n    ];\r\n    this._value = addData\r\n    this.onChange(addData)\r\n    //this.$emit(\"input\", addData);\r\n  }\r\n  handleAddRules() {\r\n    const addData = [\r\n      ...this._value,\r\n      {\r\n        pattern: \"\",\r\n        message: \"\"\r\n      }\r\n    ];\r\n    this._value = addData\r\n    this.onChange(addData)\r\n    //this.$emit(\"input\", addData);\r\n  }\r\n  handleDelete(deleteIndex) {\r\n    // 删除\r\n    this._value = this._value.filter((val, index) => index !== deleteIndex)\r\n    this.onChange(this._value)\r\n    // this.$emit(\r\n    //   \"input\",\r\n    //   this.value.filter((val, index) => index !== deleteIndex)\r\n    // );\r\n  }\r\n}","<div class=\"option-change-container\">\r\n  <div *ngIf=\"type === 'option' || type === 'tab'\">\r\n    <div nz-row [nzGutter]=\"6\" class=\"option-change-box\" *ngFor=\"let val of _value; let index = index\">\r\n      <div nz-col nzSpan=\"12\">\r\n        <input type=\"text\" [(ngModel)]=\"val.label\" nz-input placeholder=\"Label\">\r\n      </div>\r\n      <div nz-col nzSpan=\"6\">\r\n        <input type=\"text\" [(ngModel)]=\"val.value\" nz-input placeholder=\"Value\">\r\n      </div>\r\n      <!-- <div nz-col nzSpan=\"6\">\r\n        <input type=\"text\" [(ngModel)]=\"val.tooltip\" nz-input placeholder=\"tooltip\">\r\n      </div> -->\r\n      <div nz-col nzSpan=\"6\">\r\n        <div class=\"option-delete-box\" (click)=\"handleDelete(index)\">\r\n          <button nz-button nzDanger ><i nz-icon nzType=\"delete\"></i></button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div nz-col nzSpan=\"24\">\r\n      <button nz-button nzType=\"primary\" (click)=\"handleAdd()\">Add</button>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"type === 'rules'\">\r\n    <div nz-row class=\"option-change-box\" *ngFor=\"let val of _value; let index = index\">\r\n      <ng-container *ngIf=\"index !== 0\">\r\n        <div nz-col nzSpan=\"24\">\r\n          <input type=\"text\" [(ngModel)]=\"val.message\" nz-input placeholder=\"Validation Tooltip\">\r\n        </div>\r\n        <div nz-col nzSpan=\"20\">\r\n          <input type=\"text\" [(ngModel)]=\"val.pattern\" nz-input placeholder=\"Regex pattern\">\r\n        </div>\r\n        <div nz-col nzSpan=\"4\">\r\n          <div class=\"option-delete-box\" (click)=\"handleDelete(index)\">\r\n            <button nz-button nzType=\"primary\" nzDanger><i nz-icon nzType=\"delete\"></i></button>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div nz-col nzSpan=\"24\">\r\n      <button nz-button nzType=\"primary\" (click)=\"handleAddRules()\">Add</button>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"type === 'colspan'\">\r\n    <div nz-row class=\"option-change-box\" *ngFor=\"let val of _value; let index = index\">\r\n      <div nz-col nzSpan=\"18\">\r\n        <nz-input-number [(ngModel)]=\"val.span\" style=\"width: 100%;\" [nzMax]=\"24\" [nzPlaceHolder]=\"'名称'\"></nz-input-number>\r\n      </div>\r\n      <div nz-col nzSpan=\"6\">\r\n        <div class=\"option-delete-box\" (click)=\"handleDelete(index)\">\r\n          <button nz-button nzDanger><i nz-icon nzType=\"delete\"></i></button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div nz-row>\r\n      <div nz-col nzSpan=\"24\">\r\n        <button nz-button (click)=\"handleAddCol()\">Add</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"type === 'collapse'\">\r\n    <div nz-row class=\"option-change-box\" *ngFor=\"let val of _value; let index = index\">\r\n      <div nz-col nzSpan=\"18\">\r\n        <input type=\"text\" [(ngModel)]=\"val.label\" nz-input placeholder=\"Name\">\r\n      </div>\r\n      <div nz-col nzSpan=\"6\">\r\n        <div class=\"option-delete-box\" (click)=\"handleDelete(index)\">\r\n          <button nz-button nzDanger><i nz-icon nzType=\"delete\"></i></button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div nz-col nzSpan=\"24\">\r\n      <button nz-button (click)=\"handleAdd()\">Add</button>\r\n    </div>\r\n  </div>\r\n</div>","import { CommonModule } from \"@angular/common\";\r\nimport { Component, forwardRef, Input, OnChanges, SimpleChanges } from \"@angular/core\";\r\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from \"@angular/forms\";\r\nimport { NzCheckboxModule } from \"ng-zorro-antd/checkbox\";\r\n\r\n@Component({\r\n  standalone: true,\r\n  selector: 'app-design-form-item-checkbox',\r\n  templateUrl: './design-form-item-checkbox.component.html',\r\n  styleUrls: ['./design-form-item-checkbox.component.scss'],\r\n  providers: [\r\n    {\r\n      provide: NG_VALUE_ACCESSOR,\r\n      useExisting: forwardRef(() => DesignFormItemCheckboxComponent),\r\n      multi: true\r\n    }\r\n  ],\r\n  imports: [NzCheckboxModule, FormsModule, CommonModule, ReactiveFormsModule]\r\n})\r\nexport class DesignFormItemCheckboxComponent implements ControlValueAccessor, OnChanges {  \r\n  @Input() options!: Array<Record<'label' | 'value', string>>\r\n  //defaultValue使用NgForm实现\r\n  //@Input() defaultValue: string[] = []\r\n  _first: string[] = []\r\n  /**\r\n  * Invoked when the model has been changed\r\n  */\r\n  onChange: (_: any) => void = (_: any) => { };\r\n  onTouched: () => void = () => { };\r\n  writeValue(obj: any): void {\r\n    if (obj && Array.isArray(obj)) {\r\n      this._first = obj\r\n    }\r\n  }\r\n  registerOnChange(fn: any): void {\r\n    this.onChange = fn\r\n  }\r\n  registerOnTouched(fn: any): void {\r\n    this.onTouched = fn;\r\n  }\r\n  setDisabledState?(isDisabled: boolean): void {\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    // if (changes.defaultValue.currentValue.length > 0) {\r\n    //   this.writeValue(changes.defaultValue.currentValue)\r\n    // }\r\n  }\r\n\r\n  log(e) {\r\n    this.onTouched()\r\n    this.onChange(e)\r\n    //console.log(e)\r\n  }\r\n}","<!-- <nz-checkbox-group [ngModel]=\"options\" (ngModelChange)=\"log($event)\"></nz-checkbox-group> -->\r\n<nz-checkbox-wrapper style=\"width: 100%;\" (nzOnChange)=\"log($event)\">\r\n  <label nz-checkbox \r\n    *ngFor=\"let option of options; let index = index\" \r\n    [nzValue]=\"option.value\" [ngModel]=\"_first.includes(option.value)\"\r\n    >\r\n    {{option.label}}\r\n  </label>\r\n</nz-checkbox-wrapper>","import { CommonModule } from \"@angular/common\";\r\nimport { Component, forwardRef, Input, OnChanges, SimpleChanges } from \"@angular/core\";\r\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from \"@angular/forms\";\r\nimport { NzIconModule } from \"ng-zorro-antd/icon\";\r\nimport { NzRadioModule } from \"ng-zorro-antd/radio\";\r\nimport { NzToolTipModule } from \"ng-zorro-antd/tooltip\";\r\n\r\n@Component({\r\n  standalone: true,\r\n  selector: 'app-design-form-item-radio',\r\n  templateUrl: './design-form-item-radio.component.html',\r\n  styleUrls: ['./design-form-item-radio.component.scss'],\r\n  providers: [\r\n    {\r\n      provide: NG_VALUE_ACCESSOR,\r\n      useExisting: forwardRef(() => DesignFormItemRadioComponent),\r\n      multi: true\r\n    }\r\n  ],\r\n  imports: [\r\n    CommonModule,FormsModule,\r\n    NzToolTipModule,NzRadioModule,NzIconModule,\r\n  ]\r\n})\r\nexport class DesignFormItemRadioComponent implements ControlValueAccessor, OnChanges {  \r\n  @Input() record//: AmberdataFormDesign.RadioType;\r\n  onChange: (_: any) => void = (_: any) => { };\r\n  onTouched: () => void = () => { };\r\n\r\n  value;\r\n  isDisabled = false;\r\n  writeValue(value: any): void {\r\n    this.value = value;\r\n  }\r\n  registerOnChange(fn: any): void {\r\n    this.onChange = fn\r\n  }\r\n  registerOnTouched(fn: any): void {\r\n    this.onTouched = fn;\r\n  }\r\n  setDisabledState?(isDisabled: boolean): void {\r\n    this.isDisabled = isDisabled;\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n  }\r\n\r\n  onModelChange(e) {\r\n    this.value = e;\r\n    this.onTouched()\r\n    this.onChange(e)\r\n    //console.log(e)\r\n  }\r\n}","<nz-radio-group  [ngModel]=\"value\" [nzDisabled]=\"isDisabled\"\r\n  (ngModelChange)=\"onModelChange($event)\" [ngStyle]=\"{'width': record.options.width}\">\r\n  <label *ngFor=\"let lbl of record.options.options\" nz-radio [nzValue]=\"lbl.value\">\r\n    <ng-container *ngIf=\"!lbl.tooltip\">{{lbl.label}}</ng-container>\r\n    <span style=\"display: inline-flex; align-items: center;\" *ngIf=\"lbl.tooltip\">{{lbl.label}}\r\n      <i style=\"margin-left: 2px;\" nz-icon nzType=\"question-circle\" nzTheme=\"outline\" \r\n        nz-tooltip [nzTooltipTitle]=\"lbl.tooltip\"></i>\r\n    </span>\r\n  </label>\r\n</nz-radio-group>","import { Pipe, PipeTransform } from \"@angular/core\";\r\n\r\n@Pipe({ standalone: true, name: 'hasRule' })\r\nexport class HasRulePipe implements PipeTransform {\r\n  transform(rules: any[]) {\r\n    return rules.filter(rule => rule.pattern || rule.required).length > 0;\r\n  }\r\n}","import { Component, EventEmitter, Inject, Input, OnChanges, OnInit, Optional, Output, SimpleChanges } from '@angular/core';\r\nimport { ReactiveFormsModule, UntypedFormControl, UntypedFormGroup } from '@angular/forms';\r\nimport { NzFormModule, NzFormTooltipIcon } from 'ng-zorro-antd/form';\r\nimport { NgxAntdFormBuilder } from '../../ngx-antd-form-builder.interface';\r\nimport { NzInputModule } from 'ng-zorro-antd/input';\r\nimport { NzDividerModule } from 'ng-zorro-antd/divider';\r\nimport { NzRateModule } from 'ng-zorro-antd/rate';\r\nimport { NzSelectModule } from 'ng-zorro-antd/select';\r\nimport { CommonModule } from '@angular/common';\r\nimport { DesignFormItemCheckboxComponent } from '../design-form-item-checkbox/design-form-item-checkbox.component';\r\nimport { DesignFormItemRadioComponent } from '../design-form-item-radio/design-form-item-radio.component';\r\nimport { NzInputNumberModule } from 'ng-zorro-antd/input-number';\r\nimport { HasRulePipe } from '../pipes/has-rule.pipe';\r\nimport { NzIconModule } from 'ng-zorro-antd/icon';\r\nimport { NzSliderModule } from 'ng-zorro-antd/slider';\r\nimport { NzSwitchModule } from 'ng-zorro-antd/switch';\r\nimport { NzAlertModule } from 'ng-zorro-antd/alert';\r\nimport { NzDatePickerModule } from 'ng-zorro-antd/date-picker';\r\n\r\n@Component({\r\n  standalone: true,\r\n  selector: 'app-design-form-item',\r\n  templateUrl: './design-form-item.component.html',\r\n  styleUrls: ['./design-form-item.component.scss'],\r\n  imports: [ \r\n    ReactiveFormsModule,CommonModule,\r\n    NzInputModule, NzInputNumberModule, NzFormModule, NzDividerModule,NzRateModule,\r\n    NzSelectModule,NzIconModule,NzSliderModule,NzSwitchModule,NzAlertModule,NzDatePickerModule,\r\n    DesignFormItemCheckboxComponent,DesignFormItemRadioComponent,HasRulePipe\r\n  ]\r\n})\r\nexport class DesignFormItemComponent implements OnChanges, OnInit {\r\n  infinity= Infinity\r\n  captchaTooltipIcon: NzFormTooltipIcon = {\r\n    type: 'info-circle',\r\n    theme: 'twotone'\r\n  };\r\n  //@Input() key //=\"record.key\"\r\n  //:selectItem.sync=\"selectItem\"\r\n  @Input() record!: NgxAntdFormBuilder.AllType //=\"record\"\r\n  @Input() formConfig //=\"record\"\r\n  @Input() form//: UntypedFormGroup  //??\r\n\r\n  get layoutConfig() {\r\n    return (this.record as any).options?.overrideLayout ? (this.record as any).options : this.formConfig;\r\n  }\r\n  constructor(\r\n  ) {}\r\n\r\n  get isCol() {\r\n    return this.formConfig.layout === 'horizontal' && this.formConfig.labelLayout === 'flex'\r\n  }\r\n  get isFlex() {\r\n    return this.formConfig.layout === 'horizontal' && this.formConfig.labelLayout !== 'flex'\r\n  }\r\n\r\n  get required() {\r\n    return this.record['rules'] && this.record['rules'][0] && this.record['rules'][0]['required'] === true \r\n  }\r\n\r\n  ngOnInit(): void {\r\n  }\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    if (!this.form && this.record && this.record.key) {\r\n      this.form = new UntypedFormGroup({\r\n        [this.record.key]: new UntypedFormControl()\r\n      })\r\n    }\r\n  }\r\n\r\n\r\n\r\n  clearValue() {\r\n    this.form.get(this.record.key).setValue('')\r\n  }\r\n\r\n  getValue() {\r\n    return this.form.get(this.record.key).value\r\n  }\r\n\r\n  valueLengthGtZero() {\r\n    const value = this.getValue()\r\n    return value && value.length\r\n  }\r\n}","<ng-container [formGroup]=\"form\">\r\n  <nz-form-item *ngIf=\"\r\n  record.type === 'input' ||\r\n  record.type === 'textarea' ||\r\n  record.type === 'number' ||\r\n  record.type === 'radio' ||\r\n  record.type === 'checkbox' ||\r\n  record.type === 'select' ||\r\n  record.type === 'rate' ||\r\n  record.type === 'switch' ||\r\n  record.type === 'date' ||\r\n  record.type === 'slider'\"\r\n    [ngStyle]=\"isFlex ? { display: 'flex' }:{}\">\r\n    <nz-form-label\r\n      *ngIf=\"isFlex && !record.help\"\r\n      [ngStyle]=\"{ width: layoutConfig.labelWidth + 'px'}\"\r\n      [nzRequired]=\"required\"\r\n    >{{record.label}}</nz-form-label>\r\n    <nz-form-label\r\n      *ngIf=\"isFlex && record.help\"\r\n      [ngStyle]=\"{ width: layoutConfig.labelWidth + 'px'}\"\r\n      [nzTooltipTitle]=\"record.help\"\r\n      [nzRequired]=\"required\"\r\n    >{{record.label}}</nz-form-label>\r\n    <nz-form-label [title]=\"record.label\"\r\n      *ngIf=\"!isFlex && !record.help\"\r\n      [nzXs]=\"isCol && layoutConfig.labelCol.xs\"\r\n      [nzSm]=\"isCol && layoutConfig.labelCol.sm\"\r\n      [nzMd]=\"isCol && layoutConfig.labelCol.md\"\r\n      [nzLg]=\"isCol && layoutConfig.labelCol.lg\"\r\n      [nzXl]=\"isCol && layoutConfig.labelCol.xl\"\r\n      [nzXXl]=\"isCol && layoutConfig.labelCol.xxl\"\r\n      [nzRequired]=\"required\"\r\n    >{{record.label}}</nz-form-label>\r\n    <nz-form-label [title]=\"record.label\"\r\n      *ngIf=\"!isFlex && record.help\"\r\n      [nzXs]=\"isCol && layoutConfig.labelCol.xs\"\r\n      [nzSm]=\"isCol && layoutConfig.labelCol.sm\"\r\n      [nzMd]=\"isCol && layoutConfig.labelCol.md\"\r\n      [nzLg]=\"isCol && layoutConfig.labelCol.lg\"\r\n      [nzXl]=\"isCol && layoutConfig.labelCol.xl\"\r\n      [nzXXl]=\"isCol && layoutConfig.labelCol.xxl\"\r\n      nz-tooltip\r\n      [nzTooltipTitle]=\"record.help\"\r\n      [nzTooltipIcon]=\"captchaTooltipIcon\"\r\n      [nzRequired]=\"required\"\r\n    >{{record.label}}</nz-form-label>\r\n    <nz-form-control\r\n      [ngStyle]=\"isFlex ? { 'flex-grow': '1', width: 'auto' } : {}\"\r\n      [nzXs]=\"isCol && layoutConfig.wrapperCol.xs\"\r\n      [nzSm]=\"isCol && layoutConfig.wrapperCol.sm\"\r\n      [nzMd]=\"isCol && layoutConfig.wrapperCol.md\"\r\n      [nzLg]=\"isCol && layoutConfig.wrapperCol.lg\"\r\n      [nzXl]=\"isCol && layoutConfig.wrapperCol.xl\"\r\n      [nzXXl]=\"isCol && layoutConfig.wrapperCol.xxl\"\r\n      [nzHasFeedback]=\"record.rules | hasRule\"\r\n      [nzErrorTip]=\"userErrorTpl\">\r\n      <ng-template #userErrorTpl let-control>\r\n        <ng-container>\r\n          {{control.errors?.message}}\r\n        </ng-container>\r\n        <!-- <ng-container *ngIf=\"control.hasError('duplicated')\">\r\n          The username is redundant!\r\n        </ng-container> -->\r\n      </ng-template>\r\n        <ng-container *ngIf=\"record.type == 'input'\">\r\n          <nz-input-group [nzSuffix]=\"suffixTemplateInfo\" [ngStyle]=\"{'width': record.options.width}\">\r\n            <input *ngIf=\"record.options.maxLength\" nz-input [formControlName]=\"record.key\"\r\n               [placeholder]=\"record.options.placeholder || ''\"\r\n              [maxLength]=\"record.options.maxLength\" />\r\n            <input *ngIf=\"!record.options.maxLength\"  nz-input [formControlName]=\"record.key\" \r\n              [placeholder]=\"record.options.placeholder || ''\" />\r\n          </nz-input-group>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"record.type == 'textarea'\">\r\n          <nz-input-group [nzSuffix]=\"suffixTemplateInfo\" class=\"ant-input-affix-wrapper-textarea-with-clear-btn\"  [ngStyle]=\"{'width': record.options.width}\">\r\n            <textarea nz-input *ngIf=\"record.options.maxLength\" [formControlName]=\"record.key\"\r\n            [placeholder]=\"record.options.placeholder || ''\" [maxLength]=\"record.options.maxLength\"\r\n            [nzAutosize]=\"{ minRows: record.options.minRows, maxRows: record.options.maxRows }\"></textarea>\r\n            <textarea nz-input *ngIf=\"!record.options.maxLength\" [formControlName]=\"record.key\" \r\n            [placeholder]=\"record.options.placeholder || ''\" [nzAutosize]=\"{ minRows: record.options.minRows, maxRows: record.options.maxRows }\"\r\n            ></textarea>\r\n          </nz-input-group>\r\n        </ng-container>\r\n        <ng-template #suffixTemplateInfo>\r\n          <i nz-icon\r\n              class=\"ant-input-textarea-clear-icon\"\r\n              style=\"margin-right: 4px;\"\r\n              nzType=\"close-circle\"\r\n              *ngIf=\"(record.type == 'textarea' || record.type == 'input') && record.options.clearable && valueLengthGtZero()\"\r\n              (click)=\"clearValue()\"\r\n            ></i>\r\n        </ng-template>\r\n\r\n        <ng-container *ngIf=\"record.type == 'number'\">\r\n          <nz-input-number [formControlName]=\"record.key\" [ngStyle]=\"{'width': record.options.width}\"\r\n            [nzPlaceHolder]=\"record.options.placeholder\" \r\n            [nzPrecision]=\"record.options.precision\" [nzStep]=\"record.options.step\"\r\n            ></nz-input-number>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"record.type == 'radio'\">\r\n          <app-design-form-item-radio [formControlName]=\"record.key\" [record]=\"record\"></app-design-form-item-radio>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"record.type == 'checkbox'\">\r\n          <!-- <nz-checkbox-group [ngModel]=\"record.options.options\" (ngModelChange)=\"log($event)\"></nz-checkbox-group> -->\r\n          <app-design-form-item-checkbox  \r\n          [formControlName]=\"record.key\" [options]=\"record.options.options\"></app-design-form-item-checkbox>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"record.type == 'select'\">\r\n          <nz-select [formControlName]=\"record.key\">\r\n            <nz-option *ngFor=\"let lbl of record.options.options\" \r\n              [nzValue]=\"lbl.value\" [nzLabel]=\"lbl.label\"></nz-option>\r\n          </nz-select>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"record.type == 'rate'\">\r\n          <nz-rate [formControlName]=\"record.key\" [nzAllowHalf]=\"record.options.allowHalf\"></nz-rate>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"record.type == 'slider'\">\r\n          <nz-slider\r\n           [formControlName]=\"record.key\"></nz-slider>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"record.type == 'switch'\">\r\n          <nz-switch\r\n           [formControlName]=\"record.key\"></nz-switch>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"record.type == 'date'\">\r\n          <nz-date-picker\r\n            [ngStyle]=\"{'width': record.options.width}\"\r\n            [formControlName]=\"record.key\"\r\n            [nzMode]=\"record.options.mode\"\r\n            [nzPlaceHolder]=\"record.options.placeholder\"\r\n          ></nz-date-picker>\r\n        </ng-container>\r\n    </nz-form-control>\r\n  </nz-form-item>\r\n\r\n  <ng-container *ngIf=\"record.type === 'divider'\">\r\n    <nz-divider [nzText]=\"record.label\" [nzOrientation]=\"record.options.orientation || 'center'\"></nz-divider>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"record.type === 'alert'\">\r\n    <nz-form-item>\r\n      <nz-form-control>\r\n        <nz-alert [nzMessage]=\"record.label\"\r\n        [nzDescription]=\"record.options.description\"\r\n        [nzType]=\"record.options.type\"\r\n        [nzShowIcon]=\"record.options.showIcon\"\r\n        [nzCloseable]=\"record.options.closable\"\r\n        [nzBanner]=\"record.options.banner\">\r\n        </nz-alert>\r\n      </nz-form-control>\r\n    </nz-form-item>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"record.type === 'text'\">\r\n    <nz-form-item>\r\n      <nz-form-control>\r\n        <div [ngStyle]=\"{ textAlign: record.options.textAlign }\">\r\n          <label\r\n            [ngClass]=\"{ 'ant-form-item-required': record.options.showRequiredMark }\"\r\n            [ngStyle]=\"{\r\n              fontFamily: record.options.fontFamily,\r\n              fontSize: record.options.fontSize\r\n            }\"\r\n          >\r\n            {{record.label}}\r\n        </label>\r\n        </div>\r\n      </nz-form-control>\r\n    </nz-form-item>\r\n  </ng-container>\r\n</ng-container>","import { Component, Input, Output, EventEmitter, Inject, Optional } from \"@angular/core\";\r\nimport { DesignFormItemComponent } from \"../design-form-item/design-form-item.component\";\r\nimport { CommonModule } from \"@angular/common\";\r\nimport { NzIconModule } from \"ng-zorro-antd/icon\";\r\n\r\n@Component({\r\n  standalone: true,\r\n  selector: 'app-design-form-node',\r\n  templateUrl: './design-form-node.component.html',\r\n  styleUrls: ['./design-form-node.component.scss'],\r\n  imports: [DesignFormItemComponent,CommonModule,NzIconModule]\r\n})\r\nexport class DesignFormNodeComponent {\r\n  @Input() selectItem \r\n  @Input() record //=\"record\"\r\n  @Input() config //=\"config\"\r\n  @Input() hideModel = false\r\n  @Output() readonly handleSelectItem = new EventEmitter();\r\n  @Output() readonly handleCopy = new EventEmitter();\r\n  @Output() readonly handleDelete = new EventEmitter();\r\n  constructor(\r\n  ) {}\r\n\r\n  handleSelectItemFn($event: Event) {\r\n    $event.stopPropagation()\r\n    this.handleSelectItem.emit(this.record)\r\n  } \r\n  handleCopyFn($event: Event) {\r\n    $event.stopPropagation()\r\n    this.handleCopy.emit(this.record)\r\n  }  \r\n  handleDeleteFn($event: Event) {\r\n    $event.stopPropagation()\r\n    this.handleDelete.emit(this.record)\r\n  }\r\n}","<div \r\n  class=\"drag-move-box\" \r\n  [ngClass]=\"{'active': record.key === selectItem.key}\"\r\n  (click)=\"handleSelectItemFn($event)\">\r\n  <div class=\"form-item-box\">\r\n    <app-design-form-item \r\n      [formConfig]=\"config\"\r\n      [record]=\"record\"\r\n    ></app-design-form-item>\r\n  </div>\r\n    <div\r\n      [hidden]=\"true\"\r\n        *ngIf=\"!hideModel\"\r\n        class=\"show-key-box\"\r\n      >\r\n      {{record.label + (record.key ? '/' + record.key : '')}}\r\n    </div>\r\n    <div\r\n      [ngClass]=\"['delete', record.key === selectItem.key ? 'active' : 'unactivated']\"\r\n      (click)=\"handleDeleteFn($event)\"\r\n    >\r\n      <i nz-icon nzType=\"delete\" nzTheme=\"outline\"></i>\r\n  </div>\r\n</div>","import { Component, EventEmitter, Inject, Input, OnChanges, Optional, Output, SimpleChanges } from \"@angular/core\";\r\nimport Sortable, { Options } from 'sortablejs';\r\nimport { NzCollapseModule } from \"ng-zorro-antd/collapse\";\r\nimport { NzInputModule } from \"ng-zorro-antd/input\";\r\nimport { NzInputNumberModule } from \"ng-zorro-antd/input-number\";\r\nimport { CommonModule } from \"@angular/common\";\r\nimport { DesignFormNodeComponent } from \"../design-form-node/design-form-node.component\";\r\nimport { NzTabsModule } from \"ng-zorro-antd/tabs\";\r\nimport { SortablejsModule } from \"../../utils/sortablejs/sortablejs.module\";\r\nimport { NzCardModule } from \"ng-zorro-antd/card\";\r\nimport { NzGridModule } from \"ng-zorro-antd/grid\";\r\nimport { NzIconModule } from \"ng-zorro-antd/icon\";\r\n\r\n@Component({\r\n  standalone: true,\r\n  selector: 'app-layout-item',\r\n  templateUrl: './layout-item.component.html',\r\n  styleUrls: ['./layout-item.component.scss'],\r\n  imports: [\r\n    CommonModule, NzCollapseModule, NzInputModule, NzInputNumberModule,NzCardModule,\r\n    NzTabsModule,SortablejsModule,NzGridModule,NzIconModule,\r\n     DesignFormNodeComponent]\r\n})\r\nexport class LayoutItemComponent implements OnChanges {\r\n  @Input() record: any;\r\n  @Input() config: any;\r\n  @Input() selectItem: any;\r\n\r\n  @Output() readonly handleColAdd: EventEmitter<any> = new EventEmitter();\r\n  @Output() readonly handleSelectItem = new EventEmitter();\r\n  @Output() readonly handleCopy = new EventEmitter();\r\n  @Output() readonly handleDelete = new EventEmitter();\r\n\r\n  _cahce: {[key: string]: Options} = {\r\n  }\r\n\r\n  constructor(\r\n  ) {\r\n  }\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n  }\r\n\r\n  genOptions(colItem, index): Options {\r\n    if (!this._cahce[index]) {\r\n      this._cahce[index] = \r\n      {\r\n        group: 'draggable-box',\r\n        handle: '.drag-move',\r\n        onAdd: (evt) => {\r\n          this.onDrop({\r\n            evt, columns: colItem.list\r\n          })\r\n        } \r\n      }\r\n    }\r\n    const options = this._cahce[index]\r\n      return {\r\n        ...options\r\n      }\r\n  }\r\n\r\n  onDrop(evt) {\r\n    //debugger\r\n    this.handleColAdd.emit(\r\n      evt, \r\n    )\r\n  }\r\n\r\n  onDragDrop($event) {\r\n    //this.itemDrop.emit($event)\r\n  }\r\n\r\n  handleCopyFn($event: Event) {\r\n    $event.stopPropagation()\r\n    this.handleCopy.emit()\r\n  }  \r\n  handleDeleteFn($event: Event) {\r\n    $event.stopPropagation()\r\n    this.handleDelete.emit()\r\n  }\r\n\r\n  handleFormNodeDelete($event) {\r\n    this.handleDelete.emit($event)\r\n  }\r\n\r\n  handleSelectItemAndStop($event) {\r\n    $event.stopPropagation()\r\n    this.handleSelectItem.emit(this.record)\r\n  }\r\n\r\n  hiddenDelete() {\r\n    if ([//\"batch\",\r\n    //\"card\",\r\n    \"tabs\",\r\n    \"grid\",\r\n    'collapse',\r\n    \"table\"].includes(this.record.type)) {\r\n      return this.record.columns.some(col => col.list.length > 0)\r\n    } else if (\r\n      ['batch', 'card', 'block'].includes(this.record.type)) {\r\n      return this.record.list.length > 0\r\n    }\r\n  }\r\n}","<div [ngSwitch]=\"record.type\">\r\n  <ng-container *ngSwitchCase=\"'tabs'\">\r\n    <div [ngClass]=\"['grid-box', record.key === selectItem.key ? 'active' : 'unactivated']\"\r\n      (click)=\"handleSelectItemAndStop($event)\">\r\n      <nz-tabset class=\"grid-row\" [nzTabBarGutter]=\"record.options.tabBarGutter\" [nzType]=\"record.options.type\"\r\n        [nzSize]=\"record.options.size\" [nzTabPosition]=\"record.options.tabPosition\"\r\n        [nzAnimated]=\"record.options.animated\">\r\n        <nz-tab *ngFor=\"let colItem of record.columns; index as i\" [nzTitle]=\"colItem.label\">\r\n          <div class=\"grid-col\">\r\n            <div class=\"draggable-box\">\r\n              <div class=\"list-main\" [sortablejs]=\"colItem.list\" [sortablejsOptions]=\"genOptions(colItem, i)\">\r\n                <app-layout-item class=\"drag-move\" *ngFor=\"let subItem of colItem.list\" [record]=\"subItem\"\r\n                  [selectItem]=\"selectItem\" [config]=\"config\" \r\n                  (itemDrop)=\"onDragDrop($event)\" (handleDelete)=\"handleDelete.emit($event)\"\r\n                  (handleColAdd)=\"handleColAdd.emit($event)\"\r\n                  (handleCopy)=\"handleCopy.emit($event)\" (handleSelectItem)=\"handleSelectItem.emit($event)\">\r\n                </app-layout-item>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </nz-tab>\r\n      </nz-tabset>\r\n      <ng-container *ngTemplateOutlet=\"copyAndDelete\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'card'\">\r\n    <div [ngClass]=\"['grid-box', record.key === selectItem.key ? 'active' : 'unactivated']\"\r\n      (click)=\"handleSelectItemAndStop($event)\">\r\n      <nz-card class=\"grid-row\" [nzTitle]=\"nzCardTitle\">\r\n        <div class=\"grid-col\">\r\n          <div class=\"draggable-box\">\r\n            <div class=\"list-main\" [sortablejs]=\"record.list\" [sortablejsOptions]=\"genOptions(record, 0)\">\r\n              <app-layout-item class=\"drag-move\" *ngFor=\"let subItem of record.list\" [record]=\"subItem\"\r\n                [selectItem]=\"selectItem\" [config]=\"config\" \r\n                (itemDrop)=\"onDragDrop($event)\" (handleDelete)=\"handleDelete.emit($event)\"\r\n                (handleCopy)=\"handleCopy.emit($event)\" (handleSelectItem)=\"handleSelectItem.emit($event)\">\r\n              </app-layout-item>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </nz-card>\r\n      <ng-template #nzCardTitle>\r\n        <div style=\"white-space: normal;\">{{record.label}}</div>\r\n      </ng-template>\r\n      <ng-container *ngTemplateOutlet=\"copyAndDelete\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'block'\">\r\n    <div [ngClass]=\"['grid-box', record.key === selectItem.key ? 'active' : 'unactivated']\"\r\n      (click)=\"handleSelectItemAndStop($event)\">\r\n      <div class=\"grid-row\">\r\n        <div class=\"grid-col\">\r\n          <div class=\"draggable-box\">\r\n            <div class=\"list-main\" [sortablejs]=\"record.list\" [sortablejsOptions]=\"genOptions(record, 0)\">\r\n              <app-layout-item class=\"drag-move\" *ngFor=\"let subItem of record.list\" [record]=\"subItem\"\r\n                [selectItem]=\"selectItem\" [config]=\"config\" \r\n                (itemDrop)=\"onDragDrop($event)\" (handleDelete)=\"handleDelete.emit($event)\"\r\n                (handleCopy)=\"handleCopy.emit($event)\" (handleSelectItem)=\"handleSelectItem.emit($event)\">\r\n              </app-layout-item>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <ng-template #nzCardTitle>\r\n        <div style=\"white-space: normal;\">{{record.label}}</div>\r\n      </ng-template>\r\n      <ng-container *ngTemplateOutlet=\"copyAndDelete\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n    <ng-container *ngSwitchCase=\"'grid'\">\r\n      <div [ngClass]=\"['grid-box', record.key === selectItem.key ? 'active' : 'unactivated']\"\r\n        (click)=\"handleSelectItemAndStop($event)\">\r\n        <div class=\"grid-row\"  nz-row [nzGutter]=\"record.options.gutter\">\r\n          <div  class=\"grid-col\" *ngFor=\"let colItem of record.columns; index as i\" nz-col [nzSpan]=\"colItem.span || 0\">\r\n            <div class=\"draggable-box\">\r\n              <div class=\"list-main\" [sortablejs]=\"colItem.list\"\r\n                [sortablejsOptions]=\"genOptions(colItem, i)\">\r\n                <app-layout-item class=\"drag-move\" *ngFor=\"let subItem of colItem.list\" \r\n                  [record]=\"subItem\" \r\n                  [config]=\"config\"\r\n                  [selectItem]=\"selectItem\" \r\n                  (itemDrop)=\"onDragDrop($event)\"\r\n                  (handleColAdd)=\"handleColAdd.emit($event)\"\r\n                  (handleDelete)=\"handleFormNodeDelete($event)\"\r\n                  (handleSelectItem)=\"handleSelectItem.emit($event)\">\r\n                </app-layout-item>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"copyAndDelete\"></ng-container>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'collapse'\">\r\n      <div [ngClass]=\"['grid-box', record.key === selectItem.key ? 'active' : 'unactivated']\" \r\n        (click)=\"handleSelectItemAndStop($event)\">\r\n        <nz-collapse class=\"grid-row\"\r\n          [nzAccordion]=\"record.options.accordion\"\r\n          [nzBordered]=\"record.options.bordered\"\r\n          [nzGhost]=\"record.options.ghost\"\r\n          [nzExpandIconPosition]=\"record.options.expandIconPosition\"\r\n        >\r\n          <nz-collapse-panel [nzActive]=\"true\" *ngFor=\"let colItem of record.columns; index as i\" [nzHeader]=\"colItem.label\">\r\n            <div class=\"grid-col\">\r\n              <div class=\"draggable-box\">\r\n                <div class=\"list-main\"\r\n