@securecall/client-component/dist/esm/securecall-transaction.entry.js

SecureCall Core Web Component

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

const securecallTransactionCss = ":host{display:block}.component-form{display:grid;flex-direction:column;gap:0.5rem}.component-field-container{display:grid;grid-template-columns:10em 1fr 20px;align-items:center;gap:1rem;margin-top:1rem}.component-button{padding:0.75rem 1.5rem;background-color:var(--theme-button-color, #007bff);color:var(--theme-primary-color, #fff);border:none;border-radius:4px;cursor:pointer;font-size:1rem;width:fit-content}.component-button:disabled{background-color:var(--theme-button-color-disabled, #ccc);cursor:not-allowed}.component-button:hover:not(:disabled){background-color:var(--theme-button-color-hover, #0056b3)}securecall-request-radio,securecall-request-currency,securecall-request-string,securecall-request-secure-pan,securecall-request-secure{display:block;width:100%}.field-container{display:grid;grid-template-columns:10em 1fr 20px;align-items:center;gap:1rem}.custom-label{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 SecurecallTransaction = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.submitTransactionEvent = createEvent(this, "submitTransactionEvent");
    }
    fieldData;
    transactionToggle;
    isFormValid = false;
    submitTransactionEvent;
    log = Logger('SecurecallTransaction');
    transactionTogglePropHandler(newValue, oldValue) {
        if (newValue !== oldValue) {
            this.updateFormValidity();
        }
    }
    fieldDataPropHandler(newValue, oldValue) {
        this.log.debug('fieldDataPropHandler: newValue:', newValue, 'oldValue:', oldValue);
        if (newValue !== oldValue) {
            this.updateFormValidity();
        }
    }
    handleSubmit() {
        this.log.debug('handleSubmit:', this, this.submitTransactionEvent);
        this.submitTransactionEvent.emit(this.fieldData.asAPITransaction());
    }
    handleIsValidEvent(event) {
        const { field, valid, value } = event.detail;
        this.log.debug('isValidEvent: field:', field, 'valid:', valid, 'value:', value);
        if (field && this.fieldData.transaction[field]) {
            this.fieldData.transaction[field].valid = valid;
            this.fieldData.transaction[field].value = value;
            this.updateFormValidity();
        }
    }
    async handleRadioChange(event) {
        this.log.debug("requestRadioChangeEvent: " + event.detail);
        // this.isFormValid = false;
        const { field, value } = event.detail;
        let fields = this.fieldData.calculatedFields();
        Object.entries(fields[field]['hideRelatedFields']?.[value] || {}).forEach(([relatedField, val]) => {
            let f = this.fieldData.transaction[relatedField];
            if (f) {
                f['hidden'] = val;
            }
        });
        forceUpdate(this);
    }
    updateFormValidity() {
        const invalidFields = Object.entries(this.fieldData.calculatedFields())
            .filter(([_fieldName, field]) => !field.hidden && !field.valid)
            .map(([fieldName]) => fieldName);
        this.isFormValid = invalidFields.length === 0;
        this.log.debug('updateFormValidity: isFormValid:', this.isFormValid, 'invalidFields:', JSON.stringify(invalidFields));
    }
    ////////////////////////////
    // Render Methods
    ////////////////////////////
    renderFields() {
        this.log.debug("renderFields: fieldData=", this.fieldData);
        const fields = this.fieldData?.asComponentChildren() || [];
        this.log.debug("renderFields: fields=", fields);
        return fields.map((field) => {
            const Tag = 'securecall-request-' + field.component;
            return h(Tag, { id: field.name, "field-name": field.name, config: field.config });
        });
    }
    renderButtons() {
        return (h("div", { class: "component-field-container" }, h("div", null), h("button", { type: "button", class: "component-button", onClick: () => this.handleSubmit(), disabled: !this.isFormValid }, "Submit Transaction")));
    }
    render() {
        return (h(Host, { key: '701a12cd451094313dd7dbf6f1ca30d08384276d' }, h("form", { key: 'd4fc5c577ab01f306350f3e02fff6e60340d8c98', class: "component-form" }, this.renderFields(), this.renderButtons())));
    }
    static get watchers() { return {
        "transactionToggle": ["transactionTogglePropHandler"],
        "fieldData": ["fieldDataPropHandler"]
    }; }
};
SecurecallTransaction.style = securecallTransactionCss;

export { SecurecallTransaction as securecall_transaction };
//# sourceMappingURL=securecall-transaction.entry.js.map

//# sourceMappingURL=securecall-transaction.entry.js.map