@formio/js 5.0.0-bb.dev.4 → 5.0.0-dev.5543.0c92282

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-bb.dev.4",
+  "version": "5.0.0-dev.5543.0c92282",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -26,6 +26,7 @@
       "require": "./lib/cjs/formio.embed.js"
     }
   },
+  "types": "index.d.ts",
   "files": [
     "dist",
     "lib",
@@ -78,7 +79,7 @@
   "homepage": "https://github.com/formio/formio.js#readme",
   "dependencies": {
     "@formio/bootstrap": "^3.0.0-rc.20",
-    "@formio/choices.js": "^10.2.0",
+    "@formio/choices.js": "^10.2.1",
     "@formio/core": "1.3.0-rc.16",
     "@formio/text-mask-addons": "^3.8.0-formio.2",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
@@ -106,7 +107,7 @@
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
-    "moment-timezone": "^0.5.43",
+    "moment-timezone": "^0.5.44",
     "quill": "^2.0.0-dev.3",
     "signature_pad": "^4.1.4",
     "string-hash": "^1.1.3",

package/types/builders.d.ts

@@ -0,0 +1,7 @@
+export class Builders {
+  static readonly builders: any;
+  static addBuilder(name: string, builder: any): void;
+  static addBuilders(builders: any): void;
+  static getBuilder(name: string): any;
+  static getBuilder(): any;
+}

package/types/components/_classes/component/component.d.ts

@@ -0,0 +1,174 @@
+import { Element } from '../../../element';
+import { ComponentSchema, ElementInfo, ExtendedComponentSchema, ValidateOptions } from './../../schema.d';
+
+export class Component extends Element {
+  static schema(sources: ExtendedComponentSchema): ExtendedComponentSchema;
+  static tableView(value: any, options: any): void;
+  constructor(component: any, options: Object, data: Object);
+  public originalComponent: any | Component;
+  public refs: Object;
+  public attached: boolean;
+  public rendered: boolean;
+  public data: Object;
+  public component: any;
+  public error: string;
+  public tooltip: string;
+  public row: any;
+  public pristine: boolean;
+  public parent: any;
+  public root: any;
+  public lastChanged: any;
+  public triggerRedraw: Function;
+  public tooltips: any[];
+  public invalid: boolean;
+  public isBuilt: boolean;
+  readonly ready: any;
+  readonly labelInfo: any;
+  init(): void;
+  destroy(): void;
+  readonly shouldDisabled: any | boolean;
+  readonly isInputComponent: boolean;
+  readonly defaultSchema: ComponentSchema;
+  readonly hasInput: boolean;
+  readonly key: any;
+  public parentVisible: any | boolean;
+  public parentDisabled: any | boolean;
+  public visible: any | boolean;
+  public currentForm: any;
+  readonly fullMode: boolean;
+  readonly builderMode: boolean;
+  getModifiedSchema(
+    schema: ExtendedComponentSchema,
+    defaultSchema: ComponentSchema,
+    recursion: boolean,
+  ): ExtendedComponentSchema;
+  readonly schema: ExtendedComponentSchema;
+  t(text: string, params?: Object): any;
+  labelIsHidden(): boolean;
+  readonly transform: any;
+  getTemplate(names: any, modes: any): any;
+  checkTemplate(templates: any, names: any, modes: any): any;
+  checkTemplateMode(templatesByName: any, modes: any): any;
+  renderTemplate(name: any, data: any, modeOption?: any[]): any;
+  sanitize(dirty: string): any;
+  renderString(template: any, data: any): HTMLElement;
+  performInputMapping(input: any): any;
+  getBrowserLanguage(): string | null;
+  beforeNext(): any;
+  beforePage(): any;
+  beforeSubmit(): any;
+  readonly submissionTimezone: string | any;
+  readonly canDisable: boolean;
+  loadRefs(element: any, refs: any): any;
+  build(element: any): any;
+  render(children: any, topLevel?: boolean): any;
+  attach(element: any): any;
+  addShortcut(element: any, shortcut: any): void;
+  removeShortcut(element: any, shortcut: any): void;
+  detach(): void;
+  attachRefreshEvent(refreshData: any): void;
+  attachRefreshOn(): void;
+  refresh(value: any): void;
+  inContext(component: any): boolean;
+  readonly viewOnly: boolean | any;
+  createViewOnlyElement(): HTMLElement;
+  readonly defaultViewOnlyValue: '-';
+  getValueAsString(value: any): string;
+  getView(value: any): string;
+  updateItems(...args: any[]): void;
+  createModal(): HTMLElement;
+  readonly className: string;
+  readonly customStyle: string;
+  getElement(): HTMLElement;
+  evalContext(additional: any): any;
+  setPristine(pristine: boolean): void;
+  removeValue(index: number): void;
+  iconClass(name: any, spinning: any): any;
+  readonly name: string;
+  readonly errorLabel: string;
+  errorMessage(type: any): any;
+  setContent(element: any, content: any): boolean;
+  redraw(): any;
+  rebuild(): any;
+  removeEventListeners(): void;
+  hasClass(element: any, className: string): any;
+  addClass(element: any, className: string): any;
+  removeClass(element: any, className: string): any;
+  hasCondition(): boolean;
+  conditionallyVisible(data: any): boolean;
+  checkCondition(row: any, data: Object): boolean;
+  checkConditions(data: any): any;
+  readonly logic: any[];
+  fieldLogic(data: any): any;
+  applyActions(actions: any[], result: any, data: any, newComponent: any): boolean;
+  addInputError(message: any, dirty: boolean): void;
+  clearOnHide(show: boolean): void;
+  onChange(flags: Object, fromRoot: boolean): void;
+  readonly wysiwygDefault: {
+    theme: string;
+    placeholder: any | string;
+    modules: {
+      clipboard: {
+        matchVisual: boolean;
+      };
+      toolbar: any[];
+    };
+  };
+  addCKE(element: HTMLElement | any, settings: Object, onChange: (input: any) => any): any;
+  addQuill(element: HTMLElement | any, settings: Object, onChange: (input: any) => any): any;
+  addAce(element: HTMLElement | any, settings: Object, onChange: (input: any) => any): any;
+  readonly emptyValue: null;
+  hasValue(data: Object): boolean;
+  readonly rootValue: any;
+  readonly rootPristine: any;
+  public dataValue: any;
+  splice(index: number | string): void;
+  deleteValue(): void;
+  readonly defaultValue: any;
+  getValue(): any;
+  getValueAt(index: number): any;
+  setValue(value: any, flags: any): boolean;
+  setValueAt(index: number, value: any, flags: any): void;
+  readonly hasSetValue: boolean;
+  restoreValue(): void;
+  normalizeValue(value: any): any;
+  getIcon(name: any | string, content: any, styles: any, ref?: string): any | HTMLElement;
+  resetValue(): void;
+  hasChanged(before: any, after: any): boolean;
+  updateOnChange(flags: any, changed: boolean | any): boolean;
+  calculateValue(data: Object, flags: any): boolean;
+  public label: any | string;
+  getRoot(): Component;
+  invalidMessage(data: any, dirty: boolean, ignoreCondition?: boolean): any;
+  isValid(data: any, dirty: boolean): boolean;
+  checkValidity(data: any, dirty: any | boolean, rowData: any): boolean;
+  readonly validationValue: any;
+  isEmpty(value: any): boolean;
+  validateMultiple(): boolean;
+  readonly errors: any[];
+  setCustomValidity(message: any, dirty: any): void;
+  shouldSkipValidation(data: any, dirty: any, rowData: any): boolean;
+  whenReady(): any | Promise<any>;
+  readonly dataReady: any | Promise<any>;
+  asString(value: any): string;
+  public disabled: boolean;
+  setDisabled(element: any, disabled: any | boolean): void;
+  setLoading(element: any, loading: any | boolean): void;
+  selectOptions(select: any, tag: any, options: any, defaultValue: any): void;
+  setSelectValue(select: any, value: any): void;
+  clear(): any;
+  append(element: HTMLElement): void;
+  prepend(element: HTMLElement): void;
+  removeChild(element: HTMLElement): void;
+  attachLogic(): void;
+  elementInfo(): ElementInfo;
+  autofocus(): void;
+  focus(): void;
+  readonly shouldDisable: boolean;
+  readonly info: ElementInfo;
+  public element: any;
+  public validators: (keyof ValidateOptions)[];
+  public calculatedValue: any;
+  public options: any;
+  public labelElement: any;
+}

package/types/components/_classes/componentmodal/componentmodal.d.ts

@@ -0,0 +1,31 @@
+import { Component } from '../component/component';
+
+export class ComponentModal {
+  constructor(component: Component | any, element: any, isOpened: boolean, currentValue: any);
+  public isOpened: boolean;
+  public component: Component | any;
+  public element: any;
+  public currentValue: any;
+  public dataLoaded: boolean;
+  static render(component: Component | any, data: any, topLevel: boolean): any;
+  readonly refs: any;
+  init(): void;
+  setValue(value: any): any;
+  setOpenModalElement(template: string): void;
+  readonly templateRefs: any;
+  loadRefs(): void;
+  removeEventListeners(): void;
+  setEventListeners(): void;
+  isValueChanged(): boolean;
+  setOpenEventListener(): void;
+  openModalHandler(event: Event): void;
+  positionOverElement(): void;
+  openModal(): void;
+  updateView(): void;
+  closeModal(): void;
+  closeModalHandler(event: Event): void;
+  showDialog(): void;
+  closeDialog(event: Event): void;
+  saveDialog(event: Event): void;
+  saveModalValueHandler(event: Event): void;
+}

package/types/components/_classes/field/field.d.ts

@@ -0,0 +1,5 @@
+import { Component } from '../component/component';
+
+export class Field extends Component {
+  render(element: any): any;
+}

package/types/components/_classes/input/input.d.ts

@@ -0,0 +1,30 @@
+import { Component } from '../component/component';
+import { Multivalue } from '../multivalue/multivalue';
+import { Element } from './../../../element.d';
+
+export class Input extends Multivalue {
+  constructor(component: Component | any, options: Object, data: any);
+  readonly inputInfo: {
+    id: string | number;
+    type: string;
+    changeEvent: string;
+    content?: any;
+    attr: any;
+  };
+  readonly maskOptions: { label: any; value: any }[];
+  readonly isMultipleMasksField: boolean;
+  getMaskByName(maskName: string): any;
+  setInputMask(input: any, inputMask: any): any;
+  getMaskOptions(): { label: any; value: any }[];
+  readonly remainingWords: number;
+  renderElement(value: any, index: string | number): any;
+  setCounter(type: string, element: any | Element, count: number, max: number): void;
+  updateValueAt(value: any, flags: any, index: string | number): void;
+  getValueAt(index: string | number): any;
+  updateValue(value: any, flags: any, index: string | number): any;
+  attach(element: any): any;
+  attachElement(element: any | Element, index: string | number): void;
+  readonly widget: any;
+  createWidget(index: string | number): any;
+  addFocusBlurEvents(element: any | Element): void;
+}

package/types/components/_classes/multivalue/multivalue.d.ts

@@ -0,0 +1,16 @@
+import { Field } from '../field/field';
+
+export class Multivalue extends Field {
+  public dataValue: any;
+  readonly defaultValue: any;
+  readonly addAnother: any;
+  useWrapper(): boolean;
+  renderRow(value: any, index: any): any;
+  attach(dom: any): any;
+  attachElement(element: any, index: number | string): any;
+  onSelectMaskHandler(event: any): void;
+  tryAttachMultipleMasksInput(): boolean;
+  updateMask(input: any, mask: any): void;
+  addNewValue(value: any): void;
+  addValue(): void;
+}

package/types/components/_classes/nested/nestedComponent.d.ts

@@ -0,0 +1,61 @@
+import { Field } from '../field/field';
+import { Component } from './../component/component.d';
+
+export class NestedComponent extends Field {
+  constructor(component: any | Component, options: Object, data: any);
+  readonly defaultSchema: any;
+  readonly schema: any;
+  public collapsed: any | boolean;
+  public visible: any | boolean;
+  public parentVisible: boolean;
+  public disabled: boolean;
+  public parentDisabled: any | boolean;
+  readonly ready: any;
+  public currentForm: any;
+  public data: any;
+  getComponents(): any[] | Component[];
+  getAllComponents(): any[] | Component[];
+  everyComponent(fn: Function): void;
+  flattenComponents(): Object;
+  eachComponent(fn: Function): void;
+  getComponent(path: string, fn: Function): Object;
+  getComponentById(id: string, fn: Function): Object;
+  createComponent(component: any | Component, options: Object, data: any, before: any): any | Object;
+  getContainer(): any;
+  readonly componentComponents: any[];
+  readonly nestedKey: string;
+  readonly templateName: string;
+  init(): void;
+  addComponents(data: any, options: Object): void;
+  addComponent(component: any, data: Object, before: HTMLElement, noAdd?: any): Component;
+  render(children: any): any;
+  renderComponents(components: any): any;
+  attach(element: any): any;
+  attachComponents(element: any, components: any | Component[], container: any): any;
+  removeComponent(component: Component, components: Component[]): any;
+  removeComponentByKey(key: string, fn: Function): null;
+  removeComponentById(id: string, fn: Function): null;
+  updateValue(value: any, flags: any, source: any): any;
+  hasChanged(): boolean;
+  checkData(data: any, flags: any, source: any): boolean;
+  checkModal(isValid: boolean, dirty: boolean): void;
+  checkConditions(data: any, norecurse?: any): any;
+  clearOnHide(show: boolean): void;
+  restoreComponentsContext(): void;
+  beforePage(next?: any): any;
+  beforeSubmit(): any;
+  calculateValue(data: any, flags: any): any;
+  isLastPage(): boolean;
+  isValid(data: any, dirty: any): boolean;
+  checkValidity(data: any, dirty: any): any | boolean;
+  setPristine(pristine: any): void;
+  detach(): void;
+  destroy(): void;
+  destroyComponents(): void;
+  readonly errors: any[];
+  getValue(): any;
+  resetValue(): void;
+  readonly dataReady: any;
+  setNestedValue(component: any | Component, value: any, flags: any | Object, changed: boolean): any;
+  setValue(value: any, flags: any | Object): boolean;
+}

package/types/components/_classes/widgetcomponent/widgetComponent.d.ts

@@ -0,0 +1,6 @@
+import { Input } from '../input/input';
+
+export class WidgetComponent extends Input {
+  readonly widgetLocale: any;
+  readonly widgetData: any;
+}

package/types/components/components.d.ts

@@ -0,0 +1,69 @@
+import { ExtendedComponentSchema } from './schema';
+import { Component } from './_classes/component/component';
+import { ComponentModal } from './_classes/componentmodal/componentmodal';
+import { Field } from './_classes/field/field';
+import { Input } from './_classes/input/input';
+import { Multivalue } from './_classes/multivalue/multivalue';
+import { NestedComponent } from './_classes/nested/nestedComponent';
+import { WidgetComponent } from './_classes/widgetcomponent/widgetComponent';
+
+type ClassWithEditForm<C> = C & { editForm: () => { components: ExtendedComponentSchema[] } };
+
+export namespace Components {
+  function setComponents(comps: Object): void;
+  function setComponent(name: string, comp: Object): void;
+  function addComponent(name: string, comp: Object): void;
+  function create(component: any, options: Object, data?: any, flag?: any): Object;
+  let baseEditForm: any;
+  let EditFormUtils: any;
+  namespace components {
+    class base extends Component {}
+    class componentmodal extends ComponentModal {}
+    class input extends Input {}
+    class nested extends NestedComponent {}
+    class multivalue extends Multivalue {}
+    class field extends Field {}
+
+    const address: ClassWithEditForm<typeof WidgetComponent>;
+    const button: ClassWithEditForm<typeof Field>;
+    const checkbox: ClassWithEditForm<typeof Field>;
+    const columns: ClassWithEditForm<typeof NestedComponent>;
+    const container: ClassWithEditForm<typeof NestedComponent>;
+    const content: ClassWithEditForm<typeof Component>;
+    const currency: ClassWithEditForm<typeof Input>;
+    const datagrid: ClassWithEditForm<typeof NestedComponent>;
+    const datamap: ClassWithEditForm<typeof NestedComponent>;
+    const datetime: ClassWithEditForm<typeof WidgetComponent>;
+    const day: ClassWithEditForm<typeof Field>;
+    const editgrid: ClassWithEditForm<typeof NestedComponent>;
+    const email: ClassWithEditForm<typeof WidgetComponent>;
+    const fieldset: ClassWithEditForm<typeof NestedComponent>;
+    const file: ClassWithEditForm<typeof Field>;
+    const form: ClassWithEditForm<typeof Component>;
+    const hidden: ClassWithEditForm<typeof Input>;
+    const htmlelement: ClassWithEditForm<typeof Component>;
+    const number: ClassWithEditForm<typeof Input>;
+    const panel: ClassWithEditForm<typeof NestedComponent>;
+    const password: ClassWithEditForm<typeof WidgetComponent>;
+    const phoneNumber: ClassWithEditForm<typeof WidgetComponent>;
+    const radio: ClassWithEditForm<typeof Field>;
+    const recaptcha: ClassWithEditForm<typeof Component>;
+    const resource: ClassWithEditForm<typeof Field>;
+    const select: ClassWithEditForm<typeof Field>;
+    const selectboxes: ClassWithEditForm<typeof Field>;
+    const signature: ClassWithEditForm<typeof Input>;
+    const sketchpad: ClassWithEditForm<typeof Field>;
+    const survey: ClassWithEditForm<typeof Field>;
+    const table: ClassWithEditForm<typeof NestedComponent>;
+    const tabs: ClassWithEditForm<typeof NestedComponent>;
+    const tagpad: ClassWithEditForm<typeof NestedComponent>;
+    const tags: ClassWithEditForm<typeof Input>;
+    const textarea: ClassWithEditForm<typeof WidgetComponent>;
+    const textfield: ClassWithEditForm<typeof WidgetComponent>;
+    const time: ClassWithEditForm<typeof WidgetComponent>;
+    const tree: ClassWithEditForm<typeof NestedComponent>;
+    const unknown: ClassWithEditForm<typeof Component>;
+    const url: ClassWithEditForm<typeof WidgetComponent>;
+    const well: ClassWithEditForm<typeof NestedComponent>;
+  }
+}

package/types/components/schema.d.ts

@@ -0,0 +1,240 @@
+export interface ComponentSchema<T = any> {
+  /**
+   * The type of component
+   */
+  type?: string;
+
+  /**
+   * The data key for this component (how the data is stored in the database, referenced as API key in docs).
+   */
+  key?: string;
+
+  /**
+   * The HTML label to give this component.
+   */
+  label?: string;
+
+  /**
+   * The input placeholder for this component.
+   */
+  placeholder?: string;
+
+  /**
+   * Determines if this component provides an input.
+   */
+  input?: boolean;
+
+  /**
+   * If this component should be included as a column within a submission table.
+   * Determines if this field will show in the data tables output.
+   */
+  tableView?: boolean;
+
+  /**
+   * If this component should allow an array of values to be captured.
+   */
+  multiple?: boolean;
+
+  /**
+   * If the data of this component should be protected (no GET api requests can see the data)
+   */
+  protected?: boolean;
+
+  /**
+   * The prefix text to put in front of the input
+   */
+  prefix?: string;
+
+  /**
+   * The suffix text to put after the input
+   */
+  suffix?: string;
+
+  /**
+   * The default value of this compoennt.
+   */
+  defaultValue?: T;
+
+  /**
+   * If the value of this field should be cleared when it is conditionally hidden.
+   */
+  clearOnHide?: boolean;
+
+  /**
+   * Validate if the value of this component should be unique within the form.
+   */
+  unique?: boolean;
+
+  /**
+   * If the value of this component should be persisted within the backend api database.
+   */
+  persistent?: boolean;
+
+  /**
+   * Determines if the component should be within the form, but not visible.
+   * This can be overridden with the conditionals.
+   */
+  hidden?: boolean;
+
+  /**
+   * The validation criteria for this component.
+   */
+  validate?: ValidateOptions;
+
+  /**
+   * Determines when this component should be added to the form for both processing and input.
+   */
+  conditional?: ConditionalOptions;
+
+  /**
+   * Allows customizable errors to be displayed for each component when an error occurs. This is an object with the following keys:
+      required
+      min
+      max
+      minLength
+      maxLength
+      invalid_email
+      invalid_date
+      pattern
+      custom
+
+    An object (keys listed above), values are the strings you wish to display. Each string has the {{ field }} to use within the string. Example.
+    {"required": "{{ field }} is required. Try again."}
+   */
+  errors?: Object;
+
+  /**
+   * Allows changing the component definition in reaction to data entered in a form. For example, changing a field to required, disabled or hidden when a value is entered.
+    An array of instances of the Field Logic Schema
+    Fyi: https://github.com/formio/formio.js/wiki/Field-Logic-Schema
+   */
+  logic?: Object[];
+
+  /**
+   * The custom CSS class to provide to this component.
+   */
+  customClass?: string;
+
+  /**
+   * If true, will show label when component is in a datagrid.
+   */
+  dataGridLabel?: boolean;
+
+  labelPosition?: 'top' | 'bottom' | 'left' | 'right';
+  labelWidth?: number;
+  labelMargin?: number;
+  description?: string;
+  errorLabel?: string;
+  tooltip?: string;
+  hideLabel?: boolean;
+  tabindex?: string;
+  disabled?: boolean;
+  autofocus?: boolean;
+  dbIndex?: boolean;
+  customDefaultValue?: any;
+  calculateValue?: any;
+  allowCalculateOverride?: boolean;
+  widget?: any; // Input widgets i.e. calendar widget
+
+  /**
+   * This will refresh this component when this field changes.
+   */
+  refreshOn?: string;
+
+  /**
+   * Determines if we should clear our value when a refresh occurs.
+   */
+  clearOnRefresh?: boolean;
+
+  /**
+   * This will perform the validation on either "change" or "blur" of the input element.
+   */
+  validateOn?: 'change' | 'blur';
+}
+
+export type ExtendedComponentSchema<T = any> = ComponentSchema<T> & { [key: string]: any };
+
+export interface ConditionalOptions {
+  /** If the field should show if the condition is true */
+  show?: boolean;
+  /** The field API key that it should compare its value against to determine if the condition is triggered. */
+  when?: string;
+  /** The value that should be checked against the comparison component */
+  eq?: string;
+  /** The JSON Logic to determine if this component is conditionally available.
+   * Fyi: http://jsonlogic.com/
+   */
+  json?: Object;
+}
+
+export interface ValidateOptions {
+  /**
+   * If this component is required.
+   */
+  required?: boolean;
+
+  /**
+   * For text input, this checks the minimum length of text for valid input
+   */
+  minLength?: number;
+
+  /**
+   * For text input, this checks the maximum length of text for valid input
+   */
+  maxLength?: number;
+
+  /**
+   * For text input, this checks the text agains a Regular expression pattern.
+   */
+  pattern?: string;
+
+  /**
+   * A custom javascript based validation or a JSON object for using JSON Logic
+   */
+  custom?: any;
+
+  /**
+   * If the custom validation should remain private (only the backend will see it and execute it).
+   */
+  customPrivate?: boolean;
+
+  /**
+   * Minimum value for numbers
+   */
+  min?: number;
+
+  /**
+   * Maximum value for numbers
+   */
+  max?: number;
+
+  minSelectedCount?: number;
+  maxSelectedCount?: number;
+  minWords?: number;
+  maxWords?: number;
+  email?: boolean;
+  url?: boolean;
+  date?: boolean;
+  day?: boolean;
+  json?: string;
+  mask?: boolean;
+  minDate?: any;
+  maxDate?: any;
+}
+
+export interface ElementInfo {
+  type: string;
+  component: ExtendedComponentSchema;
+  changeEvent: string;
+  attr: any;
+  content: string;
+}
+
+export interface BuilderInfo {
+  title: string;
+  group: string;
+  icon: string;
+  documentation?: string;
+  weight?: number;
+  schema?: ExtendedComponentSchema;
+}

package/types/displays.d.ts

@@ -0,0 +1,7 @@
+export class Displays {
+  static readonly displays: any;
+  static addDisplay(name: string, display: any): void;
+  static addDisplays(name: string, display: any): void;
+  static getDisplay(name: string): any;
+  static getDisplays(name: string): any;
+}