@shopgate/engage 7.27.3-alpha.17 → 7.27.3-alpha.19

package/components/ChipLayout/index.js

@@ -1,4 +1,4 @@
-function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_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);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}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}});Object.defineProperty(subClass,"prototype",{writable:false});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 _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}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 _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}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}from'react';import PropTypes from'prop-types';import debounce from'lodash/debounce';import I18n from'@shopgate/pwa-common/components/I18n';import RippleButton from'@shopgate/pwa-ui-shared/RippleButton';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import styles from"./style";var variables=themeConfig.variables;/**
+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,{Component}from'react';import PropTypes from'prop-types';import debounce from'lodash/debounce';import I18n from'@shopgate/pwa-common/components/I18n';import RippleButton from'@shopgate/pwa-ui-shared/RippleButton';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import styles from"./style";var variables=themeConfig.variables;/**
  * The height of one row.
  * @type {number}
  */export var CHIP_ROW_HEIGHT=34;/**
@@ -6,7 +6,9 @@ function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeo
  * @type {number}
  */export var CHIP_MINIMUM_WIDTH=60;/**
  * The ChipLayout component.
- */var ChipLayout=/*#__PURE__*/function(_Component){_inherits(ChipLayout,_Component);var _super=_createSuper(ChipLayout);function ChipLayout(){var _this;_classCallCheck(this,ChipLayout);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_super.call.apply(_super,[this].concat(args));_defineProperty(_assertThisInitialized(_this),"processHiddenElementsDebounced",debounce(_this.processHiddenElements,50));return _this;}_createClass(ChipLayout,[{key:"componentDidMount",value:/**
+ */var ChipLayout=/*#__PURE__*/function(_Component){function ChipLayout(){var _this2;_classCallCheck(this,ChipLayout);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,ChipLayout,[].concat(args));/**
+   * Debounced, eg. layout effect
+   */_defineProperty(_this2,"processHiddenElementsDebounced",debounce(_this2.processHiddenElements,50));return _this2;}_inherits(ChipLayout,_Component);return _createClass(ChipLayout,[{key:"componentDidMount",value:/**
    * When the component mounts we need to initially process all children.
    */function componentDidMount(){this.processHiddenElementsDebounced();}/**
    * Eveyry time pathname or other prop changes this callback is called.
@@ -25,14 +27,12 @@ return CHIP_ROW_HEIGHT*this.props.maxRows+8;}/**
    * @return {string} The store button class name.
    */},{key:"moreButtonStyles",get:function get(){if(this.props.invertMoreButton){return styles.moreButtonInverted;}return styles.moreButton;}/**
    * Loops through all children to make sure the more button appears if there is too much content.
-   */},{key:"processHiddenElements",value:function processHiddenElements(){var _this2=this;if(!this.containerRef){return;}// Find out if there are overflowing elements.
+   */},{key:"processHiddenElements",value:function processHiddenElements(){var _this3=this;if(!this.containerRef){return;}// Find out if there are overflowing elements.
 var lastVisibleElement=0;var showMoreButton=this.containerRef.scrollHeight>this.containerRef.clientHeight;var containerHeight=this.containerRef.clientHeight;var chips=Array.from(this.layoutRef.children);this.moreButtonRef.style.display=showMoreButton?'block':'none';this.layoutRef.style.minHeight=showMoreButton?"".concat(this.maxContentHeight,"px"):'0px';// If the more button is not visible we don't need to process anything.
 if(!showMoreButton){return;}// Hide or show chips that are hidden due to overflow.
 chips.forEach(function(child,index){var isVisible=child.offsetTop+child.clientHeight<containerHeight;child.setAttribute('style',"display: ".concat(isVisible?'flex':'none',";"));if(isVisible){lastVisibleElement=index;}});// Hide the more button if previous assumption was incorrect.
 if(lastVisibleElement===chips.length-1){this.moreButtonRef.style.display='none';return;}// Hide elements so that the 'more button' has enough space.
-chips.slice(0,lastVisibleElement+1).reverse().every(function(element){var offsetBottom=element.offsetTop+element.clientHeight;if(_this2.moreButtonRef.offsetTop>offsetBottom){return true;}var buttonSpaceRequired=_this2.moreButtonRef.clientWidth+variables.gap.big;var elementRight=_this2.containerRef.clientWidth-(element.offsetLeft+element.clientWidth);var spaceDiff=buttonSpaceRequired-elementRight;var remainingChipWidth=element.clientWidth-spaceDiff;if(remainingChipWidth>CHIP_MINIMUM_WIDTH){element.setAttribute('style',"max-width: ".concat(remainingChipWidth,"px"));return false;}if(element.offsetTop!==chips[lastVisibleElement].offsetTop){element.setAttribute('style','display: none');return false;}element.setAttribute('style','display: none');return true;});}/**
-   * Debounced, eg. layout effect
-   */},{key:"render",value:/**
+chips.slice(0,lastVisibleElement+1).reverse().every(function(element){var offsetBottom=element.offsetTop+element.clientHeight;if(_this3.moreButtonRef.offsetTop>offsetBottom){return true;}var buttonSpaceRequired=_this3.moreButtonRef.clientWidth+variables.gap.big;var elementRight=_this3.containerRef.clientWidth-(element.offsetLeft+element.clientWidth);var spaceDiff=buttonSpaceRequired-elementRight;var remainingChipWidth=element.clientWidth-spaceDiff;if(remainingChipWidth>CHIP_MINIMUM_WIDTH){element.setAttribute('style',"max-width: ".concat(remainingChipWidth,"px"));return false;}if(element.offsetTop!==chips[lastVisibleElement].offsetTop){element.setAttribute('style','display: none');return false;}element.setAttribute('style','display: none');return true;});}},{key:"render",value:/**
    * Renders the component.
    * @returns {JSX}
-   */function render(){var _this3=this;return/*#__PURE__*/React.createElement("div",{ref:function ref(element){_this3.containerRef=element;},className:"".concat(styles.container(this.maxContentHeight)," engage__chip-layout")},/*#__PURE__*/React.createElement("div",{ref:function ref(element){_this3.layoutRef=element;},className:styles.layout},this.props.children),/*#__PURE__*/React.createElement("div",{ref:function ref(element){_this3.moreButtonRef=element;},className:styles.moreButtonWrapper},/*#__PURE__*/React.createElement(RippleButton,{fill:true,type:"plain",className:this.moreButtonStyles,onClick:this.props.handleMoreButton},/*#__PURE__*/React.createElement(I18n.Text,{string:this.props.moreLabel}))));}}]);return ChipLayout;}(Component);_defineProperty(ChipLayout,"defaultProps",{children:null,handleMoreButton:function handleMoreButton(){},invertMoreButton:false,maxRows:2,moreLabel:'more',pathname:''});export default ChipLayout;
+   */function render(){var _this4=this;return React.createElement("div",{ref:function ref(element){_this4.containerRef=element;},className:"".concat(styles.container(this.maxContentHeight)," engage__chip-layout")},React.createElement("div",{ref:function ref(element){_this4.layoutRef=element;},className:styles.layout},this.props.children),React.createElement("div",{ref:function ref(element){_this4.moreButtonRef=element;},className:styles.moreButtonWrapper},React.createElement(RippleButton,{fill:true,type:"plain",className:this.moreButtonStyles,onClick:this.props.handleMoreButton},React.createElement(I18n.Text,{string:this.props.moreLabel}))));}}]);}(Component);_defineProperty(ChipLayout,"defaultProps",{children:null,handleMoreButton:function handleMoreButton(){},invertMoreButton:false,maxRows:2,moreLabel:'more',pathname:''});export default ChipLayout;

package/components/ChipLayout/spec.js

@@ -2,4 +2,4 @@ import React from'react';import{mount}from'enzyme';import Chip from'@shopgate/pw
  * Since the component uses the <Measure> component it needs an actual
  * browser to be tested as it needs a full browser that supports styling and
  * width/height calculation.
