@everymatrix/general-registration 1.10.4 → 1.10.10

package/dist/components/email-input2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate } from './locale.utils.js';
 
-const emailInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.email__wrapper{position:relative;display:flex;flex-direction:column-reverse;padding-top:10px}.email__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)}.email__label--required::after{content:\"*\";margin-left:5px;color:#666666}.email__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}.email__input:focus{outline:none;box-shadow:0 5px 5px rgba(16, 15, 15, 0.1)}.email__input::placeholder{color:#666666}.email__input--invalid{border-bottom:3px solid #cc0000}.email__input:placeholder-shown+.email__label{opacity:0;visibility:hidden;transform:translateY(0)}.email__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000}";
+const emailInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.email{font-family:\"Roboto\";font-style:normal}.email__wrapper{position:relative;width:100%;padding-top:26px}.email__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.email__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;margin-left:2px}.email__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:8px 20px;width:inherit;position:relative;border:2px solid #DEE1EE}.email__input:focus{outline-color:#3E3E3E}.email__input--invalid{border:2px solid #cc0000b3}.email__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}";
 
 const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -18,20 +18,33 @@ const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       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);
   }
+  valueChangedHandler(event) {
+    if (this.isDuplicateInput) {
+      if (this.name === event.detail.name + 'Duplicate') {
+        this.duplicateInputValue = event.detail.value;
+      }
+    }
+  }
   connectedCallback() {
     this.validationPattern = this.setPattern();
   }
+  componentDidLoad() {
+    if (this.defaultValue) {
+      this.value = this.defaultValue;
+      this.valueHandler({ name: this.name, value: this.value });
+    }
+  }
   handleInput(event) {
     this.value = event.target.value;
     this.errorMessage = this.setErrorMessage();
@@ -43,14 +56,15 @@ const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return this.inputReference.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;
     if (this.inputReference.validity.patternMismatch) {
-      return this.validation.custom.find(customValidation => customValidation.rule === 'regex').errorMessage;
+      return (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorMessage;
     }
     if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
       return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
@@ -58,9 +72,13 @@ const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (this.inputReference.validity.valueMissing) {
       return translate('requiredError', this.language);
     }
+    if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
+      return this.validation.custom.find(customRule => customRule.rule === 'duplicate-input').errorMessage;
+    }
   }
   render() {
-    return h("div", { class: 'email__wrapper' }, h("input", { id: `${this.name}__input`, type: 'email', class: `email__input`, value: this.defaultValue, readOnly: this.autofilled, 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: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("small", { class: 'email__error-message' }, this.errorMessage));
+    const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'email__input--invalid';
+    return h("div", { class: 'email__wrapper' }, h("input", { id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, 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: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("small", { class: 'email__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -75,9 +93,10 @@ const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "autofilled": [4],
     "language": [1],
     "emitValue": [4, "emit-value"],
+    "isDuplicateInput": [4, "is-duplicate-input"],
     "errorMessage": [32],
     "isValid": [32]
-  }]);
+  }, [[16, "sendInputValue", "valueChangedHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/general-input2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import './virtual-keyboard-controller.js';
+import './input-field-shared-styles.js';
 import { d as defineCustomElement$8 } from './date-input2.js';
 import { d as defineCustomElement$9 } from './checkbox-input2.js';
 import { d as defineCustomElement$7 } from './email-input2.js';
@@ -25,9 +25,9 @@ const GeneralInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   render() {
     switch (this.type.toLowerCase()) {
       case 'text':
-        return h("text-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language });
+        return h("text-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput });
       case 'email':
-        return h("email-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language });
+        return h("email-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput });
       case 'number':
         return h("number-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language });
       case 'checkbox':
@@ -35,7 +35,7 @@ const GeneralInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       case 'datetime':
         return h("date-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language });
       case 'password':
-        return h("password-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language });
+        return h("password-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput });
       case 'radio':
         return h("radio-input", { name: this.name, displayName: this.displayName, optionsGroup: this.options, validation: this.validation, emitValue: this.emitValue, language: this.language });
       case 'tel':
@@ -43,7 +43,6 @@ const GeneralInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       case 'dropdown':
         return h("select-input", { name: this.name, action: this.action, defaultValue: this.defaultValue, displayName: this.displayName, options: this.options, validation: this.validation, emitValue: this.emitValue, autofilled: this.autofilled, language: this.language });
       default:
-        // Nothing here
         return h("p", null, "The ", this.type, " input type is not valid");
     }
   }
@@ -58,7 +57,8 @@ const GeneralInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "language": [1],
     "autofilled": [4],
     "defaultValue": [8, "default-value"],
-    "emitValue": [4, "emit-value"]
+    "emitValue": [4, "emit-value"],
+    "isDuplicateInput": [4, "is-duplicate-input"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {