@securecall/client-component
Version:
SecureCall Core Web Component
2 lines • 5.28 kB
JavaScript
import{r as n,c as e,h as t,g as a,H as i}from"./p-CHf4eHvJ.js";import{L as r}from"./p-CgjdSc_8.js";const s=":host {\n display: block;\n}\n\n.field-container {\n display: grid;\n grid-template-columns: 10em 1fr 20px;\n align-items: center;\n gap: 1rem;\n}\n\n.custom-label {\n color: var(--theme-primary-color);\n text-align: right;\n align-items: center;\n font-weight: bold;\n gap: 0.5rem;\n}\n\n.custom-input {\n border: 1px solid var(--theme-secondary-color);\n border-radius: 4px;\n font-size: 1rem;\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n /* Make room for the brand icon */\n padding: 0.2rem 40px 0.2rem 0.2rem;\n\n}\n\n\n.custom-input.active {\n background-color: var(--theme-input-active-background);\n}\n\n.custom-input.inactive {\n background-color: var(--theme-input-inactive-background);\n}\n\ninput:read-only {\n pointer-events: none;\n}\n\n.card-brands-container {\n display: grid;\n /*flex-direction: row;*/\n justify-content: center;\n gap: 0.25rem;\n align-items: center;\n /*flex-shrink: 0;*/\n height: 1.5rem;\n grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));\n}\n\n.card-brands-container span {\n height: 1.5rem\n /*height: 100%;*/\n /*width: 100%;*/\n}\n\n.brand-icon {\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n width: 24px;\n height: 16px;\n z-index: 10;\n pointer-events: none; /* Allows clicking through to the input */\n}\n\n.input-container {\n position: relative;\n display: inline-block;\n width: 100%;\n}\n\n.brand-icons-overlay {\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n gap: 5px;\n pointer-events: none;\n}\n\n\n\n.validity {\n background-color: var(--theme-primary-color);\n -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z'/%3E%3Cpath d='M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z'/%3E%3C/svg%3E\");\n mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z'/%3E%3Cpath d='M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z'/%3E%3C/svg%3E\");\n height: 1.0rem;\n width: 1.0rem;\n cursor: pointer;\n pointer-events: auto;\n flex-shrink: 0;\n}\n\n.validity.valid {\n background-color: var(--theme-primary-color);\n -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E\");\n mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E\");\n height: 1.0rem;\n width: 1.0rem;\n cursor: pointer;\n flex-shrink: 0;\n}\n\n.validity.none {\n background-color: transparent;\n height: 1.0rem;\n width: 1.0rem;\n flex-shrink: 0;\n}\n";const o=class{constructor(t){n(this,t);this.secureFieldResetEvent=e(this,"secureFieldResetEvent")}fieldName;config;secureFieldResetEvent;log=r("SecurecallRequestSecurePan");handleConfigChange(n,e){this.log.debug(this.fieldName+": handleConfigChange: config",n,e)}handleClick(n){n.preventDefault();this.log.debug("handleClick: field",this.fieldName,"clicked");this.config.valid=false;this.secureFieldResetEvent.emit(this.fieldName)}cardIconMap(){let n;n=this.config.brands?this.config.brands:[];return n.map((n=>t("span",null,t("img",{class:"brand-icon",src:a(`assets/icons/${n}.svg`)}))))}render(){return t(i,{key:"f3e9be94a9335c57a0b417bbc235d97488f1e047"},t("div",{key:"ba008cdb24f7776b39e5007ddf4a746e224ec8f2",class:"field-container"},t("label",{key:"374bc6cc4124aa58f43b679328531ae0967f2fd7",class:"custom-label",htmlFor:this.fieldName},this.config["label"],": ",this.config.active),t("div",{key:"35fdab7e6ac5b5edd111df68e88b2dfa6c4862a9",class:"input-container"},t("input",{key:"6ee57836a334870fabaf08614dc0752d687cfa94",type:"text",class:`custom-input ${this.config.active?"active":"inactive"}`,id:this.fieldName,readOnly:true,placeholder:this.config.value}),t("div",{key:"e65eb7282620c968862a27080c804a598fde9cc7",class:"brand-icons-overlay"},this.cardIconMap())),t("div",{key:"7f2b84b3056ca2bc12c2b3bd6140ce5d688c2dfc",class:{validity:true,valid:this.config.valid},onClick:n=>this.handleClick(n)})))}static get assetsDirs(){return["assets"]}static get watchers(){return{config:["handleConfigChange"]}}};o.style=s;export{o as securecall_request_secure_pan};
//# sourceMappingURL=p-2347fd2b.entry.js.map