@securecall/client-component
Version:
SecureCall Core Web Component
94 lines (89 loc) • 4.34 kB
JavaScript
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-0D76SiW-.js';
import { L as Logger } from './p-By6Qn8nU.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(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.__attachShadow();
this.isValidEvent = createEvent(this, "isValidEvent");
this.changed = createEvent(this, "changed");
}
fieldName;
config;
isValidEvent;
log = new 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: 'bf4aa30394d253ad120d6e82557835d27ecdc7a5' }, h("div", { key: 'fc1641d05b1eb681050625db293858d4a3c48d42', class: "field-container" }, h("label", { key: '97846cf246e9ced0c4b4bac1a0550451b7516c7a', class: "custom-label" }, this.config["label"], ":"), h("select", { key: '6c2daa0379cb8c23010cda56adf91f9bc9eccfb3', 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: 'bcabc83fa9ef3313c5c9cd1d288cf4d1898f0f99', 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