@everymatrix/general-input 1.87.0 → 1.87.2

package/dist/cjs/checkbox-group-input_14.cjs.entry.js

@@ -35,6 +35,10 @@ const TRANSLATIONS = {
         "enterIEAddressManually": "For IRE, enter the address manually",
         "postalLookUpNoAddressFound": "No addresses found for this postal code",
         "searchingForAddresses": "Searching for addresses...",
+        "SAIdLengthError": "SA ID must be 13 digits",
+        "SAIdInvalidError": "Invalid SA ID",
+        "PassportLengthError": "Passport number must be 8 or 9 digits.",
+        "PasswordMustContain": "Password must contain:"
     },
     "hu": {
         "dateError": "A választott dátumnak {min} és {max} között kell lennie",
@@ -61,7 +65,11 @@ const TRANSLATIONS = {
         "InvalidDocumentNumber": "Csak számjegyek engedélyezettek.",
         "twofaDescription": "<p> A megerősítő kódot elküldtük a következő címre: <p> {destination}. </p> </p> <p> Kérjük, írja be az alábbi PIN-kódot. </p>",
         "twofaResendMessage": "Nem kapta meg a megerősítő kódot?",
-        "twofaResendButton": "Újraküldés"
+        "twofaResendButton": "Újraküldés",
+        "PassportLengthError": "Az útlevélszámnak 9 számjegyűnek kell lennie",
+        "SAIdLengthError": "A dél-afrikai személyi számnak 13 számjegyűnek kell lennie",
+        "SAIdInvalidError": "Érvénytelen dél-afrikai személyi szám",
+        "PasswordMustContain": "A jelszónak tartalmaznia kell:"
     },
     "hr": {
         "dateError": "Odabrani datum treba biti između {min} i {max}",
@@ -88,7 +96,11 @@ const TRANSLATIONS = {
         "InvalidDocumentNumber": "Dopušteni su samo numerički znakovi.",
         "twofaDescription": "<p> Poslali smo verifikacijski kod na: <p> {destination}. </p> </p> <p> Molimo unesite PIN ispod. </p>",
         "twofaResendMessage": "Niste primili verifikacijski kod?",
-        "twofaResendButton": "Ponovno pošalji"
+        "twofaResendButton": "Ponovno pošalji",
+        "PassportLengthError": "Broj putovnice mora imati 9 znamenki",
+        "SAIdLengthError": "Južnoafrički osobni broj mora imati 13 znamenki",
+        "SAIdInvalidError": "Nevažeći južnoafrički osobni broj",
+        "PasswordMustContain": "Lozinka mora sadržavati:"
     },
     "tr": {
         "dateError": "Seçilen tarih {min} ve {max} arasında olmalıdır",
@@ -115,7 +127,11 @@ const TRANSLATIONS = {
         "InvalidDocumentNumber": "Sadece sayısal karakterlere izin verilir.",
         "twofaDescription": "<p> Doğrulama kodunu şu adrese gönderdik: <p> {destination}. </p> </p> <p> Lütfen aşağıya PIN kodunu girin. </p>",
         "twofaResendMessage": "Doğrulama kodunu almadınız mı?",
-        "twofaResendButton": "Yeniden gönder"
+        "twofaResendButton": "Yeniden gönder",
+        "PassportLengthError": "Pasaport numarası 9 haneli olmalıdır",
+        "SAIdLengthError": "Güney Afrika kimlik numarası 13 haneli olmalıdır",
+        "SAIdInvalidError": "Geçersiz Güney Afrika kimlik numarası",
+        "PasswordMustContain": "Şifre şunları içermelidir:"
     },
     "pt-br": {
         "dateError": "A data selecionada deve estar entre {min} e {max}",
@@ -142,7 +158,11 @@ const TRANSLATIONS = {
         "InvalidDocumentNumber": "Apenas caracteres numéricos são permitidos.",
         "twofaDescription": "<p> Enviamos o código de verificação para: <p> {destination}. </p> </p> <p> Por favor, insira o PIN abaixo. </p>",
         "twofaResendMessage": "Não recebeu o código de verificação?",
-        "twofaResendButton": "Reenviar"
+        "twofaResendButton": "Reenviar",
+        "PassportLengthError": "O número do passaporte deve ter 9 dígitos",
+        "SAIdLengthError": "O número de identificação da África do Sul deve ter 13 dígitos",
+        "SAIdInvalidError": "Número de identificação da África do Sul inválido",
+        "PasswordMustContain": "A senha deve conter:"
     },
     "es-mx": {
         "dateError": "La fecha seleccionada debe ser entre {min} y {max}",
@@ -169,9 +189,40 @@ const TRANSLATIONS = {
         "InvalidDocumentNumber": "Solo se permiten caracteres numéricos.",
         "twofaDescription": "<p> Hemos enviado el código de verificación a: <p> {destination}. </p> </p> <p> Por favor, ingrese el PIN a continuación. </p>",
         "twofaResendMessage": "¿No recibiste el código de verificación?",
-        "twofaResendButton": "Reenviar"
+        "twofaResendButton": "Reenviar",
+        "PassportLengthError": "El número de pasaporte debe tener 9 dígitos",
+        "SAIdLengthError": "El número de identificación de Sudáfrica debe tener 13 dígitos",
+        "SAIdInvalidError": "Número de identificación de Sudáfrica inválido",
+        "PasswordMustContain": "La contraseña debe contener:"
     }
 };
+const CONSTANTS = {
+    DOCUMENT_NUMBER: "DocumentNumber",
+    FIRSTNAME_ON_DOCUMENT: "FirstnameOnDocument",
+    LASTNAME_ON_DOCUMENT: "LastnameOnDocument",
+    PASSPORT: "Passport",
+    SOUTH_AFRICAN_ID: "SouthAfricanID",
+    BIRTHDATE: "BirthDate",
+    PASSPORT_NUMERIC_REGEX: /^\d{8,9}$/,
+    SA_ID_BASIC_REGEX: /^\d{13}$/,
+    SOUTH_AFRICAN_ID_LENGTH: 13,
+    NON_LETTERS_REGEX: /[^A-Za-z]/g,
+    DATE_FORMAT: "yyyy-MM-dd",
+    PASSWORD_COMPLEXITY_PASSED: "passed",
+    PASSWORD_COMPLEXITY_FAILED: "failed"
+};
+const ERROR_KEYS = {
+    PASSPORT_INVALID: 'PassportLengthError',
+    SA_ID_LENGTH: 'SAIdLengthError',
+    SA_ID_INVALID: 'SAIdInvalidError',
+    REQUIRED: 'requiredError',
+    LENGTH: 'lengthError',
+    DUPLICATE: 'duplicateInputError',
+};
+const STATUS_ICONS = {
+    PASSED: '✓',
+    FAILED: '✕',
+};
 const translate = (key, customLang, values) => {
     const lang = customLang;
     let translation = TRANSLATIONS[lang !== undefined ? lang : DEFAULT_LANGUAGE][key];
@@ -198,6 +249,27 @@ const getTranslations = (url) => {
         });
     });
 };
+const validateID = (id) => {
+    if (!CONSTANTS.SA_ID_BASIC_REGEX.test(id))
+        return false;
+    const digits = id.split("").map(n => parseInt(n, 10));
+    let oddSum = 0;
+    for (let i = 0; i < 12; i += 2) {
+        oddSum += digits[i];
+    }
+    let evenConcat = "";
+    for (let i = 1; i < 12; i += 2) {
+        evenConcat += digits[i];
+    }
+    const evenNumber = parseInt(evenConcat, 10) * 2;
+    const evenSum = evenNumber
+        .toString()
+        .split("")
+        .reduce((s, n) => s + parseInt(n, 10), 0);
+    const total = oddSum + evenSum;
+    let checkDigit = (10 - (total % 10)) % 10;
+    return checkDigit === digits[12];
+};
 
 const tooltipIconSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iNiIgY3k9IjYiIHI9IjUuNSIgc3Ryb2tlPSIjOTc5Nzk3Ii8+CjxyZWN0IHg9IjUiIHk9IjUiIHdpZHRoPSIyIiBoZWlnaHQ9IjUiIGZpbGw9IiM5Nzk3OTciLz4KPGNpcmNsZSBjeD0iNiIgY3k9IjMiIHI9IjEiIGZpbGw9IiM5Nzk3OTciLz4KPC9zdmc+Cg==';
 
@@ -5821,6 +5893,21 @@ const DateInput = class {
             sheet.innerHTML = this.clientStyling;
             this.stylingContainer.prepend(sheet);
         };
+        this.handleDocumentIdUpdate = (e) => {
+            if (this.name !== CONSTANTS.BIRTHDATE) {
+                return;
+            }
+            const dateStr = e.detail;
+            this.value = dateStr;
+            this.valueAsDate = parse(this.value || '', CONSTANTS.DATE_FORMAT, new Date());
+            this.touched = true;
+            if (this.datePicker) {
+                this.datePicker.value = this.value;
+            }
+            this.isValid = this.setValidity();
+            this.errorMessage = this.setErrorMessage();
+            this.valueHandler({ name: this.name, value: this.value });
+        };
         this.name = undefined;
         this.displayName = undefined;
         this.placeholder = undefined;
@@ -5833,6 +5920,7 @@ const DateInput = class {
         this.clientStyling = '';
         this.dateFormat = 'yyyy-MM-dd';
         this.emitOnClick = false;
+        this.enableSouthAfricanMode = undefined;
         this.errorMessage = undefined;
         this.isValid = undefined;
         this.limitStylingAppends = false;
@@ -5862,6 +5950,14 @@ const DateInput = class {
             this.valueHandler({ name: this.name, value: this.value });
         }
     }
+    handleCustomRegistrationChange(newValue) {
+        if (newValue) {
+            window.addEventListener('documentIdUpdated', this.handleDocumentIdUpdate);
+        }
+        else {
+            window.removeEventListener('documentIdUpdated', this.handleDocumentIdUpdate);
+        }
+    }
     valueHandler(inputValueEvent) {
         this.sendInputValue.emit(inputValueEvent);
     }
@@ -5905,6 +6001,9 @@ const DateInput = class {
                 }
             });
         }
