@formio/angular 5.1.1 → 5.2.1-rc.1

package/projects/angular-formio/grid/src/index.ts

@@ -0,0 +1,12 @@
+export { FormioGrid } from './grid.module';
+export { GridHeaderComponent } from './GridHeaderComponent';
+export { GridFooterComponent } from './GridFooterComponent';
+export { GridBodyComponent } from './GridBodyComponent';
+export { FormGridHeaderComponent } from './form/FormGridHeader.component';
+export { FormGridBodyComponent } from './form/FormGridBody.component';
+export { FormGridFooterComponent } from './form/FormGridFooter.component';
+export { SubmissionGridHeaderComponent } from './submission/SubmissionGridHeader.component';
+export { SubmissionGridBodyComponent } from './submission/SubmissionGridBody.component';
+export { SubmissionGridFooterComponent } from './submission/SubmissionGridFooter.component';
+export { FormioGridComponent } from './grid.component';
+export { GridService } from './grid.service';

package/projects/angular-formio/grid/src/public_api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of angular-formio
+ */
+
+export * from './index';

package/projects/angular-formio/grid/src/submission/SubmissionGridBody.component.html

@@ -0,0 +1,7 @@
+<ng-template>
+  <tbody>
+    <tr *ngFor="let row of rows" (click)="onRowSelect($event, row)">
+      <td *ngFor="let rowHeader of header.headers" [innerHTML]="view(row, rowHeader)"></td>
+    </tr>
+  </tbody>
+</ng-template>

package/projects/angular-formio/grid/src/submission/SubmissionGridBody.component.ts

@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+import { each, get } from 'lodash';
+import { GridBodyComponent } from '../GridBodyComponent';
+import {FormioPromiseService} from '@formio/angular';
+import { GridHeader } from '../types/grid-header';
+import {FormioSubmission} from '@formio/angular';
+@Component({
+  templateUrl: './SubmissionGridBody.component.html'
+})
+export class SubmissionGridBodyComponent extends GridBodyComponent {
+  load(formio: FormioPromiseService, query?: any) {
+    query = query || {};
+    return formio.loadSubmissions({ params: query })
+      .then((submissions: any) => this.setRows(query, submissions));
+  }
+
+  /**
+   * Render the cell data.
+   *
+   * @param submission
+   * @param header
+   * @return any
+   */
+  view(submission: FormioSubmission, header: GridHeader): string {
+    const cellValue: any = get(submission, header.key);
+    if (header.renderCell) {
+      return header.renderCell(cellValue, header.component);
+    } else {
+      if (header.component) {
+        if (header.component.getView) {
+          return header.component.getView(cellValue);
+        }
+        return header.component.asString(cellValue);
+      } else {
+        return cellValue.toString();
+      }
+    }
+  }
+}

package/projects/angular-formio/grid/src/submission/SubmissionGridFooter.component.html

@@ -0,0 +1,18 @@
+<ng-template #footer let-position="position">
+  <thead class="formio-grid-footer" *ngIf="position === footerPositions.top">
+    <ng-container [ngTemplateOutlet]="defaultFooterTemplate"></ng-container>
+  </thead>
+  <tfoot class="formio-grid-footer" *ngIf="position === footerPositions.bottom">
+    <ng-container [ngTemplateOutlet]="defaultFooterTemplate"></ng-container>
+  </tfoot>
+</ng-template>
+
+<ng-template #defaultFooterTemplate>
+  <tr>
+    <td *ngIf="header" [colSpan]="header.numHeaders">
+      <button *ngIf="actionAllowed('submissionCreate') && createText" class="btn btn-primary pull-left float-left" (click)="createItem.emit('form')"><i class="glyphicon glyphicon-plus fa fa-plus"></i> {{ createText }}</button>
+      <span class="pull-right float-right item-counter"><span class="page-num">{{ body.firstItem }} - {{ body.lastItem }}</span> / {{ body.total }} total</span>
+      <pagination [totalItems]="body.total" [itemsPerPage]="body.limit" [(ngModel)]="body.skip" (pageChanged)="pageChanged.emit($event)" [maxSize]="size" class="justify-content-center pagination-sm"></pagination>
+    </td>
+  </tr>
+</ng-template>

package/projects/angular-formio/grid/src/submission/SubmissionGridFooter.component.ts