- */describe('<ChipsLayout />',function(){it('should render with one chip',function(){var Component=/*#__PURE__*/React.createElement(ChipsLayout,null,/*#__PURE__*/React.createElement(Chip,{id:"some-id"},"foo"));var wrapper=mount(Component);expect(wrapper).toMatchSnapshot();expect(wrapper.find(Chip).length).toEqual(1);expect(wrapper.find(Chip).at(0).find('button').at(1).text()).toEqual('foo');});it('should render with two chips',function(){var Component=/*#__PURE__*/React.createElement(ChipsLayout,null,/*#__PURE__*/React.createElement(Chip,{id:"some-id"},"foo"),/*#__PURE__*/React.createElement(Chip,{id:"some-other-id"},"bar"));var wrapper=mount(Component);expect(wrapper).toMatchSnapshot();expect(wrapper.find(Chip).length).toEqual(2);expect(wrapper.find(Chip).at(0).find('button').at(1).text()).toEqual('foo');expect(wrapper.find(Chip).at(1).find('button').at(1).text()).toEqual('bar');});});
+ */describe('<ChipsLayout />',function(){it('should render with one chip',function(){var Component=React.createElement(ChipsLayout,null,React.createElement(Chip,{id:"some-id"},"foo"));var wrapper=mount(Component);expect(wrapper).toMatchSnapshot();expect(wrapper.find(Chip).length).toEqual(1);expect(wrapper.find(Chip).at(0).find('button').at(1).text()).toEqual('foo');});it('should render with two chips',function(){var Component=React.createElement(ChipsLayout,null,React.createElement(Chip,{id:"some-id"},"foo"),React.createElement(Chip,{id:"some-other-id"},"bar"));var wrapper=mount(Component);expect(wrapper).toMatchSnapshot();expect(wrapper.find(Chip).length).toEqual(2);expect(wrapper.find(Chip).at(0).find('button').at(1).text()).toEqual('foo');expect(wrapper.find(Chip).at(1).find('button').at(1).text()).toEqual('bar');});});

package/components/ChipLayout/style.js

@@ -1,5 +1,5 @@
-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);}import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors,variables=themeConfig.variables;/**
+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);}import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;/**
  * Returns the styling based on the container height.
  * @param {number} height The maximum height for the container.
  * @returns {string}
- */var container=function container(height){return css({position:'relative',maxHeight:height,overflow:'hidden',marginBottom:variables.gap.small}).toString();};var layout=css({display:'flex',alignContent:'flex-start',flexWrap:'wrap',padding:'8px 5px',overflow:'hidden'}).toString();var moreButtonWrapper=css({position:'absolute',right:0,bottom:0,marginLeft:'auto',marginRight:variables.gap.small}).toString();var moreButtonBase={marginLeft:'auto',outline:0,padding:9,fontSize:'0.8rem',fontWeight:500,textTransform:'uppercase'};var moreButton=css(_extends({},moreButtonBase,{color:colors.light})).toString();var moreButtonInverted=css(_extends({},moreButtonBase,{color:colors.accent})).toString();export default{container:container,layout:layout,moreButtonWrapper:moreButtonWrapper,moreButton:moreButton,moreButtonInverted:moreButtonInverted};
+ */var container=function container(height){return css({position:'relative',maxHeight:height,overflow:'hidden',marginBottom:variables.gap.small}).toString();};var layout=css({display:'flex',alignContent:'flex-start',flexWrap:'wrap',padding:'8px 5px',overflow:'hidden'}).toString();var moreButtonWrapper=css({position:'absolute',right:0,bottom:6,marginLeft:'auto'}).toString();var moreButtonBase={marginLeft:'auto',outline:0,padding:9,fontSize:'0.8rem',fontWeight:500,textTransform:'uppercase'};var moreButton=css(_extends({},moreButtonBase)).toString();var moreButtonInverted=css(_extends({},moreButtonBase)).toString();export default{container:container,layout:layout,moreButtonWrapper:moreButtonWrapper,moreButton:moreButton,moreButtonInverted:moreButtonInverted};

package/components/ConditionalWrapper/ConditionalWrapper.js

@@ -0,0 +1,10 @@
+import PropTypes from'prop-types';/**
+ * Conditionally wraps React children with another component.
+ * @param {Object} props The component props.
+ * @returns {JSX}
+ */var ConditionalWrapper=function ConditionalWrapper(_ref){var condition=_ref.condition,wrapper=_ref.wrapper,wrapperFalsy=_ref.wrapperFalsy,children=_ref.children;if(condition){return wrapper(children);}return typeof wrapperFalsy==='function'?wrapperFalsy(children):children;};ConditionalWrapper.propTypes={/**
+   * When set to `true`, the component children will be wrapped by the React component which is
+   * defined in `wrapper`.
+   * When the to `false`, the component children will be wrapped by the React component which is
+   * optionally defined in `wrapperFalsy`.
+   */condition:PropTypes.bool.isRequired,children:PropTypes.node,wrapper:PropTypes.elementType,wrapperFalsy:PropTypes.elementType};ConditionalWrapper.defaultProps={children:null,wrapper:null,wrapperFalsy:null};export default ConditionalWrapper;

package/components/ConditionalWrapper/index.js

@@ -1,5 +1 @@
-/**
- * Conditionally wraps React children with another component.
- * @param {Object} props The component props.
- * @returns {JSX}
- */var ConditionalWrapper=function ConditionalWrapper(_ref){var condition=_ref.condition,wrapper=_ref.wrapper,children=_ref.children;return condition?wrapper(children):children;};export default ConditionalWrapper;
+export{default as ConditionalWrapper}from"./ConditionalWrapper";

package/components/ConnectedReactPortal/index.js

@@ -0,0 +1,13 @@
+var _excluded=["children"];function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import React from'react';import PropTypes from'prop-types';import{Provider,ReactReduxContext}from'react-redux';import Portal from'react-portal';/**
+ * @typedef {import('@types/react-portal')} ReactPortal
+ */ // eslint-disable-next-line valid-jsdoc
+/**
+ * ConnectedReactPortal is a wrapper around "react-portal" v3 that ensures
+ * children rendered in the portal have access to the Redux store.
+ *
+ * This addresses the limitation introduced by the switch to the new Context API in react-redux v6,
+ * where the Redux store is only accessible to components within the StoreProvider. Since the Portal
+ * component renders its children outside the React component tree, this wrapper bridges the gap.
+ *
+ * @type {ReactPortal}
+ */var ConnectedReactPortal=function ConnectedReactPortal(_ref){var children=_ref.children,props=_objectWithoutProperties(_ref,_excluded);return React.createElement(ReactReduxContext.Consumer,null,function(ctx){return React.createElement(Portal,props,React.createElement(Provider,{store:ctx.store},children));});};ConnectedReactPortal.defaultProps={children:null};export default ConnectedReactPortal;

package/components/Footer/Footer.js

