ngx-antd-form-builder
Version:
Simple Drag&Drop form builder using ng-zorro-antd
109 lines • 46.1 kB
JavaScript
import { Component, EventEmitter, Input, Output } from "@angular/core";
import { NzCollapseModule } from "ng-zorro-antd/collapse";
import { NzInputModule } from "ng-zorro-antd/input";
import { NzInputNumberModule } from "ng-zorro-antd/input-number";
import { CommonModule } from "@angular/common";
import { DesignFormNodeComponent } from "../design-form-node/design-form-node.component";
import { NzTabsModule } from "ng-zorro-antd/tabs";
import { SortablejsModule } from "../../utils/sortablejs/sortablejs.module";
import { NzCardModule } from "ng-zorro-antd/card";
import { NzGridModule } from "ng-zorro-antd/grid";
import { NzIconModule } from "ng-zorro-antd/icon";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "ng-zorro-antd/collapse";
import * as i3 from "ng-zorro-antd/card";
import * as i4 from "ng-zorro-antd/tabs";
import * as i5 from "../../utils/sortablejs/sortablejs.directive";
import * as i6 from "ng-zorro-antd/grid";
import * as i7 from "ng-zorro-antd/icon";
export class LayoutItemComponent {
constructor() {
this.handleColAdd = new EventEmitter();
this.handleSelectItem = new EventEmitter();
this.handleCopy = new EventEmitter();
this.handleDelete = new EventEmitter();
this._cahce = {};
}
ngOnChanges(changes) {
}
genOptions(colItem, index) {
if (!this._cahce[index]) {
this._cahce[index] =
{
group: 'draggable-box',
handle: '.drag-move',
onAdd: (evt) => {
this.onDrop({
evt, columns: colItem.list
});
}
};
}
const options = this._cahce[index];
return {
...options
};
}
onDrop(evt) {
//debugger
this.handleColAdd.emit(evt);
}
onDragDrop($event) {
//this.itemDrop.emit($event)
}
handleCopyFn($event) {
$event.stopPropagation();
this.handleCopy.emit();
}
handleDeleteFn($event) {
$event.stopPropagation();
this.handleDelete.emit();
}
handleFormNodeDelete($event) {
this.handleDelete.emit($event);
}
handleSelectItemAndStop($event) {
$event.stopPropagation();
this.handleSelectItem.emit(this.record);
}
hiddenDelete() {
if ([
//"card",
"tabs",
"grid",
'collapse',
"table"
].includes(this.record.type)) {
return this.record.columns.some(col => col.list.length > 0);
}
else if (['batch', 'card', 'block'].includes(this.record.type)) {
return this.record.list.length > 0;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: LayoutItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: LayoutItemComponent, isStandalone: true, selector: "app-layout-item", inputs: { record: "record", config: "config", selectItem: "selectItem" }, outputs: { handleColAdd: "handleColAdd", handleSelectItem: "handleSelectItem", handleCopy: "handleCopy", handleDelete: "handleDelete" }, usesOnChanges: true, ngImport: i0, template: "<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 [sortablejs]=\"colItem.list\" [sortablejsOptions]=\"genOptions(colItem, i)\">\r\n <app-layout-item \r\n class=\"drag-move\" *ngFor=\"let subItem of colItem.list\"\r\n [record]=\"subItem\" \r\n [selectItem]=\"selectItem\"\r\n [config]=\"config\"\r\n (itemDrop)=\"onDragDrop($event)\"\r\n (handleColAdd)=\"handleColAdd.emit($event)\"\r\n (handleDelete)=\"handleDelete.emit($event)\"\r\n (handleCopy)=\"handleCopy.emit($event)\"\r\n (handleSelectItem)=\"handleSelectItem.emit($event)\">\r\n </app-layout-item>\r\n </div>\r\n </div>\r\n </div>\r\n </nz-collapse-panel>\r\n </nz-collapse>\r\n <ng-container *ngTemplateOutlet=\"copyAndDelete\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <app-design-form-node class=\"drag-move\" \r\n [selectItem]=\"selectItem\"\r\n [config]=\"config\"\r\n [record]=\"record\"\r\n (handleDelete)=\"handleFormNodeDelete($event)\"\r\n (handleSelectItem)=\"handleSelectItem.emit($event)\"\r\n (handleCopy)=\"handleCopy.emit($event)\"\r\n ></app-design-form-node>\r\n </ng-container>\r\n</div>\r\n<ng-template #copyAndDelete>\r\n <!-- <div [ngClass]=\"['copy', record.key === selectItem.key ? 'active' : 'unactivated']\" \r\n (click)=\"handleCopyFn($event)\">\r\n <i nz-icon nzType=\"copy\" nzTheme=\"outline\"></i>\r\n </div> -->\r\n <div [hidden]=\"hiddenDelete()\" [ngClass]=\"['delete', record.key === selectItem.key ? 'active' : 'unactivated']\"\r\n (click)=\"handleDeleteFn($event)\">\r\n <i nz-icon nzType=\"delete\" nzTheme=\"outline\"></i>\r\n </div>\r\n</ng-template>", styles: ["ul,li{margin:20px;padding:10px;background-color:#fff;border-radius:4px;list-style:none}li{border:1px solid black}.item-dropzone{border:1px dashed grey;min-height:20px}.grid-box{position:relative;box-sizing:border-box;padding:5px;background:#9867f71f;width:100%;transition:all .3s;overflow:hidden}.grid-box .form-item-box{position:relative;box-sizing:border-box}.grid-box .form-item-box .ant-form-item{margin:0;padding-bottom:15px}.grid-box .grid-row,.grid-box .table-layout{background:#9867f71f}.grid-box .grid-row .grid-col .draggable-box,.grid-box .grid-row .table-td .draggable-box,.grid-box .table-layout .grid-col .draggable-box,.grid-box .table-layout .table-td .draggable-box{min-height:80px;min-width:50px;border:1px #ccc dashed;background:#fff}.grid-box .grid-row .grid-col .draggable-box .list-main,.grid-box .grid-row .table-td .draggable-box .list-main,.grid-box .table-layout .grid-col .draggable-box .list-main,.grid-box .table-layout .table-td .draggable-box .list-main{min-height:80px;position:relative;border:1px #ccc dashed}.grid-box:before{content:\"\";height:5px;width:100%;background:transparent;position:absolute;top:0;right:-100%;transition:all .3s}.grid-box.active{background:#9867f73d;outline-offset:0}.grid-box.active:before{background:#9867f7;right:0}.grid-box>.copy,.grid-box>.delete{position:absolute;top:0;width:30px;height:30px;line-height:30px;text-align:center;color:#fff;z-index:989;transition:all .3s}.grid-box>.copy.unactivated,.grid-box>.delete.unactivated{opacity:0!important;pointer-events:none}.grid-box>.copy.active,.grid-box>.delete.active{opacity:1!important}.grid-box>.copy{border-radius:0 0 0 8px;right:30px;background:#9867f7}.grid-box>.delete{right:0;background:#9867f7}\n"], dependencies: [{ kind: "component", type: LayoutItemComponent, selector: "app-layout-item", inputs: ["record", "config", "selectItem"], outputs: ["handleColAdd", "handleSelectItem", "handleCopy", "handleDelete"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: NzCollapseModule }, { kind: "component", type: i2.NzCollapsePanelComponent, selector: "nz-collapse-panel", inputs: ["nzActive", "nzDisabled", "nzShowArrow", "nzExtra", "nzHeader", "nzExpandedIcon"], outputs: ["nzActiveChange"], exportAs: ["nzCollapsePanel"] }, { kind: "component", type: i2.NzCollapseComponent, selector: "nz-collapse", inputs: ["nzAccordion", "nzBordered", "nzGhost", "nzExpandIconPosition"], exportAs: ["nzCollapse"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "ngmodule", type: NzInputNumberModule }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i3.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzBorderless", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzTabsModule }, { kind: "component", type: i4.NzTabSetComponent, selector: "nz-tabset", inputs: ["nzSelectedIndex", "nzTabPosition", "nzTabBarExtraContent", "nzCanDeactivate", "nzAddIcon", "nzTabBarStyle", "nzType", "nzSize", "nzAnimated", "nzTabBarGutter", "nzHideAdd", "nzCentered", "nzHideAll", "nzLinkRouter", "nzLinkExact"], outputs: ["nzSelectChange", "nzSelectedIndexChange", "nzTabListScroll", "nzClose", "nzAdd"], exportAs: ["nzTabset"] }, { kind: "component", type: i4.NzTabComponent, selector: "nz-tab", inputs: ["nzTitle", "nzClosable", "nzCloseIcon", "nzDisabled", "nzForceRender"], outputs: ["nzSelect", "nzDeselect", "nzClick", "nzContextmenu"], exportAs: ["nzTab"] }, { kind: "ngmodule", type: SortablejsModule }, { kind: "directive", type: i5.SortablejsDirective, selector: "[sortablejs]", inputs: ["sortablejs", "sortablejsContainer", "sortablejsOptions", "sortablejsCloneFunction"], outputs: ["sortablejsInit"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i6.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i6.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i7.NzIconDirective, selector: "[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: DesignFormNodeComponent, selector: "app-design-form-node", inputs: ["selectItem", "record", "config", "hideModel"], outputs: ["handleSelectItem", "handleCopy", "handleDelete"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: LayoutItemComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'app-layout-item', imports: [
CommonModule, NzCollapseModule, NzInputModule, NzInputNumberModule, NzCardModule,
NzTabsModule, SortablejsModule, NzGridModule, NzIconModule,
DesignFormNodeComponent
], template: "<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 [sortablejs]=\"colItem.list\" [sortablejsOptions]=\"genOptions(colItem, i)\">\r\n <app-layout-item \r\n class=\"drag-move\" *ngFor=\"let subItem of colItem.list\"\r\n [record]=\"subItem\" \r\n [selectItem]=\"selectItem\"\r\n [config]=\"config\"\r\n (itemDrop)=\"onDragDrop($event)\"\r\n (handleColAdd)=\"handleColAdd.emit($event)\"\r\n (handleDelete)=\"handleDelete.emit($event)\"\r\n (handleCopy)=\"handleCopy.emit($event)\"\r\n (handleSelectItem)=\"handleSelectItem.emit($event)\">\r\n </app-layout-item>\r\n </div>\r\n </div>\r\n </div>\r\n </nz-collapse-panel>\r\n </nz-collapse>\r\n <ng-container *ngTemplateOutlet=\"copyAndDelete\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <app-design-form-node class=\"drag-move\" \r\n [selectItem]=\"selectItem\"\r\n [config]=\"config\"\r\n [record]=\"record\"\r\n (handleDelete)=\"handleFormNodeDelete($event)\"\r\n (handleSelectItem)=\"handleSelectItem.emit($event)\"\r\n (handleCopy)=\"handleCopy.emit($event)\"\r\n ></app-design-form-node>\r\n </ng-container>\r\n</div>\r\n<ng-template #copyAndDelete>\r\n <!-- <div [ngClass]=\"['copy', record.key === selectItem.key ? 'active' : 'unactivated']\" \r\n (click)=\"handleCopyFn($event)\">\r\n <i nz-icon nzType=\"copy\" nzTheme=\"outline\"></i>\r\n </div> -->\r\n <div [hidden]=\"hiddenDelete()\" [ngClass]=\"['delete', record.key === selectItem.key ? 'active' : 'unactivated']\"\r\n (click)=\"handleDeleteFn($event)\">\r\n <i nz-icon nzType=\"delete\" nzTheme=\"outline\"></i>\r\n </div>\r\n</ng-template>", styles: ["ul,li{margin:20px;padding:10px;background-color:#fff;border-radius:4px;list-style:none}li{border:1px solid black}.item-dropzone{border:1px dashed grey;min-height:20px}.grid-box{position:relative;box-sizing:border-box;padding:5px;background:#9867f71f;width:100%;transition:all .3s;overflow:hidden}.grid-box .form-item-box{position:relative;box-sizing:border-box}.grid-box .form-item-box .ant-form-item{margin:0;padding-bottom:15px}.grid-box .grid-row,.grid-box .table-layout{background:#9867f71f}.grid-box .grid-row .grid-col .draggable-box,.grid-box .grid-row .table-td .draggable-box,.grid-box .table-layout .grid-col .draggable-box,.grid-box .table-layout .table-td .draggable-box{min-height:80px;min-width:50px;border:1px #ccc dashed;background:#fff}.grid-box .grid-row .grid-col .draggable-box .list-main,.grid-box .grid-row .table-td .draggable-box .list-main,.grid-box .table-layout .grid-col .draggable-box .list-main,.grid-box .table-layout .table-td .draggable-box .list-main{min-height:80px;position:relative;border:1px #ccc dashed}.grid-box:before{content:\"\";height:5px;width:100%;background:transparent;position:absolute;top:0;right:-100%;transition:all .3s}.grid-box.active{background:#9867f73d;outline-offset:0}.grid-box.active:before{background:#9867f7;right:0}.grid-box>.copy,.grid-box>.delete{position:absolute;top:0;width:30px;height:30px;line-height:30px;text-align:center;color:#fff;z-index:989;transition:all .3s}.grid-box>.copy.unactivated,.grid-box>.delete.unactivated{opacity:0!important;pointer-events:none}.grid-box>.copy.active,.grid-box>.delete.active{opacity:1!important}.grid-box>.copy{border-radius:0 0 0 8px;right:30px;background:#9867f7}.grid-box>.delete{right:0;background:#9867f7}\n"] }]
}], ctorParameters: () => [], propDecorators: { record: [{
type: Input
}], config: [{
type: Input
}], selectItem: [{
type: Input
}], handleColAdd: [{
type: Output
}], handleSelectItem: [{
type: Output
}], handleCopy: [{
type: Output
}], handleDelete: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGF5b3V0LWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWFudGQtZm9ybS1idWlsZGVyL3NyYy9saWIvY29tcG9uZW50cy9sYXlvdXQtaXRlbS9sYXlvdXQtaXRlbS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtYW50ZC1mb3JtLWJ1aWxkZXIvc3JjL2xpYi9jb21wb25lbnRzL2xheW91dC1pdGVtL2xheW91dC1pdGVtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFVLEtBQUssRUFBdUIsTUFBTSxFQUFpQixNQUFNLGVBQWUsQ0FBQztBQUVuSCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUMxRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDcEQsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDakUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLGdEQUFnRCxDQUFDO0FBQ3pGLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUNsRCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSwwQ0FBMEMsQ0FBQztBQUM1RSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDbEQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ2xELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQzs7Ozs7Ozs7O0FBWWxELE1BQU0sT0FBTyxtQkFBbUI7SUFhOUI7UUFSbUIsaUJBQVksR0FBc0IsSUFBSSxZQUFZLEVBQUUsQ0FBQztR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QUFTO2lDQUNJLElBQUksWUFDTixpQkFBaUIsV0FHbEI7d0JBQ1AsWUFBWSxFQUFFLGdCQUFnQixFQUFFLGFBQWEsRUFBRSxtQkFBbUIsRUFBQyxZQUFZO3dCQUMvRSxZQUFZLEVBQUMsZ0JBQWdCLEVBQUMsWUFBWSxFQUFDLFlBQVk7d0JBQ3RELHVCQUF1QjtxQkFBQzt3REFHbEIsTUFBTTtzQkFBZCxLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUVhLFlBQVk7c0JBQTlCLE1BQU07Z0JBQ1ksZ0JBQWdCO3NCQUFsQyxNQUFNO2dCQUNZLFVBQVU7c0JBQTVCLE1BQU07Z0JBQ1ksWUFBWTtzQkFBOUIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbmplY3QsIElucHV0LCBPbkNoYW5nZXMsIE9wdGlvbmFsLCBPdXRwdXQsIFNpbXBsZUNoYW5nZXMgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xyXG5pbXBvcnQgU29ydGFibGUsIHsgT3B0aW9ucyB9IGZyb20gJ3NvcnRhYmxlanMnO1xyXG5pbXBvcnQgeyBOekNvbGxhcHNlTW9kdWxlIH0gZnJvbSBcIm5nLXpvcnJvLWFudGQvY29sbGFwc2VcIjtcclxuaW1wb3J0IHsgTnpJbnB1dE1vZHVsZSB9IGZyb20gXCJuZy16b3Jyby1hbnRkL2lucHV0XCI7XHJcbmltcG9ydCB7IE56SW5wdXROdW1iZXJNb2R1bGUgfSBmcm9tIFwibmctem9ycm8tYW50ZC9pbnB1dC1udW1iZXJcIjtcclxuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSBcIkBhbmd1bGFyL2NvbW1vblwiO1xyXG5pbXBvcnQgeyBEZXNpZ25Gb3JtTm9kZUNvbXBvbmVudCB9IGZyb20gXCIuLi9kZXNpZ24tZm9ybS1ub2RlL2Rlc2lnbi1mb3JtLW5vZGUuY29tcG9uZW50XCI7XHJcbmltcG9ydCB7IE56VGFic01vZHVsZSB9IGZyb20gXCJuZy16b3Jyby1hbnRkL3RhYnNcIjtcclxuaW1wb3J0IHsgU29ydGFibGVqc01vZHVsZSB9IGZyb20gXCIuLi8uLi91dGlscy9zb3J0YWJsZWpzL3NvcnRhYmxlanMubW9kdWxlXCI7XHJcbmltcG9ydCB7IE56Q2FyZE1vZHVsZSB9IGZyb20gXCJuZy16b3Jyby1hbnRkL2NhcmRcIjtcclxuaW1wb3J0IHsgTnpHcmlkTW9kdWxlIH0gZnJvbSBcIm5nLXpvcnJvLWFudGQvZ3JpZFwiO1xyXG5pbXBvcnQgeyBOekljb25Nb2R1bGUgfSBmcm9tIFwibmctem9ycm8tYW50ZC9pY29uXCI7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIHNlbGVjdG9yOiAnYXBwLWxheW91dC1pdGVtJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vbGF5b3V0LWl0ZW0uY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2xheW91dC1pdGVtLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgaW1wb3J0czogW1xyXG4gICAgQ29tbW9uTW9kdWxlLCBOekNvbGxhcHNlTW9kdWxlLCBOeklucHV0TW9kdWxlLCBOeklucHV0TnVtYmVyTW9kdWxlLE56Q2FyZE1vZHVsZSxcclxuICAgIE56VGFic01vZHVsZSxTb3J0YWJsZWpzTW9kdWxlLE56R3JpZE1vZHVsZSxOekljb25Nb2R1bGUsXHJcbiAgICAgRGVzaWduRm9ybU5vZGVDb21wb25lbnRdXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBMYXlvdXRJdGVtQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcclxuICBASW5wdXQoKSByZWNvcmQ6IGFueTtcclxuICBASW5wdXQoKSBjb25maWc6IGFueTtcclxuICBASW5wdXQoKSBzZWxlY3RJdGVtOiBhbnk7XHJcblxyXG4gIEBPdXRwdXQoKSByZWFkb25seSBoYW5kbGVDb2xBZGQ6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG4gIEBPdXRwdXQoKSByZWFkb25seSBoYW5kbGVTZWxlY3RJdGVtID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG4gIEBPdXRwdXQoKSByZWFkb25seSBoYW5kbGVDb3B5ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG4gIEBPdXRwdXQoKSByZWFkb25seSBoYW5kbGVEZWxldGUgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcblxyXG4gIF9jYWhjZToge1trZXk6IHN0cmluZ106IE9wdGlvbnN9ID0ge1xyXG4gIH1cclxuXHJcbiAgY29uc3RydWN0b3IoXHJcbiAgKSB7XHJcbiAgfVxyXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcclxuICB9XHJcblxyXG4gIGdlbk9wdGlvbnMoY29sSXRlbSwgaW5kZXgpOiBPcHRpb25zIHtcclxuICAgIGlmICghdGhpcy5fY2FoY2VbaW5kZXhdKSB7XHJcbiAgICAgIHRoaXMuX2NhaGNlW2luZGV4XSA9IFxyXG4gICAgICB7XHJcbiAgICAgICAgZ3JvdXA6ICdkcmFnZ2FibGUtYm94JyxcclxuICAgICAgICBoYW5kbGU6ICcuZHJhZy1tb3ZlJyxcclxuICAgICAgICBvbkFkZDogKGV2dCkgPT4ge1xyXG4gICAgICAgICAgdGhpcy5vbkRyb3Aoe1xyXG4gICAgICAgICAgICBldnQsIGNvbHVtbnM6IGNvbEl0ZW0ubGlzdFxyXG4gICAgICAgICAgfSlcclxuICAgICAgICB9IFxyXG4gICAgICB9XHJcbiAgICB9XHJcbiAgICBjb25zdCBvcHRpb25zID0gdGhpcy5fY2FoY2VbaW5kZXhdXHJcbiAgICAgIHJldHVybiB7XHJcbiAgICAgICAgLi4ub3B0aW9uc1xyXG4gICAgICB9XHJcbiAgfVxyXG5cclxuICBvbkRyb3AoZXZ0KSB7XHJcbiAgICAvL2RlYnVnZ2VyXHJcbiAgICB0aGlzLmhhbmRsZUNvbEFkZC5lbWl0KFxyXG4gICAgICBldnQsIFxyXG4gICAgKVxyXG4gIH1cclxuXHJcbiAgb25EcmFnRHJvcCgkZXZlbnQpIHtcclxuICAgIC8vdGhpcy5pdGVtRHJvcC5lbWl0KCRldmVudClcclxuICB9XHJcblxyXG4gIGhhbmRsZUNvcHlGbigkZXZlbnQ6IEV2ZW50KSB7XHJcbiAgICAkZXZlbnQuc3RvcFByb3BhZ2F0aW9uKClcclxuICAgIHRoaXMuaGFuZGxlQ29weS5lbWl0KClcclxuICB9ICBcclxuICBoYW5kbGVEZWxldGVGbigkZXZlbnQ6IEV2ZW50KSB7XHJcbiAgICAkZXZlbnQuc3RvcFByb3BhZ2F0aW9uKClcclxuICAgIHRoaXMuaGFuZGxlRGVsZXRlLmVtaXQoKVxyXG4gIH1cclxuXHJcbiAgaGFuZGxlRm9ybU5vZGVEZWxldGUoJGV2ZW50KSB7XHJcbiAgICB0aGlzLmhhbmRsZURlbGV0ZS5lbWl0KCRldmVudClcclxuICB9XHJcblxyXG4gIGhhbmRsZVNlbGVjdEl0ZW1BbmRTdG9wKCRldmVudCkge1xyXG4gICAgJGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpXHJcbiAgICB0aGlzLmhhbmRsZVNlbGVjdEl0ZW0uZW1pdCh0aGlzLnJlY29yZClcclxuICB9XHJcblxyXG4gIGhpZGRlbkRlbGV0ZSgpIHtcclxuICAgIGlmIChbLy9cImJhdGNoXCIsXHJcbiAgICAvL1wiY2FyZFwiLFxyXG4gICAgXCJ0YWJzXCIsXHJcbiAgICBcImdyaWRcIixcclxuICAgICdjb2xsYXBzZScsXHJcbiAgICBcInRhYmxlXCJdLmluY2x1ZGVzKHRoaXMucmVjb3JkLnR5cGUpKSB7XHJcbiAgICAgIHJldHVybiB0aGlzLnJlY29yZC5jb2x1bW5zLnNvbWUoY29sID0+IGNvbC5saXN0Lmxlbmd0aCA+IDApXHJcbiAgICB9IGVsc2UgaWYgKFxyXG4gICAgICBbJ2JhdGNoJywgJ2NhcmQnLCAnYmxvY2snXS5pbmNsdWRlcyh0aGlzLnJlY29yZC50eXBlKSkge1xyXG4gICAgICByZXR1cm4gdGhpcy5yZWNvcmQubGlzdC5sZW5ndGggPiAwXHJcbiAgICB9XHJcbiAgfVxyXG59IiwiPGRpdiBbbmdTd2l0Y2hdPVwicmVjb3JkLnR5cGVcIj5cclxuICA8bmctY29udGFpbmVyICpuZ1N3aXRjaENhc2U9XCIndGFicydcIj5cclxuICAgIDxkaXYgW25nQ2xhc3NdPVwiWydncmlkLWJveCcsIHJlY29yZC5rZXkgPT09IHNlbGVjdEl0ZW0ua2V5ID8gJ2FjdGl2ZScgOiAndW5hY3RpdmF0ZWQnXVwiXHJcbiAgICAgIChjbGljayk9XCJoYW5kbGVTZWxlY3RJdGVtQW5kU3RvcCgkZXZlbnQpXCI+XHJcbiAgICAgIDxuei10YWJzZXQgY2xhc3M9XCJncmlkLXJvd1wiIFtuelRhYkJhckd1dHRlcl09XCJyZWNvcmQub3B0aW9ucy50YWJCYXJHdXR0ZXJcIiBbbnpUeXBlXT1cInJlY29yZC5vcHRpb25zLnR5cGVcIlxyXG4gICAgICAgIFtuelNpemVdPVwicmVjb3JkLm9wdGlvbnMuc2l6ZVwiIFtuelRhYlBvc2l0aW9uXT1cInJlY29yZC5vcHRpb25zLnRhYlBvc2l0aW9uXCJcclxuICAgICAgICBbbnpBbmltYXRlZF09XCJyZWNvcmQub3B0aW9ucy5hbmltYXRlZFwiPlxyXG4gICAgICAgIDxuei10YWIgKm5nRm9yPVwibGV0IGNvbEl0ZW0gb2YgcmVjb3JkLmNvbHVtbnM7IGluZGV4IGFzIGlcIiBbbnpUaXRsZV09XCJjb2xJdGVtLmxhYmVsXCI+XHJcbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiZ3JpZC1jb2xcIj5cclxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImRyYWdnYWJsZS1ib3hcIj5cclxuICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwibGlzdC1tYWluXCIgW3NvcnRhYmxlanNdPVwiY29sSXRlbS5saXN0XCIgW3NvcnRhYmxlanNPcHRpb25zXT1cImdlbk9wdGlvbnMoY29sSXRlbSwgaSlcIj5cclxuICAgICAgICAgICAgICAgIDxhcHAtbGF5b3V0LWl0ZW0gY2xhc3M9XCJkcmFnLW1vdmVcIiAqbmdGb3I9XCJsZXQgc3ViSXRlbSBvZiBjb2xJdGVtLmxpc3RcIiBbcmVjb3JkXT1cInN1Ykl0ZW1cIlxyXG4gICAgICAgICAgICAgICAgICBbc2VsZWN0SXRlbV09XCJzZWxlY3RJdGVtXCIgW2NvbmZpZ109XCJjb25maWdcIiBcclxuICAgICAgICAgICAgICAgICAgKGl0ZW1Ecm9wKT1cIm9uRHJhZ0Ryb3AoJGV2ZW50KVwiIChoYW5kbGVEZWxldGUpPVwiaGFuZGxlRGVsZXRlLmVtaXQoJGV2ZW50KVwiXHJcbiAgICAgICAgICAgICAgICAgIChoYW5kbGVDb2xBZGQpPVwiaGFuZGxlQ29sQWRkLmVtaXQoJGV2ZW50KVwiXHJcbiAgICAgICAgICAgICAgICAgIChoYW5kbGVDb3B5KT1cImhhbmRsZUNvcHkuZW1pdCgkZXZlbnQpXCIgKGhhbmRsZVNlbGVjdEl0ZW0pPVwiaGFuZGxlU2VsZWN0SXRlbS5lbWl0KCRldmVudClcIj5cclxuICAgICAgICAgICAgICAgIDwvYXBwLWxheW91dC1pdGVtPlxyXG4gICAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDwvbnotdGFiPlxyXG4gICAgICA8L256LXRhYnNldD5cclxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImNvcHlBbmREZWxldGVcIj48L25nLWNvbnRhaW5lcj5cclxuICAgIDwvZGl2PlxyXG4gIDwvbmctY29udGFpbmVyPlxyXG4gIDxuZy1jb250YWluZXIgKm5nU3dpdGNoQ2FzZT1cIidjYXJkJ1wiPlxyXG4gICAgPGRpdiBbbmdDbGFzc109XCJbJ2dyaWQtYm94JywgcmVjb3JkLmtleSA9PT0gc2VsZWN0SXRlbS5rZXkgPyAnYWN0aXZlJyA6ICd1bmFjdGl2YXRlZCddXCJcclxuICAgICAgKGNsaWNrKT1cImhhbmRsZVNlbGVjdEl0ZW1BbmRTdG9wKCRldmVudClcIj5cclxuICAgICAgPG56LWNhcmQgY2xhc3M9XCJncmlkLXJvd1wiIFtuelRpdGxlXT1cIm56Q2FyZFRpdGxlXCI+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImdyaWQtY29sXCI+XHJcbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiZHJhZ2dhYmxlLWJveFwiPlxyXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwibGlzdC1tYWluXCIgW3NvcnRhYmxlanNdPVwicmVjb3JkLmxpc3RcIiBbc29ydGFibGVqc09wdGlvbnNdPVwiZ2VuT3B0aW9ucyhyZWNvcmQsIDApXCI+XHJcbiAgICAgICAgICAgICAgPGFwcC1sYXlvdXQtaXRlbSBjbGFzcz1cImRyYWctbW92ZVwiICpuZ0Zvcj1cImxldCBzdWJJdGVtIG9mIHJlY29yZC5saXN0XCIgW3JlY29yZF09XCJzdWJJdGVtXCJcclxuICAgICAgICAgICAgICAgIFtzZWxlY3RJdGVtXT1cInNlbGVjdEl0ZW1cIiBbY29uZmlnXT1cImNvbmZpZ1wiIFxyXG4gICAgICAgICAgICAgICAgKGl0ZW1Ecm9wKT1cIm9uRHJhZ0Ryb3AoJGV2ZW50KVwiIChoYW5kbGVEZWxldGUpPVwiaGFuZGxlRGVsZXRlLmVtaXQoJGV2ZW50KVwiXHJcbiAgICAgICAgICAgICAgICAoaGFuZGxlQ29weSk9XCJoYW5kbGVDb3B5LmVtaXQoJGV2ZW50KVwiIChoYW5kbGVTZWxlY3RJdGVtKT1cImhhbmRsZVNlbGVjdEl0ZW0uZW1pdCgkZXZlbnQpXCI+XHJcbiAgICAgICAgICAgICAgPC9hcHAtbGF5b3V0LWl0ZW0+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgIDwvbnotY2FyZD5cclxuICAgICAgPG5nLXRlbXBsYXRlICNuekNhcmRUaXRsZT5cclxuICAgICAgICA8ZGl2IHN0eWxlPVwid2hpdGUtc3BhY2U6IG5vcm1hbDtcIj57e3JlY29yZC5sYWJlbH19PC9kaXY+XHJcbiAgICAgIDwvbmctdGVtcGxhdGU+XHJcbiAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjb3B5QW5kRGVsZXRlXCI+PC9uZy1jb250YWluZXI+XHJcbiAgICA8L2Rpdj5cclxuICA8L25nLWNvbnRhaW5lcj5cclxuICA8bmctY29udGFpbmVyICpuZ1N3aXRjaENhc2U9XCInYmxvY2snXCI+XHJcbiAgICA8ZGl2IFtuZ0NsYXNzXT1cIlsnZ3JpZC1ib3gnLCByZWNvcmQua2V5ID09PSBzZWxlY3RJdGVtLmtleSA/ICdhY3RpdmUnIDogJ3VuYWN0aXZhdGVkJ11cIlxyXG4gICAgICAoY2xpY2spPVwiaGFuZGxlU2VsZWN0SXRlbUFuZFN0b3AoJGV2ZW50KVwiPlxyXG4gICAgICA8ZGl2IGNsYXNzPVwiZ3JpZC1yb3dcIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiZ3JpZC1jb2xcIj5cclxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJkcmFnZ2FibGUtYm94XCI+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJsaXN0LW1haW5cIiBbc29ydGFibGVqc109XCJyZWNvcmQubGlzdFwiIFtzb3J0YWJsZWpzT3B0aW9uc109XCJnZW5PcHRpb25zKHJlY29yZCwgMClcIj5cclxuICAgICAgICAgICAgICA8YXBwLWxheW91dC1pdGVtIGNsYXNzPVwiZHJhZy1tb3ZlXCIgKm5nRm9yPVwibGV0IHN1Ykl0ZW0gb2YgcmVjb3JkLmxpc3RcIiBbcmVjb3JkXT1cInN1Ykl0ZW1cIlxyXG4gICAgICAgICAgICAgICAgW3NlbGVjdEl0ZW1dPVwic2VsZWN0SXRlbVwiIFtjb25maWddPVwiY29uZmlnXCIgXHJcbiAgICAgICAgICAgICAgICAoaXRlbURyb3ApPVwib25EcmFnRHJvcCgkZXZlbnQpXCIgKGhhbmRsZURlbGV0ZSk9XCJoYW5kbGVEZWxldGUuZW1pdCgkZXZlbnQpXCJcclxuICAgICAgICAgICAgICAgIChoYW5kbGVDb3B5KT1cImhhbmRsZUNvcHkuZW1pdCgkZXZlbnQpXCIgKGhhbmRsZVNlbGVjdEl0ZW0pPVwiaGFuZGxlU2VsZWN0SXRlbS5lbWl0KCRldmVudClcIj5cclxuICAgICAgICAgICAgICA8L2FwcC1sYXlvdXQtaXRlbT5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgPC9kaXY+XHJcbiAgICAgIDxuZy10ZW1wbGF0ZSAjbnpDYXJkVGl0bGU+XHJcbiAgICAgICAgPGRpdiBzdHlsZT1cIndoaXRlLXNwYWNlOiBub3JtYWw7XCI+e3tyZWNvcmQubGFiZWx9fTwvZGl2PlxyXG4gICAgICA8L25nLXRlbXBsYXRlPlxyXG4gICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiY29weUFuZERlbGV0ZVwiPjwvbmctY29udGFpbmVyPlxyXG4gICAgPC9kaXY+XHJcbiAgPC9uZy1jb250YWluZXI+XHJcbiAgICA8bmctY29udGFpbmVyICpuZ1N3aXRjaENhc2U9XCInZ3JpZCdcIj5cclxuICAgICAgPGRpdiBbbmdDbGFzc109XCJbJ2dyaWQtYm94JywgcmVjb3JkLmtleSA9PT0gc2VsZWN0SXRlbS5rZXkgPyAnYWN0aXZlJyA6ICd1bmFjdGl2YXRlZCddXCJcclxuICAgICAgICAoY2xpY2spPVwiaGFuZGxlU2VsZWN0SXRlbUFuZFN0b3AoJGV2ZW50KVwiPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJncmlkLXJvd1wiICBuei1yb3cgW256R3V0dGVyXT1cInJlY29yZC5vcHRpb25zLmd1dHRlclwiPlxyXG4gICAgICAgICAgPGRpdiAgY2xhc3M9XCJncmlkLWNvbFwiICpuZ0Zvcj1cImxldCBjb2xJdGVtIG9mIHJlY29yZC5jb2x1bW5zOyBpbmRleCBhcyBpXCIgbnotY29sIFtuelNwYW5dPVwiY29sSXRlbS5zcGFuIHx8IDBcIj5cclxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImRyYWdnYWJsZS1ib3hcIj5cclxuICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwibGlzdC1tYWluXCIgW3NvcnRhYmxlanNdPVwiY29sSXRlbS5saXN0XCJcclxuICAgICAgICAgICAgICAgIFtzb3J0YWJsZWpzT3B0aW9uc109XCJnZW5PcHRpb25zKGNvbEl0ZW0sIGkpXCI+XHJcbiAgICAgICAgICAgICAgICA8YXBwLWxheW91dC1pdGVtIGNsYXNzPVwiZHJhZy1tb3ZlXCIgKm5nRm9yPVwibGV0IHN1Ykl0ZW0gb2YgY29sSXRlbS5saXN0XCIgXHJcbiAgICAgICAgICAgICAgICAgIFtyZWNvcmRdPVwic3ViSXRlbVwiIFxyXG4gICAgICAgICAgICAgICAgICBbY29uZmlnXT1cImNvbmZpZ1wiXHJcbiAgICAgICAgICAgICAgICAgIFtzZWxlY3RJdGVtXT1cInNlbGVjdEl0ZW1cIiBcclxuICAgICAgICAgICAgICAgICAgKGl0ZW1Ecm9wKT1cIm9uRHJhZ0Ryb3AoJGV2ZW50KVwiXHJcbiAgICAgICAgICAgICAgICAgIChoYW5kbGVDb2xBZGQpPVwiaGFuZGxlQ29sQWRkLmVtaXQoJGV2ZW50KVwiXHJcbiAgICAgICAgICAgICAgICAgIChoYW5kbGVEZWxldGUpPVwiaGFuZGxlRm9ybU5vZGVEZWxldGUoJGV2ZW50KVwiXHJcbiAgICAgICAgICAgICAgICAgIChoYW5kbGVTZWxlY3RJdGVtKT1cImhhbmRsZVNlbGVjdEl0ZW0uZW1pdCgkZXZlbnQpXCI+XHJcbiAgICAgICAgICAgICAgICA8L2FwcC1sYXlvdXQtaXRlbT5cclxuICAgICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiY29weUFuZERlbGV0ZVwiPjwvbmctY29udGFpbmVyPlxyXG4gICAgICA8L2Rpdj5cclxuICAgIDwvbmctY29udGFpbmVyPlxyXG4gICAgPG5nLWNvbnRhaW5lciAqbmdTd2l0Y2hDYXNlPVwiJ2NvbGxhcHNlJ1wiPlxyXG4gICAgICA8ZGl2IFtuZ0NsYXNzXT1cIlsnZ3JpZC1ib3gnLCByZWNvcmQua2V5ID09PSBzZWxlY3RJdGVtLmtleSA/ICdhY3RpdmUnIDogJ3VuYWN0aXZhdGVkJ11cIiBcclxuICAgICAgICAoY2xpY2spPVwiaGFuZGxlU2VsZWN0SXRlbUFuZFN0b3AoJGV2ZW50KVwiPlxyXG4gICAgICAgIDxuei1jb2xsYXBzZSBjbGFzcz1cImdyaWQtcm93XCJcclxuICAgICAgICAgIFtuekFjY29yZGlvbl09XCJyZWNvcmQub3B0aW9ucy5hY2NvcmRpb25cIlxyXG4gICAgICAgICAgW256Qm9yZGVyZWRdPVwicmVjb3JkLm9wdGlvbnMuYm9yZGVyZWRcIlxyXG4gICAgICAgICAgW256R2hvc3RdPVwicmVjb3JkLm9wdGlvbnMuZ2hvc3RcIlxyXG4gICAgICAgICAgW256RXhwYW5kSWNvblBvc2l0aW9uXT1cInJlY29yZC5vcHRpb25zLmV4cGFuZEljb25Qb3NpdGlvblwiXHJcbiAgICAgICAgPlxyXG4gICAgICAgICAgPG56LWNvbGxhcHNlLXBhbmVsIFtuekFjdGl2ZV09XCJ0cnVlXCIgKm5nRm9yPVwibGV0IGNvbEl0ZW0gb2YgcmVjb3JkLmNvbHVtbnM7IGluZGV4IGFzIGlcIiBbbnpIZWFkZXJdPVwiY29sSXRlbS5sYWJlbFwiPlxyXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZ3JpZC1jb2xcIj5cclxuICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZHJhZ2dhYmxlLWJveFwiPlxyXG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImxpc3QtbWFpblwiXHJcbiAgICAgICAgICAgICAgICBbc29ydGFibGVqc109XCJjb2xJdGVtLmxpc3RcIiBbc29ydGFibGVqc09wdGlvbnNdPVwiZ2VuT3B0aW9ucyhjb2xJdGVtLCBpKVwiPlxyXG4gICAgICAgICAgICAgICAgIDxhcHAtbGF5b3V0LWl0ZW0gXHJcbiAgICAgICAgICAgICAgICAgIGNsYXNzPVwiZHJhZy1tb3ZlXCIgKm5nRm9yPVwibGV0IHN1Ykl0ZW0gb2YgY29sSXRlbS5saXN0XCJcclxuICAgICAgICAgICAgICAgICAgIFtyZWNvcmRdPVwic3ViSXRlbVwiIFxyXG4gICAgICAgICAgICAgICAgICAgW3NlbGVjdEl0ZW1dPVwic2VsZWN0SXRlbVwiXHJcbiAgICAgICAgICAgICAgICAgICBbY29uZmlnXT1cImNvbmZpZ1wiXHJcbiAgICAgICAgICAgICAgICAgICAoaXRlbURyb3ApPVwib25EcmFnRHJvcCgkZXZlbnQpXCJcclxuICAgICAgICAgICAgICAgICAgIChoYW5kbGVDb2xBZGQpPVwiaGFuZGxlQ29sQWRkLmVtaXQoJGV2ZW50KVwiXHJcbiAgICAgICAgICAgICAgICAgICAoaGFuZGxlRGVsZXRlKT1cImhhbmRsZURlbGV0ZS5lbWl0KCRldmVudClcIlxyXG4gICAgICAgICAgICAgICAgICAgKGhhbmRsZUNvcHkpPVwiaGFuZGxlQ29weS5lbWl0KCRldmVudClcIlxyXG4gICAgICAgICAgICAgICAgICAgKGhhbmRsZVNlbGVjdEl0ZW0pPVwiaGFuZGxlU2VsZWN0SXRlbS5lbWl0KCRldmVudClcIj5cclxuICAgICAgICAgICAgICAgICA8L2FwcC1sYXlvdXQtaXRlbT5cclxuICAgICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgPC9uei1jb2xsYXBzZS1wYW5lbD5cclxuICAgICAgICA8L256LWNvbGxhcHNlPlxyXG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjb3B5QW5kRGVsZXRlXCI+PC9uZy1jb250YWluZXI+XHJcbiAgICAgIDwvZGl2PlxyXG4gICAgPC9uZy1jb250YWluZXI+XHJcbiAgICA8bmctY29udGFpbmVyICpuZ1N3aXRjaERlZmF1bHQ+XHJcbiAgICAgIDxhcHAtZGVzaWduLWZvcm0tbm9kZSBjbGFzcz1cImRyYWctbW92ZVwiIFxyXG4gICAgICAgIFtzZWxlY3RJdGVtXT1cInNlbGVjdEl0ZW1cIlxyXG4gICAgICAgIFtjb25maWddPVwiY29uZmlnXCJcclxuICAgICAgICBbcmVjb3JkXT1cInJlY29yZFwiXHJcbiAgICAgICAgKGhhbmRsZURlbGV0ZSk9XCJoYW5kbGVGb3JtTm9kZURlbGV0ZSgkZXZlbnQpXCJcclxuICAgICAgICAoaGFuZGxlU2VsZWN0SXRlbSk9XCJoYW5kbGVTZWxlY3RJdGVtLmVtaXQoJGV2ZW50KVwiXHJcbiAgICAgICAgKGhhbmRsZUNvcHkpPVwiaGFuZGxlQ29weS5lbWl0KCRldmVudClcIlxyXG4gICAgICA+PC9hcHAtZGVzaWduLWZvcm0tbm9kZT5cclxuICAgIDwvbmctY29udGFpbmVyPlxyXG48L2Rpdj5cclxuPG5nLXRlbXBsYXRlICNjb3B5QW5kRGVsZXRlPlxyXG4gIDwhLS0gPGRpdiBbbmdDbGFzc109XCJbJ2NvcHknLCByZWNvcmQua2V5ID09PSBzZWxlY3RJdGVtLmtleSA/ICdhY3RpdmUnIDogJ3VuYWN0aXZhdGVkJ11cIiBcclxuICAoY2xpY2spPVwiaGFuZGxlQ29weUZuKCRldmVudClcIj5cclxuICAgIDxpIG56LWljb24gbnpUeXBlPVwiY29weVwiIG56VGhlbWU9XCJvdXRsaW5lXCI+PC9pPlxyXG4gIDwvZGl2PiAtLT5cclxuICA8ZGl2IFtoaWRkZW5dPVwiaGlkZGVuRGVsZXRlKClcIiBbbmdDbGFzc109XCJbJ2RlbGV0ZScsIHJlY29yZC5rZXkgPT09IHNlbGVjdEl0ZW0ua2V5ID8gJ2FjdGl2ZScgOiAndW5hY3RpdmF0ZWQnXVwiXHJcbiAgICAoY2xpY2spPVwiaGFuZGxlRGVsZXRlRm4oJGV2ZW50KVwiPlxyXG4gICAgPGkgbnotaWNvbiBuelR5cGU9XCJkZWxldGVcIiBuelRoZW1lPVwib3V0bGluZVwiPjwvaT5cclxuICA8L2Rpdj5cclxuPC9uZy10ZW1wbGF0ZT4iXX0=