@everymatrix/general-input-hsl 0.0.1

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: '7ecca2099a381cc85094e079a2f43e975d736cef', class: "twofa" }, h("div", { key: '304e3aed1f98557d39614fb165d12f9a09b00e1f', class: 'twofa__error-message' }, h("p", { key: '7b05b7a203918df3abbecc500547b696e0b621a6' }, this.errorMessage)), h("div", { key: '2bb05986311a53c02a825da485ce66d23fbd38bb', class: "twofa__description", innerHTML: translate('twofaDescription', this.language, { values: { destination: this.destination } }) }), h("div", { key: 'c2761ea3d3528cb33a1aedc8321f425deafd5cfd', 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: '0478bfdee48cf1a066cf93ac791e82df43eb73f8', class: "twofa__button-wrapper" }, h("p", { key: '7e100b0c404b2b7e7327cf3a29da72d4d6accd7b', class: "twofa__resend-message" }, translate('twofaResendMessage', this.language)), h("button", { key: 'be335e68240059206a284b687c71b0fafd97b997', 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-hsl/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-hsl/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-hsl/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/index.js

@@ -0,0 +1 @@
+export * from './components/general-input-hsl';

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

@@ -0,0 +1,81 @@
+const DEFAULT_LANGUAGE = 'en';
+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.",
+        "invalidOriginalPasswordError": "Initial password field does not validate all criteria.",
+        "invalidPassword": "Password does not meet all criteria",
+        "passwordStrength": "Password strength",
+        "passwordStrengthWeak": "is not adequate",
+        "passwordStrengthStrong": "is adequate",
+        "SpecialCharactersNotAllowed": "Should not contain special characters",
+        "InvalidEmailFormat": "Invalid email format.",
+        "EmailNotMatching": "Emails not matching!",
+        "PasswordNotMatching": "Passwords not matching",
+        "MustIncludeNumber": "Password must include a number",
+        "MustContainCapital": "Password must include a capital letter",
+        "MustIncludePunctation": "Password must include punctuation",
+        "OnlyNumbers": "The input should contain only digits.",
+        "InvalidFieldSize": "The length must be exactly 11 digits.",
+        "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ő.",
+        "invalidOriginalPasswordError": "Initial password field does not validate all criteria.",
+        "invalidPassword": "A jelszó nem felel meg minden kritériumnak",
+        "passwordStrength": "Jelszó erőssége",
+        "passwordStrengthWeak": "nem megfelelő",
+        "passwordStrengthStrong": "megfelelő",
+        "SpecialCharactersNotAllowed": "Nem tartalmazhat speciális karaktereket",
+        "InvalidEmailFormat": "Érvénytelen e-mail formátum.",
+        "EmailNotMatching": "Az e-mailek nem egyeznek!",
+        "PasswordNotMatching": "A jelszavak nem egyeznek",
+        "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á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"
+    }
+};
+export const translate = (key, customLang, values) => {
+    const lang = customLang;
+    let translation = TRANSLATIONS[lang !== undefined ? lang : DEFAULT_LANGUAGE][key];
+    if (values !== undefined) {
+        for (const [key, value] of Object.entries(values.values)) {
+            const regex = new RegExp(`{${key}}`, 'g');
+            translation = translation.replace(regex, value);
+        }
+    }
+    return translation;
+};
+export const getTranslations = (url) => {
+    // fetch url, get the data, replace the TRANSLATIONS content
+    return new Promise((resolve) => {
+        fetch(url)
+            .then((res) => res.json())
+            .then((data) => {
+            Object.keys(data).forEach((item) => {
+                for (let key in data[item]) {
+                    TRANSLATIONS[item][key] = data[item][key];
+                }
+            });
+            resolve(true);
+        });
+    });
+};

package/dist/collection/utils/tooltipIcon.svg

@@ -0,0 +1,5 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="6" cy="6" r="5.5" stroke="#979797"/>
+<rect x="5" y="5" width="2" height="5" fill="#979797"/>
+<circle cx="6" cy="3" r="1" fill="#979797"/>
+</svg>

package/dist/collection/utils/types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}

package/dist/esm/app-globals-0f993ce5.js

@@ -0,0 +1,3 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };