@verdocs/web-sdk 5.1.1 → 5.3.2

package/dist/esm/verdocs-menu-panel_2.entry.js

@@ -64,7 +64,7 @@ const VerdocsMenuPanel = class {
         (_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' })));
+        return (h(Host, { key: '433d003e79f33ac91e6535b34a7857520eba52a9', ref: el => (this.element = el) }, h("slot", { key: '349bf90ff34df330916d1aad0a40c79cce1c32bc' })));
     }
 };
 VerdocsMenuPanel.style = verdocsMenuPanelCss;
@@ -221,31 +221,31 @@ const VerdocsTemplateRoleProperties = class {
         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) => {
+        return (h(Host, { key: '69774e9a8bc30870080aa30482ece13677534252' }, h("form", { key: '33d9f4b82d56200d6df9215303e738cab7bd6c46', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: 'b91e6faf60e432dffdee7a7cdfc39ebe1b063f17' }, h("verdocs-text-input", { key: 'cc7c668adbc67fdf6147c6fc585c9be569d93656', 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: [
+            } }), hasFields && h("div", { key: '8dc436a87bbc5e712253acbaa60a6a6995192866', class: "instructions" }, "This role has fields assigned and can no longer be renamed.")), h("div", { key: '9005606e0e55019547f7b34f2eb6fac4ef2cf781' }, h("div", { key: 'e7fc270d2743317575dd4c89eee1385f651de7cb', class: "input-label" }, "Type:"), h("verdocs-select-input", { key: '9df55b8637c47f1db044cc05627e39300bca6903', 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) => {
+            } })), h("div", { key: 'e25604392d34cbf77b94dda6de6384cb7272a4dc' }, h("div", { key: '5926b2734d605bdad544d7de04cb32205d3f8a17', class: "input-label" }, "Default Contact Info:"), h("div", { key: 'b1e3070f2dd4c7b1cb76ed2d17eb5d6c289bb6b0', class: "first-last" }, h("verdocs-text-input", { key: 'fb9e886ba1d468a8543326d649b494e1f371105f', 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) => {
+            } }), h("verdocs-text-input", { key: '8b9228271f0c206269bf7dfd560a0f77dcf7f9d2', 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) => {
+            } }))), h("div", { key: '92db075222714d0ef2e63f43bd6aeac6dda135b4' }, h("verdocs-text-input", { key: 'b614b9a4f57018105f95b6d4be371ae2ab43d034', 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",
+            } }), h("div", { key: '5fac807ae61273d1fca93e243114c6a43595bca4', style: { height: '15px' } }), h("div", { key: 'c94d7518ab0a33d093c8c53061e6b76136786cf4' }, h("verdocs-text-input", { key: 'e10740221dc8a37bbe6239868885fa6162a714a4', 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) })))));
+            } }))), h("div", { key: '8d87329fad7879c6c8c8f7fbd1d84277b1a4c6f3', class: "buttons" }, h("button", { key: '968fe7fa6dda5fa610f984345daf1b3b20ba33f7', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { key: '47e781c250561d27982bc44548be452b965ebdf0', style: { flex: '1' } }), h("verdocs-button", { key: '7db073d8545a497611b7d3070b85d65b87b1880f', size: "small", label: "Save", disabled: !this.dirty || !isValid, onClick: e => this.handleSave(e) })))));
     }
 };
 VerdocsTemplateRoleProperties.style = verdocsTemplateRolePropertiesCss;

package/dist/esm/verdocs-multiselect.entry.js