+        if (this.enableSouthAfricanMode) {
+            window.addEventListener('documentIdUpdated', this.handleDocumentIdUpdate);
+        }
         this.datePicker.i18n = Object.assign(Object.assign({}, this.datePicker.i18n), { formatDate: this.formatDate, parseDate: this.parseDate });
         if (this.defaultValue) {
             this.value = this.defaultValue;
@@ -5912,6 +6011,11 @@ const DateInput = class {
         }
         this.isValid = this.setValidity();
     }
+    disconnectedCallback() {
+        if (this.enableSouthAfricanMode) {
+            window.removeEventListener('documentIdUpdated', this.handleDocumentIdUpdate);
+        }
+    }
     handleCalendarIconClick() {
         if (this.datePicker.opened && this.emitOnClick) {
             window.postMessage({ type: `registration${this.name}Clicked` }, window.location.href);
@@ -5924,6 +6028,11 @@ const DateInput = class {
         this.isValid = this.setValidity();
         this.errorMessage = this.setErrorMessage();
         this.emitValueHandler(true);
+        if (this.enableSouthAfricanMode) {
+            window.dispatchEvent(new CustomEvent('birthDateUpdated', {
+                detail: { birthDate: this.value }
+            }));
+        }
     }
     setValidity() {
         if (isBefore(this.valueAsDate, this.minDate) || isAfter(this.valueAsDate, this.maxDate) || !isMatch(this.formattedValue, this.dateFormat)) {
@@ -5958,14 +6067,15 @@ const DateInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return index.h("div", { key: 'd9757eb7eea257167da12612f51f6665d6ac058e', class: `date__wrapper  ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("label", { key: '8339c9f27e74f2e1a98d11efea7eb05a9681e83e', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.h("vaadin-date-picker", { key: '513692d0858a9f409e02bd515700e3e9e0eaa1fb', id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e) }), index.h("small", { key: '19be9854df1adc1c6581e00a3593bcf16d7e2146', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
-            index.h("img", { key: 'f38abc61046c33c56a9efc3907dbd184b8e8352e', class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
+        return index.h("div", { key: '9399c1be2edcbe3ed5c0e133cad52b1917e77e96', class: `date__wrapper  ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("label", { key: '1094491a5fc441c4f704441d376ed965d6946637', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.h("vaadin-date-picker", { key: '8c922586399999885841ede07e46b715b2f6760f', id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e) }), index.h("small", { key: '67c1b6a0daafee536ab7179d1fe90a2870bb12b1', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
+            index.h("img", { key: '4d02f23affc8ce9f5eb41a44fd2f346960c6d458', class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
         "clientStyling": ["handleStylingChange"],
         "isValid": ["validityChanged"],
-        "emitValue": ["emitValueHandler"]
+        "emitValue": ["emitValueHandler"],
+        "enableSouthAfricanMode": ["handleCustomRegistrationChange"]
     }; }
 };
 DateInput.style = DateInputStyle0;
@@ -12846,6 +12956,8 @@ const GeneralInput = class {
         this.postalcodelength = undefined;
         this.addresses = [];
         this.ignoreCountry = false;
+        this.enableSouthAfricanMode = undefined;
+        this.pinAttemptsExceeded = undefined;
         this.mbSource = undefined;
         this.limitStylingAppends = false;
     }
@@ -12889,7 +13001,7 @@ const GeneralInput = class {
                     return index.h("postalcode-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, postalcodelength: this.postalcodelength, addresses: this.addresses, ignoreCountry: this.ignoreCountry });
                 }
                 else {
-                    return index.h("text-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, haspostalcodelookup: this.haspostalcodelookup });
+                    return index.h("text-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, haspostalcodelookup: this.haspostalcodelookup, "enable-south-african-mode": this.enableSouthAfricanMode });
                 }
             case 'email':
                 return index.h("email-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder });
@@ -12902,9 +13014,9 @@ const GeneralInput = class {
             case 'togglecheckbox':
                 return index.h("toggle-checkbox-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, options: this.options, "emit-on-click": this.emitOnClick });
             case 'datetime':
-                return index.h("date-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, dateFormat: this.dateFormat, "emit-on-click": this.emitOnClick });
+                return index.h("date-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, dateFormat: this.dateFormat, "emit-on-click": this.emitOnClick, "enable-south-african-mode": this.enableSouthAfricanMode });
             case 'password':
-                return index.h("password-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, hidePasswordComplexity: this.hidePasswordComplexity, "no-validation": this.noValidation, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder });
+                return index.h("password-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, hidePasswordComplexity: this.hidePasswordComplexity, "no-validation": this.noValidation, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, "enable-south-african-mode": this.enableSouthAfricanMode });
             case 'radio':
                 return index.h("radio-input", { name: this.name, displayName: this.displayName, optionsGroup: this.options, validation: this.validation, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling });
             case 'tel':
@@ -12912,13 +13024,13 @@ const GeneralInput = class {
             case 'dropdown':
                 return index.h("select-input", { name: this.name, action: this.action, defaultValue: this.defaultValue, displayName: this.displayName, options: this.options, validation: this.validation, emitValue: this.emitValue, autofilled: this.autofilled, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder });
             case 'twofa':
-                return index.h("twofa-input", { name: this.name, displayName: this.displayName, validation: this.validation, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, destination: this.twofaDestination, "resend-interval-seconds": this.twofaResendIntervalSeconds, "mb-source": this.mbSource });
+                return index.h("twofa-input", { name: this.name, displayName: this.displayName, validation: this.validation, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, destination: this.twofaDestination, "resend-interval-seconds": this.twofaResendIntervalSeconds, "enable-south-african-mode": this.enableSouthAfricanMode, "pin-attempts-exceeded": this.pinAttemptsExceeded, "mb-source": this.mbSource });
             default:
                 return index.h("p", null, "The ", this.type, " input type is not valid");
         }
     }
     render() {
-        return (index.h(index.Host, { key: '134ef4b9ef8814a9b77c5db5b5085b0fe4e79c92', class: `general-input--${this.name}`, onClick: this.handleClick }, this.renderInput()));
+        return (index.h(index.Host, { key: '7d036183d9376203451d9805e76b608cfa63570b', class: `general-input--${this.name}`, onClick: this.handleClick }, this.renderInput()));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -13066,7 +13178,7 @@ const NumberInput = class {
 };
 NumberInput.style = NumberInputStyle0;
 
-const passwordInputCss = "*,\n*::before,\n*::after {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n\n.password {\n  font-family: \"Roboto\";\n  font-style: normal;\n}\n.password__wrapper {\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  container-type: inline-size;\n}\n.password__wrapper--autofilled {\n  pointer-events: none;\n}\n.password__wrapper--autofilled .password__label {\n  color: var(--emw--registration-typography, var(--emw--color-black, #000000));\n}\n.password__wrapper--autofilled .password__input::part(input-field) {\n  color: var(--emw--color-black, #000000);\n}\n.password__wrapper--flex {\n  display: flex;\n  gap: 5px;\n}\n.password__wrapper--relative {\n  position: relative;\n}\n.password__label {\n  font-family: inherit;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 20px;\n  color: var(--emw--registration-typography, var(--emw--color-black, #000000));\n}\n.password__label--required::after {\n  content: \"*\";\n  font-family: inherit;\n  color: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));\n  margin-left: 2px;\n}\n.password__input {\n  width: inherit;\n  border: none;\n}\n.password__input[focused]::part(input-field) {\n  border-color: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));\n}\n.password__input[invalid]::part(input-field) {\n  border: 1px solid var(--emw--color-error, var(--emw--color-red, #ed0909));\n}\n.password__input::part(input-field) {\n  border-radius: 4px;\n  background-color: var(--emw--color-white, #FFFFFF);\n  border: 1px solid var(--emw--color-gray-100, #E6E6E6);\n  color: var(--emw--color-black, #000000);\n  background-color: var(--emw--color-white, #FFFFFF);\n  font-family: inherit;\n  font-style: normal;\n  font-weight: 300;\n  font-size: 16px;\n  line-height: 1.5;\n  position: relative;\n  margin-bottom: unset;\n  height: 44px;\n  padding: 0;\n  width: 100%;\n}\n.password__input::part(reveal-button) {\n  position: relative;\n  right: 10px;\n}\n.password__input::part(reveal-button)::before {\n  color: var(--emw--registration-typography, var(--emw--color-black, #000000));\n}\n.password__input > input {\n  padding: 5px 15px;\n}\n.password__input > input:placeholder-shown {\n  color: var(--emw--color-gray-150, #828282);\n}\n.password__error-message {\n  position: absolute;\n  top: calc(100% + 5px);\n  left: 0;\n  color: var(--emw--color-error, var(--emw--color-red, #ed0909));\n}\n.password__complexity {\n  height: 150px;\n  position: relative;\n  padding: 10px;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  justify-content: center;\n  margin-top: 20px;\n  font-weight: 300;\n  background: var(--emw--color-white, #FFFFFF);\n  -webkit-border-radius: 5px;\n  -moz-border-radius: 5px;\n  border-radius: 5px;\n  border: 1px solid #B0B0B0;\n  box-sizing: content-box;\n  /* works only in this order */\n}\n.password__complexity meter {\n  border-color: transparent; /* Needed for Safari */\n}\n.password__complexity meter[value=\"1\"]::-moz-meter-bar {\n  background-color: var(--emw--color-valid, #48952a);\n}\n.password__complexity meter[value=\"1\"]::-webkit-meter-optimum-value {\n  background-color: var(--emw--color-valid, #48952a);\n}\n.password__complexity meter:not([value=\"1\"])::-moz-meter-bar {\n  background-color: var(--emw--color-error, #FD2839);\n}\n.password__complexity meter:not([value=\"1\"])::-webkit-meter-optimum-value {\n  background-color: var(--emw--color-error, #FD2839);\n}\n.password__complexity--strength {\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n}\n.password__complexity--strength meter::-moz-meter-bar { /* Firefox Pseudo Class */\n  background: #B0B0B0;\n}\n.password__complexity--hidden {\n  display: none;\n}\n.password__complexity--text-bold {\n  font-weight: 500;\n}\n.password__complexity--checkbox {\n  margin-right: 5px;\n}\n.password__complexity:after {\n  content: \"\";\n  position: absolute;\n  width: 25px;\n  height: 25px;\n  border-top: 1px solid var(--emw--color-gray-150, #828282);\n  border-right: 0 solid var(--emw--color-gray-150, #828282);\n  border-left: 1px solid var(--emw--color-gray-150, #828282);\n  border-bottom: 0 solid var(--emw--color-gray-150, #828282);\n  bottom: 92%;\n  left: 50%;\n  margin-left: -25px;\n  transform: rotate(45deg);\n  margin-top: -25px;\n  background-color: var(--emw--color-white, #FFFFFF);\n}\n@container (max-width: 300px) {\n  .password__complexity {\n    height: 190px;\n  }\n  .password__complexity:after {\n    width: 14px;\n    height: 14px;\n    bottom: 96%;\n    left: 57%;\n  }\n}\n.password__tooltip-icon {\n  width: 16px;\n  height: auto;\n}\n.password__tooltip {\n  position: absolute;\n  top: 0;\n  left: 20px;\n  background-color: var(--emw--color-white, #FFFFFF);\n  border: 1px solid var(--emw--color-gray-150, #828282);\n  color: #2B2D3F;\n  padding: 10px;\n  border-radius: 5px;\n  opacity: 0;\n  transition: opacity 0.3s ease-in-out;\n  z-index: 10;\n}\n.password__tooltip.visible {\n  opacity: 1;\n}";
+const passwordInputCss = "*,\n*::before,\n*::after {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n\n.password {\n  font-family: \"Roboto\";\n  font-style: normal;\n}\n.password__wrapper {\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  container-type: inline-size;\n}\n.password__wrapper--autofilled {\n  pointer-events: none;\n}\n.password__wrapper--autofilled .password__label {\n  color: var(--emw--registration-typography, var(--emw--color-black, #000000));\n}\n.password__wrapper--autofilled .password__input::part(input-field) {\n  color: var(--emw--color-black, #000000);\n}\n.password__wrapper--flex {\n  display: flex;\n  gap: 5px;\n}\n.password__wrapper--relative {\n  position: relative;\n}\n.password__label {\n  font-family: inherit;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 20px;\n  color: var(--emw--registration-typography, var(--emw--color-black, #000000));\n}\n.password__label--required::after {\n  content: \"*\";\n  font-family: inherit;\n  color: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));\n  margin-left: 2px;\n}\n.password__input {\n  width: inherit;\n  border: none;\n}\n.password__input[focused]::part(input-field) {\n  border-color: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));\n}\n.password__input[invalid]::part(input-field) {\n  border: 1px solid var(--emw--color-error, var(--emw--color-red, #ed0909));\n}\n.password__input::part(input-field) {\n  border-radius: 4px;\n  background-color: var(--emw--color-white, #FFFFFF);\n  border: 1px solid var(--emw--color-gray-100, #E6E6E6);\n  color: var(--emw--color-black, #000000);\n  background-color: var(--emw--color-white, #FFFFFF);\n  font-family: inherit;\n  font-style: normal;\n  font-weight: 300;\n  font-size: 16px;\n  line-height: 1.5;\n  position: relative;\n  margin-bottom: unset;\n  height: 44px;\n  padding: 0;\n  width: 100%;\n}\n.password__input::part(reveal-button) {\n  position: relative;\n  right: 10px;\n}\n.password__input::part(reveal-button)::before {\n  color: var(--emw--registration-typography, var(--emw--color-black, #000000));\n}\n.password__input > input {\n  padding: 5px 15px;\n}\n.password__input > input:placeholder-shown {\n  color: var(--emw--color-gray-150, #828282);\n}\n.password__error-message {\n  position: absolute;\n  top: calc(100% + 5px);\n  left: 0;\n  color: var(--emw--color-error, var(--emw--color-red, #ed0909));\n}\n.password__complexity {\n  height: 150px;\n  position: relative;\n  padding: 10px;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  justify-content: center;\n  margin-top: 20px;\n  font-weight: 300;\n  background: var(--emw--color-white, #FFFFFF);\n  -webkit-border-radius: 5px;\n  -moz-border-radius: 5px;\n  border-radius: 5px;\n  border: 1px solid #B0B0B0;\n  box-sizing: content-box;\n  /* works only in this order */\n}\n.password__complexity meter {\n  border-color: transparent; /* Needed for Safari */\n}\n.password__complexity meter[value=\"1\"]::-moz-meter-bar {\n  background-color: var(--emw--color-valid, #48952a);\n}\n.password__complexity meter[value=\"1\"]::-webkit-meter-optimum-value {\n  background-color: var(--emw--color-valid, #48952a);\n}\n.password__complexity meter:not([value=\"1\"])::-moz-meter-bar {\n  background-color: var(--emw--color-error, #FD2839);\n}\n.password__complexity meter:not([value=\"1\"])::-webkit-meter-optimum-value {\n  background-color: var(--emw--color-error, #FD2839);\n}\n.password__complexity--strength {\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n}\n.password__complexity--strength meter::-moz-meter-bar { /* Firefox Pseudo Class */\n  background: #B0B0B0;\n}\n.password__complexity--hidden {\n  display: none;\n}\n.password__complexity--text-bold {\n  font-weight: 500;\n}\n.password__complexity--checkbox {\n  margin-right: 5px;\n}\n.password__complexity:after {\n  content: \"\";\n  position: absolute;\n  width: 25px;\n  height: 25px;\n  border-top: 1px solid var(--emw--color-gray-150, #828282);\n  border-right: 0 solid var(--emw--color-gray-150, #828282);\n  border-left: 1px solid var(--emw--color-gray-150, #828282);\n  border-bottom: 0 solid var(--emw--color-gray-150, #828282);\n  bottom: 92%;\n  left: 50%;\n  margin-left: -25px;\n  transform: rotate(45deg);\n  margin-top: -25px;\n  background-color: var(--emw--color-white, #FFFFFF);\n}\n@container (max-width: 300px) {\n  .password__complexity {\n    height: 190px;\n  }\n  .password__complexity:after {\n    width: 14px;\n    height: 14px;\n    bottom: 96%;\n    left: 57%;\n  }\n}\n.password__tooltip-icon {\n  width: 16px;\n  height: auto;\n}\n.password__tooltip {\n  position: absolute;\n  top: 0;\n  left: 20px;\n  background-color: var(--emw--color-white, #FFFFFF);\n  border: 1px solid var(--emw--color-gray-150, #828282);\n  color: #2B2D3F;\n  padding: 10px;\n  border-radius: 5px;\n  opacity: 0;\n  transition: opacity 0.3s ease-in-out;\n  z-index: 10;\n}\n.password__tooltip.visible {\n  opacity: 1;\n}\n\n.customreg-password__complexity {\n  background: var(--emw--color-white, #FFFFFF);\n  border-radius: 6px;\n  padding: 14px;\n}\n\n.customreg-password__complexity--title {\n  font-size: var(--emw--font-size-small, 14px);\n  color: var(--emw--color-black, #000000);\n  margin-bottom: 12px;\n}\n\n.customreg-password__complexity--rules {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  font-size: var(--emw--font-size-small-xs, 12px);\n}\n\n.customreg-password__complexity--rule {\n  display: flex;\n  align-items: center;\n  color: var(--emw--color-black, #000000);\n}\n\n.customreg-password__complexity--icon {\n  width: 20px;\n  height: 20px;\n  min-width: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  font-weight: bold;\n  border-radius: 50%;\n  margin-right: 10px;\n}\n\n.customreg-password__complexity--icon.failed {\n  background-color: var(--emw--color-error, #FD2839);\n  color: var(--emw--color-white, #FFFFFF);\n}\n\n.customreg-password__complexity--icon.passed {\n  background-color: var(--emw--color-lottoball-green, #01af15);\n  color: var(--emw--color-white, #FFFFFF);\n}\n\n.customreg-password__complexity::after {\n  display: none;\n}";
 const PasswordInputStyle0 = passwordInputCss;
 
 const PasswordInput = class {
@@ -13126,6 +13238,7 @@ const PasswordInput = class {
         this.isDuplicateInput = undefined;
         this.hidePasswordComplexity = false;
         this.clientStyling = '';
+        this.enableSouthAfricanMode = undefined;
         this.isValid = undefined;
         this.errorMessage = undefined;
         this.limitStylingAppends = false;
@@ -13304,13 +13417,23 @@ const PasswordInput = class {
             return (index.h("div", { key: index$1 }, index.h("input", { class: 'password__complexity--checkbox', type: "checkbox", checked: complexity.passed, disabled: true }), index.h("span", null, translate(`${complexity.ruleKey}`, this.language) ? translate(`${complexity.ruleKey}`, this.language) : complexity.rule)));
         }))));
     }
+    renderCustomComplexityPopup() {
+        return (index.h("div", { class: `customreg-password__complexity ${!this.showPopup ? 'customreg-password__complexity--hidden' : ''}` }, index.h("p", { class: 'customreg-password__complexity--title' }, translate('PasswordMustContain', this.language)), index.h("div", { class: 'customreg-password__complexity--rules' }, this.passwordComplexity.map((complexity, index$1) => (index.h("div", { class: 'customreg-password__complexity--rule', key: index$1 }, index.h("span", { class: `customreg-password__complexity--icon ${complexity.passed
+                ? CONSTANTS.PASSWORD_COMPLEXITY_PASSED : CONSTANTS.PASSWORD_COMPLEXITY_FAILED}` }, complexity.passed ? STATUS_ICONS.PASSED : STATUS_ICONS.FAILED), index.h("span", null, translate(complexity.ruleKey, this.language) || complexity.rule)))))));
+    }
     render() {
         let invalidClass = '';
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return index.h("div", { key: 'db7a6a87af3de451485c603a2f28f25806838d20', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '146ace196e1343f778232c0e2ff07556c0a09e1e', class: 'password__wrapper--flex' }, index.h("label", { key: '0d0cb672dfc7a43535a299b45752f43a87f73760', class: `password__label  ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '1eac72dfdadd0f50bd2db6b0fc44320dd2f287bf', class: 'password__wrapper--relative' }, this.tooltip &&
-            index.h("img", { key: 'bb327b9a403c1fc5628c4ba2da8d1a2b62888db5', class: 'password__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-password-field", { key: '7962f122d1bfb0ac0a5176a743e1224dccba4910', type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), !this.noValidation && index.h("small", { key: 'efadfea8911ba72161aef495d1fb5857f14a319b', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity && this.showPopup && !this.hidePasswordComplexity && !this.isDuplicateInput && this.renderComplexityPopup());
+        return index.h("div", { key: 'c2dd473e71853ebb3d0b5b6245af606f75f8b479', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '4ba641a832be3b8efb1957af5f45eb7b7cc69adc', class: 'password__wrapper--flex' }, index.h("label", { key: 'a4440e8b59a743831fa833d8e1c680c01cfcb93e', class: `password__label  ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '2e194f2096a69bc691694be0ac49004a54aa3cde', class: 'password__wrapper--relative' }, this.tooltip &&
+            index.h("img", { key: 'eafce2331ec867fcd8abc253d3605f5214557b8b', class: 'password__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-password-field", { key: '0f1c9cd805fd9794de896c33a85abe12c9473d00', type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), !this.noValidation && index.h("small", { key: 'd20a6946d4757da4311f33b2770079cc7f80bcfa', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity &&
+            this.showPopup &&
+            !this.hidePasswordComplexity &&
+            !this.isDuplicateInput &&
+            (this.enableSouthAfricanMode
+                ? this.renderCustomComplexityPopup()
+                : this.renderComplexityPopup()));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -14180,24 +14303,28 @@ const TextInput = class {
         this.postalcodelength = 5;
         this.touched = false;
         this.handleInput = (event) => {
-            this.value = event.target.value;
+            const input = event.target;
+            const normalizedValue = this.enableSouthAfricanMode &&
+                (this.name === CONSTANTS.FIRSTNAME_ON_DOCUMENT ||
+                    this.name === CONSTANTS.LASTNAME_ON_DOCUMENT)
+                ? input.value.replace(CONSTANTS.NON_LETTERS_REGEX, '')
+                : input.value;
+            if (normalizedValue !== input.value) {
+                input.value = normalizedValue;
+            }
+            this.value = normalizedValue;
             this.touched = true;
-            if (this.debounceTime) {
+            if (this.debounceTime)
                 clearTimeout(this.debounceTime);
-            }
             this.debounceTime = setTimeout(() => {
-                this.isValid = this.setValidity();
-                this.errorMessage = this.setErrorMessage();
-                this.validityStateHandler({ valid: this.isValid, name: this.name });
+                this.updateValidationState();
                 this.emitValueHandler(true);
             }, 500);
         };
         this.handleBlur = (event) => {
             this.value = event.target.value;
             this.touched = true;
-            this.isValid = this.setValidity();
-            this.errorMessage = this.setErrorMessage();
-            this.validityStateHandler({ valid: this.isValid, name: this.name });
+            this.updateValidationState();
         };
         this.setClientStyling = () => {
             let sheet = document.createElement('style');
@@ -14217,6 +14344,7 @@ const TextInput = class {
         this.isDuplicateInput = undefined;
         this.clientStyling = '';
         this.haspostalcodelookup = undefined;
+        this.enableSouthAfricanMode = undefined;
         this.isValid = undefined;
         this.errorMessage = '';
         this.limitStylingAppends = false;
@@ -14254,15 +14382,13 @@ const TextInput = class {
         if (this.isDuplicateInput && this.name === event.detail.name + 'Duplicate') {
             this.duplicateInputValue = event.detail.value;
             if (this.touched) {
-                this.isValid = this.setValidity();
-                this.errorMessage = this.setErrorMessage();
+                this.updateValidationState();
             }
         }
-        if (this.name === event.detail.name + 'Duplicate'
-            && this.name.replace('Duplicate', '') === event.detail.name
-            && this.touched === true) {
-            this.isValid = this.setValidity();
-            this.errorMessage = this.setErrorMessage();
+        if (this.name === event.detail.name + 'Duplicate' &&
+            this.name.replace('Duplicate', '') === event.detail.name &&
+            this.touched) {
+            this.updateValidationState();
         }
     }
     handleValidationChange(event) {
@@ -14272,7 +14398,7 @@ const TextInput = class {
         this.validation = event.detail.validation;
         this.validationPattern = this.setPattern();
         if (this.touched) {
-            this.isValid = this.setValidity();
+            this.isValid = this.isValidValue();
             this.errorMessage = this.setErrorMessage();
         }
     }
@@ -14308,13 +14434,37 @@ const TextInput = class {
         }
         this.value = newValue;
         this.touched = true;
-        this.isValid = true;
-        this.valueHandler({ name: this.name, value: newValue });
-        this.validityStateHandler({ valid: true, name: this.name });
+        this.updateValidationState();
     }
     connectedCallback() {
         this.validationPattern = this.setPattern();
     }
+    handleExternalDocUpdate(event) {
+        if (this.name !== CONSTANTS.DOCUMENT_NUMBER)
+            return;
+        this.value = event.detail || "";
+        this.touched = true;
+        if (this.inputReference) {
+            this.inputReference.value = this.value;
+        }
+        this.sendInputValue.emit({
+            name: this.name,
+            value: this.value
+        });
+        this.updateValidationState();
+    }
+    handleDocReset() {
+        if (this.name !== CONSTANTS.DOCUMENT_NUMBER)
+            return;
+        this.value = "";
+        this.touched = false;
+        this.isValid = false;
+        this.errorMessage = "";
+        if (this.inputReference) {
+            this.inputReference.value = "";
+        }
+        this.validityStateHandler({ valid: false, name: this.name });
+    }
     componentDidRender() {
         // start custom styling area
         if (!this.limitStylingAppends && this.stylingContainer) {
@@ -14331,6 +14481,7 @@ const TextInput = class {
     }
     componentDidLoad() {
         if (this.defaultValue) {
+            this.value = this.defaultValue;
             this.valueHandler({ name: this.name, value: this.value });
             if (this.isDuplicateInput) {
                 this.touched = true;
@@ -14342,18 +14493,49 @@ const TextInput = class {
                 window.targetInputRefs[this.name] = this.inputReference;
             }
         }
-        this.isValid = this.setValidity();
+        this.isValid = this.isValidValue();
     }
-    setValidity() {
+    validateDocument(valueRaw, docType) {
+        const value = valueRaw.trim();
+        if (docType === CONSTANTS.PASSPORT) {
+            const valid = CONSTANTS.PASSPORT_NUMERIC_REGEX.test(value);
+            return valid
+                ? { valid: true }
+                : { valid: false, errorKey: ERROR_KEYS.PASSPORT_INVALID };
+        }
+        if (docType === CONSTANTS.SOUTH_AFRICAN_ID) {
+            if (value.length !== CONSTANTS.SOUTH_AFRICAN_ID_LENGTH) {
+                return { valid: false, errorKey: ERROR_KEYS.SA_ID_LENGTH };
+            }
+            const valid = validateID(value);
+            return valid
+                ? { valid: true }
+                : { valid: false, errorKey: ERROR_KEYS.SA_ID_INVALID };
+        }
+        return { valid: true };
+    }
+    updateValidationState() {
+        const nextValid = this.isValidValue();
+        this.isValid = nextValid;
+        if (!this.touched) {
+            this.errorMessage = '';
+            return;
+        }
+        this.errorMessage = nextValid ? '' : this.setErrorMessage();
+    }
+    isValidValue() {
         if (!this.inputReference) {
             return false;
         }
-        if (this.value.trim() === "" && !this.validation.mandatory) {
-            return true;
+        if (this.enableSouthAfricanMode && this.name === CONSTANTS.DOCUMENT_NUMBER) {
+            const docType = window.documentTypeValue;
+            return this.validateDocument(this.value, docType).valid;
         }
-        const inputIsValid = this.inputReference.validity.valid;
-        const inputMatchValidation = !this.inputReference.value || this.inputReference.value.match(this.validationPattern) !== null;
-        return inputIsValid && inputMatchValidation;
+        const fallbackResult = (this.value.trim() === "" && !this.validation.mandatory) ||
+            (this.inputReference.validity.valid &&
+                (!this.inputReference.value ||
+                    this.inputReference.value.match(this.validationPattern) !== null));
+        return fallbackResult;
     }
     setPattern() {
         var _a, _b;
@@ -14363,14 +14545,25 @@ const TextInput = class {
     }
     setErrorMessage() {
         var _a, _b, _c, _d;
-        if (this.value.trim() === "" && !this.validation.mandatory) {
+        const value = this.value.trim();
+        if (this.enableSouthAfricanMode && this.name === CONSTANTS.DOCUMENT_NUMBER) {
+            const docType = window.documentTypeValue;
+            const res = this.validateDocument(this.value, docType);
+            return res.valid ? '' : translate(res.errorKey, this.language);
+        }
+        if (value === "" && !this.validation.mandatory) {
             return "";
         }
         if (this.inputReference.validity.valueMissing) {
-            return translate('requiredError', this.language);
+            return translate(ERROR_KEYS.REQUIRED, this.language);
         }
         if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
-            return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
+            return translate(ERROR_KEYS.LENGTH, this.language, {
+                values: {
+                    minLength: this.validation.minLength,
+                    maxLength: this.validation.maxLength
+                }
+            });
         }
         if (this.inputReference.value.match(this.validationPattern) == null) {
             const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
@@ -14382,6 +14575,7 @@ const TextInput = class {
             const errorMessage = (_d = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _d === void 0 ? void 0 : _d.errorMessage;
             return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
         }
+        return "";
     }
     renderTooltip() {
         if (this.showTooltip) {
@@ -14394,8 +14588,8 @@ const TextInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return index.h("div", { key: '46152e946f6a45c2bb07ee07c43bcf356f3cfa29', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'f584f23ee97b9a1d23862ec746366d5f00c56552', class: 'text__wrapper--flex' }, index.h("label", { key: 'ed9fe368bd00151d8b3e43daf148632cfe7d32ff', class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '01cd5f7321d78422049c45b1816801eca74d2b4d', class: 'text__wrapper--relative' }, this.tooltip &&
-            index.h("img", { key: '403689aa01575770be4296aaef0c7846e496d6a7', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '5ec8443fd428ea00b9add243ea74e61fbd5b283a', name: this.name, id: `${this.name}__input`, value: this.value, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: 'd1eb4cf6ac28fff4664a56e27c9f2a21d72b0d61', class: 'text__error-message' }, this.errorMessage));
+        return index.h("div", { key: '5b0bf10acadab5c3362d185cef10c5ed4f3a6a47', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: '6d79cc845aac8d9b11737d35571680d7701c4b94', class: 'text__wrapper--flex' }, index.h("label", { key: 'de687661fa037d691fe1da1231b651f564bca010', class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '4d9b12a587267eaf6fab4c4f3c38befb8d5c2b99', class: 'text__wrapper--relative' }, this.tooltip &&
+            index.h("img", { key: '7f27a118124cd0407b6c2644137a79eaa0496164', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '94a614815155465dbfef2a7cc1cb788bb14d1498', name: this.name, id: `${this.name}__input`, value: this.value, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.enableSouthAfricanMode ? '' : this.validation.minLength, maxlength: this.enableSouthAfricanMode ? '' : this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: 'b9b3bdcd9cb81b56dc25a208b0c1d7784d06b5e0', class: 'text__error-message' }, this.errorMessage));
     }
     static get watchers() { return {
         "clientStyling": ["handleStylingChange"],
@@ -14580,20 +14774,24 @@ const TwofaInput = class {
         this.handleInput = (e, idx) => {
             const input = e.target;
             const value = input.value;
-            if (value.length > 1) {
-                input.value = value.charAt(1);
-            }
-            else {
-                input.value = value.charAt(0);
-            }
-            if (!value) {
+            const char = value.slice(-1);
+            input.value = char;
+            if (!char)
                 return;
+            this.code[idx] = char;
+            // --- Hide pin code --- //
+            if (this.enableSouthAfricanMode) {
+                // show character for 500ms
+                this.revealedIndexes = [idx];
+                if (this.revealTimeout)
+                    clearTimeout(this.revealTimeout);
+                this.revealTimeout = setTimeout(() => {
+                    this.revealedIndexes = [];
+                }, 500);
             }
-            this.code[idx] = input.value;
             const nextInput = this.inputRefs[idx + 1];
-            if (nextInput) {
+            if (nextInput)
                 nextInput.focus();
-            }
             this.setValidity();
             this.setErrorMessage();
         };
@@ -14622,6 +14820,8 @@ const TwofaInput = class {
         this.destination = '';
         this.resendIntervalSeconds = 60;
         this.clientStyling = '';
+        this.enableSouthAfricanMode = undefined;
+        this.pinAttemptsExceeded = undefined;
         this.clientStylingUrl = '';
         this.mbSource = undefined;
         this.limitStylingAppends = false;
@@ -14631,10 +14831,7 @@ const TwofaInput = class {
         this.errorMessage = '';
         this.code = [];
         this.resendIntervalSecondsLeft = this.resendIntervalSeconds;
-    }
-    handleStylingChange(newValue, oldValue) {
-        if (newValue !== oldValue)
-            this.setClientStyling();
+        this.revealedIndexes = [];
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -14663,6 +14860,10 @@ const TwofaInput = class {
             this.showTooltip = false;
         }
     }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
+    }
     connectedCallback() {
         this.validationPattern = this.setPattern();
         this.code = new Array(this.validation.maxLength).fill('');
@@ -14697,37 +14898,51 @@ const TwofaInput = class {
     }
     handleKeyDown(e, idx) {
         if (e.key === 'Backspace') {
-            this.code[idx] = '';
-            if (this.inputRefs[idx]) {
-                this.inputRefs[idx].value = '';
-            } // Clear input field
-            const prevInput = this.inputRefs[idx - 1];
-            if (prevInput) {
-                prevInput === null || prevInput === void 0 ? void 0 : prevInput.focus();
+            const newCode = [...this.code];
+            newCode[idx] = '';
+            this.code = newCode;
+            if (this.enableSouthAfricanMode) {
+                this.revealedIndexes = this.revealedIndexes.filter(i => i !== idx);
             }
+            const prevInput = this.inputRefs[idx - 1];
+            prevInput === null || prevInput === void 0 ? void 0 : prevInput.focus();
         }
         this.setValidity();
         this.setErrorMessage();
     }
     handlePaste(e) {
-        var _a;
+        var _a, _b;
         e.preventDefault();
-        const data = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text').trim();
-        if (!data) {
+        const data = (_b = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) === null || _b === void 0 ? void 0 : _b.trim();
+        if (!data)
             return;
+        const value = data.slice(0, this.validation.maxLength).split('');
+        this.code = [
+            ...value,
+            ...new Array(this.validation.maxLength - value.length).fill('')
+        ];
+        if (this.enableSouthAfricanMode) {
+            this.revealedIndexes = value.map((_, i) => i);
+            if (this.revealTimeout)
+                clearTimeout(this.revealTimeout);
+            this.revealTimeout = setTimeout(() => {
+                this.revealedIndexes = [];
+            }, 500);
         }
-        const value = data.slice(0, this.validation.maxLength).split(''); // Limit to OTP length
-        this.code = [...value, ...new Array(this.validation.maxLength - value.length).fill('')];
-        value.forEach((char, index) => {
-            this.inputRefs[index].value = char;
-        });
-        // Move focus to the last input or trigger submit
         const lastInput = this.inputRefs[Math.min(value.length, this.inputRefs.length - 1)];
-        if (lastInput) {
-            lastInput.focus();
-        }
+        lastInput === null || lastInput === void 0 ? void 0 : lastInput.focus();
         this.setValidity();
         this.setErrorMessage();
+        if (this.enableSouthAfricanMode) {
+            this.valueHandler({
+                name: this.name,
+                value: this.code.join('')
+            });
+            this.validityStateHandler({
+                valid: this.isValid,
+                name: this.name
+            });
+        }
     }
     setValidity() {
         const code = this.code.join('');
@@ -14760,19 +14975,28 @@ const TwofaInput = class {
         }
         return null;
     }
+    getInputDisplayValue(idx) {
+        const current = this.code[idx];
+        if (!current)
+            return "";
+        if (this.enableSouthAfricanMode) {
+            return this.revealedIndexes.includes(idx) ? current : "*";
+        }
+        return current;
+    }
     render() {
-        return (index.h("div", { key: '45f0c8c7d88898a5474bff460ce962e8bb1e8634', class: "twofa", ref: el => this.stylingContainer = el }, index.h("div", { key: 'b40e81587ad9c7b67c112c8867104e761db7e3bc', class: 'twofa__error-message' }, index.h("p", { key: '760c694f6f71f040e85f81a67d3d41524c23130f' }, this.errorMessage)), index.h("div", { key: '2b437a5108e3989d2ddf596dc4a97d2071448154', class: "twofa__description", innerHTML: translate('twofaDescription', this.language, { values: { destination: this.destination } }) }), index.h("div", { key: '84df3ebbe4077ba8462c08cc7956349ec4a55b79', class: "twofa__input-wrapper", ref: this.setContainerRef }, this.code.map((char, idx) => {
-            return (index.h("input", { key: idx, ref: el => this.setInputRef(el, idx), id: `otp-input-${idx}`, type: "text", maxLength: 2, value: char, onInput: (event) => this.handleInput(event, idx), onKeyDown: (event) => this.handleKeyDown(event, idx), onPaste: (event) => this.handlePaste(event) }));
-        })), index.h("div", { key: 'abdf6e2a3ff7ef6436b59206c40ada5305543db3', class: "twofa__button-wrapper" }, index.h("p", { key: 'e0859c58e48741eb379fbcaf23519bb90404489b', class: "twofa__resend-message" }, translate('twofaResendMessage', this.language)), index.h("button", { key: '89aa3a93a9b97029fd315450892cef5edd5d5294', class: "twofa__resend-button", onClick: this.resendCodeHandler, disabled: !this.isResendButtonAvailable }, this.isResendButtonAvailable
+        return (index.h("div", { key: '56a639eb6e240482078fc7aaf688c75ae3de04c8', class: "twofa", ref: el => this.stylingContainer = el }, index.h("div", { key: 'a64039a3ed66556a0dc1bbac7b6fd6d60de23fa3', class: 'twofa__error-message' }, index.h("p", { key: '21adf57c840d51714ab097e9df3cc77e22be611f' }, this.errorMessage)), index.h("div", { key: '6653201178b40bc1eb5d6e7d881f2bbe150901f3', class: "twofa__description", innerHTML: translate('twofaDescription', this.language, { values: { destination: this.destination } }) }), index.h("div", { key: 'ca7600034af473838b741d5be4fe72ded9937647', class: "twofa__input-wrapper", ref: this.setContainerRef }, this.code.map((_, idx) => {
+            return (index.h("input", { key: idx, ref: el => this.setInputRef(el, idx), id: `otp-input-${idx}`, type: "text", maxLength: 2, value: this.getInputDisplayValue(idx), onInput: (event) => this.handleInput(event, idx), onKeyDown: (event) => this.handleKeyDown(event, idx), onPaste: (event) => this.handlePaste(event) }));
+        })), index.h("div", { key: '0ecd60dd5e6b3f6c3a86176e1937e7aeeffc0e92', class: "twofa__button-wrapper" }, index.h("p", { key: 'fa9608598580bb8628d0e7a208cc69e3ebe83264', class: "twofa__resend-message" }, translate('twofaResendMessage', this.language)), index.h("button", { key: 'c70ea6e780eefc8fef0002fdcc10286ae0e66619', class: `twofa__resend-button ${this.pinAttemptsExceeded ? 'twofa__resend-button--disabled' : ''}`, onClick: this.resendCodeHandler, disabled: !this.isResendButtonAvailable || this.pinAttemptsExceeded }, this.isResendButtonAvailable
             ? translate('twofaResendButton', this.language)
             : this.formatTime()))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
-        "clientStyling": ["handleStylingChange"],
         "isValid": ["validityChanged"],
         "emitValue": ["emitValueHandler"],
-        "clientStylingUrl": ["handleStylingUrlChange"]
+        "clientStylingUrl": ["handleStylingUrlChange"],
+        "clientStyling": ["handleStylingChange"]
     }; }
 };
 TwofaInput.style = TwofaInputStyle0;