@verdocs/web-sdk 2.3.88 → 4.0.5

package/dist/cjs/verdocs-contact-picker_2.cjs.entry.js

@@ -2,135 +2,134 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5463795e.js');
-require('./Types-f89f9116.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-3036bbb7.js');
-const utils = require('./utils-e2bd04bf.js');
-require('./_commonjsHelpers-0c557e26.js');
-require('./Envelopes-0b9deb2c.js');
-require('./Types-f83b8488.js');
-require('./index-7c19ba1d.js');
+const index = require('./index-cfdfab36.js');
+const jsSdk = require('@verdocs/js-sdk');
+const utils = require('./utils-5eb11b46.js');
+require('./Types-db1bd1d8.js');
+require('./index-5f130ec0.js');
 
 const verdocsContactPickerCss = "@-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-contact-picker{display:block;border:1px solid #ebebeb;background-color:#ffffff;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1);box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1)}verdocs-contact-picker form{background-color:#f5f5fa;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .row{width:300px;display:-ms-flexbox;display:flex;position:relative;margin:0 0 20px 0;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-contact-picker form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-contact-picker form input:focus{outline:none}verdocs-contact-picker form .dropdown{left:0;right:0;top:49px;z-index:1000000;position:absolute;background:#ffffff;-webkit-box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1);box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1)}verdocs-contact-picker form .dropdown .suggestion{display:-ms-flexbox;display:flex;padding:6px 12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker form .dropdown .suggestion svg{fill:#666666}verdocs-contact-picker form .dropdown .suggestion .avatar{width:48px;height:48px;-ms-flex:0 0 48px;flex:0 0 48px;margin-right:8px;border-radius:100%}verdocs-contact-picker form .dropdown .suggestion .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .dropdown .suggestion .name{font-size:16px;font-weight:500;margin-bottom:3px;color:#092c4c}verdocs-contact-picker form .dropdown .suggestion .destination{font-size:14px;margin-bottom:3px;color:#33364b}verdocs-contact-picker form .dropdown .suggestion:hover{background:#eee;cursor:pointer}verdocs-contact-picker .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-contact-picker ::-webkit-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::-moz-placeholder{color:#aaaaaa}verdocs-contact-picker :-ms-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::-ms-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::placeholder{color:#aaaaaa}verdocs-contact-picker [data-lastpass-icon-root]{display:none !important}";
+const VerdocsContactPickerStyle0 = verdocsContactPickerCss;
 
 const messageIcon = '<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path></svg>';
 const delegateIcon = '<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="AssignmentIndIcon" tabindex="-1" title="AssignmentInd"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z"></path></svg>';
 const placeholderIcon = '<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="AccountCircleIcon" tabindex="-1" title="AccountCircle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20z"></path></svg>';
 const VerdocsContactPicker = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.searchContacts = index.createEvent(this, "searchContacts", 7);
