@formio/angular 5.4.0-rc.2 → 5.5.0-rc.2

package/projects/angular-formio/src/components/formbuilder/formbuilder.component.ts

@@ -0,0 +1,213 @@
+import {
+  Component,
+  Input,
+  OnInit,
+  OnChanges,
+  OnDestroy,
+  ViewEncapsulation,
+  Optional,
+  ElementRef,
+  ViewChild,
+  EventEmitter,
+  Output,
+  NgZone
+} from '@angular/core';
+import { FormioAppConfig } from '../../formio.config';
+import {
+  FormioForm,
+  FormioOptions
+} from '../../formio.common';
+import { Formio, FormBuilder, Utils } from 'formiojs';
+import { assign } from 'lodash';
+import { Observable, Subscription } from 'rxjs';
+import { CustomTagsService } from '../../custom-component/custom-tags.service';
+
+/* tslint:disable */
+@Component({
+  selector: 'form-builder',
+  templateUrl: './formbuilder.component.html',
+  styleUrls: ['../../../../../node_modules/formiojs/dist/formio.builder.min.css'],
+  encapsulation: ViewEncapsulation.None
+})
+/* tslint:enable */
+export class FormBuilderComponent implements OnInit, OnChanges, OnDestroy {
+  public ready: Promise<object>;
+  public readyResolve: any;
+  public formio: any;
+  public builder: FormBuilder;
+  public componentAdding = false;
+  private refreshSubscription: Subscription;
+  @Input() form?: FormioForm;
+  @Input() options?: FormioOptions;
+  @Input() formbuilder?: any;
+  @Input() noeval ? = false;
+  @Input() refresh?: Observable<void>;
+  @Input() rebuild?: Observable<object>;
+  @Output() change?: EventEmitter<object>;
+  @ViewChild('builder', { static: true }) builderElement?: ElementRef<any>;
+
+  constructor(
+    private ngZone: NgZone,
+    @Optional() private config: FormioAppConfig,
+    @Optional() private customTags?: CustomTagsService
+  ) {
+    if (this.config) {
+      Formio.setBaseUrl(this.config.apiUrl);
+      Formio.setProjectUrl(this.config.appUrl);
+    } else {
+      console.warn('You must provide an AppConfig within your application!');
+    }
+
+    this.change = new EventEmitter();
+    this.ready = new Promise((resolve: any) => {
+      this.readyResolve = resolve;
+    });
+  }
+
+  ngOnInit() {
+    Utils.Evaluator.noeval = this.noeval;
+
+    if (this.refresh) {
+      this.refreshSubscription = this.refresh.subscribe(() => {
+        this.ngZone.runOutsideAngular(() => {
+          this.buildForm(this.form);
+        });
+      });
+    }
+
+    if (this.rebuild) {
+      this.rebuild.subscribe((options) => {
+        this.ngZone.runOutsideAngular(() => {
+          this.rebuildForm(this.form, options);
+        });
+      });
+    }
+  }
+
+  setInstance(instance: any) {
+    this.formio = instance;
+    instance.off('addComponent');
+    instance.off('saveComponent');
+    instance.off('updateComponent');
+    instance.off('removeComponent');
+    instance.on('addComponent', (component, parent, path, index, isNew) => {
+      this.ngZone.run(() => {
+        if (isNew) {
+          this.componentAdding = true;
+        } else {
+          this.change.emit({
+            type: 'addComponent',
+            builder: instance,
+            form: instance.schema,
+            component: component,
+            parent: parent,
+            path: path,
+            index: index
+          });
+          this.componentAdding = false;
+        }
+      });
+    });
+    instance.on('saveComponent', (component, original, parent, path, index, isNew) => {
+      this.ngZone.run(() => {
+        this.change.emit({
+          type: this.componentAdding ? 'addComponent' : 'saveComponent',
+          builder: instance,
+          form: instance.schema,
+          component: component,
+          originalComponent: original,
+          parent: parent,
+          path: path,
+          index: index,
+          isNew: isNew || false
+        });
+        this.componentAdding = false;
+      });
+    });
+    instance.on('updateComponent', (component) => {
+      this.ngZone.run(() => {
+        this.change.emit({
+          type: 'updateComponent',
+          builder: instance,
+          form: instance.schema,
+          component: component
+        });
+      });
+    });
+    instance.on('removeComponent', (component, parent, path, index) => {
+      this.ngZone.run(() => {
+        this.change.emit({
+          type: 'deleteComponent',
+          builder: instance,
+          form: instance.schema,
+          component: component,
+          parent: parent,
+          path: path,
+          index: index
+        });
+      });
+    });
+    this.ngZone.run(() => {
+      this.readyResolve(instance);
+    });
+    return instance;
+  }
+
+  setDisplay(display: String, prevDisplay?: string) {
+    if (display && display !== prevDisplay) {
+      (this.builder as any).setDisplay(display);
+    }
+  }
+
+  buildForm(form: any, prevForm?: any) {
+    if (!form || !this.builderElement || !this.builderElement.nativeElement) {
+      return;
+    }
+
+    if (this.builder) {
+      this.setDisplay(form.display, prevForm?.display);
+      this.setInstance(this.builder.instance);
+      this.builder.form = form;
+      this.builder.instance.form = form;
+      return this.builder.instance;
+    }
+
+    return this.rebuildForm(form);
+  }
+
+  rebuildForm(form: any, options?: object) {
+    const Builder = this.formbuilder || FormBuilder;
+    const extraTags = this.customTags ? this.customTags.tags : [];
+    this.builder = new Builder(
+      this.builderElement.nativeElement,
+      form,
+      assign({
+        icons: 'fontawesome',
+        sanitizeConfig: {
+          addTags: extraTags
+        }
+      }, options || this.options || {})
+    );
+    return this.builder.ready.then(instance => this.setInstance(instance));
+  }
+
+  ngOnChanges(changes: any) {
+    Utils.Evaluator.noeval = this.noeval;
+
+    if (changes.form && changes.form.currentValue) {
+      this.ngZone.runOutsideAngular(() => {
+        this.buildForm(changes.form.currentValue || {components: []}, changes.form.previousValue);
+      });
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.refreshSubscription) {
+      this.refreshSubscription.unsubscribe();
+    }
+
+    if (this.formio) {
+      this.formio.destroy();
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+<div role="form" [attr.aria-label]="label">
+  <div *ngIf="isLoading && !hideLoading" style="position:relative;height:200px">
+    <formio-loader [isLoading]="isLoading"></formio-loader>
+  </div>
+  <formio-alerts *ngIf="this.options.alertsPosition === AlertsPosition.top || this.options.alertsPosition === AlertsPosition.both" (focusComponent)="focusOnComponet($event)" [alerts]="alerts"></formio-alerts>
+  <div #formio></div>
+  <formio-alerts *ngIf="this.options.alertsPosition === AlertsPosition.bottom || this.options.alertsPosition === AlertsPosition.both" (focusComponent)="focusOnComponet($event)" [alerts]="alerts"></formio-alerts>
+</div>

package/projects/angular-formio/src/components/formio/formio.component.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit, Optional, ViewEncapsulation, Input, NgZone, OnChanges } from '@angular/core';
+import { FormioAppConfig } from '../../formio.config';
+import { Formio, Form } from 'formiojs';
+import { FormioBaseComponent } from '../../FormioBaseComponent';
+import { CustomTagsService } from '../../custom-component/custom-tags.service';
+
+/* tslint:disable */
+@Component({
+  selector: 'formio',
+  templateUrl: './formio.component.html',
+  styleUrls: ['../../../../../node_modules/formiojs/dist/formio.form.min.css'],
+  encapsulation: ViewEncapsulation.None,
+})
+/* tslint:enable */
+export class FormioComponent extends FormioBaseComponent implements OnInit, OnChanges {
+  constructor(
+    public ngZone: NgZone,
+    @Optional() public config: FormioAppConfig,
+    @Optional() public customTags?: CustomTagsService,
+  ) {
+    super(ngZone, config, customTags);
+    if (this.config) {
+      Formio.setBaseUrl(this.config.apiUrl);
+      Formio.setProjectUrl(this.config.appUrl);
+    } else {
+      console.warn('You must provide an AppConfig within your application!');
+    }
+  }
+
+  getRenderer() {
+    return this.renderer || Form;
+  }
+}

package/projects/angular-formio/src/components/loader/formio.loader.component.html

@@ -0,0 +1,3 @@
+<div class="formio-loader-wrapper" *ngIf="isLoading">
+  <div class="formio-loader"></div>
+</div>

package/projects/angular-formio/src/components/loader/formio.loader.component.scss

@@ -0,0 +1,26 @@
+.formio-loader-wrapper {
+  position:absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  z-index: 1000;
+}
+
+.formio-loader {
+  position:absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -30px;
+  margin-top: -30px;
+  z-index: 10000;
+  display: inline-block;
+  border: 6px solid #f3f3f3;
+  border-top: 6px solid #3498db;
+  border-radius: 50%;
+  width: 60px;
+  height: 60px;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}

package/projects/angular-formio/src/components/loader/formio.loader.component.ts

@@ -0,0 +1,10 @@
+import {Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'formio-loader',
+  styleUrls: ['./formio.loader.component.scss'],
+  templateUrl: './formio.loader.component.html'
+})
+export class FormioLoaderComponent {
+  @Input() isLoading: boolean;
+}

package/projects/angular-formio/src/core.ts

@@ -0,0 +1,21 @@
+export * from './formio.config';
+export * from './formio.common';
+export * from './formio.service';
+export * from './formio-promise.service';
+export * from './formio.utils';
+export * from './FormioBaseComponent';
+export * from './components/formio/formio.component';
+export * from './components/formbuilder/formbuilder.component';
+export * from './components/loader/formio.loader.component';
+export * from './components/alerts/formio.alerts';
+export * from './components/alerts/formio.alerts.component';
+export { FormioModule } from './formio.module';
+export {
+  Formio,
+  Utils as FormioUtils,
+  Templates,
+  Components,
+  ComponentSchema,
+  ExtendedComponentSchema,
+  ElementInfo
+} from 'formiojs';

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

@@ -0,0 +1,173 @@
+// @ts-nocheck
+import { BuilderInfo, Components, ExtendedComponentSchema, Utils as FormioUtils } from 'formiojs';
+import { FormioCustomComponentInfo, FormioCustomElement, FormioEvent } from '../elements.common';
+import { clone, isNil, isArray } from 'lodash';
+
+const BaseInputComponent = Components.components.input;
+const TextfieldComponent = Components.components.textfield;
+
+export function createCustomFormioComponent(customComponentOptions: FormioCustomComponentInfo) {
+  return class CustomComponent extends BaseInputComponent {
+    static editForm = customComponentOptions.editForm || TextfieldComponent.editForm;
+    id = FormioUtils.getRandomComponentId();
+    type = customComponentOptions.type;
+    _customAngularElement: FormioCustomElement;
+
+    static schema() {
+      return BaseInputComponent.schema({
+        ...customComponentOptions.schema,
+        type: customComponentOptions.type,
+      });
+    }
+
+    get defaultSchema() {
+      return CustomComponent.schema();
+    }
+
+    get emptyValue() {
+      return customComponentOptions.emptyValue || null;
+    }
+
+    static get builderInfo(): BuilderInfo {
+      return {
+        title: customComponentOptions.title,
+        group: customComponentOptions.group,
+        icon: customComponentOptions.icon,
+        weight: customComponentOptions.weight,
+        documentation: customComponentOptions.documentation,
+        schema: CustomComponent.schema(),
+      };
+    }
+
+    constructor(public component: ExtendedComponentSchema, options: any, data: any) {
+      super(component, {
+        ...options,
+        sanitizeConfig: {
+          addTags: [customComponentOptions.selector],
+        },
+      }, data);
+
+      if (customComponentOptions.extraValidators) {
+        this.validators = this.validators.concat(customComponentOptions.extraValidators);
+      }
+    }
+
+    elementInfo() {
+      const info = super.elementInfo();
+      info.type = customComponentOptions.selector;
+      info.changeEvent = customComponentOptions.changeEvent || 'valueChange';
+      info.attr = {
+        ...info.attr,
+        class: info.attr.class.replace('form-control', 'form-control-custom-field') // remove the form-control class as the custom angular component may look different
+      };
+      return info;
+    }
+
+    get inputInfo() {
+      const info = {
+        id: this.key,
+        ...this.elementInfo()
+      }
+      return info;
+    }
+
+    renderElement(value: any, index: number) {
+      const info = this.inputInfo;
+      return this.renderTemplate(customComponentOptions.template || 'input', {
+        input: info,
+        value,
+        index
+      });
+    }
+
+    attach(element: HTMLElement) {
+      let superAttach = super.attach(element);
+
+      this._customAngularElement = element.querySelector(customComponentOptions.selector);
+
+      // Bind the custom options and the validations to the Angular component's inputs (flattened)
+      if (this._customAngularElement) {
+        // To make sure we have working input in IE...
+        // IE doesn't render it properly if it's not visible on the screen
+        // due to the whole structure applied via innerHTML to the parent
+        // so we need to use appendChild
+        if (!this._customAngularElement.getAttribute('ng-version')) {
+          this._customAngularElement.removeAttribute('ref');
+
+          const newCustomElement = document.createElement(customComponentOptions.selector) as FormioCustomElement;
+
+          newCustomElement.setAttribute('ref', 'input');
+          Object.keys(this.inputInfo.attr).forEach((attr: string) => {
+            newCustomElement.setAttribute(attr, this.inputInfo.attr[attr]);
+          });
+
+          this._customAngularElement.appendChild(newCustomElement);
+          this._customAngularElement = newCustomElement;
+
+          superAttach = super.attach(element);
+        }
+
+        // Bind customOptions
+        for (const key in this.component.customOptions) {
+          if (this.component.customOptions.hasOwnProperty(key)) {
+            this._customAngularElement[key] = this.component.customOptions[key];
+          }
+        }
+        // Bind validate options
+        for (const key in this.component.validate) {
+          if (this.component.validate.hasOwnProperty(key)) {
+            this._customAngularElement[key] = this.component.validate[key];
+          }
+        }
+        // Bind options explicitly set
+        const fieldOptions = customComponentOptions.fieldOptions;
+        if (isArray(fieldOptions) && fieldOptions.length > 0) {
+          for (const key in fieldOptions) {
+            if (fieldOptions.hasOwnProperty(key)) {
+              this._customAngularElement[fieldOptions[key]] = this.component[fieldOptions[key]];
+            }
+          }
+        }
+
+        // Attach event listener for emit event
+        this._customAngularElement.addEventListener('formioEvent', (event: CustomEvent<FormioEvent>) => {
+          this.emit(event.detail.eventName, {
+            ...event.detail.data,
+            component: this.component
+          });
+        });
+
+        // Ensure we bind the value (if it isn't a multiple-value component with no wrapper)
+        if (!this._customAngularElement.value && !this.component.disableMultiValueWrapper) {
+          this.restoreValue();
+        }
+
+      }
+      return superAttach;
+    }
+
+    // Add extra option to support multiple value (e.g. datagrid) with single angular component (disableMultiValueWrapper)
+    useWrapper() {
+      return this.component.hasOwnProperty('multiple') && this.component.multiple && !this.component.disableMultiValueWrapper;
+    }
+
+    get defaultValue() {
+      let defaultValue = this.emptyValue;
+
+      // handle falsy default value
+      if (!isNil(this.component.defaultValue)) {
+        defaultValue = this.component.defaultValue;
+      }
+
+      if (this.component.customDefaultValue && !this.options.preview) {
+        defaultValue = this.evaluate(
+          this.component.customDefaultValue,
+          { value: '' },
+          'value'
+        );
+      }
+
+      return clone(defaultValue);
+    }
+  };
+}

package/projects/angular-formio/src/custom-component/custom-tags.service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class CustomTagsService {
+  tags: string[] = [];
+
+  addCustomTag(tag: string) {
+    this.tags.push(tag);
+  }
+}

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

@@ -0,0 +1,41 @@
+import { Injector, Type } from '@angular/core';
+import { createCustomElement } from '@angular/elements';
+import { Components } from 'formiojs';
+import { FormioCustomComponentInfo } from '../elements.common';
+import { createCustomFormioComponent } from './create-custom-component';
+import { CustomTagsService } from './custom-tags.service';
+
+export function registerCustomTag(tag: string, injector: Injector): void {
+  injector.get(CustomTagsService).addCustomTag(tag);
+}
+
+export function registerCustomTags(tags: string[], injector: Injector): void {
+  tags.forEach(tag => registerCustomTag(tag, injector));
+}
+
+export function registerCustomFormioComponent(
+  options: FormioCustomComponentInfo,
+  angularComponent: Type<any>,
+  injector: Injector,
+): void {
+  registerCustomTag(options.selector, injector);
+
+  const complexCustomComponent = createCustomElement(angularComponent, { injector });
+  customElements.define(options.selector, complexCustomComponent);
+
+  Components.setComponent(options.type, createCustomFormioComponent(options));
+}
+
+export function registerCustomFormioComponentWithClass(
+  options: FormioCustomComponentInfo,
+  angularComponent: Type<any>,
+  formioClass: any,
+  injector: Injector,
+): void {
+  registerCustomTag(options.selector, injector);
+
+  const complexCustomComponent = createCustomElement(angularComponent, { injector });
+  customElements.define(options.selector, complexCustomComponent);
+
+  Components.setComponent(options.type, formioClass);
+}

package/projects/angular-formio/src/elements.common.ts

@@ -0,0 +1,31 @@
+import { ExtendedComponentSchema, BuilderInfo, ValidateOptions } from 'formiojs';
+import { EventEmitter } from '@angular/core';
+import { NgElement, WithProperties } from '@angular/elements';
+
+// Custom Angular Components
+export interface FormioCustomComponentInfo extends BuilderInfo {
+  type: string;
+  selector: string;
+  emptyValue?: any;
+  extraValidators?: (keyof ValidateOptions)[];
+  fieldOptions?: string[];
+  template?: string;
+  changeEvent?: string // Default: valueChange
+  editForm?: () => { components: ExtendedComponentSchema[] };
+}
+
+export type FormioCustomElement = NgElement & WithProperties<{ value: any } & ExtendedComponentSchema>;
+
+export interface FormioEvent {
+  eventName: string;
+  data?: {
+    [key: string]: any;
+  };
+}
+
+export interface FormioCustomComponent<T> {
+  value: T; // Should be an @Input
+  valueChange: EventEmitter<T>; // Should be an @Output
+  disabled: boolean;
+  formioEvent?: EventEmitter<FormioEvent>; // Should be an @Output
+}

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

@@ -0,0 +1,36 @@
+import { from } from 'rxjs';
+import { FormioService } from './formio.service';
+import { FormioForm } from './formio.common';
+
+export class FormioPromiseService {
+  private formioService: FormioService;
+
+  constructor(public url: string, public options?: object) {
+    this.formioService = new FormioService(url, options);
+  }
+
+  saveForm(form: FormioForm, options?: any): Promise<any> {
+    return this.formioService.saveForm(form, options).toPromise();
+  }
+  loadForm(query?: any, options?: any): Promise<any> {
+    return this.formioService.loadForm(query, options).toPromise();
+  }
+  loadSubmission(query?: any, options?: any): Promise<any> {
+    return this.formioService.loadSubmission(query, options).toPromise();
+  }
+  userPermissions(user: any, form: any, submission: any): Promise<any> {
+    return this.formioService.userPermissions(user, form, submission).toPromise();
+  }
+  deleteSubmission(data?: any, options?: any): Promise<any> {
+    return this.formioService.deleteSubmission(data, options).toPromise();
+  }
+  loadForms(query: any, options?: any): Promise<any> {
+    return this.formioService.loadForms(query, options).toPromise();
+  }
+  saveSubmission(submission: {}, options?: any): Promise<any> {
+    return this.formioService.saveSubmission(submission, options).toPromise();
+  }
+  loadSubmissions(query?: any, options?: any): Promise<any> {
+    return this.formioService.loadSubmissions(query, options).toPromise();
+  }
+}