@securecall/client-component
Version:
SecureCall Core Web Component
92 lines (87 loc) • 4.27 kB
JavaScript
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-XmE3deEH.js';
import { L as Logger } from './p-CgjdSc_8.js';
const securecallRequestSelectCss = ":host{display:block}.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}.custom-select{padding:0.2rem;border:1px solid var(--theme-secondary-color);border-radius:4px;font-size:1rem;background-color:var(--theme-input-active-background)}";
const SecurecallRequestSelect$1 = /*@__PURE__*/ proxyCustomElement(class SecurecallRequestSelect extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.isValidEvent = createEvent(this, "isValidEvent");
this.changed = createEvent(this, "changed");
}
fieldName;
config;
isValidEvent;
log = Logger('SecurecallRequestSelect');
selectElement;
changed;
get value() {
return this.config.value;
}
set value(value) {
if (this.config.value !== value) {
this.config.value = value;
this.validateChange();
}
}
handleConfigChange(newConfig, oldConfig) {
this.log.debug(this.fieldName + ": handleConfigChange: config", newConfig, oldConfig);
if (oldConfig.value !== newConfig.value) {
this.value = newConfig.value;
this.validateChange();
if (this.selectElement)
this.selectElement.value = this.value;
}
else if (oldConfig.valid !== newConfig.valid) {
this.validateChange();
}
}
componentWillLoad() {
this.log.debug(this.fieldName + ": componentWillLoad: config", this.config);
if (this.config.value === undefined)
this.value = Object.entries(this.config.possibleValues)[0][0] || '';
this.validateChange();
}
handleChange(ev) {
this.log.debug(this.fieldName + ": handleChange: select change:", ev.target.value);
this.value = ev.target.value;
}
validateChange() {
const input = this.value;
let isValid = false;
if (input && input.length > 0) {
isValid = true;
}
this.isValidEvent.emit({ field: this.fieldName, valid: isValid, value: input });
}
render() {
return (h(Host, { key: 'bacd866cd442d114e13275e7281ee9721f39c3ea' }, h("div", { key: 'da69e70ab782a9ff504dca671e571834c9f40818', class: "field-container" }, h("label", { key: 'bf50ef84ca47511e90042544b00f2459415cac38', class: "custom-label" }, this.config["label"], ":"), h("select", { key: 'f466798b577aa3c67e1d95e69c939ec9102199bf', class: "custom-select", id: this.fieldName, disabled: this.config.readOnly, onChange: (ev) => this.handleChange(ev), ref: (el) => this.selectElement = el }, typeof this.config.possibleValues === 'object' && this.config.possibleValues !== null ? (Object.entries(this.config.possibleValues).map(([key, val]) => (h("option", { value: key, selected: key === this.value }, val)))) : null), h("div", { key: 'f8382bcc86d5b949617dfb60e3f7f2ac9e2d8030', class: "validity none" }))));
}
static get watchers() { return {
"config": ["handleConfigChange"]
}; }
static get style() { return securecallRequestSelectCss; }
}, [257, "securecall-request-select", {
"fieldName": [1, "field-name"],
"config": [1040]
}, undefined, {
"config": ["handleConfigChange"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["securecall-request-select"];
components.forEach(tagName => { switch (tagName) {
case "securecall-request-select":
if (!customElements.get(tagName)) {
customElements.define(tagName, SecurecallRequestSelect$1);
}
break;
} });
}
const SecurecallRequestSelect = SecurecallRequestSelect$1;
const defineCustomElement = defineCustomElement$1;
export { SecurecallRequestSelect, defineCustomElement };
//# sourceMappingURL=securecall-request-select.js.map
//# sourceMappingURL=securecall-request-select.js.map