@formio/angular 7.5.0-rc.2 → 7.5.0-rc.3

package/projects/angular-formio/auth/src/auth.service.ts

@@ -0,0 +1,221 @@
+import { EventEmitter, Injectable, Inject } from '@angular/core';
+import { FormioAuthConfig } from './auth.config';
+import { FormioAppConfig } from '@formio/angular';
+import { get, each } from 'lodash';
+import { Formio } from '@formio/js';
+
+@Injectable()
+export class FormioAuthService {
+  public user: any;
+  public authenticated = false;
+
+  public loginForm: string;
+  public onLogin: EventEmitter<object>;
+  public onLogout: EventEmitter<object>;
+
+  public registerForm: string;
+  public onRegister: EventEmitter<object>;
+  public onUser: EventEmitter<object>;
+  public onError: EventEmitter<any>;
+
+  public resetPassForm: string;
+  public onResetPass: EventEmitter<object>;
+
+  public ready: Promise<boolean>;
+  public readyResolve: any;
+  public readyReject: any;
+
+  public projectReady?: Promise<any>;
+  public accessReady?: Promise<any>;
+  public userReady?: Promise<any>;
+  public formAccess: any = {};
+  public submissionAccess: any = {};
+  public roles: any;
+  public is: any = {};
+
+  constructor(
+    public appConfig: FormioAppConfig,
+    public config: FormioAuthConfig
+  ) {
+    this.user = null;
+
+    if (this.appConfig && this.appConfig.appUrl) {
+      Formio.setBaseUrl(this.appConfig.apiUrl);
+      Formio.setProjectUrl(this.appConfig.appUrl);
+      Formio.formOnly = !!this.appConfig.formOnly;
+    } else {
+      console.error('You must provide an AppConfig within your application!');
+    }
+
+    this.loginForm =
+      this.appConfig.appUrl +
+      '/' +
+      get(this.config, 'login.form', 'user/login');
+    this.registerForm =
+      this.appConfig.appUrl +
+      '/' +
+      get(this.config, 'register.form', 'user/register');
+    this.resetPassForm =
+      this.appConfig.appUrl +
+      '/' +
+      get(this.config, 'resetpass.form', 'resetpass');
+    this.onLogin = new EventEmitter();
+    this.onLogout = new EventEmitter();
+    this.onRegister = new EventEmitter();
+    this.onUser = new EventEmitter();
+    this.onError = new EventEmitter();
+
+    this.ready = new Promise((resolve: any, reject: any) => {
+      this.readyResolve = resolve;
+      this.readyReject = reject;
+    });
+
+    // Register for the core events.
+    Formio.events.on('formio.badToken', () => this.logoutError());
+    Formio.events.on('formio.sessionExpired', () => this.logoutError());
+    if (!this.config.delayAuth) {
+      this.init();
+    }
+  }
+
+  onLoginSubmit(submission: object) {
+    this.setUser(submission);
+    this.onLogin.emit(submission);
+  }
+
+  onRegisterSubmit(submission: object) {
+    this.setUser(submission);
+    this.onRegister.emit(submission);
+  }
+
+  onResetPassSubmit(submission: object) {
+    this.onResetPass.emit(submission);
+  }
+
+  init() {
+    this.projectReady = Formio.makeStaticRequest(this.appConfig.appUrl).then(
+      (project: any) => {
+        each(project.access, (access: any) => {
+          this.formAccess[access.type] = access.roles;
+        });
+      },
+      (): any => {
+        this.formAccess = {};
+        return null;
+      }
+    );
+
+    // Get the access for this project.
+    this.accessReady = Formio.makeStaticRequest(
+      this.appConfig.appUrl + '/access'
+    )
+      .then((access: any) => {
+        each(access.forms, (form: any) => {
+          this.submissionAccess[form.name] = {};
+          form.submissionAccess.forEach((subAccess: any) => {
+            this.submissionAccess[form.name][subAccess.type] = subAccess.roles;
+          });
+        });
+        this.roles = access.roles;
+        return access;
+      })
+      .catch((err): any => {
+        if (err === 'Token Expired' || err === 'Bad Token') {
+          this.setUser(null);
+        }
+        this.roles = {};
+        return null;
+      })
+
+    let currentUserPromise: Promise<any>;
+    if (this.config.oauth) {
+      // Make a fix to the hash to remove starting "/" that angular might put there.
+      if (window.location.hash && window.location.hash.match(/^#\/access_token/)) {
+        history.pushState(null, null, window.location.hash.replace(/^#\/access_token/, '#access_token'));
+      }
+
+      // Initiate the SSO if they provide oauth settings.
+      currentUserPromise = Formio.ssoInit(this.config.oauth.type, this.config.oauth.options);
+    } else {
+      currentUserPromise = Formio.currentUser(null, {
+        ignoreCache: true
+      });
+    }
+
+    this.userReady = currentUserPromise.then((user: any) => {
+      this.setUser(user);
+      return user;
+    }).catch((err) => {
+      this.setUser(null);
+      throw err;
+    });
+
+    // Trigger we are redy when all promises have resolved.
+    if (this.accessReady) {
+      this.accessReady
+        .then(() => this.projectReady)
+        .then(() => this.userReady)
+        .then(() => this.readyResolve(true))
+        .catch((err: any) => this.readyReject(err));
+    }
+  }
+
+  setUser(user: any) {
+    const namespace = Formio.namespace || 'formio';
+    if (user) {
+      this.user = user;
+      localStorage.setItem(`${namespace}AppUser`, JSON.stringify(user));
+      this.setUserRoles();
+      Formio.setUser(user);
+    } else {
+      this.user = null;
+      this.is = {};
+      localStorage.removeItem(`${namespace}AppUser`);
+      Formio.clearCache();
+      Formio.setUser(null);
+    }
+
+    this.authenticated = !!Formio.getToken();
+    this.onUser.emit(this.user);
+  }
+
+  setUserRoles() {
+    if (this.accessReady) {
+      this.accessReady.then(() => {
+        each(this.roles, (role: any, roleName: string) => {
+          if (this.user.roles.indexOf(role._id) !== -1) {
+            this.is[roleName] = true;
+          }
+        });
+      });
+    }
+  }
+
+  logoutError() {
+    this.setUser(null);
+    const namespace = Formio.namespace || 'formio';
+    localStorage.removeItem(`${namespace}Token`);
+    this.onError.emit();
+  }
+
+  logout() {
+    const namespace = Formio.namespace || 'formio';
+    const tokenName = `${namespace}Token`;
+
+    localStorage.removeItem(tokenName);
+    if ((Formio as any).tokens && (Formio as any).tokens.hasOwnProperty(tokenName)) {
+      delete (Formio as any).tokens[tokenName];
+    }
+
+    Formio.logout()
+      .then(() => {
+        this.setUser(null);
+        if (localStorage.getItem(`${namespace}LogoutAuthUrl`)) {
+          window.open(localStorage.getItem(`${namespace}LogoutAuthUrl`), null, 'width=1020,height=618');
+          localStorage.removeItem(`${namespace}LogoutAuthUrl`);
+        }
+        this.onLogout.emit();
+      })
+      .catch(() => this.logoutError());
+  }
+}

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

@@ -0,0 +1,8 @@
+export { FormioAuthConfig } from './auth.config';
+export { FormioAuthService } from './auth.service';
+export { FormioAuthComponent }  from './auth.component';
+export { FormioAuthLoginComponent } from './login/login.component';
+export { FormioAuthRegisterComponent } from './register/register.component';
+export { FormioResetPassComponent } from './resetpass/resetpass.component';
+export { FormioAuthRoutes } from './auth.routes';
+export { FormioAuth } from './auth.module';

package/projects/angular-formio/auth/src/login/login.component.html

@@ -0,0 +1 @@
+<formio [src]="service.loginForm" [renderOptions]="renderOptions" (submit)="service.onLoginSubmit($event)"></formio>

package/projects/angular-formio/auth/src/login/login.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { FormioAuthService } from '../auth.service';
+@Component({
+  templateUrl: './login.component.html'
+})
+export class FormioAuthLoginComponent {
+  public renderOptions: any = {
+    submitOnEnter: true
+  };
+  constructor(public service: FormioAuthService) {}
+}

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

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

package/projects/angular-formio/auth/src/register/register.component.html

@@ -0,0 +1 @@
+<formio [src]="service.registerForm" [renderOptions]="renderOptions" (submit)="service.onRegisterSubmit($event)"></formio>

package/projects/angular-formio/auth/src/register/register.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { FormioAuthService } from '../auth.service';
+@Component({
+  templateUrl: './register.component.html'
+})
+export class FormioAuthRegisterComponent {
+  public renderOptions: any = {
+    submitOnEnter: true
+  };
+  constructor(public service: FormioAuthService) {}
+}

package/projects/angular-formio/auth/src/resetpass/resetpass.component.html

@@ -0,0 +1 @@
+<formio [src]="service.resetPassForm" (submit)="service.onResetPassSubmit($event)"></formio>

package/projects/angular-formio/auth/src/resetpass/resetpass.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+import { FormioAuthService } from '../auth.service';
+@Component({
+  templateUrl: './resetpass.component.html'
+})
+export class FormioResetPassComponent {
+  constructor(public service: FormioAuthService) {}
+}

package/projects/angular-formio/grid/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "../grid/src/index.ts"
+  }
+}

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

@@ -0,0 +1,80 @@
+import { Input, Output, EventEmitter, ViewChild, TemplateRef, Component } from '@angular/core';
+import { each, clone } from 'lodash';
+import { GridHeaderComponent } from './GridHeaderComponent';
+import { GridService } from './grid.service';
+import {FormioPromiseService} from '@formio/angular';
+
+@Component({
+  template: ''
+})
+export class GridBodyComponent {
+  @Input() header: GridHeaderComponent;
+  @Input() actionAllowed: any;
+  @Output() rowSelect: EventEmitter<any>;
+  @Output() rowAction: EventEmitter<any>;
+  @ViewChild(TemplateRef, {static: true}) template: TemplateRef<any>;
+  public rows: Array<any>;
+  public loading: Boolean;
+  public firstItem = 0;
+  public lastItem = 0;
+  public skip = 0;
+  public limit = 0;
+  public total = 0;
+  constructor(public service: GridService) {
+    this.rowSelect = new EventEmitter();
+    this.rowAction = new EventEmitter();
+    this.loading = true;
+  }
+
+  load(formio: FormioPromiseService, query?: any): Promise<any> {
+    return formio.loadForm(query);
+  }
+
+  onRowSelect(event, row) {
+    event.preventDefault();
+    this.rowSelect.emit(row);
+  }
+
+  onRowAction(event, row, action) {
+    event.preventDefault();
+    this.rowAction.emit({ row, action });
+  }
+
+  /**
+   * Set the rows for this Grid body.
+   *
+   * @param query
+   * @param items
+   * @return any
+   */
+  setRows(query: any, items: any) {
+    this.rows = [];
+
+    if (typeof items !== 'object') {
+      this.firstItem = 0;
+      this.lastItem = 0;
+      this.total = 0;
+      this.skip = 0;
+      this.loading = false;
+      this.service.setRows(this.rows);
+      
+      return this.rows;
+    }
+
+    this.firstItem = query.skip + 1;
+    this.lastItem = this.firstItem + items.length - 1;
+    if (this.lastItem === 0) {
+      this.firstItem = 0;
+    }
+    this.total = items.serverCount;
+    this.limit = query.limit;
+    this.skip = Math.floor(items.skip / query.limit) + 1;
+    this.loading = false;
+    each(items, (item: any) => {
+      this.rows.push(clone(item));
+    });
+    this.service.setRows(this.rows);
+
+    return this.rows;
+  }
+}

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

@@ -0,0 +1,25 @@
+import { GridFooterPositions } from './types/grid-footer-positions';
+import { Input, Output, ViewChild, TemplateRef, EventEmitter, Component } from '@angular/core';
+import { GridHeaderComponent } from './GridHeaderComponent';
+import { GridBodyComponent } from './GridBodyComponent';
+
+@Component({
+  template: ''
+})
+export class GridFooterComponent {
+  @Input() header: GridHeaderComponent;
+  @Input() body: GridBodyComponent;
+  @Input() createText: String;
+  @Input() size: number;
+  @Input() actionAllowed: any;
+  @Output() pageChanged: EventEmitter<any>;
+  @Output() createItem: EventEmitter<any>;
+  @ViewChild(TemplateRef, {static: true}) template: TemplateRef<any>;
+
+  public footerPositions = GridFooterPositions;
+
+  constructor() {
+    this.pageChanged = new EventEmitter();
+    this.createItem = new EventEmitter();
+  }
+}

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

@@ -0,0 +1,25 @@
+import { Output, EventEmitter, ViewChild, TemplateRef, Input, Component } from '@angular/core';
+import {FormioPromiseService} from '@formio/angular';
+import {GridHeader} from './types/grid-header';
+
+@Component({
+  template: ''
+})
+export class GridHeaderComponent {
+  @Input() actionAllowed: any;
+  @Output() sort: EventEmitter<GridHeader>;
+  @ViewChild(TemplateRef, {static: true}) template: TemplateRef<any>;
+  public headers: Array<GridHeader>;
+  constructor() {
+    this.headers = [];
+    this.sort = new EventEmitter();
+  }
+
+  get numHeaders() {
+    return this.headers.length;
+  }
+
+  load(formio: FormioPromiseService, query?: any, columns?: Array<any>): Promise<any> {
+    return Promise.resolve([]);
+  }
+}

package/projects/angular-formio/grid/src/form/FormGridBody.component.html

@@ -0,0 +1,22 @@
+<ng-template>
+  <tbody *ngIf="rows">
+    <tr *ngFor="let form of rows">
+      <td>
+        <div class="row">
+          <div class="col-sm-9">
+            <a routerLink="{{form._id}}/view" (click)="onRowSelect($event, form)" class="text-decoration-none"><h5>{{ form.title }}</h5></a>
+            <div class="form-updated small text-muted">
+              Updated {{ form.modified | timeSince }} ago
+            </div>
+          </div>
+          <div class="col-sm-3 d-flex justify-content-end align-items-center">
+            <button #create *ngIf="actionAllowed('formView')" class="btn btn-outline-secondary btn-sm form-btn form-btn-use" (click)="onRowAction($event, form, 'view')"><span class="fa fa-pencil bi bi-pencil"></span></button>&nbsp;
+            <button #view *ngIf="actionAllowed('formSubmission')" class="btn btn-outline-secondary btn-sm form-btn" (click)="onRowAction($event, form, 'submission')"><span class="fa fa-list-alt bi bi-table"></span></button>&nbsp;
+            <button #edit *ngIf="actionAllowed('formEdit')" class="btn btn-outline-secondary btn-sm form-btn" (click)="onRowAction($event, form, 'edit')"><span class="fa fa-edit bi bi-pencil-square"></span></button>&nbsp;
+            <button #delete *ngIf="actionAllowed('formDelete')" class="btn btn-secondary btn-sm form-btn form-btn-delete" (click)="onRowAction($event, form, 'delete')" title="Delete form"><span class="fa fa-trash bi bi-trash"></span></button>
+          </div>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</ng-template>

package/projects/angular-formio/grid/src/form/FormGridBody.component.scss

@@ -0,0 +1,4 @@
+.form-btn {
+  font-size: 0.75rem;
+  margin: 2px 0;
+}

package/projects/angular-formio/grid/src/form/FormGridBody.component.ts

@@ -0,0 +1,46 @@
+import { Component, ElementRef, OnDestroy, ViewChild, ViewChildren } from '@angular/core';
+import { GridBodyComponent } from '../GridBodyComponent';
+import { FormioPromiseService } from '@formio/angular';
+import { Tooltip } from 'bootstrap';
+@Component({
+  selector: 'form-grid-body',
+  styleUrls: ['./FormGridBody.component.scss'],
+  templateUrl: './FormGridBody.component.html'
+})
+export class FormGridBodyComponent extends GridBodyComponent implements OnDestroy {
+  @ViewChildren('create') createBtns: ElementRef[];
+  @ViewChildren('view') viewBtns: ElementRef[];
+  @ViewChildren('edit') editBtns: ElementRef[];
+  @ViewChildren('permissions') permissionsBtns: ElementRef[];
+  @ViewChildren('delete') deleteBtns: ElementRef[];
+  public tooltips: Array<Tooltip> = [];
+
+  load(formio: FormioPromiseService, query?: any) {
+    query = query || {};
+    return formio.loadForms({ params: query })
+      .then((forms: any) => this.setRows(query, forms))
+      .then(() => this.attachTooltips());
+  }
+
+  attachTooltips() {
+    this.createBtns.forEach((el: ElementRef) => {
+      this.tooltips.push(new Tooltip(el.nativeElement, {title: 'Create'}));
+    });
+    this.editBtns.forEach((el: ElementRef) => {
+      this.tooltips.push(new Tooltip(el.nativeElement, {title: 'Edit'}));
+    });
+    this.viewBtns.forEach((el: ElementRef) => {
+      this.tooltips.push(new Tooltip(el.nativeElement, {title: 'View'}));
+    })
+    this.permissionsBtns.forEach((el: ElementRef) => {
+      this.tooltips.push(new Tooltip(el.nativeElement, {title: 'Permissions'}));
+    });
+    this.deleteBtns.forEach((el: ElementRef) => {
+      this.tooltips.push(new Tooltip(el.nativeElement, {title: 'Delete'}));
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.tooltips.forEach((tootip: Tooltip) => tootip.dispose());
+  }
+}

package/projects/angular-formio/grid/src/form/FormGridFooter.component.html

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

package/projects/angular-formio/grid/src/form/FormGridFooter.component.ts

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

package/projects/angular-formio/grid/src/form/FormGridHeader.component.html

@@ -0,0 +1,18 @@
+<ng-template>
+  <thead>
+    <tr>
+      <th>
+        <div class="row">
+          <div class="col-sm-9">
+            <a (click)="sort.emit(header)" style="cursor: pointer">
+              {{ header.label }}&nbsp;<span [ngClass]="{'fa-caret-up bi-caret-up': (header.sort === 'asc'), 'fa-caret-down bi-caret-down': (header.sort === 'desc')}" class="fa bi" *ngIf="header.sort"></span>
+            </a>
+          </div>
+          <div class="col-sm-3 d-flex justify-content-end">
+            Operations
+          </div>
+        </div>
+      </th>
+    </tr>
+  </thead>
+</ng-template>

package/projects/angular-formio/grid/src/form/FormGridHeader.component.ts

@@ -0,0 +1,24 @@
+import {Component} from '@angular/core';
+import {GridHeaderComponent} from '../GridHeaderComponent';
+import {GridHeader, SortType} from '../types/grid-header';
+
+@Component({
+  selector: 'form-grid-header',
+  templateUrl: './FormGridHeader.component.html'
+})
+export class FormGridHeaderComponent extends GridHeaderComponent {
+  public header: GridHeader;
+  load(formio?: any) {
+    this.header = {
+      label: 'Title',
+      key: 'title',
+      sort: SortType.ASC
+    };
+    this.headers = [this.header];
+    return Promise.resolve(this.headers);
+  }
+
+  get numHeaders() {
+    return 2;
+  }
+}

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

@@ -0,0 +1,8 @@
+import { FormGridHeaderComponent } from './FormGridHeader.component';
+import { FormGridBodyComponent } from './FormGridBody.component';
+import { FormGridFooterComponent } from './FormGridFooter.component';
+export default {
+  header: FormGridHeaderComponent,
+  body: FormGridBodyComponent,
+  footer: FormGridFooterComponent
+};

package/projects/angular-formio/grid/src/form/time-since.pipe.ts

@@ -0,0 +1,31 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'timeSince'
+})
+export class TimeSince implements PipeTransform {
+  transform(date: Date): string {
+    const elapsed = (new Date().getTime() - new Date(date).getTime()) / 1000;
+    let interval;
+    if (interval >= 1) {
+      return interval + ' year' + (interval > 1 ? 's' : '');
+    }
+    interval = Math.floor(elapsed / 2592000);
+    if (interval >= 1){
+      return interval + ' month' + (interval > 1 ? 's' : '');
+    }
+    interval = Math.floor(elapsed / 86400);
+    if (interval >= 1) {
+      return interval + ' day' + (interval > 1 ? 's' : '');
+    }
+    interval = Math.floor(elapsed / 3600);
+    if (interval >= 1) {
+      return interval + ' hour' + (interval > 1 ? 's' : '');
+    }
+    interval = Math.floor(elapsed / 60);
+    if (interval >= 1) {
+      return interval + ' minute' + (interval > 1 ? 's' : '');
+    }
+    return Math.floor(elapsed) + ' second' + (elapsed > 1 ? 's' : '');
+  }
+}

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

@@ -0,0 +1,18 @@
+<ng-template #headerTemplate></ng-template>
+<ng-template #bodyTemplate></ng-template>
+<ng-template #footerTemplate></ng-template>
+<div class="formio-grid">
+  <formio-alerts [alerts]="alerts"></formio-alerts>
+  <table class="table table-bordered table-striped table-hover">
+    <ng-container *ngIf="initialized && [footerPositions.top, footerPositions.both].indexOf(footerPosition) !== -1"
+      [ngTemplateOutlet]="footer.template" [ngTemplateOutletContext]="{ position: footerPositions.top, label: label }">
+    </ng-container>
+    <ng-container *ngIf="initialized"
+      [ngTemplateOutlet]="header.template"></ng-container>
+    <formio-loader [isLoading]="isLoading"></formio-loader>
+    <ng-container *ngIf="initialized" [ngTemplateOutlet]="body.template"></ng-container>
+    <ng-container *ngIf="initialized && [footerPositions.bottom, footerPositions.both].indexOf(footerPosition) !== -1"
+      [ngTemplateOutlet]="footer.template" [ngTemplateOutletContext]="{ position: footerPositions.bottom, label: label }">
+    </ng-container>
+  </table>
+</div>

package/projects/angular-formio/grid/src/grid.component.scss

@@ -0,0 +1,9 @@
+.formio-grid {
+  position: relative;
+  width: 100%;
+}
+
+.grid-refresh {
+  height: 400px;
+  width: 100%;
+}