@securecall/client-component/dist/esm/securecall-request-string.entry.js

SecureCall Core Web Component

import { r as registerInstance, c as createEvent, h, H as Host } from './index-CHf4eHvJ.js';
import { L as Logger } from './logger-CgjdSc_8.js';

const securecallRequestStringCss = ":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-input{padding:0.2rem;border:1px solid #ccc;border-radius:4px;font-size:1rem}";

const SecurecallRequestString = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.isValidEvent = createEvent(this, "isValidEvent");
    }
    fieldName;
    config;
    isValidEvent;
    log = Logger('SecurecallRequestString');
    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();
        }
        else if (oldConfig.valid !== newConfig.valid) {
            this.validateChange();
        }
    }
    componentWillLoad() {
        this.log.debug(this.fieldName + ": componentWillLoad: config", this.config);
        this.validateChange();
    }
    handleChange(ev) {
        this.log.debug(this.fieldName + ": handleChange: string change:", ev.target.value);
        this.value = ev.target.value;
    }
    validateChange() {
        const input = this.value;
        this.log.debug(this.fieldName + ": validateChange: string:", input);
        if (this.config.optional && (!input || input.trim() === ''))
            return this.isValidEvent.emit({ field: this.fieldName, valid: true, value: '' });
        const minLength = this.config.min || 1;
        const maxLength = this.config.max;
        const isValid = input?.length >= minLength && (!maxLength || input.length <= maxLength);
        this.isValidEvent.emit({ field: this.fieldName, valid: isValid, value: input });
    }
    render() {
        return (h(Host, { key: '926acfb306eabea9af9133906fece66ca621ed13' }, h("div", { key: '94d7481dce814bbe32eaa423feacd79f4ecee857', class: "field-container" }, h("label", { key: 'cb77d8a2cdf9e03852208c38ec45a212b35f6573', class: "custom-label" }, this.config.label, ":"), h("input", { key: 'bbef54e2a9c1314fe4334897030c1c57864c0c2e', type: "text", class: "custom-input", id: this.fieldName, placeholder: this.config.placeholder || this.config.label, value: this.value, disabled: this.config.readOnly, onInput: (ev) => this.handleChange(ev) }), h("div", { key: 'e26c8853a943d3c3495f006505ba621f0dc16c66', class: "validity none" }))));
    }
    static get watchers() { return {
        "config": ["handleConfigChange"]
    }; }
};
SecurecallRequestString.style = securecallRequestStringCss;

export { SecurecallRequestString as securecall_request_string };
//# sourceMappingURL=securecall-request-string.entry.js.map

//# sourceMappingURL=securecall-request-string.entry.js.map