import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-D16h8pzh.js';
import { VerdocsEndpoint, getEnvelope } from '@verdocs/js-sdk';
import { S as SDKError } from './p-C1sRVZWv.js';
import { S as Store } from './p-DmsV595e.js';
import { d as defineCustomElement$3 } from './p-BNrp2UP2.js';
import { d as defineCustomElement$2 } from './p-BGZ_owBm.js';
import { d as defineCustomElement$1 } from './p-C_SISdpZ.js';

const verdocsEnvelopeUpdateRecipientCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-envelope-update-recipient{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:100000;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-family:\"Inter\", \"Barlow\", sans-serif;background-color:rgba(0, 0, 0, 0.4980392157)}verdocs-envelope-update-recipient .summary-content{width:600px;display:-ms-flexbox;display:flex;max-width:90%;font-size:18px;-ms-flex:0 0 600px;flex:0 0 600px;border-radius:6px;background:#ffffff;-ms-flex-direction:column;flex-direction:column;padding:30px 20px 20px}verdocs-envelope-update-recipient .summary-content .summary-title{font-size:20px;font-weight:700;margin:0 0 10px 0;color:#33364b}verdocs-envelope-update-recipient .fields{display:-ms-flexbox;display:flex;color:#33364b;margin:8px 0 24px 0;-ms-flex-direction:column;flex-direction:column}verdocs-envelope-update-recipient .fields .field{margin:2px 0}verdocs-envelope-update-recipient .fields .note{font-style:italic;font-size:14px}verdocs-envelope-update-recipient .fields .fields-row{gap:12px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-envelope-update-recipient .fields .fields-row>*{-ms-flex:1;flex:1}verdocs-envelope-update-recipient .fields .role-name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:14px;font-weight:600;margin:0 0 8px 0;color:#092c4c}verdocs-envelope-update-recipient .fields textarea{width:100%;font-size:16px;padding:5px 7px;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #707ae5;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-envelope-update-recipient .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:10px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-envelope-update-recipient .buttons verdocs-button{-ms-flex:0 0 120px;flex:0 0 120px;margin-left:10px;white-space:nowrap}verdocs-envelope-update-recipient .buttons verdocs-button button{width:100%}";

const VerdocsEnvelopeUpdateRecipient = /*@__PURE__*/ proxyCustomElement(class VerdocsEnvelopeUpdateRecipient extends H {
    constructor() {
        super();
        this.__registerHost();
        this.next = createEvent(this, "next");
        this.sdkError = createEvent(this, "sdkError");
        this.envelopeListenerId = null;
        /**
         * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
         */
        this.endpoint = VerdocsEndpoint.getDefault();
        /**
         * The envelope ID to edit.
         */
        this.envelopeId = '';
        /**
         * The role to load.
         */
        this.roleName = '';
        this.gettingLink = true;
        this.link = '';
        this.loading = true;
        this.envelope = null;
        this.originalRecipient = null;
        this.updatedRecipient = null;
    }
    async componentWillLoad() {
        var _a, _b, _c;
        try {
            this.endpoint.loadSession();
            if (!this.envelopeId) {
                console.log(`[UPDATE_RECIPIENT] Missing required envelope ID ${this.envelopeId}`);
                return;
            }
            if (!this.endpoint.session) {
                console.log('[UPDATE_RECIPIENT] Unable to start session, must be authenticated');
                return;
            }
            this.listenToEnvelope();
        }
        catch (e) {
            console.log('[UPDATE_RECIPIENT] Error loading envelope', e);
            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
        }
    }
    disconnectedCallback() {
        this.unlistenToEnvelope();
    }
    async listenToEnvelope() {
        console.log('[UPDATE_RECIPIENT] Loading envelope', this.envelopeId);
        this.unlistenToEnvelope();
        Store.subscribe('envelopes', this.envelopeId, () => getEnvelope(this.endpoint, this.envelopeId), false, (envelope) => {
            var _a;
            this.envelope = envelope;
            this.loading = false;
            const recipient = (((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.recipients) || []).find(r => r.role_name === this.roleName);
            this.originalRecipient = recipient;
            this.updatedRecipient = { ...recipient };
        });
    }
    unlistenToEnvelope() {
        if (this.envelopeListenerId) {
            Store.store.delListener(this.envelopeListenerId);
            this.envelopeListenerId = null;
        }
    }
    handleSave(e) {
        var _a;
        e.preventDefault();
        (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({ action: 'save', originalRecipient: this.originalRecipient, updatedRecipient: this.updatedRecipient });
    }
    handleCancel(e) {
        var _a;
        e.preventDefault();
        (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({ action: 'cancel', originalRecipient: this.originalRecipient, updatedRecipient: this.updatedRecipient });
    }
    render() {
        if (this.loading || !this.updatedRecipient) {
            return h(Host, null);
        }
        return (h(Host, null, h("div", { class: "summary-content" }, h("h1", { class: "summary-title" }, "Update Recipient"), h("div", { class: "summary-rows" }, h("div", { class: "fields" }, h("div", { class: "role-name" }, this.updatedRecipient.role_name), h("div", { class: "field" }, h("div", { class: "fields-row" }, h("verdocs-text-input", { value: this.updatedRecipient.first_name, placeholder: "First Name...", onInput: (e) => (this.updatedRecipient.first_name = e.target.value) }), h("verdocs-text-input", { value: this.updatedRecipient.last_name, placeholder: "Last Name...", onInput: (e) => (this.updatedRecipient.last_name = e.target.value) }))), h("div", { class: "field" }, h("verdocs-text-input", { type: "email", value: this.updatedRecipient.email, placeholder: "Email Address...", onInput: (e) => (this.updatedRecipient.email = e.target.value) })), h("div", { class: "field" }, h("verdocs-text-input", { type: "tel", value: this.updatedRecipient.phone, placeholder: "Phone Number...", onInput: (e) => (this.updatedRecipient.phone = e.target.value) })), h("div", { class: "field" }, h("textarea", { id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", "data-lpignore": "true", autocomplete: "blocked", placeholder: "Optional message to include in invitation...", onInput: (e) => (this.updatedRecipient.message = e.target.value) }, this.updatedRecipient.message)), h("div", { class: "note" }, "NOTE: If you change the recipient's email address or invite message, they will receive a new invitation to sign the envelope. This will also reset their status if they have previously declined to sign."))), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", size: "small", label: "Cancel", onClick: e => this.handleCancel(e) }), h("verdocs-button", { size: "small", label: "Save", onClick: e => this.handleSave(e) })))));
    }
    static get style() { return verdocsEnvelopeUpdateRecipientCss; }
}, [256, "verdocs-envelope-update-recipient", {
        "endpoint": [16],
        "envelopeId": [1, "envelope-id"],
        "roleName": [1, "role-name"],
        "isOpen": [32],
        "gettingLink": [32],
        "link": [32],
        "loading": [32],
        "envelope": [32],
        "originalRecipient": [32],
        "updatedRecipient": [32]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["verdocs-envelope-update-recipient", "verdocs-button", "verdocs-help-icon", "verdocs-text-input"];
    components.forEach(tagName => { switch (tagName) {
        case "verdocs-envelope-update-recipient":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, VerdocsEnvelopeUpdateRecipient);
            }
            break;
        case "verdocs-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "verdocs-help-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "verdocs-text-input":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { VerdocsEnvelopeUpdateRecipient as V, defineCustomElement as d };
//# sourceMappingURL=p-DB6zetGN.js.map

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