@securecall/client-component/dist/cjs/securecall-request-select.cjs.entry.js

SecureCall Core Web Component

'use strict';

var index = require('./index-DcU5riY9.js');
var logger = require('./logger-MkCqSOk_.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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.isValidEvent = index.createEvent(this, "isValidEvent");
        this.changed = index.createEvent(this, "changed");
    }
    fieldName;
    config;
    isValidEvent;
    log = new logger.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 (index.h(index.Host, { key: 'bf4aa30394d253ad120d6e82557835d27ecdc7a5' }, index.h("div", { key: 'fc1641d05b1eb681050625db293858d4a3c48d42', class: "field-container" }, index.h("label", { key: '97846cf246e9ced0c4b4bac1a0550451b7516c7a', class: "custom-label" }, this.config["label"], ":"), index.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]) => (index.h("option", { value: key, selected: key === this.value }, val)))) : null), index.h("div", { key: 'bcabc83fa9ef3313c5c9cd1d288cf4d1898f0f99', class: "validity none" }))));
    }
    static get watchers() { return {
        "config": ["handleConfigChange"]
    }; }
};
SecurecallRequestSelect.style = securecallRequestSelectCss;

exports.securecall_request_select = SecurecallRequestSelect;
//# sourceMappingURL=securecall-request-select.entry.cjs.js.map