@shopgate/pwa-ui-shared 7.30.0-alpha.6 → 7.30.0-alpha.8

package/Form/Builder/components/TextElement.js

@@ -1,6 +1,51 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{PureComponent}from'react';import PropTypes from'prop-types';import TextField from"../../../TextField";import{ELEMENT_TYPE_TEXT,ELEMENT_TYPE_NUMBER,ELEMENT_TYPE_EMAIL,ELEMENT_TYPE_PASSWORD,ELEMENT_TYPE_DATE,ELEMENT_TYPE_PHONE}from"../elementTypes";// Map element type to input type
-var mapping=_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({},ELEMENT_TYPE_TEXT,'text'),ELEMENT_TYPE_NUMBER,'number'),ELEMENT_TYPE_EMAIL,'email'),ELEMENT_TYPE_PASSWORD,'password'),ELEMENT_TYPE_DATE,'date'),ELEMENT_TYPE_PHONE,'tel');/**
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import TextField from "../../../TextField";
+import { ELEMENT_TYPE_TEXT, ELEMENT_TYPE_NUMBER, ELEMENT_TYPE_EMAIL, ELEMENT_TYPE_PASSWORD, ELEMENT_TYPE_DATE, ELEMENT_TYPE_PHONE } from "../elementTypes";
+
+// Map element type to input type
+const mapping = {
+  [ELEMENT_TYPE_TEXT]: 'text',
+  [ELEMENT_TYPE_NUMBER]: 'number',
+  [ELEMENT_TYPE_EMAIL]: 'email',
+  [ELEMENT_TYPE_PASSWORD]: 'password',
+  [ELEMENT_TYPE_DATE]: 'date',
+  [ELEMENT_TYPE_PHONE]: 'tel'
+};
+
+/**
  * React component that takes the element and additional data and renders a configured text input.
- */var TextElement=/*#__PURE__*/function(_PureComponent){function TextElement(){_classCallCheck(this,TextElement);return _callSuper(this,TextElement,arguments);}_inherits(TextElement,_PureComponent);return _createClass(TextElement,[{key:"render",value:/**
+ */
+class TextElement extends PureComponent {
+  /**
    * @returns {JSX}
-   */function render(){var _this$props=this.props,element=_this$props.element,errorText=_this$props.errorText,name=_this$props.name,style=_this$props.style,value=_this$props.value;var type=mapping[element.type];return React.createElement(TextField,{type:type,name:name,className:style.fields,label:element.label,value:value,onChange:element.handleChange,errorText:errorText,isControlled:true,translateErrorText:false});}}]);}(PureComponent);_defineProperty(TextElement,"defaultProps",{value:'',style:{field:''}});export default TextElement;
+   */
+  render() {
+    const {
+      element,
+      errorText,
+      name,
+      style,
+      value
+    } = this.props;
+    const type = mapping[element.type];
+    return /*#__PURE__*/React.createElement(TextField, {
+      type: type,
+      name: name,
+      className: style.fields,
+      label: element.label,
+      value: value,
+      onChange: element.handleChange,
+      errorText: errorText,
+      isControlled: true,
+      translateErrorText: false
+    });
+  }
+}
+TextElement.defaultProps = {
+  value: '',
+  style: {
+    field: ''
+  }
+};
+export default TextElement;

package/Form/Builder/elementTypes.js

@@ -1 +1,11 @@
-export var ELEMENT_TYPE_EMAIL='email';export var ELEMENT_TYPE_PASSWORD='password';export var ELEMENT_TYPE_TEXT='text';export var ELEMENT_TYPE_NUMBER='number';export var ELEMENT_TYPE_SELECT='select';export var ELEMENT_TYPE_COUNTRY='country';export var ELEMENT_TYPE_PROVINCE='province';export var ELEMENT_TYPE_CHECKBOX='checkbox';export var ELEMENT_TYPE_RADIO='radio';export var ELEMENT_TYPE_DATE='date';export var ELEMENT_TYPE_PHONE='phone';
+export const ELEMENT_TYPE_EMAIL = 'email';
+export const ELEMENT_TYPE_PASSWORD = 'password';
+export const ELEMENT_TYPE_TEXT = 'text';
+export const ELEMENT_TYPE_NUMBER = 'number';
+export const ELEMENT_TYPE_SELECT = 'select';
+export const ELEMENT_TYPE_COUNTRY = 'country';
+export const ELEMENT_TYPE_PROVINCE = 'province';
+export const ELEMENT_TYPE_CHECKBOX = 'checkbox';
+export const ELEMENT_TYPE_RADIO = 'radio';
+export const ELEMENT_TYPE_DATE = 'date';
+export const ELEMENT_TYPE_PHONE = 'phone';