@@ -35,7 +35,7 @@ const VerdocsMultiselect = class {
     }
     render() {
         const elId = `verdocs-dropdown-${randomString(8)}`;
-        return (h(Host, { key: 'eafa54e1dae78058303d3b80391745f85cd3eae1', class: this.showPicker ? 'open' : 'closed' }, h("label", { key: 'a584b5df194714f0ac33cba4c249f5360ba61985' }, this.label ? h("div", { class: "input-label" }, this.label + ':') : h("div", null), h("div", { key: 'ba8d22afa9a3b561906fc5866c7644ef8c6c9054', class: "input-wrapper" }, h("button", { key: '517b669dc1a5a95cae442f316678068862e287b2', id: elId, class: "trigger", value: "", onClick: () => (this.showPicker = !this.showPicker) }, this.selectedOptions.length === 0 ? (h("span", { class: "placeholder" }, this.placeholder)) : (this.selectedOptions.map(option => { var _a; return h("span", { class: "selected-option" }, ((_a = this.options.find(opt => opt.value === option)) === null || _a === void 0 ? void 0 : _a.label) || 'Unknown'); }))), h("div", { key: 'aee9c3f227a6637e4589cfb858e9219548c57661', class: "icon", innerHTML: this.showPicker ? UpIcon : DownIcon }), this.showPicker && (h("div", { key: '6bd6ffc79bf6b09b31c7de4b367704fc1988e87d', class: "verdocs-multiselect-dropdown" }, this.options.map((option, i) => (h("div", { class: "option", onClick: () => (this.showPicker = false) }, h("verdocs-checkbox", { size: "small", id: `verdocs-multi-select-opt-${i}`, value: option.value, checked: this.selectedOptions.includes(option.value), onInput: (e) => this.handleToggleOption(e, option) }), h("label", { htmlFor: `verdocs-multi-select-option-${i}` }, option.label))))))))));
+        return (h(Host, { key: 'ac5b224bc0d5f402b63b84dea01ee4a8f79afa17', class: this.showPicker ? 'open' : 'closed' }, h("label", { key: '9c3f4a162b5b68769e3bb7d811c24d7019d5c5da' }, this.label ? h("div", { class: "input-label" }, this.label + ':') : h("div", null), h("div", { key: '9c719736987f035e57add5b4e2de29dfc7206b06', class: "input-wrapper" }, h("button", { key: 'c7f0790945fa6a2eb5f94beb64dcf45a88efcc49', id: elId, class: "trigger", value: "", onClick: () => (this.showPicker = !this.showPicker) }, this.selectedOptions.length === 0 ? (h("span", { class: "placeholder" }, this.placeholder)) : (this.selectedOptions.map(option => { var _a; return h("span", { class: "selected-option" }, ((_a = this.options.find(opt => opt.value === option)) === null || _a === void 0 ? void 0 : _a.label) || 'Unknown'); }))), h("div", { key: 'd4703b256d8e9c8359433dbdf64c86f9fec3c706', class: "icon", innerHTML: this.showPicker ? UpIcon : DownIcon }), this.showPicker && (h("div", { key: 'c53ef02457953288741486d9565f9d7fe8b0a064', class: "verdocs-multiselect-dropdown" }, this.options.map((option, i) => (h("div", { class: "option", onClick: () => (this.showPicker = false) }, h("verdocs-checkbox", { size: "small", id: `verdocs-multi-select-opt-${i}`, value: option.value, checked: this.selectedOptions.includes(option.value), onInput: (e) => this.handleToggleOption(e, option) }), h("label", { htmlFor: `verdocs-multi-select-option-${i}` }, option.label))))))))));
     }
 };
 VerdocsMultiselect.style = verdocsMultiselectCss;

package/dist/esm/verdocs-ok-dialog.entry.js

@@ -41,7 +41,7 @@ const VerdocsOkDialog = class {
         }
     }
     render() {
-        return (h(Host, { key: '12df94c0d9a87decf19d9a1b62c2ab7119681e03', class: this.closed ? 'closed' : '' }, h("div", { key: '29ecdb2e85dfb825d84efecd80729c184c798eed', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '15cdea7df133a16ad3da26b767c1f048c5b5be4a', class: "dialog" }, h("div", { key: '14739ce3942c365ab4dc1ffd12633865c8702ecf', class: "heading" }, this.heading), h("div", { key: 'c04aea2b91bbbe26b24d286a875720df437ac85a', class: "content" }, h("div", { key: '9e78186fed917d0bc4f8810fe2331f6b64c0ae43', class: "message", innerHTML: this.message }), h("div", { key: '26992bb398e78668235d42b87000128ac339bae9', class: "buttons" }, this.showCancel ? h("verdocs-button", { label: "CANCEL", variant: "outline", onClick: () => this.handleCancel() }) : h("div", { style: { display: 'none' } }), h("verdocs-button", { key: '077902f58556093dfe46056ad0c9d6750356e999', label: this.buttonLabel, onClick: () => this.handleOk() })))))));
+        return (h(Host, { key: 'a9c6c6602e84ea6d8e9c978ab113c7d931a6cfd8', class: this.closed ? 'closed' : '' }, h("div", { key: 'c9317b6e401e5ee7797aab79ee595f1b40a242e8', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '0a2f5e696a150484e44ae6b0a2d0978450295207', class: "dialog" }, h("div", { key: '8d660d324e1ec2a0a090c0ebfe9f5fae073e4331', class: "heading" }, this.heading), h("div", { key: '448e557cbc254f64aaf653e06969516b325eddd7', class: "content" }, h("div", { key: 'a55e1d3481579071ee820ee5caa3b077b451b323', class: "message", innerHTML: this.message }), h("div", { key: 'af5bfd84bc84cd1bc316aacc6cbdcd786cf05c58', class: "buttons" }, this.showCancel ? h("verdocs-button", { label: "CANCEL", variant: "outline", onClick: () => this.handleCancel() }) : h("div", { style: { display: 'none' } }), h("verdocs-button", { key: '6accd257ce924930184e05dd75ec8bb9da64a535', label: this.buttonLabel, onClick: () => this.handleOk() })))))));
     }
 };
 VerdocsOkDialog.style = verdocsOkDialogCss;

