@securecall/client-component/dist/components/p-CZJr4EDF.js

SecureCall Core Web Component

import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h, d as Host } from './p-0D76SiW-.js';
import { L as Logger } from './p-By6Qn8nU.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 = /*@__PURE__*/ proxyCustomElement(class SecurecallTransaction extends H {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.__attachShadow();
        this.submitTransactionEvent = createEvent(this, "submitTransactionEvent");
    }
    fieldData;
    transactionToggle;
    isFormValid = false;
    submitTransactionEvent;
    log = new 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: '5e4de6a8b6a6ecdd368865d67e162c84f53c3e2d' }, h("form", { key: '7a51fea141bb40e0a29c966b42778b320df6a61b', class: "component-form" }, this.renderFields(), this.renderButtons())));
    }
    static get watchers() { return {
        "transactionToggle": ["transactionTogglePropHandler"],
        "fieldData": ["fieldDataPropHandler"]
    }; }
    static get style() { return securecallTransactionCss; }
}, [257, "securecall-transaction", {
        "fieldData": [16],
        "transactionToggle": [4, "transaction-toggle"],
        "isFormValid": [32]
    }, [[0, "isValidEvent", "handleIsValidEvent"], [0, "requestRadioChangeEvent", "handleRadioChange"]], {
        "transactionToggle": ["transactionTogglePropHandler"],
        "fieldData": ["fieldDataPropHandler"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["securecall-transaction"];
    components.forEach(tagName => { switch (tagName) {
        case "securecall-transaction":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, SecurecallTransaction);
            }
            break;
    } });
}

export { SecurecallTransaction as S, defineCustomElement as d };
//# sourceMappingURL=p-CZJr4EDF.js.map

//# sourceMappingURL=p-CZJr4EDF.js.map