@everymatrix/general-input 1.10.0 → 1.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-input",
-  "version": "1.10.0",
+  "version": "1.10.2",
   "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.esm.js",
+  "unpkg": "./dist/general-input/general-input.js",
   "files": [
     "dist/",
     "loader/"

package/dist/general-input/p-c9e79656.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as e}from"./p-d9f7fa2e.js";const s=["ro","en"],a={en:{dateError:"The selected date should be between {min} and {max}",numberLengthError:"The number should be between ${min} and ${max}",lengthError:"The length should be between {minLength} and {maxLength}",requiredError:"This input is required.",nextButton:"Next",backButton:"Back"},ro:{lengthError:"Cuvântul introdus este prea scurt. {minLength} and {maxLength}",requiredError:"Acest câmp este obligatoriu."}},r=(t,i,e)=>{const r=i;let l=a[void 0!==r&&s.includes(r)?r:"en"][t];if(void 0!==e)for(const[t,i]of Object.entries(e.values)){const e=new RegExp(`{${t}}`,"g");l=l.replace(e,i)}return l},l=class{constructor(e){t(this,e),this.sendValidityState=i(this,"sendValidityState",7),this.sendInputValue=i(this,"sendInputValue",7)}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)}connectedCallback(){}handleClick(){this.value=this.inputReference.checked,this.errorMessage=this.setErrorMessage(),this.isValid=this.setValidity(),this.validityStateHandler({valid:this.isValid,name:this.name})}setValidity(){return this.inputReference.validity.valid}setErrorMessage(){if(this.inputReference.validity.valueMissing)return r("requiredError",this.language)}render(){return e("div",{class:"checkbox__wrapper"},e("input",{type:"checkbox",id:`${this.name}__input`,ref:t=>this.inputReference=t,name:this.name,required:this.validation.mandatory,value:"jdjdj",onClick:()=>this.handleClick()}),e("label",{htmlFor:`${this.name}__input`},this.displayName," ",this.validation.mandatory?"*":""),e("small",{class:"checkbox__error-message"},this.errorMessage))}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};l.style="*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:red}";const n=class{constructor(e){t(this,e),this.sendValidityState=i(this,"sendValidityState",7),this.sendInputValue=i(this,"sendInputValue",7)}checkValidityHandler(t){1==t&&(this.isValid=this.setValidity(),this.errorMessage=this.setErrorMessage(),this.validityStateHandler({valid:this.isValid,name:this.name}))}validityChanged(){1==this.checkValidity&&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)}handleInput(t){this.value=t.target.value,this.errorMessage=this.setErrorMessage(),this.isValid=this.setValidity()}setValidity(){return this.inputReference.validity.valid}setErrorMessage(){return this.inputReference.validity.rangeUnderflow||this.inputReference.validity.rangeOverflow?r("dateError",this.language,{values:{min:this.validation.min,max:this.validation.max}}):this.inputReference.validity.valueMissing?r("requiredError",this.language):void 0}render(){return e("div",{class:"date__wrapper"},e("input",{id:`${this.name}__input`,type:"date",class:"date__input",value:this.defaultValue,placeholder:`${this.displayName} ${this.validation.mandatory?"*":""}`,ref:t=>this.inputReference=t,required:this.validation.mandatory,max:this.validation.max,min:this.validation.min,onInput:t=>this.handleInput(t)}),e("label",{class:`date__label ${this.validation.mandatory?"date__label--required":""}}`,htmlFor:`${this.name}__input`},this.displayName," ",this.validation.mandatory?"*":""),e("small",{class:"date__error-message"},this.errorMessage))}static get watchers(){return{checkValidity:["checkValidityHandler"],isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};n.style='*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.date__wrapper{position:relative;display:flex;flex-direction:column-reverse;padding-top:10px}.date__label{color:#474747;font-size:16px;position:absolute;bottom:15px;left:5px;transform:translateY(-25px);transition:all 0.3s cubic-bezier(0.5, 0, 0.5, 1)}.date__label--required::after{content:"*";margin-left:5px;color:#666666}.date__input{width:inherit;padding:15px 6px;position:relative;border:none;border-bottom:3px solid #666666;background-color:transparent;color:#666666;font-size:16px;font-family:inherit}.date__input:focus{outline:none;box-shadow:0 5px 5px rgba(16, 15, 15, 0.1)}.date__input::placeholder{color:#666666}.date__input--invalid{border-bottom:3px solid #cc0000}.date__input:placeholder-shown+.date__label{opacity:0;visibility:hidden;transform:translateY(0)}.date__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000}';const h=class{constructor(e){t(this,e),this.sendValidityState=i(this,"sendValidityState",7),this.sendInputValue=i(this,"sendInputValue",7),this.validationPattern=""}checkValidityHandler(t){1==t&&(this.isValid=this.setValidity(),this.errorMessage=this.setErrorMessage(),this.validityStateHandler({valid:this.isValid,name:this.name}))}validityChanged(){1==this.checkValidity&&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)}connectedCallback(){this.validationPattern=this.setPattern()}handleInput(t){this.value=t.target.value,this.debounceTime&&clearTimeout(this.debounceTime),this.debounceTime=setTimeout((()=>{this.errorMessage=this.setErrorMessage(),this.isValid=this.setValidity()}),500)}setValidity(){return this.inputReference.validity.valid}setPattern(){var t;if((null===(t=this.validation.custom)||void 0===t?void 0:t.length)>0)return this.validation.custom.find((t=>"regex"===t.rule)).pattern}setErrorMessage(){return this.inputReference.validity.patternMismatch?this.validation.custom.find((t=>"regex"===t.rule)).errorMessage: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}render(){return e("div",{class:"email__wrapper"},e("input",{id:`${this.name}__input`,type:"email",class:"email__input",value:this.defaultValue,placeholder:`${this.displayName} ${this.validation.mandatory?"*":""}`,ref:t=>this.inputReference=t,pattern:this.validationPattern,required:this.validation.mandatory,minlength:this.validation.minLength,maxlength:this.validation.maxLength,onInput:t=>this.handleInput(t)}),e("label",{class:"email__label "+(this.validation.mandatory?"email__label--required":""),htmlFor:`${this.name}__input`},this.displayName),e("small",{class:"email__error-message"},this.errorMessage))}static get watchers(){return{checkValidity:["checkValidityHandler"],isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};h.style='*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.email__wrapper{position:relative;display:flex;flex-direction:column-reverse;padding-top:10px}.email__label{color:#474747;font-size:16px;position:absolute;bottom:15px;left:5px;transform:translateY(-25px);transition:all 0.3s cubic-bezier(0.5, 0, 0.5, 1)}.email__label--required::after{content:"*";margin-left:5px;color:#666666}.email__input{width:inherit;padding:15px 6px;position:relative;border:none;border-bottom:3px solid #666666;background-color:transparent;color:#666666;font-size:16px;font-family:inherit}.email__input:focus{outline:none;box-shadow:0 5px 5px rgba(16, 15, 15, 0.1)}.email__input::placeholder{color:#666666}.email__input--invalid{border-bottom:3px solid #cc0000}.email__input:placeholder-shown+.email__label{opacity:0;visibility:hidden;transform:translateY(0)}.email__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000}';const o=class{constructor(e){t(this,e),this.sendValidityState=i(this,"sendValidityState",7),this.sendInputValue=i(this,"sendInputValue",7)}checkValidityHandler(t){1==t&&(this.isValid=this.setValidity(),this.errorMessage=this.setErrorMessage(),this.validityStateHandler({valid:this.isValid,name:this.name}))}validityChanged(){1==this.checkValidity&&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)}handleInput(t){this.value=t.target.value,this.debounceTime&&clearTimeout(this.debounceTime),this.debounceTime=setTimeout((()=>{this.errorMessage=this.setErrorMessage(),this.isValid=this.setValidity()}),500)}setValidity(){return this.inputReference.validity.valid}setErrorMessage(){return this.inputReference.validity.rangeUnderflow||this.inputReference.validity.rangeOverflow?r("numberLengthError",this.language,{values:{min:this.validation.min,max:this.validation.max}}):this.inputReference.validity.valueMissing?r("requiredError",this.language):void 0}render(){return e("div",{class:"number__wrapper"},e("input",{ref:t=>this.inputReference=t,type:"number",value:this.defaultValue,id:`${this.name}__input`,class:"number__input "+(1==this.isValid||null==this.isValid?"":"number__input--invalid"),placeholder:`${this.displayName} ${this.validation.mandatory?"*":""}`,required:this.validation.mandatory,max:this.validation.max,min:this.validation.min,onInput:t=>this.handleInput(t)}),e("label",{class:"number__label "+(this.validation.mandatory?"number__label--required":""),htmlFor:`${this.name}__input`},this.displayName),e("small",{class:"number__error-message"},this.errorMessage))}static get watchers(){return{checkValidity:["checkValidityHandler"],isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};o.style='*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.number__wrapper{position:relative;display:flex;flex-direction:column-reverse;padding-top:10px}.number__label{color:#474747;font-size:16px;position:absolute;bottom:15px;left:5px;transform:translateY(-25px);transition:all 0.3s cubic-bezier(0.5, 0, 0.5, 1)}.number__label--required::after{content:"*";margin-left:5px;color:#666666}.number__input{width:inherit;padding:15px 6px;position:relative;border:none;border-bottom:3px solid #666666;background-color:transparent;color:#666666;font-size:16px;font-family:inherit;-moz-appearance:textfield;}.number__input::-webkit-outer-spin-button,.number__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number__input:focus{outline:none;box-shadow:0 5px 5px rgba(16, 15, 15, 0.1)}.number__input::placeholder{color:#666666}.number__input--invalid{border-bottom:3px solid #cc0000}.number__input:placeholder-shown+.number__label{opacity:0;visibility:hidden;transform:translateY(0)}.number__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000}';const d=class{constructor(e){t(this,e),this.sendValidityState=i(this,"sendValidityState",7),this.sendInputValue=i(this,"sendInputValue",7),this.validationPattern=""}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)}connectedCallback(){this.validationPattern=this.setPattern()}handleInput(t){this.value=t.target.value,this.errorMessage=this.setErrorMessage(),this.isValid=this.setValidity(),this.validityStateHandler({valid:this.isValid,name:this.name})}setValidity(){return this.inputReference.validity.valid}setPattern(){var t;if((null===(t=this.validation.custom)||void 0===t?void 0:t.length)>0)return this.validation.custom.find((t=>"regex"===t.rule)).pattern}setErrorMessage(){return this.inputReference.validity.patternMismatch?this.validation.custom.find((t=>"regex"===t.rule)).errorMessage: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}render(){return e("div",{class:"password__wrapper"},e("input",{type:"password",id:`${this.name}__input`,class:"password__input "+(1==this.isValid||null==this.isValid?"":"password__input--invalid"),name:this.name,ref:t=>this.inputReference=t,required:this.validation.mandatory,maxlength:this.validation.maxLength,minlength:this.validation.minLength,pattern:this.validationPattern,placeholder:`${this.displayName} ${this.validation.mandatory?"*":""}`,onBlur:t=>this.handleInput(t)}),e("label",{class:"password__label "+(this.validation.mandatory?"password__label--required":""),htmlFor:`${this.name}__input`},this.displayName),e("small",{class:"password__error-message"},this.errorMessage))}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};d.style='*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.password__wrapper{position:relative;display:flex;flex-direction:column-reverse;padding-top:10px}.password__label{color:#474747;font-size:16px;position:absolute;bottom:15px;left:5px;transform:translateY(-25px);transition:all 0.3s cubic-bezier(0.5, 0, 0.5, 1)}.password__label--required::after{content:"*";margin-left:5px;color:#666666}.password__input{width:inherit;padding:15px 6px;position:relative;border:none;border-bottom:3px solid #666666;background-color:transparent;color:#666666;font-size:16px;font-family:inherit}.password__input:focus{outline:none;box-shadow:0 5px 5px rgba(16, 15, 15, 0.1)}.password__input::placeholder{color:#666666}.password__input--invalid{border-bottom:3px solid #cc0000}.password__input:placeholder-shown+.password__label{opacity:0;visibility:hidden;transform:translateY(0)}.password__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000}';const p=class{constructor(e){t(this,e),this.sendInputValue=i(this,"sendInputValue",7),this.sendValidityState=i(this,"sendValidityState",7)}checkValidityHandler(t){1==t&&(this.isValid=this.setValidity(),this.errorMessage=this.setErrorMessage(),this.validityStateHandler({valid:this.isValid,name:this.name}))}validityChanged(){1==this.checkValidity&&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})}valueHandler(t){this.sendInputValue.emit(t)}validityStateHandler(t){this.sendValidityState.emit(t)}connectedCallback(){}handleClick(t){this.value=t.target.value,this.isValid=this.setValidity(),this.errorMessage=this.setErrorMessage()}setValidity(){return this.inputReference.validity.valid}setErrorMessage(){if(this.inputReference.validity.valueMissing)return r("requiredError",this.language)}render(){return e("fieldset",{class:"radio__fieldset"},e("legend",{class:"radio__legend"},this.displayName,":"),this.optionsGroup.map((t=>e("div",{class:"radio__wrapper"},e("input",{type:"radio",class:"radio__input",id:`${t.label}__input`,ref:t=>this.inputReference=t,value:t.value,name:this.name,required:this.validation.mandatory,onClick:t=>this.handleClick(t)}),e("label",{htmlFor:`${t.label}__input`},t.label)))),e("small",{class:"radio__error-message"},this.errorMessage))}static get watchers(){return{checkValidity:["checkValidityHandler"],isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};p.style="*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.radio__fieldset{border:none;position:relative}.radio__wrapper{display:flex;gap:5px}.radio__error-message{position:absolute;top:calc(100% + 5px);left:0;color:red}";const u=class{constructor(e){t(this,e),this.sendValidityState=i(this,"sendValidityState",7),this.sendInputValue=i(this,"sendInputValue",7),this.options=[]}checkValidityHandler(t){1==t&&(this.isValid=this.setValidity(),this.errorMessage=this.setErrorMessage(),this.validityStateHandler({valid:this.isValid,name:this.name}))}validityChanged(){1==this.checkValidity&&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)}connectedCallback(){this.displayedOptions=this.options,console.log(this.displayedOptions)}componentWillLoad(){if(console.log(this.action,this.options),this.action&&!this.options.length&&"GET"==this.action.split(" ")[0])return this.getOptions().then((t=>{this.displayedOptions=t.countries.map((t=>({label:t.Name,value:t.Alpha2Code})))}))}getOptions(){const t=new URL("https://demo-api.stage.norway.everymatrix.com/v1/player/countries");return new Promise(((i,e)=>{fetch(t.href).then((t=>t.json())).then((t=>{i(t)})).catch((t=>{console.error(t),e(t)}))}))}handleChange(t){this.value=t.target.value,this.errorMessage=this.setErrorMessage(),this.isValid=this.setValidity(),this.inputReference.previousElementSibling.classList.remove("select__label--hidden"),console.log(this.action,this.options)}setValidity(){return this.inputReference.validity.valid}setErrorMessage(){if(this.inputReference.validity.valueMissing)return r("requiredError",this.language)}render(){return console.log("RENDER"),e("div",{class:"select__wrapper"},e("label",{class:"select__label select__label--hidden",htmlFor:`${this.name}__input`},this.displayName,":"),e("select",{ref:t=>this.inputReference=t,name:this.name,id:`${this.name}__input`,required:this.validation.mandatory,class:"select__input",onChange:t=>this.handleChange(t)},e("option",{value:"",selected:!0,disabled:!0}," ",this.displayName," "),this.displayedOptions.map((t=>e("option",{value:t.value}," ",t.label," ")))),e("small",{class:"select__error-message"},this.errorMessage))}static get watchers(){return{checkValidity:["checkValidityHandler"],isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};u.style="*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.select__wrapper{position:relative;display:flex;padding-top:10px;width:100%}.select__label{color:#474747;font-size:16px;position:absolute;bottom:15px;left:5px;transform:translateY(-25px);transition:all 0.3s cubic-bezier(0.5, 0, 0.5, 1)}.select__label--hidden{opacity:0;visibility:hidden;transform:translateY(0)}.select__input{width:inherit;padding:15px 6px;position:relative;border:none;border-bottom:3px solid #666666;background-color:transparent;color:#666666;font-size:16px;font-family:inherit}.select__input:focus{outline:none;box-shadow:0 5px 5px rgba(16, 15, 15, 0.1)}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000}";const c=class{constructor(e){t(this,e),this.sendValidityState=i(this,"sendValidityState",7),this.sendInputValue=i(this,"sendInputValue",7),this.validationPattern=""}checkValidityHandler(t){1==t&&(this.isValid=this.setValidity(),this.errorMessage=this.setErrorMessage(),this.validityStateHandler({valid:this.isValid,name:this.name}))}validityChanged(){1==this.checkValidity&&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)}connectedCallback(){this.validationPattern=this.setPattern()}handleInput(t){this.value=t.target.value,this.debounceTime&&clearTimeout(this.debounceTime),this.debounceTime=setTimeout((()=>{this.errorMessage=this.setErrorMessage(),this.isValid=this.setValidity()}),500)}setValidity(){return this.inputReference.validity.valid}setPattern(){var t;if((null===(t=this.validation.custom)||void 0===t?void 0:t.length)>0)return this.validation.custom.find((t=>"regex"===t.rule)).pattern}setErrorMessage(){return this.inputReference.validity.patternMismatch?this.validation.custom.find((t=>"regex"===t.rule)).errorMessage: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}render(){return e("div",{class:"tel__wrapper"},e("input",{type:"tel",ref:t=>this.inputReference=t,id:`${this.name}__input`,value:this.defaultValue,class:"tel__input "+(1==this.isValid||null==this.isValid?"":"tel__input--invalid"),placeholder:`${this.displayName} ${this.validation.mandatory?"*":""}`,required:this.validation.mandatory,minlength:this.validation.minLength,maxlength:this.validation.maxLength,pattern:this.validationPattern,onInput:t=>this.handleInput(t)}),e("label",{class:"tel__label "+(this.validation.mandatory?"tel__label--required":""),htmlFor:`${this.name}__input`},this.displayName),e("small",{class:"tel__error-message"},this.errorMessage))}static get watchers(){return{checkValidity:["checkValidityHandler"],isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};c.style='*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.tel__wrapper{position:relative;display:flex;flex-direction:column-reverse;padding-top:10px}.tel__label{color:#474747;font-size:16px;position:absolute;bottom:15px;left:5px;transform:translateY(-25px);transition:all 0.3s cubic-bezier(0.5, 0, 0.5, 1)}.tel__label--required::after{content:"*";margin-left:5px;color:#666666}.tel__input{width:inherit;padding:15px 6px;position:relative;border:none;border-bottom:3px solid #666666;background-color:transparent;color:#666666;font-size:16px;font-family:inherit;-moz-appearance:textfield;}.tel__input::-webkit-outer-spin-button,.tel__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tel__input:focus{outline:none;box-shadow:0 5px 5px rgba(16, 15, 15, 0.1)}.tel__input::placeholder{color:#666666}.tel__input--invalid{border-bottom:3px solid #cc0000}.tel__input:placeholder-shown+.tel__label{opacity:0;visibility:hidden;transform:translateY(0)}.tel__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000}';const _=class{constructor(e){t(this,e),this.sendValidityState=i(this,"sendValidityState",7),this.sendInputValue=i(this,"sendInputValue",7),this.defaultValue="",this.errorMessage="",this.value="",this.customRules=[],this.validationPattern=""}validityChanged(){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)}connectedCallback(){this.customRules=this.setCustomRules(),this.validationPattern=this.setPattern()}handleInput(t){this.value=t.target.value,this.isValid=this.setValidity(),this.errorMessage=this.setErrorMessage(),this.validityStateHandler({valid:this.isValid,name:this.name})}setValidity(){return this.inputReference.validity.valid}setCustomRules(){var t;if((null===(t=this.validation.custom)||void 0===t?void 0:t.length)>0)return this.validation.custom.filter((t=>"regex"!==t.rule))}setPattern(){var t;if((null===(t=this.validation.custom)||void 0===t?void 0:t.length)>0)return this.validation.custom.find((t=>"regex"===t.rule)).pattern}setErrorMessage(){return this.inputReference.validity.patternMismatch?this.validation.custom.find((t=>"regex"===t.rule)).errorMessage: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}render(){const t=1==this.isValid||null==this.isValid?"":"text__input--invalid";return console.log("this",this.name,this.defaultValue,this.displayName),e("div",{class:"text__wrapper"},e("input",{id:`${this.name}__input`,value:this.defaultValue,type:"text",class:`text__input ${t}`,placeholder:`${this.displayName} ${this.validation.mandatory?"*":""}`,ref:t=>this.inputReference=t,pattern:this.validationPattern,required:this.validation.mandatory,minlength:this.validation.minLength,maxlength:this.validation.maxLength,onBlur:t=>{this.handleInput(t)}}),e("label",{class:"text__label  "+(this.validation.mandatory?"text__label--required":""),htmlFor:`${this.name}__input`},this.displayName),e("small",{class:"text__error-message"},this.errorMessage))}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};_.style='*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.text__wrapper{position:relative;display:flex;flex-direction:column-reverse;padding-top:10px}.text__label{color:#474747;font-size:16px;position:absolute;bottom:15px;left:5px;transform:translateY(-25px);transition:all 0.3s cubic-bezier(0.5, 0, 0.5, 1)}.text__label--required::after{content:"*";margin-left:5px;color:#666666}.text__input{width:inherit;padding:15px 6px;position:relative;border:none;border-bottom:3px solid #666666;background-color:transparent;color:#666666;font-size:16px;font-family:inherit}.text__input:focus{outline:none;box-shadow:0 5px 5px rgba(16, 15, 15, 0.1)}.text__input::placeholder{color:#666666}.text__input--invalid{border-bottom:3px solid #cc0000}.text__input:placeholder-shown+.text__label{opacity:0;visibility:hidden;transform:translateY(0)}.text__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000}';export{l as checkbox_input,n as date_input,h as email_input,o as number_input,d as password_input,p as radio_input,u as select_input,c as tel_input,_ as text_input}