@@ -0,0 +1,20 @@
+import {Component, OnInit, ViewEncapsulation} from '@angular/core';
+import { GridFooterComponent } from '../GridFooterComponent';
+
+@Component({
+  templateUrl: './SubmissionGridFooter.component.html',
+  styleUrls: ['../grid.footer.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class SubmissionGridFooterComponent extends GridFooterComponent implements OnInit {
+
+  constructor() {
+    super();
+  }
+
+  ngOnInit() {
+    if (!this.size) {
+      this.size = 7;
+    }
+  }
+}

package/projects/angular-formio/grid/src/submission/SubmissionGridHeader.component.html

@@ -0,0 +1,11 @@
+<ng-template>
+  <thead>
+    <tr>
+      <th *ngFor="let header of headers">
+        <a (click)="sort.emit(header)">
+          {{ header.label }}&nbsp;<span [ngClass]="{'glyphicon-triangle-top': (header.sort === 'asc'), 'glyphicon-triangle-bottom': (header.sort === 'desc')}" class="glyphicon" *ngIf="header.sort"></span>
+        </a>
+      </th>
+    </tr>
+  </thead>
+</ng-template>

package/projects/angular-formio/grid/src/submission/SubmissionGridHeader.component.ts

@@ -0,0 +1,72 @@
+import {Component, EventEmitter} from '@angular/core';
+import {Utils, Components, ExtendedComponentSchema} from 'formiojs';
+import {GridHeaderComponent} from '../GridHeaderComponent';
+import {FormioPromiseService} from '@formio/angular';
+import {ComponentInstance, FormioForm} from '@formio/angular';
+import {GridColumn} from '../types/grid-column';
+import {GridHeader, SortType} from '../types/grid-header';
+
+@Component({
+  templateUrl: './SubmissionGridHeader.component.html'
+})
+export class SubmissionGridHeaderComponent extends GridHeaderComponent {
+
+  // Map structure where the key is the path and the value is the component
+  formComponents: Map<string, ExtendedComponentSchema>;
+
+  load(formio: FormioPromiseService, query?: any, columns?: Array<GridColumn>) {
+    query = query || {};
+    return formio.loadForm({params: query}).then((form: FormioForm) => {
+      this.headers = [];
+      this.formComponents = new Map<string, ExtendedComponentSchema>();
+      this.setComponents(form.components);
+      columns ? columns.forEach(column => {
+          this.setHeader(this.getHeaderForColumn(column, this.formComponents.get(column.path)));
+        }) : this.setComponentsHeaders(this.formComponents);
+
+      return this.headers;
+    });
+  }
+
+  setHeader(header: GridHeader) {
+    this.headers.push(header);
+  }
+
+  getHeaderForColumn(column: GridColumn, component?: ExtendedComponentSchema, sort?: SortType) {
+    return {
+      label: column.label,
+      key: column.path,
+      sort: sort,
+      component: component ? Components.create(component, null, null, true) as ComponentInstance : undefined,
+      renderCell: column ? column.renderCell : undefined
+    };
+  }
+
+  getHeaderForComponent(component: ExtendedComponentSchema, path: string, sort?: SortType) {
+    return {
+      label: component.label,
+      key: path,
+      sort: sort,
+      component: component ? Components.create(component, null, null, true) as ComponentInstance : undefined,
+    };
+  }
+  // Set headers from components in case if columns are not provided
+  setComponentsHeaders(components: Map<string, ExtendedComponentSchema>, sort?: SortType) {
+    components.forEach((component, path) => {
+      if (
+        component.input &&
+        (!component.hasOwnProperty('tableView') || component.tableView)
+      ) {
+        this.setHeader(this.getHeaderForComponent(component, path, sort));
+      }
+    });
+  }
+
+  // Map components
+  setComponents(components) {
+    Utils.eachComponent(components, (component: ExtendedComponentSchema, newPath: string) => {
+      this.formComponents.set(`data.${newPath}`, component);
+    });
+  }
+}
+

package/projects/angular-formio/grid/src/submission/index.ts

@@ -0,0 +1,8 @@
+import { SubmissionGridHeaderComponent } from './SubmissionGridHeader.component';
+import { SubmissionGridBodyComponent } from './SubmissionGridBody.component';
+import { SubmissionGridFooterComponent } from './SubmissionGridFooter.component';
+export default {
+  header: SubmissionGridHeaderComponent,
+  body: SubmissionGridBodyComponent,
+  footer: SubmissionGridFooterComponent
+};

package/projects/angular-formio/grid/src/types/grid-column.ts

@@ -0,0 +1,7 @@
+import { ComponentInstance } from '@formio/angular';
+
+export interface GridColumn {
+  label?: string;
+  path: string;
+  renderCell?(cellValue: any, component?: ComponentInstance): string;
+}

package/projects/angular-formio/grid/src/types/grid-footer-positions.ts

@@ -0,0 +1,5 @@
+export enum GridFooterPositions {
+  bottom,
+  top,
+  both
+}

package/projects/angular-formio/grid/src/types/grid-header.ts

@@ -0,0 +1,14 @@
+import {ComponentInstance} from '@formio/angular';
+
+export interface GridHeader {
+  component?: ComponentInstance;
+  key: string;
+  sort?: SortType;
+  label: string;
+  renderCell?(cellValue: any, component?: ComponentInstance): string;
+}
+
+export enum SortType {
+  ASC = 'asc',
+  DESC = 'desc'
+}

package/projects/angular-formio/karma.conf.js

@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/angular-formio'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/projects/angular-formio/manager/package.json

@@ -0,0 +1,15 @@
+{
+  "ngPackage": {
+    "lib": {
+      "umdModuleIds": {
+        "lodash": "_",
+        "ngx-bootstrap/modal": "ngx-bootstrap/modal",
+        "ngx-bootstrap/pagination": "ngx-bootstrap/pagination",
+        "lodash/each": "_each",
+        "lodash/intersection": "_intersection",
+        "formiojs": "formiojs",
+        "ngx-bootstrap": "ngx-bootstrap"
+      }
+    }
+  }
+}

package/projects/angular-formio/manager/src/create/create.component.ts

@@ -0,0 +1,11 @@
+import { Component, OnInit } from '@angular/core';
+import { FormManagerEditComponent } from '../edit/edit.component';
+
+@Component({
+  templateUrl: '../edit/edit.component.html'
+})
+export class FormManagerCreateComponent extends FormManagerEditComponent implements OnInit {
+  ngOnInit() {
+    this.service.reset();
+  }
+}

package/projects/angular-formio/manager/src/delete/delete.component.html

@@ -0,0 +1,6 @@
+<formio-alerts [alerts]="alerts"></formio-alerts>
+<h3>Are you sure you wish to delete this form?</h3>
+<div class="btn-toolbar">
+  <button type="button" (click)="onDelete()" class="btn btn-danger" style="margin-right: 10px;">Yes</button>
+  <button type="button" (click)="onCancel()" class="btn btn-default">No</button>
+</div>

package/projects/angular-formio/manager/src/delete/delete.component.ts

@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+import { FormManagerService } from '../form-manager.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FormioAlerts } from '@formio/angular';
+import { GridService } from '@formio/angular/grid';
+
+@Component({
+  templateUrl: './delete.component.html'
+})
+export class FormManagerDeleteComponent {
+  constructor(
+    public managerService: FormManagerService,
+    public router: Router,
+    public route: ActivatedRoute,
+    public alerts: FormioAlerts,
+    public gridService?: GridService
+  ) {}
+
+  onDelete() {
+    this.managerService.formio.deleteForm().then(() => {
+      if (this.gridService) {
+        const currentPage = +localStorage.getItem('currentPage') || 0;
+        const formsNumberPerPage = this.gridService.getFormsPerPage();
+
+        if (formsNumberPerPage === 1 && currentPage !== 0) {
+          localStorage.setItem('currentPage', `${currentPage - 1}`);
+        }
+      }
+
+      this.router.navigate(['../../'], { relativeTo: this.route });
+    }).catch(err => this.alerts.setAlert({type: 'danger', message: (err.message || err)}));
+  }
+
+  onCancel() {
+    this.router.navigate(['../', 'view'], { relativeTo: this.route });
+  }
+}

package/projects/angular-formio/manager/src/edit/edit.component.html

@@ -0,0 +1,19 @@
+<div class="loader" *ngIf="loading"></div>
+<div class="form-group row">
+  <div class="col-sm-8">
+    <input type="text" class="form-control" id="formTitle" placeholder="Enter a Title" #title>
+  </div>
+  <div class="col-sm-2">
+    <select class="form-control" id="formSelect" (change)="onDisplaySelect($event)" #type>
+      <option value="form">Form</option>
+      <option value="wizard">Wizard</option>
+      <option value="pdf">PDF</option>
+    </select>
+  </div>
+  <div class="col-sm-2">
+    <button class="btn btn-primary btn-block" (click)="onSave()">Save Form</button>
+  </div>
+</div>
+<formio-alerts [alerts]="alerts"></formio-alerts>
+<form-builder *ngIf="formReady" [formbuilder]="config.builder" [form]="form" #builder></form-builder>
+<button class="btn btn-primary" style="margin-top: 10px;" (click)="onSave()">Save Form</button>

package/projects/angular-formio/manager/src/edit/edit.component.ts

@@ -0,0 +1,107 @@
+import { Component, ViewChild, ElementRef, AfterViewInit, ChangeDetectorRef } from '@angular/core';
+import { FormManagerService } from '../form-manager.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FormManagerConfig } from '../form-manager.config';
+import { FormioAlerts } from '@formio/angular';
+import { FormBuilderComponent } from '@formio/angular';
+import _ from 'lodash';
+
+@Component({
+  templateUrl: './edit.component.html'
+})
+export class FormManagerEditComponent implements AfterViewInit {
+  @ViewChild(FormBuilderComponent, {static: false}) builder: FormBuilderComponent;
+  @ViewChild('title', {static: false}) formTitle: ElementRef;
+  @ViewChild('type', {static: false}) formType: ElementRef;
+  public form: any;
+  public loading: Boolean;
+  public formReady: Boolean;
+  public editMode: Boolean;
+
+  constructor(
+    public service: FormManagerService,
+    public router: Router,
+    public route: ActivatedRoute,
+    public config: FormManagerConfig,
+    public ref: ChangeDetectorRef,
+    public alerts: FormioAlerts
+  ) {
+    this.form = {components: []};
+    this.formReady = false;
+    this.loading = false;
+    this.editMode = false;
+  }
+
+  initBuilder(editing) {
+    if (editing) {
+      this.loading = true;
+      this.editMode = true;
+      return this.service.formReady.then(() => {
+        this.form = this.service.form;
+        this.formTitle.nativeElement.value = this.service.form.title;
+        this.formType.nativeElement.value = this.service.form.display || 'form';
+        this.formReady = true;
+        this.loading = false;
+        this.ref.detectChanges();
+        return true;
+      }).catch(err => {
+        this.alerts.setAlert({type: 'danger', message: (err.message || err)});
+        this.loading = false;
+        this.ref.detectChanges();
+        this.formReady = true;
+      });
+    } else {
+      this.formReady = true;
+      return Promise.resolve(true);
+    }
+  }
+
+  ngAfterViewInit() {
+    this.route.url.subscribe( url => {
+      setTimeout(() => this.initBuilder((url[0].path === 'edit')), 0);
+    });
+  }
+
+  onDisplaySelect(event) {
+    this.builder.setDisplay(event.target.value);
+  }
+
+  saveForm() {
+    this.loading = true;
+    this.form = _.cloneDeep(this.builder.formio.schema);
+    this.form.title = this.formTitle.nativeElement.value.trim();
+    this.form.display = this.formType.nativeElement.value;
+
+    if (this.config.tag) {
+      this.form.tags = this.form.tags || [];
+      this.form.tags.push(this.config.tag);
+      this.form.tags = _.uniq(this.form.tags);
+    }
+    if (!this.form._id) {
+      this.form.name = _.camelCase(this.form.title).toLowerCase();
+      this.form.path = this.form.name;
+    }
+    return this.service.formio.saveForm(this.form).then(form => {
+      this.form = this.service.setForm(form);
+      this.loading = false;
+      return this.form;
+    }).catch(err => {
+      this.loading = false;
+      // Catch if a form is returned as an error. This is a conflict.
+      if (err._id && err.type) {
+        throw err;
+      }
+      this.alerts.setAlert({type: 'danger', message: (err.message || err)});
+    });
+  }
+
+  onSave() {
+    return this.saveForm().then((form) => {
+      if (this.editMode) {
+        this.router.navigate(['../', 'view'], {relativeTo: this.route});
+      } else {
+        this.router.navigate(['../', form._id, 'view'], {relativeTo: this.route});
+      }
+    });
+  }
+}

package/projects/angular-formio/manager/src/form/form.component.html

@@ -0,0 +1,32 @@
+<button *ngIf="options.viewer" class="pull-right btn btn-outline-primary" (click)="openEmbed(content)"><i class="fa fa-share-alt glyphicon glyphicon-share"></i> Share</button>
+<ul class="nav nav-tabs mb-2">
+  <li class="nav-item"><a class="nav-link" routerLink="../"><i class="fa fa-chevron-left glyphicon glyphicon-chevron-left"></i></a></li>
+  <li class="nav-item" routerLinkActive="active"><a class="nav-link" routerLink="view" routerLinkActive="active"><i class="fa fa-pencil glyphicon glyphicon-pencil"></i> Enter Data</a></li>
+  <li class="nav-item" routerLinkActive="active"><a class="nav-link" routerLink="submission" routerLinkActive="active"><i class="fa fa-list-alt glyphicon glyphicon-list-alt"></i> View Data</a></li>
+  <li *ngIf="service.actionAllowed('formEdit')" class="nav-item" routerLinkActive="active"><a class="nav-link" routerLink="edit" routerLinkActive="active"><i class="fa fa-edit glyphicon glyphicon-edit"></i> Edit Form</a></li>
+  <li *ngIf="service.actionAllowed('formDelete')" class="nav-item" routerLinkActive="active"><a class="nav-link" routerLink="delete" routerLinkActive="active"><span class="fa fa-trash glyphicon glyphicon-trash"></span></a></li>
+</ul>
+<router-outlet></router-outlet>
+<ng-template #content>
+  <div class="modal-header">
+    <h4 class="modal-title">Share or Embed this form</h4>
+    <button type="button" class="close" aria-label="Close" (click)="modalRef.hide()">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body">
+    <ul class="nav nav-tabs mr-auto mb-2">
+      <li class="nav-item">
+        <a class="nav-link" [ngClass]="{'active': choice === 'isUrl'}" (click)="choices('isUrl')"><i class="fa fa-link"></i> URL</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" [ngClass]="{'active': choice === 'isEmbed'}" (click)="choices('isEmbed')"><i class="fa fa-code"></i> Embed</a>
+      </li>
+    </ul>
+    <pre  *ngIf="choice === 'isEmbed'"><textarea onclick="this.focus();this.select()" readonly="readonly" style="width:100%;" rows="8" [ngModel]="embedCode"></textarea></pre>
+    <input *ngIf="choice === 'isUrl'" type="text" onclick="this.focus();this.select()" readonly="readonly" class="form-control" [ngModel]="shareUrl" placeholder="https://examples.form.io/example">
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-light" (click)="modalRef.hide()">Close</button>
+  </div>
+</ng-template>

package/projects/angular-formio/manager/src/form/form.component.ts

@@ -0,0 +1,73 @@
+import { Component, OnInit, TemplateRef } from '@angular/core';
+import { FormManagerService } from '../form-manager.service';
+import { FormManagerConfig } from '../form-manager.config';
+import { ActivatedRoute } from '@angular/router';
+import { FormioAppConfig } from '@formio/angular';
+import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
+
+@Component({
+  templateUrl: './form.component.html'
+})
+export class FormManagerFormComponent implements OnInit {
+  choice: any = 'isUrl';
+  embedCode: any;
+  shareUrl: any;
+  projectId: any;
+  pathName: any;
+  goTo: any = '';
+  modalRef: BsModalRef;
+  constructor(
+    public service: FormManagerService,
+    public route: ActivatedRoute,
+    public appConfig: FormioAppConfig,
+    public options: FormManagerConfig,
+    private modalService: BsModalService
+  ) { }
+
+  ngOnInit() {
+    this.service.reset(this.route);
+    this.service.loadForm().then(form => {
+      this.service.formSrc = this.appConfig.appUrl + '/' + form.path;
+      this.projectId = form.project;
+      this.pathName = form.path;
+      this.getShareUrl();
+    });
+  }
+
+  public getShareUrl() {
+    const src = this.appConfig.appUrl + '/' + this.pathName;
+    this.shareUrl = `${this.options.viewer}/#/?src=${encodeURIComponent(src)}`;
+    return this.shareUrl;
+  }
+
+  openEmbed(content: TemplateRef<any>) {
+    let goto = '';
+    if (this.goTo) {
+      goto += `if (d && d.formSubmission && d.formSubmission._id) { window.location.href = "${this.goTo}";}`;
+    }
+    let embedCode = '<script type="text/javascript">';
+    embedCode += '(function a(d, w, u) {';
+    embedCode +=    'var h = d.getElementsByTagName("head")[0];';
+    embedCode +=    'var s = d.createElement("script");';
+    embedCode +=    's.type = "text/javascript";';
+    embedCode +=    's.src = "' + this.options.viewer + '/assets/lib/seamless/seamless.parent.min.js";';
+    embedCode +=    's.onload = function b() {';
+    embedCode +=       'var f = d.getElementById("formio-form-' + this.service.formio.formId + '");';
+    embedCode +=       'if (!f || (typeof w.seamless === u)) {';
+    embedCode +=          'return setTimeout(b, 100);';
+    embedCode +=       '}';
+    embedCode +=       'w.seamless(f, {fallback:false}).receive(function(d, e) {' + goto + '});';
+    embedCode +=    '};';
+    embedCode +=    'h.appendChild(s);';
+    embedCode += '})(document, window);';
+    embedCode += '</script>';
+    embedCode += '<iframe id="formio-form-' + this.service.formio.formId + '" ';
+    embedCode +=     'style="width:100%;border:none;" height="800px" src="' + this.shareUrl + '&iframe=1"></iframe>';
+    this.embedCode = embedCode;
+    this.modalRef = this.modalService.show(content, { class: 'modal-lg' });
+  }
+
+  choices(string) {
+    this.choice = string;
+  }
+}

package/projects/angular-formio/manager/src/form-manager.config.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+
+export interface FormManagerRouteConfig {
+  formIndex?: any;
+  formCreate?: any;
+  form?: any;
+  formView?: any;
+  formEdit?: any;
+  formEmbed?: any;
+  formDelete?: any;
+  submissionIndex?: any;
+  submission?: any;
+  submissionView?: any;
+  submissionEdit?: any;
+  submissionDelete?: any;
+}
+
+@Injectable()
+export class FormManagerConfig {
+  public tag = '';
+  public includeSearch = false;
+  public saveDraft = false;
+  public builder?: any;
+  public viewer?: string;
+  public renderer: any;
+}

package/projects/angular-formio/manager/src/form-manager.module.ts

@@ -0,0 +1,54 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FormioModule } from '@formio/angular';
+import { FormioGrid } from '@formio/angular/grid';
+import { FormManagerIndexComponent } from './index/index.component';
+import { FormManagerCreateComponent } from './create/create.component';
+import { FormManagerFormComponent } from './form/form.component';
+import { FormManagerViewComponent } from './view/view.component';
+import { FormManagerEditComponent } from './edit/edit.component';
+import { FormManagerDeleteComponent } from './delete/delete.component';
+import { SubmissionComponent } from './submission/submission/submission.component';
+import { SubmissionEditComponent } from './submission/edit/edit.component';
+import { SubmissionDeleteComponent } from './submission/delete/delete.component';
+import { SubmissionViewComponent } from './submission/view/view.component';
+import { SubmissionIndexComponent } from './submission/index/index.component';
+import { FormManagerRouteConfig } from './form-manager.config';
+import { FormManagerRoutes } from './form-manager.routes';
+import { PaginationModule } from 'ngx-bootstrap/pagination';
+import { ModalModule } from 'ngx-bootstrap/modal';
+import { extendRouter } from '@formio/angular';
+@NgModule({
+  imports: [
+    CommonModule,
+    FormioModule,
+    RouterModule,
+    FormsModule,
+    FormioGrid,
+    ModalModule.forRoot(),
+    PaginationModule.forRoot()
+  ],
+  declarations: [
+    FormManagerIndexComponent,
+    FormManagerCreateComponent,
+    FormManagerFormComponent,
+    FormManagerViewComponent,
+    FormManagerEditComponent,
+    FormManagerDeleteComponent,
+    SubmissionComponent,
+    SubmissionEditComponent,
+    SubmissionDeleteComponent,
+    SubmissionViewComponent,
+    SubmissionIndexComponent
+  ]
+})
+export class FormManagerModule {
+  static forChild(config?: FormManagerRouteConfig): any {
+    return extendRouter(FormManagerModule, config, FormManagerRoutes);
+  }
+  static forRoot(config?: FormManagerRouteConfig): any {
+    return extendRouter(FormManagerModule, config, FormManagerRoutes);
+  }
+}