@@ -1,24 +1,5 @@
-function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_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);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}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}});Object.defineProperty(subClass,"prototype",{writable:false});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 _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}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 _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}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 Portal from'@shopgate/pwa-common/components/Portal';import UIEvents from'@shopgate/pwa-core/emitters/ui';import{APP_FOOTER_CONTENT_BEFORE,APP_FOOTER_CONTENT_AFTER}from'@shopgate/pwa-common/constants/Portals';import{getAbsoluteHeight,getStyle}from'@shopgate/pwa-common/helpers/dom';import{SHEET_EVENTS}from'@shopgate/pwa-ui-shared/Sheet';import{footer,updateInsetBackgroundColor,updateFooterHeight}from"./Footer.style";var APP_FOOTER_ID='AppFooter';var DATA_IGNORED='data-footer-inset-update-ignore';/**
+import React,{useRef,useEffect,useCallback}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{UIEvents}from'@shopgate/engage/core/events';import{getAbsoluteHeight}from'@shopgate/engage/core/helpers';import{SHEET_EVENTS}from'@shopgate/engage/components';import*as classes from"./Footer.style";import{handleSafeAreaInsets,updateFooterHeight}from"./helpers";import{APP_FOOTER_ID,DATA_IGNORED}from"./constants";/**
  * The footer component.
- */var Footer=/*#__PURE__*/function(_PureComponent){_inherits(Footer,_PureComponent);var _super=_createSuper(Footer);function Footer(){var _this;_classCallCheck(this,Footer);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_super.call.apply(_super,[this].concat(args));_defineProperty(_assertThisInitialized(_this),"ref",/*#__PURE__*/React.createRef());_defineProperty(_assertThisInitialized(_this),"hide",function(){if(_this.ref.current){updateFooterHeight(0);}});_defineProperty(_assertThisInitialized(_this),"show",function(){if(_this.ref.current){updateFooterHeight(getAbsoluteHeight(_this.ref.current));}});return _this;}_createClass(Footer,[{key:"componentDidMount",value:/**
-   * Sets up the DOM Mutation Observer to take care that the footer inset always has the correct
-   * background color, which matches the background color of the last element within the footer.
-   */function componentDidMount(){var _this2=this;this.performFooterUpdate();var observer=new MutationObserver(function(mutations){var update=mutations.filter(function(mutation){return mutation.target.getAttribute(DATA_IGNORED)!=='true';}).length>0;if(update){_this2.performFooterUpdate();}});observer.observe(this.ref.current,{attributes:true,childList:true,subtree:true});UIEvents.addListener(SHEET_EVENTS.OPEN,this.hide);UIEvents.addListener(SHEET_EVENTS.CLOSE,this.show);}/** @inheritDoc */},{key:"componentWillUnmount",value:function componentWillUnmount(){UIEvents.removeListener(SHEET_EVENTS.OPEN,this.hide);UIEvents.removeListener(SHEET_EVENTS.CLOSE,this.show);}},{key:"getInsetBackgroundColor",value:/**
-   * Retrieves the background color for the footer inset.
-   * @param {NodeList} elements The DOM elements to inspect.
-   * @returns {string|null}
-   */function getInsetBackgroundColor(elements){var _this3=this;/**
-     * The background color of the bottom inset needs to identical to the last entry of the footer.
-     * So we loop backwards to the elements to find the first visible one.
-     */var color=Array.from(elements).reverse().reduce(function(result,element){var ignore=element.getAttribute(DATA_IGNORED)==='true';if(result||ignore){// Nothing to do, since the color was already determined or the element can be ignored.
-return result;}if(element.id===APP_FOOTER_ID){// Inspect core portal.
-return _this3.getInsetBackgroundColor(element.children);}if('clientHeight'in element){// Take the background color of the last visible element from the end of the footer.
-return getStyle(element,'backgroundColor');}// Nothing happened within this loop - proceed with the next one.
-return result;},null);if(color==='rgba(0, 0, 0, 0)'||color==='transparent'){return null;}return color||null;}/** Perform hide action */},{key:"performFooterUpdate",value:/**
-   * Performs an update of the footer: background color, height.
-   */function performFooterUpdate(){if(this.ref.current){updateFooterHeight(getAbsoluteHeight(this.ref.current));updateInsetBackgroundColor(this.getInsetBackgroundColor(this.ref.current.children));}}/**
-   * Checks if the footer has visible content.
-   * @returns {boolean}
-   */},{key:"hasVisibleContent",value:function hasVisibleContent(){if(this.ref.current){var elements=this.ref.current.parentElement.querySelectorAll("div.".concat(footer.toString()," > *:not(#").concat(APP_FOOTER_ID,"), #").concat(APP_FOOTER_ID," > *"));return Array.from(elements).filter(function(element){return element.getAttribute(DATA_IGNORED)!=='true'&&element.clientHeight>0;}).length>0;}return false;}/**
-   * @returns {JSX}
-   */},{key:"render",value:function render(){return/*#__PURE__*/React.createElement("div",{className:"".concat(footer," engage__footer"),ref:this.ref},/*#__PURE__*/React.createElement(Portal,{name:APP_FOOTER_CONTENT_BEFORE}),/*#__PURE__*/React.createElement("div",{id:APP_FOOTER_ID},this.props.children),/*#__PURE__*/React.createElement(Portal,{name:APP_FOOTER_CONTENT_AFTER}));}}]);return Footer;}(PureComponent);_defineProperty(Footer,"defaultProps",{children:null});export default Footer;
+ * @param {Object} props The component props.
+ * @returns {JSX.Element}
+ */var Footer=function Footer(_ref){var children=_ref.children;var footerRef=useRef(null);var performFooterUpdate=useCallback(function(){handleSafeAreaInsets(footerRef.current);updateFooterHeight(getAbsoluteHeight(footerRef.current));},[]);var handleShow=useCallback(function(){updateFooterHeight(getAbsoluteHeight(footerRef.current));},[]);var handleHide=useCallback(function(){updateFooterHeight(0);},[]);useEffect(function(){UIEvents.addListener(SHEET_EVENTS.OPEN,handleHide);UIEvents.addListener(SHEET_EVENTS.CLOSE,handleShow);return function(){UIEvents.removeListener(SHEET_EVENTS.OPEN,handleHide);UIEvents.removeListener(SHEET_EVENTS.CLOSE,handleShow);};},[handleHide,handleShow]);useEffect(function(){performFooterUpdate();var observer=new MutationObserver(function(mutations){var update=mutations.filter(function(mutation){return mutation.target.getAttribute(DATA_IGNORED)!=='true';}).length>0;if(update){performFooterUpdate();}});observer.observe(footerRef.current,{childList:true,subtree:true,attributes:true,attributeFilter:['style','class']});return function(){observer.disconnect();};},[performFooterUpdate]);return React.createElement("div",{className:classNames(classes.footer,'engage__footer')},React.createElement("div",{id:APP_FOOTER_ID,ref:footerRef},children));};Footer.defaultProps={children:null};export default Footer;

package/components/Footer/Footer.style.js

@@ -1,7 +1 @@
-import{css}from'glamor';var style=document.documentElement.style;/**
- * Updates the background color of the bottom inset.
- * @param {string} color The new background color
- */export var updateInsetBackgroundColor=function updateInsetBackgroundColor(color){if(style.getPropertyValue('--footer-inset-background-color')!==color){style.setProperty('--footer-inset-background-color',color);}};/**
- * Update the footer height
- * @param {number} height height
- */export var updateFooterHeight=function updateFooterHeight(height){var inset=Number(style.getPropertyValue('--safe-area-inset-bottom').replace(/\D/g,''));var footerHeight="".concat(inset+height,"px");if(style.getPropertyValue('--footer-height')!==footerHeight){style.setProperty('--footer-height',footerHeight);}};export var footer=css({bottom:0,flexShrink:1,position:'relative',zIndex:1,':after':{backgroundColor:'var(--footer-inset-background-color, var(--page-background-color))',height:'var(--safe-area-inset-bottom)',content:' ',display:'inherit',position:'relative',zIndex:15}});
+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);}import{css}from'glamor';import{useScrollContainer}from'@shopgate/engage/core/helpers';export var footer=css(_extends({bottom:0,flexShrink:1,position:'relative',zIndex:1},!useScrollContainer()?{position:'sticky'}:{}));

package/components/Footer/constants.js

@@ -0,0 +1 @@
+export var APP_FOOTER_ID='AppFooter';export var DATA_IGNORED='data-footer-inset-update-ignore';

package/components/Footer/helpers.js

