@everymatrix/general-registration 1.10.0 → 1.10.2

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

@@ -64,6 +64,7 @@ const CheckboxInput = class {
     this.errorMessage = this.setErrorMessage();
     this.isValid = this.setValidity();
     this.validityStateHandler({ valid: this.isValid, name: this.name });
+    this.emitValueHandler(true);
   }
   setValidity() {
     return this.inputReference.validity.valid;
@@ -91,17 +92,8 @@ const DateInput = class {
     this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
     this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
   }
-  checkValidityHandler(newValue) {
-    if (newValue == true) {
-      this.isValid = this.setValidity();
-      this.errorMessage = this.setErrorMessage();
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
-  }
   validityChanged() {
-    if (this.checkValidity == true) {
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
     if (this.emitValue == true) {
       this.valueHandler({ name: this.name, value: this.value });
     }
@@ -121,6 +113,8 @@ const DateInput = class {
     this.value = event.target.value;
     this.errorMessage = this.setErrorMessage();
     this.isValid = this.setValidity();
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
+    this.emitValueHandler(true);
   }
   setValidity() {
     return this.inputReference.validity.valid;
@@ -137,7 +131,6 @@ const DateInput = class {
     return index.h("div", { class: 'date__wrapper' }, index.h("input", { id: `${this.name}__input`, type: 'date', class: `date__input`, value: this.defaultValue, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, ref: (el) => this.inputReference = el, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onInput: (e) => this.handleInput(e) }), index.h("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.h("small", { class: 'date__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
-    "checkValidity": ["checkValidityHandler"],
     "isValid": ["validityChanged"],
     "emitValue": ["emitValueHandler"]
   }; }
@@ -153,17 +146,8 @@ const EmailInput = class {
     this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
     this.validationPattern = '';
   }
-  checkValidityHandler(newValue) {
-    if (newValue == true) {
-      this.isValid = this.setValidity();
-      this.errorMessage = this.setErrorMessage();
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
-  }
   validityChanged() {
-    if (this.checkValidity == true) {
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
     if (this.emitValue == true) {
       this.valueHandler({ name: this.name, value: this.value });
     }
@@ -184,13 +168,10 @@ const EmailInput = class {
   }
   handleInput(event) {
     this.value = event.target.value;
-    if (this.debounceTime) {
-      clearTimeout(this.debounceTime);
-    }
-    this.debounceTime = setTimeout(() => {
-      this.errorMessage = this.setErrorMessage();
-      this.isValid = this.setValidity();
-    }, 500);
+    this.errorMessage = this.setErrorMessage();
+    this.isValid = this.setValidity();
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
+    this.emitValueHandler(true);
   }
   setValidity() {
     return this.inputReference.validity.valid;
@@ -216,7 +197,6 @@ const EmailInput = class {
     return index.h("div", { class: 'email__wrapper' }, index.h("input", { id: `${this.name}__input`, type: 'email', class: `email__input`, value: this.defaultValue, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: (e) => this.handleInput(e) }), index.h("label", { class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'email__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
-    "checkValidity": ["checkValidityHandler"],
     "isValid": ["validityChanged"],
     "emitValue": ["emitValueHandler"]
   }; }
@@ -515,31 +495,23 @@ const GeneralRegistration = class {
     this.language = 'en';
     this.emitValue = false;
     this.listOfInputs = [];
-    this.isLoading = false;
+    this.isLoading = true;
     this.listOfInputValues = [];
     this.listOfActions = [];
     this.actionsStepIndex = 0;
   }
-  validityStateHandler() {
-    console.log('bababa', this.isFormValid);
-    this.buttonReference.disabled = this.isFormValid ? false : true;
-  }
   checkInputsValidityHandler(event) {
-    console.log('se ajunge aici');
     // Set isValid state of the input in the list.
     this.listOfInputs.find(input => input.name == event.detail.name).isValid = event.detail.valid;
     // Check if any one is invalid.
     this.isFormValid = !this.getInvalidStatus(this.listOfInputs);
   }
   getInputsValueHandler(event) {
-    console.log('sendInputValue');
     this.listOfInputValues.find(input => input.name == event.detail.name).inputValue = event.detail.value;
     /*Note to self: -- what about the inputs that received a default value.
     They will send an undefined because there was no input
     Handle it somehow!!!!!, one idea can be that value equals defaultValue but dependes on how the api wants stuff*/
   }
-  connectedCallback() {
-  }
   componentWillLoad() {
     // const mockCall = Promise.resolve(this.data);
     // return mockCall.then((data) => {
@@ -556,9 +528,9 @@ const GeneralRegistration = class {
     e.preventDefault();
     // Trigger events in subwidgets.
     this.emitValue = true;
-    if (this.isFormValid) {
-      this.setRegisterStep();
-    }
+    // if (this.isFormValid) {
+    this.setRegisterStep();
+    // }
   }
   getRegisterConfig(registrationID) {
     const url = new URL(`${this.endpoint}/api/v1.0/registerCfg/`);
@@ -590,12 +562,15 @@ const GeneralRegistration = class {
     });
   }
   setRegisterStep() {
-    this.emitValue = false;
+    this.isLoading = true;
     const url = new URL(`${this.endpoint}/api/v1.0/registerStep/`);
     const registerStep = {
       registrationId: this.registrationID,
       registerUserDto: this.listOfInputValues.reduce((acc, curr) => {
-        acc[curr.name] = curr.inputValue;
+        // @TODO remove this once GMCore is smart enough to understand the concept of UNIQUE KEYS
+        if (curr.inputValue != null) {
+          acc[curr.name] = curr.inputValue;
+        }
         return acc;
       }, {}),
       step: this.registrationStep,
@@ -616,8 +591,10 @@ const GeneralRegistration = class {
       if (res.status >= 300) {
         throw new Error('err');
       }
+      return res.json();
     })
       .then((data) => {
+      console.log('data', data);
       this.registrationID = data.registrationId;
       if (this.listOfActions.some(action => action == '/register')) {
         this.setRegister();
@@ -628,9 +605,13 @@ const GeneralRegistration = class {
     })
       .catch((err) => {
       console.error(err);
+    })
+      .finally(() => {
+      this.isLoading = false;
     });
   }
   setRegister() {
+    this.isLoading = true;
     const url = new URL(`${this.endpoint}/api/v1.0/register/`);
     const headers = new Headers();
     headers.append('X-Tenant-ID', this.tenantId);
@@ -656,12 +637,19 @@ const GeneralRegistration = class {
       if (res.status >= 300) {
         throw new Error('err');
       }
+      return res.json();
     })
       .then((data) => {
       console.log(data);
+      if (data.userId) {
+        alert(`User registered - the user ID is ${data.userId}`);
+      }
     })
       .catch((err) => {
       console.log(err);
+    })
+      .finally(() => {
+      this.isLoading = false;
     });
   }
   formatConfig(config) {
@@ -682,21 +670,20 @@ const GeneralRegistration = class {
     return listOfInputs.filter(input => input.isValid == false).length > 0;
   }
   renderInputs() {
-    /*let aux = this.listOfInputs;
-    this.listOfInputs = [];
-    this.listOfInputs = aux;*/
     return (this.listOfInputs.map(input => index.h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data ? input.data.values : [], defaultValue: input.defaultValue, emitValue: this.emitValue, language: this.language })));
   }
   ;
   renderButtons() {
-    return (index.h("div", { class: 'registration__buttons-wrapper' }, index.h("button", { class: 'registration__button', type: 'submit', form: 'RegistrationForm', onClick: (e) => this.nextHandler(e), ref: (el) => this.buttonReference = el }, translate('nextButton', this.language)), index.h("button", { class: 'registration__button' }, translate('backButton', this.language))));
+    return (index.h("div", { class: 'registration__buttons-wrapper' }, index.h("button", { class: 'registration__button', type: 'submit', form: 'RegistrationForm', onClick: (e) => this.nextHandler(e),
+      // disabled={!this.isFormValid}
+      ref: (el) => this.buttonReference = el }, translate('nextButton', this.language))));
   }
   render() {
+    if (this.isLoading) {
+      return index.h("p", null, "Please wait, loading ...");
+    }
     return (index.h("div", { class: 'registration' }, index.h("form", { action: '.', id: 'RegistrationForm', class: 'registration__form' }, this.renderInputs()), this.renderButtons()));
   }
-  static get watchers() { return {
-    "isFormValid": ["validityStateHandler"]
-  }; }
 };
 GeneralRegistration.style = generalRegistrationCss;
 
@@ -708,17 +695,8 @@ const NumberInput = class {
     this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
     this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
   }
-  checkValidityHandler(newValue) {
-    if (newValue == true) {
-      this.isValid = this.setValidity();
-      this.errorMessage = this.setErrorMessage();
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
-  }
   validityChanged() {
-    if (this.checkValidity == true) {
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
     if (this.emitValue == true) {
       this.valueHandler({ name: this.name, value: this.value });
     }
@@ -736,13 +714,10 @@ const NumberInput = class {
   }
   handleInput(event) {
     this.value = event.target.value;
-    if (this.debounceTime) {
-      clearTimeout(this.debounceTime);
-    }
-    this.debounceTime = setTimeout(() => {
-      this.errorMessage = this.setErrorMessage();
-      this.isValid = this.setValidity();
-    }, 500);
+    this.errorMessage = this.setErrorMessage();
+    this.isValid = this.setValidity();
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
+    this.emitValueHandler(true);
   }
   setValidity() {
     return this.inputReference.validity.valid;
@@ -760,7 +735,6 @@ const NumberInput = class {
     return index.h("div", { class: 'number__wrapper' }, index.h("input", { ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, id: `${this.name}__input`, class: `number__input ${invalidClass}`, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onInput: (e) => this.handleInput(e) }), index.h("label", { class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'number__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
-    "checkValidity": ["checkValidityHandler"],
     "isValid": ["validityChanged"],
     "emitValue": ["emitValueHandler"]
   }; }
@@ -801,6 +775,7 @@ const PasswordInput = class {
     this.errorMessage = this.setErrorMessage();
     this.isValid = this.setValidity();
     this.validityStateHandler({ valid: this.isValid, name: this.name });
+    this.emitValueHandler(true);
   }
   setValidity() {
     return this.inputReference.validity.valid;
@@ -841,17 +816,8 @@ const RadioInput = class {
     this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
     this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
   }
-  checkValidityHandler(newValue) {
-    if (newValue == true) {
-      this.isValid = this.setValidity();
-      this.errorMessage = this.setErrorMessage();
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
-  }
   validityChanged() {
-    if (this.checkValidity == true) {
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
     if (this.emitValue == true) {
       this.valueHandler({ name: this.name, value: this.value });
     }
@@ -873,6 +839,8 @@ const RadioInput = class {
     this.value = event.target.value;
     this.isValid = this.setValidity();
     this.errorMessage = this.setErrorMessage();
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
+    this.emitValueHandler(true);
   }
   setValidity() {
     return this.inputReference.validity.valid;
@@ -886,7 +854,6 @@ const RadioInput = class {
     return index.h("fieldset", { class: 'radio__fieldset' }, index.h("legend", { class: 'radio__legend' }, this.displayName, ":"), this.optionsGroup.map(option => index.h("div", { class: 'radio__wrapper' }, index.h("input", { type: "radio", class: 'radio__input', id: `${option.label}__input`, ref: (el) => this.inputReference = el, value: option.value, name: this.name, required: this.validation.mandatory, onClick: (e) => this.handleClick(e) }), index.h("label", { htmlFor: `${option.label}__input` }, option.label))), index.h("small", { class: 'radio__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
-    "checkValidity": ["checkValidityHandler"],
     "isValid": ["validityChanged"],
     "emitValue": ["emitValueHandler"]
   }; }
@@ -905,17 +872,8 @@ const SelectInput = class {
      */
     this.options = [];
   }
-  checkValidityHandler(newValue) {
-    if (newValue == true) {
-      this.isValid = this.setValidity();
-      this.errorMessage = this.setErrorMessage();
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
-  }
   validityChanged() {
-    if (this.checkValidity == true) {
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
     if (this.emitValue == true) {
       this.valueHandler({ name: this.name, value: this.value });
     }
@@ -933,10 +891,8 @@ const SelectInput = class {
   }
   connectedCallback() {
     this.displayedOptions = this.options;
-    console.log(this.displayedOptions);
   }
   componentWillLoad() {
-    console.log(this.action, this.options);
     if (this.action && !this.options.length) {
       if (this.action.split(" ")[0] == 'GET') {
         return this.getOptions().then((options) => {
@@ -965,8 +921,9 @@ const SelectInput = class {
     this.value = event.target.value;
     this.errorMessage = this.setErrorMessage();
     this.isValid = this.setValidity();
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
+    this.emitValueHandler(true);
     this.inputReference.previousElementSibling.classList.remove('select__label--hidden');
-    console.log(this.action, this.options);
   }
   setValidity() {
     return this.inputReference.validity.valid;
@@ -983,7 +940,6 @@ const SelectInput = class {
     })), index.h("small", { class: 'select__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
-    "checkValidity": ["checkValidityHandler"],
     "isValid": ["validityChanged"],
     "emitValue": ["emitValueHandler"]
   }; }
@@ -999,17 +955,8 @@ const TelInput = class {
     this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
     this.validationPattern = '';
   }
-  checkValidityHandler(newValue) {
-    if (newValue == true) {
-      this.isValid = this.setValidity();
-      this.errorMessage = this.setErrorMessage();
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
-  }
   validityChanged() {
-    if (this.checkValidity == true) {
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
     if (this.emitValue == true) {
       this.valueHandler({ name: this.name, value: this.value });
     }
@@ -1030,13 +977,10 @@ const TelInput = class {
   }
   handleInput(event) {
     this.value = event.target.value;
-    if (this.debounceTime) {
-      clearTimeout(this.debounceTime);
-    }
-    this.debounceTime = setTimeout(() => {
-      this.errorMessage = this.setErrorMessage();
-      this.isValid = this.setValidity();
-    }, 500);
+    this.errorMessage = this.setErrorMessage();
+    this.isValid = this.setValidity();
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
+    this.emitValueHandler(true);
   }
   setValidity() {
     return this.inputReference.validity.valid;
@@ -1063,7 +1007,6 @@ const TelInput = class {
     return index.h("div", { class: 'tel__wrapper' }, index.h("input", { type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, value: this.defaultValue, class: `tel__input ${invalidClass}`, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: (e) => this.handleInput(e) }), index.h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'tel__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
-    "checkValidity": ["checkValidityHandler"],
     "isValid": ["validityChanged"],
     "emitValue": ["emitValueHandler"]
   }; }
@@ -1112,6 +1055,7 @@ const TextInput = class {
     this.isValid = this.setValidity();
     this.errorMessage = this.setErrorMessage();
     this.validityStateHandler({ valid: this.isValid, name: this.name });
+    this.emitValueHandler(true);
   }
   setValidity() {
     return this.inputReference.validity.valid;

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":[1],"tenantId":[1,"tenant-id"],"clientId":[1,"client-id"],"apiKey":[1,"api-key"],"language":[1],"errorMessage":[32],"emitValue":[32],"isFormValid":[32],"listOfInputs":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[1],"name":[1],"displayName":[1,"display-name"],"action":[1],"validation":[16],"options":[8],"language":[1],"defaultValue":[8,"default-value"],"emitValue":[4,"emit-value"]}],[1,"checkbox-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"date-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"email-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"language":[1],"emitValue":[4,"emit-value"],"checkValidity":[4,"check-validity"],"errorMessage":[32],"isValid":[32]}],[1,"number-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[2,"default-value"],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"password-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}],[1,"radio-input",{"name":[1],"displayName":[1,"display-name"],"optionsGroup":[16],"validation":[16],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"select-input",{"name":[1],"displayName":[1,"display-name"],"action":[1],"options":[16],"validation":[16],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"tel-input",{"name":[1],"displayName":[1,"display-name"],"showLabels":[4,"show-labels"],"action":[1],"validation":[16],"defaultValue":[8,"default-value"],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}],[1,"text-input",{"name":[1025],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1025,"default-value"],"rules":[1],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}]]]], options);
+  return index.bootstrapLazy([["checkbox-input_11.cjs",[[1,"general-registration",{"endpoint":[1],"tenantId":[1,"tenant-id"],"clientId":[1,"client-id"],"apiKey":[1,"api-key"],"language":[1],"errorMessage":[32],"emitValue":[32],"isFormValid":[32],"listOfInputs":[32],"isLoading":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[1],"name":[1],"displayName":[1,"display-name"],"action":[1],"validation":[16],"options":[8],"language":[1],"defaultValue":[8,"default-value"],"emitValue":[4,"emit-value"]}],[1,"checkbox-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"date-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"email-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"number-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[2,"default-value"],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"password-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}],[1,"radio-input",{"name":[1],"displayName":[1,"display-name"],"optionsGroup":[16],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"select-input",{"name":[1],"displayName":[1,"display-name"],"action":[1],"options":[16],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"tel-input",{"name":[1],"displayName":[1,"display-name"],"showLabels":[4,"show-labels"],"action":[1],"validation":[16],"defaultValue":[8,"default-value"],"language":[1],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}],[1,"text-input",{"name":[1025],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1025,"default-value"],"rules":[1],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}]]]], 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":[1],"tenantId":[1,"tenant-id"],"clientId":[1,"client-id"],"apiKey":[1,"api-key"],"language":[1],"errorMessage":[32],"emitValue":[32],"isFormValid":[32],"listOfInputs":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[1],"name":[1],"displayName":[1,"display-name"],"action":[1],"validation":[16],"options":[8],"language":[1],"defaultValue":[8,"default-value"],"emitValue":[4,"emit-value"]}],[1,"checkbox-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"date-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"email-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"language":[1],"emitValue":[4,"emit-value"],"checkValidity":[4,"check-validity"],"errorMessage":[32],"isValid":[32]}],[1,"number-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[2,"default-value"],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"password-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}],[1,"radio-input",{"name":[1],"displayName":[1,"display-name"],"optionsGroup":[16],"validation":[16],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"select-input",{"name":[1],"displayName":[1,"display-name"],"action":[1],"options":[16],"validation":[16],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"tel-input",{"name":[1],"displayName":[1,"display-name"],"showLabels":[4,"show-labels"],"action":[1],"validation":[16],"defaultValue":[8,"default-value"],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}],[1,"text-input",{"name":[1025],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1025,"default-value"],"rules":[1],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}]]]], options);
+  return index.bootstrapLazy([["checkbox-input_11.cjs",[[1,"general-registration",{"endpoint":[1],"tenantId":[1,"tenant-id"],"clientId":[1,"client-id"],"apiKey":[1,"api-key"],"language":[1],"errorMessage":[32],"emitValue":[32],"isFormValid":[32],"listOfInputs":[32],"isLoading":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[1],"name":[1],"displayName":[1,"display-name"],"action":[1],"validation":[16],"options":[8],"language":[1],"defaultValue":[8,"default-value"],"emitValue":[4,"emit-value"]}],[1,"checkbox-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"date-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"email-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"number-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[2,"default-value"],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"password-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}],[1,"radio-input",{"name":[1],"displayName":[1,"display-name"],"optionsGroup":[16],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"select-input",{"name":[1],"displayName":[1,"display-name"],"action":[1],"options":[16],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"tel-input",{"name":[1],"displayName":[1,"display-name"],"showLabels":[4,"show-labels"],"action":[1],"validation":[16],"defaultValue":[8,"default-value"],"language":[1],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}],[1,"text-input",{"name":[1025],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1025,"default-value"],"rules":[1],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}]]]], options);
   });
 };
 

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

@@ -1,4 +1,4 @@
-import { Component, h, Listen, Prop, State, Watch } from '@stencil/core';
+import { Component, h, Listen, Prop, State } from '@stencil/core';
 import { translate } from '../../../../general-input/src/utils/locale.utils';
 import '@everymatrix/general-input';
 export class GeneralRegistration {
@@ -224,31 +224,23 @@ export class GeneralRegistration {
     this.language = 'en';
     this.emitValue = false;
     this.listOfInputs = [];
-    this.isLoading = false;
+    this.isLoading = true;
     this.listOfInputValues = [];
     this.listOfActions = [];
     this.actionsStepIndex = 0;
   }
-  validityStateHandler() {
-    console.log('bababa', this.isFormValid);
-    this.buttonReference.disabled = this.isFormValid ? false : true;
-  }
   checkInputsValidityHandler(event) {
-    console.log('se ajunge aici');
     // Set isValid state of the input in the list.
     this.listOfInputs.find(input => input.name == event.detail.name).isValid = event.detail.valid;
     // Check if any one is invalid.
     this.isFormValid = !this.getInvalidStatus(this.listOfInputs);
   }
   getInputsValueHandler(event) {
-    console.log('sendInputValue');
     this.listOfInputValues.find(input => input.name == event.detail.name).inputValue = event.detail.value;
     /*Note to self: -- what about the inputs that received a default value.
     They will send an undefined because there was no input
     Handle it somehow!!!!!, one idea can be that value equals defaultValue but dependes on how the api wants stuff*/
   }
-  connectedCallback() {
-  }
   componentWillLoad() {
     // const mockCall = Promise.resolve(this.data);
     // return mockCall.then((data) => {
@@ -265,9 +257,9 @@ export class GeneralRegistration {
     e.preventDefault();
     // Trigger events in subwidgets.
     this.emitValue = true;
-    if (this.isFormValid) {
-      this.setRegisterStep();
-    }
+    // if (this.isFormValid) {
+    this.setRegisterStep();
+    // }
   }
   getRegisterConfig(registrationID) {
     const url = new URL(`${this.endpoint}/api/v1.0/registerCfg/`);
@@ -299,12 +291,15 @@ export class GeneralRegistration {
     });
   }
   setRegisterStep() {
-    this.emitValue = false;
+    this.isLoading = true;
     const url = new URL(`${this.endpoint}/api/v1.0/registerStep/`);
     const registerStep = {
       registrationId: this.registrationID,
       registerUserDto: this.listOfInputValues.reduce((acc, curr) => {
-        acc[curr.name] = curr.inputValue;
+        // @TODO remove this once GMCore is smart enough to understand the concept of UNIQUE KEYS
+        if (curr.inputValue != null) {
+          acc[curr.name] = curr.inputValue;
+        }
         return acc;
       }, {}),
       step: this.registrationStep,
@@ -325,8 +320,10 @@ export class GeneralRegistration {
       if (res.status >= 300) {
         throw new Error('err');
       }
+      return res.json();
     })
       .then((data) => {
+      console.log('data', data);
       this.registrationID = data.registrationId;
       if (this.listOfActions.some(action => action == '/register')) {
         this.setRegister();
@@ -337,9 +334,13 @@ export class GeneralRegistration {
     })
       .catch((err) => {
       console.error(err);
+    })
+      .finally(() => {
+      this.isLoading = false;
     });
   }
   setRegister() {
+    this.isLoading = true;
     const url = new URL(`${this.endpoint}/api/v1.0/register/`);
     const headers = new Headers();
     headers.append('X-Tenant-ID', this.tenantId);
@@ -365,12 +366,19 @@ export class GeneralRegistration {
       if (res.status >= 300) {
         throw new Error('err');
       }
+      return res.json();
     })
       .then((data) => {
       console.log(data);
+      if (data.userId) {
+        alert(`User registered - the user ID is ${data.userId}`);
+      }
     })
       .catch((err) => {
       console.log(err);
+    })
+      .finally(() => {
+      this.isLoading = false;
     });
   }
   formatConfig(config) {
@@ -391,18 +399,19 @@ export class GeneralRegistration {
     return listOfInputs.filter(input => input.isValid == false).length > 0;
   }
   renderInputs() {
-    /*let aux = this.listOfInputs;
-    this.listOfInputs = [];
-    this.listOfInputs = aux;*/
     return (this.listOfInputs.map(input => h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data ? input.data.values : [], defaultValue: input.defaultValue, emitValue: this.emitValue, language: this.language })));
   }
   ;
   renderButtons() {
     return (h("div", { class: 'registration__buttons-wrapper' },
-      h("button", { class: 'registration__button', type: 'submit', form: 'RegistrationForm', onClick: (e) => this.nextHandler(e), ref: (el) => this.buttonReference = el }, translate('nextButton', this.language)),
-      h("button", { class: 'registration__button' }, translate('backButton', this.language))));
+      h("button", { class: 'registration__button', type: 'submit', form: 'RegistrationForm', onClick: (e) => this.nextHandler(e), 
+        // disabled={!this.isFormValid}
+        ref: (el) => this.buttonReference = el }, translate('nextButton', this.language))));
   }
   render() {
+    if (this.isLoading) {
+      return h("p", null, "Please wait, loading ...");
+    }
     return (h("div", { class: 'registration' },
       h("form", { action: '.', id: 'RegistrationForm', class: 'registration__form' }, this.renderInputs()),
       this.renderButtons()));
@@ -507,12 +516,9 @@ export class GeneralRegistration {
     "errorMessage": {},
     "emitValue": {},
     "isFormValid": {},
-    "listOfInputs": {}
+    "listOfInputs": {},
+    "isLoading": {}
   }; }
-  static get watchers() { return [{
-      "propName": "isFormValid",
-      "methodName": "validityStateHandler"
-    }]; }
   static get listeners() { return [{
       "name": "sendValidityState",
       "method": "checkInputsValidityHandler",

package/dist/components/checkbox-input2.js

@@ -35,6 +35,7 @@ const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.errorMessage = this.setErrorMessage();
     this.isValid = this.setValidity();
     this.validityStateHandler({ valid: this.isValid, name: this.name });
+    this.emitValueHandler(true);
   }
   setValidity() {
     return this.inputReference.validity.valid;

package/dist/components/date-input2.js

@@ -11,17 +11,8 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.sendValidityState = createEvent(this, "sendValidityState", 7);
     this.sendInputValue = createEvent(this, "sendInputValue", 7);
   }
-  checkValidityHandler(newValue) {
-    if (newValue == true) {
-      this.isValid = this.setValidity();
-      this.errorMessage = this.setErrorMessage();
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
-  }
   validityChanged() {
-    if (this.checkValidity == true) {
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
     if (this.emitValue == true) {
       this.valueHandler({ name: this.name, value: this.value });
     }
@@ -41,6 +32,8 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.value = event.target.value;
     this.errorMessage = this.setErrorMessage();
     this.isValid = this.setValidity();
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
+    this.emitValueHandler(true);
   }
   setValidity() {
     return this.inputReference.validity.valid;
@@ -57,7 +50,6 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return h("div", { class: 'date__wrapper' }, h("input", { id: `${this.name}__input`, type: 'date', class: `date__input`, value: this.defaultValue, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, ref: (el) => this.inputReference = el, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onInput: (e) => this.handleInput(e) }), h("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h("small", { class: 'date__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
-    "checkValidity": ["checkValidityHandler"],
     "isValid": ["validityChanged"],
     "emitValue": ["emitValueHandler"]
   }; }
@@ -68,7 +60,6 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "validation": [16],
     "defaultValue": [1, "default-value"],
     "language": [1],
-    "checkValidity": [4, "check-validity"],
     "emitValue": [4, "emit-value"],
     "errorMessage": [32],
     "isValid": [32]