angular-formio-editor/angular-formio-editor.metadata.json

Angular component integrating Form.io builder and renderer with a json editor

{"__symbolic":"module","version":4,"metadata":{"FormioEditorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":36,"character":1},"arguments":[{"selector":"formio-editor","template":"<!-- Modal -->\r\n<ng-template  #saveModal class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"saveModalLabel\" aria-hidden=\"true\">\r\n\r\n  <div class=\"modal-header\">\r\n    <h5 class=\"modal-title\" id=\"exampleModalLabel\">Validation warning</h5>\r\n    <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"modalRef.hide()\">\r\n      <span aria-hidden=\"true\">&times;</span>\r\n    </button>\r\n  </div>\r\n  <div class=\"modal-body\">\r\n    Looks like the json is not a valid form.\r\n    Do you want to apply changes anyways?\r\n  </div>\r\n  <div class=\"modal-footer\">\r\n    <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\" (click)=\"modalRef.hide();\">NO</button>\r\n    <button type=\"button\" class=\"btn btn-primary\" data-dismiss=\"modal\" (click)=\"modalRef.hide(); jsonEditorApplyChanges()\">YES</button>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<tabset #formioEditorTabs>\r\n  <tab *ngIf=\"options?.builder?.hideTab !== true\" (selectTab)=\"onSelectTab($event)\"\r\n        heading=\"Builder\" id=\"builder\">\r\n    <div class=\"m-2\">\r\n      <div *ngIf=\"form && options?.builder?.hideDisplaySelect !== true\">\r\n        <label for=\"form-display-select\" class=\"mx-2\">Display as: </label>\r\n        <select id=\"form-display-select\" class=\"form-control my-2\" style=\"display: inline-block; width: 150px;\"\r\n                [(ngModel)]=\"form.display\" (ngModelChange)=\"onBuilderDiplayChange($event)\">\r\n          <option value=\"form\">Form</option>\r\n          <option value=\"wizard\">Wizard</option>\r\n        </select>\r\n      </div>\r\n      <form-builder *ngIf=\"!builderDisplayChanged\" [form]=\"form\"\r\n        [options]=\"options?.builder?.input?.options\"\r\n        [formbuilder]=\"options?.builder?.input?.formbuilder\"\r\n        [noeval]=\"options?.builder?.input?.noeval\"\r\n        [refresh]=\"options?.builder?.input?.refresh\"\r\n        (change)=\"onBuilderChange($event); options?.builder?.output?.change ? options.builder.output.change($event) : undefined\"\r\n      ></form-builder>\r\n    </div>\r\n  </tab>\r\n  <tab *ngIf=\"options?.json?.hideTab !== true\" (selectTab)=\"onSelectTab($event)\"\r\n          heading=\"Json\" id=\"json\">\r\n    <div class=\"m-2 well\">\r\n      <json-change-panel *ngIf=\"!options?.json?.changePanelLocations || options.json.changePanelLocations?.includes('top')\"\r\n          (apply)=\"onJsonEditorApply(saveModal)\"\r\n          (discard)=\"jsonEditorDiscardChanges()\"\r\n          [applyDisabled]=\"!jsonEditorChanged || jsonEditorErrors.length !== jsonEditorWarningCounter\"\r\n          [alertOpen]=\"jsonEditorErrors.length !== jsonEditorWarningCounter\"\r\n      ></json-change-panel>\r\n      <json-editor #jsoneditor\r\n        [options]=\"jsonEditorOptions\"\r\n        (dataChange)=\"onJsonEditorChange($event); options?.json?.output?.dataChange ? options.json.output.dataChange($event) : undefined\"\r\n        (dataError)=\"onJsonEditorError($event); options?.json?.output?.dataError ? options.json.output.dataError($event) : undefined\"\r\n      ></json-editor>\r\n      <json-change-panel *ngIf=\"!options?.json?.changePanelLocations || options.json.changePanelLocations?.includes('bottom')\"\r\n          (apply)=\"onJsonEditorApply(saveModal)\"\r\n          (discard)=\"jsonEditorDiscardChanges()\"\r\n          [applyDisabled]=\"!jsonEditorChanged || jsonEditorErrors.length !== jsonEditorWarningCounter\"\r\n          [alertOpen]=\"jsonEditorErrors.length !== jsonEditorWarningCounter\"\r\n      ></json-change-panel>\r\n    </div>\r\n  </tab>\r\n  <tab *ngIf=\"options?.renderer?.hideTab !== true\" (selectTab)=\"onSelectTab($event)\"\r\n          heading=\"Renderer\" id=\"renderer\">\r\n    <div class=\"m-2\">\r\n      <formio *ngIf=\"activeTab=='renderer'\"\r\n        [form]=\"form\"\r\n        [submission]=\"options?.renderer?.input?.submission || {data:{}}\"\r\n        [src]=\"options?.renderer?.input?.src\"\r\n        [url]=\"options?.renderer?.input?.url\"\r\n        [service]=\"options?.renderer?.input?.service\"\r\n        [options]=\"options?.renderer?.input?.options\"\r\n        [noeval]=\"options?.renderer?.input?.noeval\"\r\n        [formioOptions]=\"options?.renderer?.input?.formioOptions\"\r\n        [renderOptions]=\"options?.renderer?.input?.renderOptions\"\r\n        [readOnly]=\"options?.renderer?.input?.readOnly\"\r\n        [viewOnly]=\"options?.renderer?.input?.viewOnly\"\r\n        [hideComponents]=\"options?.renderer?.input?.hideComponents\"\r\n        [refresh]=\"options?.renderer?.input?.refresh\"\r\n        [success]=\"options?.renderer?.input?.success\"\r\n        [language]=\"options?.renderer?.input?.language\"\r\n        [hooks]=\"options?.renderer?.input?.hooks\"\r\n        [renderer]=\"options?.renderer?.input?.renderer\"\r\n        (render)=\"options?.renderer?.output?.render ? options.renderer.output.render($event) : undefined\"\r\n        (customEvent)=\"options?.renderer?.output?.customEvent ? options.renderer.output.customEvent($event) : undefined\"\r\n        (submit)=\"options?.renderer?.output?.submit ? options.renderer.output.submit($event) : undefined\"\r\n        (prevPage)=\"options?.renderer?.output?.prevPage ? options.renderer.output.prevPage($event) : undefined\"\r\n        (nextPage)=\"options?.renderer?.output?.nextPage ? options.renderer.output.nextPage($event) : undefined\"\r\n        (beforeSubmit)=\"showSubmissionPanel($event); options?.renderer?.output?.beforeSubmit ? options.renderer.output.beforeSubmit($event) : undefined\"\r\n        (change)=\"options?.renderer?.output?.change ? options.renderer.output.change($event) : undefined\"\r\n        (invalid)=\"options?.renderer?.output?.invalid ? options.renderer.output.invalid($event) : undefined\"\r\n        (errorChange)=\"options?.renderer?.output?.errorChange ? options.renderer.output.errorChange($event) : undefined\"\r\n        (formLoad)=\"options?.renderer?.output?.formLoad ? options.renderer.output.formLoad($event) : undefined\"\r\n        (submissionLoad)=\"options?.renderer?.output?.submissionLoad ? options.renderer.output.submissionLoad($event) : undefined\"\r\n        (ready)=\"options?.renderer?.output?.ready ? options.renderer.output.ready($event) : undefined\"\r\n      ></formio>\r\n    </div>\r\n    <div *ngIf=\"submissionPanel\" class=\"m-2 border-top border-primary\">\r\n      <div class=\"row mx-0\">\r\n        <div class=\"p-2\" [ngClass]=\"{'col-6':showResourceSchema,'col-12':!showResourceSchema}\">\r\n          <p class=\"font-weight-bold text-center mb-1\">\r\n            Summission (\r\n              <label for=\"fullSubmitCheckbox\" class=\"my-0\">full</label>\r\n              <input id=\"fullSubmitCheckbox\" class=\"mx-1\" type=\"checkbox\" [(ngModel)]=\"fullSubmission\" (change)=\"showSubmissionPanel(submission)\">\r\n            )\r\n          </p>\r\n          <json-editor #renderer_resource_jsoneditor\r\n            [options]=\"rendererResourceJsonEditorOptions\"\r\n            (dataChange)=\"options?.renderer?.submissionPanel?.resourceJsonEditor?.output?.dataChange ? options.renderer.submissionPanel.resourceJsonEditor.output.dataChange($event) : undefined\"\r\n            (dataError)=\"options?.renderer?.submissionPanel?.resourceJsonEditor?.output?.dataError ? options.renderer.submissionPanel.resourceJsonEditor.output.dataError($event) : undefined\"\r\n          ></json-editor>\r\n        </div>\r\n        <div class=\"p-2 col-6\" [hidden]=!showResourceSchema>\r\n          <p class=\"font-weight-bold text-center mb-1\">Json Schema Validator</p>\r\n          <json-editor #renderer_schema_jsoneditor\r\n            [options]=\"rendererSchemaJsonEditorOptions\"\r\n            (dataChange)=\"options?.renderer?.submissionPanel?.schemaJsonEditor?.output?.dataChange ? options.renderer.submissionPanel.schemaJsonEditor.output.dataChange($event) : undefined\"\r\n            (dataError)=\"options?.renderer?.submissionPanel?.schemaJsonEditor?.output?.dataError ? options.renderer.submissionPanel.schemaJsonEditor.output.dataError($event) : undefined\"\r\n          ></json-editor>\r\n        </div>\r\n      </div>\r\n      <button class=\"mx-3 btn btn-primary\" *ngIf=\"options?.renderer?.submissionPanel?.schemaJsonEditor?.enabled\" (click)=\"showResourceSchema = !showResourceSchema\">{{showResourceSchema? 'Hide Schema' : 'Show Schema'}}</button>\r\n      <button class=\"mx-2 btn btn-primary\" *ngIf=\"options?.renderer?.submissionPanel?.schemaJsonEditor?.enabled && showResourceSchema\" (click)=\"applyResourceJsonSchema()\">Apply Schema</button>\r\n      <button class=\"mx-2 btn btn-primary\" *ngIf=\"options?.renderer?.submissionPanel?.schemaJsonEditor?.enabled && showResourceSchema\" (click)=\"showSubmissionPanel(submission)\">Regenerate Schema</button>\r\n    </div>\r\n  </tab>\r\n</tabset>\r\n","styles":[""]}]}],"members":{"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"reset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"jsonEditor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":55,"character":3},"arguments":["jsoneditor",{"static":false}]}]}],"rendererResourceJsonEditor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":57,"character":3},"arguments":["renderer_resource_jsoneditor",{"static":false}]}]}],"rendererSchemaJsonEditor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":58,"character":3},"arguments":["renderer_schema_jsoneditor",{"static":false}]}]}],"tabset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":66,"character":3},"arguments":["formioEditorTabs",{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":88,"character":36}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"setOptions":[{"__symbolic":"method"}],"findTab":[{"__symbolic":"method"}],"selectTab":[{"__symbolic":"method"}],"onSelectTab":[{"__symbolic":"method"}],"resetFormBuilder":[{"__symbolic":"method"}],"onBuilderDiplayChange":[{"__symbolic":"method"}],"onBuilderChange":[{"__symbolic":"method"}],"onJsonEditorError":[{"__symbolic":"method"}],"onJsonEditorChange":[{"__symbolic":"method"}],"onJsonEditorApply":[{"__symbolic":"method"}],"jsonEditorApplyChanges":[{"__symbolic":"method"}],"jsonEditorDiscardChanges":[{"__symbolic":"method"}],"refreshJsonEditor":[{"__symbolic":"method"}],"resetFormRendererIfActive":[{"__symbolic":"method"}],"showSubmissionPanel":[{"__symbolic":"method"}],"applyResourceJsonSchema":[{"__symbolic":"method"}]}},"FormioEditorModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"FormioEditorComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"imports":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule","line":15,"character":4},{"__symbolic":"reference","module":"@formio/angular","name":"FormioModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":17,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"ngx-bootstrap/alert","name":"AlertModule","line":18,"character":4},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"ModalModule","line":19,"character":4},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"ngx-bootstrap/tabs","name":"TabsModule","line":20,"character":4},"member":"forRoot"}}],"exports":[{"__symbolic":"reference","name":"FormioEditorComponent"}]}]}],"members":{}},"FormioEditorTab":{"__symbolic":"interface"},"FormioEditorBuilderOptions":{"__symbolic":"interface"},"FormioEditorJsonOptions":{"__symbolic":"interface"},"FormioEditorRendererOptions":{"__symbolic":"interface"},"FormioEditorOptions":{"__symbolic":"interface"},"JsonEditorMode":{"__symbolic":"interface"},"JSON_EDITOR_TREE_MODES":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"Object"},"member":"freeze"},"arguments":[["code","preview","text"]]},"JSON_EDITOR_TEXT_MODES":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"Object"},"member":"freeze"},"arguments":[["form","tree","view"]]},"JsonEditorNodePath":{"__symbolic":"interface"},"JsonEditorTreeNode":{"__symbolic":"interface"},"JsonEditorError":{"__symbolic":"interface"},"JsonEditorValidationError":{"__symbolic":"interface"},"JsonEditorSchemaValidationError":{"__symbolic":"interface"},"JsonEditorParseError":{"__symbolic":"interface"},"JsonEditorCustomValidationError":{"__symbolic":"interface"},"JsonEditorTextPosition":{"__symbolic":"interface"},"JsonEditorTextSelection":{"__symbolic":"interface"},"JsonEditorSerializableNode":{"__symbolic":"interface"},"JsonEditorSelection":{"__symbolic":"interface"},"JsonEditorEvent":{"__symbolic":"interface"},"JsonEditorMenuItem":{"__symbolic":"interface"},"JsonEditorMenuNode":{"__symbolic":"interface"},"JsonEditorQueryOptions":{"__symbolic":"interface"},"JsonEditorOptions":{"__symbolic":"interface"},"JSON_EDITOR_ADDITIONAL_OPTIONS":{"__symbolic":"error","message":"Reference to a non-exported function","line":167,"character":9,"context":{"name":"getKeys"},"module":"./lib/json-editor/json-editor-shapes"},"JSON_EDITOR_NATIVE_OPTIONS":{"__symbolic":"error","message":"Reference to a non-exported function","line":167,"character":9,"context":{"name":"getKeys"},"module":"./lib/json-editor/json-editor-shapes"},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"selector":"json-editor","template":"<div [id]=\"id\" #jsonEditorContainer></div>"}]}],"members":{"jsonEditorContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":28,"character":3},"arguments":["jsonEditorContainer",{"static":true}]}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"dataChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":35,"character":3}}]}],"dataError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":36,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"createEditor":[{"__symbolic":"method"}],"onChangeData":[{"__symbolic":"method"}],"onValidationError":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"isWellFormedJson":[{"__symbolic":"method"}],"collapseAll":[{"__symbolic":"method"}],"destroy":[{"__symbolic":"method"}],"expandAll":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"get":[{"__symbolic":"method"}],"getMode":[{"__symbolic":"method"}],"getName":[{"__symbolic":"method"}],"getText":[{"__symbolic":"method"}],"getSelection":[{"__symbolic":"method"}],"getTextSelection":[{"__symbolic":"method"}],"getValidateSchema":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}],"set":[{"__symbolic":"method"}],"setMode":[{"__symbolic":"method"}],"setName":[{"__symbolic":"method"}],"setSchema":[{"__symbolic":"method"}],"setSelection":[{"__symbolic":"method"}],"setTextSelection":[{"__symbolic":"method"}],"search":[{"__symbolic":"method"}],"update":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"json-change-panel","template":"<div class=\"row mx-0\">\r\n  <div class=\"m-2 p-0\">\r\n    <button type=\"button\" class=\"btn btn-success mr-4\" (click)=\"apply.emit($event)\" [disabled]=\"applyDisabled\">\r\n      Apply\r\n    </button>\r\n    <button type=\"button\" class=\"btn btn-secondary\" (click)=\"discard.emit($event)\">\r\n      Discard\r\n    </button>\r\n  </div>\r\n  <alert class=\"col-6 mx-4 m-2 p-0\"  type=\"danger\" [isOpen]=\"alertOpen\">\r\n    Json is not well-formed. You cannot apply changes.\r\n  </alert>\r\n</div>\r\n"}]}],"members":{"applyDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"alertOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"apply":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":11,"character":3}}]}],"discard":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}}},"origins":{"FormioEditorComponent":"./lib/formio-editor.component","FormioEditorModule":"./lib/formio-editor.module","FormioEditorTab":"./lib/formio-editor-options","FormioEditorBuilderOptions":"./lib/formio-editor-options","FormioEditorJsonOptions":"./lib/formio-editor-options","FormioEditorRendererOptions":"./lib/formio-editor-options","FormioEditorOptions":"./lib/formio-editor-options","JsonEditorMode":"./lib/json-editor/json-editor-shapes","JSON_EDITOR_TREE_MODES":"./lib/json-editor/json-editor-shapes","JSON_EDITOR_TEXT_MODES":"./lib/json-editor/json-editor-shapes","JsonEditorNodePath":"./lib/json-editor/json-editor-shapes","JsonEditorTreeNode":"./lib/json-editor/json-editor-shapes","JsonEditorError":"./lib/json-editor/json-editor-shapes","JsonEditorValidationError":"./lib/json-editor/json-editor-shapes","JsonEditorSchemaValidationError":"./lib/json-editor/json-editor-shapes","JsonEditorParseError":"./lib/json-editor/json-editor-shapes","JsonEditorCustomValidationError":"./lib/json-editor/json-editor-shapes","JsonEditorTextPosition":"./lib/json-editor/json-editor-shapes","JsonEditorTextSelection":"./lib/json-editor/json-editor-shapes","JsonEditorSerializableNode":"./lib/json-editor/json-editor-shapes","JsonEditorSelection":"./lib/json-editor/json-editor-shapes","JsonEditorEvent":"./lib/json-editor/json-editor-shapes","JsonEditorMenuItem":"./lib/json-editor/json-editor-shapes","JsonEditorMenuNode":"./lib/json-editor/json-editor-shapes","JsonEditorQueryOptions":"./lib/json-editor/json-editor-shapes","JsonEditorOptions":"./lib/json-editor/json-editor-shapes","JSON_EDITOR_ADDITIONAL_OPTIONS":"./lib/json-editor/json-editor-shapes","JSON_EDITOR_NATIVE_OPTIONS":"./lib/json-editor/json-editor-shapes","ɵa":"./lib/json-editor/json-editor.component","ɵb":"./lib/json-change-panel/json-change-panel.component"},"importAs":"angular-formio-editor"}