-    this.exit = index.createEvent(this, "exit", 7);
-    this.next = index.createEvent(this, "next", 7);
-    this.endpoint = VerdocsEndpoint.VerdocsEndpoint.getDefault();
-    this.templateRole = null;
-    this.contactSuggestions = [];
-    this.name = undefined;
-    this.email = undefined;
-    this.phone = undefined;
-    this.message = undefined;
-    this.showSuggestions = false;
-    this.showMessage = false;
-    this.delegator = false;
-    this.nameFieldId = `verdocs-contact-picker-name-${Math.random().toString(36).substring(2, 11)}`;
-    this.emailFieldId = `verdocs-contact-picker-email-${Math.random().toString(36).substring(2, 11)}`;
-    this.phoneFieldId = `verdocs-contact-picker-phone-${Math.random().toString(36).substring(2, 11)}`;
-  }
-  componentWillLoad() {
-    if (this.templateRole) {
-      this.name = this.templateRole.full_name || '';
-      this.email = this.templateRole.email || '';
-      this.phone = this.templateRole.phone || '';
-      this.delegator = this.templateRole.delegator || false;
-      this.message = this.templateRole.message || '';
-      this.showMessage = this.message !== '';
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.searchContacts = index.createEvent(this, "searchContacts", 7);
+        this.exit = index.createEvent(this, "exit", 7);
+        this.next = index.createEvent(this, "next", 7);
+        this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
+        this.templateRole = null;
+        this.contactSuggestions = [];
+        this.name = undefined;
+        this.email = undefined;
+        this.phone = undefined;
+        this.message = undefined;
+        this.showSuggestions = false;
+        this.showMessage = false;
+        this.delegator = false;
+        this.nameFieldId = `verdocs-contact-picker-name-${Math.random().toString(36).substring(2, 11)}`;
+        this.emailFieldId = `verdocs-contact-picker-email-${Math.random().toString(36).substring(2, 11)}`;
+        this.phoneFieldId = `verdocs-contact-picker-phone-${Math.random().toString(36).substring(2, 11)}`;
+    }
+    componentWillLoad() {
+        if (this.templateRole) {
+            this.name = this.templateRole.full_name || '';
+            this.email = this.templateRole.email || '';
+            this.phone = this.templateRole.phone || '';
+            this.delegator = this.templateRole.delegator || false;
+            this.message = this.templateRole.message || '';
+            this.showMessage = this.message !== '';
+        }
+    }
+    handleNameChange(e) {
+        var _a;
+        this.name = e.target.value;
+        (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit({ query: this.name });
+    }
+    handleEmailChange(e) {
+        this.email = e.target.value;
     }
-  }
-  handleNameChange(e) {
-    var _a;
-    this.name = e.target.value;
-    (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit({ query: this.name });
-  }
-  handleEmailChange(e) {
-    this.email = e.target.value;
-  }
-  handlePhoneChange(e) {
-    this.phone = utils.convertToE164(e.target.value);
-  }
-  handleMessageChange(e) {
-    this.message = e.target.value;
-  }
-  handleCancel(e) {
-    var _a;
-    e.stopPropagation();
-    this.showSuggestions = false;
-    (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
-  }
-  handleSubmit(e) {
-    var _a;
-    e.stopPropagation();
-    this.showSuggestions = false;
-    (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({
-      full_name: this.name,
-      email: this.email,
-      phone: this.phone,
-      message: this.message,
-      delegator: this.delegator,
-    });
-  }
-  handleSelectSuggestion(e, suggestion) {
-    e.stopPropagation();
-    this.name = suggestion.name;
-    this.email = suggestion.email;
-    this.phone = suggestion.phone;
-    this.showSuggestions = false;
-  }
-  // The reason for the random names/IDs is to disable browser autocomplete. We set the autocomplete tags but many browsers ignore them
-  // and show a duplicate autocomplete picker on top of our own.
-  render() {
-    return (index.h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("div", { class: "row" }, index.h("label", { htmlFor: this.nameFieldId }, "Name:"), index.h("input", { id: this.nameFieldId, name: this.nameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.name, placeholder: "Recipient Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); },
-      // onBlur={() => (this.showSuggestions = false)}
-      onInput: e => this.handleNameChange(e) }), this.showSuggestions && (index.h("div", { class: "dropdown" }, this.contactSuggestions.map(suggestion => {
-      var _a;
-      return (index.h("div", { key: (_a = suggestion.id) !== null && _a !== void 0 ? _a : suggestion.name, class: "suggestion", onClick: e => this.handleSelectSuggestion(e, suggestion) }, suggestion.avatar ? index.h("img", { alt: "Avatar", class: "avatar", src: suggestion.avatar }) : index.h("div", { class: "avatar", innerHTML: placeholderIcon }), index.h("div", { class: "details" }, index.h("div", { class: "name" }, suggestion.name), suggestion.email && index.h("div", { class: "destination" }, suggestion.email), suggestion.phone && index.h("div", { class: "destination" }, suggestion.phone))));
-    })))), index.h("div", { class: "row" }, index.h("label", { htmlFor: this.emailFieldId }, "Email:"), index.h("input", { id: this.emailFieldId, name: this.emailFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.email, placeholder: "Email Address...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleEmailChange(e) })), index.h("div", { class: "row" }, index.h("label", { htmlFor: this.phoneFieldId }, "Phone:"), index.h("input", { id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.phone, placeholder: "Phone Number...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handlePhoneChange(e) })), this.showMessage && (index.h("div", { class: "row" }, index.h("label", { htmlFor: "verdocs-contact-picker-message" }, "Message:"), index.h("input", { id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.message, placeholder: "Invitation Message...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) }))), index.h("div", { class: "buttons" }, index.h("verdocs-toggle-button", { icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
-        this.showMessage = e.detail.active;
+    handlePhoneChange(e) {
+        this.phone = utils.convertToE164(e.target.value);
+    }
+    handleMessageChange(e) {
+        this.message = e.target.value;
+    }
+    handleCancel(e) {
+        var _a;
+        e.stopPropagation();
         this.showSuggestions = false;
-      } }), index.h("verdocs-toggle-button", { icon: delegateIcon, size: "small", active: this.delegator, onToggle: e => {
-        this.delegator = e.detail.active;
+        (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
+    }
+    handleSubmit(e) {
+        var _a;
+        e.stopPropagation();
         this.showSuggestions = false;
-      } }), index.h("div", { class: "flex-fill" }), index.h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { label: "OK", size: "small", onClick: e => this.handleSubmit(e) }))));
-  }
+        (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({
+            full_name: this.name,
+            email: this.email,
+            phone: this.phone,
+            message: this.message,
+            delegator: this.delegator,
+        });
+    }
+    handleSelectSuggestion(e, suggestion) {
+        e.stopPropagation();
+        this.name = suggestion.name;
+        this.email = suggestion.email;
+        this.phone = suggestion.phone;
+        this.showSuggestions = false;
+    }
+    // The reason for the random names/IDs is to disable browser autocomplete. We set the autocomplete tags but many browsers ignore them
+    // and show a duplicate autocomplete picker on top of our own.
+    render() {
+        return (index.h("form", { key: '45acdba47c2999d3d4aa88c72e4451c5565b222e', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("div", { key: '96b525fe36cb094bbd4492841cb095e62b4358b8', class: "row" }, index.h("label", { key: 'f264a4b8cc6da4ef82f78a1841d5b3bce0ae4fef', htmlFor: this.nameFieldId }, "Name:"), index.h("input", { key: '15898561eeff05ad20dd73787f39702ab862d295', id: this.nameFieldId, name: this.nameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.name, placeholder: "Recipient Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); },
+            // onBlur={() => (this.showSuggestions = false)}
+            onInput: e => this.handleNameChange(e) }), this.showSuggestions && (index.h("div", { key: 'ad28ba30382a2d2a40ac1992352368b883097553', class: "dropdown" }, this.contactSuggestions.map(suggestion => {
+            var _a;
+            return (index.h("div", { key: (_a = suggestion.id) !== null && _a !== void 0 ? _a : suggestion.name, class: "suggestion", onClick: e => this.handleSelectSuggestion(e, suggestion) }, suggestion.avatar ? index.h("img", { alt: "Avatar", class: "avatar", src: suggestion.avatar }) : index.h("div", { class: "avatar", innerHTML: placeholderIcon }), index.h("div", { class: "details" }, index.h("div", { class: "name" }, suggestion.name), suggestion.email && index.h("div", { class: "destination" }, suggestion.email), suggestion.phone && index.h("div", { class: "destination" }, suggestion.phone))));
+        })))), index.h("div", { key: '7a7d4b6df5eab37ede0b87f9d10ba8b8e4e8254f', class: "row" }, index.h("label", { key: '2058494eeac07248115323afe529bcaf681afed1', htmlFor: this.emailFieldId }, "Email:"), index.h("input", { key: 'd1c41d7b356190b4705e7d255103534bd1a47cd2', id: this.emailFieldId, name: this.emailFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.email, placeholder: "Email Address...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleEmailChange(e) })), index.h("div", { key: '5f9668b15bfb2e1e06cc03e2f1ea051b893307f6', class: "row" }, index.h("label", { key: '54b40e4aa240e2c6fb2364fbe59707d25dbfdb65', htmlFor: this.phoneFieldId }, "Phone:"), index.h("input", { key: 'dc20e317c4dbeae41bc9454685a0bf97f57db2bb', id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.phone, placeholder: "Phone Number...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handlePhoneChange(e) })), this.showMessage && (index.h("div", { key: '85fb931022f96a0916c162e335a1ea91a11a9590', class: "row" }, index.h("label", { key: '45c30e86e0038b8159c417bb59fb88885e309853', htmlFor: "verdocs-contact-picker-message" }, "Message:"), index.h("input", { key: 'edd7b070c3fa83fe93e3305d70182a63b8a273b5', id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.message, placeholder: "Invitation Message...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) }))), index.h("div", { key: '0cfb64faed1d1bfa9d712811ac7c05412b135a8c', class: "buttons" }, index.h("verdocs-toggle-button", { key: '6fe54edfc3e822f4863c8e2ad8109ea7cde8be94', icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
+                this.showMessage = e.detail.active;
+                this.showSuggestions = false;
+            } }), index.h("verdocs-toggle-button", { key: '56941f96e455fa978d664cfecd6c015c0c133127', icon: delegateIcon, size: "small", active: this.delegator, onToggle: e => {
+                this.delegator = e.detail.active;
+                this.showSuggestions = false;
+            } }), index.h("div", { key: 'ec687a638006d9902d5041b57de14a0d6fbb4ff3', class: "flex-fill" }), index.h("verdocs-button", { key: 'e984e3783aa6483ab20873254dd96998e0d505e8', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { key: '1b997aede29f9e8576c0739e089d879ba05ce123', label: "OK", size: "small", onClick: e => this.handleSubmit(e) }))));
+    }
 };
-VerdocsContactPicker.style = verdocsContactPickerCss;
+VerdocsContactPicker.style = VerdocsContactPickerStyle0;
 
 const verdocsToggleButtonCss = "@-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-toggle-button{font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-toggle-button button{border:none;outline:none;cursor:pointer;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;background:#cccccc;color:#33364b}verdocs-toggle-button button svg{max-width:100%;max-height:100%;fill:#33364b}verdocs-toggle-button button.active{background:#55bc81;color:#f5f5fa}verdocs-toggle-button button.active svg{fill:#f5f5fa}verdocs-toggle-button button:focus{border:none;outline:none}verdocs-toggle-button.size-normal button{width:40px;height:40px;padding:6px;border-radius:4px}verdocs-toggle-button.size-small button{width:34px;height:34px;padding:4px;border-radius:2px}";
+const VerdocsToggleButtonStyle0 = verdocsToggleButtonCss;
 
 const VerdocsToggleButton = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.toggle = index.createEvent(this, "toggle", 7);
-    this.active = false;
-    this.icon = null;
-    this.label = null;
-    this.size = 'normal';
-    this._active = false;
-  }
-  componentWillLoad() {
-    this._active = this.active;
-  }
-  handleToggle(e) {
-    var _a;
-    e.stopPropagation();
-    const newState = !this._active;
-    this._active = newState;
-    (_a = this.toggle) === null || _a === void 0 ? void 0 : _a.emit({ active: newState });
-  }
-  render() {
-    return (index.h(index.Host, { class: `size-${this.size}` }, this.icon ? (index.h("button", { innerHTML: this.icon, class: { active: this._active }, onClick: e => this.handleToggle(e) })) : (index.h("button", { class: { active: this._active }, onClick: e => this.handleToggle(e) }, this.label))));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.toggle = index.createEvent(this, "toggle", 7);
+        this.active = false;
+        this.icon = null;
+        this.label = null;
+        this.size = 'normal';
+        this._active = false;
+    }
+    componentWillLoad() {
+        this._active = this.active;
+    }
+    handleToggle(e) {
+        var _a;
+        e.stopPropagation();
+        const newState = !this._active;
+        this._active = newState;
+        (_a = this.toggle) === null || _a === void 0 ? void 0 : _a.emit({ active: newState });
+    }
+    render() {
+        return (index.h(index.Host, { key: 'f953a03258c2b74858b247a3d206028bf0285f1f', class: `size-${this.size}` }, this.icon ? (index.h("button", { innerHTML: this.icon, class: { active: this._active }, onClick: e => this.handleToggle(e) })) : (index.h("button", { class: { active: this._active }, onClick: e => this.handleToggle(e) }, this.label))));
+    }
 };
-VerdocsToggleButton.style = verdocsToggleButtonCss;
+VerdocsToggleButton.style = VerdocsToggleButtonStyle0;
 
 exports.verdocs_contact_picker = VerdocsContactPicker;
 exports.verdocs_toggle_button = VerdocsToggleButton;

package/dist/cjs/verdocs-dialog_2.cjs.entry.js

@@ -2,50 +2,52 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5463795e.js');
+const index = require('./index-cfdfab36.js');
 
-const verdocsDialogCss = "@-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-dialog{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-dialog div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-dialog .background-overlay{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:10000;position:absolute;-ms-flex-align:center;align-items:center;background:#0000007f;-ms-flex-pack:center;justify-content:center}verdocs-dialog .dialog{width:420px;display:-ms-flexbox;display:flex;max-width:100%;overflow:hidden;border-radius:4px;-ms-flex-direction:column;flex-direction:column;background:#ffffff;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4)}verdocs-dialog .heading{display:-ms-flexbox;display:flex;font-size:16px;font-weight:500;padding:8px 16px;-ms-flex-direction:row;flex-direction:row;color:#ffffff;background:#46497d}verdocs-dialog .content{padding:16px}verdocs-dialog .content p{margin:0 0 1em 0}verdocs-dialog .buttons{gap:14px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}";
+const verdocsDialogCss = "@-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-dialog{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-dialog div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-dialog .background-overlay{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:10000;position:absolute;-ms-flex-align:center;align-items:center;background:rgba(0, 0, 0, 0.4980392157);-ms-flex-pack:center;justify-content:center}verdocs-dialog .dialog{width:420px;display:-ms-flexbox;display:flex;max-width:100%;overflow:hidden;border-radius:4px;-ms-flex-direction:column;flex-direction:column;background:#ffffff;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4)}verdocs-dialog .heading{display:-ms-flexbox;display:flex;font-size:16px;font-weight:500;padding:8px 16px;-ms-flex-direction:row;flex-direction:row;color:#ffffff;background:#46497d}verdocs-dialog .content{padding:16px}verdocs-dialog .content p{margin:0 0 1em 0}verdocs-dialog .buttons{gap:14px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}";
+const VerdocsDialogStyle0 = verdocsDialogCss;
 
 const VerdocsDialog = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.exit = index.createEvent(this, "exit", 7);
-  }
-  // We need a separate event handler for clicking the background because it can receive events "through" other child components
-  handleDismiss(e) {
-    var _a;
-    if (e.target.className === 'background-overlay') {
-      e.preventDefault();
-      (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.exit = index.createEvent(this, "exit", 7);
+    }
+    // We need a separate event handler for clicking the background because it can receive events "through" other child components
+    handleDismiss(e) {
+        var _a;
+        if (e.target.className === 'background-overlay') {
+            e.preventDefault();
+            (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: '62e6836ec77a8cb2439248680f46bac274f8717c' }, index.h("div", { key: 'b9a7b1dd23a4f87ced0695fa87fdfef2a5ce51c9', class: "background-overlay", onClick: e => this.handleDismiss(e) }, index.h("div", { key: 'c1702275d5bae4c5008ee75c00edc7f79eaca27e', class: "dialog" }, index.h("slot", { key: '2ffc0f8aacd561b5762fee8d762154e5d7820149', name: "title" }, index.h("div", { key: 'd0263fc7c6198c3508f8c874946e4ac1e895ce1b', class: "heading" }, "Please Confirm")), index.h("slot", { key: '68787dfb4db8dfb8308c81066e5126ead44978ed' }, index.h("div", { key: 'c6057bd9eac67d97010f57e0ed1975a9a3d57eb4', class: "content" }))))));
     }
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, index.h("div", { class: "dialog" }, index.h("slot", { name: "title" }, index.h("div", { class: "heading" }, "Please Confirm")), index.h("slot", null, index.h("div", { class: "content" }))))));
-  }
 };
