@securecall/client-component
Version:
SecureCall Core Web Component
69 lines (64 loc) • 3.68 kB
JavaScript
'use strict';
var index = require('./index-4GqdwRn1.js');
var logger = require('./logger-CTFQb4FW.js');
const securecallRequestRadioCss = ":host{display:block}.radio-label{color:var(--theme-primary-color);text-align:right;align-items:center;gap:0.5rem;margin-right:1rem}.field-container{display:grid;grid-template-columns:10em 1fr 20px;align-items:center;gap:1rem}.custom-label{color:var(--theme-primary-color);text-align:right;align-items:center;font-weight:bold;gap:0.5rem}.radio-input{margin-right:0.2rem}";
const SecurecallRequestRadio = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.requestRadioChangeEvent = index.createEvent(this, "requestRadioChangeEvent");
this.isValidEvent = index.createEvent(this, "isValidEvent");
}
fieldName;
config;
requestRadioChangeEvent;
isValidEvent;
log = logger.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);
index.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 (index.h(index.Host, { key: 'af690e486995893548fcde6b55ea273d00147f8c' }, index.h("div", { key: '163bd2716e53fd13cef425348c26285efdc54eed', class: "field-container" }, index.h("label", { key: '630da588799e06bbfc332e1efbf92c6580905085', class: "custom-label", htmlFor: this.fieldName }, this.config.label, ":"), index.h("div", { key: '8b54851d63b4bc9a4052b858efe4b32204459aeb', class: "radio-group" }, Object.entries(this.config.possibleValues || {}).map(([val, label], _index) => (index.h(index.Fragment, null, index.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 }), index.h("label", { class: "radio-label", htmlFor: this.fieldName + "-" + val }, label))))))));
}
static get watchers() { return {
"config": ["handleConfigChange"]
}; }
};
SecurecallRequestRadio.style = securecallRequestRadioCss;
exports.securecall_request_radio = SecurecallRequestRadio;
//# sourceMappingURL=securecall-request-radio.entry.cjs.js.map
//# sourceMappingURL=securecall-request-radio.cjs.entry.js.map