import { r as registerInstance, c as createEvent, h, H as Host } from './index-C1erT8T2.js';
import { VerdocsEndpoint, getTemplate, updateTemplateRole, deleteTemplateRole, isValidEmail } from '@verdocs/js-sdk';
import { S as SDKError } from './errors-C1sRVZWv.js';
import { S as Store } from './Datastore-DoY8Nb0Y.js';

const verdocsMenuPanelCss = "@-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-menu-panel-overlay{top:0;left:0;width:100%;height:100%;z-index:10000;position:fixed;background-color:rgba(0, 0, 0, 0.4980392157)}#verdocs-menu-panel{opacity:0;z-index:10001;position:fixed;overflow-y:scroll;background-color:#ffffff;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-animation:showVerdocsMenuPanel 0.35s;-webkit-animation-fill-mode:forwards}@-webkit-keyframes showVerdocsMenuPanel{0%{opacity:0;right:-300px}100%{right:0;opacity:1}}";

const VerdocsMenuPanel = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.close = createEvent(this, "close");
        this.moved = false;
        this.overlayId = `verdocs-menu-panel-overlay`;
        this.panelId = `verdocs-menu-panel`;
        /**
         * Which side of the screen to place the panel.
         */
        this.side = 'right';
        /**
         * Whether to show an overlay over the rest of the page.
         */
        this.overlay = true;
        /**
         * The width of the panel.
         */
        this.width = 300;
    }
    handleClick(e) {
        var _a;
        if (!this.element.contains(e.target)) {
            this.hide();
            (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
        }
    }
    componentWillLoad() {
        this.hide();
        if (this.overlay) {
            this.portal = document.createElement('div');
            this.portal.setAttribute('id', this.overlayId);
            document.body.append(this.portal);
        }
        this.portal = document.createElement('div');
        this.portal.setAttribute('id', this.panelId);
        this.portal.style.top = `0px`;
        this.portal.style.bottom = `0px`;
        this.portal.style.width = `${this.width}px`;
        if (this.side === 'left') {
            this.portal.style.left = `0px`;
        }
        else {
            this.portal.style.right = `0px`;
        }
        document.body.append(this.portal);
    }
    componentDidLoad() {
        this.portal.appendChild(this.element);
    }
    disconnectedCallback() {
        this.moved ? this.portal.remove() : (this.moved = true);
    }
    hide() {
        var _a, _b;
        (_a = document.getElementById(this.overlayId)) === null || _a === void 0 ? void 0 : _a.remove();
        (_b = document.getElementById(this.panelId)) === null || _b === void 0 ? void 0 : _b.remove();
    }
    render() {
        return (h(Host, { key: '620b2d96ba41fcd87803da3c3d36436f17da02fd', ref: el => (this.element = el) }, h("slot", { key: '85ac66ee22cf9a5717f4fe5de2644c96c14afd65' })));
    }
};
VerdocsMenuPanel.style = verdocsMenuPanelCss;

const verdocsTemplateRolePropertiesCss = "@-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-template-role-properties{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-template-role-properties div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-role-properties .heading{display:-ms-flexbox;display:flex;font-size:20px;font-weight:500;-ms-flex-direction:row;flex-direction:row}verdocs-template-role-properties .buttons{display:-ms-flexbox;display:flex;margin-top:10px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}verdocs-template-role-properties .buttons verdocs-button{margin-left:16px}verdocs-template-role-properties form{gap:15px;padding:20px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-role-properties form .instructions{margin:7px 0 0 0;font-size:12px;font-style:italic}verdocs-template-role-properties form .input-label{display:block;font-size:14px;-ms-flex:0 0 100px;flex:0 0 100px;font-weight:700;margin:0 0 4px 0;color:#555570}verdocs-template-role-properties form .first-last{gap:15px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-template-role-properties form verdocs-help-icon{-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-role-properties verdocs-select-input label{display:block}verdocs-template-role-properties verdocs-text-input{margin:0}verdocs-template-role-properties verdocs-text-input label{display:block}verdocs-template-role-properties verdocs-text-input .input-label{-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-role-properties verdocs-text-input input{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-role-properties verdocs-text-input verdocs-text-input{margin:0}verdocs-template-role-properties .checkbox-wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-role-properties .delete-button{height:34px;display:-ms-flexbox;display:flex;padding:0 6px;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-role-properties .delete-button svg{width:24px;height:24px}verdocs-template-role-properties .delete-button:active{background:#f3f3f3}";

const TrashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#a50021"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>`;
const VerdocsTemplateRoleProperties = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.close = createEvent(this, "close");
        this.delete = createEvent(this, "delete");
        this.sdkError = createEvent(this, "sdkError");
        this.templateListenerId = null;
        /**
         * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
         */
        this.endpoint = VerdocsEndpoint.getDefault();
        /**
         * The template ID to edit.
         */
        this.templateId = '';
        /**
         * The role name to edit.
         */
        this.roleName = '';
        this.dirty = false;
        this.saving = false;
        this.name = '';
        this.type = 'signer';
        this.first_name = '';
        this.last_name = '';
        this.email = '';
        this.phone = '';
        this.delegator = false;
        this.loading = true;
        this.template = null;
    }
    async componentWillLoad() {
        var _a, _b, _c;
        try {
            this.endpoint.loadSession();
            if (!this.templateId) {
                console.log(`[ROLES] Missing required template ID ${this.templateId}`);
                return;
            }
            if (!this.endpoint.session) {
                console.log('[ROLES] Unable to start builder session, must be authenticated');
                return;
            }
            this.listenToTemplate();
        }
        catch (e) {
            console.log('[ROLES Error with preview session', 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.unlistenToTemplate();
    }
    async listenToTemplate() {
        console.log('[ROLES] Loading tempate', this.templateId);
        this.unlistenToTemplate();
        Store.subscribe('templates', this.templateId, () => getTemplate(this.endpoint, this.templateId), false, (template) => {
            var _a;
            console.log('[BUILD] Template Updated', template);
            this.template = template;
            this.loading = false;
            const editingRole = (_a = this.template) === null || _a === void 0 ? void 0 : _a.roles.find(role => role.name === this.roleName);
            if (editingRole) {
                this.name = editingRole.name;
                this.type = editingRole.type;
                this.first_name = editingRole.first_name;
                this.last_name = editingRole.last_name;
                this.email = editingRole.email;
                this.phone = editingRole.phone;
                this.delegator = editingRole.delegator;
                console.log('[ROLES] Editing role', editingRole);
            }
        });
    }
    unlistenToTemplate() {
        if (this.templateListenerId) {
            Store.store.delListener(this.templateListenerId);
            this.templateListenerId = null;
        }
    }
    handleCancel(e) {
        var _a, _b;
        e.stopPropagation();
        const editingRole = (_a = this.template) === null || _a === void 0 ? void 0 : _a.roles.find(role => role.name === this.roleName);
        if (editingRole) {
            this.name = editingRole.name;
            this.type = editingRole.type;
            this.first_name = editingRole.first_name;
            this.last_name = editingRole.last_name;
            this.email = editingRole.email;
            this.phone = editingRole.phone;
            this.delegator = editingRole.delegator;
        }
        this.dirty = false;
        (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
    }
    async handleSave(e) {
        e.stopPropagation();
        this.saving = true;
        updateTemplateRole(this.endpoint, this.templateId, this.roleName, {
            name: this.name,
            type: this.type,
            first_name: this.first_name,
            last_name: this.last_name,
            email: this.email,
            phone: this.phone,
            delegator: this.delegator,
        })
            .then(async (r) => {
            var _a;
            console.log('[ROLES] Update result', r);
            this.saving = false;
            this.dirty = false;
            const newTemplate = JSON.parse(JSON.stringify(this.template));
            const roleIndex = newTemplate.roles.findIndex(role => role.name === this.roleName);
            if (roleIndex > -1) {
                newTemplate.roles[roleIndex] = r;
            }
            Store.updateTemplate(this.templateId, newTemplate);
            (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
        })
            .catch(e => {
            console.log('[ROLES Update error', e);
            this.saving = false;
        });
    }
    async handleDelete(e) {
        e.stopPropagation();
        if (window.confirm('Are you sure you wish to remove this role? All associated fields will be removed as well. This action cannot be undone.')) {
            deleteTemplateRole(this.endpoint, this.templateId, this.roleName)
                .then(() => {
                var _a, _b;
                const newTemplate = JSON.parse(JSON.stringify(this.template));
                newTemplate.roles = newTemplate.roles.filter(role => role.name !== this.roleName);
                Store.getTemplate(this.endpoint, this.templateId, true);
                // Store.updateTemplate(this.templateId, newTemplate);
                (_a = this.delete) === null || _a === void 0 ? void 0 : _a.emit({ templateId: this.templateId, roleName: this.roleName });
                (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
            })
                .catch(e => {
                console.log('[ROLES Deletion error', e);
            });
        }
    }
    render() {
        var _a;
        const hasFields = (((_a = this.template) === null || _a === void 0 ? void 0 : _a.fields) || []).some(field => field.role_name === this.roleName);
        // Either all three should be empty, or all three need to be filled
        const isValid = (!this.email && !this.first_name && !this.last_name) || (isValidEmail(this.email) && !!this.first_name && !!this.last_name);
        return (h(Host, { key: '0cb90773a405b842fd65dc842bd222393327bfda' }, h("form", { key: '5a2f59d5e9453a8e0a28e281a5e8e00e4ff48734', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: '28e488540cbc43fd60f18d7afe22fdd83baa01d6' }, h("verdocs-text-input", { key: 'a81752032a51aafc103a3c81f359700279800fcc', id: "verdocs-role-name", label: "Role Name (Must be unique)", value: this.name, autocomplete: "off", disabled: hasFields, placeholder: "Role Name...", onInput: (e) => {
                this.name = e.target.value;
                this.dirty = true;
            } }), hasFields && h("div", { key: 'b45732e234d85c3f0f8237dc4935fc7dd3a1be8f', class: "instructions" }, "This role has fields assigned and can no longer be renamed.")), h("div", { key: '0b35b31d334f8bec6e76159c34560e8c3655f449' }, h("div", { key: '331e86e0dfe93b4ac521cce08e6201c824f58964', class: "input-label" }, "Type:"), h("verdocs-select-input", { key: '745cd90f3a39ab8cd34bfd391fb534206e640944', value: this.type, options: [
                { label: 'Signer', value: 'signer' },
                { label: 'CC', value: 'cc' },
                { label: 'Approver', value: 'approver' },
            ], onInput: (e) => {
                this.type = e.target.value;
                this.dirty = true;
            } })), h("div", { key: 'd426d87dd0b1ad7f19e82022e3f8a240a3fc6b48' }, h("div", { key: '139647d5ba8f447df5fe8cb727cea2f8c3c4a4ee', class: "input-label" }, "Default Contact Info:"), h("div", { key: '58b6407105e6d41247f8efb7b539b3d6100f3ece', class: "first-last" }, h("verdocs-text-input", { key: '6bd0d6052ded34db7584231cc6bc5c6bc21e75d4', id: "verdocs-recipient-first", value: this.first_name, autocomplete: "off", placeholder: "First...", onInput: (e) => {
                this.first_name = e.target.value;
                this.dirty = true;
            } }), h("verdocs-text-input", { key: '135f6024ea458d5b5161919584ebb8bf691c5fe8', id: "verdocs-recipient-first", value: this.last_name, autocomplete: "off", placeholder: "Last...", onInput: (e) => {
                this.last_name = e.target.value;
                this.dirty = true;
            } }))), h("div", { key: '137098702e8fefd55f80561bf3fa1366fe7a9306' }, h("verdocs-text-input", { key: 'b3288c2bdda90ec63948821f6e5d9bed0555aea6', id: "verdocs-recipient-email", value: this.email, autocomplete: "off", placeholder: "Email Address...", onInput: (e) => {
                this.email = e.target.value;
                this.dirty = true;
            } }), h("div", { key: '892f12c9429c2e2166493563054cd230a7b7f273', style: { height: '15px' } }), h("div", { key: 'b26750310aa44563ecb53e585fbd02a3329476ff' }, h("verdocs-text-input", { key: 'c5ed1eb446c83b8a738f483da47ee405eb3c46d3', id: "verdocs-recipient-phone", value: this.phone, autocomplete: "off",
            // helpText="The recipient's phone number, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template."
            placeholder: "Phone Number...", onInput: (e) => {
                this.phone = e.target.value;
                this.dirty = true;
            } }))), h("div", { key: '2d588cd5467e22b2ca646d2db6ee1129d4425e36', class: "buttons" }, h("button", { key: 'd56630b85383cef24d346e126a72edf714b12e11', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { key: '56af532ac7e3f216473ac76c94a8df9fed90ec0d', style: { flex: '1' } }), h("verdocs-button", { key: '21fae0b17777c6d51ffa671bb90a240ea4c38afd', size: "small", label: "Save", disabled: !this.dirty || !isValid, onClick: e => this.handleSave(e) })))));
    }
};
VerdocsTemplateRoleProperties.style = verdocsTemplateRolePropertiesCss;

export { VerdocsMenuPanel as verdocs_menu_panel, VerdocsTemplateRoleProperties as verdocs_template_role_properties };
//# sourceMappingURL=verdocs-menu-panel.verdocs-template-role-properties.entry.js.map

//# sourceMappingURL=verdocs-menu-panel_2.entry.js.map