@securecall/client-component
Version:
SecureCall Core Web Component
68 lines (63 loc) • 3.56 kB
JavaScript
'use strict';
var index = require('./index-DcU5riY9.js');
var logger = require('./logger-MkCqSOk_.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}.field-invalid{background-color:var(--theme-primary-color);-webkit-mask:var(--icon-invalid);mask:var(--icon-invalid);height:1.0rem;width:1.0rem}.field-valid{background-color:var(--theme-primary-color);-webkit-mask:var(--icon-valid);mask:var(--icon-valid);height:1.0rem;width:1.0rem}";
const SecurecallRequestCurrency = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.isValidEvent = index.createEvent(this, "isValidEvent");
}
fieldName;
config;
isValidEvent;
log = new logger.Logger('SecurecallRequestCurrency');
get value() {
return this.config.value;
}
set value(value) {
if (this.config.value !== value) {
this.config.value = value;
this.validateChange();
}
}
handleConfigChange(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("handleChange: string change:", ev.target.value);
this.value = ev.target.value;
}
validateChange() {
const input = this.value;
const num = parseFloat(input);
const isValidCurrency = /^(\d+(\.\d{1,2})?)?$/.test(input);
const isValid = !isNaN(num) && num !== 0 && isValidCurrency
&& num >= (this.config.min || 0.01)
&& num <= (this.config.max || 99999.99);
this.log.debug(this.fieldName + ": validateChange: string:", input, "isValid:", isValid, 'config.valid', this.config.valid);
if (this.config.valid !== isValid) {
this.config.valid = isValid;
index.forceUpdate(this);
}
this.isValidEvent.emit({ field: this.fieldName, valid: isValid, value: input });
}
render() {
return (index.h(index.Host, { key: 'e66b2d00594641d78171b84eeaf892cd24421a54' }, index.h("div", { key: '809d5891d05f4389b99b31188772a5e9467c8259', class: "field-container" }, index.h("label", { key: '4d600c4ab2bd2d60eb67d1e948c87acf8a377ddb', class: "custom-label", htmlFor: this.fieldName }, this.config.label, ":"), index.h("input", { key: '156e37b7333b64567ae0b9d75b19ef0275af633e', 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) }), index.h("div", { key: '8d027ba0bc68e9ad3fb6d8056520205b2e149b5d', class: this.config.valid ? 'field-valid' : 'field-invalid' }))));
}
static get watchers() { return {
"config": ["handleConfigChange"]
}; }
};
SecurecallRequestCurrency.style = securecallRequestCurrencyCss;
exports.securecall_request_currency = SecurecallRequestCurrency;
//# sourceMappingURL=securecall-request-currency.entry.cjs.js.map