@@ -0,0 +1,75 @@
+import{logger,isDev}from'@shopgate/engage/core/helpers';import{DATA_IGNORED}from"./constants";/**
+ * Determines if an element is visually present in the DOM.
+ * Checks for display, visibility, opacity, and transform-based hiding.
+ *
+ * @param {HTMLElement} el The element to evaluate.
+ * @returns {boolean} True if the element is visually visible; false otherwise.
+ */export var isElementVisible=function isElementVisible(el){if(!el||!(el instanceof HTMLElement))return false;var style=window.getComputedStyle(el);if(style.display==='none'||style.visibility==='hidden'||parseFloat(style.opacity)===0)return false;var transform=style.transform;if(transform&&transform!=='none'){var match=transform.match(/translateY\((-?\d+)(px)?\)/);if(match){var translateY=parseInt(match[1],10);if(translateY>window.innerHeight)return false;}}return true;};/**
+ * Finds the widest nested element inside a given container that has a background color
+ * explicitly set via CSS (ignores transparent, inherited, or unset values), and returns
+ * that background color.
+ *
+ * @param {HTMLElement} container The parent element to search within. Must be an actual DOM node.
+ * @returns {string|null} The detected background color (e.g., "rgb(255, 0, 0)")
+ */export var getElementBackgroundColor=function getElementBackgroundColor(container){if(!container){return null;}var widestElement=null;var maxWidth=-Infinity;/**
+   * Recursively traverses the DOM tree starting from the given node,
+   * tracking the widest element that has a background color explicitly set via CSS.
+   *
+   * @param {HTMLElement} node The DOM node to begin traversal from.
+   */function walk(node){if(!(node instanceof HTMLElement))return;var style=window.getComputedStyle(node);var bgColor=style.backgroundColor;var isStyledColor=bgColor&&!['transparent','rgba(0, 0, 0, 0)','inherit','initial','unset'].includes(bgColor);var rect=node.getBoundingClientRect();if(isElementVisible(node)&&isStyledColor&&rect.width>maxWidth){maxWidth=rect.width;widestElement=node;}Array.from(node.children).forEach(walk);}walk(container);if(widestElement){var result=window.getComputedStyle(widestElement).backgroundColor;return result;}return null;};/**
+ * Checks if any of the provided class names reference the custom property in any loaded stylesheet.
+ *
+ * @param {string[]} classList Array of class names to check.
+ * @param {string} customProp The custom property to search for in the stylesheets.
+ * @returns {boolean} True if any class rule uses the custom property.
+ */var classNamesUseCustomProp=function classNamesUseCustomProp(classList,customProp){var allRules=Array.from(document.styleSheets).filter(function(sheet){try{return sheet.cssRules;}catch(e){return false;// Skip cross-origin or restricted stylesheets
+}}).flatMap(function(sheet){return Array.from(sheet.cssRules||[]);});// eslint-disable-next-line no-restricted-syntax
+var _iteratorNormalCompletion=true;var _didIteratorError=false;var _iteratorError=undefined;try{for(var _iterator=allRules[Symbol.iterator](),_step;!(_iteratorNormalCompletion=(_step=_iterator.next()).done);_iteratorNormalCompletion=true){var rule=_step.value;// eslint-disable-next-line no-continue
+if(!rule.selectorText||!rule.cssText.includes("var(".concat(customProp,")")))continue;// eslint-disable-next-line no-restricted-syntax
+var _iteratorNormalCompletion2=true;var _didIteratorError2=false;var _iteratorError2=undefined;try{for(var _iterator2=classList[Symbol.iterator](),_step2;!(_iteratorNormalCompletion2=(_step2=_iterator2.next()).done);_iteratorNormalCompletion2=true){var className=_step2.value;if(rule.selectorText.includes(".".concat(className))){return true;}}}catch(err){_didIteratorError2=true;_iteratorError2=err;}finally{try{if(!_iteratorNormalCompletion2&&_iterator2["return"]!=null){_iterator2["return"]();}}finally{if(_didIteratorError2){throw _iteratorError2;}}}}}catch(err){_didIteratorError=true;_iteratorError=err;}finally{try{if(!_iteratorNormalCompletion&&_iterator["return"]!=null){_iterator["return"]();}}finally{if(_didIteratorError){throw _iteratorError;}}}return false;};/**
+ * Checks if a single element uses the custom property via inline styles or class-based rules.
+ *
+ * @param {HTMLElement} el The element to check.
+ * @param {string} customProp The CSS custom property to search for.
+ * @returns {boolean} True if the element uses the custom property.
+ */var elementUsesCustomProp=function elementUsesCustomProp(el,customProp){var _el$getAttribute;if(!(el instanceof Element))return false;var styleAttr=(_el$getAttribute=el.getAttribute)===null||_el$getAttribute===void 0?void 0:_el$getAttribute.call(el,'style');if(styleAttr&&styleAttr.includes("var(".concat(customProp,")"))){return true;}var classList=Array.from(el.classList||[]);return classList.length>0&&classNamesUseCustomProp(classList,customProp);};/**
+ * Checks if an element or any of its descendants use the custom property.
+ *
+ * @param {HTMLElement} el The root element to inspect.
+ * @param {string} customProp The CSS custom property to look for.
+ * @returns {boolean} True if the element or any descendant uses the custom property.
+ */var elementOrDescendantsUseCustomProp=function elementOrDescendantsUseCustomProp(el,customProp){// Check if the element itself uses the custom property
+if(elementUsesCustomProp(el,customProp))return true;var descendants=el.querySelectorAll('*');// eslint-disable-next-line no-restricted-syntax
+var _iteratorNormalCompletion3=true;var _didIteratorError3=false;var _iteratorError3=undefined;try{for(var _iterator3=descendants[Symbol.iterator](),_step3;!(_iteratorNormalCompletion3=(_step3=_iterator3.next()).done);_iteratorNormalCompletion3=true){var node=_step3.value;// eslint-disable-next-line no-continue
+if(!(node instanceof Element))continue;if(elementUsesCustomProp(node,customProp))return true;}}catch(err){_didIteratorError3=true;_iteratorError3=err;}finally{try{if(!_iteratorNormalCompletion3&&_iterator3["return"]!=null){_iterator3["return"]();}}finally{if(_didIteratorError3){throw _iteratorError3;}}}return false;};/**
+ * Returns footer entries that do NOT have safe area insets applied,
+ * either on themselves or in any of their descendants.
+ *
+ * @param {HTMLElement[]} footerElements The footer elements to check.
+ * @returns {HTMLElement[]} An array of direct children that do not use safe area insets.
+ */var getFooterEntriesWithoutSafeAreaInsets=function getFooterEntriesWithoutSafeAreaInsets(footerElements){return footerElements.filter(function(child){return!elementOrDescendantsUseCustomProp(child,'--safe-area-inset-bottom');});};/**
+ * Searches for footer elements that do not have safe area insets applied, and adds a fallback.
+ * @param {HTMLElement} footerEl The footer element whose children are to be checked.
+ */export var handleSafeAreaInsets=function handleSafeAreaInsets(footerEl){if(!footerEl||!(footerEl instanceof HTMLElement)){return;}var directChildren=Array.from(footerEl.children);// Filter out elements that where already handled before
+var childrenToInspect=directChildren.filter(function(child){return child.getAttribute('data-has-safe-area-inset')!=='true';}).filter(function(child){return child.getAttribute(DATA_IGNORED)!=='true';});// Detect footer elements without safe area insets
+var childrenWithoutInsets=getFooterEntriesWithoutSafeAreaInsets(childrenToInspect);// Apply fallback and mark the elements as handled
+childrenWithoutInsets.forEach(function(child){child.style.setProperty('padding-bottom','var(--safe-area-inset-bottom)');child.style.setProperty('background-color',getElementBackgroundColor(child));child.setAttribute('data-has-safe-area-inset','true');});if(isDev&&childrenWithoutInsets.length>0){logger.warn('Footer elements without safe area insets detected. Please use the "--safe-area-inset-bottom" CSS custom property for bottom insets.',childrenWithoutInsets);}// Mark all other elements which already had insets as handled
+directChildren.filter(function(child){return childrenWithoutInsets.indexOf(child)===-1;}).forEach(function(child){if(!child.hasAttribute('data-has-safe-area-inset')){child.setAttribute('data-has-safe-area-inset','true');}});};var style=document.documentElement.style;/**
+ * Update the footer height custom property
+ * @param {number} height height
+ */export var updateFooterHeight=function updateFooterHeight(height){// The TabBar is positioned with `position: fixed`, so it doesn’t contribute to the measured
+// height of the Footer. Additionally, it’s sometimes animated in/out, which makes dynamic
+// measurement via JavaScript more complex and error-prone.
+//
+// To simplify everything, we include the --tabbar-height CSS custom property to the calculation
+// of the --footer-height value.
+var footerHeight="max(".concat(height,"px, var(--tabbar-height, 0px))");if(style.getPropertyValue('--footer-height')!==footerHeight){style.setProperty('--footer-height',footerHeight);}// The View component wraps every app page and applies a bottom offset to centrally manage
+// safe area insets across screens.
+//
+// If the measured footer height is > 0px, it means the footer is rendering content that already
+// accounts for the safe area, so no additional offset is needed.
+//
+// If the measured footer height is 0px, the footer is either empty or only contains the tab bar
+// (which is measured via the CSS variable --footer-height). In that case, we still need to apply
+// an offset equal to the larger of the bottom safe area inset or the tab bar height.
+var pageContentOffset=height===0?'max(var(--footer-height), var(--safe-area-inset-bottom))':'0px';if(style.getPropertyValue('--page-content-offset-bottom')!==pageContentOffset){style.setProperty('--page-content-offset-bottom',pageContentOffset);}};

package/components/Form/Builder/Builder.constants.js

@@ -1 +1 @@
-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 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_MULTISELECT='multiselect';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 var ELEMENT_TYPE_PHONE_PICKER='phone_picker';

package/components/Form/Builder/Builder.js