-VerdocsDialog.style = verdocsDialogCss;
+VerdocsDialog.style = VerdocsDialogStyle0;
 
 const verdocsTableCss = "@-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-table{width:100%;display:block;margin:0 0 10px 0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-table .table-wrapper{margin:10px 0;padding:0}verdocs-table .table{width:100%;border:none;border-collapse:collapse}verdocs-table .row.data-row{border:1px solid #d4d4d8;background-color:#ffffff}verdocs-table .header-col{color:#5c6575;font-weight:600;text-align:left;padding:8px 16px}verdocs-table .data-col{font-weight:400;padding:8px 16px}";
+const VerdocsTableStyle0 = verdocsTableCss;
 
 const VerdocsTable = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.colHeaderClick = index.createEvent(this, "colHeaderClick", 7);
-    this.rowClick = index.createEvent(this, "rowClick", 7);
-    this.columns = [];
-    this.data = [];
-  }
-  render() {
-    return (index.h(index.Host, { class: "table-wrapper" }, index.h("table", { class: "table" }, index.h("thead", null, index.h("tr", { class: "row header-row" }, this.columns.map((col, i) => {
-      return (index.h("th", { class: `col header-col col-${i} col-${col.id}`, onClick: () => { var _a; return (_a = this.colHeaderClick) === null || _a === void 0 ? void 0 : _a.emit({ col }); }, innerHTML: col.renderHeader ? col.renderHeader(col) : col.header || col.id }));
-    }))), index.h("tbody", null, this.data.map(row => (index.h("tr", { class: "row data-row", onClick: () => { var _a; return (_a = this.rowClick) === null || _a === void 0 ? void 0 : _a.emit({ row }); } }, this.columns.map((col, i) => {
-      var _a;
-      return index.h("td", { class: `col data-col col-${i} col-${col.id}` }, ((_a = col.renderCell) === null || _a === void 0 ? void 0 : _a.call(col, col, row)) || row[col.id]);
-      // return <td class={`col data-col col-${i} col-${col.id}`} innerHTML={col.renderCell?.(col, row) || row[col.id]} />;
-    }))))))));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.colHeaderClick = index.createEvent(this, "colHeaderClick", 7);
+        this.rowClick = index.createEvent(this, "rowClick", 7);
+        this.columns = [];
+        this.data = [];
+    }
+    render() {
+        return (index.h(index.Host, { key: 'd048ed4b7942038c96da6873520ecaa2a83014f0', class: "table-wrapper" }, index.h("table", { key: '4328cdcb8da0670fff20f175c9a12deba009e85d', class: "table" }, index.h("thead", { key: 'c94cbef7c8b3e05d9ee71c812525f1599529bcd1' }, index.h("tr", { key: 'd27169ab0901fef379fd2001953c944915d9cd5e', class: "row header-row" }, this.columns.map((col, i) => {
+            return (index.h("th", { class: `col header-col col-${i} col-${col.id}`, onClick: () => { var _a; return (_a = this.colHeaderClick) === null || _a === void 0 ? void 0 : _a.emit({ col }); }, innerHTML: col.renderHeader ? col.renderHeader(col) : col.header || col.id }));
+        }))), index.h("tbody", { key: '5ecf556cd6c25d1f47220c0a22793d0a6ba8ff3e' }, this.data.map(row => (index.h("tr", { class: "row data-row", onClick: () => { var _a; return (_a = this.rowClick) === null || _a === void 0 ? void 0 : _a.emit({ row }); } }, this.columns.map((col, i) => {
+            var _a;
+            return index.h("td", { class: `col data-col col-${i} col-${col.id}` }, ((_a = col.renderCell) === null || _a === void 0 ? void 0 : _a.call(col, col, row)) || row[col.id]);
+            // return <td class={`col data-col col-${i} col-${col.id}`} innerHTML={col.renderCell?.(col, row) || row[col.id]} />;
+        }))))))));
+    }
 };
