@securecall/client-component
Version:
SecureCall Core Web Component
67 lines (62 loc) • 6.85 kB
JavaScript
import { p as proxyCustomElement, H, c as createEvent, h, g as getAssetPath, d as Host } from './p-XmE3deEH.js';
import { L as Logger } from './p-CgjdSc_8.js';
const securecallRequestSecurePanCss = ":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 SecurecallRequestSecurePan$1 = /*@__PURE__*/ proxyCustomElement(class SecurecallRequestSecurePan extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.secureFieldResetEvent = createEvent(this, "secureFieldResetEvent");
}
fieldName;
config;
secureFieldResetEvent;
log = Logger('SecurecallRequestSecurePan');
handleConfigChange(newConfig, oldConfig) {
this.log.debug(this.fieldName + ": handleConfigChange: config", newConfig, oldConfig);
}
handleClick(ev) {
ev.preventDefault();
this.log.debug("handleClick: field", this.fieldName, "clicked");
this.config.valid = false;
this.secureFieldResetEvent.emit(this.fieldName);
}
cardIconMap() {
let iconList;
iconList = (this.config.brands) ? this.config.brands : [];
return iconList.map(brand => {
return h("span", null, h("img", { class: "brand-icon", src: getAssetPath(`assets/icons/${brand}.svg`) }));
});
}
render() {
return (h(Host, { key: 'f3e9be94a9335c57a0b417bbc235d97488f1e047' }, h("div", { key: 'ba008cdb24f7776b39e5007ddf4a746e224ec8f2', class: "field-container" }, h("label", { key: '374bc6cc4124aa58f43b679328531ae0967f2fd7', class: "custom-label", htmlFor: this.fieldName }, this.config["label"], ": ", this.config.active), h("div", { key: '35fdab7e6ac5b5edd111df68e88b2dfa6c4862a9', class: "input-container" }, h("input", { key: '6ee57836a334870fabaf08614dc0752d687cfa94', type: "text", class: `custom-input ${this.config.active ? 'active' : 'inactive'}`, id: this.fieldName, readOnly: true, placeholder: this.config.value }), h("div", { key: 'e65eb7282620c968862a27080c804a598fde9cc7', class: "brand-icons-overlay" }, this.cardIconMap())), h("div", { key: '7f2b84b3056ca2bc12c2b3bd6140ce5d688c2dfc', class: { validity: true, valid: this.config.valid }, onClick: (ev) => this.handleClick(ev) }))));
}
static get assetsDirs() { return ["assets"]; }
static get watchers() { return {
"config": ["handleConfigChange"]
}; }
static get style() { return securecallRequestSecurePanCss; }
}, [257, "securecall-request-secure-pan", {
"fieldName": [1, "field-name"],
"config": [8]
}, undefined, {
"config": ["handleConfigChange"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["securecall-request-secure-pan"];
components.forEach(tagName => { switch (tagName) {
case "securecall-request-secure-pan":
if (!customElements.get(tagName)) {
customElements.define(tagName, SecurecallRequestSecurePan$1);
}
break;
} });
}
const SecurecallRequestSecurePan = SecurecallRequestSecurePan$1;
const defineCustomElement = defineCustomElement$1;
export { SecurecallRequestSecurePan, defineCustomElement };
//# sourceMappingURL=securecall-request-secure-pan.js.map
//# sourceMappingURL=securecall-request-secure-pan.js.map