@everymatrix/general-registration 1.10.3 → 1.10.4
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-input_11.cjs.entry.js +10 -13
- package/dist/collection/components/general-registration/general-registration.js +10 -13
- package/dist/components/general-registration.js +10 -13
- package/dist/esm/checkbox-input_11.entry.js +10 -13
- package/dist/general-registration/general-registration.esm.js +1 -1
- package/dist/general-registration/{p-7c69629f.entry.js → p-6a27a1e0.entry.js} +1 -1
- package/package.json +1 -1
|
@@ -23574,7 +23574,6 @@ const GeneralRegistration = class {
|
|
|
23574
23574
|
}, {}),
|
|
23575
23575
|
step: this.registrationStep,
|
|
23576
23576
|
};
|
|
23577
|
-
console.log(registerStep);
|
|
23578
23577
|
const headers = new Headers();
|
|
23579
23578
|
// headers.append('X-Tenant-ID', this.tenantId);
|
|
23580
23579
|
// headers.append('X-Client-ID', this.clientId);
|
|
@@ -23586,7 +23585,6 @@ const GeneralRegistration = class {
|
|
|
23586
23585
|
body: JSON.stringify(registerStep),
|
|
23587
23586
|
headers
|
|
23588
23587
|
};
|
|
23589
|
-
console.log(options.body);
|
|
23590
23588
|
fetch(url.href, options)
|
|
23591
23589
|
.then((res) => {
|
|
23592
23590
|
if (res.status >= 300) {
|
|
@@ -23624,17 +23622,17 @@ const GeneralRegistration = class {
|
|
|
23624
23622
|
// headers.append('X-Api-Key', this.apiKey);
|
|
23625
23623
|
headers.append('Content-Type', 'application/json');
|
|
23626
23624
|
headers.append('Accept', 'application/json');
|
|
23627
|
-
const registerStep = {
|
|
23628
|
-
|
|
23629
|
-
|
|
23630
|
-
|
|
23631
|
-
|
|
23632
|
-
|
|
23633
|
-
|
|
23634
|
-
};
|
|
23625
|
+
// const registerStep = {
|
|
23626
|
+
// registrationId: this.registrationID,
|
|
23627
|
+
// registerUserDto: this.listOfInputValues.reduce((acc, curr) => {
|
|
23628
|
+
// acc[curr.name] = curr.value;
|
|
23629
|
+
// return acc;
|
|
23630
|
+
// }, {}),
|
|
23631
|
+
// step: this.registrationStep,
|
|
23632
|
+
// };
|
|
23635
23633
|
const options = {
|
|
23636
|
-
method: '
|
|
23637
|
-
body: JSON.stringify(
|
|
23634
|
+
method: 'PUT',
|
|
23635
|
+
body: JSON.stringify({ registrationId: this.registrationID }),
|
|
23638
23636
|
headers
|
|
23639
23637
|
};
|
|
23640
23638
|
fetch(url.href, options)
|
|
@@ -23684,7 +23682,6 @@ const GeneralRegistration = class {
|
|
|
23684
23682
|
return listOfInputs.filter(input => input.isValid == false).length > 0;
|
|
23685
23683
|
}
|
|
23686
23684
|
renderInputs() {
|
|
23687
|
-
console.log(this.listOfInputs);
|
|
23688
23685
|
return (this.listOfInputs.map(input => index.h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data ? input.data.values : [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language })));
|
|
23689
23686
|
}
|
|
23690
23687
|
;
|
|
@@ -353,7 +353,6 @@ export class GeneralRegistration {
|
|
|
353
353
|
}, {}),
|
|
354
354
|
step: this.registrationStep,
|
|
355
355
|
};
|
|
356
|
-
console.log(registerStep);
|
|
357
356
|
const headers = new Headers();
|
|
358
357
|
// headers.append('X-Tenant-ID', this.tenantId);
|
|
359
358
|
// headers.append('X-Client-ID', this.clientId);
|
|
@@ -365,7 +364,6 @@ export class GeneralRegistration {
|
|
|
365
364
|
body: JSON.stringify(registerStep),
|
|
366
365
|
headers
|
|
367
366
|
};
|
|
368
|
-
console.log(options.body);
|
|
369
367
|
fetch(url.href, options)
|
|
370
368
|
.then((res) => {
|
|
371
369
|
if (res.status >= 300) {
|
|
@@ -403,17 +401,17 @@ export class GeneralRegistration {
|
|
|
403
401
|
// headers.append('X-Api-Key', this.apiKey);
|
|
404
402
|
headers.append('Content-Type', 'application/json');
|
|
405
403
|
headers.append('Accept', 'application/json');
|
|
406
|
-
const registerStep = {
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
};
|
|
404
|
+
// const registerStep = {
|
|
405
|
+
// registrationId: this.registrationID,
|
|
406
|
+
// registerUserDto: this.listOfInputValues.reduce((acc, curr) => {
|
|
407
|
+
// acc[curr.name] = curr.value;
|
|
408
|
+
// return acc;
|
|
409
|
+
// }, {}),
|
|
410
|
+
// step: this.registrationStep,
|
|
411
|
+
// };
|
|
414
412
|
const options = {
|
|
415
|
-
method: '
|
|
416
|
-
body: JSON.stringify(
|
|
413
|
+
method: 'PUT',
|
|
414
|
+
body: JSON.stringify({ registrationId: this.registrationID }),
|
|
417
415
|
headers
|
|
418
416
|
};
|
|
419
417
|
fetch(url.href, options)
|
|
@@ -463,7 +461,6 @@ export class GeneralRegistration {
|
|
|
463
461
|
return listOfInputs.filter(input => input.isValid == false).length > 0;
|
|
464
462
|
}
|
|
465
463
|
renderInputs() {
|
|
466
|
-
console.log(this.listOfInputs);
|
|
467
464
|
return (this.listOfInputs.map(input => h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data ? input.data.values : [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language })));
|
|
468
465
|
}
|
|
469
466
|
;
|
|
@@ -396,7 +396,6 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
|
|
|
396
396
|
}, {}),
|
|
397
397
|
step: this.registrationStep,
|
|
398
398
|
};
|
|
399
|
-
console.log(registerStep);
|
|
400
399
|
const headers = new Headers();
|
|
401
400
|
// headers.append('X-Tenant-ID', this.tenantId);
|
|
402
401
|
// headers.append('X-Client-ID', this.clientId);
|
|
@@ -408,7 +407,6 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
|
|
|
408
407
|
body: JSON.stringify(registerStep),
|
|
409
408
|
headers
|
|
410
409
|
};
|
|
411
|
-
console.log(options.body);
|
|
412
410
|
fetch(url.href, options)
|
|
413
411
|
.then((res) => {
|
|
414
412
|
if (res.status >= 300) {
|
|
@@ -446,17 +444,17 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
|
|
|
446
444
|
// headers.append('X-Api-Key', this.apiKey);
|
|
447
445
|
headers.append('Content-Type', 'application/json');
|
|
448
446
|
headers.append('Accept', 'application/json');
|
|
449
|
-
const registerStep = {
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
};
|
|
447
|
+
// const registerStep = {
|
|
448
|
+
// registrationId: this.registrationID,
|
|
449
|
+
// registerUserDto: this.listOfInputValues.reduce((acc, curr) => {
|
|
450
|
+
// acc[curr.name] = curr.value;
|
|
451
|
+
// return acc;
|
|
452
|
+
// }, {}),
|
|
453
|
+
// step: this.registrationStep,
|
|
454
|
+
// };
|
|
457
455
|
const options = {
|
|
458
|
-
method: '
|
|
459
|
-
body: JSON.stringify(
|
|
456
|
+
method: 'PUT',
|
|
457
|
+
body: JSON.stringify({ registrationId: this.registrationID }),
|
|
460
458
|
headers
|
|
461
459
|
};
|
|
462
460
|
fetch(url.href, options)
|
|
@@ -506,7 +504,6 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
|
|
|
506
504
|
return listOfInputs.filter(input => input.isValid == false).length > 0;
|
|
507
505
|
}
|
|
508
506
|
renderInputs() {
|
|
509
|
-
console.log(this.listOfInputs);
|
|
510
507
|
return (this.listOfInputs.map(input => h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data ? input.data.values : [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language })));
|
|
511
508
|
}
|
|
512
509
|
;
|
|
@@ -23570,7 +23570,6 @@ const GeneralRegistration = class {
|
|
|
23570
23570
|
}, {}),
|
|
23571
23571
|
step: this.registrationStep,
|
|
23572
23572
|
};
|
|
23573
|
-
console.log(registerStep);
|
|
23574
23573
|
const headers = new Headers();
|
|
23575
23574
|
// headers.append('X-Tenant-ID', this.tenantId);
|
|
23576
23575
|
// headers.append('X-Client-ID', this.clientId);
|
|
@@ -23582,7 +23581,6 @@ const GeneralRegistration = class {
|
|
|
23582
23581
|
body: JSON.stringify(registerStep),
|
|
23583
23582
|
headers
|
|
23584
23583
|
};
|
|
23585
|
-
console.log(options.body);
|
|
23586
23584
|
fetch(url.href, options)
|
|
23587
23585
|
.then((res) => {
|
|
23588
23586
|
if (res.status >= 300) {
|
|
@@ -23620,17 +23618,17 @@ const GeneralRegistration = class {
|
|
|
23620
23618
|
// headers.append('X-Api-Key', this.apiKey);
|
|
23621
23619
|
headers.append('Content-Type', 'application/json');
|
|
23622
23620
|
headers.append('Accept', 'application/json');
|
|
23623
|
-
const registerStep = {
|
|
23624
|
-
|
|
23625
|
-
|
|
23626
|
-
|
|
23627
|
-
|
|
23628
|
-
|
|
23629
|
-
|
|
23630
|
-
};
|
|
23621
|
+
// const registerStep = {
|
|
23622
|
+
// registrationId: this.registrationID,
|
|
23623
|
+
// registerUserDto: this.listOfInputValues.reduce((acc, curr) => {
|
|
23624
|
+
// acc[curr.name] = curr.value;
|
|
23625
|
+
// return acc;
|
|
23626
|
+
// }, {}),
|
|
23627
|
+
// step: this.registrationStep,
|
|
23628
|
+
// };
|
|
23631
23629
|
const options = {
|
|
23632
|
-
method: '
|
|
23633
|
-
body: JSON.stringify(
|
|
23630
|
+
method: 'PUT',
|
|
23631
|
+
body: JSON.stringify({ registrationId: this.registrationID }),
|
|
23634
23632
|
headers
|
|
23635
23633
|
};
|
|
23636
23634
|
fetch(url.href, options)
|
|
@@ -23680,7 +23678,6 @@ const GeneralRegistration = class {
|
|
|
23680
23678
|
return listOfInputs.filter(input => input.isValid == false).length > 0;
|
|
23681
23679
|
}
|
|
23682
23680
|
renderInputs() {
|
|
23683
|
-
console.log(this.listOfInputs);
|
|
23684
23681
|
return (this.listOfInputs.map(input => h$2("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data ? input.data.values : [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language })));
|
|
23685
23682
|
}
|
|
23686
23683
|
;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as a,b as e}from"./p-1a88a312.js";(()=>{const e=import.meta.url,l={};return""!==e&&(l.resourcesUrl=new URL(".",e).href),a(l)})().then((a=>e([["p-
|
|
1
|
+
import{p as a,b as e}from"./p-1a88a312.js";(()=>{const e=import.meta.url,l={};return""!==e&&(l.resourcesUrl=new URL(".",e).href),a(l)})().then((a=>e([["p-6a27a1e0",[[1,"general-registration",{endpoint:[1],tenantId:[1,"tenant-id"],clientId:[1,"client-id"],apiKey:[1,"api-key"],language:[1],errorMessage:[32],emitValue:[32],isFormValid:[32],listOfInputs:[32],isLoading:[32],registrationStep:[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{type:[1],name:[1],displayName:[1,"display-name"],action:[1],validation:[16],options:[8],language:[1],autofilled:[4],defaultValue:[8,"default-value"],emitValue:[4,"emit-value"]}],[1,"checkbox-input",{name:[1],displayName:[1,"display-name"],defaultValue:[1,"default-value"],autofilled:[4],validation:[16],language:[1],emitValue:[4,"emit-value"],errorMessage:[32],isValid:[32]}],[1,"date-input",{name:[1],displayName:[1,"display-name"],validation:[16],defaultValue:[1,"default-value"],autofilled:[4],language:[1],emitValue:[4,"emit-value"],errorMessage:[32],isValid:[32]}],[1,"email-input",{name:[1],displayName:[1,"display-name"],validation:[16],defaultValue:[1,"default-value"],autofilled:[4],language:[1],emitValue:[4,"emit-value"],errorMessage:[32],isValid:[32]}],[1,"number-input",{name:[1],displayName:[1,"display-name"],validation:[16],defaultValue:[2,"default-value"],autofilled:[4],language:[1],emitValue:[4,"emit-value"],errorMessage:[32],isValid:[32]}],[1,"password-input",{name:[1],displayName:[1,"display-name"],defaultValue:[1,"default-value"],autofilled:[4],validation:[16],language:[1],emitValue:[4,"emit-value"],isValid:[32],errorMessage:[32]}],[1,"radio-input",{name:[1],displayName:[1,"display-name"],optionsGroup:[16],validation:[16],language:[1],emitValue:[4,"emit-value"],errorMessage:[32],isValid:[32]}],[1,"select-input",{name:[1],displayName:[1,"display-name"],action:[1],defaultValue:[1,"default-value"],autofilled:[4],options:[16],validation:[16],language:[1],emitValue:[4,"emit-value"],errorMessage:[32],isValid:[32]}],[1,"tel-input",{name:[1],displayName:[1,"display-name"],showLabels:[4,"show-labels"],action:[1],validation:[16],defaultValue:[8,"default-value"],autofilled:[4],language:[1],emitValue:[4,"emit-value"],isValid:[32],errorMessage:[32]}],[1,"text-input",{name:[1],displayName:[1,"display-name"],validation:[16],defaultValue:[1,"default-value"],autofilled:[4],rules:[1],language:[1],checkValidity:[4,"check-validity"],emitValue:[4,"emit-value"],isValid:[32],errorMessage:[32]}]]]],a)));
|
|
@@ -2815,7 +2815,7 @@ class Nr{constructor(t){this.host=t,t.addEventListener("opened-changed",(()=>{t.
|
|
|
2815
2815
|
</vaadin-date-picker-overlay>
|
|
2816
2816
|
|
|
2817
2817
|
<slot name="tooltip"></slot>
|
|
2818
|
-
`}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new Pr(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new Or(this.inputElement,this._labelController)),this._tooltipController=new oo(this),this.addController(this._tooltipController),this._tooltipController.setPosition("top"),this._tooltipController.setShouldShow((t=>!t.opened)),this.shadowRoot.querySelector('[part="toggle-button"]').addEventListener("mousedown",(t=>t.preventDefault()))}_initOverlay(){super._initOverlay(),this.$.overlay.addEventListener("vaadin-overlay-close",this._onVaadinOverlayClose.bind(this))}_onVaadinOverlayClose(t){t.detail.sourceEvent&&t.detail.sourceEvent.composedPath().includes(this)&&t.preventDefault()}_toggle(t){t.stopPropagation(),this[this._overlayInitialized&&this.$.overlay.opened?"close":"open"]()}_openedChanged(t){super._openedChanged(t),this.$.overlay.positionTarget=this.shadowRoot.querySelector('[part="input-field"]'),this.$.overlay.noVerticalOverlap=!0}}customElements.define(Vr.is,Vr);const Fr=class{constructor(i){t(this,i),this.sendValidityState=e(this,"sendValidityState",7),this.sendInputValue=e(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)}componentDidLoad(){this.inputReference=this.element.shadowRoot.querySelector("input")}handleInput(t){this.value=t.target.value,this.errorMessage=this.setErrorMessage(),this.isValid=this.setValidity(),this.validityStateHandler({valid:this.isValid,name:this.name}),this.emitValueHandler(!0)}setValidity(){return this.inputReference.validity.valid}setErrorMessage(){return this.inputReference.validity.rangeUnderflow||this.inputReference.validity.rangeOverflow?n("dateError",this.language,{values:{min:this.validation.min,max:this.validation.max}}):this.inputReference.validity.valueMissing?n("requiredError",this.language):void 0}render(){return i("div",{class:"date__wrapper"},i("vaadin-date-picker",{id:`${this.name}__input`,type:"date",class:"date__input",value:this.defaultValue,readOnly:this.autofilled,placeholder:`${this.displayName} ${this.validation.mandatory?"*":""}`,required:this.validation.mandatory,max:this.validation.max,min:this.validation.min,onBlur:t=>this.handleInput(t)}),i("label",{class:`date__label ${this.validation.mandatory?"date__label--required":""}}`,htmlFor:`${this.name}__input`},this.displayName," ",this.validation.mandatory?"*":""),i("small",{class:"date__error-message"},this.errorMessage))}get element(){return s(this)}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};Fr.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;position:relative;border:none;border-bottom:3px solid #666666;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 Lr=class{constructor(i){t(this,i),this.sendValidityState=e(this,"sendValidityState",7),this.sendInputValue=e(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}),this.emitValueHandler(!0)}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?n("lengthError",this.language,{values:{minLength:this.validation.minLength,maxLength:this.validation.maxLength}}):this.inputReference.validity.valueMissing?n("requiredError",this.language):void 0}render(){return i("div",{class:"email__wrapper"},i("input",{id:`${this.name}__input`,type:"email",class:"email__input",value:this.defaultValue,readOnly:this.autofilled,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)}),i("label",{class:"email__label "+(this.validation.mandatory?"email__label--required":""),htmlFor:`${this.name}__input`},this.displayName),i("small",{class:"email__error-message"},this.errorMessage))}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};Lr.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 $r=class{constructor(e){t(this,e),this.type="text"}render(){switch(this.type.toLowerCase()){case"text":return i("text-input",{name:this.name,displayName:this.displayName,validation:this.validation,defaultValue:this.defaultValue,autofilled:this.autofilled,emitValue:this.emitValue,language:this.language});case"email":return i("email-input",{name:this.name,displayName:this.displayName,validation:this.validation,defaultValue:this.defaultValue,autofilled:this.autofilled,emitValue:this.emitValue,language:this.language});case"number":return i("number-input",{name:this.name,displayName:this.displayName,validation:this.validation,defaultValue:this.defaultValue,autofilled:this.autofilled,emitValue:this.emitValue,language:this.language});case"checkbox":return i("checkbox-input",{name:this.name,displayName:this.displayName,validation:this.validation,emitValue:this.emitValue,defaultValue:this.defaultValue,autofilled:this.autofilled,language:this.language});case"datetime":return i("date-input",{name:this.name,displayName:this.displayName,validation:this.validation,defaultValue:this.defaultValue,autofilled:this.autofilled,emitValue:this.emitValue,language:this.language});case"password":return i("password-input",{name:this.name,displayName:this.displayName,validation:this.validation,defaultValue:this.defaultValue,autofilled:this.autofilled,emitValue:this.emitValue,language:this.language});case"radio":return i("radio-input",{name:this.name,displayName:this.displayName,optionsGroup:this.options,validation:this.validation,emitValue:this.emitValue,language:this.language});case"tel":return i("tel-input",{name:this.name,action:this.action,displayName:this.displayName,validation:this.validation,defaultValue:this.defaultValue,emitValue:this.emitValue,language:this.language,autofilled:this.autofilled});case"dropdown":return i("select-input",{name:this.name,action:this.action,defaultValue:this.defaultValue,displayName:this.displayName,options:this.options,validation:this.validation,emitValue:this.emitValue,autofilled:this.autofilled,language:this.language});default:return i("p",null,"The ",this.type," input type is not valid")}}};$r.style=":host{display:block}";const jr=["ro","en"],Hr={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",doneButton:"Done"},ro:{lengthError:"Cuvântul introdus este prea scurt. {minLength} and {maxLength}",requiredError:"Acest câmp este obligatoriu."}},qr=(t,e,i)=>{const s=e;let o=Hr[void 0!==s&&jr.includes(s)?s:"en"][t];if(void 0!==i)for(const[t,e]of Object.entries(i.values)){const i=new RegExp(`{${t}}`,"g");o=o.replace(i,e)}return o},Rr=class{constructor(e){t(this,e),this.data={type:"default",content:{step:"step1",fields:[{name:"firstName",displayName:"Username",defaultValue:null,validate:{mandatory:!0,minLength:3,maxLength:20},autofill:!1},{name:"lastName",displayName:"Last name",defaultValue:null,validate:{mandatory:!0,minLength:3,maxLength:20}},{name:"telephone",displayName:"Telephone",action:"GET https://demo-api.stage.norway.everymatrix.com/v1/player/phonecodes",defaultValue:null,validate:{mandatory:!0},autofill:!1,inputType:"tel"},{name:"dateOfBirth",displayName:"Date of Birth",defaultValue:null,validate:{min:"2022-05-01",max:"2022-05-29",mandatory:!0},inputType:"datetime"},{name:"email",displayName:"Email",defaultValue:"a@a.com",validate:{mandatory:!0,custom:[{rule:"regex",pattern:"^[a-zA-Z0-9._%+-]+@[a-zA-Z-9.-]+\\.[a-zA-Z]{2,3}$",errorMessage:"Please enter a valid email address"}]},inputType:"email"},{name:"password",displayName:"Password",defaultValue:null,validate:{mandatory:!0,minLength:3,maxLength:20,type:"password",custom:[{rule:"regex",pattern:"(?=.*\\d+)(?=.*[A-Za-z]+).{8,20}",errorMessage:"Password must contain at least 1 letter and 1 digit, and its minimal length is 8."}]},inputType:"password"},{name:"email",displayName:"Email",defaultValue:null,validate:{mandatory:!0,type:"email",custom:[{rule:"unique-email",errorMessage:"Please check your email"},{rule:"regex",pattern:"^[a-zA-Z0-9._%+-]+@[a-zA-Z-9.-]+\\.[a-zA-Z]{2,3}$",errorMessage:"Please enter a valid email address"},{rule:"duplicate-input",displayName:"pt al doilea input gen: Confirm Email",errorMessage:"Different Email! Pls."}]}},{name:"termsAndConditions",displayName:"Terms and Conditions",validate:{mandatory:!0,type:"boolean"},inputType:"checkbox"},{name:"pepCheck",validate:{mandatory:!0},inputType:"checkbox"},{name:"gender",data:{values:[{label:"🍆",value:"m"},{label:"🍑",value:"f"}]},validate:{mandatory:!0},inputType:"radio"},{name:"dateOfBirth",validate:{mandatory:!0,custom:[{rule:"regex",pattern:"(?:19\\d{2}|20[01][0-9]|2020)[-/.](?:0[1-9]|1[012])[-/.](?:0[1-9]|[12][0-9]|3[01])",errorMessage:"Invalid date format"},{rule:"min-18-years",errorMessage:"Not old enough to ride the roller coaster"}]}},{name:"city",displayName:"Cities",action:null,data:{values:[{label:"Budapest",value:"Budapest"},{label:"Debrecen",value:"Debrecen"},{label:"Miskolc",value:"Miskolc"},{label:"Szeged",value:"Szeged"},{label:"Zuglo",value:"Zuglo"}]},validate:{mandatory:!0},inputType:"dropdown"},{name:"city",displayName:"Cities",data:null,action:"GET https://demo-api.stage.norway.everymatrix.com/v1/player/countries",validate:{mandatory:!0},inputType:"dropdown"}],actions:["get-next-step","some-async-action-before-submitting","submit-step-data"]}},this.language="en",this.emitValue=!1,this.listOfInputs=[],this.isLoading=!0,this.listOfInputValues=[],this.listOfActions=[],this.steps=[],this.registrationStepsState={regId:null}}logger(){console.log(this.registrationStep)}checkInputsValidityHandler(t){this.listOfInputs.find((e=>e.name==t.detail.name)).isValid=t.detail.valid,this.isFormValid=!this.getInvalidStatus(this.listOfInputs)}getInputsValueHandler(t){this.listOfInputValues.find((e=>e.name==t.detail.name)).value=t.detail.value,this.stepsStateMachine({event:"set",type:"values"})}componentWillLoad(){return this.getRegisterConfig().then((t=>{this.formatConfig(t),this.stepsStateMachine({event:"set",type:"inputs"})}))}nextHandler(t){t.preventDefault(),this.emitValue=!0,this.setRegisterStep()}backHandler(t){t.preventDefault(),this.steps.pop(),this.registrationStep=this.steps.at(-1),this.stepsStateMachine({event:"get",type:"inputs"}),this.stepsStateMachine({event:"get",type:"values"})}stepsStateMachine(t){switch(t.event){case"set":"inputs"==t.type&&(this.registrationStepsState[this.registrationStep].fields=this.listOfInputs),"values"==t.type&&(this.registrationStepsState[this.registrationStep].registerUserData=this.listOfInputValues.reduce(((t,e)=>(null!=e.value&&(t[e.name]=e.value),t)),{})),localStorage.setItem("registrationStepsState",JSON.stringify(this.registrationStepsState));break;case"get":const e=JSON.parse(localStorage.getItem("registrationStepsState"));if(!e)return;if("inputs"==t.type&&(this.listOfInputs=this.registrationStepsState[this.registrationStep].fields),"values"==t.type){const t=e[this.registrationStep].registerUserData;this.listOfInputValues=Object.keys(t).map((e=>({name:e,value:t[e]}))),this.listOfInputValues.forEach((t=>{const e=this.listOfInputs.find((e=>e.name===t.name));e&&(e.defaultValue=t.value)}))}}}getRegisterConfig(t){const e=new URL(`${this.endpoint}/v1/player/legislation/registration/config`),i=new Headers;i.append("Content-Type","application/json"),i.append("Accept","application/json"),t&&e.searchParams.append("registrationId",t);const s={method:"GET",headers:i};return new Promise(((t,i)=>{this.isLoading=!0,fetch(e.href,s).then((t=>t.json())).then((e=>{t(e)})).catch((t=>{console.error(t),i(t)})).finally((()=>{this.isLoading=!1}))}))}setRegisterStep(){this.isLoading=!0;const t=new URL(`${this.endpoint}/v1/player/legislation/registration/step`),e={registrationId:this.registrationID,registerUserDto:this.listOfInputValues.reduce(((t,e)=>(null!=e.value&&(t[e.name]=e.value),t)),{}),step:this.registrationStep};console.log(e);const i=new Headers;i.append("Content-Type","application/json"),i.append("Accept","application/json");const s={method:"POST",body:JSON.stringify(e),headers:i};console.log(s.body),fetch(t.href,s).then((t=>{if(t.status>=300)throw new Error("err");return t.json()})).then((t=>{this.registrationID=t.registrationId,this.listOfActions.some((t=>"/register"==t))?this.setRegister():this.getRegisterConfig(this.registrationID).then((t=>{this.formatConfig(t),this.stepsStateMachine({event:"set",type:"inputs"})}))})).catch((t=>{console.error(t)})).finally((()=>{this.isLoading=!1}))}setRegister(){this.isLoading=!0;const t=new URL(`${this.endpoint}/v1/player/legislation/register`),e=new Headers;e.append("Content-Type","application/json"),e.append("Accept","application/json");const i={registrationId:this.registrationID,registerUserDto:this.listOfInputValues.reduce(((t,e)=>(t[e.name]=e.value,t)),{}),step:this.registrationStep},s={method:"POST",body:JSON.stringify(i),headers:e};fetch(t.href,s).then((t=>{if(t.status>=300)throw new Error("err");return t.json()})).then((t=>{t.userId&&alert(`User registered - the user ID is ${t.userId}`)})).catch((t=>{console.error(t)})).finally((()=>{this.isLoading=!1}))}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,value:null}))),this.listOfActions=t.content.actions.map((t=>t)),this.isLastStep=this.listOfActions.some((t=>"/register"==t)),this.registrationID=t.content.registrationID,this.registrationStep=t.content.step,this.steps.push(this.registrationStep),this.registrationStepsState.regId=this.registrationID,this.registrationStepsState[this.registrationStep]||(this.registrationStepsState[this.registrationStep]={fields:[],registerUserData:{}})}getInvalidStatus(t){return t.filter((t=>0==t.isValid)).length>0}renderInputs(){return console.log(this.listOfInputs),this.listOfInputs.map((t=>i("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,autofilled:t.autofill,emitValue:this.emitValue,language:this.language})))}renderButtons(){return i("div",{class:"registration__buttons-wrapper"},i("button",{class:"registration__button "+(this.isLastStep?"registration__button--done":""),type:"submit",form:"RegistrationForm",onClick:t=>this.nextHandler(t)},qr(this.isLastStep?"doneButton":"nextButton",this.language)),"Step1"!==this.registrationStep&&i("button",{class:"registration__button",onClick:t=>this.backHandler(t)},qr("backButton",this.language)))}render(){return this.isLoading?i("p",null,"Please wait, loading ..."):i("div",{class:"registration"},i("form",{action:".",id:"RegistrationForm",class:"registration__form"},this.renderInputs()),this.renderButtons())}static get watchers(){return{registrationStep:["logger"]}}};Rr.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 Ur=class{constructor(i){t(this,i),this.sendValidityState=e(this,"sendValidityState",7),this.sendInputValue=e(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)}handleInput(t){this.value=t.target.value,this.errorMessage=this.setErrorMessage(),this.isValid=this.setValidity(),this.validityStateHandler({valid:this.isValid,name:this.name}),this.emitValueHandler(!0)}setValidity(){return this.inputReference.validity.valid}setErrorMessage(){return this.inputReference.validity.rangeUnderflow||this.inputReference.validity.rangeOverflow?n("numberLengthError",this.language,{values:{min:this.validation.min,max:this.validation.max}}):this.inputReference.validity.valueMissing?n("requiredError",this.language):void 0}render(){return i("div",{class:"number__wrapper"},i("input",{ref:t=>this.inputReference=t,type:"number",value:this.defaultValue,readOnly:this.autofilled,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,onBlur:t=>this.handleInput(t)}),i("label",{class:"number__label "+(this.validation.mandatory?"number__label--required":""),htmlFor:`${this.name}__input`},this.displayName),i("small",{class:"number__error-message"},this.errorMessage))}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};Ur.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 Wr=class{constructor(i){t(this,i),this.sendValidityState=e(this,"sendValidityState",7),this.sendInputValue=e(this,"sendInputValue",7),this.defaultValue="",this.value="",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}),this.emitValueHandler(!0)}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?n("lengthError",this.language,{values:{minLength:this.validation.minLength,maxLength:this.validation.maxLength}}):this.inputReference.validity.valueMissing?n("requiredError",this.language):void 0}render(){return i("div",{class:"password__wrapper"},i("input",{type:"password",id:`${this.name}__input`,class:"password__input "+(1==this.isValid||null==this.isValid?"":"password__input--invalid"),name:this.name,readOnly:this.autofilled,value:this.defaultValue,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)}),i("label",{class:"password__label "+(this.validation.mandatory?"password__label--required":""),htmlFor:`${this.name}__input`},this.displayName),i("small",{class:"password__error-message"},this.errorMessage))}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};Wr.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 Yr=class{constructor(i){t(this,i),this.sendInputValue=e(this,"sendInputValue",7),this.sendValidityState=e(this,"sendValidityState",7)}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})}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(),this.validityStateHandler({valid:this.isValid,name:this.name}),this.emitValueHandler(!0)}setValidity(){return this.inputReference.validity.valid}setErrorMessage(){if(this.inputReference.validity.valueMissing)return n("requiredError",this.language)}render(){return i("fieldset",{class:"radio__fieldset"},i("legend",{class:"radio__legend"},this.displayName,":"),this.optionsGroup.map((t=>i("div",{class:"radio__wrapper"},i("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)}),i("label",{htmlFor:`${t.label}__input`},t.label)))),i("small",{class:"radio__error-message"},this.errorMessage))}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};Yr.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}",ut("vaadin-combo-box-overlay",[Ui,Ds,m`
|
|
2818
|
+
`}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new Pr(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new Or(this.inputElement,this._labelController)),this._tooltipController=new oo(this),this.addController(this._tooltipController),this._tooltipController.setPosition("top"),this._tooltipController.setShouldShow((t=>!t.opened)),this.shadowRoot.querySelector('[part="toggle-button"]').addEventListener("mousedown",(t=>t.preventDefault()))}_initOverlay(){super._initOverlay(),this.$.overlay.addEventListener("vaadin-overlay-close",this._onVaadinOverlayClose.bind(this))}_onVaadinOverlayClose(t){t.detail.sourceEvent&&t.detail.sourceEvent.composedPath().includes(this)&&t.preventDefault()}_toggle(t){t.stopPropagation(),this[this._overlayInitialized&&this.$.overlay.opened?"close":"open"]()}_openedChanged(t){super._openedChanged(t),this.$.overlay.positionTarget=this.shadowRoot.querySelector('[part="input-field"]'),this.$.overlay.noVerticalOverlap=!0}}customElements.define(Vr.is,Vr);const Fr=class{constructor(i){t(this,i),this.sendValidityState=e(this,"sendValidityState",7),this.sendInputValue=e(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)}componentDidLoad(){this.inputReference=this.element.shadowRoot.querySelector("input")}handleInput(t){this.value=t.target.value,this.errorMessage=this.setErrorMessage(),this.isValid=this.setValidity(),this.validityStateHandler({valid:this.isValid,name:this.name}),this.emitValueHandler(!0)}setValidity(){return this.inputReference.validity.valid}setErrorMessage(){return this.inputReference.validity.rangeUnderflow||this.inputReference.validity.rangeOverflow?n("dateError",this.language,{values:{min:this.validation.min,max:this.validation.max}}):this.inputReference.validity.valueMissing?n("requiredError",this.language):void 0}render(){return i("div",{class:"date__wrapper"},i("vaadin-date-picker",{id:`${this.name}__input`,type:"date",class:"date__input",value:this.defaultValue,readOnly:this.autofilled,placeholder:`${this.displayName} ${this.validation.mandatory?"*":""}`,required:this.validation.mandatory,max:this.validation.max,min:this.validation.min,onBlur:t=>this.handleInput(t)}),i("label",{class:`date__label ${this.validation.mandatory?"date__label--required":""}}`,htmlFor:`${this.name}__input`},this.displayName," ",this.validation.mandatory?"*":""),i("small",{class:"date__error-message"},this.errorMessage))}get element(){return s(this)}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};Fr.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;position:relative;border:none;border-bottom:3px solid #666666;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 Lr=class{constructor(i){t(this,i),this.sendValidityState=e(this,"sendValidityState",7),this.sendInputValue=e(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}),this.emitValueHandler(!0)}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?n("lengthError",this.language,{values:{minLength:this.validation.minLength,maxLength:this.validation.maxLength}}):this.inputReference.validity.valueMissing?n("requiredError",this.language):void 0}render(){return i("div",{class:"email__wrapper"},i("input",{id:`${this.name}__input`,type:"email",class:"email__input",value:this.defaultValue,readOnly:this.autofilled,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)}),i("label",{class:"email__label "+(this.validation.mandatory?"email__label--required":""),htmlFor:`${this.name}__input`},this.displayName),i("small",{class:"email__error-message"},this.errorMessage))}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};Lr.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 $r=class{constructor(e){t(this,e),this.type="text"}render(){switch(this.type.toLowerCase()){case"text":return i("text-input",{name:this.name,displayName:this.displayName,validation:this.validation,defaultValue:this.defaultValue,autofilled:this.autofilled,emitValue:this.emitValue,language:this.language});case"email":return i("email-input",{name:this.name,displayName:this.displayName,validation:this.validation,defaultValue:this.defaultValue,autofilled:this.autofilled,emitValue:this.emitValue,language:this.language});case"number":return i("number-input",{name:this.name,displayName:this.displayName,validation:this.validation,defaultValue:this.defaultValue,autofilled:this.autofilled,emitValue:this.emitValue,language:this.language});case"checkbox":return i("checkbox-input",{name:this.name,displayName:this.displayName,validation:this.validation,emitValue:this.emitValue,defaultValue:this.defaultValue,autofilled:this.autofilled,language:this.language});case"datetime":return i("date-input",{name:this.name,displayName:this.displayName,validation:this.validation,defaultValue:this.defaultValue,autofilled:this.autofilled,emitValue:this.emitValue,language:this.language});case"password":return i("password-input",{name:this.name,displayName:this.displayName,validation:this.validation,defaultValue:this.defaultValue,autofilled:this.autofilled,emitValue:this.emitValue,language:this.language});case"radio":return i("radio-input",{name:this.name,displayName:this.displayName,optionsGroup:this.options,validation:this.validation,emitValue:this.emitValue,language:this.language});case"tel":return i("tel-input",{name:this.name,action:this.action,displayName:this.displayName,validation:this.validation,defaultValue:this.defaultValue,emitValue:this.emitValue,language:this.language,autofilled:this.autofilled});case"dropdown":return i("select-input",{name:this.name,action:this.action,defaultValue:this.defaultValue,displayName:this.displayName,options:this.options,validation:this.validation,emitValue:this.emitValue,autofilled:this.autofilled,language:this.language});default:return i("p",null,"The ",this.type," input type is not valid")}}};$r.style=":host{display:block}";const jr=["ro","en"],Hr={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",doneButton:"Done"},ro:{lengthError:"Cuvântul introdus este prea scurt. {minLength} and {maxLength}",requiredError:"Acest câmp este obligatoriu."}},qr=(t,e,i)=>{const s=e;let o=Hr[void 0!==s&&jr.includes(s)?s:"en"][t];if(void 0!==i)for(const[t,e]of Object.entries(i.values)){const i=new RegExp(`{${t}}`,"g");o=o.replace(i,e)}return o},Rr=class{constructor(e){t(this,e),this.data={type:"default",content:{step:"step1",fields:[{name:"firstName",displayName:"Username",defaultValue:null,validate:{mandatory:!0,minLength:3,maxLength:20},autofill:!1},{name:"lastName",displayName:"Last name",defaultValue:null,validate:{mandatory:!0,minLength:3,maxLength:20}},{name:"telephone",displayName:"Telephone",action:"GET https://demo-api.stage.norway.everymatrix.com/v1/player/phonecodes",defaultValue:null,validate:{mandatory:!0},autofill:!1,inputType:"tel"},{name:"dateOfBirth",displayName:"Date of Birth",defaultValue:null,validate:{min:"2022-05-01",max:"2022-05-29",mandatory:!0},inputType:"datetime"},{name:"email",displayName:"Email",defaultValue:"a@a.com",validate:{mandatory:!0,custom:[{rule:"regex",pattern:"^[a-zA-Z0-9._%+-]+@[a-zA-Z-9.-]+\\.[a-zA-Z]{2,3}$",errorMessage:"Please enter a valid email address"}]},inputType:"email"},{name:"password",displayName:"Password",defaultValue:null,validate:{mandatory:!0,minLength:3,maxLength:20,type:"password",custom:[{rule:"regex",pattern:"(?=.*\\d+)(?=.*[A-Za-z]+).{8,20}",errorMessage:"Password must contain at least 1 letter and 1 digit, and its minimal length is 8."}]},inputType:"password"},{name:"email",displayName:"Email",defaultValue:null,validate:{mandatory:!0,type:"email",custom:[{rule:"unique-email",errorMessage:"Please check your email"},{rule:"regex",pattern:"^[a-zA-Z0-9._%+-]+@[a-zA-Z-9.-]+\\.[a-zA-Z]{2,3}$",errorMessage:"Please enter a valid email address"},{rule:"duplicate-input",displayName:"pt al doilea input gen: Confirm Email",errorMessage:"Different Email! Pls."}]}},{name:"termsAndConditions",displayName:"Terms and Conditions",validate:{mandatory:!0,type:"boolean"},inputType:"checkbox"},{name:"pepCheck",validate:{mandatory:!0},inputType:"checkbox"},{name:"gender",data:{values:[{label:"🍆",value:"m"},{label:"🍑",value:"f"}]},validate:{mandatory:!0},inputType:"radio"},{name:"dateOfBirth",validate:{mandatory:!0,custom:[{rule:"regex",pattern:"(?:19\\d{2}|20[01][0-9]|2020)[-/.](?:0[1-9]|1[012])[-/.](?:0[1-9]|[12][0-9]|3[01])",errorMessage:"Invalid date format"},{rule:"min-18-years",errorMessage:"Not old enough to ride the roller coaster"}]}},{name:"city",displayName:"Cities",action:null,data:{values:[{label:"Budapest",value:"Budapest"},{label:"Debrecen",value:"Debrecen"},{label:"Miskolc",value:"Miskolc"},{label:"Szeged",value:"Szeged"},{label:"Zuglo",value:"Zuglo"}]},validate:{mandatory:!0},inputType:"dropdown"},{name:"city",displayName:"Cities",data:null,action:"GET https://demo-api.stage.norway.everymatrix.com/v1/player/countries",validate:{mandatory:!0},inputType:"dropdown"}],actions:["get-next-step","some-async-action-before-submitting","submit-step-data"]}},this.language="en",this.emitValue=!1,this.listOfInputs=[],this.isLoading=!0,this.listOfInputValues=[],this.listOfActions=[],this.steps=[],this.registrationStepsState={regId:null}}logger(){console.log(this.registrationStep)}checkInputsValidityHandler(t){this.listOfInputs.find((e=>e.name==t.detail.name)).isValid=t.detail.valid,this.isFormValid=!this.getInvalidStatus(this.listOfInputs)}getInputsValueHandler(t){this.listOfInputValues.find((e=>e.name==t.detail.name)).value=t.detail.value,this.stepsStateMachine({event:"set",type:"values"})}componentWillLoad(){return this.getRegisterConfig().then((t=>{this.formatConfig(t),this.stepsStateMachine({event:"set",type:"inputs"})}))}nextHandler(t){t.preventDefault(),this.emitValue=!0,this.setRegisterStep()}backHandler(t){t.preventDefault(),this.steps.pop(),this.registrationStep=this.steps.at(-1),this.stepsStateMachine({event:"get",type:"inputs"}),this.stepsStateMachine({event:"get",type:"values"})}stepsStateMachine(t){switch(t.event){case"set":"inputs"==t.type&&(this.registrationStepsState[this.registrationStep].fields=this.listOfInputs),"values"==t.type&&(this.registrationStepsState[this.registrationStep].registerUserData=this.listOfInputValues.reduce(((t,e)=>(null!=e.value&&(t[e.name]=e.value),t)),{})),localStorage.setItem("registrationStepsState",JSON.stringify(this.registrationStepsState));break;case"get":const e=JSON.parse(localStorage.getItem("registrationStepsState"));if(!e)return;if("inputs"==t.type&&(this.listOfInputs=this.registrationStepsState[this.registrationStep].fields),"values"==t.type){const t=e[this.registrationStep].registerUserData;this.listOfInputValues=Object.keys(t).map((e=>({name:e,value:t[e]}))),this.listOfInputValues.forEach((t=>{const e=this.listOfInputs.find((e=>e.name===t.name));e&&(e.defaultValue=t.value)}))}}}getRegisterConfig(t){const e=new URL(`${this.endpoint}/v1/player/legislation/registration/config`),i=new Headers;i.append("Content-Type","application/json"),i.append("Accept","application/json"),t&&e.searchParams.append("registrationId",t);const s={method:"GET",headers:i};return new Promise(((t,i)=>{this.isLoading=!0,fetch(e.href,s).then((t=>t.json())).then((e=>{t(e)})).catch((t=>{console.error(t),i(t)})).finally((()=>{this.isLoading=!1}))}))}setRegisterStep(){this.isLoading=!0;const t=new URL(`${this.endpoint}/v1/player/legislation/registration/step`),e={registrationId:this.registrationID,registerUserDto:this.listOfInputValues.reduce(((t,e)=>(null!=e.value&&(t[e.name]=e.value),t)),{}),step:this.registrationStep},i=new Headers;i.append("Content-Type","application/json"),i.append("Accept","application/json");const s={method:"POST",body:JSON.stringify(e),headers:i};fetch(t.href,s).then((t=>{if(t.status>=300)throw new Error("err");return t.json()})).then((t=>{this.registrationID=t.registrationId,this.listOfActions.some((t=>"/register"==t))?this.setRegister():this.getRegisterConfig(this.registrationID).then((t=>{this.formatConfig(t),this.stepsStateMachine({event:"set",type:"inputs"})}))})).catch((t=>{console.error(t)})).finally((()=>{this.isLoading=!1}))}setRegister(){this.isLoading=!0;const t=new URL(`${this.endpoint}/v1/player/legislation/register`),e=new Headers;e.append("Content-Type","application/json"),e.append("Accept","application/json");const i={method:"PUT",body:JSON.stringify({registrationId:this.registrationID}),headers:e};fetch(t.href,i).then((t=>{if(t.status>=300)throw new Error("err");return t.json()})).then((t=>{t.userId&&alert(`User registered - the user ID is ${t.userId}`)})).catch((t=>{console.error(t)})).finally((()=>{this.isLoading=!1}))}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,value:null}))),this.listOfActions=t.content.actions.map((t=>t)),this.isLastStep=this.listOfActions.some((t=>"/register"==t)),this.registrationID=t.content.registrationID,this.registrationStep=t.content.step,this.steps.push(this.registrationStep),this.registrationStepsState.regId=this.registrationID,this.registrationStepsState[this.registrationStep]||(this.registrationStepsState[this.registrationStep]={fields:[],registerUserData:{}})}getInvalidStatus(t){return t.filter((t=>0==t.isValid)).length>0}renderInputs(){return this.listOfInputs.map((t=>i("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,autofilled:t.autofill,emitValue:this.emitValue,language:this.language})))}renderButtons(){return i("div",{class:"registration__buttons-wrapper"},i("button",{class:"registration__button "+(this.isLastStep?"registration__button--done":""),type:"submit",form:"RegistrationForm",onClick:t=>this.nextHandler(t)},qr(this.isLastStep?"doneButton":"nextButton",this.language)),"Step1"!==this.registrationStep&&i("button",{class:"registration__button",onClick:t=>this.backHandler(t)},qr("backButton",this.language)))}render(){return this.isLoading?i("p",null,"Please wait, loading ..."):i("div",{class:"registration"},i("form",{action:".",id:"RegistrationForm",class:"registration__form"},this.renderInputs()),this.renderButtons())}static get watchers(){return{registrationStep:["logger"]}}};Rr.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 Ur=class{constructor(i){t(this,i),this.sendValidityState=e(this,"sendValidityState",7),this.sendInputValue=e(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)}handleInput(t){this.value=t.target.value,this.errorMessage=this.setErrorMessage(),this.isValid=this.setValidity(),this.validityStateHandler({valid:this.isValid,name:this.name}),this.emitValueHandler(!0)}setValidity(){return this.inputReference.validity.valid}setErrorMessage(){return this.inputReference.validity.rangeUnderflow||this.inputReference.validity.rangeOverflow?n("numberLengthError",this.language,{values:{min:this.validation.min,max:this.validation.max}}):this.inputReference.validity.valueMissing?n("requiredError",this.language):void 0}render(){return i("div",{class:"number__wrapper"},i("input",{ref:t=>this.inputReference=t,type:"number",value:this.defaultValue,readOnly:this.autofilled,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,onBlur:t=>this.handleInput(t)}),i("label",{class:"number__label "+(this.validation.mandatory?"number__label--required":""),htmlFor:`${this.name}__input`},this.displayName),i("small",{class:"number__error-message"},this.errorMessage))}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};Ur.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 Wr=class{constructor(i){t(this,i),this.sendValidityState=e(this,"sendValidityState",7),this.sendInputValue=e(this,"sendInputValue",7),this.defaultValue="",this.value="",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}),this.emitValueHandler(!0)}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?n("lengthError",this.language,{values:{minLength:this.validation.minLength,maxLength:this.validation.maxLength}}):this.inputReference.validity.valueMissing?n("requiredError",this.language):void 0}render(){return i("div",{class:"password__wrapper"},i("input",{type:"password",id:`${this.name}__input`,class:"password__input "+(1==this.isValid||null==this.isValid?"":"password__input--invalid"),name:this.name,readOnly:this.autofilled,value:this.defaultValue,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)}),i("label",{class:"password__label "+(this.validation.mandatory?"password__label--required":""),htmlFor:`${this.name}__input`},this.displayName),i("small",{class:"password__error-message"},this.errorMessage))}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};Wr.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 Yr=class{constructor(i){t(this,i),this.sendInputValue=e(this,"sendInputValue",7),this.sendValidityState=e(this,"sendValidityState",7)}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})}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(),this.validityStateHandler({valid:this.isValid,name:this.name}),this.emitValueHandler(!0)}setValidity(){return this.inputReference.validity.valid}setErrorMessage(){if(this.inputReference.validity.valueMissing)return n("requiredError",this.language)}render(){return i("fieldset",{class:"radio__fieldset"},i("legend",{class:"radio__legend"},this.displayName,":"),this.optionsGroup.map((t=>i("div",{class:"radio__wrapper"},i("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)}),i("label",{htmlFor:`${t.label}__input`},t.label)))),i("small",{class:"radio__error-message"},this.errorMessage))}static get watchers(){return{isValid:["validityChanged"],emitValue:["emitValueHandler"]}}};Yr.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}",ut("vaadin-combo-box-overlay",[Ui,Ds,m`
|
|
2819
2819
|
[part='content'] {
|
|
2820
2820
|
padding: 0;
|
|
2821
2821
|
}
|