@everymatrix/general-input 1.27.8 → 1.27.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/checkbox-group-input_10.cjs.entry.js +9 -1
- package/dist/collection/components/select-input/select-input.js +9 -1
- package/dist/components/select-input2.js +9 -1
- package/dist/esm/checkbox-group-input_10.entry.js +9 -1
- package/dist/general-input/general-input.esm.js +1 -1
- package/dist/general-input/{p-e322bf39.entry.js → p-765941e7.entry.js} +1 -1
- package/package.json +1 -1
|
@@ -35622,7 +35622,15 @@ const SelectInput = class {
|
|
|
35622
35622
|
this.touched = false;
|
|
35623
35623
|
this.handleChange = (event) => {
|
|
35624
35624
|
this.touched = true;
|
|
35625
|
-
|
|
35625
|
+
const selectedValue = event.target.value;
|
|
35626
|
+
// Find the original option based on case-insensitive comparison
|
|
35627
|
+
const originalOption = this.options.find(option => option.value.toLowerCase() === selectedValue.toLowerCase());
|
|
35628
|
+
if (originalOption) {
|
|
35629
|
+
this.value = originalOption.value;
|
|
35630
|
+
}
|
|
35631
|
+
else {
|
|
35632
|
+
this.value = selectedValue;
|
|
35633
|
+
}
|
|
35626
35634
|
this.isValid = this.setValidity();
|
|
35627
35635
|
this.errorMessage = this.setErrorMessage();
|
|
35628
35636
|
this.emitValueHandler(true);
|
|
@@ -21,7 +21,15 @@ export class SelectInput {
|
|
|
21
21
|
this.touched = false;
|
|
22
22
|
this.handleChange = (event) => {
|
|
23
23
|
this.touched = true;
|
|
24
|
-
|
|
24
|
+
const selectedValue = event.target.value;
|
|
25
|
+
// Find the original option based on case-insensitive comparison
|
|
26
|
+
const originalOption = this.options.find(option => option.value.toLowerCase() === selectedValue.toLowerCase());
|
|
27
|
+
if (originalOption) {
|
|
28
|
+
this.value = originalOption.value;
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
this.value = selectedValue;
|
|
32
|
+
}
|
|
25
33
|
this.isValid = this.setValidity();
|
|
26
34
|
this.errorMessage = this.setErrorMessage();
|
|
27
35
|
this.emitValueHandler(true);
|
|
@@ -29,7 +29,15 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
29
29
|
this.touched = false;
|
|
30
30
|
this.handleChange = (event) => {
|
|
31
31
|
this.touched = true;
|
|
32
|
-
|
|
32
|
+
const selectedValue = event.target.value;
|
|
33
|
+
// Find the original option based on case-insensitive comparison
|
|
34
|
+
const originalOption = this.options.find(option => option.value.toLowerCase() === selectedValue.toLowerCase());
|
|
35
|
+
if (originalOption) {
|
|
36
|
+
this.value = originalOption.value;
|
|
37
|
+
}
|
|
38
|
+
else {
|
|
39
|
+
this.value = selectedValue;
|
|
40
|
+
}
|
|
33
41
|
this.isValid = this.setValidity();
|
|
34
42
|
this.errorMessage = this.setErrorMessage();
|
|
35
43
|
this.emitValueHandler(true);
|
|
@@ -35618,7 +35618,15 @@ const SelectInput = class {
|
|
|
35618
35618
|
this.touched = false;
|
|
35619
35619
|
this.handleChange = (event) => {
|
|
35620
35620
|
this.touched = true;
|
|
35621
|
-
|
|
35621
|
+
const selectedValue = event.target.value;
|
|
35622
|
+
// Find the original option based on case-insensitive comparison
|
|
35623
|
+
const originalOption = this.options.find(option => option.value.toLowerCase() === selectedValue.toLowerCase());
|
|
35624
|
+
if (originalOption) {
|
|
35625
|
+
this.value = originalOption.value;
|
|
35626
|
+
}
|
|
35627
|
+
else {
|
|
35628
|
+
this.value = selectedValue;
|
|
35629
|
+
}
|
|
35622
35630
|
this.isValid = this.setValidity();
|
|
35623
35631
|
this.errorMessage = this.setErrorMessage();
|
|
35624
35632
|
this.emitValueHandler(true);
|
|
@@ -1 +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-
|
|
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-765941e7",[[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-df6a6dfc",[[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-d601d76d",[[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)));
|
|
@@ -3643,4 +3643,4 @@ function ph(t){return null!=t}function mh(t,e){return t.findIndex((t=>!(t instan
|
|
|
3643
3643
|
></vaadin-combo-box-overlay>
|
|
3644
3644
|
|
|
3645
3645
|
<slot name="tooltip"></slot>
|
|
3646
|
-
`}static get properties(){return{_positionTarget:{type:Object}}}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new Js(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new ir(this.inputElement,this._labelController)),this._tooltipController=new as(this),this.addController(this._tooltipController),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this._tooltipController.setShouldShow((t=>!t.opened)),this._positionTarget=this.shadowRoot.querySelector('[part="input-field"]'),this._toggleElement=this.$.toggleButton}_onClearButtonClick(t){t.stopPropagation(),super._onClearButtonClick(t)}_onHostClick(t){const e=t.composedPath();(e.includes(this._labelNode)||e.includes(this._positionTarget))&&super._onHostClick(t)}}n(vh);const bh=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"]}}};bh.style='*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100%}vaadin-combo-box>input{background-color:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));font-weight:300;font-size:16px;-webkit-font-smoothing:initial;}.select{font-family:"Roboto";font-style:normal}.select__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px}.select__wrapper--autofilled{pointer-events:none}.select__wrapper--autofilled .select__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.select__wrapper--autofilled .select__input::part(input-field){color:var(--emfe-w-color-black, #000000)}.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:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.select__label--required::after{content:"*";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]::part(input-field){border-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.select__input[invalid]::part(input-field){border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:var(--emfe-w-color-black, #000000)}.select__input::part(input-field){border-radius:4px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-color-black, #000000);font-family:inherit;font-style:normal;font-size:16px;font-weight:300;line-height:1.5;padding:0;height:44px}.select__input::part(toggle-button){position:relative;right:10px}.select__input>input{padding:5px 15px}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.select__tooltip-icon{width:16px;height:auto}.select__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.select__tooltip.visible{opacity:1}';const gh=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"]}}};gh.style='*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.tel{font-family:"Roboto";font-style:normal}.tel__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px}.tel__wrapper--autofilled{pointer-events:none}.tel__wrapper--autofilled .tel__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.tel__wrapper--autofilled .tel__input::part(input-field){color:var(--emfe-w-color-black, #000000)}.tel__wrapper--flex{width:inherit;display:flex;align-items:center;border-radius:4px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);background-color:var(--emfe-w-color-white, #FFFFFF);overflow:hidden}.tel__wrapper--flex:focus-within{border-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.tel__wrapper--flex--invalid{border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.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:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.tel__label--required::after{content:"*";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.tel__prefix{--vaadin-field-default-width:90px}.tel__prefix[focus]{outline:none}.tel__prefix::part(input-field){border-radius:0 5px 5px 0;background-color:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-color-black, #000000);font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:1.5;border:none;border-right:2px solid #DDE0EE;border-image-source:linear-gradient(to bottom, rgba(221, 224, 238, 0) 25%, #dde0ee 25%, #dde0ee 75%, rgba(221, 224, 238, 0) 75%);border-image-slice:1;border-image-repeat:round}.tel__prefix::part(input-field):hover{background-color:var(--emfe-w-color-white, #FFFFFF)}.tel__prefix::part(toggle-button){color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.tel__input{font-family:inherit;border-radius:5px;width:100%;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));background-color:var(--emfe-w-color-white, #FFFFFF);border:none;width:inherit;position:relative;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px;height:42px;-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__input::placeholder{color:var(--emfe-w-color-gray-150, #979797)}.tel__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.tel__tooltip-icon{width:16px;height:auto}.tel__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.tel__tooltip.visible{opacity:1}';const yh=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"]}}};yh.style='*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.text{font-family:"Roboto";font-style:normal}.text__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px;height:100%}.text__wrapper--autofilled{pointer-events:none}.text__wrapper--autofilled .text__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.text__wrapper--autofilled .text__input::part(input-field){color:var(--emfe-w-color-black, #000000)}.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:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.text__label--required::after{content:"*";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.text__input{font-family:inherit;width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);background-color:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-color-black, #000000);border-radius:5px;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px}.text__input:focus{border:1px solid var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.text__input--invalid{border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.text__input::placeholder{color:var(--emfe-w-color-gray-150, #828282)}.text__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.text__tooltip-icon{width:16px;height:auto}.text__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.text__tooltip.visible{opacity:1}';export{gr as checkbox_group_input,yr as checkbox_input,ql as date_input,Vl as email_input,Rl as number_input,Ql as password_input,Xl as radio_input,bh as select_input,gh as tel_input,yh as text_input}
|
|
3646
|
+
`}static get properties(){return{_positionTarget:{type:Object}}}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new Js(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new ir(this.inputElement,this._labelController)),this._tooltipController=new as(this),this.addController(this._tooltipController),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this._tooltipController.setShouldShow((t=>!t.opened)),this._positionTarget=this.shadowRoot.querySelector('[part="input-field"]'),this._toggleElement=this.$.toggleButton}_onClearButtonClick(t){t.stopPropagation(),super._onClearButtonClick(t)}_onHostClick(t){const e=t.composedPath();(e.includes(this._labelNode)||e.includes(this._positionTarget))&&super._onHostClick(t)}}n(vh);const bh=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;const e=t.target.value,i=this.options.find((t=>t.value.toLowerCase()===e.toLowerCase()));this.value=i?i.value:e,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"]}}};bh.style='*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100%}vaadin-combo-box>input{background-color:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));font-weight:300;font-size:16px;-webkit-font-smoothing:initial;}.select{font-family:"Roboto";font-style:normal}.select__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px}.select__wrapper--autofilled{pointer-events:none}.select__wrapper--autofilled .select__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.select__wrapper--autofilled .select__input::part(input-field){color:var(--emfe-w-color-black, #000000)}.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:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.select__label--required::after{content:"*";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]::part(input-field){border-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.select__input[invalid]::part(input-field){border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:var(--emfe-w-color-black, #000000)}.select__input::part(input-field){border-radius:4px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-color-black, #000000);font-family:inherit;font-style:normal;font-size:16px;font-weight:300;line-height:1.5;padding:0;height:44px}.select__input::part(toggle-button){position:relative;right:10px}.select__input>input{padding:5px 15px}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.select__tooltip-icon{width:16px;height:auto}.select__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.select__tooltip.visible{opacity:1}';const gh=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"]}}};gh.style='*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.tel{font-family:"Roboto";font-style:normal}.tel__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px}.tel__wrapper--autofilled{pointer-events:none}.tel__wrapper--autofilled .tel__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.tel__wrapper--autofilled .tel__input::part(input-field){color:var(--emfe-w-color-black, #000000)}.tel__wrapper--flex{width:inherit;display:flex;align-items:center;border-radius:4px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);background-color:var(--emfe-w-color-white, #FFFFFF);overflow:hidden}.tel__wrapper--flex:focus-within{border-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.tel__wrapper--flex--invalid{border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.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:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.tel__label--required::after{content:"*";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.tel__prefix{--vaadin-field-default-width:90px}.tel__prefix[focus]{outline:none}.tel__prefix::part(input-field){border-radius:0 5px 5px 0;background-color:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-color-black, #000000);font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:1.5;border:none;border-right:2px solid #DDE0EE;border-image-source:linear-gradient(to bottom, rgba(221, 224, 238, 0) 25%, #dde0ee 25%, #dde0ee 75%, rgba(221, 224, 238, 0) 75%);border-image-slice:1;border-image-repeat:round}.tel__prefix::part(input-field):hover{background-color:var(--emfe-w-color-white, #FFFFFF)}.tel__prefix::part(toggle-button){color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.tel__input{font-family:inherit;border-radius:5px;width:100%;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));background-color:var(--emfe-w-color-white, #FFFFFF);border:none;width:inherit;position:relative;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px;height:42px;-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__input::placeholder{color:var(--emfe-w-color-gray-150, #979797)}.tel__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.tel__tooltip-icon{width:16px;height:auto}.tel__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.tel__tooltip.visible{opacity:1}';const yh=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"]}}};yh.style='*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.text{font-family:"Roboto";font-style:normal}.text__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px;height:100%}.text__wrapper--autofilled{pointer-events:none}.text__wrapper--autofilled .text__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.text__wrapper--autofilled .text__input::part(input-field){color:var(--emfe-w-color-black, #000000)}.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:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.text__label--required::after{content:"*";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.text__input{font-family:inherit;width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);background-color:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-color-black, #000000);border-radius:5px;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px}.text__input:focus{border:1px solid var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.text__input--invalid{border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.text__input::placeholder{color:var(--emfe-w-color-gray-150, #828282)}.text__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.text__tooltip-icon{width:16px;height:auto}.text__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.text__tooltip.visible{opacity:1}';export{gr as checkbox_group_input,yr as checkbox_input,ql as date_input,Vl as email_input,Rl as number_input,Ql as password_input,Xl as radio_input,bh as select_input,gh as tel_input,yh as text_input}
|