@everymatrix/general-input 0.0.1 → 1.0.69

package/dist/collection/components/toggle-checkbox-input/toggle-checkbox-input.css

@@ -0,0 +1,82 @@
+*,
+*::before,
+*::after {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.togglecheckbox {
+  font-family: "Roboto";
+  font-style: normal;
+  font-size: 15px;
+}
+.togglecheckbox__wrapper {
+  position: relative;
+}
+.togglecheckbox__wrapper--flex {
+  display: flex;
+  gap: 10px;
+  align-items: baseline;
+}
+.togglecheckbox__wrapper--relative {
+  position: relative;
+  display: inline;
+}
+.togglecheckbox__input {
+  transform: scale(1.307, 1.307);
+  margin-left: 2px;
+  accent-color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
+}
+.togglecheckbox__label {
+  font-style: inherit;
+  font-family: inherit;
+  font-weight: 400;
+  font-size: 16px;
+  color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
+  line-height: 1.5;
+  cursor: pointer;
+  padding: 0;
+}
+.togglecheckbox__label-text {
+  font-size: 16px;
+}
+.togglecheckbox__label a {
+  color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
+}
+.togglecheckbox__error-message {
+  position: absolute;
+  top: calc(100% + 5px);
+  left: 0;
+  color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
+}
+.togglecheckbox__tooltip-icon {
+  width: 16px;
+  height: auto;
+}
+.togglecheckbox__tooltip {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background-color: var(--emfe-w-color-white, #FFFFFF);
+  border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
+  color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
+  padding: 10px;
+  border-radius: 5px;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+  z-index: 10;
+}
+.togglecheckbox__tooltip.visible {
+  opacity: 1;
+}
+.togglecheckbox__fields-wrapper {
+  margin-top: 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+
+.hidden {
+  display: none;
+}

package/dist/collection/components/toggle-checkbox-input/toggle-checkbox-input.js

@@ -0,0 +1,336 @@
+import { h } from "@stencil/core";
+import { translate } from "../../utils/locale.utils";
+import tooltipIcon from "../../utils/tooltipIcon.svg";
+export class ToggleCheckboxInput {
+    constructor() {
+        this.value = '';
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.stylingContainer.prepend(sheet);
+        };
+        this.name = undefined;
+        this.displayName = undefined;
+        this.defaultValue = '';
+        this.options = undefined;
+        this.autofilled = undefined;
+        this.tooltip = undefined;
+        this.validation = undefined;
+        this.language = undefined;
+        this.emitValue = undefined;
+        this.clientStyling = '';
+        this.errorMessage = undefined;
+        this.isValid = undefined;
+        this.limitStylingAppends = false;
+        this.showTooltip = false;
+        this.showFields = undefined;
+    }
+    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;
+    }
+    componentDidRender() {
+        // start custom styling area
+        if (!this.limitStylingAppends && this.stylingContainer) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            this.limitStylingAppends = true;
+        }
+        // end custom styling area
+    }
+    handleClick() {
+        this.showFields = this.checkboxReference.checked;
+        this.errorMessage = this.setErrorMessage();
+        this.isValid = this.setValidity();
+    }
+    setValidity() {
+        return this.checkboxReference.validity.valid;
+    }
+    setErrorMessage() {
+        if (this.checkboxReference.validity.valueMissing) {
+            return translate('requiredError', this.language);
+        }
+    }
+    renderLabel() {
+        return (h("label", { class: 'togglecheckbox__label', htmlFor: `${this.name}__input` }, h("div", { class: 'togglecheckbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
+    }
+    renderTooltip() {
+        if (this.showTooltip) {
+            return (h("div", { class: `togglecheckbox__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
+        }
+        return null;
+    }
+    render() {
+        return h("div", { key: 'd5a645fdc3409f4efdc3319c07cded8c1931991c', class: `togglecheckbox__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'c18e410777502b3609dd0872487cc8281e1adf25', class: 'togglecheckbox__wrapper--flex' }, h("input", { key: '7c2f6204300b5c046c9ad909089619f39f6cda83', class: 'togglecheckbox__input', type: "checkbox", id: `${this.name}__input`, ref: (el) => this.checkboxReference = el, name: this.name, checked: this.defaultValue === "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel()), h("small", { key: '24e57e5a5dd20e5f646a69c4fa0c0bbbe38aba1f', class: 'togglecheckbox__error-message' }, this.errorMessage), h("div", { key: 'eea41bc49a5c572d86a595880d4c60093f15156e', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
+            h("img", { key: 'bb093e1c928cf87ea69a2c49a784395bd82e542e', class: 'togglecheckbox__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("div", { key: 'eda4df7b1669eca99d4013877e2ef082ea54984c', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
+            return h("general-input", { type: subfield.inputType, name: subfield.name, displayName: subfield.displayName, validation: subfield.validate, action: subfield.action || null, defaultValue: subfield.defaultValue, autofilled: subfield.autofill, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: subfield.tooltip, placeholder: subfield.placeholder == null ? '' : subfield.placeholder });
+        })));
+    }
+    static get is() { return "toggle-checkbox-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["toggle-checkbox-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["toggle-checkbox-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
+            },
+            "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": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default value for the input."
+                },
+                "attribute": "default-value",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "RegCfgContentField[]",
+                    "resolved": "RegCfgContentField[]",
+                    "references": {
+                        "RegCfgContentField": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "../../../../packages/stencil/general-input/src/utils/types.ts::RegCfgContentField"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Options of the input."
+                }
+            },
+            "autofilled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Boolean. Determines if input should be readonly."
+                },
+                "attribute": "autofilled",
+                "reflect": true
+            },
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip text."
+                },
+                "attribute": "tooltip",
+                "reflect": true
+            },
+            "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."
+                }
+            },
+            "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
+            },
+            "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
+            },
+            "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 {
+            "errorMessage": {},
+            "isValid": {},
+            "limitStylingAppends": {},
+            "showTooltip": {},
+            "showFields": {}
+        };
+    }
+    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"
+                        }
+                    }
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClickOutside",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/index.js

