@everymatrix/general-input 1.69.2 → 1.70.0

package/dist/collection/components/twofa-input/twofa-input.js

@@ -0,0 +1,495 @@
+import { h } from "@stencil/core";
+import { translate } from "../../utils/locale.utils";
+export class TwofaInput {
+    constructor() {
+        this.validationPattern = '';
+        this.stylingContainer = null;
+        this.tooltipReference = null;
+        this.tooltipIconReference = null;
+        this.inputRefs = [];
+        this.containerRef = null;
+        this.resendInterval = null;
+        this.resendCodeHandler = () => {
+            this.triggerResendInterval();
+            this.resendCode.emit();
+        };
+        this.setInputRef = (el, idx) => {
+            if (el) {
+                this.inputRefs[idx] = el;
+            }
+        };
+        this.setContainerRef = (el) => {
+            if (el) {
+                this.containerRef = el;
+            }
+        };
+        this.triggerResendInterval = () => {
+            this.isResendButtonAvailable = false;
+            if (this.resendInterval) {
+                clearInterval(this.resendInterval);
+            }
+            this.resendInterval = setInterval(() => {
+                if (--this.resendIntervalSecondsLeft <= 0) {
+                    clearInterval(this.resendInterval);
+                    this.resendIntervalSecondsLeft = this.resendIntervalSeconds;
+                    this.isResendButtonAvailable = true;
+                }
+            }, 1000);
+        };
+        this.formatTime = () => {
+            const minutes = String(Math.floor(this.resendIntervalSecondsLeft / 60));
+            let seconds = String(this.resendIntervalSecondsLeft % 60);
+            if (seconds.length === 1) {
+                seconds = '0' + seconds;
+            }
+            return `${minutes}:${seconds}`;
+        };
+        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) {
+                return;
+            }
+            this.code[idx] = input.value;
+            const nextInput = this.inputRefs[idx + 1];
+            if (nextInput) {
+                nextInput.focus();
+            }
+            this.setValidity();
+            this.setErrorMessage();
+        };
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.stylingContainer.prepend(sheet);
+        };
+        this.name = '';
+        this.displayName = '';
+        this.placeholder = '';
+        this.validation = undefined;
+        this.tooltip = '';
+        this.language = 'en';
+        this.emitValue = true;
+        this.destination = '';
+        this.resendIntervalSeconds = 60;
+        this.clientStyling = '';
+        this.limitStylingAppends = false;
+        this.isValid = false;
+        this.isResendButtonAvailable = true;
+        this.showTooltip = false;
+        this.errorMessage = '';
+        this.code = [];
+        this.resendIntervalSecondsLeft = this.resendIntervalSeconds;
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
+    }
+    validityChanged() {
+        this.validityStateHandler({ valid: this.isValid, name: this.name });
+        if (this.emitValue == true) {
+            this.valueHandler({ name: this.name, value: this.code.join('') });
+        }
+    }
+    emitValueHandler(newValue) {
+        if (newValue == true && this.isValid) {
+            this.valueHandler({ name: this.name, value: this.code.join('') });
+        }
+    }
+    validityStateHandler(inputStateEvent) {
+        this.sendValidityState.emit(inputStateEvent);
+    }
+    valueHandler(inputValueEvent) {
+        this.sendInputValue.emit(inputValueEvent);
+    }
+    handleClickOutside(event) {
+        if (event.composedPath()[0] === this.tooltipIconReference)
+            return;
+        if (event.composedPath()[0] !== this.tooltipReference)
+            this.showTooltip = false;
+    }
+    connectedCallback() {
+        this.validationPattern = this.setPattern();
+        this.code = new Array(this.validation.maxLength).fill('');
+    }
+    componentDidRender() {
+        if (!this.limitStylingAppends && this.stylingContainer) {
+            if (this.clientStyling) {
+                this.setClientStyling();
+            }
+            this.limitStylingAppends = true;
+        }
+    }
+    componentDidLoad() {
+        this.setValidity();
+    }
+    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();
+            }
+        }
+        this.setValidity();
+        this.setErrorMessage();
+    }
+    handlePaste(e) {
+        var _a;
+        e.preventDefault();
+        const data = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text').trim();
+        if (!data) {
+            return;
+        }
+        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();
+        }
+        this.setValidity();
+        this.setErrorMessage();
+    }
+    setValidity() {
+        const code = this.code.join('');
+        const inputMatchLength = code.length === this.validation.maxLength;
+        const inputMatchValidation = code.match(this.validationPattern) !== null;
+        this.isValid = inputMatchLength && inputMatchValidation;
+    }
+    setPattern() {
+        var _a, _b;
+        if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
+        }
+    }
+    setErrorMessage() {
+        var _a;
+        const inputMatchValidation = this.code.join('').match(this.validationPattern) !== null;
+        if (!inputMatchValidation) {
+            const errorKey = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
+            if (errorKey) {
+                this.errorMessage = translate(errorKey, this.language);
+            }
+        }
+        else {
+            this.errorMessage = '';
+        }
+    }
+    renderTooltip() {
+        if (this.showTooltip) {
+            return h("div", { class: `text__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip });
+        }
+        return null;
+    }
+    render() {
+        return (h("div", { key: 'cc140f18806c0cc8e4ff614a1a3448dbca667fa7', class: "twofa" }, h("div", { key: 'fc3b603e1d1a7187417301dfebe80dabfd8cda67', class: 'twofa__error-message' }, h("p", { key: '60e2cff194ec862de20aa443864861d784b8dc01' }, this.errorMessage)), h("div", { key: '244505408204938069dca1f60dbe051716f66f85', class: "twofa__description", innerHTML: translate('twofaDescription', this.language, { values: { destination: this.destination } }) }), h("div", { key: 'acb6b8e1676a884d1c7ceced800f6ba3a2e80bc7', class: "twofa__input-wrapper", ref: this.setContainerRef }, this.code.map((char, idx) => {
+            return (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) }));
+        })), h("div", { key: '446eba5a8fe3fb0ede66869642d395bac9c6b8d6', class: "twofa__button-wrapper" }, h("p", { key: '9f205fd87920d866d49eb98b2a8ab6f3764fd274', class: "twofa__resend-message" }, translate('twofaResendMessage', this.language)), h("button", { key: 'efd2294b1d85a78c0d65262cc2004b5e63a898ab', class: "twofa__resend-button", onClick: this.resendCodeHandler, disabled: !this.isResendButtonAvailable }, this.isResendButtonAvailable
+            ? translate('twofaResendButton', this.language)
+            : this.formatTime()))));
+    }
+    static get is() { return "twofa-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["twofa-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["twofa-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the input."
+                },
+                "attribute": "name",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "displayName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of input to be shown to the user."
+                },
+                "attribute": "display-name",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text to be shown."
+                },
+                "attribute": "placeholder",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "validation": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ValidationSchema",
+                    "resolved": "ValidationSchema",
+                    "references": {
+                        "ValidationSchema": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "../../../../packages/stencil/general-input/src/utils/types.ts::ValidationSchema"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Object of validation rules for the input."
+                }
+            },
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip text."
+                },
+                "attribute": "tooltip",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "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'"
+            },
+            "emitValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "State passed down from the parent element. Will trigger the input to send it's value through an event."
+                },
+                "attribute": "emit-value",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "destination": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "destination where the code is sent, only for display purposes here"
+                },
+                "attribute": "destination",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "resendIntervalSeconds": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "code resend interval in seconds"
+                },
+                "attribute": "resend-interval-seconds",
+                "reflect": true,
+                "defaultValue": "60"
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via inline style"
+                },
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "limitStylingAppends": {},
+            "isValid": {},
+            "isResendButtonAvailable": {},
+            "showTooltip": {},
+            "errorMessage": {},
+            "code": {},
+            "resendIntervalSecondsLeft": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sendValidityState",
+                "name": "sendValidityState",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "InputStateEvent",
+                    "resolved": "InputStateEvent",
+                    "references": {
+                        "InputStateEvent": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "../../../../packages/stencil/general-input/src/utils/types.ts::InputStateEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "sendInputValue",
+                "name": "sendInputValue",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "InputValueEvent",
+                    "resolved": "InputValueEvent",
+                    "references": {
+                        "InputValueEvent": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "../../../../packages/stencil/general-input/src/utils/types.ts::InputValueEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "resendCode",
+                "name": "resendCode",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleStylingChange"
+            }, {
+                "propName": "isValid",
+                "methodName": "validityChanged"
+            }, {
+                "propName": "emitValue",
+                "methodName": "emitValueHandler"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClickOutside",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -3,6 +3,7 @@ export const TRANSLATIONS = {
     "en": {
         "dateError": "The selected date should be between {min} and {max}",
         "dateError2": "The selected date is not within the accepted range",
+        "dateFormatError": "The selected date has a different format then the one required.",
         "numberLengthError": "The number should be between {min} and {max}",
         "lengthError": "The length should be between {minLength} and {maxLength}",
         "requiredError": "This input is required.",
@@ -18,12 +19,17 @@ export const TRANSLATIONS = {
         "MustIncludeNumber": "Password must include a number",
         "MustContainCapital": "Password must include a capital letter",
         "MustIncludePunctation": "Password must include punctuation",
-        "OnlyNumbers": "Should contains only numbers.",
+        "OnlyNumbers": "The input should contain only digits.",
         "InvalidFieldSize": "The length must be exactly 11 digits.",
-        "InvalidDocumentNumber": "Only numerical characters are allowed."
+        "InvalidDocumentNumber": "Only numerical characters are allowed.",
+        "twofaDescription": "<p> We have sent the verification code to <p> {destination}. </p> </p> <p> Please insert the PIN below. </p>",
+        "twofaResendMessage": "Didn't receive the verification code?",
+        "twofaResendButton": "Resend",
     },
     "hu": {
         "dateError": "A választott dátumnak {min} és {max} között kell lennie",
+        "dateError2": "A kiválasztott dátum nincs az elfogadott tartományon belül",
+        "dateFormatError": "A kiválasztott dátum formátuma eltér a szükségestől.",
         "numberLengthError": "A számnak {min} és {max} között kell lennie",
         "lengthError": "A hossznak {minLength} és {maxLength} között kell lennie",
         "requiredError": "Ez a beviteli mező kötelező.",
@@ -39,13 +45,17 @@ export const TRANSLATIONS = {
         "MustIncludeNumber": "A jelszónak tartalmaznia kell egy számot",
         "MustContainCapital": "A jelszónak tartalmaznia kell egy nagybetűt",
         "MustIncludePunctation": "A jelszónak tartalmaznia kell írásjelet",
-        "OnlyNumbers": "Csak számokat kell tartalmaznia.",
+        "OnlyNumbers": "Csak számjegyeket tartalmazhat.",
         "InvalidFieldSize": "A hosszúságnak pontosan 11 számjegynek kell lennie.",
         "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"
     },
     "hr": {
         "dateError": "Odabrani datum treba biti između {min} i {max}",
         "dateError2": "Odabrani datum nije unutar prihvaćenog raspona",
+        "dateFormatError": "Odabrani datum je u drugačijem formatu od potrebnog.",
         "numberLengthError": "Broj bi trebao biti između {min} i {max}",
         "lengthError": "Duljina bi trebala biti između {minLength} i {maxLength}",
         "requiredError": "Ovaj unos je obavezan.",
@@ -61,13 +71,17 @@ export const TRANSLATIONS = {
         "MustIncludeNumber": "Lozinka mora sadržavati broj",
         "MustContainCapital": "Lozinka mora sadržavati veliko slovo",
         "MustIncludePunctation": "Lozinka mora sadržavati barem jedan znak",
-        "OnlyNumbers": "Treba sadržavati samo brojeve.",
+        "OnlyNumbers": "Smije sadržavati samo znamenke.",
         "InvalidFieldSize": "Dužina mora biti točno 11 znamenki.",
-        "InvalidDocumentNumber": "Dopušteni su samo numerički znakovi."
+        "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"
     },
     "tr": {
         "dateError": "Seçilen tarih {min} ve {max} arasında olmalıdır",
         "dateError2": "Seçilen tarih kabul edilen aralıkta değil",
+        "dateFormatError": "Seçilen tarihin formatı, gereken formattan farklı.",
         "numberLengthError": "Sayı {min} ve {max} arasında olmalıdır",
         "lengthError": "Uzunluk {minLength} ve {maxLength} arasında olmalıdır",
         "requiredError": "Bu alan zorunludur.",
@@ -83,13 +97,17 @@ export const TRANSLATIONS = {
         "MustIncludeNumber": "bir sayı içermelidir",
         "MustContainCapital": "büyük harf içermelidir",
         "MustIncludePunctation": "noktalama işareti içermelidir",
-        "OnlyNumbers": "Sadece sayılar içermelidir.",
+        "OnlyNumbers": "Yalnızca rakamlar içermelidir.",
         "InvalidFieldSize": "Uzunluk tam olarak 11 rakam olmalıdır.",
-        "InvalidDocumentNumber": "Sadece sayısal karakterlere izin verilir."
+        "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"
     },
     "pt-br": {
         "dateError": "A data selecionada deve estar entre {min} e {max}",
         "dateError2": "A data selecionada não está dentro de um intervalo válido",
+        "dateFormatError": "A data selecionada está em um formato diferente do exigido.",
         "numberLengthError": "O número deve estar entre {min} e {max}",
         "lengthError": "O comprimento deve estar entre {minLength} e {maxLength}",
         "requiredError": "Este campo é obrigatório",
@@ -105,13 +123,17 @@ export const TRANSLATIONS = {
         "MustIncludeNumber": "A senha deve incluir um número",
         "MustContainCapital": "A senha deve incluir uma letra maiúscula",
         "MustIncludePunctation": "A senha deve incluir um sinal de pontuação",
-        "OnlyNumbers": "Deve conter apenas números",
+        "OnlyNumbers": "Deve conter apenas dígitos.",
         "InvalidFieldSize": "O comprimento deve ser exatamente 11 dígitos.",
-        "InvalidDocumentNumber": "Apenas caracteres numéricos são permitidos."
+        "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"
     },
     "es-mx": {
         "dateError": "La fecha seleccionada debe ser entre {min} y {max}",
         "dateError2": "La fecha seleccionada no está dentro de un rango válido",
+        "dateFormatError": "La fecha seleccionada tiene un formato diferente al requerido.",
         "numberLengthError": "El número debe ser entre {min} y {max}",
         "lengthError": "La longitud deber ser entre {minLength} y {maxLength}",
         "requiredError": "Este campo es requerido",
@@ -127,9 +149,12 @@ export const TRANSLATIONS = {
         "MustIncludeNumber": "La contraseña debe incluir un número",
         "MustContainCapital": "La contraseña debe incluir una letra mayúscula",
         "MustIncludePunctation": "La contraseña debe incluir un signo de puntuación",
-        "OnlyNumbers": "Solo debe contener números",
+        "OnlyNumbers": "Debe contener solo dígitos.",
         "InvalidFieldSize": "La longitud debe ser exactamente de 11 dígitos.",
-        "InvalidDocumentNumber": "Solo se permiten caracteres numéricos."
+        "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"
     }
 };
 export const translate = (key, customLang, values) => {