@securecall/client-component
Version:
SecureCall Core Web Component
51 lines (46 loc) • 4.76 kB
JavaScript
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-XmE3deEH.js';
import { L as Logger } from './p-CgjdSc_8.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}.validity{background-color:var(--theme-primary-color);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z'/%3E%3Cpath d='M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z'/%3E%3C/svg%3E\");mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z'/%3E%3Cpath d='M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z'/%3E%3C/svg%3E\");height:1.0rem;width:1.0rem;cursor:pointer;pointer-events:auto;flex-shrink:0}.validity.valid{background-color:var(--theme-primary-color);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E\");mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E\");height:1.0rem;width:1.0rem;cursor:pointer;flex-shrink:0}.validity.none{background-color:transparent;height:1.0rem;width:1.0rem;flex-shrink:0}";
const SecurecallRequestSecure$1 = /*@__PURE__*/ proxyCustomElement(class SecurecallRequestSecure extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.secureFieldResetEvent = createEvent(this, "secureFieldResetEvent");
}
fieldName;
config;
secureFieldResetEvent;
log = 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: '6c1684c01d4984c7cd27d7fbb3fe8892c2880036' }, h("div", { key: '0e967520c9d92f479f49222bebf20271fb42f221', class: "field-container" }, h("label", { key: '69b04cd792a1c2b882910ad9e765cccbe76bc664', class: "custom-label", htmlFor: this.fieldName }, this.config["label"], ": ", this.config.active), h("input", { key: '30dd1112269f7fb99a587544c5f49bdc28c1cbbb', type: "text", class: `custom-input ${this.config.active ? 'active' : 'inactive'}`, id: this.fieldName, readOnly: true, placeholder: this.config.value }), h("div", { key: '16565d6b1ee2853cd0494b198103b2e761970650', class: { validity: true, valid: this.config.valid }, 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