import { Component, Injector } from '@angular/core';
import { ComponentContextService } from '../../app-context/component-context.service';
import { ComponentBase } from '../../classes/base/component-base';
import { NotifierService } from '../../services/notifier.service';
export class FormBuilderComponent extends ComponentBase {
    constructor(_injector, _notifierService) {
        super(_injector);
        this._notifierService = _notifierService;
        this.controls = [];
    }
    ngOnInit() {
    }
    onDrop(evt) {
        this.controls.splice(evt.index, 0, {
            ten: new Date().toISOString()
        });
    }
}
FormBuilderComponent.decorators = [
    { type: Component, args: [{
                selector: 'app-form-builder',
                template: "<div class=\"form-builder\">\n    <div class=\"control-list\">\n        <div class=\"control-item\" dndDraggable>\n            123\n            <div dndHandle>HANDLE\n            </div>\n        </div>\n        <div class=\"control-item\" dndDraggable>\n            234\n            <div dndHandle>HANDLE\n            </div>\n        </div>\n    </div>\n    <div class=\"dynamic-form\">\n        <div dndDropzone class=\"p-grid drop-zone\" (dndDrop)=\"onDrop($event)\">\n            <div *ngIf=\"controls.length == 0\">K\u00E9o th\u1EA3 v\u00E0o \u0111\u00E2y</div>\n            <div *ngFor=\"let item of controls; index as i\" class=\"control p-md-6\">\n                {{item.ten}}\n            </div>\n            <div class=\"placeholder control p-md-6\" dndPlaceholderRef>\n                placeholder\n            </div>\n        </div>\n    </div>\n</div>",
                providers: [ComponentContextService],
                styles: [".form-builder{display:flex;height:400px}.form-builder .control-list{flex:0 0 250px}.form-builder .control-list .control-item{padding:1em;margin-bottom:1em;border:1px solid #eee}.form-builder .dynamic-form{flex:1 1}.form-builder .dynamic-form .drop-zone{min-height:100px;padding:1rem;border:1px dotted #eee;margin:0 0 0 .5rem}.form-builder .dynamic-form .drop-zone .control{padding:.5rem;background:#eee}.form-builder .dynamic-form .drop-zone .placeholder{border:1px dotted #eee}"]
            },] }
];
FormBuilderComponent.ctorParameters = () => [
    { type: Injector },
    { type: NotifierService }
];
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1idWlsZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3RueC1zaGFyZWQvc3JjL2xpYi9jb21wb25lbnRzL2Zvcm0tYnVpbGRlci9mb3JtLWJ1aWxkZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBQzVELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDZDQUE2QyxDQUFDO0FBQ3RGLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxtQ0FBbUMsQ0FBQztBQUNsRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFRbEUsTUFBTSxPQUFPLG9CQUFxQixTQUFRLGFBQWE7SUFFbkQsWUFDSSxTQUFtQixFQUNYLGdCQUFpQztRQUV6QyxLQUFLLENBQUMsU0FBUyxDQUFDLENBQUM7UUFGVCxxQkFBZ0IsR0FBaEIsZ0JBQWdCLENBQWlCO1FBSDdDLGFBQVEsR0FBVSxFQUFFLENBQUM7SUFNckIsQ0FBQztJQUVELFFBQVE7SUFDUixDQUFDO0lBRUQsTUFBTSxDQUFDLEdBQUc7UUFDTixJQUFJLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsS0FBSyxFQUFFLENBQUMsRUFBRTtZQUMvQixHQUFHLEVBQUUsSUFBSSxJQUFJLEVBQUUsQ0FBQyxXQUFXLEVBQUU7U0FDaEMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQzs7O1lBdEJKLFNBQVMsU0FBQztnQkFDUCxRQUFRLEVBQUUsa0JBQWtCO2dCQUM1QiwwMkJBQTRDO2dCQUU1QyxTQUFTLEVBQUUsQ0FBQyx1QkFBdUIsQ0FBQzs7YUFDdkM7OztZQVZtQixRQUFRO1lBR25CLGVBQWUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEluamVjdG9yLCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbXBvbmVudENvbnRleHRTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vYXBwLWNvbnRleHQvY29tcG9uZW50LWNvbnRleHQuc2VydmljZSc7XG5pbXBvcnQgeyBDb21wb25lbnRCYXNlIH0gZnJvbSAnLi4vLi4vY2xhc3Nlcy9iYXNlL2NvbXBvbmVudC1iYXNlJztcbmltcG9ydCB7IE5vdGlmaWVyU2VydmljZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL25vdGlmaWVyLnNlcnZpY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2FwcC1mb3JtLWJ1aWxkZXInLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9mb3JtLWJ1aWxkZXIuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2Zvcm0tYnVpbGRlci5jb21wb25lbnQuc2NzcyddLFxuICAgIHByb3ZpZGVyczogW0NvbXBvbmVudENvbnRleHRTZXJ2aWNlXVxufSlcbmV4cG9ydCBjbGFzcyBGb3JtQnVpbGRlckNvbXBvbmVudCBleHRlbmRzIENvbXBvbmVudEJhc2UgaW1wbGVtZW50cyBPbkluaXQge1xuICAgIGNvbnRyb2xzOiBhbnlbXSA9IFtdO1xuICAgIGNvbnN0cnVjdG9yKFxuICAgICAgICBfaW5qZWN0b3I6IEluamVjdG9yLFxuICAgICAgICBwcml2YXRlIF9ub3RpZmllclNlcnZpY2U6IE5vdGlmaWVyU2VydmljZVxuICAgICkge1xuICAgICAgICBzdXBlcihfaW5qZWN0b3IpO1xuICAgIH1cblxuICAgIG5nT25Jbml0KCkge1xuICAgIH1cblxuICAgIG9uRHJvcChldnQpIHtcbiAgICAgICAgdGhpcy5jb250cm9scy5zcGxpY2UoZXZ0LmluZGV4LCAwLCB7XG4gICAgICAgICAgICB0ZW46IG5ldyBEYXRlKCkudG9JU09TdHJpbmcoKVxuICAgICAgICB9KTtcbiAgICB9XG59XG4iXX0=