@securecall/client-component
Version:
SecureCall Core Web Component
44 lines (40 loc) • 6.05 kB
JavaScript
import { r as registerInstance, c as createEvent, h, g as getAssetPath, H as Host } from './index-CHf4eHvJ.js';
import { L as Logger } from './logger-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 = class {
constructor(hostRef) {
registerInstance(this, hostRef);
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"]
}; }
};
SecurecallRequestSecurePan.style = securecallRequestSecurePanCss;
export { SecurecallRequestSecurePan as securecall_request_secure_pan };
//# sourceMappingURL=securecall-request-secure-pan.entry.js.map
//# sourceMappingURL=securecall-request-secure-pan.entry.js.map