@everymatrix/general-registration-multistep 0.0.1

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

@@ -0,0 +1,1470 @@
+import { h } from "@stencil/core";
+import { getTranslations, translate, TRANSLATIONS, DEFAULT_LANGUAGE, extractBirthDate, CONSTANTS } from "../../utils/locale.utils";
+import { dispatchCustomEvent } from "../../../../../../../../libs/custom-events/src/index";
+import { checkEmptyValue } from "../../../../../../../../libs/common/src/utils/index";
+import "../../../../../general-input/dist/types/index";
+import "../../../../../../svelte/player-consents/es2015/player-consents";
+export class GeneralRegistrationMultistep {
+    constructor() {
+        this.isSelectingAddress = false;
+        this.lastPostalCode = null;
+        this.pinAttemptsExceeded = false;
+        this.documentIdNineDigits = false;
+        this.selectedCountry = '';
+        this.listOfInputValues = [];
+        this.listOfInputValidity = [];
+        this.listOfActions = [];
+        this.listOfInputs = [];
+        this.conditionalValidationMap = {};
+        this.lastStep = '';
+        this.emitValue = false;
+        this.form = null;
+        this.errorCode = '';
+        this.backButtonPressed = false;
+        this.registerErrors = false;
+        this.extraActions = [];
+        this.registerCredentialsEvent = null;
+        this.twofaDestination = '';
+        this.postalcodelength = 5;
+        this.registrationStepsState = {
+            regId: null
+        };
+        this.getIgnoreCountry = (input) => {
+            return input.name === 'PostalCode' && this.haspostalcodelookup && !this.listOfInputs.some(i => i.name === 'CountryCode');
+        };
+        this.getStepClass = (step) => {
+            if (this.currentStep === step)
+                return "bullet active";
+            if (this.currentStep > step)
+                return "bullet checked";
+            return "bullet";
+        };
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.host.shadowRoot.prepend(sheet);
+        };
+        this.setClientStylingURL = () => {
+            let url = new URL(this.clientStylingUrl);
+            let cssFile = document.createElement('style');
+            fetch(url.href)
+                .then((res) => res.text())
+                .then((data) => {
+                cssFile.innerHTML = data;
+                this.clientStyling = data;
+                setTimeout(() => { this.host.shadowRoot.prepend(cssFile); }, 1);
+            });
+        };
+        this.setStreamStyling = (domain) => {
+            if (window.emMessageBus) {
+                const sheet = document.createElement('style');
+                this.stylingSubscription = window.emMessageBus.subscribe(domain, (data) => {
+                    sheet.innerHTML = data;
+                    this.clientStyling = data;
+                    this.host.shadowRoot.prepend(sheet);
+                });
+            }
+        };
+        // handles sending a custom event for initial interaction with the registration form
+        this.handleInitialClick = (e) => {
+            if (!this.isInitalInteraction)
+                return;
+            dispatchCustomEvent('register_start', { field: e.target.name });
+            this.isInitalInteraction = false;
+        };
+        this.endpoint = undefined;
+        this.language = 'en';
+        this.clientStyling = '';
+        this.mbSource = undefined;
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.dateFormat = undefined;
+        this.buttonInsideForm = undefined;
+        this.btag = null;
+        this.emitOnClick = false;
+        this.haspostalcodelookup = false;
+        this.ignorebtag = false;
+        this.enableSouthAfricanMode = true;
+        this.errorMessage = '';
+        this.isFormValid = false;
+        this.isConsentValid = false;
+        this.isConsentReady = false;
+        this.isLoading = true;
+        this.isLoadingPOST = false;
+        this.registrationStep = '';
+        this.forms = {};
+        this.limitStylingAppends = false;
+        this.autofilled = false;
+        this.isInitalInteraction = true;
+        this.addresses = [];
+        this.addressUpdateKey = 0;
+        this.currentStep = 1;
+    }
+    sendStep() {
+        this.registrationStepUpdated.emit(this.registrationStep);
+        window.postMessage({ type: 'registrationStepUpdated', step: this.registrationStep }, window.location.href);
+        const stepNum = Number(this.registrationStep.replace('Step', ''));
+        this.currentStep = stepNum;
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
+    }
+    handleStylingUrlChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStylingURL();
+    }
+    setFormValidity() {
+        this.errorMessage = '';
+        if (this.listOfInputValidity) {
+            this.isFormValid = !this.getInvalidStatus(this.listOfInputValidity);
+        }
+        //Check for autofilled.
+        if (this.listOfInputs.some(inputs => inputs.autofill)) {
+            this.autofilled = true;
+        }
+    }
+    addBtag() {
+        this.addBtagValue();
+    }
+    checkInputsValidityHandler(event) {
+        this.listOfInputValidity.find(input => input.name == event.detail.name).isValid = event.detail.valid;
+        // Check if any one is invalid.
+        this.isFormValid = !this.getInvalidStatus(this.listOfInputValidity);
+    }
+    getInputsValueHandler(event) {
+        var _a, _b, _c, _d;
+        this.listOfInputValues.find(input => {
+            if (input.name == event.detail.name) {
+                input.value = event.detail.value;
+                input.type = event.detail.type || null;
+            }
+        });
+        // ---- Document type and document id logic - New custom registration for SA ---- //
+        const { name, value } = event.detail;
+        // Check SA identity id if valid
+        if (name === CONSTANTS.DOCUMENT_TYPE) {
+            let type = event.detail.value;
+            if ((type || "").replace(CONSTANTS.REMOVE_WHITESPACE_REGEX, "").toLowerCase() === CONSTANTS.IDENTITY_CARD_NORMALIZED) {
+                type = CONSTANTS.SOUTH_AFRICAN_ID;
+            }
+            window.documentTypeValue = type;
+            const docField = this.listOfInputValues.find(i => i.name === CONSTANTS.DOCUMENT_NUMBER);
+            if (docField)
+                docField.value = "";
+            const docValidity = this.listOfInputValidity.find(v => v.name === CONSTANTS.DOCUMENT_NUMBER);
+            if (docValidity)
+                docValidity.isValid = false;
+            window.dispatchEvent(new CustomEvent("documentNumberUpdatedExternally", { detail: "" }));
+            window.dispatchEvent(new CustomEvent("documentNumberResetValidation"));
+            return;
+        }
+        const docType = window.documentTypeValue;
+        // Check if Passport value length and dispatch events to modify the birth date value
+        if (name === CONSTANTS.DOCUMENT_NUMBER && docType === CONSTANTS.PASSPORT) {
+            if (value.length === 8 || value.length === 9) {
+                const extractedBirthDate = extractBirthDate(value);
+                window.dispatchEvent(new CustomEvent('documentIdUpdated', { detail: extractedBirthDate || '' }));
+                this.documentIdNineDigits = true;
+            }
+            else {
+                if (this.documentIdNineDigits) {
+                    window.dispatchEvent(new CustomEvent('documentIdUpdated', { detail: '' }));
+                }
+                this.documentIdNineDigits = false;
+            }
+        }
+        // If number starts with '0', remove it
+        if (name === CONSTANTS.MOBILE) {
+            const rawVal = (_b = (_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : {};
+            const phoneRaw = typeof rawVal.phone === "string" ? rawVal.phone : "";
+            let phone = phoneRaw;
+            if (phone.startsWith("0")) {
+                phone = phone.slice(1);
+            }
+            const mobileField = this.listOfInputValues.find(i => i.name === CONSTANTS.MOBILE);
+            if (mobileField) {
+                mobileField.value = {
+                    prefix: (_c = rawVal.prefix) !== null && _c !== void 0 ? _c : "",
+                    phone
+                };
+            }
+        }
+        // ---- Postal code lookup logic ---- //
+        if (this.haspostalcodelookup) {
+            const { name, value } = event.detail;
+            if (name === 'CountryCode') {
+                this.selectedCountry = value;
+                if (value === 'GB') {
+                    this.selectedCountry = 'UK';
+                }
+                this.resetAllAddressFields();
+                window.dispatchEvent(new CustomEvent('countryCodeUpdated', { detail: { name, value: this.selectedCountry } }));
+            }
+            if (name === 'PostalCode') {
+                if (!this.listOfInputs.some(i => i.name === 'CountryCode')) {
+                    this.selectedCountry = 'UK';
+                }
+                if (!this.isSelectingAddress && this.addresses.length > 0 && value !== this.lastPostalCode) {
+                    this.addresses = [];
+                }
+                if (value.length >= this.postalcodelength) {
+                    if (this.isSelectingAddress) {
+                        return;
+                    }
+                    const shouldFetch = !this.lastPostalCode ||
+                        this.lastPostalCode !== value ||
+                        this.addresses.length === 0;
+                    if (shouldFetch) {
+                        const country = this.selectedCountry ||
+                            ((_d = this.listOfInputValues.find(i => i.name === 'CountryCode')) === null || _d === void 0 ? void 0 : _d.value) || '';
+                        if (this.selectedCountry === 'GB' || this.selectedCountry === 'UK') {
+                            if (this.addrDebounce)
+                                clearTimeout(this.addrDebounce);
+                            this.addrDebounce = setTimeout(() => {
+                                this.fetchAddresses(country, value);
+                            }, 500);
+                        }
+                        this.lastPostalCode = value;
+                    }
+                }
+                else if (value.length < this.postalcodelength) {
+                    this.addresses = [];
+                    this.lastPostalCode = null;
+                }
+            }
+        }
+        this.stepsStateMachine({ event: 'set', type: 'values' });
+        this.handleConditionalValidation(event.detail.name, event.detail.value);
+    }
+    handleAddressSelection(event) {
+        const { city, address1, address2 } = event.detail;
+        // Update input values
+        this.listOfInputValues = this.listOfInputValues.map(input => {
+            if (input.name === 'address1')
+                return Object.assign(Object.assign({}, input), { value: address1 || '' });
+            if (input.name === 'address2')
+                return Object.assign(Object.assign({}, input), { value: address2 || '' });
+            if (input.name === 'City')
+                return Object.assign(Object.assign({}, input), { value: city || '' });
+            return input;
+        });
+        if (this.forms[this.registrationStep]) {
+            this.forms[this.registrationStep] = this.forms[this.registrationStep].map(input => {
+                if (input.name === 'address1')
+                    return Object.assign(Object.assign({}, input), { defaultValue: address1 });
+                if (input.name === 'address2')
+                    return Object.assign(Object.assign({}, input), { defaultValue: address2 });
+                if (input.name === 'City')
+                    return Object.assign(Object.assign({}, input), { defaultValue: city });
+                return input;
+            });
+        }
+        // force re-render
+        this.addressUpdateKey = Date.now();
+        this.forms = Object.assign({}, this.forms);
+        this.stepsStateMachine({ event: 'set', type: 'values' });
+        this.isFormValid = !this.getInvalidStatus(this.listOfInputValidity);
+        this.isSelectingAddress = false;
+    }
+    handleCountryCodeUpdateGlobal(event) {
+        const { name } = event.detail;
+        if (name === 'CountryCode') {
+            const savedState = localStorage.getItem('registrationStepsState');
+            if (savedState) {
+                const parsedState = JSON.parse(savedState);
+                Object.keys(parsedState).forEach(stepKey => {
+                    if (parsedState[stepKey] && parsedState[stepKey].registerUserData) {
+                        ['address1', 'address2', 'City', 'PostalCode'].forEach(field => {
+                            if (parsedState[stepKey].registerUserData[field]) {
+                                parsedState[stepKey].registerUserData[field].value = '';
+                            }
+                        });
+                    }
+                });
+                localStorage.setItem('registrationStepsState', JSON.stringify(parsedState));
+            }
+        }
+    }
+    handleRequestTwofa() {
+        if (!this.twofaDestination)
+            return;
+        const url = new URL(`${this.endpoint}/api/v1/gm/legislation/twoFaCode/`);
+        const headers = new Headers({
+            'Content-Type': 'application/problem+json; charset=utf-8'
+        });
+        const body = JSON.stringify({
+            channel: 'Sms',
+            destination: this.twofaDestination
+        });
+        const options = { method: 'POST', headers, body };
+        fetch(url.href, options)
+            .then(res => {
+            if (res.ok)
+                return;
+            res.json().then(err => {
+                var _a;
+                const errorCode = (_a = err.thirdPartyResponse) === null || _a === void 0 ? void 0 : _a.errorCode;
+                this.errorMessage = translate(errorCode, this.language) || translate('requestTwofaError', this.language);
+            });
+        })
+            .catch((err) => console.log(err));
+    }
+    messageHandler(e) {
+        //Handle Consents Message
+        if (!e.data)
+            return;
+        switch (e.data.type) {
+            case 'isConsentsValid':
+                this.listOfInputValidity.find((input) => input.name === "Consents").isValid = e.data.isValid;
+                this.isConsentValid = e.data.isValid;
+                this.isFormValid = !this.getInvalidStatus(this.listOfInputValidity);
+                break;
+        }
+    }
+    handleBirthDateUpdated(event) {
+        var _a;
+        const dob = event.detail.birthDate;
+        const docType = (_a = this.listOfInputValues.find(i => i.name === CONSTANTS.DOCUMENT_TYPE)) === null || _a === void 0 ? void 0 : _a.value;
+        if (docType !== CONSTANTS.PASSPORT)
+            return;
+        const docField = this.listOfInputValues.find(i => i.name === CONSTANTS.DOCUMENT_NUMBER);
+        if (!dob) {
+            docField.value = "";
+            window.dispatchEvent(new CustomEvent('documentNumberUpdatedExternally', { detail: "" }));
+            return;
+        }
+        const formatted = dob.replace(CONSTANTS.DATE_DASH_SEPARATOR_REGEX, "");
+        const prefix = formatted.slice(2);
+        if (docField.value && docField.value.length >= 6) {
+            docField.value = prefix + docField.value.slice(6);
+        }
+        else {
+            docField.value = prefix;
+        }
+        window.dispatchEvent(new CustomEvent('documentNumberUpdatedExternally', { detail: docField.value }));
+    }
+    componentWillLoad() {
+        return this.getRegisterConfig()
+            .then((config) => {
+            this.formatConfig(config);
+            this.isFormValid = !this.getInvalidStatus(this.listOfInputValidity);
+            this.stepsStateMachine({ event: 'set', type: 'inputs' });
+            this.setupConditionalValidationMap();
+        }, (err) => {
+            console.error(err);
+        });
+    }
+    componentDidLoad() {
+        this.registrationWidgetLoaded.emit();
+        window.postMessage({ type: 'registrationWidgetLoaded' }, window.location.href);
+        if (!this.limitStylingAppends && this.host) {
+            if (window.emMessageBus != undefined) {
+                this.setStreamStyling(`${this.mbSource}.Style`);
+            }
+            else {
+                if (this.clientStyling)
+                    this.setClientStyling();
+                if (this.clientStylingUrl)
+                    this.setClientStylingURL();
+                this.limitStylingAppends = true;
+            }
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    /**
+     * This function produces the conditionalValidationMap object presented below
+     *
+     *  this.conditionalValidationMap =
+     * {
+     *    correlationField: {
+     *      correlationValue: {
+     *          field: {
+     *            ...validation
+     *          },
+     *          ...
+     *      },
+     *      ...
+     *    },
+     *    ...
+     * }
+     *
+     *  - this object describes the conditional validation of some fields based on the value of others.
+     *  - correlationField is the conditioning field, correlationValue is the value of the correlationField for which
+     *  a certain validation is applied to the affected fields. {...validation} is an object of type ValidationSchema
+     */
+    setupConditionalValidationMap() {
+        for (const input of this.listOfInputs) {
+            // unconditioned rules (i.e correlationField and corrlationValue == null)
+            const staticRules = [];
+            // conditional rules
+            const conditionalRules = [];
+            for (const rule of input.validate.custom) {
+                if (!rule.correlationField || !rule.correlationValue) {
+                    staticRules.push(rule);
+                    continue;
+                }
+                conditionalRules.push(rule);
+            }
+            for (const rule of conditionalRules) {
+                if (rule.rule === 'regex') {
+                    /**
+                     * copy the original validation, replace the original "custom" rules (which contain all conditional rules)
+                     * with only one conditional rule + all static rules, resulting in the validation for ${input} when
+                     * ${rule.correlationField} takes value ${rule.correlationValue}
+                     */
+                    const validate = Object.assign({}, input.validate);
+                    validate.custom = [...staticRules, rule];
+                    const cf = rule.correlationField;
+                    const cv = rule.correlationValue;
+                    // assign new validation to ${input}
+                    this.conditionalValidationMap[cf] = this.conditionalValidationMap[cf] || {};
+                    this.conditionalValidationMap[cf][cv] = this.conditionalValidationMap[cf][cv] || {};
+                    this.conditionalValidationMap[cf][cv][input.name] = validate;
+                }
+            }
+        }
+    }
+    /**
+     *  Whenever a field changes its value, we check if it is conditioning any other fields and
+     *  if it is we update the validation of the affected fields.
+     */
+    handleConditionalValidation(correlationField, correlationValue) {
+        if (!this.conditionalValidationMap[correlationField] ||
+            !this.conditionalValidationMap[correlationField][correlationValue]) {
+            return;
+        }
+        for (const [field, validation] of Object.entries(this.conditionalValidationMap[correlationField][correlationValue])) {
+            const registrationStepIdx = this.registrationStep && parseInt(this.registrationStep.replace('Step', '')) - 1;
+            if (this.forms[registrationStepIdx]) {
+                this.forms[registrationStepIdx][this.registrationStep].find(item => item.name === field).validate = validation;
+                this.validationChange.emit({ validation, field });
+            }
+        }
+    }
+    nextHandler(e) {
+        e.preventDefault();
+        this.emitValue = true;
+        this.errorMessage = '';
+        this.registerErrors = false;
+        this.setRegisterStep();
+    }
+    backHandler(e) {
+        e.preventDefault();
+        this.registrationStep = this.stepChange('decrement');
+        this.errorMessage = '';
+        this.stepsStateMachine({ event: 'get', type: 'inputs' });
+        this.stepsStateMachine({ event: 'get', type: 'values' });
+    }
+    dispatchRegisterCredentialsEvent() {
+        let userNameEmail = '';
+        let userPassword = '';
+        Object.keys(this.registrationStepsState).forEach((step) => {
+            if (!this.registrationStepsState[step]['registerUserData'])
+                return;
+            if (!userNameEmail) {
+                userNameEmail = this.registrationStepsState[step]['registerUserData']['Email']
+                    ? this.registrationStepsState[step]['registerUserData']['Email']['value']
+                    : userNameEmail;
+            }
+            if (!userPassword) {
+                userPassword = this.registrationStepsState[step]['registerUserData']['Password']
+                    ? this.registrationStepsState[step]['registerUserData']['Password']['value']
+                    : userPassword;
+            }
+        });
+        this.registerCredentialsEvent = new CustomEvent('RegisterCredentials', {
+            bubbles: true,
+            detail: {
+                userNameEmail: userNameEmail,
+                userPassword: userPassword
+            }
+        });
+        window.dispatchEvent(this.registerCredentialsEvent);
+    }
+    stepsStateMachine(state) {
+        var _a;
+        const saveToLocalStorage = () => {
+            localStorage.setItem('registrationStepsState', JSON.stringify(this.registrationStepsState));
+        };
+        const loadFromLocalStorage = () => {
+            return JSON.parse(localStorage.getItem('registrationStepsState'));
+        };
+        switch (state.event) {
+            case 'set':
+                if (state.type == 'inputs') {
+                    // Store input-related data into the current step state
+                    const currentStep = this.registrationStepsState[this.registrationStep];
+                    currentStep.fields = this.listOfInputs;
+                    currentStep.actions = this.listOfActions;
+                    currentStep.fieldsValidity = this.listOfInputValidity;
+                }
+                if (state.type == 'values') {
+                    // Map input values into the current step state
+                    const currentStep = this.registrationStepsState[this.registrationStep];
+                    currentStep.registerUserData = this.listOfInputValues.reduce((acc, curr) => {
+                        acc[curr.name] = { value: curr.value, isDuplicate: curr.isDuplicate };
+                        return acc;
+                    }, {});
+                }
+                saveToLocalStorage();
+                break;
+            case 'get':
+                const savedUserData = loadFromLocalStorage();
+                if (!savedUserData)
+                    return;
+                if (state.type == 'inputs') {
+                    // Load input-related data from the saved state
+                    const currentStep = this.registrationStepsState[this.registrationStep];
+                    this.listOfInputs = currentStep.fields;
+                    this.listOfActions = currentStep.actions;
+                    this.listOfInputValidity = currentStep.fieldsValidity;
+                }
+                if (state.type == 'values') {
+                    const savedValues = savedUserData[this.registrationStep].registerUserData;
+                    // Convert saved values to the expected format for inputs
+                    this.listOfInputValues = Object.keys(savedValues).map(name => {
+                        return { name, value: savedValues[name].value, isDuplicate: savedValues[name].isDuplicate };
+                    });
+                    // Set the right documentTypeValue when the step is loaded
+                    let docType = (_a = this.listOfInputValues.find(i => i.name === CONSTANTS.DOCUMENT_TYPE)) === null || _a === void 0 ? void 0 : _a.value;
+                    if (docType === CONSTANTS.IDENTITY_CARD)
+                        docType = CONSTANTS.SOUTH_AFRICAN_ID;
+                    window.documentTypeValue = docType;
+                    // Give to each field the user input as the default value.
+                    this.listOfInputValues.forEach(inputValue => {
+                        const input = this.listOfInputs.find(input => input.name === inputValue.name);
+                        if (input) {
+                            input.defaultValue = inputValue.value;
+                            // if the input is a togglecheckbox, set the default value for each subfield.
+                            if (input.inputType === 'togglecheckbox') {
+                                input.data.subFields.forEach((subfield) => {
+                                    const subfieldValue = this.listOfInputValues.find(subfieldValue => subfieldValue.name === subfield.name);
+                                    subfield.defaultValue = subfieldValue.value;
+                                });
+                            }
+                        }
+                    });
+                }
+                this.isConsentReady = this.listOfActions.some(action => action === '/Consents');
+                this.isFormValid = !this.getInvalidStatus(this.listOfInputValidity);
+                break;
+        }
+    }
+    triggerNotification(errMsg, errType = 'WidgetNotification') {
+        window.postMessage({
+            type: errType,
+            data: {
+                type: 'error',
+                message: errMsg
+            }
+        }, window.location.href);
+    }
+    getRegisterConfig(registrationID) {
+        const url = new URL(`${this.endpoint}/v1/player/legislation/registration/config/`);
+        const headers = new Headers();
+        headers.append('Content-Type', 'application/json');
+        headers.append('Accept', 'application/json');
+        if (registrationID) {
+            url.searchParams.append('registrationId', registrationID);
+        }
+        const options = {
+            method: 'GET',
+            headers
+        };
+        return new Promise((resolve, reject) => {
+            this.isLoading = true;
+            fetch(url.href, options)
+                .then((res) => {
+                if (!res.ok) {
+                    this.registerErrors = true;
+                    return res.json().then(error => {
+                        this.errorCode = error.thirdPartyResponse.errorCode;
+                        this.errorMessage = translate(`${this.errorCode}`, this.language) || translate(`generalError`, this.language);
+                        this.triggerNotification(this.errorMessage);
+                    });
+                }
+                return res.json();
+            })
+                .then((config) => {
+                this.isLoading = false;
+                if (!config) {
+                    return reject('Get register config is empty or has an error.');
+                }
+                return resolve(config);
+            }, (err) => {
+                console.error('Get register config is empty or has an error: ', err);
+                return reject(err);
+            }).finally(() => {
+                this.isLoading = false;
+            });
+        });
+    }
+    setRegisterStep() {
+        this.isLoadingPOST = true;
+        const url = new URL(`${this.endpoint}/v1/player/legislation/registration/step/`);
+        const registerStep = {
+            registrationId: this.registrationID,
+            registerUserDto: this.listOfInputValues
+                .filter(input => !input.isDuplicate)
+                .reduce((acc, curr) => {
+                // Because the API is very robust, some values need to be split as separate entities.
+                if (curr.name === 'TypeOfPublicArea') {
+                    acc[curr.name] = curr.value.toLowerCase();
+                }
+                else if (curr.type === 'tel') {
+                    //@ts-ignore
+                    acc['MobilePrefix'] = curr.value.prefix;
+                    //@ts-ignore
+                    acc[curr.name] = curr.value.phone;
+                }
+                else if (curr.type === 'checkboxgroup') {
+                    // Skip adding the parent of the checkboxgroup as a key.
+                    if (curr.value !== null) {
+                        Object.entries(curr.value).forEach(([key, value]) => {
+                            acc[key] = value ? 'true' : 'false';
+                        });
+                    }
+                }
+                else if (curr.type === 'toggle') {
+                    acc[curr.name] = curr.value ? 'true' : 'false';
+                }
+                else {
+                    acc[curr.name] = curr.value;
+                }
+                return acc;
+            }, {}),
+            step: this.registrationStep,
+        };
+        const headers = new Headers();
+        headers.append('Content-Type', 'application/json');
+        headers.append('Accept', 'application/json');
+        const options = {
+            method: 'POST',
+            body: JSON.stringify(registerStep),
+            headers
+        };
+        if (this.lastStep === this.registrationStep) {
+            dispatchCustomEvent('register_submit', { registrationId: this.registrationID });
+        }
+        fetch(url.href, options)
+            .then((res) => {
+            if (!res.ok) {
+                return res.json().then(error => {
+                    this.errorCode = error.thirdPartyResponse.errorCode;
+                    // Show the idomsoft error if it is the case
+                    if (this.errorCode == 'GmErr_BadRequest_IdomsoftVerification_ShouldRetry') {
+                        this.errorMessage = error.thirdPartyResponse.message;
+                    }
+                    else if (this.errorCode === 'GmErr_Forbidden_UserAccount_NavExcluded') {
+                        this.errorMessage = translate(`${this.errorCode}`, this.language);
+                    }
+                    else if (this.errorCode == 'GmErr_BadRequest') {
+                        this.errorMessage = error.thirdPartyResponse.message;
+                        if (error.thirdPartyResponse.message == CONSTANTS.THIRDPARTY_SMS_ERROR) {
+                            this.errorMessage = translate('GmErr_BadRequest_INVALID_CODE', this.language);
+                        }
+                    }
+                    else if (this.errorCode == 'GmErr_ATTEMPTS_EXCEEDED') {
+                        this.pinAttemptsExceeded = true;
+                        this.errorMessage = translate(this.errorCode, this.language);
+                    }
+                    else {
+                        this.errorMessage = translate(`${this.errorCode}`, this.language) || translate(`generalError`, this.language);
+                    }
+                    this.triggerNotification(this.errorMessage);
+                    return Promise.reject(this.errorMessage);
+                });
+            }
+            // handles sending custom events and the requested data for each registration step
+            if (this.registrationStep === 'Step1') {
+                const eventData = {
+                    // @ts-ignore
+                    IBAN: registerStep.registerUserDto.IBAN,
+                    // @ts-ignore
+                    username: registerStep.registerUserDto.Username,
+                };
+                dispatchCustomEvent('register_step1', { eventLabel: this.registrationStep, eventAction: 'nextStep', eventCategory: 'Registration', eventData: eventData });
+            }
+            else if (this.registrationStep === 'Step2') {
+                const eventData = {
+                    // @ts-ignore
+                    gender: registerStep.registerUserDto.Gender,
+                    // @ts-ignore
+                    fullName: `${registerStep.registerUserDto.FirstnameOnDocument} ${registerStep.registerUserDto.LastNameOnDocument}`,
+                    // @ts-ignore
+                    city: registerStep.registerUserDto.City
+                };
+                dispatchCustomEvent('register_step2', { eventLabel: this.registrationStep, eventAction: 'nextStep', eventCategory: 'Registration', eventData: eventData });
+            }
+            else if (this.registrationStep === 'Step3') {
+                const eventData = {
+                    // @ts-ignore
+                    OIB: registerStep.registerUserDto.PersonalID,
+                    // @ts-ignore
+                    documentType: registerStep.registerUserDto.DocumentType,
+                };
+                dispatchCustomEvent('register_step3', { eventLabel: this.registrationStep, eventAction: 'nextStep', eventCategory: 'Registration', eventData: eventData });
+            }
+            return res.json();
+        })
+            .then((data) => {
+            this.isLoadingPOST = false;
+            this.registrationID = data.registrationId;
+            if (this.listOfActions.find(action => action === '/request-2FA')) {
+                this.twofaDestination = Object.values(this.listOfInputValues.find(item => item.type === 'tel').value).join('');
+                this.handleRequestTwofa();
+            }
+            if (this.listOfActions.some(action => action == '/register')) {
+                if (this.listOfActions.some(action => action == '/generate-2FA-code/Generate2FACode')) {
+                    this.extraActions.push('2fa');
+                }
+                if (localStorage.getItem('playerConsents')) {
+                    localStorage.removeItem("playerConsents");
+                }
+                this.setRegister();
+            }
+            else {
+                if (this.isConsentValid) {
+                    window.postMessage({ type: 'setUpPlayerConsents', registerid: this.registrationID });
+                }
+                // After sending the current step, increment and check if the next one is in state.
+                this.registrationStep = this.stepChange('increment');
+                // If step is present in state do NOT fetch the next config.
+                if (Object.keys(this.registrationStepsState).find(key => key == this.registrationStep)) {
+                    // Use the one from state
+                    this.stepsStateMachine({ event: 'get', type: 'inputs' });
+                    this.stepsStateMachine({ event: 'get', type: 'values' });
+                }
+                else {
+                    this.getRegisterConfig(this.registrationID).then((config) => {
+                        // Format the new step config.
+                        this.formatConfig(config);
+                        // Set it in local storage.
+                        this.stepsStateMachine({ event: 'set', type: 'inputs' });
+                        // Setup conditionalValidationMap
+                        this.setupConditionalValidationMap();
+                    }, (err) => {
+                        // Only send the error to user because this.getRegisterConfig already has proper error logging
+                        this.triggerNotification(err);
+                    });
+                }
+            }
+        })
+            .catch((err) => {
+            this.isLoadingPOST = false;
+            console.error(err);
+        }).finally(() => {
+            this.isLoadingPOST = false;
+        });
+    }
+    setRegister() {
+        this.isLoading = true;
+        this.registerErrors = false;
+        const url = new URL(`${this.endpoint}/v1/player/legislation/register/`);
+        const headers = new Headers();
+        headers.append('Content-Type', 'application/json');
+        headers.append('Accept', 'application/json');
+        const options = {
+            method: 'PUT',
+            body: JSON.stringify({ registrationId: this.registrationID }),
+            headers
+        };
+        fetch(url.href, options)
+            .then((res) => {
+            if (!res.ok) {
+                this.registerErrors = true;
+                return res.json().then(error => {
+                    this.errorCode = error.thirdPartyResponse.errorCode;
+                    // Show the idomsoft error if it is the case
+                    if (this.errorCode == 'GmErr_BadRequest_IdomsoftVerification_ShouldRetry') {
+                        this.errorMessage = error.thirdPartyResponse.message;
+                    }
+                    else if (this.errorCode == 'GmErr_BadRequest') {
+                        this.errorMessage = error.thirdPartyResponse.message;
+                    }
+                    else {
+                        this.errorMessage = translate(`${this.errorCode}`, this.language) || translate(`generalError`, this.language);
+                    }
+                    window.postMessage({ type: 'registrationFailed', errorMessage: error === null || error === void 0 ? void 0 : error.thirdPartyResponse.message }, window.location.href);
+                    this.triggerNotification(this.errorMessage);
+                    dispatchCustomEvent('register_fail', { error: this.errorMessage });
+                });
+            }
+            return res.json();
+        })
+            .then((data) => {
+            this.isLoading = false;
+            if (!this.registerErrors) {
+                this.dispatchRegisterCredentialsEvent();
+                window.postMessage({ type: 'registrationSuccessful', userId: data === null || data === void 0 ? void 0 : data.userId, extraActions: this.extraActions }, window.location.href);
+                window.postMessage({
+                    type: 'WidgetNotification', data: {
+                        type: 'success',
+                        message: translate('successMessage', this.language)
+                    }
+                }, window.location.href);
+                dispatchCustomEvent('register_closed', { userId: data.userId });
+            }
+        })
+            .catch((err) => {
+            this.isLoading = false;
+            console.error(err);
+        })
+            .finally(() => {
+            this.isLoading = false;
+        });
+    }
+    formatConfig(config) {
+        this.listOfInputs = config.content.fields.flatMap((field) => {
+            const duplicateInputRule = field.validate.custom.find(customRule => customRule.rule === 'duplicate-input');
+            const inputElement = Object.assign({}, field);
+            if (duplicateInputRule) {
+                const duplicateInput = Object.assign(Object.assign({}, field), { name: `${field.name}Duplicate`, displayName: duplicateInputRule.displayName, isDuplicateInput: true });
+                return [inputElement, duplicateInput];
+            }
+            else {
+                return [inputElement];
+            }
+        });
+        this.listOfInputValidity = this.listOfInputs.reduce((acc, field) => {
+            var _a;
+            // If the field is a togglecheckbox, add its subfields
+            if (((_a = field.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "togglecheckbox") {
+                field.data.subFields.forEach(subfield => {
+                    acc.push({
+                        name: subfield.name,
+                        isValid: this.setInitialValidStatus(subfield)
+                    });
+                });
+            }
+            else {
+                acc.push({
+                    name: field.name,
+                    isValid: this.setInitialValidStatus(field)
+                });
+            }
+            return acc;
+        }, []);
+        this.listOfInputValues = this.listOfInputs.reduce((acc, field) => {
+            var _a;
+            const inputType = (_a = field.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+            // If the field type is a 'togglecheckbox', add its subfields
+            if (inputType === 'togglecheckbox') {
+                field.data.subFields.forEach(subfield => {
+                    var _a;
+                    acc.push({
+                        name: subfield.name,
+                        value: ((_a = subfield.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) == 'checkbox' ? 'false' : null,
+                        isDuplicate: subfield.isDuplicateInput || false,
+                        type: inputType === 'togglecheckbox' ? 'togglecheckbox' : null
+                    });
+                });
+            }
+            acc.push({
+                name: field.name,
+                value: inputType === 'checkbox' || inputType === 'togglecheckbox' ? 'false' : null,
+                isDuplicate: field.isDuplicateInput || false,
+                type: inputType === 'checkboxgroup' ? 'checkboxgroup' : (inputType === 'togglecheckbox' ? 'toggle' : null)
+            });
+            return acc;
+        }, []);
+        if (this.btag)
+            this.addBtagValue();
+        // Set the list of actions
+        this.listOfActions = config.content.actions.map(action => action);
+        this.registrationID = config.content.registrationID;
+        this.registrationStep = config.content.step;
+        if (this.listOfActions.some(action => action == '/register')) {
+            this.lastStep = this.registrationStep;
+        }
+        ;
+        if (this.listOfActions.some(action => action == '/Consents')) {
+            if (this.isConsentReady) {
+                this.listOfInputValidity.find((input) => input.name === "Consents").isValid = false;
+                this.isFormValid = !this.getInvalidStatus(this.listOfInputValidity);
+                return;
+            }
+            this.listOfInputValidity.push({ name: 'Consents', isValid: false });
+            this.isConsentReady = true;
+        }
+        else {
+            this.isConsentReady = false;
+        }
+        this.forms = Object.assign(Object.assign({}, this.forms), { [this.registrationStep]: this.listOfInputs.map(input => (Object.assign({}, input))) });
+        // The translations for fields happens here.
+        if (this.translationUrl) {
+            getTranslations(this.translationUrl).then(() => {
+                this.listOfInputs.forEach(field => {
+                    var _a, _b;
+                    this.addTranslation(field);
+                    // Logic for field types that have subfields
+                    if (((_a = field.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'togglecheckbox') {
+                        field.data.subFields.forEach(subField => this.addTranslation(subField));
+                    }
+                    if (((_b = field.inputType) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'checkboxgroup') {
+                        this.addTranslation(field);
+                        field.data.subFields.forEach(subField => this.addTranslation(subField));
+                    }
+                    return field;
+                });
+            })
+                .catch((error) => {
+                console.error('Failed to fetch translations:', error);
+            });
+        }
+        // Add the step to the registrationStepsData
+        this.registrationStepsState.regId = this.registrationID;
+        if (!this.registrationStepsState[this.registrationStep]) {
+            this.registrationStepsState[this.registrationStep] = {
+                fields: [],
+                fieldsValidity: [],
+                registerUserData: {},
+                actions: []
+            };
+        }
+    }
+    addBtagValue() {
+        const btagField = this.listOfInputs.find(input => input.name.toLowerCase() === 'btag');
+        if (btagField) {
+            btagField.defaultValue = this.btag;
+        }
+        const btagValue = this.listOfInputValues.find(input => input.name.toLowerCase() === 'btag');
+        if (btagValue) {
+            btagValue.value = this.btag;
+        }
+    }
+    addTranslation(field) {
+        const lang = TRANSLATIONS[this.language] ? this.language : DEFAULT_LANGUAGE;
+        if (TRANSLATIONS[lang][field.name]) {
+            Object.keys(TRANSLATIONS[this.language][field.name]).forEach((key) => {
+                field[key] = TRANSLATIONS[this.language][field.name][key];
+            });
+        }
+    }
+    setInitialValidStatus(field) {
+        var _a, _b, _c, _d, _e, _f;
+        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;
+        }
+        if (((_c = field.inputType) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === 'checkbox' && ((_d = field.validate) === null || _d === void 0 ? void 0 : _d.mandatory) && field.defaultValue !== 'true') {
+            return false;
+        }
+        if (field.defaultValue !== null) {
+            return true;
+        }
+        if (((_e = field.validate) === null || _e === void 0 ? void 0 : _e.mandatory) === false) {
+            return true;
+        }
+        if (((_f = field.validate) === null || _f === void 0 ? void 0 : _f.mandatory) === true) {
+            return false;
+        }
+        return false;
+    }
+    stepChange(action) {
+        const stepNum = parseInt(this.registrationStep.replace('Step', ''));
+        if (action === 'increment') {
+            return 'Step' + (stepNum + 1);
+        }
+        if (action === 'decrement') {
+            return 'Step' + (stepNum - 1);
+        }
+    }
+    getInvalidStatus(listOfInputs) {
+        const invalidInputs = listOfInputs.filter(input => {
+            var _a;
+            const inputConfig = this.listOfInputs.find(i => i.name === input.name);
+            const inputValue = (_a = this.listOfInputValues.find(v => v.name === input.name)) === null || _a === void 0 ? void 0 : _a.value;
+            if (inputConfig && !inputConfig.validate.mandatory) {
+                // Use the helper function to check if value is empty
+                if (checkEmptyValue(inputValue)) {
+                    return false;
+                }
+            }
+            return input.isValid === false;
+        });
+        return invalidInputs.length > 0;
+    }
+    renderErrorMessage(errorMsg) {
+        return (h("p", { class: "registration registration__error-message" }, errorMsg));
+    }
+    resetAllAddressFields() {
+        this.listOfInputValues = this.listOfInputValues.map(input => {
+            if (['address1', 'address2', 'City', 'PostalCode'].includes(input.name)) {
+                return Object.assign(Object.assign({}, input), { value: '' });
+            }
+            return input;
+        });
+        // Update forms with new structure
+        Object.keys(this.forms).forEach(stepKey => {
+            this.forms[stepKey] = this.forms[stepKey].map(input => {
+                if (['address1', 'address2', 'City', 'PostalCode'].includes(input.name)) {
+                    return Object.assign(Object.assign({}, input), { defaultValue: '' });
+                }
+                return input;
+            });
+        });
+        // Reset validity
+        this.listOfInputValidity = this.listOfInputValidity.map(input => {
+            if (['address1', 'address2', 'City', 'PostalCode'].includes(input.name)) {
+                return Object.assign(Object.assign({}, input), { isValid: false });
+            }
+            return input;
+        });
+        this.addresses = [];
+        this.forms = Object.assign({}, this.forms);
+    }
+    fetchAddresses(countryCode, postalCode) {
+        var _a;
+        const currentPostalCode = (_a = this.listOfInputValues.find(i => i.name === 'PostalCode')) === null || _a === void 0 ? void 0 : _a.value;
+        if (!currentPostalCode || currentPostalCode.length < this.postalcodelength) {
+            return;
+        }
+        window.dispatchEvent(new CustomEvent('addressFetchStarted', {
+            detail: { postalCode }
+        }));
+        const url = new URL(`${this.endpoint}/api/pam/v1/lookup/addresses?country=${countryCode}&postalCode=${postalCode}`);
+        const headers = new Headers();
+        headers.append('Content-Type', 'application/json');
+        headers.append('Accept', 'application/json');
+        const options = {
+            method: 'GET',
+            headers
+        };
+        fetch(url.href, options)
+            .then(async (res) => {
+            if (!res.ok) {
+                const err = await res.json();
+                throw new Error(`Failed to fetch addresses: ${err.message || JSON.stringify(err)}`);
+            }
+            return res.json();
+        })
+            .then((data) => {
+            var _a;
+            const currentPostalCode = (_a = this.listOfInputValues.find(i => i.name === 'PostalCode')) === null || _a === void 0 ? void 0 : _a.value;
+            if (currentPostalCode && currentPostalCode.length >= this.postalcodelength) {
+                this.addresses = data.addresses || [];
+            }
+            else {
+                this.addresses = [];
+            }
+        })
+            .catch(() => {
+            this.addresses = [];
+            this.lastPostalCode = null;
+        });
+    }
+    renderForm() {
+        return (h("div", null, h("div", { class: "RegisterTimeline custom__reg" }, h("button", { class: `RegisterBackButton ${this.registrationStep == CONSTANTS.REGISTRATION_STEP_ONE ? 'disabledRegBtn' : ''}`, onClick: (e) => this.backHandler(e) }, h("span", { class: "arrow" }, "\u2190"), "Back"), h("div", { class: "RegisterTimelineWrapper" }, h("div", { class: "RegisterTimeline__content" }, h("div", { class: "step step__one" }, h("span", { class: this.getStepClass(1), "data-number": "1" })), h("div", { class: "connector" }), h("div", { class: "step step__two" }, h("span", { class: this.getStepClass(2), "data-number": "2" })), h("div", { class: "connector" }), h("div", { class: "step step__three" }, h("span", { class: this.getStepClass(3), "data-number": "3" })))), this.errorMessage && h("p", { class: "RegisterTimeline__errorMsg", innerHTML: this.errorMessage })), h("form", { action: ".", id: `RegistrationForm${this.registrationStep}`, class: `registration__form`, ref: (el) => (this.form = el), onClick: this.handleInitialClick }, this.forms[this.registrationStep] &&
+            this.forms[this.registrationStep].map((input) => {
+                var _a, _b;
+                return (h("div", { key: input.name, class: `input-wrapper ${this.ignorebtag && input.name === 'Btag' ? 'hide-btag' : ''}` }, h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data
+                        ? input.inputType.toLowerCase() === 'checkboxgroup' ||
+                            input.inputType.toLowerCase() === 'togglecheckbox'
+                            ? input.data.subFields
+                            : input.data.values
+                        : [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language, mbSource: this.mbSource, isDuplicateInput: input.isDuplicateInput, "client-styling": this.clientStyling, tooltip: input.tooltip, placeholder: input.placeholder == null ? '' : input.placeholder, "date-format": this.dateFormat, "twofa-destination": this.twofaDestination, "twofa-resend-interval-seconds": (_a = input.customInfo) === null || _a === void 0 ? void 0 : _a.twofaResendIntervalSeconds, "translation-url": this.translationUrl, emitOnClick: this.emitOnClick, onClick: this.handleInitialClick, haspostalcodelookup: this.haspostalcodelookup, addresses: this.haspostalcodelookup ? this.addresses : null, postalcodelength: this.haspostalcodelookup ? this.postalcodelength : null, "enable-south-african-mode": this.enableSouthAfricanMode, key: ['address1', 'address2', 'City'].includes(input.name)
+                        ? `${input.name}-${this.addressUpdateKey}`
+                        : input.name, "ignore-country": this.getIgnoreCountry(input), "pin-attempts-exceeded": this.pinAttemptsExceeded }), ((_b = input.customInfo) === null || _b === void 0 ? void 0 : _b.description) && h("div", { class: "input-description" }, input.customInfo.description)));
+            }), this.forms[this.registrationStep] && this.isConsentReady && this.renderConsents(), this.forms[this.registrationStep] && this.buttonInsideForm && this.renderButtons(), h("div", { class: "registration__wrapper--flex" }, h("p", { class: "registration__error-message", innerHTML: this.errorMessage })))));
+    }
+    renderConsents() {
+        return (h("div", { class: "consentsContainer" }, h("player-consents", { endpoint: this.endpoint })));
+    }
+    renderButtons() {
+        return (h("div", null, this.isLoadingPOST
+            && h("slot", { name: 'spinner' })
+            && h("svg", { class: "spinner", viewBox: "0 0 50 50" }, h("circle", { class: "path", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "5" })), !this.isLoadingPOST && h("div", { class: `registration__buttons-wrapper ${this.autofilled ? 'registration__buttons-wrapper--autofilled' : ''}` }, h("button", { class: `registration__button registration__button--next ${this.registrationStep} ${!this.isFormValid || this.pinAttemptsExceeded ? 'registration__button--disabled' : ''}`, type: 'submit', form: `RegistrationForm${this.registrationStep}`, onClick: (e) => this.nextHandler(e), disabled: this.pinAttemptsExceeded ? true : !this.isFormValid }, this.registrationStep === "Step2"
+            ? translate('verifyButton', this.language)
+            : (this.lastStep === this.registrationStep
+                ? 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 && !this.registerErrors) {
+            return h("p", { class: `registration registration__loading-message` }, translate('loadingMessage', this.language));
+        }
+        else if (!this.isLoading && this.registerErrors) {
+            return this.renderErrorMessage(this.errorMessage);
+        }
+        return (h("div", { class: `registration  registration__${this.registrationStep}` }, this.renderForm(), !this.buttonInsideForm && this.renderButtons()));
+    }
+    static get is() { return "general-registration-multistep"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["general-registration-multistep.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["general-registration-multistep.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "NorWAy Endpoint for all the calls."
+                },
+                "attribute": "endpoint",
+                "reflect": true
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently selected language"
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via inline styles"
+                },
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via streamStyling"
+                },
+                "attribute": "mb-source",
+                "reflect": false
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via url"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Translations via URL"
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "dateFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Date format for date picker"
+                },
+                "attribute": "date-format",
+                "reflect": true
+            },
+            "buttonInsideForm": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Boolean that decides the position of the button. e.g. button inside -- true / outside -- false the form."
+                },
+                "attribute": "button-inside-form",
+                "reflect": true
+            },
+            "btag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Affiliate code to be passed in and sent in the registration."
+                },
+                "attribute": "btag",
+                "reflect": true,
+                "defaultValue": "null"
+            },
+            "emitOnClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Boolean flag that tells inputs to emit an event on click."
+                },
+                "attribute": "emit-on-click",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "haspostalcodelookup": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Addresses dropdown suggestion based on postal code"
+                },
+                "attribute": "haspostalcodelookup",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "ignorebtag": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "hide btag from field"
+                },
+                "attribute": "ignorebtag",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "enableSouthAfricanMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable South African registration mode"
+                },
+                "attribute": "enable-south-african-mode",
+                "reflect": true,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "errorMessage": {},
+            "isFormValid": {},
+            "isConsentValid": {},
+            "isConsentReady": {},
+            "isLoading": {},
+            "isLoadingPOST": {},
+            "registrationStep": {},
+            "forms": {},
+            "limitStylingAppends": {},
+            "autofilled": {},
+            "isInitalInteraction": {},
+            "addresses": {},
+            "addressUpdateKey": {},
+            "currentStep": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "registrationWidgetLoaded",
+                "name": "registrationWidgetLoaded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "registrationStepUpdated",
+                "name": "registrationStepUpdated",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "validationChange",
+                "name": "validationChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "registrationStep",
+                "methodName": "sendStep"
+            }, {
+                "propName": "clientStyling",
+                "methodName": "handleStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleStylingUrlChange"
+            }, {
+                "propName": "forms",
+                "methodName": "setFormValidity"
+            }, {
+                "propName": "btag",
+                "methodName": "addBtag"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "sendValidityState",
+                "method": "checkInputsValidityHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "sendInputValue",
+                "method": "getInputsValueHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "sendAddressValue",
+                "method": "handleAddressSelection",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "countryCodeUpdated",
+                "method": "handleCountryCodeUpdateGlobal",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "resendCode",
+                "method": "handleRequestTwofa",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "message",
+                "method": "messageHandler",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "birthDateUpdated",
+                "method": "handleBirthDateUpdated",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}