@@ -1,49 +1,65 @@
-function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_typeof(obj);}import _camelCase from"lodash/camelCase";var _defineProperty2;var _excluded=["validationErrors"];function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen);}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++){arr2[i]=arr[i];}return arr2;}function _iterableToArrayLimit(arr,i){var _i=arr==null?null:typeof Symbol!=="undefined"&&arr[Symbol.iterator]||arr["@@iterator"];if(_i==null)return;var _arr=[];var _n=true;var _d=false;var _s,_e;try{for(_i=_i.call(arr);!(_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 _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}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);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}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}});Object.defineProperty(subClass,"prototype",{writable:false});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 _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}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 _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}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{BEFORE,AFTER}from'@shopgate/pwa-common/constants/Portals';import{Form}from'..';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"./Builder.constants";import ElementText from"./ElementText";import ElementSelect from"./ElementSelect";import ElementRadio from"./ElementRadio";import ElementCheckbox from"./ElementCheckbox";import buildFormElements from"./helpers/buildFormElements";import buildFormDefaults from"./helpers/buildFormDefaults";import buildCountryList from"./helpers/buildCountryList";import buildProvinceList from"./helpers/buildProvinceList";import buildValidationErrorList from"./helpers/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(/[\\._]/,'-');};/**
+import _camelCase from"lodash/camelCase";var _excluded=["validationErrors"];var _Builder,_defineProperty2;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 _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}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{BEFORE,AFTER}from'@shopgate/pwa-common/constants/Portals';import{I18n}from'@shopgate/engage/components';import{Form}from'..';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,ELEMENT_TYPE_PHONE_PICKER,ELEMENT_TYPE_MULTISELECT}from"./Builder.constants";import ElementText from"./ElementText";import ElementSelect from"./ElementSelect";import ElementMultiSelect from"./ElementMultiSelect";import ElementRadio from"./ElementRadio";import ElementCheckbox from"./ElementCheckbox";import ElementPhoneNumber from"./ElementPhoneNumber";import buildFormElements from"./helpers/buildFormElements";import buildFormDefaults from"./helpers/buildFormDefaults";import buildCountryList from"./helpers/buildCountryList";import buildProvinceList from"./helpers/buildProvinceList";import buildValidationErrorList from"./helpers/buildValidationErrorList";import{sanitizePortalName}from"./helpers/common";/**
  * Optional select element
  * @type {Object}
  */var 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){_inherits(Builder,_Component);var _super=_createSuper(Builder);/**
-   * Initializes the component.
-   * @param {Object} props The components props.
-   */function Builder(props){var _this;_classCallCheck(this,Builder);_this=_super.call(this,props);// Prepare internal state
-_defineProperty(_assertThisInitialized(_this),"getFormElementComponent",function(type){return _this.props.elements[type]||Builder.defaultElements[type]||null;});_defineProperty(_assertThisInitialized(_this),"elementSortFunc",function(element1,element2){// Keep current sort order when no specific sort order was set for both
+ */var Builder=/*#__PURE__*/function(_Component){function Builder(props){var _this2;_classCallCheck(this,Builder);_this2=_callSuper(this,Builder,[props]);// Prepare internal state
+/**
+   * Retrieves a form element REACT component by the given type or null if the type is unknown.
+   * @param {string} type The type value of the element to return.
+   * @returns {*|ElementText|ElementSelect|ElementCheckbox|ElementRadio|null}
+   */_defineProperty(_this2,"getFormElementComponent",function(type){return _this2.props.elements[type]||Builder.defaultElements[type]||null;});/**
+   * 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;});_defineProperty(_assertThisInitialized(_this),"elementChangeHandler",function(elementId,value){// "newState" is the state changes before any form actions have been applied
-var newState=_extends({},_this.state,{formData:_extends({},_this.state.formData,_defineProperty({},elementId,value))});// Handle context sensitive functionality by via "action" listener and use the "new" state
-var updatedNewState=_this.actionListener.notify(elementId,_this.state,newState);// Form actions can append validation errors by adding that field to the new state
+return element1.sortOrder-element2.sortOrder;});/**
+   * Element change handler based on it's type. It takes a state change and performs form actions on
+   * in to allow customization. The final result is then written to the component state.
+   * @param {string} elementId Element to create the handler for
+   * @param {string} value Element value
+   */_defineProperty(_this2,"elementChangeHandler",function(elementId,value){// "newState" is the state changes before any form actions have been applied
+var newState=_extends({},_this2.state,{formData:_extends({},_this2.state.formData,_defineProperty({},elementId,value))});// Handle context sensitive functionality by via "action" listener and use the "new" state
+var updatedNewState=_this2.actionListener.notify(elementId,_this2.state,newState);// Form actions can append validation errors by adding that field to the new state
 // Split out validation errors from final state and
 var _updatedNewState$vali=updatedNewState.validationErrors,validationErrors=_updatedNewState$vali===void 0?{}:_updatedNewState$vali,finalState=_objectWithoutProperties(updatedNewState,_excluded);// "hasErrors" is true, when a visible + required field is empty or validation errors appeared!
 var hasErrors=Object.keys(validationErrors).length>0;// Check "required" fields for all visible elements and enable rendering on changes
-_this.formElements.forEach(function(formElement){if(!finalState.elementVisibility[formElement.id]||!formElement.required){return;}var tmpVal=finalState.formData[formElement.id];var tmpResult=tmpVal===null||tmpVal===undefined||tmpVal===''||tmpVal===false;hasErrors=hasErrors||tmpResult;});// Handle state internally and send an "onChange" event to parent if this finished
-_this.setState(finalState);// Transform to external structure (unavailable ones will be set undefined)
-var updateData={};_this.formElements.forEach(function(el){if(el.custom){if(updateData.customAttributes===undefined){updateData.customAttributes={};}updateData.customAttributes[el.id]=finalState.formData[el.id];}else{updateData[el.id]=finalState.formData[el.id];}});// Trigger the given update action of the parent and provide all new validation errors to it
-_this.props.handleUpdate(updateData,hasErrors,// Output validation errors in the same structure (array) as the component takes them
-hasErrors?Object.keys(validationErrors).map(function(k){return{path:k,message:validationErrors[k]};}):[]);});_defineProperty(_assertThisInitialized(_this),"renderElement",function(element,elementErrorText){var elementName="".concat(_this.props.name,"_").concat(element.id);var elementValue=_this.state.formData[element.id];var elementVisible=_this.state.elementVisibility[element.id]||false;// Take a dynamic REACT element based on its type
-var Element=_this.getFormElementComponent(element.type);if(!Element){logger.error("Unknown form element type: ".concat(element.type));return null;}// Country and province elements have their data injected, if not already present
-var elementData=element;switch(element.type){case ELEMENT_TYPE_COUNTRY:{elementData.options=element.options||_this.countryList;break;}case ELEMENT_TYPE_PROVINCE:{// Province selection only makes sense with a country being selected, or from custom options
-var countryElement=_this.formElements.find(function(el){return el.type===ELEMENT_TYPE_COUNTRY;});elementData.options=element.options||(countryElement&&_this.state.formData[countryElement.id]?buildProvinceList(_this.state.formData[countryElement.id],// Auto-select with "empty" when not required
-element.required?null:emptySelectOption):{});break;}default:break;}return/*#__PURE__*/React.createElement(Element,{name:elementName,element:elementData,errorText:elementErrorText,value:elementValue,visible:elementVisible});});_this.state={elementVisibility:{},formData:{}};// Reorganize form elements into a structure that can be easily rendered
-var formElements=buildFormElements(props.config,_this.elementChangeHandler);// Compute defaults
+_this2.formElements.forEach(function(formElement){if(!finalState.elementVisibility[formElement.id]||!formElement.required){return;}var tmpVal=finalState.formData[formElement.id];var tmpResult=tmpVal===null||tmpVal===undefined||tmpVal===''||tmpVal===false;hasErrors=hasErrors||tmpResult;});// Handle state internally and send an "onChange" event to parent if this finished
+_this2.setState(finalState);// 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]=finalState.formData[el.id];}else{updateData[el.id]=finalState.formData[el.id];}});// Trigger the given update action of the parent and provide all new validation errors to it
+_this2.props.handleUpdate(updateData,hasErrors,// Output validation errors in the same structure (array) as the component takes them
+hasErrors?Object.keys(validationErrors).map(function(k){return{path:k,message:validationErrors[k]};}):[]);});/**
+   * Takes an element of any type and renders it depending on type.
+   * Also puts portals around the element.
+   * @param {string} formName Name of the form
+   * @param {Object} element The data of the element to be rendered
+   * @param {string} elementErrorText The error text to be shown for this specific element
+   * @returns {JSX.Element}
+   */_defineProperty(_this2,"renderElement",function(formName,element,elementErrorText){var formData=_this2.state.formData;var elementName="".concat(_this2.props.name,"_").concat(element.id);var elementValue=formData[element.id];var elementVisible=_this2.state.elementVisibility[element.id]||false;// Take a dynamic REACT element based on its type
+var Element=_this2.getFormElementComponent(element.type);if(!Element){logger.error("Unknown form element type: ".concat(element.type));return null;}// Country and province elements have their data injected, if not already present
+var elementData=element;switch(element.type){case ELEMENT_TYPE_COUNTRY:{elementData.options=element.options||_this2.countryList;break;}case ELEMENT_TYPE_PROVINCE:{// Province selection only makes sense with a country being selected, or from custom options
+var countryElement=_this2.formElements.find(function(el){return el.type===ELEMENT_TYPE_COUNTRY;});elementData.options=countryElement&&formData[countryElement.id]?buildProvinceList(formData[countryElement.id],// Auto-select with "empty" when not required
+element.required?null:emptySelectOption):{};break;}default:break;}return React.createElement(Element,{name:elementName,element:elementData,errorText:elementErrorText,value:elementValue,visible:elementVisible,formName:formName});});_this2.state={elementVisibility:{},formData:{}};// 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
-_this.state.formData=formDefaults;// Handle fixed visibilities
+_this2.state.formData=formDefaults;// Handle fixed visibilities
 formElements.forEach(function(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
-var _countryElement=_this.formElements.find(function(el){return el.type===ELEMENT_TYPE_COUNTRY;});if(_countryElement){_this.countryList=buildCountryList(_countryElement,emptySelectOption);var provinceElement=_this.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$values=Object.values(buildProvinceList(formDefaults[_countryElement.id])),_Object$values2=_slicedToArray(_Object$values,1),first=_Object$values2[0];if(first){_this.state.formData[provinceElement.id]=first;}}}// Final form initialization, by triggering actionListeners and enable rendering for elements
-var _newState=_this.state;_this.formElements.forEach(function(element){_newState=_this.actionListener.notify(element.id,_this.state,_newState);});_this.state=_newState;return _this;}/**
-   * Retrieves a form element REACT component by the given type or null if the type is unknown.
-   * @param {string} type The type value of the element to return.
-   * @returns {*|ElementText|ElementSelect|ElementCheckbox|ElementRadio|null}
-   */_createClass(Builder,[{key:"render",value:/**
+_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$keys3=Object.keys(buildProvinceList(formDefaults[_countryElement.id])),_Object$keys4=_slicedToArray(_Object$keys3,1),first=_Object$keys4[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;}_inherits(Builder,_Component);return _createClass(Builder,[{key:"render",value:/**
    * Renders the component based on the given config
-   * @return {JSX}
-   */function render(){var _this2=this;// Convert validation errors for easier handling
-var validationErrors=buildValidationErrorList(this.props.validationErrors);return/*#__PURE__*/React.createElement(Form,{className:_camelCase(this.props.name),onSubmit:this.props.onSubmit},/*#__PURE__*/React.createElement("div",{className:this.props.className},this.formElements.map(function(element){return/*#__PURE__*/React.createElement(Fragment,{key:"".concat(_this2.props.name,"_").concat(element.id)},/*#__PURE__*/React.createElement(Portal,{name:"".concat(sanitize(_this2.props.name),".").concat(sanitize(element.id),".").concat(BEFORE)}),/*#__PURE__*/React.createElement(Portal,{name:"".concat(sanitize(_this2.props.name),".").concat(sanitize(element.id))},_this2.renderElement(element,validationErrors[element.id]||'')),/*#__PURE__*/React.createElement(Portal,{name:"".concat(sanitize(_this2.props.name),".").concat(sanitize(element.id),".").concat(AFTER)}));})));}}]);return Builder;}(Component);_defineProperty(Builder,"defaultElements",(_defineProperty2={},_defineProperty(_defineProperty2,ELEMENT_TYPE_EMAIL,ElementText),_defineProperty(_defineProperty2,ELEMENT_TYPE_PASSWORD,ElementText),_defineProperty(_defineProperty2,ELEMENT_TYPE_TEXT,ElementText),_defineProperty(_defineProperty2,ELEMENT_TYPE_NUMBER,ElementText),_defineProperty(_defineProperty2,ELEMENT_TYPE_SELECT,ElementSelect),_defineProperty(_defineProperty2,ELEMENT_TYPE_COUNTRY,ElementSelect),_defineProperty(_defineProperty2,ELEMENT_TYPE_PROVINCE,ElementSelect),_defineProperty(_defineProperty2,ELEMENT_TYPE_CHECKBOX,ElementCheckbox),_defineProperty(_defineProperty2,ELEMENT_TYPE_RADIO,ElementRadio),_defineProperty(_defineProperty2,ELEMENT_TYPE_DATE,ElementText),_defineProperty(_defineProperty2,ELEMENT_TYPE_PHONE,ElementText),_defineProperty2));_defineProperty(Builder,"defaultProps",{className:null,defaults:{},elements:Builder.defaultElements,onSubmit:function onSubmit(){},validationErrors:[]});export default Builder;
+   * @return {JSX.Element}
+   */function render(){var _this3=this;var _this$props=this.props,name=_this$props.name,className=_this$props.className,onSubmit=_this$props.onSubmit;// Convert validation errors for easier handling
+var validationErrors=buildValidationErrorList(this.props.validationErrors);var validationErrorsAmount=Object.entries(validationErrors).length;return React.createElement(Form,{className:_camelCase(name),onSubmit:onSubmit},validationErrorsAmount>0&&React.createElement("div",{className:"sr-only"},React.createElement(I18n.Text,{string:"login.errorAmount",params:{amount:validationErrorsAmount}})),React.createElement("div",{className:className},this.formElements.map(function(element){return React.createElement(Fragment,{key:"".concat(name,"_").concat(element.id)},React.createElement(Portal,{name:"".concat(sanitizePortalName(name),".").concat(sanitizePortalName(element.id),".").concat(BEFORE),props:{formName:name,errorText:validationErrors[element.id]||'',element:element}}),React.createElement(Portal,{name:"".concat(sanitizePortalName(name),".").concat(sanitizePortalName(element.id)),props:{formName:name,errorText:validationErrors[element.id]||'',element:element}},_this3.renderElement(name,element,validationErrors[element.id]||'')),React.createElement(Portal,{name:"".concat(sanitizePortalName(name),".").concat(sanitizePortalName(element.id),".").concat(AFTER),props:{formName:name,errorText:validationErrors[element.id]||'',element:element}}));})));}}]);}(Component);_Builder=Builder;_defineProperty(Builder,"defaultElements",(_defineProperty2={},_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty2,ELEMENT_TYPE_EMAIL,ElementText),ELEMENT_TYPE_PASSWORD,ElementText),ELEMENT_TYPE_TEXT,ElementText),ELEMENT_TYPE_NUMBER,ElementText),ELEMENT_TYPE_SELECT,ElementSelect),ELEMENT_TYPE_MULTISELECT,ElementMultiSelect),ELEMENT_TYPE_COUNTRY,ElementSelect),ELEMENT_TYPE_PROVINCE,ElementSelect),ELEMENT_TYPE_CHECKBOX,ElementCheckbox),ELEMENT_TYPE_RADIO,ElementRadio),_defineProperty(_defineProperty(_defineProperty(_defineProperty2,ELEMENT_TYPE_DATE,ElementText),ELEMENT_TYPE_PHONE,ElementText),ELEMENT_TYPE_PHONE_PICKER,ElementPhoneNumber)));_defineProperty(Builder,"defaultProps",{className:null,defaults:{},elements:_Builder.defaultElements,onSubmit:function onSubmit(){},validationErrors:[]/**
+   * Initializes the component.
+   * @param {Object} props The components props.
+   */});export default Builder;

package/components/Form/Builder/ElementCheckbox.js

@@ -1,6 +1,6 @@
-import _camelCase from"lodash/camelCase";import React,{memo}from'react';import PropTypes from'prop-types';import Checkbox from'@shopgate/pwa-ui-shared/Form/Checkbox';/**
+import _camelCase from"lodash/camelCase";import React,{memo}from'react';import PropTypes from'prop-types';import classNames from'classnames';import Checkbox from'@shopgate/pwa-ui-shared/Form/Checkbox';import FormHelper from"./FormHelper";/**
  * Takes an element and renders it, if the type matches
  * @param {Object} props Component props.
  * @param {Object} props.element The data of the element to be rendered
  * @returns {JSX}
- */var ElementCheckbox=function ElementCheckbox(props){var element=props.element,errorText=props.errorText,value=props.value,name=props.name,visible=props.visible;if(!visible){return null;}return/*#__PURE__*/React.createElement("div",{className:"".concat(_camelCase(name)," engage__form-checkbox")},/*#__PURE__*/React.createElement(Checkbox,{name:name,errorText:errorText,checked:!!value,label:element.label,onChange:element.handleChange,translateErrorText:false}));};ElementCheckbox.defaultProps={value:false,visible:true};export default/*#__PURE__*/memo(ElementCheckbox);
+ */var ElementCheckbox=function ElementCheckbox(props){var element=props.element,errorText=props.errorText,value=props.value,name=props.name,visible=props.visible,formName=props.formName;if(!visible){return null;}return React.createElement("div",{className:classNames('container-checkbox',_camelCase(name),'engage__form-checkbox','formBuilderField',{validationError:!!errorText})},React.createElement(Checkbox,{name:name,errorText:errorText,checked:!!value,label:element.label,onChange:element.handleChange,translateErrorText:false,showErrorText:false,disabled:element.disabled}),React.createElement(FormHelper,{errorText:errorText,element:element,formName:formName,elementName:name}));};ElementCheckbox.defaultProps={value:false,visible:true};export default memo(ElementCheckbox);

package/components/Form/Builder/ElementMultiSelect.js

@@ -0,0 +1,6 @@
+import _camelCase from"lodash/camelCase";import React,{memo}from'react';import PropTypes from'prop-types';import classNames from'classnames';import Select from'@shopgate/pwa-ui-shared/Form/Select';import SelectContextChoices from'@shopgate/pwa-ui-shared/Form/SelectContextChoices';import ResponsiveContainer from"../../ResponsiveContainer/ResponsiveContainer";import FormHelper from"./FormHelper";/**
+ * Takes an element and renders it, if the type matches
+ * @param {Object} props Component props.
+ * @param {Object} props.element The data of the element to be rendered
+ * @returns {JSX}
+ */var ElementMultiSelect=function ElementMultiSelect(props){var element=props.element,errorText=props.errorText,name=props.name,value=props.value,visible=props.visible,formName=props.formName;if(!visible){return null;}var values=[].concat(value).filter(Boolean);return React.createElement("div",{className:classNames(_camelCase(name),'engage__form-multi-select','formBuilderField',{validationError:!!errorText})},React.createElement(ResponsiveContainer,{appAlways:true,breakpoint:"xs"},React.createElement(Select,{name:name,required:element===null||element===void 0?void 0:element.required,label:element.label,placeholder:element.placeholder,value:values,options:element.options,onChange:element.handleChange,errorText:errorText,isControlled:true,translateErrorText:false,showErrorText:false,disabled:element.disabled,multiple:true,"aria-invalid":!!errorText,"aria-describedby":errorText.length>0?"ariaError-".concat(name):null})),React.createElement(ResponsiveContainer,{webOnly:true,breakpoint:">xs"},React.createElement(SelectContextChoices,{label:element.label,placeholder:element.placeholder,value:values,options:element.options,onChange:element.handleChange,errorText:errorText,showErrorText:false})),React.createElement(FormHelper,{errorText:errorText,element:element,formName:formName,elementName:name}));};ElementMultiSelect.defaultProps={value:'',visible:true};export default memo(ElementMultiSelect);

