@everymatrix/general-registration 1.10.5 → 1.10.10

package/dist/components/pattern-mixin.js

@@ -0,0 +1,84 @@
+import { I as InputConstraintsMixin, D as Debouncer, e as timeOut } from './input-field-shared-styles.js';
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A mixin to provide `pattern` and `preventInvalidInput` properties.
+ *
+ * @polymerMixin
+ * @mixes InputConstraintsMixin
+ */
+const PatternMixin = (superclass) =>
+  class PatternMixinClass extends InputConstraintsMixin(superclass) {
+    static get properties() {
+      return {
+        /**
+         * A regular expression that the value is checked against.
+         * The pattern must match the entire value, not just some subset.
+         */
+        pattern: {
+          type: String,
+        },
+
+        /**
+         * When set to true, user is prevented from typing a value that
+         * conflicts with the given `pattern`.
+         * @attr {boolean} prevent-invalid-input
+         * @deprecated Please use `allowedCharPattern` instead.
+         */
+        preventInvalidInput: {
+          type: Boolean,
+          observer: '_preventInvalidInputChanged',
+        },
+      };
+    }
+
+    static get delegateAttrs() {
+      return [...super.delegateAttrs, 'pattern'];
+    }
+
+    static get constraints() {
+      return [...super.constraints, 'pattern'];
+    }
+
+    /** @private */
+    _checkInputValue() {
+      if (this.preventInvalidInput) {
+        const input = this.inputElement;
+        if (input && input.value.length > 0 && !this.checkValidity()) {
+          input.value = this.value || '';
+          // Add input-prevented attribute for 200ms
+          this.setAttribute('input-prevented', '');
+          this._inputDebouncer = Debouncer.debounce(this._inputDebouncer, timeOut.after(200), () => {
+            this.removeAttribute('input-prevented');
+          });
+        }
+      }
+    }
+
+    /**
+     * @param {Event} event
+     * @protected
+     * @override
+     */
+    _onInput(event) {
+      this._checkInputValue();
+
+      super._onInput(event);
+    }
+
+    /** @private */
+    _preventInvalidInputChanged(preventInvalidInput) {
+      if (preventInvalidInput) {
+        console.warn(
+          `WARNING: Since Vaadin 23.2, "preventInvalidInput" is deprecated. Please use "allowedCharPattern" instead.`,
+        );
+      }
+    }
+  };
+
+export { PatternMixin as P };

package/dist/components/radio-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 radioInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.radio__fieldset{border:none;position:relative}.radio__wrapper{display:flex;gap:5px}.radio__error-message{position:absolute;top:calc(100% + 5px);left:0;color:red}";
+const radioInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.radio__fieldset{border:none;position:relative}.radio__wrapper{display:flex;gap:5px}.radio__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}";
 
 const RadioInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/select-input2.js

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate } from './locale.utils.js';
-import './virtual-keyboard-controller.js';
+import './input-field-shared-styles.js';
 import './vaadin-combo-box.js';
 
