@everymatrix/general-input 1.10.2 → 1.15.0

package/dist/components/text-input2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { t as translate } from './locale.utils.js';
+import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
 
-const textInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.text__wrapper{position:relative;display:flex;flex-direction:column-reverse;padding-top:10px}.text__label{color:#474747;font-size:16px;position:absolute;bottom:15px;left:5px;transform:translateY(-25px);transition:all 0.3s cubic-bezier(0.5, 0, 0.5, 1)}.text__label--required::after{content:\"*\";margin-left:5px;color:#666666}.text__input{width:inherit;padding:15px 6px;position:relative;border:none;border-bottom:3px solid #666666;background-color:transparent;color:#666666;font-size:16px;font-family:inherit}.text__input:focus{outline:none;box-shadow:0 5px 5px rgba(16, 15, 15, 0.1)}.text__input::placeholder{color:#666666}.text__input--invalid{border-bottom:3px solid #cc0000}.text__input:placeholder-shown+.text__label{opacity:0;visibility:hidden;transform:translateY(0)}.text__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000}";
+const textInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.text{font-family:\"Roboto\";font-style:normal}.text__wrapper{position:relative;width:100%}.text__wrapper--autofilled{pointer-events:none}.text__wrapper--autofilled .text__label{color:#979797}.text__wrapper--autofilled .text__input::part(input-field){color:#979797}.text__wrapper--flex{display:flex;gap:5px}.text__wrapper--relative{position:relative}.text__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.text__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.text__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;padding:10px 20px;width:inherit;position:relative;border:2px solid #DEE1EE}.text__input:focus{outline-color:#3E3E3E}.text__input--invalid{border:2px solid #cc0000b3}.text__input::placeholder{color:#979797}.text__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.text__tooltip-icon{width:16px;height:auto}.text__tooltip{position:absolute;top:0;left:20px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.text__tooltip.visible{opacity:1}";
 
 const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -14,58 +14,124 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Default value for the input.
      */
     this.defaultValue = '';
+    /**
+     * Client custom styling via inline style
+     */
+    this.clientStyling = '';
     this.errorMessage = '';
+    this.limitStylingAppends = false;
+    this.showTooltip = false;
     this.value = '';
-    this.customRules = [];
     this.validationPattern = '';
+    this.duplicateInputValue = null;
+    this.touched = false;
+    this.handleInput = (event) => {
+      this.value = event.target.value;
+      this.touched = true;
+      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.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.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
   }
   validityChanged() {
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
     if (this.emitValue == true) {
       this.valueHandler({ name: this.name, value: this.value });
     }
   }
-  validityStateHandler(inputStateEvent) {
-    this.sendValidityState.emit(inputStateEvent);
-  }
   emitValueHandler(newValue) {
     if (newValue == true && this.isValid) {
       this.valueHandler({ name: this.name, value: this.value });
     }
   }
+  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;
+  }
+  valueChangedHandler(event) {
+    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();
+      }
+    }
+    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();
+    }
+  }
   connectedCallback() {
-    // @TODO do something with customRules !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-    this.customRules = this.setCustomRules();
     this.validationPattern = this.setPattern();
   }
-  handleInput(event) {
-    this.value = event.target.value;
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
+  componentDidLoad() {
+    if (this.defaultValue) {
+      this.value = this.defaultValue;
+      this.valueHandler({ name: this.name, value: this.value });
+      if (this.isDuplicateInput) {
+        this.touched = true;
+      }
+    }
     this.isValid = this.setValidity();
-    this.errorMessage = this.setErrorMessage();
-    this.validityStateHandler({ valid: this.isValid, name: this.name });
-    this.emitValueHandler(true);
   }
   setValidity() {
-    return this.inputReference.validity.valid;
-  }
-  // @TODO type here
-  setCustomRules() {
     var _a;
-    if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      return this.validation.custom.filter(customValidation => customValidation.rule !== 'regex');
+    if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
+      return false;
+    }
+    else {
+      return (_a = this.inputReference) === null || _a === void 0 ? void 0 : _a.validity.valid;
     }
   }
   setPattern() {
-    var _a;
+    var _a, _b;
     if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      return this.validation.custom.find(customValidation => customValidation.rule === 'regex').pattern;
+      return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
     }
   }
   setErrorMessage() {
+    var _a, _b, _c, _d;
     if (this.inputReference.validity.patternMismatch) {
-      return this.validation.custom.find(customValidation => customValidation.rule === 'regex').errorMessage;
+      const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
+      const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
+      return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
     }
     if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
       return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
@@ -73,11 +139,25 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (this.inputReference.validity.valueMissing) {
       return translate('requiredError', this.language);
     }
+    if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
+      const errorCode = (_c = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _c === void 0 ? void 0 : _c.errorKey;
+      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;
+    }
+  }
+  renderTooltip() {
+    if (this.showTooltip) {
+      return (h("div", { class: `text__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
+    }
+    return null;
   }
   render() {
-    const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
-    console.log('this', this.name, this.defaultValue, this.displayName);
-    return h("div", { class: 'text__wrapper' }, h("input", { id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onBlur: (e) => { this.handleInput(e); } }), h("label", { class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("small", { class: 'text__error-message' }, this.errorMessage));
+    let invalidClass = '';
+    if (this.touched) {
+      invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
+    }
+    return h("div", { class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h("div", { class: 'text__wrapper--flex' }, h("label", { class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { class: 'text__wrapper--relative' }, this.tooltip &&
+      h("img", { class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { class: 'text__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -85,17 +165,23 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }; }
   static get style() { return textInputCss; }
 }, [1, "text-input", {
-    "name": [1025],
-    "displayName": [1, "display-name"],
+    "name": [513],
+    "displayName": [513, "display-name"],
+    "placeholder": [513],
     "validation": [16],
-    "defaultValue": [1025, "default-value"],
-    "rules": [1],
-    "language": [1],
-    "checkValidity": [4, "check-validity"],
-    "emitValue": [4, "emit-value"],
+    "defaultValue": [513, "default-value"],
+    "autofilled": [516],
+    "tooltip": [513],
+    "language": [513],
+    "checkValidity": [516, "check-validity"],
+    "emitValue": [516, "emit-value"],
+    "isDuplicateInput": [516, "is-duplicate-input"],
+    "clientStyling": [513, "client-styling"],
     "isValid": [32],
-    "errorMessage": [32]
-  }]);
+    "errorMessage": [32],
+    "limitStylingAppends": [32],
+    "showTooltip": [32]
+  }, [[4, "click", "handleClickOutside"], [16, "sendInputValue", "valueChangedHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/toggle-checkbox-input.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ToggleCheckboxInput extends Components.ToggleCheckboxInput, HTMLElement {}
+export const ToggleCheckboxInput: {
+  prototype: ToggleCheckboxInput;
+  new (): ToggleCheckboxInput;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { T as ToggleCheckboxInput$1, a as defineCustomElement$1 } from './general-input2.js';
+
+const ToggleCheckboxInput = ToggleCheckboxInput$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ToggleCheckboxInput, defineCustomElement };

package/dist/components/tooltipIcon.js

@@ -0,0 +1,70 @@
+const DEFAULT_LANGUAGE = 'en';
+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."
+  }
+};
+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;
+};
+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);
+    });
+  });
+};
+
+const tooltipIconSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iNiIgY3k9IjYiIHI9IjUuNSIgc3Ryb2tlPSIjOTc5Nzk3Ii8+CjxyZWN0IHg9IjUiIHk9IjUiIHdpZHRoPSIyIiBoZWlnaHQ9IjUiIGZpbGw9IiM5Nzk3OTciLz4KPGNpcmNsZSBjeD0iNiIgY3k9IjMiIHI9IjEiIGZpbGw9IiM5Nzk3OTciLz4KPC9zdmc+Cg==';
+
+export { tooltipIconSvg as a, getTranslations as g, translate as t };