@everymatrix/general-registration 1.10.5 → 1.10.11

package/dist/components/email-input2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate } from './locale.utils.js';
 
-const emailInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.email__wrapper{position:relative;display:flex;flex-direction:column-reverse;padding-top:10px}.email__label{color:#474747;font-size:16px;position:absolute;bottom:15px;left:5px;transform:translateY(-25px);transition:all 0.3s cubic-bezier(0.5, 0, 0.5, 1)}.email__label--required::after{content:\"*\";margin-left:5px;color:#666666}.email__input{width:inherit;padding:15px 6px;position:relative;border:none;border-bottom:3px solid #666666;background-color:transparent;color:#666666;font-size:16px;font-family:inherit}.email__input:focus{outline:none;box-shadow:0 5px 5px rgba(16, 15, 15, 0.1)}.email__input::placeholder{color:#666666}.email__input--invalid{border-bottom:3px solid #cc0000}.email__input:placeholder-shown+.email__label{opacity:0;visibility:hidden;transform:translateY(0)}.email__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000}";
+const emailInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.email{font-family:\"Roboto\";font-style:normal}.email__wrapper{position:relative;width:100%;padding-top:26px}.email__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.email__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;margin-left:2px}.email__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;padding:8px 20px;width:inherit;position:relative;border:2px solid #DEE1EE}.email__input:focus{outline-color:#3E3E3E}.email__input--invalid{border:2px solid #cc0000b3}.email__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}";
 
 const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -18,17 +18,24 @@ const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.valueHandler({ name: this.name, value: this.value });
     }
   }
-  validityStateHandler(inputStateEvent) {
-    this.sendValidityState.emit(inputStateEvent);
-  }
   emitValueHandler(newValue) {
     if (newValue == true && this.isValid) {
       this.valueHandler({ name: this.name, value: this.value });
     }
   }
+  validityStateHandler(inputStateEvent) {
+    this.sendValidityState.emit(inputStateEvent);
+  }
   valueHandler(inputValueEvent) {
     this.sendInputValue.emit(inputValueEvent);
   }
+  valueChangedHandler(event) {
+    if (this.isDuplicateInput) {
+      if (this.name === event.detail.name + 'Duplicate') {
+        this.duplicateInputValue = event.detail.value;
+      }
+    }
+  }
   connectedCallback() {
     this.validationPattern = this.setPattern();
   }
@@ -65,9 +72,13 @@ const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (this.inputReference.validity.valueMissing) {
       return translate('requiredError', this.language);
     }
