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

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

@@ -1,213 +0,0 @@
-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

@@ -1,8 +0,0 @@
-<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

@@ -1,33 +0,0 @@
-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

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

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

@@ -1,26 +0,0 @@
-.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

@@ -1,10 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,173 +0,0 @@
-// @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

@@ -1,10 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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();
-  }
-}