-const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.select__wrapper{position:relative;display:flex;padding-top:10px;width:100%}.select__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)}.select__label--hidden{opacity:0;visibility:hidden;transform:translateY(0)}.select__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}.select__input:focus{outline:none;box-shadow:0 5px 5px rgba(16, 15, 15, 0.1)}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000}";
+const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.select{font-family:\"Roboto\";font-style:normal}.select__wrapper{position:relative;width:100%;padding-top:26px}.select__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.select__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]::part(input-field){border-color:#3E3E3E}.select__input[invalid]::part(input-field){border-color:#cc0000b3}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:#1F1F1F}.select__input vaadin-month-calendar::part(selected date){background-color:red}.select__input::part(input-field){border-radius:4px;background-color:#FFFFFF;border:2px solid #DEE1EE;color:#2A2E3F;border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}";
 
 const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -79,7 +79,6 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.isValid = this.setValidity();
     this.validityStateHandler({ valid: this.isValid, name: this.name });
     this.emitValueHandler(true);
-    this.inputReference.previousElementSibling.classList.remove('select__label--hidden');
   }
   setValidity() {
     return this.inputReference.validity.valid;
@@ -90,7 +89,8 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   render() {
-    return h("div", { class: 'select__wrapper' }, h("label", { class: 'select__label select__label--hidden', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h("vaadin-combo-box", { name: this.name, id: `${this.name}__input`, class: 'select__input', "item-label-path": "label", "item-value-path": "value", readOnly: this.autofilled, required: this.validation.mandatory, value: this.defaultValue, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, items: this.displayedOptions, onBlur: (e) => this.handleChange(e) }), h("small", { class: 'select__error-message' }, this.errorMessage));
+    const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'select__input--invalid';
+    return h("div", { class: 'select__wrapper' }, h("label", { class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h("vaadin-combo-box", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass}`, "item-label-path": "label", "item-value-path": "value", readOnly: this.autofilled, required: this.validation.mandatory, value: this.defaultValue, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, items: this.displayedOptions, onBlur: (e) => this.handleChange(e) }), h("small", { class: 'select__error-message' }, this.errorMessage));
   }
   get element() { return this; }
   static get watchers() { return {

package/dist/components/tel-input2.js

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate } from './locale.utils.js';
-import './virtual-keyboard-controller.js';
+import './input-field-shared-styles.js';
 import './vaadin-combo-box.js';
 
-const telInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.tel__wrapper{position:relative;display:flex;flex-direction:column-reverse;padding-top:10px;border-bottom:3px solid #666666}.tel__wrapper--flex{display:flex}.tel__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)}.tel__label--required::after{content:\"*\";margin-left:5px;color:#666666}.tel vaadin-combo-box{flex-grow:1}.tel__input{width:inherit;padding:15px 6px;position:relative;border:none;background-color:transparent;color:#666666;font-size:16px;font-family:inherit;flex-grow:3;-moz-appearance:textfield;}.tel__input::-webkit-outer-spin-button,.tel__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tel__input:focus{outline:none;box-shadow:0 5px 5px rgba(16, 15, 15, 0.1)}.tel__input::placeholder{color:#666666}.tel__input--invalid .tel__wrapper{border-bottom:3px solid #cc0000}.tel__input:placeholder-shown+.tel__label{opacity:0;visibility:hidden;transform:translateY(0)}.tel__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000}";
+const telInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.tel{font-family:\"Roboto\";font-style:normal}.tel__wrapper{position:relative;width:100%;padding-top:26px}.tel__wrapper--flex{width:inherit;display:flex;align-items:stretch;border-radius:4px;border:2px solid #DEE1EE}.tel__wrapper--flex:focus-within{border:2px solid #3E3E3E}.tel__wrapper--flex--invalid{border:2px solid #cc0000b3}.tel__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.tel__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;margin-left:2px}.tel__prefix{width:120px}.tel__prefix[focus]{outline:none}.tel__prefix::part(input-field){border-radius:0 4px 4px 0;background-color:#DEE1EE;color:#1F1F1F;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.tel__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;border:none;padding:8px 20px;width:inherit;position:relative;-moz-appearance:textfield;}.tel__input:focus{outline:none}.tel__input::-webkit-outer-spin-button,.tel__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tel__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}";
 
 const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -33,6 +33,10 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   connectedCallback() {
     this.validationPattern = this.setPattern();
+    if (this.defaultValue) {
+      this.prefixValue = this.defaultValue.split('|')[0];
+      this.phoneValue = this.defaultValue.split('|')[1];
+    }
   }
   componentWillLoad() {
     if (this.action) {
@@ -47,8 +51,8 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   componentDidLoad() {
     if (this.defaultValue) {
-      this.prefixValue = this.defaultValue;
-      this.valueHandler({ name: this.name, value: `${this.prefixValue}|` });
+      this.value = `${this.prefixValue}|${this.phoneValue}`;
+      this.valueHandler({ name: this.name, value: this.value });
     }
   }
   getPhoneCodes() {
@@ -66,8 +70,8 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     });
   }
   handleInput(event) {
-    // Kinda hack? Open to suggestions.
-    this.value = `${this.prefixValue}|${event.target.value}`;
+    this.phoneValue = event.target.value;
+    this.value = `${this.prefixValue}|${this.phoneValue}`;
     this.errorMessage = this.setErrorMessage();
     this.isValid = this.setValidity();
     this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -95,8 +99,8 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   render() {
-    const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'tel__input--invalid';
-    return h("div", { class: 'tel__wrapper' }, h("div", { class: 'tel__wrapper--flex' }, h("vaadin-combo-box", { items: this.phoneCodesOptions, value: this.defaultValue, readOnly: this.autofilled, onBlur: (e) => this.prefixValue = e.target.value }), h("input", { type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input ${invalidClass}`, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onBlur: (e) => this.handleInput(e) })), h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("small", { class: 'tel__error-message' }, this.errorMessage));
+    const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'tel__wrapper--flex--invalid';
+    return h("div", { class: 'tel__wrapper' }, h("div", { class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onBlur: (e) => this.prefixValue = e.target.value }), h("input", { type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onBlur: (e) => this.handleInput(e) })), h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("small", { class: 'tel__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],

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';
 
-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%;padding-top:26px}.text__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.text__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;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:8px 20px;width:inherit;position:relative;border:2px solid #DEE1EE}.text__input:focus{outline-color:#3E3E3E}.text__input--invalid{border:2px solid #cc0000b3}.text__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}";
 
 const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -24,17 +24,24 @@ const TextInput = /*@__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();
   }
@@ -54,13 +61,6 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   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');
-    }
-  }
   setPattern() {
     var _a, _b;
     if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
@@ -78,10 +78,13 @@ const TextInput = /*@__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() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
-    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, readOnly: this.autofilled, 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));
+    return h("div", { class: 'text__wrapper' }, h("label", { class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("input", { name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onBlur: (e) => { this.handleInput(e); } }), h("small", { class: 'text__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -98,9 +101,10 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "language": [1],
     "checkValidity": [4, "check-validity"],
     "emitValue": [4, "emit-value"],
+    "isDuplicateInput": [4, "is-duplicate-input"],
     "isValid": [32],
     "errorMessage": [32]
-  }]);
+  }, [[16, "sendInputValue", "valueChangedHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;