@securecall/client-component
Version:
SecureCall Core Web Component
87 lines (82 loc) • 3.91 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 securecallRequestCurrencyCss = ":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 SecurecallRequestCurrency$1 = /*@__PURE__*/ proxyCustomElement(class SecurecallRequestCurrency extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.isValidEvent = createEvent(this, "isValidEvent");
}
fieldName;
config;
isValidEvent;
log = Logger('SecurecallRequestCurrency');
get value() {
return this.config.value;
}
set value(value) {
if (this.config.value !== value) {
this.config.value = value;
this.handleLocalStorageChange();
}
}
handleConfigChange(newConfig, oldConfig) {
if (oldConfig.value !== newConfig.value) {
this.value = newConfig.value;
this.validateChange(this.value);
}
else if (oldConfig.valid !== newConfig.valid) {
this.validateChange(this.value);
}
}
componentWillLoad() {
this.validateChange(this.value);
}
handleLocalStorageChange() {
this.log.debug("handleChangeFromLocalStorage: string change:", this.value);
this.validateChange(this.value);
}
handleChange(ev) {
this.log.debug("handleChange: string change:", ev.target.value);
this.validateChange(ev.target.value);
}
validateChange(input) {
const num = parseFloat(input);
const isValidCurrency = /^(\d+(\.\d{1,2})?)?$/.test(input);
const valid = !isNaN(num) && num !== 0 && isValidCurrency
&& num >= (this.config.min || 0.01)
&& num <= (this.config.max || 99999.99);
this.isValidEvent.emit({ field: this.fieldName, valid: valid, value: input });
}
render() {
return (h(Host, { key: '3fe918e381fc22f1f64259dc341e602bc96b8828' }, h("div", { key: '460b5686e0ad353d695b8a1e0e1916b20757621c', class: "field-container" }, h("label", { key: '2391480757aec9e1644da01fe66af61c2ccf4c8b', class: "custom-label", htmlFor: this.fieldName }, this.config.label, ":"), h("input", { key: '087aca1b62588daee0da3c745aeaa5d9370093ad', 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: '1873c92d1c2c232b0a63782e52c0845311dd64e7', class: "validity none" }))));
}
static get watchers() { return {
"config": ["handleConfigChange"]
}; }
static get style() { return securecallRequestCurrencyCss; }
}, [257, "securecall-request-currency", {
"fieldName": [1, "field-name"],
"config": [1040]
}, undefined, {
"config": ["handleConfigChange"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["securecall-request-currency"];
components.forEach(tagName => { switch (tagName) {
case "securecall-request-currency":
if (!customElements.get(tagName)) {
customElements.define(tagName, SecurecallRequestCurrency$1);
}
break;
} });
}
const SecurecallRequestCurrency = SecurecallRequestCurrency$1;
const defineCustomElement = defineCustomElement$1;
export { SecurecallRequestCurrency, defineCustomElement };
//# sourceMappingURL=securecall-request-currency.js.map
//# sourceMappingURL=securecall-request-currency.js.map