@everymatrix/general-registration 1.10.0

package/dist/general-registration/p-cadaffbe.entry.js

@@ -0,0 +1 @@
+import{r as t,c as i,h as e}from"./p-0e7175cd.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 n=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");n=n.replace(e,i)}return n},n=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"]}}};n.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 l=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"]}}};l.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 o=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"]}}};o.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 h=class{constructor(i){t(this,i),this.type="text"}render(){switch(this.type.toLowerCase()){case"text":return e("text-input",{name:this.name,displayName:this.displayName,validation:this.validation,defaultValue:this.defaultValue,emitValue:this.emitValue,language:this.language});case"email":return e("email-input",{name:this.name,displayName:this.displayName,validation:this.validation,defaultValue:this.defaultValue,emitValue:this.emitValue,language:this.language});case"number":return e("number-input",{name:this.name,displayName:this.displayName,validation:this.validation,defaultValue:this.defaultValue,emitValue:this.emitValue,language:this.language});case"checkbox":return e("checkbox-input",{name:this.name,displayName:this.displayName,validation:this.validation,emitValue:this.emitValue,language:this.language});case"datetime":return e("date-input",{name:this.name,displayName:this.displayName,validation:this.validation,defaultValue:this.defaultValue,emitValue:this.emitValue,language:this.language});case"password":return e("password-input",{name:this.name,displayName:this.displayName,validation:this.validation,emitValue:this.emitValue,language:this.language});case"radio":return e("radio-input",{name:this.name,displayName:this.displayName,optionsGroup:this.options,validation:this.validation,emitValue:this.emitValue,language:this.language});case"tel":return e("tel-input",{name:this.name,action:this.action,displayName:this.displayName,validation:this.validation,defaultValue:this.defaultValue,emitValue:this.emitValue,language:this.language});case"dropdown":return e("select-input",{name:this.name,action:this.action,displayName:this.displayName,options:this.options,validation:this.validation,emitValue:this.emitValue,language:this.language});default:return e("p",null,"The ",this.type," input type is not valid")}}};h.style=":host{display:block}";const d=["ro","en"],p={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."}},u=(t,i,e)=>{const s=i;let a=p[void 0!==s&&d.includes(s)?s:"en"][t];if(void 0!==e)for(const[t,i]of Object.entries(e.values)){const e=new RegExp(`{${t}}`,"g");a=a.replace(e,i)}return a},c=class{constructor(i){t(this,i),this.data={type:"default",content:{step:"step1",fields:[{name:"firstName",displayName:"Username",defaultValue:null,validate:{mandatory:!0,minLength:3,maxLength:20},autofill:!1},{name:"firstName",displayName:"Username",defaultValue:null,validate:{mandatory:!0,minLength:3,maxLength:20},autofill:!1}],actions:["get-next-step","some-async-action-before-submitting","submit-step-data"]}},this.language="en",this.emitValue=!1,this.listOfInputs=[],this.isLoading=!1,this.listOfInputValues=[],this.listOfActions=[],this.actionsStepIndex=0}validityStateHandler(){console.log("bababa",this.isFormValid),this.buttonReference.disabled=!this.isFormValid}checkInputsValidityHandler(t){console.log("se ajunge aici"),this.listOfInputs.find((i=>i.name==t.detail.name)).isValid=t.detail.valid,this.isFormValid=!this.getInvalidStatus(this.listOfInputs)}getInputsValueHandler(t){console.log("sendInputValue"),this.listOfInputValues.find((i=>i.name==t.detail.name)).inputValue=t.detail.value}connectedCallback(){}componentWillLoad(){return this.getRegisterConfig().then((t=>{this.formatConfig(t)}))}nextHandler(t){t.preventDefault(),this.emitValue=!0,this.isFormValid&&this.setRegisterStep()}getRegisterConfig(t){const i=new URL(`${this.endpoint}/api/v1.0/registerCfg/`),e=new Headers;e.append("X-Tenant-ID",this.tenantId),e.append("X-Client-ID",this.clientId),e.append("X-Api-Key",this.apiKey),e.append("Content-Type","application/json"),e.append("Accept","application/json"),t&&i.searchParams.append("registrationId",t);const s={method:"GET",headers:e};return new Promise(((t,e)=>{this.isLoading=!0,fetch(i.href,s).then((t=>t.json())).then((i=>{t(i)})).catch((t=>{console.error(t),e(t)})).finally((()=>{this.isLoading=!1}))}))}setRegisterStep(){this.emitValue=!1;const t=new URL(`${this.endpoint}/api/v1.0/registerStep/`),i={registrationId:this.registrationID,registerUserDto:this.listOfInputValues.reduce(((t,i)=>(t[i.name]=i.inputValue,t)),{}),step:this.registrationStep},e=new Headers;e.append("X-Tenant-ID",this.tenantId),e.append("X-Client-ID",this.clientId),e.append("X-Api-Key",this.apiKey),e.append("Content-Type","application/json"),e.append("Accept","application/json");const s={method:"POST",body:JSON.stringify(i),headers:e};fetch(t.href,s).then((t=>{if(t.status>=300)throw new Error("err")})).then((t=>{this.registrationID=t.registrationId,this.listOfActions.some((t=>"/register"==t))?this.setRegister():this.getRegisterConfig(this.registrationID).then((t=>this.formatConfig(t)))})).catch((t=>{console.error(t)}))}setRegister(){const t=new URL(`${this.endpoint}/api/v1.0/register/`),i=new Headers;i.append("X-Tenant-ID",this.tenantId),i.append("X-Client-ID",this.clientId),i.append("X-Api-Key",this.apiKey),i.append("Content-Type","application/json"),i.append("Accept","application/json");const e={registrationId:this.registrationID,registerUserDto:this.listOfInputValues.reduce(((t,i)=>(t[i.name]=i.inputValue,t)),{}),step:this.registrationStep},s={method:"POST",body:JSON.stringify(e),headers:i};fetch(t.href,s).then((t=>{if(t.status>=300)throw new Error("err")})).then((t=>{console.log(t)})).catch((t=>{console.log(t)}))}formatConfig(t){this.listOfInputs=t.content.fields.map((t=>Object.assign(Object.assign({},t),{isValid:!1}))),this.listOfInputValues=t.content.fields.map((t=>({name:t.name,inputValue:null}))),this.listOfActions=t.content.actions.map((t=>t)),this.registrationID=t.content.registrationID,this.registrationStep=t.content.step}getInvalidStatus(t){return t.filter((t=>0==t.isValid)).length>0}renderInputs(){return this.listOfInputs.map((t=>e("general-input",{type:t.inputType,name:t.name,displayName:t.displayName,validation:t.validate,action:t.action||null,options:t.data?t.data.values:[],defaultValue:t.defaultValue,emitValue:this.emitValue,language:this.language})))}renderButtons(){return e("div",{class:"registration__buttons-wrapper"},e("button",{class:"registration__button",type:"submit",form:"RegistrationForm",onClick:t=>this.nextHandler(t),ref:t=>this.buttonReference=t},u("nextButton",this.language)),e("button",{class:"registration__button"},u("backButton",this.language)))}render(){return e("div",{class:"registration"},e("form",{action:".",id:"RegistrationForm",class:"registration__form"},this.renderInputs()),this.renderButtons())}static get watchers(){return{isFormValid:["validityStateHandler"]}}};c.style="*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.registration{display:flex;flex-direction:column;gap:20px;width:100%;height:100%}.registration__form{display:grid;grid-template-columns:repeat(2, minmax(min-content, 1fr));column-gap:65px;row-gap:30px;justify-items:stretch;align-content:flex-start;overflow:scroll;width:100%;height:100%}.registration__buttons-wrapper{display:flex;flex-direction:row-reverse;justify-content:space-between}.registration__button{background-color:#e69200;border-radius:30px;text-transform:uppercase;padding:10px 50px;border:none;box-shadow:0px 2px 2px rgba(0, 0, 0, 0.5)}.registration__button--disabled{background-color:grey}.registration__button--done{background-color:#176317}";const m=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"]}}};m.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 _=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"]}}};_.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 b=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"]}}};b.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 g=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"]}}};g.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 x=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"]}}};x.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 v=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"]}}};v.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{n as checkbox_input,l as date_input,o as email_input,h as general_input,c as general_registration,m as number_input,_ as password_input,b as radio_input,g as select_input,x as tel_input,v as text_input}