package/components/Form/Builder/ElementPhoneNumber.js

@@ -0,0 +1,20 @@
+import _isEqual from"lodash/isEqual";import _upperCase from"lodash/upperCase";import _camelCase from"lodash/camelCase";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 _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;}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;}import*as React from'react';import PropTypes from'prop-types';import classnames from'classnames';import{i18n}from'@shopgate/engage/core/helpers';import{parsePhoneNumber}from'react-phone-number-input';import PhoneInputCountrySelect from'react-phone-number-input/mobile';import PhoneInput from'react-phone-number-input/input-mobile';import{getCountries}from'react-phone-number-input/input';import en from'react-phone-number-input/locale/en';import de from'react-phone-number-input/locale/de';import es from'react-phone-number-input/locale/es';import fr from'react-phone-number-input/locale/fr';import pt from'react-phone-number-input/locale/pt';import flags from'react-phone-number-input/flags';import{useCountriesNames}from'@shopgate/engage/i18n';import{css}from'glamor';import{themeConfig}from'@shopgate/engage';import Label from'@shopgate/pwa-ui-shared/TextField/components/Label';import FormHelper from"./FormHelper";var variables=themeConfig.variables,colors=themeConfig.colors;var styles={formField:css({width:'100%',marginBottom:'0px !important'}).toString(),phoneField:css({position:'relative',width:'100%',paddingTop:variables.gap.big*0.75,paddingBottom:variables.gap.big*1.25,' input.PhoneInputInput':{outline:'none',fontSize:'1rem',lineHeight:'1.1875rem',borderRadius:0,paddingBottom:variables.gap.xsmall*1.5,borderBottom:"1px solid ".concat(colors.shade12),'&:focus':{borderBottom:"2px solid ".concat(colors.primary),paddingBottom:variables.gap.xsmall*1.5-1}}}),phoneFieldError:css({' input.PhoneInputInput':{borderBottom:"2px solid var(--color-state-alert, ".concat(colors.error,")"),paddingBottom:variables.gap.xsmall*1.5-1}}).toString(),phoneFieldErrorText:css({position:'absolute',width:'100%',bottom:'-10px',fontSize:'0.75rem',lineHeight:0.875,color:"var(--color-state-alert, ".concat(colors.error,")"),overflow:'hidden',whiteSpace:'nowrap',textOverflow:'ellipsis',marginLeft:'38px'})};var builtInCountries=getCountries();var locales={en:en,de:de,es:es,fr:fr,pt:pt};/**
+ * Renders the reserve form phone input maybe with country selection.
+ * @param {Object} props The component props.
+ * @returns {JSX.Element}
+ */var UnwrappedElementPhoneNumber=React.memo(function(props){var element=props.element,name=props.name,errorText=props.errorText,value=props.value,visible=props.visible,formName=props.formName;var label=element.label,handleChange=element.handleChange,_element$disabled=element.disabled,disabled=_element$disabled===void 0?false:_element$disabled,_element$required=element.required,required=_element$required===void 0?false:_element$required,_element$config=element.config,_element$config2=_element$config===void 0?{}:_element$config,_element$config2$supp=_element$config2.supportedCountries,supportedCountries=_element$config2$supp===void 0?[]:_element$config2$supp,_element$config2$coun=_element$config2.countrySortOrder,countrySortOrder=_element$config2$coun===void 0?[]:_element$config2$coun,_element$config2$user=_element$config2.userLocation,userLocation=_element$config2$user===void 0?{}:_element$config2$user;var _React$useState=React.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isFocused=_React$useState2[0],setIsFocused=_React$useState2[1];// Maps available countries to correct format.
+var countries=React.useMemo(function(){if(supportedCountries.length===0){return builtInCountries;}return supportedCountries.map(function(country){var pieces=country.split('_');return _upperCase(pieces[0]);});},[supportedCountries]);var countriesNames=useCountriesNames(countries,locales);// Get labels for supported countries.
+var labels=React.useMemo(function(){var output={};if(!countries){return output;}countries.forEach(function(key){var pieces=key.split('_');output[pieces[0]]=countriesNames[key];});return output;},[countries,countriesNames]);var defaultCountry=React.useMemo(function(){var country;if(value){// Try to parse the value to determine a country
+var phoneNumber=parsePhoneNumber(value||'');if(phoneNumber&&phoneNumber.country){country=phoneNumber.country;}}if(!country&&userLocation){// Take the country from the user location if present
+country=userLocation.country;}if(!country){// If no country could be determined yet, take the country from the language
+var _i18n$getLang$split=i18n.getLang().split('-');var _i18n$getLang$split2=_slicedToArray(_i18n$getLang$split,2);country=_i18n$getLang$split2[1];}// Check if the determined country is included inside the available countries
+if(!countries.includes(country)){if((countrySortOrder===null||countrySortOrder===void 0?void 0:countrySortOrder.length)&&countries.includes(countrySortOrder[0])){// Take first country if the sort order list if present
+var _countrySortOrder=_slicedToArray(countrySortOrder,1);country=_countrySortOrder[0];}else{// Take first country from the list
+var _countries=_slicedToArray(countries,1);country=_countries[0];}}return country;},[countries,countrySortOrder,userLocation,value]);var countryOptionsOrder=React.useMemo(function(){/**
+     * To avoid component errors remove countries from the sort order array that are not part
+     * of the counties array.
+     */var sanitizedCountrySortOrder=countrySortOrder.filter(function(countryCode){return countries.includes(countryCode);});var countryListsEqual=_isEqual([].concat(countries).sort(),[].concat(sanitizedCountrySortOrder).sort());/**
+     * When list with supported countries has the same entries as the country sort order, we don't
+     * need to add a separator to the countryOptionsOrder array since the country picker lists
+     * will not show a section with unordered countries.
+     */return sanitizedCountrySortOrder.length?[].concat(sanitizedCountrySortOrder,countryListsEqual?[]:['|']):[];},[countries,countrySortOrder]);var hasCountrySelect=React.useMemo(function(){return countries.length>1;},[countries.length]);var handleChangeWrapped=React.useCallback(function(phoneValue){handleChange(phoneValue,{target:{name:name}});},[handleChange,name]);var phoneClasses=classnames('textField',_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({simpleInput:!hasCountrySelect},_camelCase(name),true),"phonePicker",true),"phonePickerError",!!errorText),"validationError",!!errorText),"phonePickerFocused",isFocused),styles.phoneField,true),styles.phoneFieldError,!!errorText));if(!visible){return null;}var Component=hasCountrySelect?PhoneInputCountrySelect:PhoneInput;return React.createElement("div",{className:classnames('formBuilderField','engage__form-phone-number',{validationError:!!errorText})},React.createElement("div",{className:phoneClasses},React.createElement(Label,{label:label,isFocused:isFocused,isFloating:isFocused||!!value}),React.createElement(Component,_extends({defaultCountry:defaultCountry,name:name,value:value||'',onChange:handleChangeWrapped,onFocus:function onFocus(){return setIsFocused(true);},onBlur:function onBlur(){return setIsFocused(false);},disabled:disabled,required:required,"aria-invalid":!!errorText,"aria-describedby":errorText.length>0?"ariaError-".concat(name):null},hasCountrySelect?{countryOptionsOrder:countryOptionsOrder,addInternationalOption:false,flags:flags,countries:countries,labels:labels}:{className:'PhoneInputInput'}))),React.createElement(FormHelper,{errorText:errorText,element:element,formName:formName,elementName:name}));});UnwrappedElementPhoneNumber.defaultProps={value:'',visible:true};export default UnwrappedElementPhoneNumber;

package/components/Form/Builder/ElementRadio.js

