ngx-antd-form-builder/esm2022/lib/components/design-form-node/design-form-node.component.mjs

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

import { Component, Input, Output, EventEmitter } from "@angular/core";
import { DesignFormItemComponent } from "../design-form-item/design-form-item.component";
import { CommonModule } from "@angular/common";
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/icon";
export class DesignFormNodeComponent {
    constructor() {
        this.hideModel = false;
        this.handleSelectItem = new EventEmitter();
        this.handleCopy = new EventEmitter();
        this.handleDelete = new EventEmitter();
    }
    handleSelectItemFn($event) {
        $event.stopPropagation();
        this.handleSelectItem.emit(this.record);
    }
    handleCopyFn($event) {
        $event.stopPropagation();
        this.handleCopy.emit(this.record);
    }
    handleDeleteFn($event) {
        $event.stopPropagation();
        this.handleDelete.emit(this.record);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DesignFormNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: DesignFormNodeComponent, isStandalone: true, selector: "app-design-form-node", inputs: { selectItem: "selectItem", record: "record", config: "config", hideModel: "hideModel" }, outputs: { handleSelectItem: "handleSelectItem", handleCopy: "handleCopy", handleDelete: "handleDelete" }, ngImport: i0, template: "<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>", styles: [".drag-move-box{position:relative;box-sizing:border-box;padding:8px;overflow:hidden;transition:all .3s;min-height:36px}.drag-move-box:hover{background:#13c2c233}.drag-move-box:before{content:\"\";height:5px;width:100%;background:#13c2c2;position:absolute;top:0;right:-100%;transition:all .3s}.drag-move-box.active{background:#13c2c233;outline-offset:0}.drag-move-box.active:before{right:0}.drag-move-box .form-item-box{position:relative;box-sizing:border-box;word-wrap:break-word}.drag-move-box .form-item-box:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:888}.drag-move-box .form-item-box .ant-form-item{margin:0;padding-bottom:6px}.drag-move-box .copy,.drag-move-box .delete{position:absolute;top:0;width:30px;height:30px;line-height:30px;text-align:center;color:#fff;z-index:989;transition:all .3s}.drag-move-box .copy.unactivated,.drag-move-box .delete.unactivated{opacity:0;pointer-events:none}.drag-move-box .copy.active,.drag-move-box .delete.active{opacity:1}.drag-move-box .copy{border-radius:0 0 0 8px;right:30px;background:#13c2c2}.drag-move-box .delete{right:0;background:#13c2c2}\n"], dependencies: [{ kind: "component", type: DesignFormItemComponent, selector: "app-design-form-item", inputs: ["record", "formConfig", "form"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i2.NzIconDirective, selector: "[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DesignFormNodeComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'app-design-form-node', imports: [DesignFormItemComponent, CommonModule, NzIconModule], template: "<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>", styles: [".drag-move-box{position:relative;box-sizing:border-box;padding:8px;overflow:hidden;transition:all .3s;min-height:36px}.drag-move-box:hover{background:#13c2c233}.drag-move-box:before{content:\"\";height:5px;width:100%;background:#13c2c2;position:absolute;top:0;right:-100%;transition:all .3s}.drag-move-box.active{background:#13c2c233;outline-offset:0}.drag-move-box.active:before{right:0}.drag-move-box .form-item-box{position:relative;box-sizing:border-box;word-wrap:break-word}.drag-move-box .form-item-box:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:888}.drag-move-box .form-item-box .ant-form-item{margin:0;padding-bottom:6px}.drag-move-box .copy,.drag-move-box .delete{position:absolute;top:0;width:30px;height:30px;line-height:30px;text-align:center;color:#fff;z-index:989;transition:all .3s}.drag-move-box .copy.unactivated,.drag-move-box .delete.unactivated{opacity:0;pointer-events:none}.drag-move-box .copy.active,.drag-move-box .delete.active{opacity:1}.drag-move-box .copy{border-radius:0 0 0 8px;right:30px;background:#13c2c2}.drag-move-box .delete{right:0;background:#13c2c2}\n"] }]
        }], ctorParameters: () => [], propDecorators: { selectItem: [{
                type: Input
            }], record //="record"
        : [{
                type: Input
            }], config //="config"
        : [{
                type: Input
            }], hideModel: [{
                type: Input
            }], handleSelectItem: [{
                type: Output
            }], handleCopy: [{
                type: Output
            }], handleDelete: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVzaWduLWZvcm0tbm9kZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtYW50ZC1mb3JtLWJ1aWxkZXIvc3JjL2xpYi9jb21wb25lbnRzL2Rlc2lnbi1mb3JtLW5vZGUvZGVzaWduLWZvcm0tbm9kZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtYW50ZC1mb3JtLWJ1aWxkZXIvc3JjL2xpYi9jb21wb25lbnRzL2Rlc2lnbi1mb3JtLW5vZGUvZGVzaWduLWZvcm0tbm9kZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFvQixNQUFNLGVBQWUsQ0FBQztBQUN6RixPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSxnREFBZ0QsQ0FBQztBQUN6RixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLG9CQUFvQixDQUFDOzs7O0FBU2xELE1BQU0sT0FBTyx1QkFBdUI7SUFRbEM7UUFKUyxjQUFTLEdBQUcsS0FBSyxDQUFBO1FBQ1AscUJBQWdCLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUN0QyxlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUNoQyxpQkFBWSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7SUFFbEQsQ0FBQztJQUVKLGtCQUFrQixDQUFDLE1BQWE7UUFDOUIsTUFBTSxDQUFDLGVBQWUsRUFBRSxDQUFBO1FBQ3hCLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFBO0lBQ3pDLENBQUM7SUFDRCxZQUFZLENBQUMsTUFBYTtRQUN4QixNQUFNLENBQUMsZUFBZSxFQUFFLENBQUE7UUFDeEIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFBO0lBQ25DLENBQUM7SUFDRCxjQUFjLENBQUMsTUFBYTtRQUMxQixNQUFNLENBQUMsZUFBZSxFQUFFLENBQUE7UUFDeEIsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFBO0lBQ3JDLENBQUM7K0dBdEJVLHVCQUF1QjttR0FBdkIsdUJBQXVCLDZSQ1pwQywrdUJBdUJNLG1xQ0RiTSx1QkFBdUIsMEdBQUMsWUFBWSxnT0FBQyxZQUFZOzs0RkFFaEQsdUJBQXVCO2tCQVBuQyxTQUFTO2lDQUNJLElBQUksWUFDTixzQkFBc0IsV0FHdkIsQ0FBQyx1QkFBdUIsRUFBQyxZQUFZLEVBQUMsWUFBWSxDQUFDO3dEQUduRCxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLE1BQU0sQ0FBQyxXQUFXOztzQkFBMUIsS0FBSztnQkFDRyxNQUFNLENBQUMsV0FBVzs7c0JBQTFCLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDYSxnQkFBZ0I7c0JBQWxDLE1BQU07Z0JBQ1ksVUFBVTtzQkFBNUIsTUFBTTtnQkFDWSxZQUFZO3NCQUE5QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIEluamVjdCwgT3B0aW9uYWwgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xyXG5pbXBvcnQgeyBEZXNpZ25Gb3JtSXRlbUNvbXBvbmVudCB9IGZyb20gXCIuLi9kZXNpZ24tZm9ybS1pdGVtL2Rlc2lnbi1mb3JtLWl0ZW0uY29tcG9uZW50XCI7XHJcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gXCJAYW5ndWxhci9jb21tb25cIjtcclxuaW1wb3J0IHsgTnpJY29uTW9kdWxlIH0gZnJvbSBcIm5nLXpvcnJvLWFudGQvaWNvblwiO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBzZWxlY3RvcjogJ2FwcC1kZXNpZ24tZm9ybS1ub2RlJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vZGVzaWduLWZvcm0tbm9kZS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vZGVzaWduLWZvcm0tbm9kZS5jb21wb25lbnQuc2NzcyddLFxyXG4gIGltcG9ydHM6IFtEZXNpZ25Gb3JtSXRlbUNvbXBvbmVudCxDb21tb25Nb2R1bGUsTnpJY29uTW9kdWxlXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgRGVzaWduRm9ybU5vZGVDb21wb25lbnQge1xyXG4gIEBJbnB1dCgpIHNlbGVjdEl0ZW0gXHJcbiAgQElucHV0KCkgcmVjb3JkIC8vPVwicmVjb3JkXCJcclxuICBASW5wdXQoKSBjb25maWcgLy89XCJjb25maWdcIlxyXG4gIEBJbnB1dCgpIGhpZGVNb2RlbCA9IGZhbHNlXHJcbiAgQE91dHB1dCgpIHJlYWRvbmx5IGhhbmRsZVNlbGVjdEl0ZW0gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcbiAgQE91dHB1dCgpIHJlYWRvbmx5IGhhbmRsZUNvcHkgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcbiAgQE91dHB1dCgpIHJlYWRvbmx5IGhhbmRsZURlbGV0ZSA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuICBjb25zdHJ1Y3RvcihcclxuICApIHt9XHJcblxyXG4gIGhhbmRsZVNlbGVjdEl0ZW1GbigkZXZlbnQ6IEV2ZW50KSB7XHJcbiAgICAkZXZlbnQuc3RvcFByb3BhZ2F0aW9uKClcclxuICAgIHRoaXMuaGFuZGxlU2VsZWN0SXRlbS5lbWl0KHRoaXMucmVjb3JkKVxyXG4gIH0gXHJcbiAgaGFuZGxlQ29weUZuKCRldmVudDogRXZlbnQpIHtcclxuICAgICRldmVudC5zdG9wUHJvcGFnYXRpb24oKVxyXG4gICAgdGhpcy5oYW5kbGVDb3B5LmVtaXQodGhpcy5yZWNvcmQpXHJcbiAgfSAgXHJcbiAgaGFuZGxlRGVsZXRlRm4oJGV2ZW50OiBFdmVudCkge1xyXG4gICAgJGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpXHJcbiAgICB0aGlzLmhhbmRsZURlbGV0ZS5lbWl0KHRoaXMucmVjb3JkKVxyXG4gIH1cclxufSIsIjxkaXYgXHJcbiAgY2xhc3M9XCJkcmFnLW1vdmUtYm94XCIgXHJcbiAgW25nQ2xhc3NdPVwieydhY3RpdmUnOiByZWNvcmQua2V5ID09PSBzZWxlY3RJdGVtLmtleX1cIlxyXG4gIChjbGljayk9XCJoYW5kbGVTZWxlY3RJdGVtRm4oJGV2ZW50KVwiPlxyXG4gIDxkaXYgY2xhc3M9XCJmb3JtLWl0ZW0tYm94XCI+XHJcbiAgICA8YXBwLWRlc2lnbi1mb3JtLWl0ZW0gXHJcbiAgICAgIFtmb3JtQ29uZmlnXT1cImNvbmZpZ1wiXHJcbiAgICAgIFtyZWNvcmRdPVwicmVjb3JkXCJcclxuICAgID48L2FwcC1kZXNpZ24tZm9ybS1pdGVtPlxyXG4gIDwvZGl2PlxyXG4gICAgPGRpdlxyXG4gICAgICBbaGlkZGVuXT1cInRydWVcIlxyXG4gICAgICAgICpuZ0lmPVwiIWhpZGVNb2RlbFwiXHJcbiAgICAgICAgY2xhc3M9XCJzaG93LWtleS1ib3hcIlxyXG4gICAgICA+XHJcbiAgICAgIHt7cmVjb3JkLmxhYmVsICsgKHJlY29yZC5rZXkgPyAnLycgKyByZWNvcmQua2V5IDogJycpfX1cclxuICAgIDwvZGl2PlxyXG4gICAgPGRpdlxyXG4gICAgICBbbmdDbGFzc109XCJbJ2RlbGV0ZScsIHJlY29yZC5rZXkgPT09IHNlbGVjdEl0ZW0ua2V5ID8gJ2FjdGl2ZScgOiAndW5hY3RpdmF0ZWQnXVwiXHJcbiAgICAgIChjbGljayk9XCJoYW5kbGVEZWxldGVGbigkZXZlbnQpXCJcclxuICAgID5cclxuICAgICAgPGkgbnotaWNvbiBuelR5cGU9XCJkZWxldGVcIiBuelRoZW1lPVwib3V0bGluZVwiPjwvaT5cclxuICA8L2Rpdj5cclxuPC9kaXY+Il19