@everymatrix/general-registration 1.10.14 → 1.10.16

package/dist/cjs/checkbox-input_11.cjs.entry.js

@@ -103,7 +103,7 @@ const CheckboxInput = class {
     }
   }
   render() {
-    return index.h("div", { class: 'checkbox__wrapper', ref: el => this.stylingContainer = el }, index.h("input", { type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, checked: !!this.defaultValue, readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), index.h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.h("small", { class: 'checkbox__error-message' }, this.errorMessage));
+    return index.h("div", { class: 'checkbox__wrapper', ref: el => this.stylingContainer = el }, index.h("input", { type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, checked: this.defaultValue == "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), index.h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.h("small", { class: 'checkbox__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -23309,7 +23309,7 @@ const translate = (key, customLang, values) => {
   return translation;
 };
 
-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 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--disabled {\n  opacity: 0.5;\n}\n.registration__button--disabled:hover {\n  opacity: 0.5;\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 = class {
   constructor(hostRef) {
@@ -23328,13 +23328,16 @@ const GeneralRegistration = class {
      * Client custom styling via url
      */
     this.clientStylingUrl = '';
-    this.emitValue = false;
+    /**
+     * Translations via URL
+     */
+    this.translationsUrl = '';
     this.listOfInputs = [];
     this.isLoading = true;
-    this.limitStylingAppends = false;
     this.listOfInputValues = [];
     this.listOfActions = [];
     this.indexStep = 0;
+    this.emitValue = false;
     this.registrationStepsState = {
       regId: null
     };
@@ -23359,6 +23362,9 @@ const GeneralRegistration = class {
     this.registrationStepUpdated.emit(this.registrationStep);
     window.postMessage({ type: 'registrationStepUpdated', step: this.registrationStep }, window.location.href);
   }
+  setFormValidity() {
+    this.isFormValid = !this.getInvalidStatus(this.listOfInputs);
+  }
   checkInputsValidityHandler(event) {
     // Set isValid state of the input in the list.
     this.listOfInputs.find(input => input.name == event.detail.name).isValid = event.detail.valid;
@@ -23380,12 +23386,11 @@ const GeneralRegistration = class {
     });
   }
   componentDidRender() {
-    if (!this.limitStylingAppends && this.stylingContainer) {
+    if (this.stylingContainer) {
       if (this.clientStyling)
         this.setClientStyling();
       if (this.clientStylingUrl)
         this.setClientStylingURL();
-      this.limitStylingAppends = true;
     }
   }
   componentDidLoad() {
@@ -23430,6 +23435,7 @@ const GeneralRegistration = class {
         }
         if (state.type == 'values') {
           const savedValues = savedUserData[this.registrationStep].registerUserData;
+          console.log(savedValues);
           this.listOfInputValues = Object.keys(savedValues).map(name => {
             return { name, value: savedValues[name].value, isDuplicate: savedValues[name].isDuplicate };
           });
@@ -23438,7 +23444,6 @@ const GeneralRegistration = class {
             const input = this.listOfInputs.find(input => input.name === inputValue.name);
             if (input) {
               input.defaultValue = inputValue.value;
-              console.log(input);
             }
           });
         }
@@ -23559,6 +23564,7 @@ const GeneralRegistration = class {
       if (data.userId) {
         alert(`User registered - the user ID is ${data.userId}`);
       }
+      window.postMessage({ type: 'registrationSuccessful' }, window.location.href);
     })
       .catch((err) => {
       console.error(err);
@@ -23572,7 +23578,7 @@ const GeneralRegistration = class {
     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 });
+      const inputElement = Object.assign(Object.assign({}, field), { isValid: this.setInitialValidStatus(field) });
       if (duplicateInputRule) {
         const duplicateInput = Object.assign(Object.assign({}, field), { name: `${field.name}Duplicate`, displayName: duplicateInputRule.displayName, isValid: false, isDuplicateInput: true });
         return [inputElement, duplicateInput];
@@ -23581,7 +23587,7 @@ const GeneralRegistration = class {
         return [inputElement];
       }
     });
-    // Populate the list of inputs values and set as null in the beginning
+    // Populate the list of inputs values and set as null in the beginning (or false for checkbox type inputs)
     this.listOfInputValues = this.listOfInputs.map(field => {
       var _a;
       return { name: field.name,
@@ -23603,6 +23609,18 @@ const GeneralRegistration = class {
       };
     }
   }
+  setInitialValidStatus(field) {
+    var _a, _b;
+    // Input type checkbox, with no validation are valid
+    if (((_a = field.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) == 'checkbox' && ((_b = field.validate) === null || _b === void 0 ? void 0 : _b.mandatory) == false) {
+      return true;
+    }
+    //Inputs that have default value are valid.
+    if (field.defaultValue !== null) {
+      return true;
+    }
+    return false;
+  }
   stepChange(action) {
     const stepNum = parseInt(this.registrationStep.replace('Step', ''));
     if (action === 'increment') {
@@ -23620,7 +23638,7 @@ const GeneralRegistration = class {
   }
   ;
   renderButtons() {
-    return (index.h("div", { class: 'registration__buttons-wrapper' }, index.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)), index.h("button", { class: `registration__button registration__button--back ${this.registrationStep == 'Step1' ? 'registration__button--first-step' : ''}`, onClick: (e) => this.backHandler(e) }, translate('backButton', this.language))));
+    return (index.h("div", { class: 'registration__buttons-wrapper' }, index.h("button", { class: `registration__button registration__button--next ${this.isFormValid ? '' : 'registration__button--disabled'}`, type: 'submit', form: 'RegistrationForm', onClick: (e) => this.nextHandler(e), disabled: !this.isFormValid }, this.isLastStep ? translate('doneButton', this.language) : translate('nextButton', this.language)), index.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) {
@@ -23629,7 +23647,8 @@ const GeneralRegistration = class {
     return (index.h("div", { class: `registration  registration__${this.registrationStep}`, ref: el => this.stylingContainer = el }, index.h("form", { action: '.', id: 'RegistrationForm', class: 'registration__form' }, this.renderInputs()), this.renderButtons()));
   }
   static get watchers() { return {
-    "registrationStep": ["sendStep"]
+    "registrationStep": ["sendStep"],
+    "listOfInputs": ["setFormValidity"]
   }; }
 };
 GeneralRegistration.style = generalRegistrationCss;

package/dist/cjs/general-registration.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["checkbox-input_11.cjs",[[1,"general-registration",{"endpoint":[513],"language":[513],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"errorMessage":[32],"emitValue":[32],"isFormValid":[32],"listOfInputs":[32],"isLoading":[32],"limitStylingAppends":[32],"registrationStep":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[513],"name":[513],"displayName":[513,"display-name"],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[520,"client-styling"]}],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]}],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"rules":[513],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]]]]], options);
+  return index.bootstrapLazy([["checkbox-input_11.cjs",[[1,"general-registration",{"endpoint":[513],"language":[513],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationsUrl":[513,"translations-url"],"errorMessage":[32],"isFormValid":[32],"listOfInputs":[32],"isLoading":[32],"registrationStep":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[513],"name":[513],"displayName":[513,"display-name"],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[520,"client-styling"]}],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]}],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"rules":[513],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]]]]], options);
 });

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["checkbox-input_11.cjs",[[1,"general-registration",{"endpoint":[513],"language":[513],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"errorMessage":[32],"emitValue":[32],"isFormValid":[32],"listOfInputs":[32],"isLoading":[32],"limitStylingAppends":[32],"registrationStep":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[513],"name":[513],"displayName":[513,"display-name"],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[520,"client-styling"]}],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]}],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"rules":[513],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]]]]], options);
+  return index.bootstrapLazy([["checkbox-input_11.cjs",[[1,"general-registration",{"endpoint":[513],"language":[513],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationsUrl":[513,"translations-url"],"errorMessage":[32],"isFormValid":[32],"listOfInputs":[32],"isLoading":[32],"registrationStep":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[513],"name":[513],"displayName":[513,"display-name"],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[520,"client-styling"]}],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]}],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"rules":[513],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]]]]], options);
   });
 };
 

package/dist/collection/components/general-registration/general-registration.css

@@ -55,6 +55,12 @@
   background-color: #FFFFFF;
   border: 2px solid #B0B0B0;
 }
+.registration__button--disabled {
+  opacity: 0.5;
+}
+.registration__button--disabled:hover {
+  opacity: 0.5;
+}
 .registration__button--first-step {
   display: none;
 }

package/dist/collection/components/general-registration/general-registration.js

@@ -15,13 +15,16 @@ export class GeneralRegistration {
      * Client custom styling via url
      */
     this.clientStylingUrl = '';
-    this.emitValue = false;
+    /**
+     * Translations via URL
+     */
+    this.translationsUrl = '';
     this.listOfInputs = [];
     this.isLoading = true;
-    this.limitStylingAppends = false;
     this.listOfInputValues = [];
     this.listOfActions = [];
     this.indexStep = 0;
+    this.emitValue = false;
     this.registrationStepsState = {
       regId: null
     };
@@ -46,6 +49,9 @@ export class GeneralRegistration {
     this.registrationStepUpdated.emit(this.registrationStep);
     window.postMessage({ type: 'registrationStepUpdated', step: this.registrationStep }, window.location.href);
   }
+  setFormValidity() {
+    this.isFormValid = !this.getInvalidStatus(this.listOfInputs);
+  }
   checkInputsValidityHandler(event) {
     // Set isValid state of the input in the list.
     this.listOfInputs.find(input => input.name == event.detail.name).isValid = event.detail.valid;
@@ -67,12 +73,11 @@ export class GeneralRegistration {
     });
   }
   componentDidRender() {
-    if (!this.limitStylingAppends && this.stylingContainer) {
+    if (this.stylingContainer) {
       if (this.clientStyling)
         this.setClientStyling();
       if (this.clientStylingUrl)
         this.setClientStylingURL();
-      this.limitStylingAppends = true;
     }
   }
   componentDidLoad() {
@@ -117,6 +122,7 @@ export class GeneralRegistration {
         }
         if (state.type == 'values') {
           const savedValues = savedUserData[this.registrationStep].registerUserData;
+          console.log(savedValues);
           this.listOfInputValues = Object.keys(savedValues).map(name => {
             return { name, value: savedValues[name].value, isDuplicate: savedValues[name].isDuplicate };
           });
@@ -125,7 +131,6 @@ export class GeneralRegistration {
             const input = this.listOfInputs.find(input => input.name === inputValue.name);
             if (input) {
               input.defaultValue = inputValue.value;
-              console.log(input);
             }
           });
         }
@@ -246,6 +251,7 @@ export class GeneralRegistration {
       if (data.userId) {
         alert(`User registered - the user ID is ${data.userId}`);
       }
+      window.postMessage({ type: 'registrationSuccessful' }, window.location.href);
     })
       .catch((err) => {
       console.error(err);
@@ -259,7 +265,7 @@ export class GeneralRegistration {
     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 });
+      const inputElement = Object.assign(Object.assign({}, field), { isValid: this.setInitialValidStatus(field) });
       if (duplicateInputRule) {
         const duplicateInput = Object.assign(Object.assign({}, field), { name: `${field.name}Duplicate`, displayName: duplicateInputRule.displayName, isValid: false, isDuplicateInput: true });
         return [inputElement, duplicateInput];
@@ -268,7 +274,7 @@ export class GeneralRegistration {
         return [inputElement];
       }
     });
-    // Populate the list of inputs values and set as null in the beginning
+    // Populate the list of inputs values and set as null in the beginning (or false for checkbox type inputs)
     this.listOfInputValues = this.listOfInputs.map(field => {
       var _a;
       return { name: field.name,
@@ -290,6 +296,18 @@ export class GeneralRegistration {
       };
     }
   }
+  setInitialValidStatus(field) {
+    var _a, _b;
+    // Input type checkbox, with no validation are valid
+    if (((_a = field.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) == 'checkbox' && ((_b = field.validate) === null || _b === void 0 ? void 0 : _b.mandatory) == false) {
+      return true;
+    }
+    //Inputs that have default value are valid.
+    if (field.defaultValue !== null) {
+      return true;
+    }
+    return false;
+  }
   stepChange(action) {
     const stepNum = parseInt(this.registrationStep.replace('Step', ''));
     if (action === 'increment') {
@@ -308,7 +326,7 @@ export class GeneralRegistration {
   ;
   renderButtons() {
     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--next ${this.isFormValid ? '' : 'registration__button--disabled'}`, type: 'submit', form: 'RegistrationForm', onClick: (e) => this.nextHandler(e), disabled: !this.isFormValid }, 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() {
@@ -398,15 +416,31 @@ export class GeneralRegistration {
       "attribute": "client-styling-url",
       "reflect": true,
       "defaultValue": "''"
+    },
+    "translationsUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Translations via URL"
+      },
+      "attribute": "translations-url",
+      "reflect": true,
+      "defaultValue": "''"
     }
   }; }
   static get states() { return {
     "errorMessage": {},
-    "emitValue": {},
     "isFormValid": {},
     "listOfInputs": {},
     "isLoading": {},
-    "limitStylingAppends": {},
     "registrationStep": {}
   }; }
   static get events() { return [{
@@ -443,6 +477,9 @@ export class GeneralRegistration {
   static get watchers() { return [{
       "propName": "registrationStep",
       "methodName": "sendStep"
+    }, {
+      "propName": "listOfInputs",
+      "methodName": "setFormValidity"
     }]; }
   static get listeners() { return [{
       "name": "sendValidityState",

package/dist/collection/utils/locale.utils.js

@@ -0,0 +1,28 @@
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const TRANSLATIONS = {
+  en: {
+    dateError: 'The selected date should be between {min} and {max}',
+    numberLengthError: 'The number should be between {min} and {max}',
+    lengthError: `The length should be between {minLength} and {maxLength}`,
+    requiredError: 'This input is required.',
+    nextButton: 'Next',
+    backButton: 'Back',
+    doneButton: 'Done'
+  },
+  ro: {
+    lengthError: `Cuvântul introdus este prea scurt. {minLength} and {maxLength}`,
+    requiredError: 'Acest câmp este obligatoriu.'
+  }
+};
+export const translate = (key, customLang, values) => {
+  const lang = customLang;
+  let translation = TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+  if (values !== undefined) {
+    for (const [key, value] of Object.entries(values.values)) {
+      const regex = new RegExp(`{${key}}`, 'g');
+      translation = translation.replace(regex, value);
+    }
+  }
+  return translation;
+};

package/dist/components/checkbox-input2.js

@@ -73,7 +73,7 @@ const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   render() {
-    return h("div", { class: 'checkbox__wrapper', ref: el => this.stylingContainer = el }, h("input", { type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, checked: !!this.defaultValue, readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h("small", { class: 'checkbox__error-message' }, this.errorMessage));
+    return h("div", { class: 'checkbox__wrapper', ref: el => this.stylingContainer = el }, h("input", { type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, checked: this.defaultValue == "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h("small", { class: 'checkbox__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],

package/dist/components/general-registration.js

@@ -39,7 +39,7 @@ const translate = (key, customLang, values) => {
   return translation;
 };
 
-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 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--disabled {\n  opacity: 0.5;\n}\n.registration__button--disabled:hover {\n  opacity: 0.5;\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() {
@@ -60,13 +60,16 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
      * Client custom styling via url
      */
     this.clientStylingUrl = '';
-    this.emitValue = false;
+    /**
+     * Translations via URL
+     */
+    this.translationsUrl = '';
     this.listOfInputs = [];
     this.isLoading = true;
-    this.limitStylingAppends = false;
     this.listOfInputValues = [];
     this.listOfActions = [];
     this.indexStep = 0;
+    this.emitValue = false;
     this.registrationStepsState = {
       regId: null
     };
@@ -91,6 +94,9 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.registrationStepUpdated.emit(this.registrationStep);
     window.postMessage({ type: 'registrationStepUpdated', step: this.registrationStep }, window.location.href);
   }
+  setFormValidity() {
+    this.isFormValid = !this.getInvalidStatus(this.listOfInputs);
+  }
   checkInputsValidityHandler(event) {
     // Set isValid state of the input in the list.
     this.listOfInputs.find(input => input.name == event.detail.name).isValid = event.detail.valid;
@@ -112,12 +118,11 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     });
   }
   componentDidRender() {
-    if (!this.limitStylingAppends && this.stylingContainer) {
+    if (this.stylingContainer) {
       if (this.clientStyling)
         this.setClientStyling();
       if (this.clientStylingUrl)
         this.setClientStylingURL();
-      this.limitStylingAppends = true;
     }
   }
   componentDidLoad() {
@@ -162,6 +167,7 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
         }
         if (state.type == 'values') {
           const savedValues = savedUserData[this.registrationStep].registerUserData;
+          console.log(savedValues);
           this.listOfInputValues = Object.keys(savedValues).map(name => {
             return { name, value: savedValues[name].value, isDuplicate: savedValues[name].isDuplicate };
           });
@@ -170,7 +176,6 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
             const input = this.listOfInputs.find(input => input.name === inputValue.name);
             if (input) {
               input.defaultValue = inputValue.value;
-              console.log(input);
             }
           });
         }
@@ -291,6 +296,7 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
       if (data.userId) {
         alert(`User registered - the user ID is ${data.userId}`);
       }
+      window.postMessage({ type: 'registrationSuccessful' }, window.location.href);
     })
       .catch((err) => {
       console.error(err);
@@ -304,7 +310,7 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     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 });
+      const inputElement = Object.assign(Object.assign({}, field), { isValid: this.setInitialValidStatus(field) });
       if (duplicateInputRule) {
         const duplicateInput = Object.assign(Object.assign({}, field), { name: `${field.name}Duplicate`, displayName: duplicateInputRule.displayName, isValid: false, isDuplicateInput: true });
         return [inputElement, duplicateInput];
@@ -313,7 +319,7 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
         return [inputElement];
       }
     });
-    // Populate the list of inputs values and set as null in the beginning
+    // Populate the list of inputs values and set as null in the beginning (or false for checkbox type inputs)
     this.listOfInputValues = this.listOfInputs.map(field => {
       var _a;
       return { name: field.name,
@@ -335,6 +341,18 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
       };
     }
   }
+  setInitialValidStatus(field) {
+    var _a, _b;
+    // Input type checkbox, with no validation are valid
+    if (((_a = field.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) == 'checkbox' && ((_b = field.validate) === null || _b === void 0 ? void 0 : _b.mandatory) == false) {
+      return true;
+    }
+    //Inputs that have default value are valid.
+    if (field.defaultValue !== null) {
+      return true;
+    }
+    return false;
+  }
   stepChange(action) {
     const stepNum = parseInt(this.registrationStep.replace('Step', ''));
     if (action === 'increment') {
@@ -352,7 +370,7 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   ;
   renderButtons() {
-    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))));
+    return (h("div", { class: 'registration__buttons-wrapper' }, h("button", { class: `registration__button registration__button--next ${this.isFormValid ? '' : 'registration__button--disabled'}`, type: 'submit', form: 'RegistrationForm', onClick: (e) => this.nextHandler(e), disabled: !this.isFormValid }, 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) {
@@ -361,7 +379,8 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     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": ["sendStep"]
+    "registrationStep": ["sendStep"],
+    "listOfInputs": ["setFormValidity"]
   }; }
   static get style() { return generalRegistrationCss; }
 }, [1, "general-registration", {
@@ -369,12 +388,11 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     "language": [513],
     "clientStyling": [1537, "client-styling"],
     "clientStylingUrl": [513, "client-styling-url"],
+    "translationsUrl": [513, "translations-url"],
     "errorMessage": [32],
-    "emitValue": [32],
     "isFormValid": [32],
     "listOfInputs": [32],
     "isLoading": [32],
-    "limitStylingAppends": [32],
     "registrationStep": [32]
   }, [[0, "sendValidityState", "checkInputsValidityHandler"], [0, "sendInputValue", "getInputsValueHandler"]]]);
 function defineCustomElement$1() {

package/dist/esm/checkbox-input_11.entry.js

@@ -99,7 +99,7 @@ const CheckboxInput = class {
     }
   }
   render() {
-    return h$2("div", { class: 'checkbox__wrapper', ref: el => this.stylingContainer = el }, h$2("input", { type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, checked: !!this.defaultValue, readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), h$2("label", { class: 'checkbox__label', htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h$2("small", { class: 'checkbox__error-message' }, this.errorMessage));
+    return h$2("div", { class: 'checkbox__wrapper', ref: el => this.stylingContainer = el }, h$2("input", { type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, checked: this.defaultValue == "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), h$2("label", { class: 'checkbox__label', htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h$2("small", { class: 'checkbox__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -23305,7 +23305,7 @@ const translate = (key, customLang, values) => {
   return translation;
 };
 
-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 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--disabled {\n  opacity: 0.5;\n}\n.registration__button--disabled:hover {\n  opacity: 0.5;\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 = class {
   constructor(hostRef) {
@@ -23324,13 +23324,16 @@ const GeneralRegistration = class {
      * Client custom styling via url
      */
     this.clientStylingUrl = '';
-    this.emitValue = false;
+    /**
+     * Translations via URL
+     */
+    this.translationsUrl = '';
     this.listOfInputs = [];
     this.isLoading = true;
-    this.limitStylingAppends = false;
     this.listOfInputValues = [];
     this.listOfActions = [];
     this.indexStep = 0;
+    this.emitValue = false;
     this.registrationStepsState = {
       regId: null
     };
@@ -23355,6 +23358,9 @@ const GeneralRegistration = class {
     this.registrationStepUpdated.emit(this.registrationStep);
     window.postMessage({ type: 'registrationStepUpdated', step: this.registrationStep }, window.location.href);
   }
+  setFormValidity() {
+    this.isFormValid = !this.getInvalidStatus(this.listOfInputs);
+  }
   checkInputsValidityHandler(event) {
     // Set isValid state of the input in the list.
     this.listOfInputs.find(input => input.name == event.detail.name).isValid = event.detail.valid;
@@ -23376,12 +23382,11 @@ const GeneralRegistration = class {
     });
   }
   componentDidRender() {
-    if (!this.limitStylingAppends && this.stylingContainer) {
+    if (this.stylingContainer) {
       if (this.clientStyling)
         this.setClientStyling();
       if (this.clientStylingUrl)
         this.setClientStylingURL();
-      this.limitStylingAppends = true;
     }
   }
   componentDidLoad() {
@@ -23426,6 +23431,7 @@ const GeneralRegistration = class {
         }
         if (state.type == 'values') {
           const savedValues = savedUserData[this.registrationStep].registerUserData;
+          console.log(savedValues);
           this.listOfInputValues = Object.keys(savedValues).map(name => {
             return { name, value: savedValues[name].value, isDuplicate: savedValues[name].isDuplicate };
           });
@@ -23434,7 +23440,6 @@ const GeneralRegistration = class {
             const input = this.listOfInputs.find(input => input.name === inputValue.name);
             if (input) {
               input.defaultValue = inputValue.value;
-              console.log(input);
             }
           });
         }
@@ -23555,6 +23560,7 @@ const GeneralRegistration = class {
       if (data.userId) {
         alert(`User registered - the user ID is ${data.userId}`);
       }
+      window.postMessage({ type: 'registrationSuccessful' }, window.location.href);
     })
       .catch((err) => {
       console.error(err);
@@ -23568,7 +23574,7 @@ const GeneralRegistration = class {
     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 });
+      const inputElement = Object.assign(Object.assign({}, field), { isValid: this.setInitialValidStatus(field) });
       if (duplicateInputRule) {
         const duplicateInput = Object.assign(Object.assign({}, field), { name: `${field.name}Duplicate`, displayName: duplicateInputRule.displayName, isValid: false, isDuplicateInput: true });
         return [inputElement, duplicateInput];
@@ -23577,7 +23583,7 @@ const GeneralRegistration = class {
         return [inputElement];
       }
     });
-    // Populate the list of inputs values and set as null in the beginning
+    // Populate the list of inputs values and set as null in the beginning (or false for checkbox type inputs)
     this.listOfInputValues = this.listOfInputs.map(field => {
       var _a;
       return { name: field.name,
@@ -23599,6 +23605,18 @@ const GeneralRegistration = class {
       };
     }
   }
+  setInitialValidStatus(field) {
+    var _a, _b;
+    // Input type checkbox, with no validation are valid
+    if (((_a = field.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) == 'checkbox' && ((_b = field.validate) === null || _b === void 0 ? void 0 : _b.mandatory) == false) {
+      return true;
+    }
+    //Inputs that have default value are valid.
+    if (field.defaultValue !== null) {
+      return true;
+    }
+    return false;
+  }
   stepChange(action) {
     const stepNum = parseInt(this.registrationStep.replace('Step', ''));
     if (action === 'increment') {
@@ -23616,7 +23634,7 @@ const GeneralRegistration = class {
   }
   ;
   renderButtons() {
-    return (h$2("div", { class: 'registration__buttons-wrapper' }, h$2("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$2("button", { class: `registration__button registration__button--back ${this.registrationStep == 'Step1' ? 'registration__button--first-step' : ''}`, onClick: (e) => this.backHandler(e) }, translate('backButton', this.language))));
+    return (h$2("div", { class: 'registration__buttons-wrapper' }, h$2("button", { class: `registration__button registration__button--next ${this.isFormValid ? '' : 'registration__button--disabled'}`, type: 'submit', form: 'RegistrationForm', onClick: (e) => this.nextHandler(e), disabled: !this.isFormValid }, this.isLastStep ? translate('doneButton', this.language) : translate('nextButton', this.language)), h$2("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) {
@@ -23625,7 +23643,8 @@ const GeneralRegistration = class {
     return (h$2("div", { class: `registration  registration__${this.registrationStep}`, ref: el => this.stylingContainer = el }, h$2("form", { action: '.', id: 'RegistrationForm', class: 'registration__form' }, this.renderInputs()), this.renderButtons()));
   }
   static get watchers() { return {
-    "registrationStep": ["sendStep"]
+    "registrationStep": ["sendStep"],
+    "listOfInputs": ["setFormValidity"]
   }; }
 };
 GeneralRegistration.style = generalRegistrationCss;

package/dist/esm/general-registration.js

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["checkbox-input_11",[[1,"general-registration",{"endpoint":[513],"language":[513],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"errorMessage":[32],"emitValue":[32],"isFormValid":[32],"listOfInputs":[32],"isLoading":[32],"limitStylingAppends":[32],"registrationStep":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[513],"name":[513],"displayName":[513,"display-name"],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[520,"client-styling"]}],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]}],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"rules":[513],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]]]]], options);
+  return bootstrapLazy([["checkbox-input_11",[[1,"general-registration",{"endpoint":[513],"language":[513],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationsUrl":[513,"translations-url"],"errorMessage":[32],"isFormValid":[32],"listOfInputs":[32],"isLoading":[32],"registrationStep":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[513],"name":[513],"displayName":[513,"display-name"],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[520,"client-styling"]}],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]}],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"rules":[513],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]]]]], options);
 });

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["checkbox-input_11",[[1,"general-registration",{"endpoint":[513],"language":[513],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"errorMessage":[32],"emitValue":[32],"isFormValid":[32],"listOfInputs":[32],"isLoading":[32],"limitStylingAppends":[32],"registrationStep":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[513],"name":[513],"displayName":[513,"display-name"],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[520,"client-styling"]}],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]}],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"rules":[513],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]]]]], options);
+  return bootstrapLazy([["checkbox-input_11",[[1,"general-registration",{"endpoint":[513],"language":[513],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationsUrl":[513,"translations-url"],"errorMessage":[32],"isFormValid":[32],"listOfInputs":[32],"isLoading":[32],"registrationStep":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[513],"name":[513],"displayName":[513,"display-name"],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[520,"client-styling"]}],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]}],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"rules":[513],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]]]]], options);
   });
 };
 

package/dist/general-registration/general-registration.esm.js

@@ -1 +1 @@
-import{p as e,b as l}from"./p-35d6abbe.js";(()=>{const l=import.meta.url,a={};return""!==l&&(a.resourcesUrl=new URL(".",l).href),e(a)})().then((e=>l([["p-3313fb60",[[1,"general-registration",{endpoint:[513],language:[513],clientStyling:[1537,"client-styling"],clientStylingUrl:[513,"client-styling-url"],errorMessage:[32],emitValue:[32],isFormValid:[32],listOfInputs:[32],isLoading:[32],limitStylingAppends:[32],registrationStep:[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{type:[513],name:[513],displayName:[513,"display-name"],action:[513],validation:[16],options:[520],language:[513],autofilled:[516],defaultValue:[520,"default-value"],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[520,"client-styling"]}],[1,"checkbox-input",{name:[513],displayName:[513,"display-name"],defaultValue:[513,"default-value"],autofilled:[516],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32]}],[1,"date-input",{name:[513],displayName:[513,"display-name"],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32]}],[1,"email-input",{name:[513],displayName:[513,"display-name"],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],language:[513],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{name:[513],displayName:[513,"display-name"],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32]}],[1,"password-input",{name:[513],displayName:[513,"display-name"],defaultValue:[513,"default-value"],autofilled:[516],validation:[16],language:[513],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[513,"client-styling"],isValid:[32],errorMessage:[32],limitStylingAppends:[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"radio-input",{name:[513],displayName:[513,"display-name"],optionsGroup:[16],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32]}],[1,"select-input",{name:[513],displayName:[513,"display-name"],action:[513],defaultValue:[513,"default-value"],autofilled:[516],options:[16],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32]}],[1,"tel-input",{name:[513],displayName:[513,"display-name"],showLabels:[516,"show-labels"],action:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],isValid:[32],errorMessage:[32],limitStylingAppends:[32]}],[1,"text-input",{name:[513],displayName:[513,"display-name"],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],rules:[513],language:[513],checkValidity:[516,"check-validity"],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[513,"client-styling"],isValid:[32],errorMessage:[32],limitStylingAppends:[32]},[[16,"sendInputValue","valueChangedHandler"]]]]]],e)));
+import{p as e,b as l}from"./p-35d6abbe.js";(()=>{const l=import.meta.url,a={};return""!==l&&(a.resourcesUrl=new URL(".",l).href),e(a)})().then((e=>l([["p-4142a899",[[1,"general-registration",{endpoint:[513],language:[513],clientStyling:[1537,"client-styling"],clientStylingUrl:[513,"client-styling-url"],translationsUrl:[513,"translations-url"],errorMessage:[32],isFormValid:[32],listOfInputs:[32],isLoading:[32],registrationStep:[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{type:[513],name:[513],displayName:[513,"display-name"],action:[513],validation:[16],options:[520],language:[513],autofilled:[516],defaultValue:[520,"default-value"],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[520,"client-styling"]}],[1,"checkbox-input",{name:[513],displayName:[513,"display-name"],defaultValue:[513,"default-value"],autofilled:[516],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32]}],[1,"date-input",{name:[513],displayName:[513,"display-name"],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32]}],[1,"email-input",{name:[513],displayName:[513,"display-name"],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],language:[513],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{name:[513],displayName:[513,"display-name"],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32]}],[1,"password-input",{name:[513],displayName:[513,"display-name"],defaultValue:[513,"default-value"],autofilled:[516],validation:[16],language:[513],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[513,"client-styling"],isValid:[32],errorMessage:[32],limitStylingAppends:[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"radio-input",{name:[513],displayName:[513,"display-name"],optionsGroup:[16],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32]}],[1,"select-input",{name:[513],displayName:[513,"display-name"],action:[513],defaultValue:[513,"default-value"],autofilled:[516],options:[16],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32]}],[1,"tel-input",{name:[513],displayName:[513,"display-name"],showLabels:[516,"show-labels"],action:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],isValid:[32],errorMessage:[32],limitStylingAppends:[32]}],[1,"text-input",{name:[513],displayName:[513,"display-name"],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],rules:[513],language:[513],checkValidity:[516,"check-validity"],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[513,"client-styling"],isValid:[32],errorMessage:[32],limitStylingAppends:[32]},[[16,"sendInputValue","valueChangedHandler"]]]]]],e)));

package/dist/general-registration/{p-3313fb60.entry.js → p-4142a899.entry.js}

@@ -1,4 +1,4 @@
-import{r as t,c as e,h as i,g as s}from"./p-35d6abbe.js";const o=["ro","en"],r={en:{dateError:"The selected date should be between {min} and {max}",numberLengthError:"The number should be between {min} and {max}",lengthError:"The length should be between {minLength} and {maxLength}",requiredError:"This input is required.",nextButton:"Next",backButton:"Back",doneButton:"Done"},ro:{lengthError:"Cuvântul introdus este prea scurt. {minLength} and {maxLength}",requiredError:"Acest câmp este obligatoriu."}},n=(t,e,i)=>{const s=e;let n=r[void 0!==s&&o.includes(s)?s:"en"][t];if(void 0!==i)for(const[t,e]of Object.entries(i.values)){const i=new RegExp(`{${t}}`,"g");n=n.replace(i,e)}return n},a=class{constructor(i){t(this,i),this.sendValidityState=e(this,"sendValidityState",7),this.sendInputValue=e(this,"sendInputValue",7),this.defaultValue="",this.clientStyling="",this.limitStylingAppends=!1,this.value="",this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)}}validityChanged(){1==this.emitValue&&this.valueHandler({name:this.name,value:this.value})}validityStateHandler(t){this.sendValidityState.emit(t)}emitValueHandler(t){1==t&&this.isValid&&this.valueHandler({name:this.name,value:this.value})}valueHandler(t){this.sendInputValue.emit(t)}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.limitStylingAppends=!0)}componentDidLoad(){this.defaultValue&&(this.value=this.defaultValue,this.valueHandler({name:this.name,value:this.value}))}handleClick(){this.value=this.inputReference.checked.toString(),this.errorMessage=this.setErrorMessage(),this.isValid=this.setValidity(),this.validityStateHandler({valid:this.isValid,name:this.name}),this.emitValueHandler(!0)}setValidity(){return this.inputReference.validity.valid}setErrorMessage(){if(this.inputReference.validity.valueMissing)return n("requiredError",this.language)}render(){return i("div",{class:"checkbox__wrapper",ref:t=>this.stylingContainer=t},i("input",{type:"checkbox",id:`${this.name}__input`,ref:t=>this.inputReference=t,name:this.name,checked:!!this.defaultValue,readOnly:this.autofilled,required:this.validation.mandatory,value:this.value,onClick:()=>this.handleClick()}),i("label",{class:"checkbox__label",htmlFor:`${this.name}__input`},this.displayName," ",this.validation.mandatory?"*":""),i("small",{class:"checkbox__error-message"},this.errorMessage))}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};a.style='*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox{font-family:"Roboto";font-style:normal}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:#2B2D3F;line-height:14px}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}';
+import{r as t,c as e,h as i,g as s}from"./p-35d6abbe.js";const o=["ro","en"],r={en:{dateError:"The selected date should be between {min} and {max}",numberLengthError:"The number should be between {min} and {max}",lengthError:"The length should be between {minLength} and {maxLength}",requiredError:"This input is required.",nextButton:"Next",backButton:"Back",doneButton:"Done"},ro:{lengthError:"Cuvântul introdus este prea scurt. {minLength} and {maxLength}",requiredError:"Acest câmp este obligatoriu."}},n=(t,e,i)=>{const s=e;let n=r[void 0!==s&&o.includes(s)?s:"en"][t];if(void 0!==i)for(const[t,e]of Object.entries(i.values)){const i=new RegExp(`{${t}}`,"g");n=n.replace(i,e)}return n},a=class{constructor(i){t(this,i),this.sendValidityState=e(this,"sendValidityState",7),this.sendInputValue=e(this,"sendInputValue",7),this.defaultValue="",this.clientStyling="",this.limitStylingAppends=!1,this.value="",this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)}}validityChanged(){1==this.emitValue&&this.valueHandler({name:this.name,value:this.value})}validityStateHandler(t){this.sendValidityState.emit(t)}emitValueHandler(t){1==t&&this.isValid&&this.valueHandler({name:this.name,value:this.value})}valueHandler(t){this.sendInputValue.emit(t)}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.limitStylingAppends=!0)}componentDidLoad(){this.defaultValue&&(this.value=this.defaultValue,this.valueHandler({name:this.name,value:this.value}))}handleClick(){this.value=this.inputReference.checked.toString(),this.errorMessage=this.setErrorMessage(),this.isValid=this.setValidity(),this.validityStateHandler({valid:this.isValid,name:this.name}),this.emitValueHandler(!0)}setValidity(){return this.inputReference.validity.valid}setErrorMessage(){if(this.inputReference.validity.valueMissing)return n("requiredError",this.language)}render(){return i("div",{class:"checkbox__wrapper",ref:t=>this.stylingContainer=t},i("input",{type:"checkbox",id:`${this.name}__input`,ref:t=>this.inputReference=t,name:this.name,checked:"true"==this.defaultValue,readOnly:this.autofilled,required:this.validation.mandatory,value:this.value,onClick:()=>this.handleClick()}),i("label",{class:"checkbox__label",htmlFor:`${this.name}__input`},this.displayName," ",this.validation.mandatory?"*":""),i("small",{class:"checkbox__error-message"},this.errorMessage))}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};a.style='*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox{font-family:"Roboto";font-style:normal}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:#2B2D3F;line-height:14px}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}';
 /**
  * @license
  * Copyright (c) 2017 - 2022 Vaadin Ltd.
@@ -2815,7 +2815,7 @@ class Br{constructor(t){this.host=t,t.addEventListener("opened-changed",(()=>{t.
       </vaadin-date-picker-overlay>
 
       <slot name="tooltip"></slot>
-    `}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new Or(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new Fr(this.inputElement,this._labelController)),this._tooltipController=new ro(this),this.addController(this._tooltipController),this._tooltipController.setPosition("top"),this._tooltipController.setShouldShow((t=>!t.opened)),this.shadowRoot.querySelector('[part="toggle-button"]').addEventListener("mousedown",(t=>t.preventDefault()))}_initOverlay(){super._initOverlay(),this.$.overlay.addEventListener("vaadin-overlay-close",this._onVaadinOverlayClose.bind(this))}_onVaadinOverlayClose(t){t.detail.sourceEvent&&t.detail.sourceEvent.composedPath().includes(this)&&t.preventDefault()}_toggle(t){t.stopPropagation(),this[this._overlayInitialized&&this.$.overlay.opened?"close":"open"]()}_openedChanged(t){super._openedChanged(t),this.$.overlay.positionTarget=this.shadowRoot.querySelector('[part="input-field"]'),this.$.overlay.noVerticalOverlap=!0}}customElements.define(Vr.is,Vr);const $r=class{constructor(i){t(this,i),this.sendValidityState=e(this,"sendValidityState",7),this.sendInputValue=e(this,"sendInputValue",7),this.clientStyling="",this.limitStylingAppends=!1,this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)}}validityChanged(){this.validityStateHandler({valid:this.isValid,name:this.name}),1==this.emitValue&&this.valueHandler({name:this.name,value:this.value})}validityStateHandler(t){this.sendValidityState.emit(t)}emitValueHandler(t){1==t&&this.isValid&&this.valueHandler({name:this.name,value:this.value})}valueHandler(t){this.sendInputValue.emit(t)}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.limitStylingAppends=!0)}componentDidLoad(){this.inputReference=this.element.shadowRoot.querySelector("input"),this.defaultValue&&(this.value=this.defaultValue,this.valueHandler({name:this.name,value:this.value}))}handleInput(t){this.value=t.target.value,this.errorMessage=this.setErrorMessage(),this.isValid=this.setValidity(),this.validityStateHandler({valid:this.isValid,name:this.name}),this.emitValueHandler(!0)}setValidity(){return this.inputReference.validity.valid}setErrorMessage(){return this.inputReference.validity.rangeUnderflow||this.inputReference.validity.rangeOverflow?n("dateError",this.language,{values:{min:this.validation.min,max:this.validation.max}}):this.inputReference.validity.valueMissing?n("requiredError",this.language):void 0}render(){const t=1==this.isValid||null==this.isValid?"":"date__input--invalid";return i("div",{class:"date__wrapper",ref:t=>this.stylingContainer=t},i("label",{class:`date__label ${this.validation.mandatory?"date__label--required":""}}`,htmlFor:`${this.name}__input`},this.displayName," ",this.validation.mandatory?"*":""),i("vaadin-date-picker",{id:`${this.name}__input`,type:"date",class:`date__input ${t}`,value:this.defaultValue,readOnly:this.autofilled,placeholder:`${this.displayName} ${this.validation.mandatory?"*":""}`,required:this.validation.mandatory,max:this.validation.max,min:this.validation.min,onBlur:t=>this.handleInput(t)}),i("small",{class:"date__error-message"},this.errorMessage))}get element(){return s(this)}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};$r.style='*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.date{font-family:"Roboto";font-style:normal}.date__wrapper{position:relative;width:100%;padding-top:26px}.date__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.date__label--required::after{content:"*";font-family:inherit;color:#1F1F1F;margin-left:2px}.date__input{border:none;width:inherit;position:relative}.date__input[focused]::part(input-field){border-color:#3E3E3E}.date__input[invalid]::part(input-field){border-color:#cc0000b3}.date__input::part(input-field){border-radius:4px;background-color:#FFFFFF;border:2px solid #DEE1EE;color:#2A2E3F;border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.date__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}';const Lr=class{constructor(i){t(this,i),this.sendValidityState=e(this,"sendValidityState",7),this.sendInputValue=e(this,"sendInputValue",7),this.clientStyling="",this.limitStylingAppends=!1,this.validationPattern="",this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)}}validityChanged(){this.validityStateHandler({valid:this.isValid,name:this.name}),1==this.emitValue&&this.valueHandler({name:this.name,value:this.value})}emitValueHandler(t){1==t&&this.isValid&&this.valueHandler({name:this.name,value:this.value})}validityStateHandler(t){this.sendValidityState.emit(t)}valueHandler(t){this.sendInputValue.emit(t)}valueChangedHandler(t){this.isDuplicateInput&&this.name===t.detail.name+"Duplicate"&&(this.duplicateInputValue=t.detail.value)}connectedCallback(){this.validationPattern=this.setPattern()}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.limitStylingAppends=!0)}componentDidLoad(){this.defaultValue&&(this.value=this.defaultValue,this.valueHandler({name:this.name,value:this.value}))}handleInput(t){this.value=t.target.value,this.errorMessage=this.setErrorMessage(),this.isValid=this.setValidity(),this.validityStateHandler({valid:this.isValid,name:this.name}),this.emitValueHandler(!0)}setValidity(){return this.inputReference.validity.valid}setPattern(){var t,e;if((null===(t=this.validation.custom)||void 0===t?void 0:t.length)>0)return null===(e=this.validation.custom.find((t=>"regex"===t.rule)))||void 0===e?void 0:e.pattern}setErrorMessage(){var t;return this.inputReference.validity.patternMismatch?null===(t=this.validation.custom.find((t=>"regex"===t.rule)))||void 0===t?void 0:t.errorMessage:this.inputReference.validity.tooShort||this.inputReference.validity.tooLong?n("lengthError",this.language,{values:{minLength:this.validation.minLength,maxLength:this.validation.maxLength}}):this.inputReference.validity.valueMissing?n("requiredError",this.language):this.isDuplicateInput&&this.duplicateInputValue!==this.value?this.validation.custom.find((t=>"duplicate-input"===t.rule)).errorMessage:void 0}render(){return i("div",{class:"email__wrapper",ref:t=>this.stylingContainer=t},i("input",{id:`${this.name}__input`,type:"email",class:"email__input "+(1==this.isValid||null==this.isValid?"":"email__input--invalid"),value:this.defaultValue,readOnly:this.autofilled,placeholder:`${this.displayName} ${this.validation.mandatory?"*":""}`,ref:t=>this.inputReference=t,pattern:this.validationPattern,required:this.validation.mandatory,minlength:this.validation.minLength,maxlength:this.validation.maxLength,onBlur:t=>this.handleInput(t)}),i("label",{class:"email__label "+(this.validation.mandatory?"email__label--required":""),htmlFor:`${this.name}__input`},this.displayName),i("small",{class:"email__error-message"},this.errorMessage))}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};Lr.style='*,*::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 jr=class{constructor(e){t(this,e),this.type="text",this.clientStyling=""}render(){var t;switch(null===(t=this.type)||void 0===t?void 0:t.toLowerCase()){case"text":return i("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,"client-styling":this.clientStyling});case"email":return i("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,"client-styling":this.clientStyling});case"number":return i("number-input",{name:this.name,displayName:this.displayName,validation:this.validation,defaultValue:this.defaultValue,autofilled:this.autofilled,emitValue:this.emitValue,language:this.language,"client-styling":this.clientStyling});case"checkbox":return i("checkbox-input",{name:this.name,displayName:this.displayName,validation:this.validation,emitValue:this.emitValue,defaultValue:this.defaultValue,autofilled:this.autofilled,language:this.language,"client-styling":this.clientStyling});case"datetime":return i("date-input",{name:this.name,displayName:this.displayName,validation:this.validation,defaultValue:this.defaultValue,autofilled:this.autofilled,emitValue:this.emitValue,language:this.language,"client-styling":this.clientStyling});case"password":return i("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,"client-styling":this.clientStyling});case"radio":return i("radio-input",{name:this.name,displayName:this.displayName,optionsGroup:this.options,validation:this.validation,emitValue:this.emitValue,language:this.language,"client-styling":this.clientStyling});case"tel":return i("tel-input",{name:this.name,action:this.action,displayName:this.displayName,validation:this.validation,defaultValue:this.defaultValue,emitValue:this.emitValue,language:this.language,autofilled:this.autofilled,"client-styling":this.clientStyling});case"dropdown":return i("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,"client-styling":this.clientStyling});default:return i("p",null,"The ",this.type," input type is not valid")}}};jr.style=":host{display:block}";const Rr=["ro","en"],Hr={en:{dateError:"The selected date should be between {min} and {max}",numberLengthError:"The number should be between {min} and {max}",lengthError:"The length should be between {minLength} and {maxLength}",requiredError:"This input is required.",nextButton:"Next",backButton:"Back",doneButton:"Done"},ro:{lengthError:"Cuvântul introdus este prea scurt. {minLength} and {maxLength}",requiredError:"Acest câmp este obligatoriu."}},qr=(t,e,i)=>{const s=e;let o=Hr[void 0!==s&&Rr.includes(s)?s:"en"][t];if(void 0!==i)for(const[t,e]of Object.entries(i.values)){const i=new RegExp(`{${t}}`,"g");o=o.replace(i,e)}return o},Ur=class{constructor(i){t(this,i),this.registrationWidgetLoaded=e(this,"registrationWidgetLoaded",7),this.registrationStepUpdated=e(this,"registrationStepUpdated",7),this.language="en",this.clientStyling="",this.clientStylingUrl="",this.emitValue=!1,this.listOfInputs=[],this.isLoading=!0,this.limitStylingAppends=!1,this.listOfInputValues=[],this.listOfActions=[],this.indexStep=0,this.registrationStepsState={regId:null},this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)},this.setClientStylingURL=()=>{let t=new URL(this.clientStylingUrl),e=document.createElement("style");fetch(t.href).then((t=>t.text())).then((t=>{e.innerHTML=t,this.clientStyling=t,setTimeout((()=>{this.stylingContainer.prepend(e)}),1)}))}}sendStep(){this.registrationStepUpdated.emit(this.registrationStep),window.postMessage({type:"registrationStepUpdated",step:this.registrationStep},window.location.href)}checkInputsValidityHandler(t){this.listOfInputs.find((e=>e.name==t.detail.name)).isValid=t.detail.valid,this.isFormValid=!this.getInvalidStatus(this.listOfInputs)}getInputsValueHandler(t){this.listOfInputValues.find((e=>{e.name==t.detail.name&&(e.value=t.detail.value)})),this.stepsStateMachine({event:"set",type:"values"})}componentWillLoad(){return this.getRegisterConfig().then((t=>{this.formatConfig(t),this.stepsStateMachine({event:"set",type:"inputs"})}))}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}componentDidLoad(){this.registrationWidgetLoaded.emit(),window.postMessage({type:"registrationWidgetLoaded"},window.location.href)}nextHandler(t){t.preventDefault(),this.emitValue=!0,this.setRegisterStep()}backHandler(t){t.preventDefault(),this.isLastStep=!1,this.registrationStep=this.stepChange("decrement"),this.stepsStateMachine({event:"get",type:"inputs"}),this.stepsStateMachine({event:"get",type:"values"})}stepsStateMachine(t){switch(t.event){case"set":"inputs"==t.type&&(this.registrationStepsState[this.registrationStep].fields=this.listOfInputs,this.registrationStepsState[this.registrationStep].actions=this.listOfActions),"values"==t.type&&(this.registrationStepsState[this.registrationStep].registerUserData=this.listOfInputValues.reduce(((t,e)=>(t[e.name]={value:e.value,isDuplicate:e.isDuplicate},t)),{})),localStorage.setItem("registrationStepsState",JSON.stringify(this.registrationStepsState));break;case"get":const e=JSON.parse(localStorage.getItem("registrationStepsState"));if(!e)return;if("inputs"==t.type&&(this.listOfInputs=this.registrationStepsState[this.registrationStep].fields,this.listOfActions=this.registrationStepsState[this.registrationStep].actions),"values"==t.type){const t=e[this.registrationStep].registerUserData;this.listOfInputValues=Object.keys(t).map((e=>({name:e,value:t[e].value,isDuplicate:t[e].isDuplicate}))),this.listOfInputValues.forEach((t=>{const e=this.listOfInputs.find((e=>e.name===t.name));e&&(e.defaultValue=t.value,console.log(e))}))}}}getRegisterConfig(t){const e=new URL(`${this.endpoint}/v1/player/legislation/registration/config`),i=new Headers;i.append("Content-Type","application/json"),i.append("Accept","application/json"),t&&e.searchParams.append("registrationId",t);const s={method:"GET",headers:i};return new Promise(((t,i)=>{this.isLoading=!0,fetch(e.href,s).then((t=>t.json())).then((e=>{t(e)})).catch((t=>{console.error(t),i(t)})).finally((()=>{this.isLoading=!1}))}))}setRegisterStep(){this.isLoading=!0;const t=new URL(`${this.endpoint}/v1/player/legislation/registration/step`),e={registrationId:this.registrationID,registerUserDto:this.listOfInputValues.filter((t=>!t.isDuplicate)).reduce(((t,e)=>("Mobile"==e.name?(t.MobilePrefix=e.value.split("|")[0],t[e.name]=e.value.split("|")[1]):t[e.name]=e.value,t)),{}),step:this.registrationStep},i=new Headers;i.append("Content-Type","application/json"),i.append("Accept","application/json");const s={method:"POST",body:JSON.stringify(e),headers:i};fetch(t.href,s).then((t=>{if(t.status>=300)throw new Error("err");return t.json()})).then((t=>{this.registrationID=t.registrationId,this.listOfActions.some((t=>"/register"==t))?this.setRegister():(this.registrationStep=this.stepChange("increment"),Object.keys(this.registrationStepsState).find((t=>t==this.registrationStep))?(this.stepsStateMachine({event:"get",type:"inputs"}),this.stepsStateMachine({event:"get",type:"values"})):this.getRegisterConfig(this.registrationID).then((t=>{this.formatConfig(t),this.stepsStateMachine({event:"set",type:"inputs"})})))})).catch((t=>{console.error(t)})).finally((()=>{this.isLoading=!1}))}setRegister(){this.isLoading=!0;const t=new URL(`${this.endpoint}/v1/player/legislation/register`),e=new Headers;e.append("Content-Type","application/json"),e.append("Accept","application/json");const i={method:"PUT",body:JSON.stringify({registrationId:this.registrationID}),headers:e};fetch(t.href,i).then((t=>{if(t.status>=300)throw new Error("err");return t.json()})).then((t=>{t.userId&&alert(`User registered - the user ID is ${t.userId}`)})).catch((t=>{console.error(t)})).finally((()=>{this.isLoading=!1}))}formatConfig(t){this.listOfInputs=t.content.fields.flatMap((t=>{const e=t.validate.custom.find((t=>"duplicate-input"===t.rule)),i=Object.assign(Object.assign({},t),{isValid:!1});return e?[i,Object.assign(Object.assign({},t),{name:`${t.name}Duplicate`,displayName:e.displayName,isValid:!1,isDuplicateInput:!0})]:[i]})),this.listOfInputValues=this.listOfInputs.map((t=>{var e;return{name:t.name,value:"checkbox"==(null===(e=t.inputType)||void 0===e?void 0:e.toLowerCase())?"false":null,isDuplicate:t.isDuplicateInput||!1}})),this.listOfActions=t.content.actions.map((t=>t)),this.isLastStep=this.listOfActions.some((t=>"/register"==t)),this.registrationID=t.content.registrationID,this.registrationStep=t.content.step,this.registrationStepsState.regId=this.registrationID,this.registrationStepsState[this.registrationStep]||(this.registrationStepsState[this.registrationStep]={fields:[],registerUserData:{},actions:[]})}stepChange(t){const e=parseInt(this.registrationStep.replace("Step",""));return"increment"===t?"Step"+(e+1):"decrement"===t?"Step"+(e-1):void 0}getInvalidStatus(t){return t.filter((t=>0==t.isValid)).length>0}renderInputs(){return this.listOfInputs.map((t=>i("general-input",{type:t.inputType,name:t.name,displayName:t.displayName,validation:t.validate,action:t.action||null,options:t.data?t.data.values:[],defaultValue:t.defaultValue,autofilled:t.autofill,emitValue:this.emitValue,language:this.language,isDuplicateInput:t.isDuplicateInput,"client-styling":this.clientStyling})))}renderButtons(){return i("div",{class:"registration__buttons-wrapper"},i("button",{class:"registration__button registration__button--next",type:"submit",form:"RegistrationForm",onClick:t=>this.nextHandler(t)},qr(this.isLastStep?"doneButton":"nextButton",this.language)),i("button",{class:"registration__button registration__button--back "+("Step1"==this.registrationStep?"registration__button--first-step":""),onClick:t=>this.backHandler(t)},qr("backButton",this.language)))}render(){return this.isLoading?i("p",null,"Please wait, loading ..."):i("div",{class:`registration  registration__${this.registrationStep}`,ref:t=>this.stylingContainer=t},i("form",{action:".",id:"RegistrationForm",class:"registration__form"},this.renderInputs()),this.renderButtons())}static get watchers(){return{registrationStep:["sendStep"]}}};Ur.style='*,\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 Wr=class{constructor(i){t(this,i),this.sendValidityState=e(this,"sendValidityState",7),this.sendInputValue=e(this,"sendInputValue",7),this.clientStyling="",this.limitStylingAppends=!1,this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)}}validityChanged(){this.validityStateHandler({valid:this.isValid,name:this.name}),1==this.emitValue&&this.valueHandler({name:this.name,value:this.value})}validityStateHandler(t){this.sendValidityState.emit(t)}emitValueHandler(t){1==t&&this.isValid&&this.valueHandler({name:this.name,value:this.value})}valueHandler(t){this.sendInputValue.emit(t)}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.limitStylingAppends=!0)}componentDidLoad(){this.defaultValue&&(this.value=this.defaultValue,this.valueHandler({name:this.name,value:this.value}))}handleInput(t){this.value=t.target.value,this.errorMessage=this.setErrorMessage(),this.isValid=this.setValidity(),this.validityStateHandler({valid:this.isValid,name:this.name}),this.emitValueHandler(!0)}setValidity(){return this.inputReference.validity.valid}setErrorMessage(){return this.inputReference.validity.rangeUnderflow||this.inputReference.validity.rangeOverflow?n("numberLengthError",this.language,{values:{min:this.validation.min,max:this.validation.max}}):this.inputReference.validity.valueMissing?n("requiredError",this.language):void 0}render(){return i("div",{class:"number__wrapper",ref:t=>this.stylingContainer=t},i("input",{ref:t=>this.inputReference=t,type:"number",value:this.defaultValue,readOnly:this.autofilled,id:`${this.name}__input`,class:"number__input "+(1==this.isValid||null==this.isValid?"":"number__input--invalid"),placeholder:`${this.displayName} ${this.validation.mandatory?"*":""}`,required:this.validation.mandatory,max:this.validation.max,min:this.validation.min,onBlur:t=>this.handleInput(t)}),i("label",{class:"number__label "+(this.validation.mandatory?"number__label--required":""),htmlFor:`${this.name}__input`},this.displayName),i("small",{class:"number__error-message"},this.errorMessage))}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};Wr.style='*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.number{font-family:"Roboto";font-style:normal}.number__wrapper{position:relative;width:100%;padding-top:26px}.number__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.number__label--required::after{content:"*";font-family:inherit;color:#1F1F1F;margin-left:2px}.number__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;-moz-appearance:textfield;}.number__input:focus{outline-color:#3E3E3E}.number__input::-webkit-outer-spin-button,.number__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number__input--invalid{border:2px solid #cc0000b3}.number__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}',
+    `}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new Or(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new Fr(this.inputElement,this._labelController)),this._tooltipController=new ro(this),this.addController(this._tooltipController),this._tooltipController.setPosition("top"),this._tooltipController.setShouldShow((t=>!t.opened)),this.shadowRoot.querySelector('[part="toggle-button"]').addEventListener("mousedown",(t=>t.preventDefault()))}_initOverlay(){super._initOverlay(),this.$.overlay.addEventListener("vaadin-overlay-close",this._onVaadinOverlayClose.bind(this))}_onVaadinOverlayClose(t){t.detail.sourceEvent&&t.detail.sourceEvent.composedPath().includes(this)&&t.preventDefault()}_toggle(t){t.stopPropagation(),this[this._overlayInitialized&&this.$.overlay.opened?"close":"open"]()}_openedChanged(t){super._openedChanged(t),this.$.overlay.positionTarget=this.shadowRoot.querySelector('[part="input-field"]'),this.$.overlay.noVerticalOverlap=!0}}customElements.define(Vr.is,Vr);const $r=class{constructor(i){t(this,i),this.sendValidityState=e(this,"sendValidityState",7),this.sendInputValue=e(this,"sendInputValue",7),this.clientStyling="",this.limitStylingAppends=!1,this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)}}validityChanged(){this.validityStateHandler({valid:this.isValid,name:this.name}),1==this.emitValue&&this.valueHandler({name:this.name,value:this.value})}validityStateHandler(t){this.sendValidityState.emit(t)}emitValueHandler(t){1==t&&this.isValid&&this.valueHandler({name:this.name,value:this.value})}valueHandler(t){this.sendInputValue.emit(t)}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.limitStylingAppends=!0)}componentDidLoad(){this.inputReference=this.element.shadowRoot.querySelector("input"),this.defaultValue&&(this.value=this.defaultValue,this.valueHandler({name:this.name,value:this.value}))}handleInput(t){this.value=t.target.value,this.errorMessage=this.setErrorMessage(),this.isValid=this.setValidity(),this.validityStateHandler({valid:this.isValid,name:this.name}),this.emitValueHandler(!0)}setValidity(){return this.inputReference.validity.valid}setErrorMessage(){return this.inputReference.validity.rangeUnderflow||this.inputReference.validity.rangeOverflow?n("dateError",this.language,{values:{min:this.validation.min,max:this.validation.max}}):this.inputReference.validity.valueMissing?n("requiredError",this.language):void 0}render(){const t=1==this.isValid||null==this.isValid?"":"date__input--invalid";return i("div",{class:"date__wrapper",ref:t=>this.stylingContainer=t},i("label",{class:`date__label ${this.validation.mandatory?"date__label--required":""}}`,htmlFor:`${this.name}__input`},this.displayName," ",this.validation.mandatory?"*":""),i("vaadin-date-picker",{id:`${this.name}__input`,type:"date",class:`date__input ${t}`,value:this.defaultValue,readOnly:this.autofilled,placeholder:`${this.displayName} ${this.validation.mandatory?"*":""}`,required:this.validation.mandatory,max:this.validation.max,min:this.validation.min,onBlur:t=>this.handleInput(t)}),i("small",{class:"date__error-message"},this.errorMessage))}get element(){return s(this)}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};$r.style='*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.date{font-family:"Roboto";font-style:normal}.date__wrapper{position:relative;width:100%;padding-top:26px}.date__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.date__label--required::after{content:"*";font-family:inherit;color:#1F1F1F;margin-left:2px}.date__input{border:none;width:inherit;position:relative}.date__input[focused]::part(input-field){border-color:#3E3E3E}.date__input[invalid]::part(input-field){border-color:#cc0000b3}.date__input::part(input-field){border-radius:4px;background-color:#FFFFFF;border:2px solid #DEE1EE;color:#2A2E3F;border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.date__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}';const Lr=class{constructor(i){t(this,i),this.sendValidityState=e(this,"sendValidityState",7),this.sendInputValue=e(this,"sendInputValue",7),this.clientStyling="",this.limitStylingAppends=!1,this.validationPattern="",this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)}}validityChanged(){this.validityStateHandler({valid:this.isValid,name:this.name}),1==this.emitValue&&this.valueHandler({name:this.name,value:this.value})}emitValueHandler(t){1==t&&this.isValid&&this.valueHandler({name:this.name,value:this.value})}validityStateHandler(t){this.sendValidityState.emit(t)}valueHandler(t){this.sendInputValue.emit(t)}valueChangedHandler(t){this.isDuplicateInput&&this.name===t.detail.name+"Duplicate"&&(this.duplicateInputValue=t.detail.value)}connectedCallback(){this.validationPattern=this.setPattern()}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.limitStylingAppends=!0)}componentDidLoad(){this.defaultValue&&(this.value=this.defaultValue,this.valueHandler({name:this.name,value:this.value}))}handleInput(t){this.value=t.target.value,this.errorMessage=this.setErrorMessage(),this.isValid=this.setValidity(),this.validityStateHandler({valid:this.isValid,name:this.name}),this.emitValueHandler(!0)}setValidity(){return this.inputReference.validity.valid}setPattern(){var t,e;if((null===(t=this.validation.custom)||void 0===t?void 0:t.length)>0)return null===(e=this.validation.custom.find((t=>"regex"===t.rule)))||void 0===e?void 0:e.pattern}setErrorMessage(){var t;return this.inputReference.validity.patternMismatch?null===(t=this.validation.custom.find((t=>"regex"===t.rule)))||void 0===t?void 0:t.errorMessage:this.inputReference.validity.tooShort||this.inputReference.validity.tooLong?n("lengthError",this.language,{values:{minLength:this.validation.minLength,maxLength:this.validation.maxLength}}):this.inputReference.validity.valueMissing?n("requiredError",this.language):this.isDuplicateInput&&this.duplicateInputValue!==this.value?this.validation.custom.find((t=>"duplicate-input"===t.rule)).errorMessage:void 0}render(){return i("div",{class:"email__wrapper",ref:t=>this.stylingContainer=t},i("input",{id:`${this.name}__input`,type:"email",class:"email__input "+(1==this.isValid||null==this.isValid?"":"email__input--invalid"),value:this.defaultValue,readOnly:this.autofilled,placeholder:`${this.displayName} ${this.validation.mandatory?"*":""}`,ref:t=>this.inputReference=t,pattern:this.validationPattern,required:this.validation.mandatory,minlength:this.validation.minLength,maxlength:this.validation.maxLength,onBlur:t=>this.handleInput(t)}),i("label",{class:"email__label "+(this.validation.mandatory?"email__label--required":""),htmlFor:`${this.name}__input`},this.displayName),i("small",{class:"email__error-message"},this.errorMessage))}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};Lr.style='*,*::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 jr=class{constructor(e){t(this,e),this.type="text",this.clientStyling=""}render(){var t;switch(null===(t=this.type)||void 0===t?void 0:t.toLowerCase()){case"text":return i("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,"client-styling":this.clientStyling});case"email":return i("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,"client-styling":this.clientStyling});case"number":return i("number-input",{name:this.name,displayName:this.displayName,validation:this.validation,defaultValue:this.defaultValue,autofilled:this.autofilled,emitValue:this.emitValue,language:this.language,"client-styling":this.clientStyling});case"checkbox":return i("checkbox-input",{name:this.name,displayName:this.displayName,validation:this.validation,emitValue:this.emitValue,defaultValue:this.defaultValue,autofilled:this.autofilled,language:this.language,"client-styling":this.clientStyling});case"datetime":return i("date-input",{name:this.name,displayName:this.displayName,validation:this.validation,defaultValue:this.defaultValue,autofilled:this.autofilled,emitValue:this.emitValue,language:this.language,"client-styling":this.clientStyling});case"password":return i("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,"client-styling":this.clientStyling});case"radio":return i("radio-input",{name:this.name,displayName:this.displayName,optionsGroup:this.options,validation:this.validation,emitValue:this.emitValue,language:this.language,"client-styling":this.clientStyling});case"tel":return i("tel-input",{name:this.name,action:this.action,displayName:this.displayName,validation:this.validation,defaultValue:this.defaultValue,emitValue:this.emitValue,language:this.language,autofilled:this.autofilled,"client-styling":this.clientStyling});case"dropdown":return i("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,"client-styling":this.clientStyling});default:return i("p",null,"The ",this.type," input type is not valid")}}};jr.style=":host{display:block}";const Rr=["ro","en"],Hr={en:{dateError:"The selected date should be between {min} and {max}",numberLengthError:"The number should be between {min} and {max}",lengthError:"The length should be between {minLength} and {maxLength}",requiredError:"This input is required.",nextButton:"Next",backButton:"Back",doneButton:"Done"},ro:{lengthError:"Cuvântul introdus este prea scurt. {minLength} and {maxLength}",requiredError:"Acest câmp este obligatoriu."}},qr=(t,e,i)=>{const s=e;let o=Hr[void 0!==s&&Rr.includes(s)?s:"en"][t];if(void 0!==i)for(const[t,e]of Object.entries(i.values)){const i=new RegExp(`{${t}}`,"g");o=o.replace(i,e)}return o},Ur=class{constructor(i){t(this,i),this.registrationWidgetLoaded=e(this,"registrationWidgetLoaded",7),this.registrationStepUpdated=e(this,"registrationStepUpdated",7),this.language="en",this.clientStyling="",this.clientStylingUrl="",this.translationsUrl="",this.listOfInputs=[],this.isLoading=!0,this.listOfInputValues=[],this.listOfActions=[],this.indexStep=0,this.emitValue=!1,this.registrationStepsState={regId:null},this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)},this.setClientStylingURL=()=>{let t=new URL(this.clientStylingUrl),e=document.createElement("style");fetch(t.href).then((t=>t.text())).then((t=>{e.innerHTML=t,this.clientStyling=t,setTimeout((()=>{this.stylingContainer.prepend(e)}),1)}))}}sendStep(){this.registrationStepUpdated.emit(this.registrationStep),window.postMessage({type:"registrationStepUpdated",step:this.registrationStep},window.location.href)}setFormValidity(){this.isFormValid=!this.getInvalidStatus(this.listOfInputs)}checkInputsValidityHandler(t){this.listOfInputs.find((e=>e.name==t.detail.name)).isValid=t.detail.valid,this.isFormValid=!this.getInvalidStatus(this.listOfInputs)}getInputsValueHandler(t){this.listOfInputValues.find((e=>{e.name==t.detail.name&&(e.value=t.detail.value)})),this.stepsStateMachine({event:"set",type:"values"})}componentWillLoad(){return this.getRegisterConfig().then((t=>{this.formatConfig(t),this.stepsStateMachine({event:"set",type:"inputs"})}))}componentDidRender(){this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL())}componentDidLoad(){this.registrationWidgetLoaded.emit(),window.postMessage({type:"registrationWidgetLoaded"},window.location.href)}nextHandler(t){t.preventDefault(),this.emitValue=!0,this.setRegisterStep()}backHandler(t){t.preventDefault(),this.isLastStep=!1,this.registrationStep=this.stepChange("decrement"),this.stepsStateMachine({event:"get",type:"inputs"}),this.stepsStateMachine({event:"get",type:"values"})}stepsStateMachine(t){switch(t.event){case"set":"inputs"==t.type&&(this.registrationStepsState[this.registrationStep].fields=this.listOfInputs,this.registrationStepsState[this.registrationStep].actions=this.listOfActions),"values"==t.type&&(this.registrationStepsState[this.registrationStep].registerUserData=this.listOfInputValues.reduce(((t,e)=>(t[e.name]={value:e.value,isDuplicate:e.isDuplicate},t)),{})),localStorage.setItem("registrationStepsState",JSON.stringify(this.registrationStepsState));break;case"get":const e=JSON.parse(localStorage.getItem("registrationStepsState"));if(!e)return;if("inputs"==t.type&&(this.listOfInputs=this.registrationStepsState[this.registrationStep].fields,this.listOfActions=this.registrationStepsState[this.registrationStep].actions),"values"==t.type){const t=e[this.registrationStep].registerUserData;console.log(t),this.listOfInputValues=Object.keys(t).map((e=>({name:e,value:t[e].value,isDuplicate:t[e].isDuplicate}))),this.listOfInputValues.forEach((t=>{const e=this.listOfInputs.find((e=>e.name===t.name));e&&(e.defaultValue=t.value)}))}}}getRegisterConfig(t){const e=new URL(`${this.endpoint}/v1/player/legislation/registration/config`),i=new Headers;i.append("Content-Type","application/json"),i.append("Accept","application/json"),t&&e.searchParams.append("registrationId",t);const s={method:"GET",headers:i};return new Promise(((t,i)=>{this.isLoading=!0,fetch(e.href,s).then((t=>t.json())).then((e=>{t(e)})).catch((t=>{console.error(t),i(t)})).finally((()=>{this.isLoading=!1}))}))}setRegisterStep(){this.isLoading=!0;const t=new URL(`${this.endpoint}/v1/player/legislation/registration/step`),e={registrationId:this.registrationID,registerUserDto:this.listOfInputValues.filter((t=>!t.isDuplicate)).reduce(((t,e)=>("Mobile"==e.name?(t.MobilePrefix=e.value.split("|")[0],t[e.name]=e.value.split("|")[1]):t[e.name]=e.value,t)),{}),step:this.registrationStep},i=new Headers;i.append("Content-Type","application/json"),i.append("Accept","application/json");const s={method:"POST",body:JSON.stringify(e),headers:i};fetch(t.href,s).then((t=>{if(t.status>=300)throw new Error("err");return t.json()})).then((t=>{this.registrationID=t.registrationId,this.listOfActions.some((t=>"/register"==t))?this.setRegister():(this.registrationStep=this.stepChange("increment"),Object.keys(this.registrationStepsState).find((t=>t==this.registrationStep))?(this.stepsStateMachine({event:"get",type:"inputs"}),this.stepsStateMachine({event:"get",type:"values"})):this.getRegisterConfig(this.registrationID).then((t=>{this.formatConfig(t),this.stepsStateMachine({event:"set",type:"inputs"})})))})).catch((t=>{console.error(t)})).finally((()=>{this.isLoading=!1}))}setRegister(){this.isLoading=!0;const t=new URL(`${this.endpoint}/v1/player/legislation/register`),e=new Headers;e.append("Content-Type","application/json"),e.append("Accept","application/json");const i={method:"PUT",body:JSON.stringify({registrationId:this.registrationID}),headers:e};fetch(t.href,i).then((t=>{if(t.status>=300)throw new Error("err");return t.json()})).then((t=>{t.userId&&alert(`User registered - the user ID is ${t.userId}`),window.postMessage({type:"registrationSuccessful"},window.location.href)})).catch((t=>{console.error(t)})).finally((()=>{this.isLoading=!1}))}formatConfig(t){this.listOfInputs=t.content.fields.flatMap((t=>{const e=t.validate.custom.find((t=>"duplicate-input"===t.rule)),i=Object.assign(Object.assign({},t),{isValid:this.setInitialValidStatus(t)});return e?[i,Object.assign(Object.assign({},t),{name:`${t.name}Duplicate`,displayName:e.displayName,isValid:!1,isDuplicateInput:!0})]:[i]})),this.listOfInputValues=this.listOfInputs.map((t=>{var e;return{name:t.name,value:"checkbox"==(null===(e=t.inputType)||void 0===e?void 0:e.toLowerCase())?"false":null,isDuplicate:t.isDuplicateInput||!1}})),this.listOfActions=t.content.actions.map((t=>t)),this.isLastStep=this.listOfActions.some((t=>"/register"==t)),this.registrationID=t.content.registrationID,this.registrationStep=t.content.step,this.registrationStepsState.regId=this.registrationID,this.registrationStepsState[this.registrationStep]||(this.registrationStepsState[this.registrationStep]={fields:[],registerUserData:{},actions:[]})}setInitialValidStatus(t){var e,i;return"checkbox"==(null===(e=t.inputType)||void 0===e?void 0:e.toLowerCase())&&0==(null===(i=t.validate)||void 0===i?void 0:i.mandatory)||null!==t.defaultValue}stepChange(t){const e=parseInt(this.registrationStep.replace("Step",""));return"increment"===t?"Step"+(e+1):"decrement"===t?"Step"+(e-1):void 0}getInvalidStatus(t){return t.filter((t=>0==t.isValid)).length>0}renderInputs(){return this.listOfInputs.map((t=>i("general-input",{type:t.inputType,name:t.name,displayName:t.displayName,validation:t.validate,action:t.action||null,options:t.data?t.data.values:[],defaultValue:t.defaultValue,autofilled:t.autofill,emitValue:this.emitValue,language:this.language,isDuplicateInput:t.isDuplicateInput,"client-styling":this.clientStyling})))}renderButtons(){return i("div",{class:"registration__buttons-wrapper"},i("button",{class:"registration__button registration__button--next "+(this.isFormValid?"":"registration__button--disabled"),type:"submit",form:"RegistrationForm",onClick:t=>this.nextHandler(t),disabled:!this.isFormValid},qr(this.isLastStep?"doneButton":"nextButton",this.language)),i("button",{class:"registration__button registration__button--back "+("Step1"==this.registrationStep?"registration__button--first-step":""),onClick:t=>this.backHandler(t)},qr("backButton",this.language)))}render(){return this.isLoading?i("p",null,"Please wait, loading ..."):i("div",{class:`registration  registration__${this.registrationStep}`,ref:t=>this.stylingContainer=t},i("form",{action:".",id:"RegistrationForm",class:"registration__form"},this.renderInputs()),this.renderButtons())}static get watchers(){return{registrationStep:["sendStep"],listOfInputs:["setFormValidity"]}}};Ur.style='*,\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--disabled {\n  opacity: 0.5;\n}\n.registration__button--disabled:hover {\n  opacity: 0.5;\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 Wr=class{constructor(i){t(this,i),this.sendValidityState=e(this,"sendValidityState",7),this.sendInputValue=e(this,"sendInputValue",7),this.clientStyling="",this.limitStylingAppends=!1,this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)}}validityChanged(){this.validityStateHandler({valid:this.isValid,name:this.name}),1==this.emitValue&&this.valueHandler({name:this.name,value:this.value})}validityStateHandler(t){this.sendValidityState.emit(t)}emitValueHandler(t){1==t&&this.isValid&&this.valueHandler({name:this.name,value:this.value})}valueHandler(t){this.sendInputValue.emit(t)}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.limitStylingAppends=!0)}componentDidLoad(){this.defaultValue&&(this.value=this.defaultValue,this.valueHandler({name:this.name,value:this.value}))}handleInput(t){this.value=t.target.value,this.errorMessage=this.setErrorMessage(),this.isValid=this.setValidity(),this.validityStateHandler({valid:this.isValid,name:this.name}),this.emitValueHandler(!0)}setValidity(){return this.inputReference.validity.valid}setErrorMessage(){return this.inputReference.validity.rangeUnderflow||this.inputReference.validity.rangeOverflow?n("numberLengthError",this.language,{values:{min:this.validation.min,max:this.validation.max}}):this.inputReference.validity.valueMissing?n("requiredError",this.language):void 0}render(){return i("div",{class:"number__wrapper",ref:t=>this.stylingContainer=t},i("input",{ref:t=>this.inputReference=t,type:"number",value:this.defaultValue,readOnly:this.autofilled,id:`${this.name}__input`,class:"number__input "+(1==this.isValid||null==this.isValid?"":"number__input--invalid"),placeholder:`${this.displayName} ${this.validation.mandatory?"*":""}`,required:this.validation.mandatory,max:this.validation.max,min:this.validation.min,onBlur:t=>this.handleInput(t)}),i("label",{class:"number__label "+(this.validation.mandatory?"number__label--required":""),htmlFor:`${this.name}__input`},this.displayName),i("small",{class:"number__error-message"},this.errorMessage))}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};Wr.style='*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.number{font-family:"Roboto";font-style:normal}.number__wrapper{position:relative;width:100%;padding-top:26px}.number__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.number__label--required::after{content:"*";font-family:inherit;color:#1F1F1F;margin-left:2px}.number__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;-moz-appearance:textfield;}.number__input:focus{outline-color:#3E3E3E}.number__input::-webkit-outer-spin-button,.number__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number__input--invalid{border:2px solid #cc0000b3}.number__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}',
 /**
  * @license
  * Copyright (c) 2017 - 2022 Vaadin Ltd.

package/dist/types/Users/adrian.pripon/Documents/Work/stencil/widgets-stencil/packages/general-registration/.stencil/packages/general-input/src/utils/types.d.ts

@@ -8,7 +8,7 @@ interface RegCfgContent {
   registrationID: string;
   step: string;
 }
-interface RegCfgContentField {
+export interface RegCfgContentField {
   action: string;
   autofill: boolean;
   data: string;

package/dist/types/components/general-registration/general-registration.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import type { InputStateEvent, InputValueEvent, RegistrationConfig, StepState, InputValue } from '../../../../general-input/src/utils/types';
+import type { InputStateEvent, InputValueEvent, RegistrationConfig, RegCfgContentField, StepState, InputValue } from '../../../../general-input/src/utils/types';
 import '@everymatrix/general-input';
 export declare class GeneralRegistration {
   /**
@@ -18,19 +18,23 @@ export declare class GeneralRegistration {
    * Client custom styling via url
    */
   clientStylingUrl: string;
+  /**
+   * Translations via URL
+   */
+  translationsUrl: string;
   errorMessage: string;
-  emitValue: boolean;
   isFormValid: boolean;
   listOfInputs: any[];
   isLoading: boolean;
-  limitStylingAppends: boolean;
   registrationStep: string;
   sendStep(): void;
+  setFormValidity(): void;
   private registrationID;
   listOfInputValues: InputValue[];
   listOfActions: any[];
   indexStep: number;
   isLastStep: boolean;
+  emitValue: boolean;
   stylingContainer: HTMLElement;
   registrationStepsState: {
     regId: any;
@@ -49,6 +53,7 @@ export declare class GeneralRegistration {
   setRegisterStep(): void;
   setRegister(): void;
   formatConfig(config: RegistrationConfig): void;
+  setInitialValidStatus(field: RegCfgContentField): boolean;
   stepChange(action: any): string;
   getInvalidStatus(listOfInputs: any): boolean;
   setClientStyling: () => void;

package/dist/types/components.d.ts

@@ -23,6 +23,10 @@ export namespace Components {
           * Currently selected language
          */
         "language": string;
+        /**
+          * Translations via URL
+         */
+        "translationsUrl": string;
     }
 }
 declare global {
@@ -56,6 +60,10 @@ declare namespace LocalJSX {
         "language"?: string;
         "onRegistrationStepUpdated"?: (event: CustomEvent<string>) => void;
         "onRegistrationWidgetLoaded"?: (event: CustomEvent<any>) => void;
+        /**
+          * Translations via URL
+         */
+        "translationsUrl"?: string;
     }
     interface IntrinsicElements {
         "general-registration": GeneralRegistration;

package/dist/types/utils/locale.utils.d.ts

@@ -0,0 +1,5 @@
+interface TranslationValues {
+  values: object;
+}
+export declare const translate: (key: string, customLang?: any, values?: TranslationValues) => string;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-registration",
-  "version": "1.10.14",
+  "version": "1.10.16",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",