import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-D16h8pzh.js';
import { getRGBA } from '@verdocs/js-sdk';
import { S as SettingsIcon } from './p-7LXbcjVz.js';
import { S as Store } from './p-DmsV595e.js';
import { d as defineCustomElement$a } from './p-BNrp2UP2.js';
import { d as defineCustomElement$9 } from './p-wYGYhfrp.js';
import { d as defineCustomElement$8 } from './p-DsCKNQPC.js';
import { d as defineCustomElement$7 } from './p-BGZ_owBm.js';
import { d as defineCustomElement$6 } from './p-Bv-L0hsU.js';
import { d as defineCustomElement$5 } from './p-Boia1Nbz.js';
import { d as defineCustomElement$4 } from './p-Cy-AXBKH.js';
import { d as defineCustomElement$3 } from './p-vCuIwe1D.js';
import { d as defineCustomElement$2 } from './p-C_SISdpZ.js';

const verdocsFieldPaymentCss = "@-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-field-payment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:24px;height:24px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;border:1px solid #cfa;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-payment.disabled{opacity:0.5}verdocs-field-payment button,verdocs-field-payment div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-payment button{color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-payment button.hide{display:none}verdocs-field-payment input{float:left;font-family:Arial, sans-serif}verdocs-field-payment select{position:absolute;font-family:Arial, sans-serif;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none}verdocs-field-payment .frame{width:100%;height:100%;background-size:contain;text-align:left}verdocs-field-payment .frame img{position:absolute;height:auto;width:100%}verdocs-field-payment.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-payment .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-payment .settings-icon svg{fill:#707ae5}verdocs-field-payment .settings-icon:hover{opacity:1}@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)}}";

const VerdocsFieldPayment$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldPayment extends H {
    constructor() {
        super();
        this.__registerHost();
        this.settingsChanged = createEvent(this, "settingsChanged");
        this.deleted = createEvent(this, "deleted");
        /**
         * Fields may be attached to templates or envelopes, but only template fields may be edited.
         */
        this.source = 'template';
        /**
         * The source template or envelope ID the field is found in.
         */
        this.sourceid = '';
        /**
         * The name of the field to display.
         */
        this.fieldname = '';
        /**
         * Override the field's settings. This is intended to be used during signing when fields are being
         * mutated.
         */
        this.field = null;
        /**
         * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled.
         */
        this.disabled = false;
        /**
         * If set, the field is considered "done" and is drawn in a display-final-value state.
         */
        this.done = false;
        /**
         * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be
         * changed, so it should typically only be enabled in the Builder.
         */
        this.editable = false;
        /**
         * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.
         */
        this.moveable = false;
        /**
         * If set, the field will be be scaled horizontally by this factor.
         */
        this.xscale = 1;
        /**
         * If set, the field will be be scaled vertically by this factor.
         */
        this.yscale = 1;
        /**
         * The page the field is on
         */
        this.pagenumber = 1;
        this.showingProperties = false;
        this.focused = false;
        this.signed = false;
        this.signatureUrl = '';
        /**
         * If set, the field will be colored using this index value to select the background color.
         */
        this.roleindex = 0;
    }
    componentWillLoad() {
        // Load validators
        // Load fields
        // Get role names
        if (this.recipients && this.recipients.length > 0) {
            const preparer = this.recipients.find((r) => r.type === 'preparer');
            console.log('Found preparer', preparer);
            if (preparer) {
                this.preparedMessage = `Prepared by ${preparer['full_name']}`;
            }
        }
    }
    async focusField() {
        // We don't have a visible input that we can actually focus on, so we fake it
        this.focused = true;
        setTimeout(() => {
            this.focused = false;
        }, 500);
    }
    async showSettingsPanel() {
        const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
        if (settingsPanel && settingsPanel.showPanel) {
            settingsPanel.showPanel();
        }
    }
    async hideSettingsPanel() {
        const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
        if (settingsPanel && settingsPanel.hidePanel) {
            settingsPanel.hidePanel();
        }
    }
    render() {
        const { source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
        const { index, field } = Store.getField(source, sourceid, fieldname, this.field);
        const backgroundColor = getRGBA(index);
        if (!field) {
            return h(Fragment, null);
        }
        if (done) {
            return h(Host, { class: { done } }, "$\u2713");
        }
        return (h(Host, { class: { focused, disabled }, style: { backgroundColor } }, h("button", { class: { hide: this.signed } }, "$"), this.signed ? h("div", { class: "frame" }) : h("div", { style: { display: 'none' } }), h("img", { width: "100%", height: "100%", src: this.signatureUrl, alt: "Payment Icon" }), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                e.stopPropagation();
                this.showingProperties = !this.showingProperties;
            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: sourceid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
                var _a;
                (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname });
                return this.hideSettingsPanel();
            }, onSettingsChanged: e => {
                var _a;
                (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
                return this.hideSettingsPanel();
            }, helpText: 'Check boxes allow the user to select one or more (non-exclusive) options.' })))))));
    }
    static get style() { return verdocsFieldPaymentCss; }
}, [256, "verdocs-field-payment", {
        "source": [513],
        "sourceid": [513],
        "fieldname": [513],
        "field": [16],
        "disabled": [516],
        "done": [516],
        "editable": [516],
        "moveable": [516],
        "xscale": [514],
        "yscale": [514],
        "pagenumber": [514],
        "fields": [16],
        "pageNum": [2, "page-num"],
        "roleName": [1, "role-name"],
        "fieldId": [1, "field-id"],
        "recipients": [8],
        "selectedRoleName": [1, "selected-role-name"],
        "pdfPages": [16, "pdf-pages"],
        "currentSignature": [1, "current-signature"],
        "currentSignatureId": [1, "current-signature-id"],
        "currentInitial": [1, "current-initial"],
        "currentInitialId": [1, "current-initial-id"],
        "signed": [4],
        "roleindex": [2],
        "showingProperties": [32],
        "focused": [32],
        "preparedMessage": [32],
        "signatureUrl": [32],
        "focusField": [64],
        "showSettingsPanel": [64],
        "hideSettingsPanel": [64]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["verdocs-field-payment", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-loader", "verdocs-portal", "verdocs-select-input", "verdocs-template-field-properties", "verdocs-text-input"];
    components.forEach(tagName => { switch (tagName) {
        case "verdocs-field-payment":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, VerdocsFieldPayment$1);
            }
            break;
        case "verdocs-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$a();
            }
            break;
        case "verdocs-checkbox":
            if (!customElements.get(tagName)) {
                defineCustomElement$9();
            }
            break;
        case "verdocs-component-error":
            if (!customElements.get(tagName)) {
                defineCustomElement$8();
            }
            break;
        case "verdocs-help-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$7();
            }
            break;
        case "verdocs-loader":
            if (!customElements.get(tagName)) {
                defineCustomElement$6();
            }
            break;
        case "verdocs-portal":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "verdocs-select-input":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "verdocs-template-field-properties":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "verdocs-text-input":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const VerdocsFieldPayment = VerdocsFieldPayment$1;
const defineCustomElement = defineCustomElement$1;

export { VerdocsFieldPayment, defineCustomElement };
//# sourceMappingURL=verdocs-field-payment.js.map

//# sourceMappingURL=verdocs-field-payment.js.map