package/dist/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('./cjs/index.cjs.js');

package/dist/index.js

@@ -0,0 +1 @@
+export * from './esm/index.js';

package/dist/stencil.config.js

@@ -0,0 +1,22 @@
+import { sass } from '@stencil/sass';
+export const config = {
+  namespace: 'general-registration',
+  taskQueue: 'async',
+  plugins: [sass()],
+  outputTargets: [
+    {
+      type: 'dist',
+      esmLoaderPath: '../loader',
+    },
+    {
+      type: 'dist-custom-elements',
+    },
+    {
+      type: 'docs-readme',
+    },
+    {
+      type: 'www',
+      serviceWorker: null, // disable service workers
+    },
+  ],
+};

package/dist/types/Users/user/workspace/everymatrix/widgets-stencil/packages/general-registration/.stencil/packages/general-input/src/utils/locale.utils.d.ts

@@ -0,0 +1,5 @@
+interface TranslationValues {
+  values: object;
+}
+export declare const translate: (key: string, customLang?: any, values?: TranslationValues) => string;
+export {};

package/dist/types/Users/user/workspace/everymatrix/widgets-stencil/packages/general-registration/.stencil/packages/general-input/src/utils/types.d.ts

@@ -0,0 +1,55 @@
+export interface RegistrationConfig {
+  type: string;
+  content: RegCfgContent;
+}
+interface RegCfgContent {
+  actions: string[];
+  fields: RegCfgContentField[];
+  registrationID: string;
+  step: string;
+}
+interface RegCfgContentField {
+  action: string;
+  autofill: boolean;
+  data: string;
+  defaultValue: string;
+  inputType: string;
+  multiple: false;
+  name: string;
+  readOnly: boolean;
+  validate: ValidationSchema;
+}
+export interface ValidationSchema {
+  mandatory: boolean;
+  type?: string;
+  custom?: CustomValidationRules[];
+  minLength: number;
+  maxLength: number;
+  min: number;
+  max: number;
+}
+interface CustomValidationRules {
+  rule: string;
+  pattern?: string;
+  errorMessage: string;
+}
+export interface CustomRule {
+  rule: string;
+  errorMessage: string;
+}
+export interface Option {
+  value: string;
+  label: string;
+}
+export interface InputStateEvent {
+  valid: boolean;
+  name: string;
+}
+export interface InputValueEvent {
+  value: string | number | boolean;
+  name: string;
+}
+export interface RegisterStep {
+  registrationId: string;
+}
+export {};