@@ -1 +1,17 @@
+function safeDecorator(fn) {
+    // eslint-disable-next-line func-names
+    return function (...args) {
+        try {
+            return fn.apply(this, args);
+        }
+        catch (error) {
+            if (error instanceof DOMException &&
+                error.message.includes('has already been used with this registry') || error.message.includes('Cannot define multiple custom elements with the same tag name')) {
+                return false;
+            }
+            throw error;
+        }
+    };
+}
+customElements.define = safeDecorator(customElements.define);
 export * from './components';

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

@@ -1,26 +1,123 @@
 const DEFAULT_LANGUAGE = 'en';
-const TRANSLATIONS = {
-  "en": {
-    "dateError": 'The selected date should be between {min} and {max}',
-    "numberLengthError": 'The number should be between {min} and {max}',
-    "lengthError": `The length should be between {minLength} and {maxLength}`,
-    "requiredError": 'This input is required.',
-  },
-  "hu": {
-    "dateError": 'A választott dátumnak {min} és {max} között kell lennie',
-    "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ő.',
-  }
+export const TRANSLATIONS = {
+    "en": {
+        "dateError": 'The selected date should be between {min} and {max}',
+        "dateError2": 'The selected date is not within the accepted range',
+        "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.",
+        "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": "include a number",
+        "MustContainCapital": "contain capital letters",
+        "MustIncludePunctation": "punctuation",
+        "OnlyNumbers": "Should contains only numbers."
+    },
+    "hu": {
+        "dateError": 'A választott dátumnak {min} és {max} között kell lennie',
+        "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.",
+        "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": "tartalmaznia kell egy számot",
+        "MustContainCapital": "nagybetűket kell tartalmaznia",
+        "MustIncludePunctation": "írásjelet",
+        "OnlyNumbers": "Csak számokat kell tartalmaznia."
+    },
+    "hr": {
+        "dateError": 'Odabrani datum treba biti između {min} i {max}',
+        "dateError2": 'Odabrani datum nije unutar prihvaćenog raspona',
+        "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.',
+        "invalidOriginalPasswordError": "Polje početne lozinke ne potvrđuje sve kriterije",
+        "passwordStrength": "Jačina zaporke",
+        "passwordStrengthWeak": "nije adekvatno",
+        "passwordStrengthStrong": "je adekvatan",
+        "SpecialCharactersNotAllowed": 'Ne smije sadržavati posebne znakove',
+        "InvalidEmailFormat": "Nevažeći format e-maila",
+        "EmailNotMatching": "E-mailovi se ne podudaraju!",
+        "PasswordNotMatching": "Lozinke se ne podudaraju",
+        "MustIncludeNumber": "uključiti broj",
+        "MustContainCapital": "sadrže velika slova",
+        "MustIncludePunctation": "interpunkcija",
+        "OnlyNumbers": "Treba sadržavati samo brojeve."
+    },
+    '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",
+        "numberLengthError": "O número deve estar entre {min} e {max}",
+        "lengthError": "O comprimento deve estar entre {minLength} e {maxLength}",
+        "requiredError": "Este campo é obrigatório",
+        "invalidOriginalPasswordError": "O campo de senha inicial não faz parte dos critérios válidos",
+        "PasswordStrength": "Força da senha",
+        "PasswordStrengthWeak": "Não é adequado",
+        "PasswordStrengthStrong": "é apropriado",
+        "SpecialCharactersNotAllowed": "Não deve conter caracteres especiais",
+        "InvalidEmailFormat": "Formato de email inválido",
+        "EmailNotMatching": "E-mail não corresponde",
+        "PasswordNotMatching": "Senha não corresponde",
+        "MustIncludeNumber": "inclui um número",
+        "MustContainCapital": "contém letras maiúsculas",
+        "MustIncludePunctation": "pontuação",
+        "OnlyNumbers": "Deve conter apenas números"
+    },
+    'es-mx': {
+        "dateError": "La fecha seleccionada debe ser entre {min} y {max}",
+        "dateError2": "La fecha seleccionada no está dentro de un rango válido",
+        "numberLengthError": "El número debe ser entre {min} y {max}",
+        "lengthError": "La longitud deber ser entre {minLength} y {maxLength}",
+        "requiredError": "Este campo es requerido",
+        "invalidOriginalPasswordError": "El campo de contraseña inicial no es parte del criterio válido",
+        "PasswordStrength": "La fortaleza de la contraseña",
+        "PasswordStrengthWeak": "no es adecuada",
+        "PasswordStrengthStrong": "es adecuada",
+        "SpecialCharactersNotAllowed": "No debe contener caracteres especiales",
+        "InvalidEmailFormat": "Formato inválido de correo",
+        "EmailNotMatching": "El correo electrónico no coincide",
+        "PasswordNotMatching": "La contraseña no coincide",
+        "MustIncludeNumber": "incluye un número",
+        "MustContainCapital": "contiene mayúsculas",
+        "MustIncludePunctation": "puntuación",
+        "OnlyNumbers": "Solo debe contener números"
+    }
 };
 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);
