ngx-antd-form-builder
Version:
Simple Drag&Drop form builder using ng-zorro-antd
46 lines • 8.04 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { SortablejsModule } from '../../utils/sortablejs/sortablejs.module';
import { CommonModule } from '@angular/common';
import * as i0 from "@angular/core";
import * as i1 from "../../utils/sortablejs/sortablejs.directive";
import * as i2 from "@angular/common";
export class CollapseItemListComponent {
constructor() {
this.fields = [];
this.handleStart = new EventEmitter();
this.generateKey = new EventEmitter();
this._fields = [];
this.options = {
group: {
name: 'draggable-box',
pull: 'clone', put: false,
},
sort: false,
onStart: (event) => {
this.handleStart.emit(this._fields[event.oldIndex].type);
this.generateKey.emit({
list: this._fields,
index: event.oldIndex
});
}
};
}
ngOnChanges(changes) {
if (changes['fields']) {
this._fields = changes['fields'].currentValue;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CollapseItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CollapseItemListComponent, isStandalone: true, selector: "app-collapse-item-list", inputs: { fields: "fields" }, outputs: { handleStart: "handleStart", generateKey: "generateKey" }, usesOnChanges: true, ngImport: i0, template: "<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", styles: ["ul{padding:5px;list-style:none;display:flex;margin-bottom:0;flex-wrap:wrap}ul li{border:0;box-shadow:1px 0 #ccc,0 1px #ccc,1px 1px #ccc,1px 0 #ccc inset,0 1px #ccc inset;padding:8px 12px;width:calc(50% - 6px);margin:2.7px;height:36px;line-height:20px;cursor:move;border:1px solid transparent;border-radius:3px;transition:all .3s}\n"], dependencies: [{ kind: "ngmodule", type: SortablejsModule }, { kind: "directive", type: i1.SortablejsDirective, selector: "[sortablejs]", inputs: ["sortablejs", "sortablejsContainer", "sortablejsOptions", "sortablejsCloneFunction"], outputs: ["sortablejsInit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CollapseItemListComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'app-collapse-item-list', imports: [SortablejsModule, CommonModule], template: "<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", styles: ["ul{padding:5px;list-style:none;display:flex;margin-bottom:0;flex-wrap:wrap}ul li{border:0;box-shadow:1px 0 #ccc,0 1px #ccc,1px 1px #ccc,1px 0 #ccc inset,0 1px #ccc inset;padding:8px 12px;width:calc(50% - 6px);margin:2.7px;height:36px;line-height:20px;cursor:move;border:1px solid transparent;border-radius:3px;transition:all .3s}\n"] }]
}], ctorParameters: () => [], propDecorators: { fields: [{
type: Input
}], handleStart: [{
type: Output
}], generateKey: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sbGFwc2UtaXRlbS1saXN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1hbnRkLWZvcm0tYnVpbGRlci9zcmMvbGliL2NvbXBvbmVudHMvY29sbGFwc2UtaXRlbS1saXN0L2NvbGxhcHNlLWl0ZW0tbGlzdC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtYW50ZC1mb3JtLWJ1aWxkZXIvc3JjL2xpYi9jb21wb25lbnRzL2NvbGxhcHNlLWl0ZW0tbGlzdC9jb2xsYXBzZS1pdGVtLWxpc3QuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFhLE1BQU0sRUFBaUIsTUFBTSxlQUFlLENBQUM7QUFHakcsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sMENBQTBDLENBQUM7QUFDNUUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDOzs7O0FBUS9DLE1BQU0sT0FBTyx5QkFBeUI7SUFLcEM7UUFKUyxXQUFNLEdBQWlDLEVBQUUsQ0FBQTtRQUMvQixnQkFBVyxHQUFzQixJQUFJLFlBQVksRUFBRSxDQUFDO1FBQ3BELGdCQUFXLEdBQXNCLElBQUksWUFBWSxFQUFFLENBQUM7UUFDdkUsWUFBTyxHQUFpQyxFQUFFLENBQUE7UUFLMUMsWUFBTyxHQUFZO1lBQ2pCLEtBQUssRUFBRTtnQkFDTCxJQUFJLEVBQUcsZUFBZTtnQkFDdEIsSUFBSSxFQUFFLE9BQU8sRUFBRSxHQUFHLEVBQUUsS0FBSzthQUMxQjtZQUNELElBQUksRUFBRSxLQUFLO1lBQ1gsT0FBTyxFQUFFLENBQUMsS0FBb0IsRUFBRSxFQUFFO2dCQUNoQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxRQUFrQixDQUFDLENBQUMsSUFBSSxDQUFDLENBQUE7Z0JBQ2xFLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDO29CQUNwQixJQUFJLEVBQUUsSUFBSSxDQUFDLE9BQU87b0JBQ2xCLEtBQUssRUFBRSxLQUFLLENBQUMsUUFBUTtpQkFDdEIsQ0FBQyxDQUFBO1lBQ0osQ0FBQztTQUNGLENBQUM7SUFmRixDQUFDO0lBaUJELFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxJQUFJLE9BQU8sQ0FBQyxRQUFRLENBQUMsRUFBRSxDQUFDO1lBQ3RCLElBQUksQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFDLFFBQVEsQ0FBQyxDQUFDLFlBQVksQ0FBQTtRQUMvQyxDQUFDO0lBQ0gsQ0FBQzsrR0E1QlUseUJBQXlCO21HQUF6Qix5QkFBeUIsME1DWnRDLDhNQVFBLG9ZREVZLGdCQUFnQix5T0FBRSxZQUFZOzs0RkFFN0IseUJBQXlCO2tCQVByQyxTQUFTO2lDQUNJLElBQUksWUFDTix3QkFBd0IsV0FHekIsQ0FBQyxnQkFBZ0IsRUFBRSxZQUFZLENBQUM7d0RBR2hDLE1BQU07c0JBQWQsS0FBSztnQkFDYSxXQUFXO3NCQUE3QixNQUFNO2dCQUNZLFdBQVc7c0JBQTdCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uQ2hhbmdlcywgT3V0cHV0LCBTaW1wbGVDaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE9wdGlvbnMsIFNvcnRhYmxlRXZlbnQgfSBmcm9tICdzb3J0YWJsZWpzJztcclxuaW1wb3J0IHsgTmd4QW50ZEZvcm1CdWlsZGVyIH0gZnJvbSAnLi4vLi4vbmd4LWFudGQtZm9ybS1idWlsZGVyLmludGVyZmFjZSc7XHJcbmltcG9ydCB7IFNvcnRhYmxlanNNb2R1bGUgfSBmcm9tICcuLi8uLi91dGlscy9zb3J0YWJsZWpzL3NvcnRhYmxlanMubW9kdWxlJztcclxuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuQENvbXBvbmVudCh7XHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBzZWxlY3RvcjogJ2FwcC1jb2xsYXBzZS1pdGVtLWxpc3QnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9jb2xsYXBzZS1pdGVtLWxpc3QuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2NvbGxhcHNlLWl0ZW0tbGlzdC5jb21wb25lbnQuc2NzcyddLFxyXG4gIGltcG9ydHM6IFtTb3J0YWJsZWpzTW9kdWxlLCBDb21tb25Nb2R1bGVdXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBDb2xsYXBzZUl0ZW1MaXN0Q29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcclxuICBASW5wdXQoKSBmaWVsZHM6IE5neEFudGRGb3JtQnVpbGRlci5BbGxUeXBlW10gPSBbXVxyXG4gIEBPdXRwdXQoKSByZWFkb25seSBoYW5kbGVTdGFydDogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcbiAgQE91dHB1dCgpIHJlYWRvbmx5IGdlbmVyYXRlS2V5OiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuICBfZmllbGRzOiBOZ3hBbnRkRm9ybUJ1aWxkZXIuQWxsVHlwZVtdID0gW11cclxuICBjb25zdHJ1Y3RvcihcclxuICApIHtcclxuICB9XHJcblxyXG4gIG9wdGlvbnM6IE9wdGlvbnMgPSB7XHJcbiAgICBncm91cDoge1xyXG4gICAgICBuYW1lOiAgJ2RyYWdnYWJsZS1ib3gnLFxyXG4gICAgICBwdWxsOiAnY2xvbmUnLCBwdXQ6IGZhbHNlLFxyXG4gICAgfSxcclxuICAgIHNvcnQ6IGZhbHNlLFxyXG4gICAgb25TdGFydDogKGV2ZW50OiBTb3J0YWJsZUV2ZW50KSA9PiB7XHJcbiAgICAgIHRoaXMuaGFuZGxlU3RhcnQuZW1pdCh0aGlzLl9maWVsZHNbZXZlbnQub2xkSW5kZXggYXMgbnVtYmVyXS50eXBlKVxyXG4gICAgICB0aGlzLmdlbmVyYXRlS2V5LmVtaXQoe1xyXG4gICAgICAgIGxpc3Q6IHRoaXMuX2ZpZWxkcywgXHJcbiAgICAgICAgaW5kZXg6IGV2ZW50Lm9sZEluZGV4XHJcbiAgICAgIH0pXHJcbiAgICB9XHJcbiAgfTtcclxuICBcclxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XHJcbiAgICBpZiAoY2hhbmdlc1snZmllbGRzJ10pIHtcclxuICAgICAgdGhpcy5fZmllbGRzID0gY2hhbmdlc1snZmllbGRzJ10uY3VycmVudFZhbHVlXHJcbiAgICB9XHJcbiAgfVxyXG5cclxufVxyXG4iLCI8dWxcclxuICBbc29ydGFibGVqc109XCJfZmllbGRzXCIgW3NvcnRhYmxlanNPcHRpb25zXT1cIm9wdGlvbnNcIlxyXG4+XHJcbiAgPGxpIGNsYXNzPVwiZHJhZ2dhYmxlLWl0ZW1cIiAqbmdGb3I9XCJsZXQgdmFsIG9mIF9maWVsZHM7IGluZGV4IGFzIGlcIlxyXG4gICAgPlxyXG4gICAge3sgdmFsLmxhYmVsIH19XHJcbiAgICA8L2xpPlxyXG48L3VsPlxyXG4iXX0=