@securecall/client-component
Version:
SecureCall Core Web Component
150 lines (149 loc) • 6.24 kB
JavaScript
import { Host, h, Fragment, forceUpdate } from "@stencil/core";
import { Logger } from "../../utils/logger";
export class SecurecallRequestRadio {
fieldName;
config;
requestRadioChangeEvent;
isValidEvent;
log = Logger('SecurecallRequestRadio');
get value() {
return this.config.value;
}
set value(value) {
this.config.value = value;
this.handleLocalStorageChange();
}
handleConfigChange(newConfig, oldConfig) {
this.log.debug(this.fieldName + ": handleConfigChange: config", newConfig, oldConfig);
if (oldConfig.value !== newConfig.value) {
this.value = newConfig.value;
}
else if (oldConfig.valid !== newConfig.valid) {
this.validateChange(this.value);
}
}
componentWillLoad() {
// Trigger the first time we are loaded so the other fields can be hidden/revealed
this.requestRadioChangeEvent.emit({ field: this.fieldName, value: this.value });
this.validateChange(this.value);
}
handleLocalStorageChange() {
this.log.debug("handleChangeFromLocalStorage: string change:", this.value);
this.requestRadioChangeEvent.emit({ field: this.fieldName, value: this.value });
this.validateChange(this.value);
forceUpdate(this);
}
handleChange(ev) {
this.log.debug("handleChange: string change:", ev.target.value);
this.requestRadioChangeEvent.emit({ field: this.fieldName, value: ev.target.value });
this.validateChange(ev.target.value);
}
validateChange(input) {
let isValid = false;
if (this.config.possibleValues?.[input] !== undefined)
isValid = true;
this.isValidEvent.emit({ field: this.fieldName, valid: isValid, value: input });
}
render() {
return (h(Host, { key: 'af690e486995893548fcde6b55ea273d00147f8c' }, h("div", { key: '163bd2716e53fd13cef425348c26285efdc54eed', class: "field-container" }, h("label", { key: '630da588799e06bbfc332e1efbf92c6580905085', class: "custom-label", htmlFor: this.fieldName }, this.config.label, ":"), h("div", { key: '8b54851d63b4bc9a4052b858efe4b32204459aeb', class: "radio-group" }, Object.entries(this.config.possibleValues || {}).map(([val, label], _index) => (h(Fragment, null, h("input", { class: "radio-input", type: "radio", name: this.fieldName, id: this.fieldName + "-" + val, value: val, checked: val === this.config.value, onChange: (ev) => this.handleChange(ev), disabled: this.config.readOnly }), h("label", { class: "radio-label", htmlFor: this.fieldName + "-" + val }, label))))))));
}
static get is() { return "securecall-request-radio"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["securecall-request-radio.css"]
};
}
static get styleUrls() {
return {
"$": ["securecall-request-radio.css"]
};
}
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": "unknown",
"attribute": "config",
"mutable": true,
"complexType": {
"original": "IRequestField",
"resolved": "{ label?: string; hidden?: boolean; value?: string; max?: number; min?: number; placeholder?: string; readOnly?: boolean; order?: number; component?: string; valid?: boolean; possibleValues?: Record<string, string>; mapping?: string; externalMapping?: string; active?: boolean; hideRelatedFields?: Record<string, object>; secure?: boolean; optional?: boolean; }",
"references": {
"IRequestField": {
"location": "import",
"path": "../../interfaces/configuration",
"id": "src/interfaces/configuration.ts::IRequestField"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false
}
};
}
static get events() {
return [{
"method": "requestRadioChangeEvent",
"name": "requestRadioChangeEvent",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "{ field: string, value: string }",
"resolved": "{ field: string; value: string; }",
"references": {}
}
}, {
"method": "isValidEvent",
"name": "isValidEvent",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "{ field: string, valid: boolean, value: string }",
"resolved": "{ field: string; valid: boolean; value: string; }",
"references": {}
}
}];
}
static get watchers() {
return [{
"propName": "config",
"methodName": "handleConfigChange"
}];
}
}
//# sourceMappingURL=securecall-request-radio.js.map