+    if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
+      return this.validation.custom.find(customRule => customRule.rule === 'duplicate-input').errorMessage;
+    }
   }
   render() {
-    return h("div", { class: 'email__wrapper' }, h("input", { id: `${this.name}__input`, type: 'email', class: `email__input`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onBlur: (e) => this.handleInput(e) }), h("label", { class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("small", { class: 'email__error-message' }, this.errorMessage));
+    const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'email__input--invalid';
+    return h("div", { class: 'email__wrapper' }, h("input", { id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onBlur: (e) => this.handleInput(e) }), h("label", { class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("small", { class: 'email__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -82,9 +93,10 @@ const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "autofilled": [4],
     "language": [1],
     "emitValue": [4, "emit-value"],
+    "isDuplicateInput": [4, "is-duplicate-input"],
     "errorMessage": [32],
     "isValid": [32]
-  }]);
+  }, [[16, "sendInputValue", "valueChangedHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/general-input2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import './virtual-keyboard-controller.js';
+import './input-field-shared-styles.js';
 import { d as defineCustomElement$8 } from './date-input2.js';
 import { d as defineCustomElement$9 } from './checkbox-input2.js';
 import { d as defineCustomElement$7 } from './email-input2.js';
@@ -25,9 +25,9 @@ const GeneralInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   render() {
     switch (this.type.toLowerCase()) {
       case 'text':
-        return h("text-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language });
+        return h("text-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput });
       case 'email':
-        return h("email-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language });
+        return h("email-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput });
       case 'number':
         return h("number-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language });
       case 'checkbox':
@@ -35,7 +35,7 @@ const GeneralInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       case 'datetime':
         return h("date-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language });
       case 'password':
-        return h("password-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language });
+        return h("password-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput });
       case 'radio':
         return h("radio-input", { name: this.name, displayName: this.displayName, optionsGroup: this.options, validation: this.validation, emitValue: this.emitValue, language: this.language });
       case 'tel':
@@ -43,7 +43,6 @@ const GeneralInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       case 'dropdown':
         return h("select-input", { name: this.name, action: this.action, defaultValue: this.defaultValue, displayName: this.displayName, options: this.options, validation: this.validation, emitValue: this.emitValue, autofilled: this.autofilled, language: this.language });
       default:
-        // Nothing here
         return h("p", null, "The ", this.type, " input type is not valid");
     }
   }
@@ -58,7 +57,8 @@ const GeneralInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "language": [1],
     "autofilled": [4],
     "defaultValue": [8, "default-value"],
-    "emitValue": [4, "emit-value"]
+    "emitValue": [4, "emit-value"],
+    "isDuplicateInput": [4, "is-duplicate-input"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/general-registration.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$b } from './checkbox-input2.js';
 import { d as defineCustomElement$a } from './date-input2.js';
 import { d as defineCustomElement$9 } from './email-input2.js';
@@ -39,240 +39,56 @@ const translate = (key, customLang, values) => {
   return translation;
 };
 
-const generalRegistrationCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.registration{display:flex;flex-direction:column;gap:20px;width:100%;height:100%}.registration__form{display:grid;grid-template-columns:repeat(2, minmax(min-content, 1fr));column-gap:65px;row-gap:30px;justify-items:stretch;align-content:flex-start;overflow:scroll;width:100%;height:100%}.registration__buttons-wrapper{display:flex;flex-direction:row-reverse;justify-content:space-between}.registration__button{background-color:#e69200;border-radius:30px;text-transform:uppercase;padding:10px 50px;border:none;box-shadow:0px 2px 2px rgba(0, 0, 0, 0.5)}.registration__button--disabled{background-color:grey}.registration__button--done{background-color:#176317}";
+const generalRegistrationCss = "*,\n*::before,\n*::after {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n\n.registration {\n  font-family: \"Roboto\";\n  font-style: normal;\n  font-family: sans-serif;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  width: 100%;\n  height: 100%;\n  container-type: inline-size;\n}\n.registration__form {\n  display: grid;\n  grid-template-columns: repeat(1, 1fr);\n  gap: 40px;\n  justify-items: stretch;\n  align-content: flex-start;\n  overflow: auto;\n  width: 100%;\n  height: 100%;\n}\n.registration__buttons-wrapper {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: space-around;\n  align-items: center;\n}\n.registration__button {\n  text-transform: uppercase;\n  width: 250px;\n  height: 40px;\n  border-radius: 3px;\n}\n.registration__button:hover {\n  opacity: 0.8;\n}\n.registration__button:active {\n  opacity: 1;\n}\n.registration__button--next {\n  color: #FFFFFF;\n  background-color: #B0B0B0;\n  border: none;\n}\n.registration__button--back {\n  color: #B0B0B0;\n  background-color: #FFFFFF;\n  border: 2px solid #B0B0B0;\n}\n.registration__button--first-step {\n  display: none;\n}\n\n@container (min-width: 450px) {\n  .registration__form {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .registration__buttons-wrapper {\n    flex-direction: column;\n    gap: 15px;\n  }\n}";
 
 const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.data = {
-      "type": "default",
-      "content": {
-        "step": "step1",
-        "fields": [
-          {
-            "name": "firstName",
-            "displayName": "Username",
-            "defaultValue": null,
-            "validate": {
-              "mandatory": true,
-              "minLength": 3,
-              "maxLength": 20
-            },
-            "autofill": false
-          },
-          {
-            "name": "lastName",
-            "displayName": "Last name",
-            "defaultValue": null,
-            "validate": {
-              "mandatory": true,
-              "minLength": 3,
-              "maxLength": 20
-            },
-          },
-          {
-            "name": "telephone",
-            "displayName": "Telephone",
-            "action": "GET https://demo-api.stage.norway.everymatrix.com/v1/player/phonecodes",
-            "defaultValue": null,
-            "validate": {
-              "mandatory": true
-            },
-            "autofill": false,
-            "inputType": "tel"
-          },
-          {
-            "name": "dateOfBirth",
-            "displayName": "Date of Birth",
-            "defaultValue": null,
-            "validate": {
-              "min": "2022-05-01",
-              "max": "2022-05-29",
-              "mandatory": true,
-            },
-            "inputType": "datetime"
-          },
-          {
-            "name": "email",
-            "displayName": "Email",
-            "defaultValue": 'a@a.com',
-            "validate": {
-              "mandatory": true,
-              "custom": [
-                {
-                  "rule": "regex",
-                  "pattern": "^[a-zA-Z0-9._%+-]+@[a-zA-Z-9.-]+\\.[a-zA-Z]{2,3}$",
-                  "errorMessage": "Please enter a valid email address"
-                }
-              ]
-            },
-            "inputType": "email"
-          },
-          {
-            "name": "password",
-            "displayName": "Password",
-            "defaultValue": null,
-            "validate": {
-              "mandatory": true,
-              "minLength": 3,
-              "maxLength": 20,
-              "type": "password",
-              "custom": [
-                {
-                  "rule": "regex",
-                  "pattern": "(?=.*\\d+)(?=.*[A-Za-z]+).{8,20}",
-                  "errorMessage": "Password must contain at least 1 letter and 1 digit, and its minimal length is 8."
-                }
-              ]
-            },
-            "inputType": "password"
-          },
-          {
-            "name": "email",
-            "displayName": "Email",
-            "defaultValue": null,
-            "validate": {
-              "mandatory": true,
-              "type": "email",
-              "custom": [
-                {
-                  "rule": "unique-email",
-                  "errorMessage": "Please check your email"
-                },
-                {
-                  "rule": "regex",
-                  "pattern": "^[a-zA-Z0-9._%+-]+@[a-zA-Z-9.-]+\\.[a-zA-Z]{2,3}$",
-                  "errorMessage": "Please enter a valid email address"
-                },
-                {
-                  "rule": "duplicate-input",
-                  "displayName": "pt al doilea input gen: Confirm Email",
-                  "errorMessage": "Different Email! Pls."
-                }
-              ]
-            }
-          },
-          {
-            "name": "termsAndConditions",
-            "displayName": "Terms and Conditions",
-            "validate": {
-              "mandatory": true,
-              "type": "boolean"
-            },
-            "inputType": "checkbox"
-          },
-          {
-            "name": "pepCheck",
-            "validate": {
-              "mandatory": true
-            },
-            "inputType": "checkbox"
-          },
-          {
-            "name": "gender",
-            "data": {
-              "values": [
-                {
-                  "label": "🍆",
-                  "value": "m"
-                },
-                {
-                  "label": "🍑",
-                  "value": "f"
-                }
-              ]
-            },
-            "validate": {
-              "mandatory": true
-            },
-            "inputType": "radio"
-          },
-          {
-            "name": "dateOfBirth",
-            "validate": {
-              "mandatory": true,
-              "custom": [
-                {
-                  "rule": "regex",
-                  "pattern": "(?:19\\d{2}|20[01][0-9]|2020)[-/.](?:0[1-9]|1[012])[-/.](?:0[1-9]|[12][0-9]|3[01])",
-                  "errorMessage": "Invalid date format"
-                },
-                {
-                  "rule": "min-18-years",
-                  "errorMessage": "Not old enough to ride the roller coaster"
-                }
-              ]
-            }
-          },
-          {
-            "name": "city",
-            "displayName": "Cities",
-            "action": null,
-            "data": {
-              "values": [
-                {
-                  "label": "Budapest",
-                  "value": "Budapest"
-                },
-                {
-                  "label": "Debrecen",
-                  "value": "Debrecen"
-                },
-                {
-                  "label": "Miskolc",
-                  "value": "Miskolc"
-                },
-                {
-                  "label": "Szeged",
-                  "value": "Szeged"
-                },
-                {
-                  "label": "Zuglo",
-                  "value": "Zuglo"
-                }
-              ]
-            },
-            "validate": {
-              "mandatory": true
-            },
-            "inputType": "dropdown"
-          },
-          {
-            "name": "city",
-            "displayName": "Cities",
-            "data": null,
-            "action": "GET https://demo-api.stage.norway.everymatrix.com/v1/player/countries",
-            "validate": {
-              "mandatory": true
-            },
-            "inputType": "dropdown"
-          }
-        ],
-        "actions": [
-          "get-next-step",
-          "some-async-action-before-submitting",
-          "submit-step-data"
-        ]
-      }
-    };
+    this.registrationWidgetLoaded = createEvent(this, "registrationWidgetLoaded", 7);
+    this.registrationStepUpdated = createEvent(this, "registrationStepUpdated", 7);
     /**
     * Currently selected language
     */
     this.language = 'en';
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrl = '';
     this.emitValue = false;
     this.listOfInputs = [];
     this.isLoading = true;
+    this.limitStylingAppends = false;
     this.listOfInputValues = [];
     this.listOfActions = [];
-    this.steps = [];
+    this.indexStep = 0;
     this.registrationStepsState = {
       regId: null
     };
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let url = new URL(this.clientStylingUrl);
+      let cssFile = document.createElement('style');
+      fetch(url.href)
+        .then((res) => res.text())
+        .then((data) => {
+        cssFile.innerHTML = data;
+        setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
+      });
+    };
   }
-  logger() {
-    console.log(this.registrationStep);
+  sendStep() {
+    this.registrationStepUpdated.emit(this.registrationStep);
+    window.postMessage({ type: 'registrationStepUpdated', step: this.registrationStep }, window.location.href);
   }
   checkInputsValidityHandler(event) {
     // Set isValid state of the input in the list.
@@ -289,18 +105,24 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.stepsStateMachine({ event: 'set', type: 'values' });
   }
   componentWillLoad() {
-    // const mockCall = Promise.resolve(this.data);
-    // return mockCall.then((data) => {
-    //   this.listOfInputs = data.content.fields.map((field) => {
-    //     this.isLoading = false;
-    //     return { ...field, isValid: false };
-    //   });
-    // });
     return this.getRegisterConfig().then((config) => {
       this.formatConfig(config);
       this.stepsStateMachine({ event: 'set', type: 'inputs' });
     });
   }
+  componentDidRender() {
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+  }
+  componentDidLoad() {
+    this.registrationWidgetLoaded.emit();
+    window.postMessage({ type: 'registrationWidgetLoaded' }, window.location.href);
+  }
   nextHandler(e) {
     e.preventDefault();
     // Trigger events in subwidgets.
@@ -309,8 +131,8 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   backHandler(e) {
     e.preventDefault();
-    this.steps.pop();
-    this.registrationStep = this.steps.at(-1);
+    this.isLastStep = false;
+    this.registrationStep = this.stepChange('decrement');
     this.stepsStateMachine({ event: 'get', type: 'inputs' });
     this.stepsStateMachine({ event: 'get', type: 'values' });
   }
@@ -319,10 +141,11 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
       case 'set':
         if (state.type == 'inputs') {
           this.registrationStepsState[this.registrationStep].fields = this.listOfInputs;
+          this.registrationStepsState[this.registrationStep].actions = this.listOfActions;
         }
         if (state.type == 'values') {
           this.registrationStepsState[this.registrationStep].registerUserData = this.listOfInputValues.reduce((acc, curr) => {
-            acc[curr.name] = curr.value;
+            acc[curr.name] = { value: curr.value, isDuplicate: curr.isDuplicate };
             return acc;
           }, {});
         }
@@ -334,17 +157,19 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
           return;
         if (state.type == 'inputs') {
           this.listOfInputs = this.registrationStepsState[this.registrationStep].fields;
+          this.listOfActions = this.registrationStepsState[this.registrationStep].actions;
         }
         if (state.type == 'values') {
           const savedValues = savedUserData[this.registrationStep].registerUserData;
           this.listOfInputValues = Object.keys(savedValues).map(name => {
-            return { name, value: savedValues[name] };
+            return { name, value: savedValues[name].value, isDuplicate: savedValues[name].isDuplicate };
           });
           // Give to each field the user input as the default value.
           this.listOfInputValues.forEach(inputValue => {
             const input = this.listOfInputs.find(input => input.name === inputValue.name);
             if (input) {
               input.defaultValue = inputValue.value;
+              console.log(input);
             }
           });
         }
@@ -382,7 +207,9 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     const url = new URL(`${this.endpoint}/v1/player/legislation/registration/step`);
     const registerStep = {
       registrationId: this.registrationID,
-      registerUserDto: this.listOfInputValues.reduce((acc, curr) => {
+      registerUserDto: this.listOfInputValues
+        .filter(input => !input.isDuplicate)
+        .reduce((acc, curr) => {
         // Special case for "Mobile" as it needs to be split in two values -- API expects it this way.
         if (curr.name == "Mobile") {
           acc['MobilePrefix'] = curr.value.split('|')[0];
@@ -416,12 +243,22 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
         this.setRegister();
       }
       else {
-        this.getRegisterConfig(this.registrationID).then((config) => {
-          // Format the new step config.
-          this.formatConfig(config);
-          // Set it in local storage
-          this.stepsStateMachine({ event: 'set', type: 'inputs' });
-        });
+        // After sending the current step, increment and check if the next one is in state.
+        this.registrationStep = this.stepChange('increment');
+        // If step is present in state do NOT fetch the next config.
+        if (Object.keys(this.registrationStepsState).find(key => key == this.registrationStep)) {
+          // Use the one from state
+          this.stepsStateMachine({ event: 'get', type: 'inputs' });
+          this.stepsStateMachine({ event: 'get', type: 'values' });
+        }
+        else {
+          this.getRegisterConfig(this.registrationID).then((config) => {
+            // Format the new step config.
+            this.formatConfig(config);
+            // Set it in local storage.
+            this.stepsStateMachine({ event: 'set', type: 'inputs' });
+          });
+        }
       }
     })
       .catch((err) => {
@@ -463,60 +300,77 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   formatConfig(config) {
     // Populate the list of inputs and set as invalid in the beginning
-    let newListOfInputs = config.content.fields.map((field) => {
-      return Object.assign(Object.assign({}, field), { isValid: false });
+    this.listOfInputs = config.content.fields.flatMap((field) => {
+      // Special case for inputs that need to be duplicated.
+      const duplicateInputRule = field.validate.custom.find(customRule => customRule.rule === 'duplicate-input');
+      const inputElement = Object.assign(Object.assign({}, field), { isValid: false });
+      if (duplicateInputRule) {
+        const duplicateInput = Object.assign(Object.assign({}, field), { name: `${field.name}Duplicate`, displayName: duplicateInputRule.displayName, isValid: false, isDuplicateInput: true });
+        return [inputElement, duplicateInput];
+      }
+      else {
+        return [inputElement];
+      }
     });
-    this.listOfInputs = JSON.parse(JSON.stringify(newListOfInputs));
     // Populate the list of inputs values and set as null in the beginning
-    this.listOfInputValues = config.content.fields.map(field => {
-      return { name: field.name, value: null };
+    this.listOfInputValues = this.listOfInputs.map(field => {
+      return { name: field.name, value: null, isDuplicate: field.isDuplicateInput || false };
     });
     // Set the list of actions
     this.listOfActions = config.content.actions.map(action => action);
     this.isLastStep = this.listOfActions.some(action => action == '/register');
     this.registrationID = config.content.registrationID;
     this.registrationStep = config.content.step;
-    this.steps.push(this.registrationStep);
     // Add the step to the registrationStepsData
     this.registrationStepsState.regId = this.registrationID;
     if (!this.registrationStepsState[this.registrationStep]) {
       this.registrationStepsState[this.registrationStep] = {
         fields: [],
-        registerUserData: {}
+        registerUserData: {},
+        actions: []
       };
     }
   }
+  stepChange(action) {
+    const stepNum = parseInt(this.registrationStep.replace('Step', ''));
+    if (action === 'increment') {
+      return 'Step' + (stepNum + 1);
+    }
+    if (action === 'decrement') {
+      return 'Step' + (stepNum - 1);
+    }
+  }
   getInvalidStatus(listOfInputs) {
     return listOfInputs.filter(input => input.isValid == false).length > 0;
   }
   renderInputs() {
-    return (this.listOfInputs.map(input => h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data ? input.data.values : [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language })));
+    return (this.listOfInputs.map(input => h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data ? input.data.values : [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language, isDuplicateInput: input.isDuplicateInput })));
   }
   ;
   renderButtons() {
-    return (h("div", { class: 'registration__buttons-wrapper' }, h("button", { class: `registration__button ${this.isLastStep ? 'registration__button--done' : ''}`, type: 'submit', form: 'RegistrationForm', onClick: (e) => this.nextHandler(e) }, this.isLastStep ? translate('doneButton', this.language) : translate('nextButton', this.language)), this.registrationStep !== 'Step1' && h("button", { class: 'registration__button', onClick: (e) => this.backHandler(e) }, translate('backButton', this.language))));
+    return (h("div", { class: 'registration__buttons-wrapper' }, h("button", { class: `registration__button registration__button--next`, type: 'submit', form: 'RegistrationForm', onClick: (e) => this.nextHandler(e) }, this.isLastStep ? translate('doneButton', this.language) : translate('nextButton', this.language)), h("button", { class: `registration__button registration__button--back ${this.registrationStep == 'Step1' ? 'registration__button--first-step' : ''}`, onClick: (e) => this.backHandler(e) }, translate('backButton', this.language))));
   }
   render() {
     if (this.isLoading) {
       return h("p", null, "Please wait, loading ...");
     }
-    return (h("div", { class: 'registration' }, h("form", { action: '.', id: 'RegistrationForm', class: 'registration__form' }, this.renderInputs()), this.renderButtons()));
+    return (h("div", { class: `registration  registration__${this.registrationStep}`, ref: el => this.stylingContainer = el }, h("form", { action: '.', id: 'RegistrationForm', class: 'registration__form' }, this.renderInputs()), this.renderButtons()));
   }
   static get watchers() { return {
-    "registrationStep": ["logger"]
+    "registrationStep": ["sendStep"]
   }; }
   static get style() { return generalRegistrationCss; }
 }, [1, "general-registration", {
     "endpoint": [1],
-    "tenantId": [1, "tenant-id"],
-    "clientId": [1, "client-id"],
-    "apiKey": [1, "api-key"],
     "language": [1],
+    "clientStyling": [1, "client-styling"],
+    "clientStylingUrl": [1, "client-styling-url"],
     "errorMessage": [32],
     "emitValue": [32],
     "isFormValid": [32],
     "listOfInputs": [32],
     "isLoading": [32],
+    "limitStylingAppends": [32],
     "registrationStep": [32]
   }, [[0, "sendValidityState", "checkInputsValidityHandler"], [0, "sendInputValue", "getInputsValueHandler"]]]);
 function defineCustomElement$1() {