-VerdocsTable.style = verdocsTableCss;
+VerdocsTable.style = VerdocsTableStyle0;
 
 exports.verdocs_dialog = VerdocsDialog;
 exports.verdocs_table = VerdocsTable;

package/dist/cjs/verdocs-dropdown.cjs.entry.js

@@ -2,100 +2,101 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5463795e.js');
+const index = require('./index-cfdfab36.js');
 
-const verdocsDropdownCss = "@-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-dropdown{display:block;position:relative;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-dropdown .arrow{width:32px;height:26px;background:#fff;cursor:pointer;border-radius:4px;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;border:1px solid #cccccc;-ms-flex-pack:center;justify-content:center}verdocs-dropdown .arrow svg{fill:#55bc81;-webkit-transition:0.3s;transition:0.3s}verdocs-dropdown.open .arrow{background:#4c56cb;border:1px solid #707ae5}verdocs-dropdown.open .arrow svg{-webkit-transform:scaleY(-1);transform:scaleY(-1);fill:#fff}#verdocs-dropdown-menu-items{width:200px;z-index:10000;position:absolute;border-radius:5px;background:#33354c;border:1px solid #654dcb}.verdocs-dropdown-menu-separator{height:1px;margin-top:5px;padding-top:5px;border-top:1px solid #ffffff5f}.verdocs-dropdown-menu-option{width:100%;color:#fff;border:none;display:block;text-align:left;background:none;padding:10px 20px}.verdocs-dropdown-menu-option:hover{cursor:pointer;background:#55bc81}.verdocs-dropdown-menu-option[disabled]{color:#aaaaaa}.verdocs-dropdown-menu-option[disabled]:hover{cursor:inherit;background:transparent;color:#aaaaaa}";
+const verdocsDropdownCss = "@-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-dropdown{display:block;position:relative;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-dropdown .arrow{width:32px;height:26px;background:#fff;cursor:pointer;border-radius:4px;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;border:1px solid #cccccc;-ms-flex-pack:center;justify-content:center}verdocs-dropdown .arrow svg{fill:#55bc81;-webkit-transition:0.3s;transition:0.3s}verdocs-dropdown.open .arrow{background:#4c56cb;border:1px solid #707ae5}verdocs-dropdown.open .arrow svg{-webkit-transform:scaleY(-1);transform:scaleY(-1);fill:#fff}#verdocs-dropdown-menu-items{width:200px;z-index:10000;position:absolute;border-radius:5px;background:#33354c;border:1px solid #654dcb}.verdocs-dropdown-menu-separator{height:1px;margin-top:5px;padding-top:5px;border-top:1px solid rgba(255, 255, 255, 0.3725490196)}.verdocs-dropdown-menu-option{width:100%;color:#fff;border:none;display:block;text-align:left;background:none;padding:10px 20px}.verdocs-dropdown-menu-option:hover{cursor:pointer;background:#55bc81}.verdocs-dropdown-menu-option[disabled]{color:#aaaaaa}.verdocs-dropdown-menu-option[disabled]:hover{cursor:inherit;background:transparent;color:#aaaaaa}";
+const VerdocsDropdownStyle0 = verdocsDropdownCss;
 
 const MENU_ID = 'verdocs-dropdown-menu-items';
 const DropdownArrow = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#50BE80"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 10l5 5 5-5H7z"/></svg>`;
 function debounce(func, wait, immediate) {
-  let timeout;
-  return function () {
-    const context = this, args = arguments;
-    const later = function () {
-      timeout = null;
-      if (!immediate)
-        func.apply(context, args);
+    let timeout;
+    return function () {
+        const context = this, args = arguments;
+        const later = function () {
+            timeout = null;
+            if (!immediate)
+                func.apply(context, args);
+        };
+        const callNow = immediate && !timeout;
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+        if (callNow)
+            func.apply(context, args);
     };
-    const callNow = immediate && !timeout;
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-    if (callNow)
-      func.apply(context, args);
-  };
 }
 const VerdocsDropdown = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.optionSelected = index.createEvent(this, "optionSelected", 7);
-    this.options = [];
-  }
-  // TODO: This isn't super efficient but it works for now
-  handleResize() {
-    debounce(this.repositionDropdown.bind(this), 100);
-  }
-  handleSelectOption(e, option) {
-    var _a;
-    e.stopPropagation();
-    (_a = this.optionSelected) === null || _a === void 0 ? void 0 : _a.emit(option);
-    this.hide();
-  }
-  repositionDropdown() {
-    var _a, _b;
-    const menu = document.getElementById(MENU_ID);
-    if (menu) {
-      const bodyWidth = document.body.scrollWidth;
-      const buttonRect = (_a = this.dropdownButton) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-      const triggerHeight = ((_b = this.dropdownButton) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 28;
-      console.log('Repositioning dropdown', { bodyWidth, buttonRect, triggerHeight }, menu);
-      menu.style.top = `${((buttonRect === null || buttonRect === void 0 ? void 0 : buttonRect.top) || 0) + triggerHeight}px`;
-      menu.style.right = `${Math.max(0, bodyWidth - ((buttonRect === null || buttonRect === void 0 ? void 0 : buttonRect.right) || 0))}px`;
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.optionSelected = index.createEvent(this, "optionSelected", 7);
+        this.options = [];
     }
-  }
-  // See https://popper.js.org/docs/v2/tutorial/
-  // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists
-  showDropdown() {
-    this.hide();
-    const menu = document.createElement('div');
-    menu.id = MENU_ID;
-    this.options.forEach(option => {
-      if (!option.label) {
-        const separator = document.createElement('div');
-        separator.className = 'verdocs-dropdown-menu-separator';
-        menu.appendChild(separator);
-      }
-      else {
-        const button = document.createElement('button');
-        button.className = 'verdocs-dropdown-menu-option';
-        button.disabled = option.disabled || false;
-        button.innerHTML = option.label;
-        button.addEventListener('click', e => this.handleSelectOption(e, option));
-        menu.appendChild(button);
-      }
-    });
-    document.body.appendChild(menu);
-    setTimeout(this.repositionDropdown.bind(this), 50);
-  }
-  toggle(e) {
-    e.stopPropagation();
-    if (document.getElementById(MENU_ID)) {
-      this.hide();
+    // TODO: This isn't super efficient but it works for now
+    handleResize() {
+        debounce(this.repositionDropdown.bind(this), 100);
     }
-    else {
-      this.showDropdown();
+    handleSelectOption(e, option) {
+        var _a;
+        e.stopPropagation();
+        (_a = this.optionSelected) === null || _a === void 0 ? void 0 : _a.emit(option);
+        this.hide();
     }
-  }
-  hide() {
-    var _a;
-    (_a = document.getElementById(MENU_ID)) === null || _a === void 0 ? void 0 : _a.remove();
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("button", { class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggle(e),
-      // onBlur={() => this.hide()}
-      ref: el => (this.dropdownButton = el) })));
-  }
-  get el() { return index.getElement(this); }
+    repositionDropdown() {
+        var _a, _b;
+        const menu = document.getElementById(MENU_ID);
+        if (menu) {
+            const bodyWidth = document.body.scrollWidth;
+            const buttonRect = (_a = this.dropdownButton) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            const triggerHeight = ((_b = this.dropdownButton) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 28;
+            console.log('Repositioning dropdown', { bodyWidth, buttonRect, triggerHeight }, menu);
+            menu.style.top = `${((buttonRect === null || buttonRect === void 0 ? void 0 : buttonRect.top) || 0) + triggerHeight}px`;
+            menu.style.right = `${Math.max(0, bodyWidth - ((buttonRect === null || buttonRect === void 0 ? void 0 : buttonRect.right) || 0))}px`;
+        }
+    }
+    // See https://popper.js.org/docs/v2/tutorial/
+    // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists
+    showDropdown() {
+        this.hide();
+        const menu = document.createElement('div');
+        menu.id = MENU_ID;
+        this.options.forEach(option => {
+            if (!option.label) {
+                const separator = document.createElement('div');
+                separator.className = 'verdocs-dropdown-menu-separator';
+                menu.appendChild(separator);
+            }
+            else {
+                const button = document.createElement('button');
+                button.className = 'verdocs-dropdown-menu-option';
+                button.disabled = option.disabled || false;
+                button.innerHTML = option.label;
+                button.addEventListener('click', e => this.handleSelectOption(e, option));
+                menu.appendChild(button);
+            }
+        });
+        document.body.appendChild(menu);
+        setTimeout(this.repositionDropdown.bind(this), 50);
+    }
+    toggle(e) {
+        e.stopPropagation();
+        if (document.getElementById(MENU_ID)) {
+            this.hide();
+        }
+        else {
+            this.showDropdown();
+        }
+    }
+    hide() {
+        var _a;
+        (_a = document.getElementById(MENU_ID)) === null || _a === void 0 ? void 0 : _a.remove();
+    }
+    render() {
+        return (index.h(index.Host, { key: 'ba41da3a28f1fb5b36c6918967fad5297cedf8dd' }, index.h("button", { key: '8f10c96d7e108f79115c8b4b309c7e02ab5f37f6', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggle(e),
+            // onBlur={() => this.hide()}
+            ref: el => (this.dropdownButton = el) })));
+    }
+    get el() { return index.getElement(this); }
 };
-VerdocsDropdown.style = verdocsDropdownCss;
+VerdocsDropdown.style = VerdocsDropdownStyle0;
 
 exports.verdocs_dropdown = VerdocsDropdown;