UNPKG

@securecall/client-component

Version:

SecureCall Core Web Component

2 lines 3.42 kB
import{r as e,c as t,f as i,h as r,H as a}from"./p-CHf4eHvJ.js";import{L as o}from"./p-CgjdSc_8.js";const n=":host{display:block}.component-form{display:grid;flex-direction:column;gap:0.5rem}.component-field-container{display:grid;grid-template-columns:10em 1fr 20px;align-items:center;gap:1rem;margin-top:1rem}.component-button{padding:0.75rem 1.5rem;background-color:var(--theme-button-color, #007bff);color:var(--theme-primary-color, #fff);border:none;border-radius:4px;cursor:pointer;font-size:1rem;width:fit-content}.component-button:disabled{background-color:var(--theme-button-color-disabled, #ccc);cursor:not-allowed}.component-button:hover:not(:disabled){background-color:var(--theme-button-color-hover, #0056b3)}securecall-request-radio,securecall-request-currency,securecall-request-string,securecall-request-secure-pan,securecall-request-secure{display:block;width:100%}.field-container{display:grid;grid-template-columns:10em 1fr 20px;align-items:center;gap:1rem}.custom-label{text-align:right;align-items:center;font-weight:bold;gap:0.5rem}.custom-input{padding:0.2rem;border:1px solid #ccc;border-radius:4px;font-size:1rem}";const s=class{constructor(i){e(this,i);this.submitTransactionEvent=t(this,"submitTransactionEvent")}fieldData;transactionToggle;isFormValid=false;submitTransactionEvent;log=o("SecurecallTransaction");transactionTogglePropHandler(e,t){if(e!==t){this.updateFormValidity()}}fieldDataPropHandler(e,t){this.log.debug("fieldDataPropHandler: newValue:",e,"oldValue:",t);if(e!==t){this.updateFormValidity()}}handleSubmit(){this.log.debug("handleSubmit:",this,this.submitTransactionEvent);this.submitTransactionEvent.emit(this.fieldData.asAPITransaction())}handleIsValidEvent(e){const{field:t,valid:i,value:r}=e.detail;this.log.debug("isValidEvent: field:",t,"valid:",i,"value:",r);if(t&&this.fieldData.transaction[t]){this.fieldData.transaction[t].valid=i;this.fieldData.transaction[t].value=r;this.updateFormValidity()}}async handleRadioChange(e){this.log.debug("requestRadioChangeEvent: "+e.detail);const{field:t,value:r}=e.detail;let a=this.fieldData.calculatedFields();Object.entries(a[t]["hideRelatedFields"]?.[r]||{}).forEach((([e,t])=>{let i=this.fieldData.transaction[e];if(i){i["hidden"]=t}}));i(this)}updateFormValidity(){const e=Object.entries(this.fieldData.calculatedFields()).filter((([e,t])=>!t.hidden&&!t.valid)).map((([e])=>e));this.isFormValid=e.length===0;this.log.debug("updateFormValidity: isFormValid:",this.isFormValid,"invalidFields:",JSON.stringify(e))}renderFields(){this.log.debug("renderFields: fieldData=",this.fieldData);const e=this.fieldData?.asComponentChildren()||[];this.log.debug("renderFields: fields=",e);return e.map((e=>{const t="securecall-request-"+e.component;return r(t,{id:e.name,"field-name":e.name,config:e.config})}))}renderButtons(){return r("div",{class:"component-field-container"},r("div",null),r("button",{type:"button",class:"component-button",onClick:()=>this.handleSubmit(),disabled:!this.isFormValid},"Submit Transaction"))}render(){return r(a,{key:"701a12cd451094313dd7dbf6f1ca30d08384276d"},r("form",{key:"d4fc5c577ab01f306350f3e02fff6e60340d8c98",class:"component-form"},this.renderFields(),this.renderButtons()))}static get watchers(){return{transactionToggle:["transactionTogglePropHandler"],fieldData:["fieldDataPropHandler"]}}};s.style=n;export{s as securecall_transaction}; //# sourceMappingURL=p-cbbaf0b0.entry.js.map