@everymatrix/general-input 1.16.1 → 1.18.0

package/dist/cjs/checkbox-group-input_10.cjs.entry.js

@@ -35472,6 +35472,10 @@ const TextInput = class {
     }
     this.isValid = this.setValidity();
   }
+  handleClick() {
+    if (this.name.toLowerCase() === 'username')
+      window.postMessage({ type: 'registrationUsernameClicked' }, window.location.href);
+  }
   setValidity() {
     var _a;
     if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
@@ -35518,7 +35522,7 @@ const TextInput = class {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }
     return index.h("div", { class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'text__wrapper--flex' }, index.h("label", { class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'text__wrapper--relative' }, this.tooltip &&
-      index.h("img", { class: 'text__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.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 }), index.h("small", { class: 'text__error-message' }, this.errorMessage));
+      index.h("img", { class: 'text__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.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, onClick: this.handleClick }), index.h("small", { class: 'text__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],

package/dist/collection/components/text-input/text-input.js

@@ -104,6 +104,10 @@ export class TextInput {
     }
     this.isValid = this.setValidity();
   }
+  handleClick() {
+    if (this.name.toLowerCase() === 'username')
+      window.postMessage({ type: 'registrationUsernameClicked' }, window.location.href);
+  }
   setValidity() {
     var _a;
     if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
@@ -156,7 +160,7 @@ export class TextInput {
           this.tooltip &&
             h("img", { class: 'text__tooltip-icon', src: tooltipIcon, 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("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, onClick: this.handleClick }),
       h("small", { class: 'text__error-message' }, this.errorMessage));
   }
   static get is() { return "text-input"; }

package/dist/components/text-input2.js

@@ -111,6 +111,10 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     this.isValid = this.setValidity();
   }
+  handleClick() {
+    if (this.name.toLowerCase() === 'username')
+      window.postMessage({ type: 'registrationUsernameClicked' }, window.location.href);
+  }
   setValidity() {
     var _a;
     if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
@@ -157,7 +161,7 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       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));
+      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, onClick: this.handleClick }), h("small", { class: 'text__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],

package/dist/esm/checkbox-group-input_10.entry.js

@@ -35468,6 +35468,10 @@ const TextInput = class {
     }
     this.isValid = this.setValidity();
   }
+  handleClick() {
+    if (this.name.toLowerCase() === 'username')
+      window.postMessage({ type: 'registrationUsernameClicked' }, window.location.href);
+  }
   setValidity() {
     var _a;
     if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
@@ -35514,7 +35518,7 @@ const TextInput = class {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }
     return h$2("div", { class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h$2("div", { class: 'text__wrapper--flex' }, h$2("label", { class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$2("div", { class: 'text__wrapper--relative' }, this.tooltip &&
-      h$2("img", { class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h$2("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$2("small", { class: 'text__error-message' }, this.errorMessage));
+      h$2("img", { class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h$2("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, onClick: this.handleClick }), h$2("small", { class: 'text__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],

package/dist/general-input/general-input.esm.js

@@ -1 +1 @@
-import{p as l,b as e}from"./p-b408093e.js";(()=>{const e=import.meta.url,i={};return""!==e&&(i.resourcesUrl=new URL(".",e).href),l(i)})().then((l=>e([["p-0966f523",[[1,"checkbox-group-input",{name:[513],displayName:[513,"display-name"],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],options:[16],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32],selectedValues:[32]},[[4,"click","handleClickOutside"]]],[1,"checkbox-input",{name:[513],displayName:[513,"display-name"],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]]],[1,"date-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],dateFormat:[513,"date-format"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]]],[1,"email-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]]],[1,"password-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],validation:[16],language:[513],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[513,"client-styling"],isValid:[32],errorMessage:[32],limitStylingAppends:[32],showTooltip:[32],passwordComplexity:[32],showPopup:[32],value:[32]},[[16,"sendOriginalValidityState","originalValidityChangedHandler"],[16,"sendInputValue","valueChangedHandler"],[4,"click","handleClickOutside"]]],[1,"radio-input",{name:[513],displayName:[513,"display-name"],optionsGroup:[16],validation:[16],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]]],[1,"select-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],action:[513],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],options:[16],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]]],[1,"tel-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],showLabels:[516,"show-labels"],action:[513],validation:[16],defaultValue:[520,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],isValid:[32],errorMessage:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]]],[1,"text-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],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],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]]]],["p-c2d4d6ac",[[1,"general-input",{type:[513],name:[513],displayName:[513,"display-name"],placeholder:[513],action:[513],validation:[16],options:[520],language:[513],autofilled:[516],tooltip:[513],defaultValue:[520,"default-value"],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[520,"client-styling"],dateFormat:[513,"date-format"],translationUrl:[513,"translation-url"]}]]],["p-916a1319",[[1,"toggle-checkbox-input",{name:[513],displayName:[513,"display-name"],defaultValue:[513,"default-value"],options:[16],autofilled:[516],tooltip:[513],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32],showFields:[32]},[[4,"click","handleClickOutside"]]]]]],l)));
+import{p as l,b as e}from"./p-b408093e.js";(()=>{const e=import.meta.url,i={};return""!==e&&(i.resourcesUrl=new URL(".",e).href),l(i)})().then((l=>e([["p-d7a9eea7",[[1,"checkbox-group-input",{name:[513],displayName:[513,"display-name"],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],options:[16],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32],selectedValues:[32]},[[4,"click","handleClickOutside"]]],[1,"checkbox-input",{name:[513],displayName:[513,"display-name"],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]]],[1,"date-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],dateFormat:[513,"date-format"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]]],[1,"email-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]]],[1,"password-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],validation:[16],language:[513],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[513,"client-styling"],isValid:[32],errorMessage:[32],limitStylingAppends:[32],showTooltip:[32],passwordComplexity:[32],showPopup:[32],value:[32]},[[16,"sendOriginalValidityState","originalValidityChangedHandler"],[16,"sendInputValue","valueChangedHandler"],[4,"click","handleClickOutside"]]],[1,"radio-input",{name:[513],displayName:[513,"display-name"],optionsGroup:[16],validation:[16],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]]],[1,"select-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],action:[513],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],options:[16],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]]],[1,"tel-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],showLabels:[516,"show-labels"],action:[513],validation:[16],defaultValue:[520,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],isValid:[32],errorMessage:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]]],[1,"text-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],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],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]]]],["p-c2d4d6ac",[[1,"general-input",{type:[513],name:[513],displayName:[513,"display-name"],placeholder:[513],action:[513],validation:[16],options:[520],language:[513],autofilled:[516],tooltip:[513],defaultValue:[520,"default-value"],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[520,"client-styling"],dateFormat:[513,"date-format"],translationUrl:[513,"translation-url"]}]]],["p-916a1319",[[1,"toggle-checkbox-input",{name:[513],displayName:[513,"display-name"],defaultValue:[513,"default-value"],options:[16],autofilled:[516],tooltip:[513],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32],showFields:[32]},[[4,"click","handleClickOutside"]]]]]],l)));

package/dist/general-input/{p-0966f523.entry.js → p-d7a9eea7.entry.js}

@@ -3578,4 +3578,4 @@ function Jh(t){return null!=t}function Kh(t,e){return t.findIndex((t=>!(t instan
       ></vaadin-combo-box-overlay>
 
       <slot name="tooltip"></slot>
-    `}static get properties(){return{_positionTarget:{type:Object}}}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new lr(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new dr(this.inputElement,this._labelController)),this._tooltipController=new Js(this),this.addController(this._tooltipController),this._tooltipController.setPosition("top"),this._tooltipController.setShouldShow((t=>!t.opened)),this._positionTarget=this.shadowRoot.querySelector('[part="input-field"]'),this._toggleElement=this.$.toggleButton}_setFocused(t){super._setFocused(t),t||this.validate()}_shouldRemoveFocus(t){return t.relatedTarget!==this.$.overlay||(t.composedPath()[0].focus(),!1)}_onClearButtonClick(t){t.stopPropagation(),this._handleClearButtonClick(t)}_onHostClick(t){const e=t.composedPath();(e.includes(this._labelNode)||e.includes(this._positionTarget))&&super._onHostClick(t)}}customElements.define(tl.is,tl);const el=class{constructor(i){t(this,i),this.sendValidityState=e(this,"sendValidityState",7),this.sendInputValue=e(this,"sendInputValue",7),this.defaultValue="",this.options=[],this.clientStyling="",this.limitStylingAppends=!1,this.showTooltip=!1,this.touched=!1,this.handleChange=t=>{this.touched=!0,this.value=t.target.value,this.isValid=this.setValidity(),this.errorMessage=this.setErrorMessage(),this.emitValueHandler(!0)},this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)}}validityChanged(){this.validityStateHandler({valid:this.isValid,name:this.name}),1==this.emitValue&&this.valueHandler({name:this.name,value:this.value})}validityStateHandler(t){this.sendValidityState.emit(t)}emitValueHandler(t){1==t&&this.isValid&&this.valueHandler({name:this.name,value:this.value})}valueHandler(t){this.sendInputValue.emit(t)}handleClickOutside(t){t.composedPath()[0]!==this.tooltipIconReference&&t.composedPath()[0]!==this.tooltipReference&&(this.showTooltip=!1)}connectedCallback(){this.displayedOptions=this.options.map((t=>({label:t.label,value:t.value.toUpperCase()})))}componentWillLoad(){if(this.action&&!this.options.length&&"GET"==this.action.split(" ")[0]){const t=this.action.split(" ")[1];return this.getOptions(t).then((t=>{const e=Object.keys(t)[0];this.displayedOptions=t[e].map((t=>({label:t.Name,value:t.Alpha2Code})))}))}}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.limitStylingAppends=!0)}componentDidLoad(){this.inputReference=this.element.shadowRoot.querySelector("input"),this.isValid=this.setValidity(),this.defaultValue&&(this.value=this.defaultValue.toUpperCase(),this.valueHandler({name:this.name,value:this.value}))}getOptions(t){const e=new URL(t);return new Promise(((t,i)=>{fetch(e.href).then((t=>t.json())).then((e=>{t(e)})).catch((t=>{console.error(t),i(t)}))}))}setValidity(){return this.inputReference.validity.valid}setErrorMessage(){if(this.inputReference.validity.valueMissing)return r("requiredError",this.language)}renderTooltip(){return this.showTooltip?i("div",{class:"select__tooltip "+(this.showTooltip?"visible":""),ref:t=>this.tooltipReference=t,innerHTML:this.tooltip}):null}render(){let t="";return this.touched&&(t=1==this.isValid||null==this.isValid?"":"text__input--invalid"),i("div",{class:`select__wrapper ${this.autofilled?"select__wrapper--autofilled":""}  ${this.name}__input`,ref:t=>this.stylingContainer=t},i("div",{class:"select__wrapper--flex"},i("label",{class:"select__label",htmlFor:`${this.name}__input`},`${this.displayName} ${this.validation.mandatory?"*":""}`),i("div",{class:"select__wrapper--relative"},this.tooltip&&i("img",{class:"select__tooltip-icon",src:o,alt:"",ref:t=>this.tooltipIconReference=t,onClick:()=>this.showTooltip=!this.showTooltip}),this.renderTooltip())),i("vaadin-combo-box",{name:this.name,id:`${this.name}__input`,class:`select__input ${t} ${this.autofilled?"select__input--autofilled":""}`,"item-label-path":"label","item-value-path":"value",readOnly:this.autofilled,required:this.validation.mandatory,value:this.defaultValue,placeholder:`${this.placeholder}`,items:this.displayedOptions,onChange:this.handleChange}),i("small",{class:"select__error-message"},this.errorMessage))}get element(){return s(this)}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};el.style='*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.select{font-family:"Roboto";font-style:normal}.select__wrapper{position:relative;width:100%}.select__wrapper--autofilled{pointer-events:none}.select__wrapper--autofilled .select__label{color:#979797}.select__wrapper--autofilled .select__input::part(input-field){color:#979797}.select__wrapper--flex{display:flex;gap:5px}.select__wrapper--relative{position:relative}.select__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.select__label--required::after{content:"*";font-family:inherit;color:#2A3841;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}.select__tooltip-icon{width:16px;height:auto}.select__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}.select__tooltip.visible{opacity:1}';const il=class{constructor(i){t(this,i),this.sendValidityState=e(this,"sendValidityState",7),this.sendInputValue=e(this,"sendInputValue",7),this.clientStyling="",this.limitStylingAppends=!1,this.showTooltip=!1,this.validationPattern="",this.touched=!1,this.handleInput=t=>{this.phoneValue=t.target.value,this.value={prefix:this.prefixValue,phone:this.phoneValue},this.touched=!0,this.debounceTime&&clearTimeout(this.debounceTime),this.debounceTime=setTimeout((()=>{this.isValid=this.setValidity(),this.errorMessage=this.setErrorMessage(),this.emitValueHandler(!0)}),500)},this.handleBlur=()=>{this.isValid=this.setValidity(),this.touched=!0,this.errorMessage=this.setErrorMessage()},this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)}}validityChanged(){this.validityStateHandler({valid:this.isValid,name:this.name}),1==this.emitValue&&this.valueHandler({name:this.name,value:this.value,type:"tel"})}validityStateHandler(t){this.sendValidityState.emit(t)}emitValueHandler(t){1==t&&this.isValid&&this.valueHandler({name:this.name,value:this.value,type:"tel"})}valueHandler(t){this.sendInputValue.emit(t)}handleClickOutside(t){t.composedPath()[0]!==this.tooltipIconReference&&t.composedPath()[0]!==this.tooltipReference&&(this.showTooltip=!1)}connectedCallback(){this.validationPattern=this.setPattern(),this.defaultValue&&(this.prefixValue=this.defaultValue.prefix?this.defaultValue.prefix:this.defaultValue,this.phoneValue=this.defaultValue.phone||null)}componentWillLoad(){if(this.action&&"GET"==this.action.split(" ")[0]){const t=this.action.split(" ")[1];return this.getPhoneCodes(t).then((t=>{this.phoneCodesOptions=t.phoneCodes.map((t=>({label:t.Prefix,value:t.Prefix})))}))}}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.limitStylingAppends=!0)}componentDidLoad(){this.isValid=this.setValidity(),this.defaultValue&&(this.value=this.defaultValue,this.valueHandler({name:this.name,value:this.value,type:"tel"}))}getPhoneCodes(t){const e=new URL(t);return new Promise(((t,i)=>{fetch(e.href).then((t=>t.json())).then((e=>{t(e)})).catch((t=>{console.error(t),i(t)}))}))}handlePrefixInput(t){this.prefixValue=t.target.value,this.value={prefix:this.prefixValue,phone:this.phoneValue},this.emitValueHandler(!0)}setValidity(){return this.inputReference.validity.valid}setPattern(){var t,e;if((null===(t=this.validation.custom)||void 0===t?void 0:t.length)>0)return null===(e=this.validation.custom.find((t=>"regex"===t.rule)))||void 0===e?void 0:e.pattern}setErrorMessage(){var t,e;if(this.inputReference.validity.patternMismatch){const i=null===(t=this.validation.custom.find((t=>"regex"===t.rule)))||void 0===t?void 0:t.errorKey,s=null===(e=this.validation.custom.find((t=>"regex"===t.rule)))||void 0===e?void 0:e.errorMessage;return r(`${i}`,this.language)?r(`${i}`,this.language):s}return this.inputReference.validity.tooShort||this.inputReference.validity.tooLong?r("lengthError",this.language,{values:{minLength:this.validation.minLength,maxLength:this.validation.maxLength}}):this.inputReference.validity.valueMissing?r("requiredError",this.language):void 0}renderTooltip(){return this.showTooltip?i("div",{class:"tel__tooltip "+(this.showTooltip?"visible":""),ref:t=>this.tooltipReference=t,innerHTML:this.tooltip}):null}render(){let t="";return this.touched&&(t=1==this.isValid||null==this.isValid?"":"text__input--invalid"),i("div",{class:`tel__wrapper ${this.autofilled?"tel__wrapper--autofilled":""} ${this.name}__input`,ref:t=>this.stylingContainer=t},i("div",{class:"tel__wrapper--flex-label"},i("label",{class:"tel__label "+(this.validation.mandatory?"tel__label--required":""),htmlFor:`${this.name}__input`},this.displayName),i("div",{class:"tel__wrapper--relative"},this.tooltip&&i("img",{class:"tel__tooltip-icon",src:o,alt:"",ref:t=>this.tooltipIconReference=t,onClick:()=>this.showTooltip=!this.showTooltip}),this.renderTooltip())),i("div",{class:`tel__wrapper--flex ${t}`},i("vaadin-combo-box",{class:"tel__prefix",items:this.phoneCodesOptions,value:this.prefixValue,readOnly:this.autofilled,onChange:t=>this.handlePrefixInput(t)}),i("input",{type:"tel",ref:t=>this.inputReference=t,id:`${this.name}__input`,readOnly:this.autofilled,class:"tel__input",value:this.phoneValue,placeholder:`${this.placeholder}`,required:this.validation.mandatory,minlength:this.validation.minLength,maxlength:this.validation.maxLength,pattern:this.validationPattern,onInput:this.handleInput,onBlur:this.handleBlur})),i("small",{class:"tel__error-message"},this.errorMessage))}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};il.style='*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.tel{font-family:"Roboto";font-style:normal}.tel__wrapper{position:relative;width:100%}.tel__wrapper--autofilled{pointer-events:none}.tel__wrapper--autofilled .tel__label{color:#979797}.tel__wrapper--autofilled .tel__input::part(input-field){color:#979797}.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__wrapper--flex-label{display:flex;gap:5px}.tel__wrapper--flex--relative{position:relative}.tel__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.tel__label--required::after{content:"*";font-family:inherit;color:#2A3841;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:10px 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}.tel__tooltip-icon{width:16px;height:auto}.tel__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}.tel__tooltip.visible{opacity:1}';const sl=class{constructor(i){t(this,i),this.sendValidityState=e(this,"sendValidityState",7),this.sendInputValue=e(this,"sendInputValue",7),this.defaultValue="",this.clientStyling="",this.errorMessage="",this.limitStylingAppends=!1,this.showTooltip=!1,this.value="",this.validationPattern="",this.duplicateInputValue=null,this.touched=!1,this.handleInput=t=>{this.value=t.target.value,this.touched=!0,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(!0)}),500)},this.handleBlur=t=>{this.value=t.target.value,this.touched=!0,this.isValid=this.setValidity(),this.errorMessage=this.setErrorMessage(),this.validityStateHandler({valid:this.isValid,name:this.name})},this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)}}validityChanged(){this.validityStateHandler({valid:this.isValid,name:this.name}),1==this.emitValue&&this.valueHandler({name:this.name,value:this.value})}emitValueHandler(t){1==t&&this.isValid&&this.valueHandler({name:this.name,value:this.value})}validityStateHandler(t){this.sendValidityState.emit(t)}valueHandler(t){this.sendInputValue.emit(t)}handleClickOutside(t){t.composedPath()[0]!==this.tooltipIconReference&&t.composedPath()[0]!==this.tooltipReference&&(this.showTooltip=!1)}valueChangedHandler(t){this.isDuplicateInput&&this.name===t.detail.name+"Duplicate"&&(this.duplicateInputValue=t.detail.value,this.touched&&(this.isValid=this.setValidity(),this.errorMessage=this.setErrorMessage())),this.name===t.detail.name+"Duplicate"&&this.name.replace("Duplicate","")===t.detail.name&&!0===this.touched&&(this.isValid=this.setValidity(),this.errorMessage=this.setErrorMessage())}connectedCallback(){this.validationPattern=this.setPattern()}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.limitStylingAppends=!0)}componentDidLoad(){this.defaultValue&&(this.value=this.defaultValue,this.valueHandler({name:this.name,value:this.value}),this.isDuplicateInput&&(this.touched=!0)),this.isValid=this.setValidity()}setValidity(){var t;return(!this.isDuplicateInput||this.duplicateInputValue===this.value)&&(null===(t=this.inputReference)||void 0===t?void 0:t.validity.valid)}setPattern(){var t,e;if((null===(t=this.validation.custom)||void 0===t?void 0:t.length)>0)return null===(e=this.validation.custom.find((t=>"regex"===t.rule)))||void 0===e?void 0:e.pattern}setErrorMessage(){var t,e,i,s;if(this.inputReference.validity.patternMismatch){const i=null===(t=this.validation.custom.find((t=>"regex"===t.rule)))||void 0===t?void 0:t.errorKey,s=null===(e=this.validation.custom.find((t=>"regex"===t.rule)))||void 0===e?void 0:e.errorMessage;return r(`${i}`,this.language)?r(`${i}`,this.language):s}if(this.inputReference.validity.tooShort||this.inputReference.validity.tooLong)return r("lengthError",this.language,{values:{minLength:this.validation.minLength,maxLength:this.validation.maxLength}});if(this.inputReference.validity.valueMissing)return r("requiredError",this.language);if(this.isDuplicateInput&&this.duplicateInputValue!==this.value){const t=null===(i=this.validation.custom.find((t=>"duplicate-input"===t.rule)))||void 0===i?void 0:i.errorKey,e=null===(s=this.validation.custom.find((t=>"duplicate-input"===t.rule)))||void 0===s?void 0:s.errorMessage;return r(`${t}`,this.language)?r(`${t}`,this.language):e}}renderTooltip(){return this.showTooltip?i("div",{class:"text__tooltip "+(this.showTooltip?"visible":""),ref:t=>this.tooltipReference=t,innerHTML:this.tooltip}):null}render(){let t="";return this.touched&&(t=1==this.isValid||null==this.isValid?"":"text__input--invalid"),i("div",{class:`text__wrapper ${this.name}__input ${this.autofilled?"text__wrapper--autofilled":""}`,ref:t=>this.stylingContainer=t},i("div",{class:"text__wrapper--flex"},i("label",{class:"text__label  "+(this.validation.mandatory?"text__label--required":""),htmlFor:`${this.name}__input`},this.displayName),i("div",{class:"text__wrapper--relative"},this.tooltip&&i("img",{class:"text__tooltip-icon",src:o,alt:"",ref:t=>this.tooltipIconReference=t,onClick:()=>this.showTooltip=!this.showTooltip}),this.renderTooltip())),i("input",{name:this.name,id:`${this.name}__input`,value:this.defaultValue,type:"text",class:`text__input ${t}`,placeholder:`${this.placeholder}`,ref:t=>this.inputReference=t,readOnly:this.autofilled,pattern:this.validationPattern,required:this.validation.mandatory,minlength:this.validation.minLength,maxlength:this.validation.maxLength,onInput:this.handleInput,onBlur:this.handleBlur}),i("small",{class:"text__error-message"},this.errorMessage))}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};sl.style='*,*::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}';export{Ar as checkbox_group_input,Er as checkbox_input,Th as date_input,Dh as email_input,Sh as number_input,Nh as password_input,Lh as radio_input,el as select_input,il as tel_input,sl as text_input}
+    `}static get properties(){return{_positionTarget:{type:Object}}}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new lr(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new dr(this.inputElement,this._labelController)),this._tooltipController=new Js(this),this.addController(this._tooltipController),this._tooltipController.setPosition("top"),this._tooltipController.setShouldShow((t=>!t.opened)),this._positionTarget=this.shadowRoot.querySelector('[part="input-field"]'),this._toggleElement=this.$.toggleButton}_setFocused(t){super._setFocused(t),t||this.validate()}_shouldRemoveFocus(t){return t.relatedTarget!==this.$.overlay||(t.composedPath()[0].focus(),!1)}_onClearButtonClick(t){t.stopPropagation(),this._handleClearButtonClick(t)}_onHostClick(t){const e=t.composedPath();(e.includes(this._labelNode)||e.includes(this._positionTarget))&&super._onHostClick(t)}}customElements.define(tl.is,tl);const el=class{constructor(i){t(this,i),this.sendValidityState=e(this,"sendValidityState",7),this.sendInputValue=e(this,"sendInputValue",7),this.defaultValue="",this.options=[],this.clientStyling="",this.limitStylingAppends=!1,this.showTooltip=!1,this.touched=!1,this.handleChange=t=>{this.touched=!0,this.value=t.target.value,this.isValid=this.setValidity(),this.errorMessage=this.setErrorMessage(),this.emitValueHandler(!0)},this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)}}validityChanged(){this.validityStateHandler({valid:this.isValid,name:this.name}),1==this.emitValue&&this.valueHandler({name:this.name,value:this.value})}validityStateHandler(t){this.sendValidityState.emit(t)}emitValueHandler(t){1==t&&this.isValid&&this.valueHandler({name:this.name,value:this.value})}valueHandler(t){this.sendInputValue.emit(t)}handleClickOutside(t){t.composedPath()[0]!==this.tooltipIconReference&&t.composedPath()[0]!==this.tooltipReference&&(this.showTooltip=!1)}connectedCallback(){this.displayedOptions=this.options.map((t=>({label:t.label,value:t.value.toUpperCase()})))}componentWillLoad(){if(this.action&&!this.options.length&&"GET"==this.action.split(" ")[0]){const t=this.action.split(" ")[1];return this.getOptions(t).then((t=>{const e=Object.keys(t)[0];this.displayedOptions=t[e].map((t=>({label:t.Name,value:t.Alpha2Code})))}))}}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.limitStylingAppends=!0)}componentDidLoad(){this.inputReference=this.element.shadowRoot.querySelector("input"),this.isValid=this.setValidity(),this.defaultValue&&(this.value=this.defaultValue.toUpperCase(),this.valueHandler({name:this.name,value:this.value}))}getOptions(t){const e=new URL(t);return new Promise(((t,i)=>{fetch(e.href).then((t=>t.json())).then((e=>{t(e)})).catch((t=>{console.error(t),i(t)}))}))}setValidity(){return this.inputReference.validity.valid}setErrorMessage(){if(this.inputReference.validity.valueMissing)return r("requiredError",this.language)}renderTooltip(){return this.showTooltip?i("div",{class:"select__tooltip "+(this.showTooltip?"visible":""),ref:t=>this.tooltipReference=t,innerHTML:this.tooltip}):null}render(){let t="";return this.touched&&(t=1==this.isValid||null==this.isValid?"":"text__input--invalid"),i("div",{class:`select__wrapper ${this.autofilled?"select__wrapper--autofilled":""}  ${this.name}__input`,ref:t=>this.stylingContainer=t},i("div",{class:"select__wrapper--flex"},i("label",{class:"select__label",htmlFor:`${this.name}__input`},`${this.displayName} ${this.validation.mandatory?"*":""}`),i("div",{class:"select__wrapper--relative"},this.tooltip&&i("img",{class:"select__tooltip-icon",src:o,alt:"",ref:t=>this.tooltipIconReference=t,onClick:()=>this.showTooltip=!this.showTooltip}),this.renderTooltip())),i("vaadin-combo-box",{name:this.name,id:`${this.name}__input`,class:`select__input ${t} ${this.autofilled?"select__input--autofilled":""}`,"item-label-path":"label","item-value-path":"value",readOnly:this.autofilled,required:this.validation.mandatory,value:this.defaultValue,placeholder:`${this.placeholder}`,items:this.displayedOptions,onChange:this.handleChange}),i("small",{class:"select__error-message"},this.errorMessage))}get element(){return s(this)}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};el.style='*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.select{font-family:"Roboto";font-style:normal}.select__wrapper{position:relative;width:100%}.select__wrapper--autofilled{pointer-events:none}.select__wrapper--autofilled .select__label{color:#979797}.select__wrapper--autofilled .select__input::part(input-field){color:#979797}.select__wrapper--flex{display:flex;gap:5px}.select__wrapper--relative{position:relative}.select__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.select__label--required::after{content:"*";font-family:inherit;color:#2A3841;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}.select__tooltip-icon{width:16px;height:auto}.select__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}.select__tooltip.visible{opacity:1}';const il=class{constructor(i){t(this,i),this.sendValidityState=e(this,"sendValidityState",7),this.sendInputValue=e(this,"sendInputValue",7),this.clientStyling="",this.limitStylingAppends=!1,this.showTooltip=!1,this.validationPattern="",this.touched=!1,this.handleInput=t=>{this.phoneValue=t.target.value,this.value={prefix:this.prefixValue,phone:this.phoneValue},this.touched=!0,this.debounceTime&&clearTimeout(this.debounceTime),this.debounceTime=setTimeout((()=>{this.isValid=this.setValidity(),this.errorMessage=this.setErrorMessage(),this.emitValueHandler(!0)}),500)},this.handleBlur=()=>{this.isValid=this.setValidity(),this.touched=!0,this.errorMessage=this.setErrorMessage()},this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)}}validityChanged(){this.validityStateHandler({valid:this.isValid,name:this.name}),1==this.emitValue&&this.valueHandler({name:this.name,value:this.value,type:"tel"})}validityStateHandler(t){this.sendValidityState.emit(t)}emitValueHandler(t){1==t&&this.isValid&&this.valueHandler({name:this.name,value:this.value,type:"tel"})}valueHandler(t){this.sendInputValue.emit(t)}handleClickOutside(t){t.composedPath()[0]!==this.tooltipIconReference&&t.composedPath()[0]!==this.tooltipReference&&(this.showTooltip=!1)}connectedCallback(){this.validationPattern=this.setPattern(),this.defaultValue&&(this.prefixValue=this.defaultValue.prefix?this.defaultValue.prefix:this.defaultValue,this.phoneValue=this.defaultValue.phone||null)}componentWillLoad(){if(this.action&&"GET"==this.action.split(" ")[0]){const t=this.action.split(" ")[1];return this.getPhoneCodes(t).then((t=>{this.phoneCodesOptions=t.phoneCodes.map((t=>({label:t.Prefix,value:t.Prefix})))}))}}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.limitStylingAppends=!0)}componentDidLoad(){this.isValid=this.setValidity(),this.defaultValue&&(this.value=this.defaultValue,this.valueHandler({name:this.name,value:this.value,type:"tel"}))}getPhoneCodes(t){const e=new URL(t);return new Promise(((t,i)=>{fetch(e.href).then((t=>t.json())).then((e=>{t(e)})).catch((t=>{console.error(t),i(t)}))}))}handlePrefixInput(t){this.prefixValue=t.target.value,this.value={prefix:this.prefixValue,phone:this.phoneValue},this.emitValueHandler(!0)}setValidity(){return this.inputReference.validity.valid}setPattern(){var t,e;if((null===(t=this.validation.custom)||void 0===t?void 0:t.length)>0)return null===(e=this.validation.custom.find((t=>"regex"===t.rule)))||void 0===e?void 0:e.pattern}setErrorMessage(){var t,e;if(this.inputReference.validity.patternMismatch){const i=null===(t=this.validation.custom.find((t=>"regex"===t.rule)))||void 0===t?void 0:t.errorKey,s=null===(e=this.validation.custom.find((t=>"regex"===t.rule)))||void 0===e?void 0:e.errorMessage;return r(`${i}`,this.language)?r(`${i}`,this.language):s}return this.inputReference.validity.tooShort||this.inputReference.validity.tooLong?r("lengthError",this.language,{values:{minLength:this.validation.minLength,maxLength:this.validation.maxLength}}):this.inputReference.validity.valueMissing?r("requiredError",this.language):void 0}renderTooltip(){return this.showTooltip?i("div",{class:"tel__tooltip "+(this.showTooltip?"visible":""),ref:t=>this.tooltipReference=t,innerHTML:this.tooltip}):null}render(){let t="";return this.touched&&(t=1==this.isValid||null==this.isValid?"":"text__input--invalid"),i("div",{class:`tel__wrapper ${this.autofilled?"tel__wrapper--autofilled":""} ${this.name}__input`,ref:t=>this.stylingContainer=t},i("div",{class:"tel__wrapper--flex-label"},i("label",{class:"tel__label "+(this.validation.mandatory?"tel__label--required":""),htmlFor:`${this.name}__input`},this.displayName),i("div",{class:"tel__wrapper--relative"},this.tooltip&&i("img",{class:"tel__tooltip-icon",src:o,alt:"",ref:t=>this.tooltipIconReference=t,onClick:()=>this.showTooltip=!this.showTooltip}),this.renderTooltip())),i("div",{class:`tel__wrapper--flex ${t}`},i("vaadin-combo-box",{class:"tel__prefix",items:this.phoneCodesOptions,value:this.prefixValue,readOnly:this.autofilled,onChange:t=>this.handlePrefixInput(t)}),i("input",{type:"tel",ref:t=>this.inputReference=t,id:`${this.name}__input`,readOnly:this.autofilled,class:"tel__input",value:this.phoneValue,placeholder:`${this.placeholder}`,required:this.validation.mandatory,minlength:this.validation.minLength,maxlength:this.validation.maxLength,pattern:this.validationPattern,onInput:this.handleInput,onBlur:this.handleBlur})),i("small",{class:"tel__error-message"},this.errorMessage))}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};il.style='*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.tel{font-family:"Roboto";font-style:normal}.tel__wrapper{position:relative;width:100%}.tel__wrapper--autofilled{pointer-events:none}.tel__wrapper--autofilled .tel__label{color:#979797}.tel__wrapper--autofilled .tel__input::part(input-field){color:#979797}.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__wrapper--flex-label{display:flex;gap:5px}.tel__wrapper--flex--relative{position:relative}.tel__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.tel__label--required::after{content:"*";font-family:inherit;color:#2A3841;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:10px 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}.tel__tooltip-icon{width:16px;height:auto}.tel__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}.tel__tooltip.visible{opacity:1}';const sl=class{constructor(i){t(this,i),this.sendValidityState=e(this,"sendValidityState",7),this.sendInputValue=e(this,"sendInputValue",7),this.defaultValue="",this.clientStyling="",this.errorMessage="",this.limitStylingAppends=!1,this.showTooltip=!1,this.value="",this.validationPattern="",this.duplicateInputValue=null,this.touched=!1,this.handleInput=t=>{this.value=t.target.value,this.touched=!0,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(!0)}),500)},this.handleBlur=t=>{this.value=t.target.value,this.touched=!0,this.isValid=this.setValidity(),this.errorMessage=this.setErrorMessage(),this.validityStateHandler({valid:this.isValid,name:this.name})},this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)}}validityChanged(){this.validityStateHandler({valid:this.isValid,name:this.name}),1==this.emitValue&&this.valueHandler({name:this.name,value:this.value})}emitValueHandler(t){1==t&&this.isValid&&this.valueHandler({name:this.name,value:this.value})}validityStateHandler(t){this.sendValidityState.emit(t)}valueHandler(t){this.sendInputValue.emit(t)}handleClickOutside(t){t.composedPath()[0]!==this.tooltipIconReference&&t.composedPath()[0]!==this.tooltipReference&&(this.showTooltip=!1)}valueChangedHandler(t){this.isDuplicateInput&&this.name===t.detail.name+"Duplicate"&&(this.duplicateInputValue=t.detail.value,this.touched&&(this.isValid=this.setValidity(),this.errorMessage=this.setErrorMessage())),this.name===t.detail.name+"Duplicate"&&this.name.replace("Duplicate","")===t.detail.name&&!0===this.touched&&(this.isValid=this.setValidity(),this.errorMessage=this.setErrorMessage())}connectedCallback(){this.validationPattern=this.setPattern()}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.limitStylingAppends=!0)}componentDidLoad(){this.defaultValue&&(this.value=this.defaultValue,this.valueHandler({name:this.name,value:this.value}),this.isDuplicateInput&&(this.touched=!0)),this.isValid=this.setValidity()}handleClick(){"username"===this.name.toLowerCase()&&window.postMessage({type:"registrationUsernameClicked"},window.location.href)}setValidity(){var t;return(!this.isDuplicateInput||this.duplicateInputValue===this.value)&&(null===(t=this.inputReference)||void 0===t?void 0:t.validity.valid)}setPattern(){var t,e;if((null===(t=this.validation.custom)||void 0===t?void 0:t.length)>0)return null===(e=this.validation.custom.find((t=>"regex"===t.rule)))||void 0===e?void 0:e.pattern}setErrorMessage(){var t,e,i,s;if(this.inputReference.validity.patternMismatch){const i=null===(t=this.validation.custom.find((t=>"regex"===t.rule)))||void 0===t?void 0:t.errorKey,s=null===(e=this.validation.custom.find((t=>"regex"===t.rule)))||void 0===e?void 0:e.errorMessage;return r(`${i}`,this.language)?r(`${i}`,this.language):s}if(this.inputReference.validity.tooShort||this.inputReference.validity.tooLong)return r("lengthError",this.language,{values:{minLength:this.validation.minLength,maxLength:this.validation.maxLength}});if(this.inputReference.validity.valueMissing)return r("requiredError",this.language);if(this.isDuplicateInput&&this.duplicateInputValue!==this.value){const t=null===(i=this.validation.custom.find((t=>"duplicate-input"===t.rule)))||void 0===i?void 0:i.errorKey,e=null===(s=this.validation.custom.find((t=>"duplicate-input"===t.rule)))||void 0===s?void 0:s.errorMessage;return r(`${t}`,this.language)?r(`${t}`,this.language):e}}renderTooltip(){return this.showTooltip?i("div",{class:"text__tooltip "+(this.showTooltip?"visible":""),ref:t=>this.tooltipReference=t,innerHTML:this.tooltip}):null}render(){let t="";return this.touched&&(t=1==this.isValid||null==this.isValid?"":"text__input--invalid"),i("div",{class:`text__wrapper ${this.name}__input ${this.autofilled?"text__wrapper--autofilled":""}`,ref:t=>this.stylingContainer=t},i("div",{class:"text__wrapper--flex"},i("label",{class:"text__label  "+(this.validation.mandatory?"text__label--required":""),htmlFor:`${this.name}__input`},this.displayName),i("div",{class:"text__wrapper--relative"},this.tooltip&&i("img",{class:"text__tooltip-icon",src:o,alt:"",ref:t=>this.tooltipIconReference=t,onClick:()=>this.showTooltip=!this.showTooltip}),this.renderTooltip())),i("input",{name:this.name,id:`${this.name}__input`,value:this.defaultValue,type:"text",class:`text__input ${t}`,placeholder:`${this.placeholder}`,ref:t=>this.inputReference=t,readOnly:this.autofilled,pattern:this.validationPattern,required:this.validation.mandatory,minlength:this.validation.minLength,maxlength:this.validation.maxLength,onInput:this.handleInput,onBlur:this.handleBlur,onClick:this.handleClick}),i("small",{class:"text__error-message"},this.errorMessage))}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};sl.style='*,*::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}';export{Ar as checkbox_group_input,Er as checkbox_input,Th as date_input,Dh as email_input,Sh as number_input,Nh as password_input,Lh as radio_input,el as select_input,il as tel_input,sl as text_input}

package/dist/types/components/text-input/text-input.d.ts

@@ -75,6 +75,7 @@ export declare class TextInput {
   componentDidLoad(): void;
   handleInput: (event: Event) => void;
   handleBlur: (event: Event) => void;
+  handleClick(): void;
   setValidity(): boolean;
   setPattern(): string;
   setErrorMessage(): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-input",
-  "version": "1.16.1",
+  "version": "1.18.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",
@@ -8,7 +8,7 @@
   "types": "./dist/types/index.d.ts",
   "collection": "./dist/collection/collection-manifest.json",
   "collection:main": "./dist/collection/index.js",
-  "unpkg": "./dist/general-input/general-input.js",
+  "unpkg": "./dist/general-input/general-input.esm.js",
   "files": [
     "dist/",
     "loader/"