package/dist/esm/verdocs-organization-card_2.entry.js

@@ -22,7 +22,7 @@ const VerdocsOrganizationCard = class {
         console.log('Rendering org card', this.organization.thumbnail_url, this.organization);
         const fallbackIcon = BusinessIcon;
         const portalId = `verdocs-org-card-${this.organization.id}`;
-        return (h(Host, { key: '97272d216497af502a3cb2d6e0952bda802249e1', id: portalId }, this.organization.thumbnail_url ? h("img", { class: "icon", src: this.organization.thumbnail_url, alt: "Logo" }) : h("span", { class: "icon", innerHTML: fallbackIcon }), h("span", { key: 'e5f71759e662b6a1ad04ee9acf2710b9d7904a22', class: "content" }, (_a = this.organization) === null || _a === void 0 ? void 0 : _a.name), h("verdocs-portal", { key: '0496b9a82bca4289e6fb226e24c5fed23c4e8fb3', anchor: portalId }, h("div", { key: '991b528de45afb90d6c54f4ce6d6c415e9e2bc81', class: "verdocs-org-card-popup", style: { display: this.hovered ? 'block' : 'none' } }, this.organization.full_logo_url ? (h("div", { class: "popup-header-with-logo" }, h("img", { src: this.organization.full_logo_url, alt: "Logo" }), h("div", { class: "title" }, (_b = this.organization) === null || _b === void 0 ? void 0 : _b.name))) : (h("div", { class: "popup-header" }, h("span", { class: "status" }, h("span", { class: "icon", innerHTML: fallbackIcon })), h("span", { class: "title" }, (_c = this.organization) === null || _c === void 0 ? void 0 : _c.name))), h("div", { key: '54c746473d12e7428b2982c0f627d2d5ac078875', class: "popup-body" }, h("div", { key: 'a291de045b2cd5f6431e795b3b0da2a2187ec019', class: "field" }, h("strong", { key: '86cfad50f43e266fcbca1934458de84c6af791bf' }, "Joined"), dateFnsExports.format(new Date(((_d = this.organization) === null || _d === void 0 ? void 0 : _d.created_at) || undefined), 'LLL d, Y')), this.organization.url && (h("div", { key: '743cc0af65238631e94353b1c0a09718d556a3e5', class: "field" }, h("strong", { key: '55b51d9b2d4256ff4462ba28940331e3aff22e95' }, "Website"), h("a", { key: 'd6f11530ba3adc9c897fd2f26f47de8b9d17b807', href: (_e = this.organization) === null || _e === void 0 ? void 0 : _e.url, target: "_blank", rel: "nofollow" }, (_f = this.organization) === null || _f === void 0 ? void 0 : _f.url))))))));
+        return (h(Host, { key: 'fc6584eb52dd94bd4a68fa14cc3ffe3382b9ac30', id: portalId }, this.organization.thumbnail_url ? h("img", { class: "icon", src: this.organization.thumbnail_url, alt: "Logo" }) : h("span", { class: "icon", innerHTML: fallbackIcon }), h("span", { key: '77c094a92a020c080bb406ea05643d295afdbce8', class: "content" }, (_a = this.organization) === null || _a === void 0 ? void 0 : _a.name), h("verdocs-portal", { key: 'ff04880732101397965f9cc7f2198265bb532b3b', anchor: portalId }, h("div", { key: '9cbc7c9f7175ccff1f79859a75905b8b056b3dc9', class: "verdocs-org-card-popup", style: { display: this.hovered ? 'block' : 'none' } }, this.organization.full_logo_url ? (h("div", { class: "popup-header-with-logo" }, h("img", { src: this.organization.full_logo_url, alt: "Logo" }), h("div", { class: "title" }, (_b = this.organization) === null || _b === void 0 ? void 0 : _b.name))) : (h("div", { class: "popup-header" }, h("span", { class: "status" }, h("span", { class: "icon", innerHTML: fallbackIcon })), h("span", { class: "title" }, (_c = this.organization) === null || _c === void 0 ? void 0 : _c.name))), h("div", { key: '0278c1279797809493fdebe4a25613fd6ec702a3', class: "popup-body" }, h("div", { key: 'ec3a19327e768623802ba0f23140f226eeea1282', class: "field" }, h("strong", { key: 'b3bfc4918e28de9d768ed77c30ba26f74d253c9f' }, "Joined"), dateFnsExports.format(new Date(((_d = this.organization) === null || _d === void 0 ? void 0 : _d.created_at) || undefined), 'LLL d, Y')), this.organization.url && (h("div", { key: '42721ddbbf7d8de9ad232ca34e0ddc7afca7e917', class: "field" }, h("strong", { key: '1d6e9b91b00a2c79474828f59cdf6b613f7c6402' }, "Website"), h("a", { key: 'c7cc36bdd573e2f2644771a9573c72a6265fc371', href: (_e = this.organization) === null || _e === void 0 ? void 0 : _e.url, target: "_blank", rel: "nofollow" }, (_f = this.organization) === null || _f === void 0 ? void 0 : _f.url))))))));
     }
 };
 VerdocsOrganizationCard.style = verdocsOrganizationCardCss;
