@securecall/client-component/dist/components/securecall-request-radio.js

SecureCall Core Web Component

import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h, F as Fragment, d as Host } from './p-0D76SiW-.js';
import { L as Logger } from './p-By6Qn8nU.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$1 = /*@__PURE__*/ proxyCustomElement(class SecurecallRequestRadio extends H {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.__attachShadow();
        this.requestRadioChangeEvent = createEvent(this, "requestRadioChangeEvent");
        this.isValidEvent = createEvent(this, "isValidEvent");
    }
    fieldName;
    config;
    requestRadioChangeEvent;
    isValidEvent;
    log = new 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: 'f625ce2cb89fafa03508df307374845003086bee' }, h("div", { key: '617f29ccd25742580c1b31bedf88b699902435be', class: "field-container" }, h("label", { key: 'cb30d893bfa51943f507dc4e6d8bb7daee9bb41b', class: "custom-label", htmlFor: this.fieldName }, this.config.label, ":"), h("div", { key: 'f4c3bd88b4dcfaf95181808bf96c403c602a460f', 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 watchers() { return {
        "config": ["handleConfigChange"]
    }; }
    static get style() { return securecallRequestRadioCss; }
}, [257, "securecall-request-radio", {
        "fieldName": [1, "field-name"],
        "config": [1040]
    }, undefined, {
        "config": ["handleConfigChange"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["securecall-request-radio"];
    components.forEach(tagName => { switch (tagName) {
        case "securecall-request-radio":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, SecurecallRequestRadio$1);
            }
            break;
    } });
}

const SecurecallRequestRadio = SecurecallRequestRadio$1;
const defineCustomElement = defineCustomElement$1;

export { SecurecallRequestRadio, defineCustomElement };
//# sourceMappingURL=securecall-request-radio.js.map

//# sourceMappingURL=securecall-request-radio.js.map