package/dist/types/Users/user/workspace/everymatrix/widgets-stencil/packages/general-registration/.stencil/packages/general-registration/stencil.config.d.ts

@@ -0,0 +1,2 @@
+import { Config } from '../../../../../../../../../../stencil-public-runtime';
+export declare const config: Config;

package/dist/types/components/general-registration/general-registration.d.ts

@@ -0,0 +1,67 @@
+import type { InputStateEvent, InputValueEvent, RegistrationConfig } from '../../../../general-input/src/utils/types';
+import '@everymatrix/general-input';
+export declare class GeneralRegistration {
+  data: {
+    type: string;
+    content: {
+      step: string;
+      fields: {
+        name: string;
+        displayName: string;
+        defaultValue: any;
+        validate: {
+          mandatory: boolean;
+          minLength: number;
+          maxLength: number;
+        };
+        autofill: boolean;
+      }[];
+      actions: string[];
+    };
+  };
+  /**
+   * NorWAy Endpoint for all the calls.
+   */
+  endpoint: string;
+  /**
+   * The tenandId of the domain
+   */
+  tenantId: string;
+  /**
+   * ClientID? OperatorID? GM knows ...
+   */
+  clientId: string;
+  /**
+   * The APIKey for that endpoint
+   */
+  apiKey: string;
+  /**
+  * Currently selected language
+  */
+  language: string;
+  errorMessage: string;
+  emitValue: boolean;
+  private isFormValid;
+  listOfInputs: any[];
+  private registrationID;
+  registrationStep: string;
+  isLoading: boolean;
+  listOfInputValues: any[];
+  buttonReference: HTMLButtonElement;
+  listOfActions: any[];
+  actionsStepIndex: number;
+  validityStateHandler(): void;
+  checkInputsValidityHandler(event: CustomEvent<InputStateEvent>): void;
+  getInputsValueHandler(event: CustomEvent<InputValueEvent>): void;
+  connectedCallback(): void;
+  componentWillLoad(): Promise<void>;
+  nextHandler(e: any): void;
+  getRegisterConfig(registrationID?: string): Promise<RegistrationConfig>;
+  setRegisterStep(): void;
+  setRegister(): void;
+  formatConfig(config: RegistrationConfig): void;
+  getInvalidStatus(listOfInputs: any): boolean;
+  renderInputs(): any;
+  renderButtons(): HTMLElement;
+  render(): any;
+}

package/dist/types/components.d.ts

@@ -0,0 +1,77 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+export namespace Components {
+    interface GeneralRegistration {
+        /**
+          * The APIKey for that endpoint
+         */
+        "apiKey": string;
+        /**
+          * ClientID? OperatorID? GM knows ...
+         */
+        "clientId": string;
+        /**
+          * NorWAy Endpoint for all the calls.
+         */
+        "endpoint": string;
+        /**
+          * Currently selected language
+         */
+        "language": string;
+        /**
+          * The tenandId of the domain
+         */
+        "tenantId": string;
+    }
+}
+declare global {
+    interface HTMLGeneralRegistrationElement extends Components.GeneralRegistration, HTMLStencilElement {
+    }
+    var HTMLGeneralRegistrationElement: {
+        prototype: HTMLGeneralRegistrationElement;
+        new (): HTMLGeneralRegistrationElement;
+    };
+    interface HTMLElementTagNameMap {
+        "general-registration": HTMLGeneralRegistrationElement;
+    }
+}
+declare namespace LocalJSX {
+    interface GeneralRegistration {
+        /**
+          * The APIKey for that endpoint
+         */
+        "apiKey"?: string;
+        /**
+          * ClientID? OperatorID? GM knows ...
+         */
+        "clientId"?: string;
+        /**
+          * NorWAy Endpoint for all the calls.
+         */
+        "endpoint"?: string;
+        /**
+          * Currently selected language
+         */
+        "language"?: string;
+        /**
+          * The tenandId of the domain
+         */
+        "tenantId"?: string;
+    }
+    interface IntrinsicElements {
+        "general-registration": GeneralRegistration;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "general-registration": LocalJSX.GeneralRegistration & JSXBase.HTMLAttributes<HTMLGeneralRegistrationElement>;
+        }
+    }
+}

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './components';