@securecall/client-component
Version:
SecureCall Core Web Component
107 lines (106 loc) • 4.16 kB
JavaScript
import { Host, h } from "@stencil/core";
import { Logger } from "../../utils/logger";
export class SecurecallRequestSecurePan {
fieldName;
config;
secureFieldResetEvent;
log = new 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("div", { class: `brand-icon icon-${brand}` }));
});
}
render() {
return (h(Host, { key: '45c78384cda7d7f02ea2bc85063450920780e08a' }, h("div", { key: 'be6ae9dcd9c80285839ebb4643b36b2a2bd00d7b', class: "field-container" }, h("label", { key: '04ba1a375ce4123a7e1886863d16184e29fa1f7b', class: "custom-label", htmlFor: this.fieldName }, this.config["label"], ": ", this.config.active), h("div", { key: 'b78cae7beacc7f9f3b9f9240ea594e3e7c92be77', class: "input-container" }, h("input", { key: '627c98c626195ce1db53d8df21a3ecb8183f2b5c', type: "text", class: `custom-input ${this.config.active ? 'active' : 'inactive'}`, id: this.fieldName, readOnly: true, placeholder: this.config.value }), h("div", { key: 'eceefb01d7bf3066595ece7e8aa848dbbf3bd58e', class: "brand-icons-overlay" }, this.cardIconMap())), h("div", { key: 'b49479198aed1e429e57ec9f13b8339c4db24c52', class: this.config.valid ? 'field-valid' : 'field-invalid', 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 properties() {
return {
"fieldName": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "field-name"
},
"config": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "config"
}
};
}
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