@everymatrix/general-registration 1.10.4 → 1.10.5

package/dist/components/general-registration.js

@@ -15,7 +15,7 @@ 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}',
+    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',
@@ -281,10 +281,11 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.isFormValid = !this.getInvalidStatus(this.listOfInputs);
   }
   getInputsValueHandler(event) {
-    this.listOfInputValues.find(input => input.name == event.detail.name).value = 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*/
+    this.listOfInputValues.find(input => {
+      if (input.name == event.detail.name) {
+        input.value = event.detail.value;
+      }
+    });
     this.stepsStateMachine({ event: 'set', type: 'values' });
   }
   componentWillLoad() {
@@ -321,10 +322,7 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
         }
         if (state.type == 'values') {
           this.registrationStepsState[this.registrationStep].registerUserData = this.listOfInputValues.reduce((acc, curr) => {
-            // @TODO remove this once GMCore is smart enough to understand the concept of UNIQUE KEYS
-            if (curr.value != null) {
-              acc[curr.name] = curr.value;
-            }
+            acc[curr.name] = curr.value;
             return acc;
           }, {});
         }
@@ -356,9 +354,6 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   getRegisterConfig(registrationID) {
     const url = new URL(`${this.endpoint}/v1/player/legislation/registration/config`);
     const headers = new Headers();
-    // headers.append('X-Tenant-ID', this.tenantId);
-    // headers.append('X-Client-ID', this.clientId);
-    // headers.append('X-Api-Key', this.apiKey);
     headers.append('Content-Type', 'application/json');
     headers.append('Accept', 'application/json');
     if (registrationID) {
@@ -388,8 +383,12 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     const registerStep = {
       registrationId: this.registrationID,
       registerUserDto: this.listOfInputValues.reduce((acc, curr) => {
-        // @TODO remove this once GMCore is smart enough to understand the concept of UNIQUE KEYS
-        if (curr.value != null) {
+        // Special case for "Mobile" as it needs to be split in two values -- API expects it this way.
+        if (curr.name == "Mobile") {
+          acc['MobilePrefix'] = curr.value.split('|')[0];
+          acc[curr.name] = curr.value.split('|')[1];
+        }
+        else {
           acc[curr.name] = curr.value;
         }
         return acc;
@@ -397,9 +396,6 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
       step: this.registrationStep,
     };
     const headers = new Headers();
-    // headers.append('X-Tenant-ID', this.tenantId);
-    // headers.append('X-Client-ID', this.clientId);
-    // headers.append('X-Api-Key', this.apiKey);
     headers.append('Content-Type', 'application/json');
     headers.append('Accept', 'application/json');
     const options = {
@@ -439,19 +435,8 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.isLoading = true;
     const url = new URL(`${this.endpoint}/v1/player/legislation/register`);
     const headers = new Headers();
-    // headers.append('X-Tenant-ID', this.tenantId);
-    // headers.append('X-Client-ID', this.clientId);
-    // headers.append('X-Api-Key', this.apiKey);
     headers.append('Content-Type', 'application/json');
     headers.append('Accept', 'application/json');
-    // const registerStep = {
-    //   registrationId: this.registrationID,
-    //   registerUserDto: this.listOfInputValues.reduce((acc, curr) => {
-    //     acc[curr.name] = curr.value;
-    //     return acc;
-    //   }, {}),
-    //   step: this.registrationStep,
-    // };
     const options = {
       method: 'PUT',
       body: JSON.stringify({ registrationId: this.registrationID }),
@@ -478,9 +463,10 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   formatConfig(config) {
     // Populate the list of inputs and set as invalid in the beginning
-    this.listOfInputs = config.content.fields.map((field) => {
+    let newListOfInputs = config.content.fields.map((field) => {
       return Object.assign(Object.assign({}, field), { isValid: false });
     });
+    this.listOfInputs = JSON.parse(JSON.stringify(newListOfInputs));
     // Populate the list of inputs values and set as null in the beginning
     this.listOfInputValues = config.content.fields.map(field => {
       return { name: field.name, value: null };

package/dist/components/locale.utils.js

@@ -3,7 +3,7 @@ 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}',
+    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',

package/dist/components/number-input2.js

@@ -28,6 +28,12 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   valueHandler(inputValueEvent) {
     this.sendInputValue.emit(inputValueEvent);
   }
+  componentDidLoad() {
+    if (this.defaultValue) {
+      this.value = this.defaultValue;
+      this.valueHandler({ name: this.name, value: this.value });
+    }
+  }
   handleInput(event) {
     this.value = event.target.value;
     this.errorMessage = this.setErrorMessage();
@@ -59,7 +65,7 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "name": [1],
     "displayName": [1, "display-name"],
     "validation": [16],
-    "defaultValue": [2, "default-value"],
+    "defaultValue": [1, "default-value"],
     "autofilled": [4],
     "language": [1],
     "emitValue": [4, "emit-value"],

package/dist/components/password-input2.js

@@ -37,6 +37,12 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   connectedCallback() {
     this.validationPattern = this.setPattern();
   }
+  componentDidLoad() {
+    if (this.defaultValue) {
+      this.value = this.defaultValue;
+      this.valueHandler({ name: this.name, value: this.value });
+    }
+  }
   handleInput(event) {
     this.value = event.target.value;
     this.errorMessage = this.setErrorMessage();
@@ -48,14 +54,15 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     return this.inputReference.validity.valid;
   }
   setPattern() {
-    var _a;
+    var _a, _b;
     if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      return this.validation.custom.find(customValidation => customValidation.rule === 'regex').pattern;
+      return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
     }
   }
   setErrorMessage() {
+    var _a;
     if (this.inputReference.validity.patternMismatch) {
-      return this.validation.custom.find(customValidation => customValidation.rule === 'regex').errorMessage;
+      return (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorMessage;
     }
     if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
       return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });

package/dist/components/select-input2.js

@@ -54,6 +54,10 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   componentDidLoad() {
     this.inputReference = this.element.shadowRoot.querySelector('input');
+    if (this.defaultValue) {
+      this.value = this.defaultValue;
+      this.valueHandler({ name: this.name, value: this.value });
+    }
   }
   getOptions() {
     // TEMPORARY FOR DEMO PURPOSES UNTIL NORWAY CONFIGURES AN ACTUAL ENDPOINT...

package/dist/components/tel-input2.js

@@ -39,12 +39,18 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       if (this.action.split(" ")[0] == 'GET') {
         return this.getPhoneCodes().then((options) => {
           this.phoneCodesOptions = options.phoneCodes.map(code => {
-            return { label: code.Prefix, value: code.CountryID };
+            return { label: code.Prefix, value: code.Prefix };
           });
         });
       }
     }
   }
+  componentDidLoad() {
+    if (this.defaultValue) {
+      this.prefixValue = this.defaultValue;
+      this.valueHandler({ name: this.name, value: `${this.prefixValue}|` });
+    }
+  }
   getPhoneCodes() {
     // TEMPORARY FOR DEMO PURPOSES UNTIL NORWAY CONFIGURES AN ACTUAL ENDPOINT...
     const url = new URL("https://demo-api.stage.norway.everymatrix.com/v1/player/phonecodes");
@@ -60,7 +66,8 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     });
   }
   handleInput(event) {
-    this.value = event.target.value;
+    // Kinda hack? Open to suggestions.
+    this.value = `${this.prefixValue}|${event.target.value}`;
     this.errorMessage = this.setErrorMessage();
     this.isValid = this.setValidity();
     this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -70,14 +77,15 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return this.inputReference.validity.valid;
   }
   setPattern() {
-    var _a;
+    var _a, _b;
     if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      return this.validation.custom.find(customValidation => customValidation.rule === 'regex').pattern;
+      return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
     }
   }
   setErrorMessage() {
+    var _a;
     if (this.inputReference.validity.patternMismatch) {
-      return this.validation.custom.find(customValidation => customValidation.rule === 'regex').errorMessage;
+      return (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorMessage;
     }
     if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
       return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
@@ -88,7 +96,7 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'tel__input--invalid';
-    return h("div", { class: 'tel__wrapper' }, h("div", { class: 'tel__wrapper--flex' }, h("vaadin-combo-box", { items: this.phoneCodesOptions, value: this.defaultValue, readOnly: this.autofilled }), h("input", { type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, 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, onBlur: (e) => this.handleInput(e) })), h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("small", { class: 'tel__error-message' }, this.errorMessage));
+    return h("div", { class: 'tel__wrapper' }, h("div", { class: 'tel__wrapper--flex' }, h("vaadin-combo-box", { items: this.phoneCodesOptions, value: this.defaultValue, readOnly: this.autofilled, onBlur: (e) => this.prefixValue = e.target.value }), h("input", { type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, 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, onBlur: (e) => this.handleInput(e) })), h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("small", { class: 'tel__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -101,7 +109,7 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "showLabels": [4, "show-labels"],
     "action": [1],
     "validation": [16],
-    "defaultValue": [8, "default-value"],
+    "defaultValue": [1, "default-value"],
     "autofilled": [4],
     "language": [1],
     "emitValue": [4, "emit-value"],

package/dist/components/text-input2.js

@@ -36,10 +36,14 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.sendInputValue.emit(inputValueEvent);
   }
   connectedCallback() {
-    // @TODO do something with customRules !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-    this.customRules = this.setCustomRules();
     this.validationPattern = this.setPattern();
   }
+  componentDidLoad() {
+    if (this.defaultValue) {
+      this.value = this.defaultValue;
+      this.valueHandler({ name: this.name, value: this.value });
+    }
+  }
   handleInput(event) {
     this.value = event.target.value;
     this.isValid = this.setValidity();
@@ -58,14 +62,15 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   setPattern() {
-    var _a;
+    var _a, _b;
     if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      return this.validation.custom.find(customValidation => customValidation.rule === 'regex').pattern;
+      return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
     }
   }
   setErrorMessage() {
+    var _a;
     if (this.inputReference.validity.patternMismatch) {
-      return this.validation.custom.find(customValidation => customValidation.rule === 'regex').errorMessage;
+      return (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorMessage;
     }
     if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
       return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });

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

@@ -1,11 +1,11 @@
-import { r as registerInstance, c as createEvent, h as h$2, g as getElement } from './index-0505440f.js';
+import { r as registerInstance, c as createEvent, h as h$2, g as getElement } from './index-bb9c8eb3.js';
 
 const DEFAULT_LANGUAGE$1 = 'en';
 const SUPPORTED_LANGUAGES$1 = ['ro', 'en'];
 const TRANSLATIONS$1 = {
   en: {
     dateError: 'The selected date should be between {min} and {max}',
-    numberLengthError: 'The number 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',
@@ -58,6 +58,12 @@ const CheckboxInput = class {
   valueHandler(inputValueEvent) {
     this.sendInputValue.emit(inputValueEvent);
   }
+  componentDidLoad() {
+    if (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();
@@ -23052,6 +23058,10 @@ const DateInput = class {
   }
   componentDidLoad() {
     this.inputReference = this.element.shadowRoot.querySelector('input');
+    if (this.defaultValue) {
+      this.value = this.defaultValue;
+      this.valueHandler({ name: this.name, value: this.value });
+    }
   }
   handleInput(event) {
     this.value = event.target.value;
@@ -23111,6 +23121,12 @@ const EmailInput = class {
   connectedCallback() {
     this.validationPattern = this.setPattern();
   }
+  componentDidLoad() {
+    if (this.defaultValue) {
+      this.value = this.defaultValue;
+      this.valueHandler({ name: this.name, value: this.value });
+    }
+  }
   handleInput(event) {
     this.value = event.target.value;
     this.errorMessage = this.setErrorMessage();
@@ -23122,14 +23138,15 @@ const EmailInput = class {
     return this.inputReference.validity.valid;
   }
   setPattern() {
-    var _a;
+    var _a, _b;
     if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      return this.validation.custom.find(customValidation => customValidation.rule === 'regex').pattern;
+      return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
     }
   }
   setErrorMessage() {
+    var _a;
     if (this.inputReference.validity.patternMismatch) {
-      return this.validation.custom.find(customValidation => customValidation.rule === 'regex').errorMessage;
+      return (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorMessage;
     }
     if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
       return translate$2('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
@@ -23191,7 +23208,7 @@ 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}',
+    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',
@@ -23455,10 +23472,11 @@ const GeneralRegistration = class {
     this.isFormValid = !this.getInvalidStatus(this.listOfInputs);
   }
   getInputsValueHandler(event) {
-    this.listOfInputValues.find(input => input.name == event.detail.name).value = 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*/
+    this.listOfInputValues.find(input => {
+      if (input.name == event.detail.name) {
+        input.value = event.detail.value;
+      }
+    });
     this.stepsStateMachine({ event: 'set', type: 'values' });
   }
   componentWillLoad() {
@@ -23495,10 +23513,7 @@ const GeneralRegistration = class {
         }
         if (state.type == 'values') {
           this.registrationStepsState[this.registrationStep].registerUserData = this.listOfInputValues.reduce((acc, curr) => {
-            // @TODO remove this once GMCore is smart enough to understand the concept of UNIQUE KEYS
-            if (curr.value != null) {
-              acc[curr.name] = curr.value;
-            }
+            acc[curr.name] = curr.value;
             return acc;
           }, {});
         }
@@ -23530,9 +23545,6 @@ const GeneralRegistration = class {
   getRegisterConfig(registrationID) {
     const url = new URL(`${this.endpoint}/v1/player/legislation/registration/config`);
     const headers = new Headers();
-    // headers.append('X-Tenant-ID', this.tenantId);
-    // headers.append('X-Client-ID', this.clientId);
-    // headers.append('X-Api-Key', this.apiKey);
     headers.append('Content-Type', 'application/json');
     headers.append('Accept', 'application/json');
     if (registrationID) {
@@ -23562,8 +23574,12 @@ const GeneralRegistration = class {
     const registerStep = {
       registrationId: this.registrationID,
       registerUserDto: this.listOfInputValues.reduce((acc, curr) => {
-        // @TODO remove this once GMCore is smart enough to understand the concept of UNIQUE KEYS
-        if (curr.value != null) {
+        // Special case for "Mobile" as it needs to be split in two values -- API expects it this way.
+        if (curr.name == "Mobile") {
+          acc['MobilePrefix'] = curr.value.split('|')[0];
+          acc[curr.name] = curr.value.split('|')[1];
+        }
+        else {
           acc[curr.name] = curr.value;
         }
         return acc;
@@ -23571,9 +23587,6 @@ const GeneralRegistration = class {
       step: this.registrationStep,
     };
     const headers = new Headers();
-    // headers.append('X-Tenant-ID', this.tenantId);
-    // headers.append('X-Client-ID', this.clientId);
-    // headers.append('X-Api-Key', this.apiKey);
     headers.append('Content-Type', 'application/json');
     headers.append('Accept', 'application/json');
     const options = {
@@ -23613,19 +23626,8 @@ const GeneralRegistration = class {
     this.isLoading = true;
     const url = new URL(`${this.endpoint}/v1/player/legislation/register`);
     const headers = new Headers();
-    // headers.append('X-Tenant-ID', this.tenantId);
-    // headers.append('X-Client-ID', this.clientId);
-    // headers.append('X-Api-Key', this.apiKey);
     headers.append('Content-Type', 'application/json');
     headers.append('Accept', 'application/json');
-    // const registerStep = {
-    //   registrationId: this.registrationID,
-    //   registerUserDto: this.listOfInputValues.reduce((acc, curr) => {
-    //     acc[curr.name] = curr.value;
-    //     return acc;
-    //   }, {}),
-    //   step: this.registrationStep,
-    // };
     const options = {
       method: 'PUT',
       body: JSON.stringify({ registrationId: this.registrationID }),
@@ -23652,9 +23654,10 @@ const GeneralRegistration = class {
   }
   formatConfig(config) {
     // Populate the list of inputs and set as invalid in the beginning
-    this.listOfInputs = config.content.fields.map((field) => {
+    let newListOfInputs = config.content.fields.map((field) => {
       return Object.assign(Object.assign({}, field), { isValid: false });
     });
+    this.listOfInputs = JSON.parse(JSON.stringify(newListOfInputs));
     // Populate the list of inputs values and set as null in the beginning
     this.listOfInputValues = config.content.fields.map(field => {
       return { name: field.name, value: null };
@@ -23721,6 +23724,12 @@ const NumberInput = class {
   valueHandler(inputValueEvent) {
     this.sendInputValue.emit(inputValueEvent);
   }
+  componentDidLoad() {
+    if (this.defaultValue) {
+      this.value = this.defaultValue;
+      this.valueHandler({ name: this.name, value: this.value });
+    }
+  }
   handleInput(event) {
     this.value = event.target.value;
     this.errorMessage = this.setErrorMessage();
@@ -23784,6 +23793,12 @@ const PasswordInput = class {
   connectedCallback() {
     this.validationPattern = this.setPattern();
   }
+  componentDidLoad() {
+    if (this.defaultValue) {
+      this.value = this.defaultValue;
+      this.valueHandler({ name: this.name, value: this.value });
+    }
+  }
   handleInput(event) {
     this.value = event.target.value;
     this.errorMessage = this.setErrorMessage();
@@ -23795,14 +23810,15 @@ const PasswordInput = class {
     return this.inputReference.validity.valid;
   }
   setPattern() {
-    var _a;
+    var _a, _b;
     if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      return this.validation.custom.find(customValidation => customValidation.rule === 'regex').pattern;
+      return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
     }
   }
   setErrorMessage() {
+    var _a;
     if (this.inputReference.validity.patternMismatch) {
-      return this.validation.custom.find(customValidation => customValidation.rule === 'regex').errorMessage;
+      return (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorMessage;
     }
     if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
       return translate$2('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
@@ -28345,6 +28361,10 @@ const SelectInput = class {
   }
   componentDidLoad() {
     this.inputReference = this.element.shadowRoot.querySelector('input');
+    if (this.defaultValue) {
+      this.value = this.defaultValue;
+      this.valueHandler({ name: this.name, value: this.value });
+    }
   }
   getOptions() {
     // TEMPORARY FOR DEMO PURPOSES UNTIL NORWAY CONFIGURES AN ACTUAL ENDPOINT...
@@ -28421,12 +28441,18 @@ const TelInput = class {
       if (this.action.split(" ")[0] == 'GET') {
         return this.getPhoneCodes().then((options) => {
           this.phoneCodesOptions = options.phoneCodes.map(code => {
-            return { label: code.Prefix, value: code.CountryID };
+            return { label: code.Prefix, value: code.Prefix };
           });
         });
       }
     }
   }
+  componentDidLoad() {
+    if (this.defaultValue) {
+      this.prefixValue = this.defaultValue;
+      this.valueHandler({ name: this.name, value: `${this.prefixValue}|` });
+    }
+  }
   getPhoneCodes() {
     // TEMPORARY FOR DEMO PURPOSES UNTIL NORWAY CONFIGURES AN ACTUAL ENDPOINT...
     const url = new URL("https://demo-api.stage.norway.everymatrix.com/v1/player/phonecodes");
@@ -28442,7 +28468,8 @@ const TelInput = class {
     });
   }
   handleInput(event) {
-    this.value = event.target.value;
+    // Kinda hack? Open to suggestions.
+    this.value = `${this.prefixValue}|${event.target.value}`;
     this.errorMessage = this.setErrorMessage();
     this.isValid = this.setValidity();
     this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -28452,14 +28479,15 @@ const TelInput = class {
     return this.inputReference.validity.valid;
   }
   setPattern() {
-    var _a;
+    var _a, _b;
     if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      return this.validation.custom.find(customValidation => customValidation.rule === 'regex').pattern;
+      return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
     }
   }
   setErrorMessage() {
+    var _a;
     if (this.inputReference.validity.patternMismatch) {
-      return this.validation.custom.find(customValidation => customValidation.rule === 'regex').errorMessage;
+      return (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorMessage;
     }
     if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
       return translate$2('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
@@ -28470,7 +28498,7 @@ const TelInput = class {
   }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'tel__input--invalid';
-    return h$2("div", { class: 'tel__wrapper' }, h$2("div", { class: 'tel__wrapper--flex' }, h$2("vaadin-combo-box", { items: this.phoneCodesOptions, value: this.defaultValue, readOnly: this.autofilled }), h$2("input", { type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, 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, onBlur: (e) => this.handleInput(e) })), h$2("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$2("small", { class: 'tel__error-message' }, this.errorMessage));
+    return h$2("div", { class: 'tel__wrapper' }, h$2("div", { class: 'tel__wrapper--flex' }, h$2("vaadin-combo-box", { items: this.phoneCodesOptions, value: this.defaultValue, readOnly: this.autofilled, onBlur: (e) => this.prefixValue = e.target.value }), h$2("input", { type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, 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, onBlur: (e) => this.handleInput(e) })), h$2("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$2("small", { class: 'tel__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -28512,10 +28540,14 @@ const TextInput = class {
     this.sendInputValue.emit(inputValueEvent);
   }
   connectedCallback() {
-    // @TODO do something with customRules !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-    this.customRules = this.setCustomRules();
     this.validationPattern = this.setPattern();
   }
+  componentDidLoad() {
+    if (this.defaultValue) {
+      this.value = this.defaultValue;
+      this.valueHandler({ name: this.name, value: this.value });
+    }
+  }
   handleInput(event) {
     this.value = event.target.value;
     this.isValid = this.setValidity();
@@ -28534,14 +28566,15 @@ const TextInput = class {
     }
   }
   setPattern() {
-    var _a;
+    var _a, _b;
     if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      return this.validation.custom.find(customValidation => customValidation.rule === 'regex').pattern;
+      return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
     }
   }
   setErrorMessage() {
+    var _a;
     if (this.inputReference.validity.patternMismatch) {
-      return this.validation.custom.find(customValidation => customValidation.rule === 'regex').errorMessage;
+      return (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorMessage;
     }
     if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
       return translate$2('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });

package/dist/esm/general-registration.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-0505440f.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-bb9c8eb3.js';
 
 /*
  Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["checkbox-input_11",[[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],"registrationStep":[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],"autofilled":[4],"defaultValue":[8,"default-value"],"emitValue":[4,"emit-value"]}],[1,"checkbox-input",{"name":[1],"displayName":[1,"display-name"],"defaultValue":[1,"default-value"],"autofilled":[4],"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"],"autofilled":[4],"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"],"autofilled":[4],"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"],"autofilled":[4],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"password-input",{"name":[1],"displayName":[1,"display-name"],"defaultValue":[1,"default-value"],"autofilled":[4],"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],"defaultValue":[1,"default-value"],"autofilled":[4],"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"],"autofilled":[4],"language":[1],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}],[1,"text-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"autofilled":[4],"rules":[1],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}]]]], options);
+  return bootstrapLazy([["checkbox-input_11",[[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],"registrationStep":[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],"autofilled":[4],"defaultValue":[8,"default-value"],"emitValue":[4,"emit-value"]}],[1,"checkbox-input",{"name":[1],"displayName":[1,"display-name"],"defaultValue":[1,"default-value"],"autofilled":[4],"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"],"autofilled":[4],"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"],"autofilled":[4],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"number-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"autofilled":[4],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"password-input",{"name":[1],"displayName":[1,"display-name"],"defaultValue":[1,"default-value"],"autofilled":[4],"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],"defaultValue":[1,"default-value"],"autofilled":[4],"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":[1,"default-value"],"autofilled":[4],"language":[1],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}],[1,"text-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"autofilled":[4],"rules":[1],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}]]]], options);
 });

package/dist/esm/{index-0505440f.js → index-bb9c8eb3.js}

@@ -765,10 +765,6 @@ const parsePropertyValue = (propValue, propType) => {
             // but we'll cheat here and say that the string "false" is the boolean false
             return propValue === 'false' ? false : propValue === '' || !!propValue;
         }
-        if (propType & 2 /* Number */) {
-            // force it to be a number
-            return parseFloat(propValue);
-        }
         if (propType & 1 /* String */) {
             // could have been passed as a number or boolean
             // but we still want it as a string