+    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;
+    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

@@ -1,5 +1,5 @@
-<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="11.9099" y="16.15" width="1.82" height="7.60001" transform="rotate(-180 11.9099 16.15)" fill="#2B2D3F"/>
-<rect x="11.9099" y="6.65002" width="1.82" height="1.90001" transform="rotate(-180 11.9099 6.65002)" fill="#2B2D3F"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.98999 10.45C0.98999 4.67768 5.47197 0 11 0C16.528 0 21.01 4.67768 21.01 10.45C21.01 16.221 16.528 20.9 11 20.9C5.47197 20.9 0.98999 16.221 0.98999 10.45ZM2.80999 10.4506C2.80999 15.1723 6.47677 19 11 19C15.522 19 19.19 15.1723 19.19 10.4506C19.19 5.72891 15.522 1.90001 11 1.90001C6.47677 1.90001 2.80999 5.72891 2.80999 10.4506Z" fill="#2B2D3F"/>
+<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/utils.js

@@ -1,5 +1,5 @@
 export function formatName(name) {
-  return name
-    .replace(/([A-Z])/g, ' $1')
-    .replace(/^./, function (str) { return str.toUpperCase(); });
+    return name
+        .replace(/([A-Z])/g, ' $1')
+        .replace(/^./, function (str) { return str.toUpperCase(); });
 }

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

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