@@ -107,7 +107,7 @@ const VerdocsPortal = class {
         this.moved ? this.portal.remove() : (this.moved = true);
     }
     render() {
-        return (h(Host, { key: '6496c55ff467085e8d1d660f749abb2e70eb8c95', ref: el => (this.element = el), class: "verdocs-portal" }, h("slot", { key: '731cefa0a79a520279e255455a95e22d1255f424' })));
+        return (h(Host, { key: 'eeb176eb22239e9bd1859d87e50d9dba08a36c5a', ref: el => (this.element = el), class: "verdocs-portal" }, h("slot", { key: '0cc38913adf3b2d41e9d635a7c6bafac3e71fd8f' })));
     }
 };
 VerdocsPortal.style = verdocsPortalCss;

package/dist/esm/verdocs-pagination_2.entry.js

@@ -50,7 +50,7 @@ const VerdocsQuickFilter$1 = class VerdocsQuickFilter {
         const firstPage = Math.max(0, this.selectedPage - 2);
         const numPages = this.itemCount > 0 ? Math.ceil(this.itemCount / this.perPage) : 0;
         const pagesToDisplay = integerSequence(0, Math.ceil(this.itemCount / this.perPage)).slice(firstPage, firstPage + VISIBLE_PAGES);
-        return (h(Host, { key: 'b914afe290065b1f65b3632a1e205a0138d4ca96' }, this.selectedPage > 0 && h(PageButton, { key: '06d4c575361cffc6299409c66557208fef8180e9', page: 'first', selected: this.selectedPage, onClick: () => this.handleSelectPage(0) }), firstPage > 0 && h("div", { key: '14afa9724ff8159c20c372821fff58a98b721bc7', class: "ellipsis" }, "..."), pagesToDisplay.map(pageNumber => (h(PageButton, { page: pageNumber, selected: this.selectedPage, onClick: page => this.handleSelectPage(+page) }))), this.selectedPage < numPages - 1 && h("div", { key: '0b22a68cafaf3beda898442422a584cc9da811d9', class: "ellipsis" }, "..."), this.selectedPage < numPages - 1 && h(PageButton, { key: '56bfdb75c0a6bb0aab32aa61860051517fcf360b', page: 'last', selected: this.selectedPage, onClick: () => this.handleSelectPage(numPages - 1) })));
+        return (h(Host, { key: 'be5c85f6d219c3589c3ef508e2305cbebea4f320' }, this.selectedPage > 0 && h(PageButton, { key: 'de0c9f90c0af7b77f6d9112c7e2d43978511d0d7', page: 'first', selected: this.selectedPage, onClick: () => this.handleSelectPage(0) }), firstPage > 0 && h("div", { key: 'f89043de5ca509613e85e3dc00abc8bd3450be6d', class: "ellipsis" }, "..."), pagesToDisplay.map(pageNumber => (h(PageButton, { page: pageNumber, selected: this.selectedPage, onClick: page => this.handleSelectPage(+page) }))), this.selectedPage < numPages - 1 && h("div", { key: '2ddedd7acfab567d550e77bc9471f35114d427de', class: "ellipsis" }, "..."), this.selectedPage < numPages - 1 && h(PageButton, { key: '64be509651e68b79bc0f1084eb2e0204d769dfef', page: 'last', selected: this.selectedPage, onClick: () => this.handleSelectPage(numPages - 1) })));
     }
     get el() { return getElement(this); }
 };