package/Form/Builder/index.js

@@ -1,64 +1,310 @@
-import _isEqual from"lodash/isEqual";function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component,Fragment}from'react';import PropTypes from'prop-types';import{logger}from'@shopgate/pwa-core/helpers';import Portal from'@shopgate/pwa-common/components/Portal';import Form from'@shopgate/pwa-ui-shared/Form';import{BEFORE,AFTER}from'@shopgate/pwa-common/constants/Portals';import ActionListener from"./classes/ActionListener";import{ELEMENT_TYPE_EMAIL,ELEMENT_TYPE_PASSWORD,ELEMENT_TYPE_TEXT,ELEMENT_TYPE_NUMBER,ELEMENT_TYPE_SELECT,ELEMENT_TYPE_COUNTRY,ELEMENT_TYPE_PROVINCE,ELEMENT_TYPE_CHECKBOX,ELEMENT_TYPE_RADIO,ELEMENT_TYPE_DATE,ELEMENT_TYPE_PHONE}from"./elementTypes";import TextElement from"./components/TextElement";import SelectElement from"./components/SelectElement";import CountryElement from"./components/CountryElement";import ProvinceElement from"./components/ProvinceElement";import RadioElement from"./components/RadioElement";import CheckboxElement from"./components/CheckboxElement";import buildFormElements from"./builders/buildFormElements";import buildFormDefaults from"./builders/buildFormDefaults";import buildCountryList from"./builders/buildCountryList";import buildProvinceList from"./builders/buildProvinceList";import buildValidationErrorList from"./builders/buildValidationErrorList";/**
+import _isEqual from "lodash/isEqual";
+import "core-js/modules/es.string.replace.js";
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { logger } from '@shopgate/pwa-core/helpers';
+import Portal from '@shopgate/pwa-common/components/Portal';
+import Form from '@shopgate/pwa-ui-shared/Form';
+import { BEFORE, AFTER } from '@shopgate/pwa-common/constants/Portals';
+import ActionListener from "./classes/ActionListener";
+import { ELEMENT_TYPE_EMAIL, ELEMENT_TYPE_PASSWORD, ELEMENT_TYPE_TEXT, ELEMENT_TYPE_NUMBER, ELEMENT_TYPE_SELECT, ELEMENT_TYPE_COUNTRY, ELEMENT_TYPE_PROVINCE, ELEMENT_TYPE_CHECKBOX, ELEMENT_TYPE_RADIO, ELEMENT_TYPE_DATE, ELEMENT_TYPE_PHONE } from "./elementTypes";
+import TextElement from "./components/TextElement";
+import SelectElement from "./components/SelectElement";
+import CountryElement from "./components/CountryElement";
+import ProvinceElement from "./components/ProvinceElement";
+import RadioElement from "./components/RadioElement";
+import CheckboxElement from "./components/CheckboxElement";
+import buildFormElements from "./builders/buildFormElements";
+import buildFormDefaults from "./builders/buildFormDefaults";
+import buildCountryList from "./builders/buildCountryList";
+import buildProvinceList from "./builders/buildProvinceList";
+import buildValidationErrorList from "./builders/buildValidationErrorList";
+
+/**
  * Takes a string and converts it to a part to be used in a portal name
  * @package FormBuilder
  * @param {string} s The string to be sanitized
  * @return {string}
- */var sanitize=function sanitize(s){return s.replace(/[\\._]/,'-');};/**
+ */
+const sanitize = s => s.replace(/[\\._]/, '-');
+/**
  * Optional select element
  * @type {Object}
- */var emptySelectOption={'':''};/**
+ */
+const emptySelectOption = {
+  '': ''
+};
+
+/**
  * Takes a form configuration and handles rendering and updates of the form fields.
  * Note: Only one country and one province element is supported per FormBuilder instance.
- */var Builder=/*#__PURE__*/function(_Component){function Builder(props){var _this2;_classCallCheck(this,Builder);_this2=_callSuper(this,Builder,[props]);// Prepare internal state
-/**
-   * Sorts the elements by "sortOrder" property
-   *
-   * @typedef {Object} FormElement
-   * @property {number} sortOrder
-   *
-   * @param {FormElement} element1 First element
-   * @param {FormElement} element2 Second element
-   * @returns {number}
-   */_defineProperty(_this2,"elementSortFunc",function(element1,element2){// Keep current sort order when no specific sort order was set for both
-if(element1.sortOrder===undefined||element2.sortOrder===undefined){return 0;}// Sort in ascending order of sortOrder otherwise
-return element1.sortOrder-element2.sortOrder;});/**
-   * Element change handler based on it's type,
-   * @param {string} elementId Element to create the handler for
-   * @param {string} value Element value
-   */_defineProperty(_this2,"elementChangeHandler",function(elementId,value){// Apply value change to new state
-var newState=_extends({},_this2.state,{formData:_extends({},_this2.state.formData,_defineProperty({},elementId,value))});// Remove validation error message on first change of the element
-Object.keys(newState.errors).forEach(function(key){// Action listeners might add some again
-if(_this2.state.formData[key]!==newState.formData[key]){delete newState.errors[key];}});var hasBackendValidationErrors=Object.keys(newState.errors).length>0;// Handle context sensitive functionality by via "action" listener and use the "new" state
-var updatedState=_this2.actionListener.notify(elementId,_this2.state,newState);// TODO: handle frontend validation errors and set "hasErrors" accordingly
-var hasErrors=false;// Check "required" fields for all visible elements and enable rendering on changes
-_this2.formElements.forEach(function(formElement){if(!updatedState.elementVisibility[formElement.id]||!formElement.required){return;}var tmpVal=updatedState.formData[formElement.id];var tmpResult=tmpVal===null||tmpVal===undefined||tmpVal===''||tmpVal===false;hasErrors=hasErrors||tmpResult;});var hasFrontendValidationErrors=Object.keys(updatedState.errors).length<=0;var hasValidationErrors=hasBackendValidationErrors&&hasFrontendValidationErrors;// Handle state internally and send an "onChange" event to parent if this finished
-_this2.setState(updatedState);// Transform to external structure (unavailable ones will be set undefined)
-var updateData={};_this2.formElements.forEach(function(el){if(el.custom){if(updateData.customAttributes===undefined){updateData.customAttributes={};}updateData.customAttributes[el.id]=updatedState.formData[el.id];}else{updateData[el.id]=updatedState.formData[el.id];}});// Trigger the given update action
-_this2.props.handleUpdate(updateData,hasErrors||hasValidationErrors);});/**
-   * Takes an element of any type and renders it depending on type.
-   * Also puts portals around the element.
-   * @param {Object} element The data of the element to be rendered
-   * @returns {JSX}
-   */_defineProperty(_this2,"renderElement",function(element){var elementName="".concat(_this2.props.name,".").concat(element.id);var elementErrorText=_this2.state.errors[element.id]||'';var elementValue=_this2.state.formData[element.id];var elementVisible=_this2.state.elementVisibility[element.id]||false;if(!elementVisible){return null;}/*
-     * Elements do check the type before they render themselves, but not even trying to render
-     * creates a better React DOM
-     */switch(element.type){case ELEMENT_TYPE_TEXT:case ELEMENT_TYPE_NUMBER:case ELEMENT_TYPE_EMAIL:case ELEMENT_TYPE_PASSWORD:case ELEMENT_TYPE_DATE:case ELEMENT_TYPE_PHONE:{return React.createElement(TextElement,{name:elementName,element:element,errorText:elementErrorText,value:elementValue||'',visible:elementVisible});}case ELEMENT_TYPE_SELECT:return React.createElement(SelectElement,{name:elementName,element:element,errorText:elementErrorText,value:elementValue,visible:elementVisible});case ELEMENT_TYPE_COUNTRY:return React.createElement(CountryElement,{name:elementName,element:element,errorText:elementErrorText,value:elementValue,visible:elementVisible,countryList:_this2.countryList});case ELEMENT_TYPE_PROVINCE:{var countryElement=_this2.formElements.find(function(el){return el.type===ELEMENT_TYPE_COUNTRY;});var provincesList=countryElement&&_this2.state.formData[countryElement.id]?buildProvinceList(_this2.state.formData[countryElement.id],element.required?null:emptySelectOption):{};return React.createElement(ProvinceElement,{name:elementName,element:element,errorText:elementErrorText,value:elementValue,visible:elementVisible,provincesList:provincesList});}case ELEMENT_TYPE_RADIO:{return React.createElement(RadioElement,{name:elementName,element:element,errorText:elementErrorText,value:elementValue,visible:elementVisible});}case ELEMENT_TYPE_CHECKBOX:{return React.createElement(CheckboxElement,{name:elementName,element:element,errorText:elementErrorText,value:elementValue,visible:elementVisible});}default:{logger.error("Unknown form element type: ".concat(element.type));break;}}return null;});_this2.state={elementVisibility:{},formData:{},// Convert errors structure to direct access errors
-errors:buildValidationErrorList(props.validationErrors)};// Reorganize form elements into a structure that can be easily rendered
-var formElements=buildFormElements(props.config,_this2.elementChangeHandler);// Compute defaults
-var formDefaults=buildFormDefaults(formElements,props.defaults);// Assign defaults to state
-_this2.state.formData=formDefaults;// Handle fixed visibilities
-formElements.forEach(function(element){// Assume as visible except it's explicitly set to "false"
-_this2.state.elementVisibility[element.id]=element.visible!==false;});_this2.actionListener=new ActionListener(buildProvinceList,formDefaults);_this2.actionListener.attachAll(formElements);// Sort the elements after attaching action listeners to keep action hierarchy same as creation
-_this2.formElements=formElements.sort(_this2.elementSortFunc);// Assemble combined country/province list based on the config element
-var _countryElement=_this2.formElements.find(function(el){return el.type===ELEMENT_TYPE_COUNTRY;});if(_countryElement){_this2.countryList=buildCountryList(_countryElement,emptySelectOption);var provinceElement=_this2.formElements.find(function(el){return el.type===ELEMENT_TYPE_PROVINCE;});if(provinceElement&&provinceElement.required&&!!formDefaults[_countryElement.id]&&!formDefaults[provinceElement.id]){// Set default for province field for given country
-var _Object$values3=Object.values(buildProvinceList(formDefaults[_countryElement.id])),_Object$values4=_slicedToArray(_Object$values3,1),first=_Object$values4[0];if(first){_this2.state.formData[provinceElement.id]=first;}}}// Final form initialization, by triggering actionListeners and enable rendering for elements
-var _newState=_this2.state;_this2.formElements.forEach(function(element){_newState=_this2.actionListener.notify(element.id,_this2.state,_newState);});_this2.state=_newState;return _this2;}/**
+ */
+class Builder extends Component {
+  /**
+   * Initializes the component.
+   * @param {Object} props The components props.
+   */
+  constructor(props) {
+    super(props);
+
+    // Prepare internal state
+    /**
+     * Sorts the elements by "sortOrder" property
+     *
+     * @typedef {Object} FormElement
+     * @property {number} sortOrder
+     *
+     * @param {FormElement} element1 First element
+     * @param {FormElement} element2 Second element
+     * @returns {number}
+     */
+    this.elementSortFunc = (element1, element2) => {
+      // Keep current sort order when no specific sort order was set for both
+      if (element1.sortOrder === undefined || element2.sortOrder === undefined) {
+        return 0;
+      }
+
+      // Sort in ascending order of sortOrder otherwise
+      return element1.sortOrder - element2.sortOrder;
+    };
+    /**
+     * Element change handler based on it's type,
+     * @param {string} elementId Element to create the handler for
+     * @param {string} value Element value
+     */
+    this.elementChangeHandler = (elementId, value) => {
+      // Apply value change to new state
+      const newState = {
+        ...this.state,
+        formData: {
+          ...this.state.formData,
+          [elementId]: value
+        }
+      };
+
+      // Remove validation error message on first change of the element
+      Object.keys(newState.errors).forEach(key => {
+        // Action listeners might add some again
+        if (this.state.formData[key] !== newState.formData[key]) {
+          delete newState.errors[key];
+        }
+      });
+      const hasBackendValidationErrors = Object.keys(newState.errors).length > 0;
+
+      // Handle context sensitive functionality by via "action" listener and use the "new" state
+      const updatedState = this.actionListener.notify(elementId, this.state, newState);
+
+      // TODO: handle frontend validation errors and set "hasErrors" accordingly
+      let hasErrors = false;
+
+      // Check "required" fields for all visible elements and enable rendering on changes
+      this.formElements.forEach(formElement => {
+        if (!updatedState.elementVisibility[formElement.id] || !formElement.required) {
+          return;
+        }
+        const tmpVal = updatedState.formData[formElement.id];
+        const tmpResult = tmpVal === null || tmpVal === undefined || tmpVal === '' || tmpVal === false;
+        hasErrors = hasErrors || tmpResult;
+      });
+      const hasFrontendValidationErrors = Object.keys(updatedState.errors).length <= 0;
+      const hasValidationErrors = hasBackendValidationErrors && hasFrontendValidationErrors;
+
+      // Handle state internally and send an "onChange" event to parent if this finished
+      this.setState(updatedState);
+
+      // Transform to external structure (unavailable ones will be set undefined)
+      const updateData = {};
+      this.formElements.forEach(el => {
+        if (el.custom) {
+          if (updateData.customAttributes === undefined) {
+            updateData.customAttributes = {};
+          }
+          updateData.customAttributes[el.id] = updatedState.formData[el.id];
+        } else {
+          updateData[el.id] = updatedState.formData[el.id];
+        }
+      });
+
+      // Trigger the given update action
+      this.props.handleUpdate(updateData, hasErrors || hasValidationErrors);
+    };
+    /**
+     * Takes an element of any type and renders it depending on type.
+     * Also puts portals around the element.
+     * @param {Object} element The data of the element to be rendered
+     * @returns {JSX}
+     */
+    this.renderElement = element => {
+      const elementName = `${this.props.name}.${element.id}`;
+      const elementErrorText = this.state.errors[element.id] || '';
+      const elementValue = this.state.formData[element.id];
+      const elementVisible = this.state.elementVisibility[element.id] || false;
+      if (!elementVisible) {
+        return null;
+      }
+
+      /*
+       * Elements do check the type before they render themselves, but not even trying to render
+       * creates a better React DOM
+       */
+      switch (element.type) {
+        case ELEMENT_TYPE_TEXT:
+        case ELEMENT_TYPE_NUMBER:
+        case ELEMENT_TYPE_EMAIL:
+        case ELEMENT_TYPE_PASSWORD:
+        case ELEMENT_TYPE_DATE:
+        case ELEMENT_TYPE_PHONE:
+          {
+            return /*#__PURE__*/React.createElement(TextElement, {
+              name: elementName,
+              element: element,
+              errorText: elementErrorText,
+              value: elementValue || '',
+              visible: elementVisible
+            });
+          }
+        case ELEMENT_TYPE_SELECT:
+          return /*#__PURE__*/React.createElement(SelectElement, {
+            name: elementName,
+            element: element,
+            errorText: elementErrorText,
+            value: elementValue,
+            visible: elementVisible
+          });
+        case ELEMENT_TYPE_COUNTRY:
+          return /*#__PURE__*/React.createElement(CountryElement, {
+            name: elementName,
+            element: element,
+            errorText: elementErrorText,
+            value: elementValue,
+            visible: elementVisible,
+            countryList: this.countryList
+          });
+        case ELEMENT_TYPE_PROVINCE:
+          {
+            const countryElement = this.formElements.find(el => el.type === ELEMENT_TYPE_COUNTRY);
+            const provincesList = countryElement && this.state.formData[countryElement.id] ? buildProvinceList(this.state.formData[countryElement.id], element.required ? null : emptySelectOption) : {};
+            return /*#__PURE__*/React.createElement(ProvinceElement, {
+              name: elementName,
+              element: element,
+              errorText: elementErrorText,
+              value: elementValue,
+              visible: elementVisible,
+              provincesList: provincesList
+            });
+          }
+        case ELEMENT_TYPE_RADIO:
+          {
+            return /*#__PURE__*/React.createElement(RadioElement, {
+              name: elementName,
+              element: element,
+              errorText: elementErrorText,
+              value: elementValue,
+              visible: elementVisible
+            });
+          }
+        case ELEMENT_TYPE_CHECKBOX:
+          {
+            return /*#__PURE__*/React.createElement(CheckboxElement, {
+              name: elementName,
+              element: element,
+              errorText: elementErrorText,
+              value: elementValue,
+              visible: elementVisible
+            });
+          }
+        default:
+          {
+            logger.error(`Unknown form element type: ${element.type}`);
+            break;
+          }
+      }
+      return null;
+    };
+    this.state = {
+      elementVisibility: {},
+      formData: {},
+      // Convert errors structure to direct access errors
+      errors: buildValidationErrorList(props.validationErrors)
+    };
+
+    // Reorganize form elements into a structure that can be easily rendered
+    const formElements = buildFormElements(props.config, this.elementChangeHandler);
+    // Compute defaults
+    const formDefaults = buildFormDefaults(formElements, props.defaults);
+    // Assign defaults to state
+    this.state.formData = formDefaults;
+
+    // Handle fixed visibilities
+    formElements.forEach(element => {
+      // Assume as visible except it's explicitly set to "false"
+      this.state.elementVisibility[element.id] = element.visible !== false;
+    });
+    this.actionListener = new ActionListener(buildProvinceList, formDefaults);
+    this.actionListener.attachAll(formElements);
+
+    // Sort the elements after attaching action listeners to keep action hierarchy same as creation
+    this.formElements = formElements.sort(this.elementSortFunc);
+
+    // Assemble combined country/province list based on the config element
+    const _countryElement = this.formElements.find(el => el.type === ELEMENT_TYPE_COUNTRY);
+    if (_countryElement) {
+      this.countryList = buildCountryList(_countryElement, emptySelectOption);
+      const provinceElement = this.formElements.find(el => el.type === ELEMENT_TYPE_PROVINCE);
+      if (provinceElement && provinceElement.required && !!formDefaults[_countryElement.id] && !formDefaults[provinceElement.id]) {
+        // Set default for province field for given country
+        const [first] = Object.values(buildProvinceList(formDefaults[_countryElement.id]));
+        if (first) {
+          this.state.formData[provinceElement.id] = first;
+        }
+      }
+    }
+
+    // Final form initialization, by triggering actionListeners and enable rendering for elements
+    let _newState = this.state;
+    this.formElements.forEach(element => {
+      _newState = this.actionListener.notify(element.id, this.state, _newState);
+    });
+    this.state = _newState;
+  }
+
+  /**
    * Handles response of validation errors
    * @param {Object} nextProps The new props object with changed data
-   */_inherits(Builder,_Component);return _createClass(Builder,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){var oldValidationErrors=buildValidationErrorList(this.props.validationErrors);var newValidationErrors=buildValidationErrorList(nextProps.validationErrors);if(!_isEqual(oldValidationErrors,newValidationErrors)){this.setState({errors:newValidationErrors});}}},{key:"render",value:/**
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const oldValidationErrors = buildValidationErrorList(this.props.validationErrors);
+    const newValidationErrors = buildValidationErrorList(nextProps.validationErrors);
+    if (!_isEqual(oldValidationErrors, newValidationErrors)) {
+      this.setState({
+        errors: newValidationErrors
+      });
+    }
+  }
+  /**
    * Renders the component based on the given config
    * @return {JSX}
-   */function render(){var _this3=this;return React.createElement(Fragment,null,React.createElement(Form,{onSubmit:this.props.onSubmit},React.createElement("div",{className:this.props.className},this.formElements.map(function(element){return React.createElement(Fragment,{key:"".concat(_this3.props.name,".").concat(element.id)},React.createElement(Portal,{name:"".concat(sanitize(_this3.props.name),".").concat(sanitize(element.id),".").concat(BEFORE)}),React.createElement(Portal,{name:"".concat(sanitize(_this3.props.name),".").concat(sanitize(element.id))},_this3.renderElement(element)),React.createElement(Portal,{name:"".concat(sanitize(_this3.props.name),".").concat(sanitize(element.id),".").concat(AFTER)}));}))));}}]);}(Component);_defineProperty(Builder,"defaultProps",{className:'',defaults:{},onSubmit:function onSubmit(){},validationErrors:[]/**
-   * Initializes the component.
-   * @param {Object} props The components props.
-   */});export default Builder;
+   */
+  render() {
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Form, {
+      onSubmit: this.props.onSubmit
+    }, /*#__PURE__*/React.createElement("div", {
+      className: this.props.className
+    }, this.formElements.map(element => /*#__PURE__*/React.createElement(Fragment, {
+      key: `${this.props.name}.${element.id}`
+    }, /*#__PURE__*/React.createElement(Portal, {
+      name: `${sanitize(this.props.name)}.${sanitize(element.id)}.${BEFORE}`
+    }), /*#__PURE__*/React.createElement(Portal, {
+      name: `${sanitize(this.props.name)}.${sanitize(element.id)}`
+    }, this.renderElement(element)), /*#__PURE__*/React.createElement(Portal, {
+      name: `${sanitize(this.props.name)}.${sanitize(element.id)}.${AFTER}`
+    }))))));
+  }
+}
+Builder.defaultProps = {
+  className: '',
+  defaults: {},
+  onSubmit: () => {},
+  validationErrors: []
+};
+export default Builder;