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

SecureCall Core Web Component

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 securecallRequestSecureCss = ":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,.custom-input.active,.custom-input.inactive{padding:0.2rem;border-radius:4px;font-size:1rem;border:1px solid var(--theme-secondary-color)}.custom-input.active{background-color:var(--theme-input-active-background)}.custom-input.inactive{background-color:var(--theme-input-inactive-background)}input:read-only{pointer-events:none}.field-invalid{background-color:var(--theme-primary-color);-webkit-mask:var(--icon-reset);mask:var(--icon-reset);height:1.0rem;width:1.0rem;cursor:pointer;pointer-events:auto}.field-valid{background-color:var(--theme-primary-color);-webkit-mask:var(--icon-valid);mask:var(--icon-valid);height:1.0rem;width:1.0rem;cursor:pointer;pointer-events:auto}";

const SecurecallRequestSecure$1 = /*@__PURE__*/ proxyCustomElement(class SecurecallRequestSecure extends H {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.__attachShadow();
        this.secureFieldResetEvent = createEvent(this, "secureFieldResetEvent");
    }
    fieldName;
    config;
    secureFieldResetEvent;
    log = new Logger('SecurecallRequestSecure');
    handleClick(ev) {
        ev.preventDefault();
        this.log.debug("handleClick: field", this.fieldName, "clicked");
        this.config.valid = false;
        this.secureFieldResetEvent.emit(this.fieldName);
    }
    render() {
        return (h(Host, { key: '19c03033ea68d8e9c8cd76cd4019f6b2c351c723' }, h("div", { key: 'b177eb2e8580ccfb278f346bfc91f33eb24c304f', class: "field-container" }, h("label", { key: '0631170c01df76dc3dbe3a2732941a1674ae9fa0', class: "custom-label", htmlFor: this.fieldName }, this.config["label"], ": ", this.config.active), h("input", { key: 'b420fcf15ebcc6a0a84019b3b99bd471cd1bde79', type: "text", class: `custom-input ${this.config.active ? 'active' : 'inactive'}`, id: this.fieldName, readOnly: true, placeholder: this.config.value }), h("div", { key: 'a649497776c0cf4b4ad58d39d2591b244391cc65', class: this.config.valid ? 'field-valid' : 'field-invalid', onClick: (ev) => this.handleClick(ev) }))));
    }
    static get style() { return securecallRequestSecureCss; }
}, [257, "securecall-request-secure", {
        "fieldName": [1, "field-name"],
        "config": [16]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["securecall-request-secure"];
    components.forEach(tagName => { switch (tagName) {
        case "securecall-request-secure":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, SecurecallRequestSecure$1);
            }
            break;
    } });
}

const SecurecallRequestSecure = SecurecallRequestSecure$1;
const defineCustomElement = defineCustomElement$1;

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

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