@securecall/client-component
Version:
SecureCall Core Web Component
108 lines (107 loc) • 4.25 kB
JavaScript
import { Host, h, getAssetPath } from "@stencil/core";
import { Logger } from "../../utils/logger";
export class SecurecallRequestSecurePan {
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 is() { return "securecall-request-secure-pan"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["securecall-request-secure-pan.css"]
};
}
static get styleUrls() {
return {
"$": ["securecall-request-secure-pan.css"]
};
}
static get assetsDirs() { return ["assets"]; }
static get properties() {
return {
"fieldName": {
"type": "string",
"attribute": "field-name",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false
},
"config": {
"type": "any",
"attribute": "config",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false
}
};
}
static get events() {
return [{
"method": "secureFieldResetEvent",
"name": "secureFieldResetEvent",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}];
}
static get watchers() {
return [{
"propName": "config",
"methodName": "handleConfigChange"
}];
}
}
//# sourceMappingURL=securecall-request-secure-pan.js.map