@@ -1,6 +1,6 @@
-import _camelCase from"lodash/camelCase";import React,{memo}from'react';import PropTypes from'prop-types';import RadioGroup from'@shopgate/pwa-ui-shared/Form/RadioGroup';import RadioItem from'@shopgate/pwa-ui-shared/Form/RadioGroup/components/Item';/**
+import _camelCase from"lodash/camelCase";import React,{memo}from'react';import PropTypes from'prop-types';import classNames from'classnames';import RadioGroup from'@shopgate/pwa-ui-shared/Form/RadioGroup';import RadioItem from'@shopgate/pwa-ui-shared/Form/RadioGroup/components/Item';import FormHelper from"./FormHelper";/**
  * Takes an element and renders it, if the type matches
  * @param {Object} props Component props.
  * @param {Object} props.element The data of the element to be rendered
  * @returns {JSX}
- */var ElementRadio=function ElementRadio(props){var element=props.element,errorText=props.errorText,name=props.name,value=props.value,visible=props.visible;if(!visible){return null;}return/*#__PURE__*/React.createElement("div",{className:"".concat(_camelCase(name)," engage__form-radio")},/*#__PURE__*/React.createElement(RadioGroup,{name:name,label:element.label,value:value,onChange:element.handleChange,errorText:errorText,isControlled:true,translateErrorText:false},Object.keys(element.options).map(function(itemName){return/*#__PURE__*/React.createElement(RadioItem,{key:"".concat(name,"_").concat(itemName),id:"".concat(name,"_").concat(_camelCase(itemName)),name:itemName,label:element.options[itemName]});})));};ElementRadio.defaultProps={value:'',visible:true};export default/*#__PURE__*/memo(ElementRadio);
+ */var ElementRadio=function ElementRadio(props){var element=props.element,errorText=props.errorText,name=props.name,value=props.value,visible=props.visible,formName=props.formName;if(!visible){return null;}return React.createElement("div",{className:classNames(_camelCase(name),'engage__form-radio','formBuilderField',{validationError:!!errorText})},React.createElement(RadioGroup,{name:name,label:element.label,value:value,onChange:element.handleChange,errorText:errorText,isControlled:true,translateErrorText:false,showErrorText:false,disabled:element.disabled},Object.keys(element.options).map(function(itemName){return React.createElement(RadioItem,{key:"".concat(name,"_").concat(itemName),id:"".concat(name,"_").concat(_camelCase(itemName)),name:itemName,label:element.options[itemName]});})),React.createElement(FormHelper,{errorText:errorText,element:element,formName:formName,elementName:name}));};ElementRadio.defaultProps={value:'',visible:true};export default memo(ElementRadio);

package/components/Form/Builder/ElementSelect.js

@@ -1,6 +1,6 @@
-import _camelCase from"lodash/camelCase";import React,{memo}from'react';import PropTypes from'prop-types';import Select from'@shopgate/pwa-ui-shared/Form/Select';/**
+import _camelCase from"lodash/camelCase";import React,{memo}from'react';import PropTypes from'prop-types';import classNames from'classnames';import Select from'@shopgate/pwa-ui-shared/Form/Select';import FormHelper from"./FormHelper";/**
  * Takes an element and renders it, if the type matches
  * @param {Object} props Component props.
  * @param {Object} props.element The data of the element to be rendered
- * @returns {JSX}
- */var ElementSelect=function ElementSelect(props){var element=props.element,errorText=props.errorText,name=props.name,value=props.value,visible=props.visible;if(!visible){return null;}return/*#__PURE__*/React.createElement("div",{className:"".concat(_camelCase(name)," engage__form-select")},/*#__PURE__*/React.createElement(Select,{name:name,label:element.label,placeholder:element.placeholder,value:value,options:element.options,onChange:element.handleChange,errorText:errorText,isControlled:true,translateErrorText:false}));};ElementSelect.defaultProps={value:'',visible:true};export default/*#__PURE__*/memo(ElementSelect);
+ * @returns {JSX.Element}
+ */var ElementSelect=function ElementSelect(props){var element=props.element,errorText=props.errorText,name=props.name,value=props.value,visible=props.visible,formName=props.formName;if(!visible){return null;}var label=element.label,placeholder=element.placeholder,required=element.required,options=element.options,disabled=element.disabled,handleChange=element.handleChange;return React.createElement("div",{className:classNames(_camelCase(name),'engage__form-select','formBuilderField',{validationError:!!errorText})},React.createElement(Select,{name:name,required:required,label:label,placeholder:placeholder,value:value,options:options,onChange:handleChange,errorText:errorText,isControlled:true,translateErrorText:false,showErrorText:false,disabled:disabled,"aria-invalid":!!errorText,"aria-describedby":errorText.length>0?"ariaError-".concat(name):null}),React.createElement(FormHelper,{errorText:errorText,element:element,formName:formName,elementName:name}));};ElementSelect.defaultProps={value:'',visible:true};export default memo(ElementSelect);

package/components/Form/Builder/ElementText.js

@@ -1,7 +1,7 @@
-import _camelCase from"lodash/camelCase";var _mapping;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,{memo}from'react';import PropTypes from'prop-types';import TextField from'@shopgate/pwa-ui-shared/TextField';import{ELEMENT_TYPE_TEXT,ELEMENT_TYPE_NUMBER,ELEMENT_TYPE_EMAIL,ELEMENT_TYPE_PASSWORD,ELEMENT_TYPE_DATE,ELEMENT_TYPE_PHONE}from"./Builder.constants";// Map element type to input type
-var mapping=(_mapping={},_defineProperty(_mapping,ELEMENT_TYPE_TEXT,'text'),_defineProperty(_mapping,ELEMENT_TYPE_NUMBER,'number'),_defineProperty(_mapping,ELEMENT_TYPE_EMAIL,'email'),_defineProperty(_mapping,ELEMENT_TYPE_PASSWORD,'password'),_defineProperty(_mapping,ELEMENT_TYPE_DATE,'date'),_defineProperty(_mapping,ELEMENT_TYPE_PHONE,'tel'),_mapping);/**
+import _camelCase from"lodash/camelCase";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,{memo}from'react';import PropTypes from'prop-types';import classNames from'classnames';import TextField from'@shopgate/pwa-ui-shared/TextField';import FormHelper from"./FormHelper";import{ELEMENT_TYPE_TEXT,ELEMENT_TYPE_NUMBER,ELEMENT_TYPE_EMAIL,ELEMENT_TYPE_PASSWORD,ELEMENT_TYPE_DATE,ELEMENT_TYPE_PHONE}from"./Builder.constants";// 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');/**
  * Takes an element and renders it, if the type matches
  * @param {Object} props Component props.
  * @param {Object} props.element The data of the element to be rendered
- * @returns {JSX}
- */var ElementText=function ElementText(props){var element=props.element,errorText=props.errorText,name=props.name,value=props.value,visible=props.visible;if(!visible){return null;}var type=mapping[element.type];return/*#__PURE__*/React.createElement("div",{className:"".concat(_camelCase(name)," engage__form-text")},/*#__PURE__*/React.createElement(TextField,{type:type,name:name,label:element.label,value:value,onChange:element.handleChange,errorText:errorText,isControlled:true,translateErrorText:false}));};ElementText.defaultProps={value:'',visible:true};export default/*#__PURE__*/memo(ElementText);
+ * @returns {JSX.Element}
+ */var ElementText=function ElementText(props){var element=props.element,errorText=props.errorText,name=props.name,value=props.value,visible=props.visible,formName=props.formName;if(!visible){return null;}var required=element.required,disabled=element.disabled,handleChange=element.handleChange,label=element.label;var type=mapping[element.type];return React.createElement("div",{className:classNames(_camelCase(name),'engage__form-text','formBuilderField',{validationError:!!errorText})},React.createElement(TextField,{required:required,type:type,name:name,label:label,value:value,onChange:handleChange,errorText:errorText,isControlled:true,translateErrorText:false,showErrorText:false,disabled:disabled}),React.createElement(FormHelper,{errorText:errorText,element:element,formName:formName,elementName:name}));};ElementText.defaultProps={value:'',visible:true};export default memo(ElementText);

package/components/Form/Builder/FormHelper.js

@@ -0,0 +1,5 @@
+import React from'react';import PropTypes from'prop-types';import ErrorTextCmp from'@shopgate/pwa-ui-shared/FormElement/components/ErrorText';import{SurroundPortals}from'@shopgate/engage/components';import{sanitizePortalName}from"./helpers/common";/**
+ * Component for error texts
+ * @param {Object} props Component props.
+ * @returns {JSX.Element}
+ */var FormHelper=function FormHelper(_ref){var errorText=_ref.errorText,element=_ref.element,formName=_ref.formName,elementName=_ref.elementName;return React.createElement("div",{className:"formHelper"},React.createElement(SurroundPortals,{portalName:"".concat(sanitizePortalName(formName),".").concat(sanitizePortalName(element.id),".formHelper"),portalProps:{formName:formName,element:element,errorText:errorText}},!!errorText&&React.createElement(ErrorTextCmp,{errorText:errorText,translate:false,elementName:elementName,ariaHidden:true})));};FormHelper.defaultProps={errorText:null,elementName:null};export default FormHelper;