import { r as registerInstance, c as createEvent, h, H as Host } from './index-BIRwgFLv.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-DmsV595e.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:var(--verdocs-primary-font, \"Inter\", \"Barlow\", 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: 'd8b777eb6e71718b528f35525f1963fa6540abba', ref: el => (this.element = el) }, h("slot", { key: 'c058bb6646d247a152714f3763eda42c340969f0' })));
    }
};
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: '0b632e1d433b8c0e9bb36508e6d005d4539af00f' }, h("form", { key: 'de3f838a9871a668c0c162c7ca4379aa937a149e', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: 'ae5ef95a62f5fe7980ff77eeb2268ad4a2b179bb' }, h("verdocs-text-input", { key: '5b9338cd1dc88ff075783997670b33d491a663a7', 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: '005409c2ad6334d93b2fd7be76404b3c1ba6124a', class: "instructions" }, "This role has fields assigned and can no longer be renamed.")), h("div", { key: '18034e9ae1db939114fa94b09bb9f328df21aacf' }, h("div", { key: 'baa0d2af362729252c8c5d80726470e788ba8a96', class: "input-label" }, "Type:"), h("verdocs-select-input", { key: '5c8de343dba32e3d480e2a76217696cec67e07b9', 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: '4da5d13ecd9f31a03803e03d673a2606953d0a23' }, h("div", { key: 'f89b346b0396cfe24b8de09f3242f8cc693cf562', class: "input-label" }, "Default Contact Info:"), h("div", { key: '7341562ad13ab09f76aa9c30efcff139ee8c102e', class: "first-last" }, h("verdocs-text-input", { key: '027b6687cb31c70dda9139abd1f07ab9e0121538', 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: 'af5460024536a3bcfd5d557b16db6f4b1caaf756', 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: 'eea4aaae1ed24607c9126133aaaf2797a10b6c74' }, h("verdocs-text-input", { key: '11b86028a868937710a11f796880aea7160d4cf1', 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: '10fb85ec06d593b331b3cdd86ffce189a8b9dcf6', style: { height: '15px' } }), h("div", { key: '7c498785230b998343d1fc0f8072186df64674fb' }, h("verdocs-text-input", { key: 'dc6fb97cb2c151ab0c9756743c3141573c55a8e8', 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: '69a3f2441823debc162e29aa17476cedbc09a154', class: "buttons" }, h("button", { key: '3bc722b9cb95d670ff8f92ae4e381251f5c22346', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { key: '4fdae55a5ff51377d0f49e1091cef5274ba0485e', style: { flex: '1' } }), h("verdocs-button", { key: 'fc9f540fcc1dc9b31cba805a765ffbe37d69bbd5', 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