@@ -139,7 +139,7 @@ const VerdocsQuickFilter = class {
         const longestLabelWidth = renderedTextWidth((longestOption === null || longestOption === void 0 ? void 0 : longestOption.label) || 'FILLER', '14px Inter, Barlow, sans-serif');
         const prefixWidth = renderedTextWidth(this.label, '14px Inter, Barlow, sans-serif');
         const minWidth = `${longestLabelWidth + prefixWidth + 40}px`;
-        return (h(Host, { key: '2775a9460418249e5830b3acc29bc501dfc0b7e9', class: { open: !!this.open }, style: { minWidth, display: 'inline-block' } }, h("div", { key: 'a0d32bee5bf3a83860d1ee34b70dd08e14ff6f5a', class: "control", onClick: e => this.toggleDropdown(e), onBlur: e => this.handleHideDropdown(e) }, h("div", { key: 'e28fc8c51bd4913814770bfa3eed9aec685fcdc7', class: "title", ref: el => (this.dropdownButton = el) }, h("span", { key: '56f45a29290ed821c2260b07e34c76ad6f4b3008', class: "prefix" }, this.label, ":"), selectedOption ? selectedOption.label : this.placeholder), h("div", { key: 'dcc1f197621169c83f7c935bb06f60f992ac3a58', style: { flex: '1' } }), h("div", { key: '059cede12c8b2c1bca6b53f7e1f01b424dd70882', class: "separator" }), h("div", { key: '722b64600dca7b946044a60700b042d61774dabb', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu" })), h("div", { key: '3988d0fd9076c4bc1bfb9d45d67f9354022a15cd', class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el), style: { minWidth } }, (_c = this.options) === null || _c === void 0 ? void 0 : _c.map(option => option.label ? (h("button", { onClick: e => this.handleSelectOption(e, option), class: `option ${option.value === this.value ? 'selected' : ''}`, disabled: option.disabled }, option.label)) : (h("div", { class: "separator" }))))));
+        return (h(Host, { key: '322a8f4a3843cec17261ac8a20004db1a6a2d8d7', class: { open: !!this.open }, style: { minWidth, display: 'inline-block' } }, h("div", { key: '1491f6b3986ccd0764a4dd5bc03ad66fc5d4b7b2', class: "control", onClick: e => this.toggleDropdown(e), onBlur: e => this.handleHideDropdown(e) }, h("div", { key: '485f1f741ced9c8af1a5eaffffbe87448b3337b4', class: "title", ref: el => (this.dropdownButton = el) }, h("span", { key: '01aefe07e5802cb69055ac7996fdf1fd1b58d5a5', class: "prefix" }, this.label, ":"), selectedOption ? selectedOption.label : this.placeholder), h("div", { key: 'a5c2a36da359f121a418299018fe6e424f3186b8', style: { flex: '1' } }), h("div", { key: 'c1f3ec97d938fe36d90e7047838c67238a4125c4', class: "separator" }), h("div", { key: '86c1ebdabf1b7fcf600f48d3dda1eb33a2184789', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu" })), h("div", { key: 'b4a49186874d81758eee6768f95b136378620439', class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el), style: { minWidth } }, (_c = this.options) === null || _c === void 0 ? void 0 : _c.map(option => option.label ? (h("button", { onClick: e => this.handleSelectOption(e, option), class: `option ${option.value === this.value ? 'selected' : ''}`, disabled: option.disabled }, option.label)) : (h("div", { class: "separator" }))))));
     }
     get el() { return getElement(this); }
 };