@verdocs/web-sdk 2.3.88 → 4.0.6

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

@@ -1,115 +1,116 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-172625c5.js';
-import './Types-5f31149e.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-8196ff47.js';
-import { g as getTemplateStore } from './TemplateStore-940da116.js';
-import { S as SDKError } from './errors-9b5498c8.js';
-import './index-4439b0d1.js';
-import './TemplateRoleStore-33229997.js';
-import './TemplateFieldStore-6e67e86b.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b89cf6a4.js';
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { g as getTemplateStore } from './TemplateStore-df5484bb.js';
+import { S as SDKError } from './errors-887f1e88.js';
+import './index-296aabaf.js';
+import './TemplateRoleStore-ddc3b96f.js';
+import './TemplateFieldStore-d7516adf.js';
+import './index-7456b04f.js';
 
-const verdocsBuildCss = "@-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-build{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-build .content{-ms-flex:1;flex:1;gap:20px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column}verdocs-build verdocs-template-attachments,verdocs-build verdocs-template-roles{margin:20px}verdocs-build verdocs-template-fields{border-top:1px solid #777777}verdocs-build verdocs-template-attachments{padding:20px;background:#ffffff}verdocs-build verdocs-template-fields{width:100%}verdocs-build verdocs-preview{-ms-flex:1;flex:1}verdocs-build .preview-container{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;width:100%;background-color:#eeeeee;max-height:100%}@media all and (max-width: 450px){verdocs-build .preview-container{-ms-flex-direction:column;flex-direction:column}}verdocs-build .preview-send-wrapper{display:-ms-flexbox;display:flex;-ms-flex:0 0 300px;flex:0 0 300px;background-color:#ffffff;-webkit-box-shadow:1px 1px 6px -2px #0000007f;box-shadow:1px 1px 6px -2px #0000007f}@media all and (max-width: 450px){verdocs-build .preview-send-wrapper{-ms-flex:0;flex:0}}verdocs-build .preview-preview-wrapper{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;overflow-y:scroll}";
+const verdocsBuildCss = "@-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-build{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-build .content{-ms-flex:1;flex:1;gap:20px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column}verdocs-build verdocs-template-attachments,verdocs-build verdocs-template-roles{margin:20px}verdocs-build verdocs-template-fields{border-top:1px solid #777777}verdocs-build verdocs-template-attachments{padding:20px;background:#ffffff}verdocs-build verdocs-template-fields{width:100%}verdocs-build verdocs-preview{-ms-flex:1;flex:1}verdocs-build .preview-container{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;width:100%;background-color:#eeeeee;max-height:100%}@media all and (max-width: 450px){verdocs-build .preview-container{-ms-flex-direction:column;flex-direction:column}}verdocs-build .preview-send-wrapper{display:-ms-flexbox;display:flex;-ms-flex:0 0 300px;flex:0 0 300px;background-color:#ffffff;-webkit-box-shadow:1px 1px 6px -2px rgba(0, 0, 0, 0.4980392157);box-shadow:1px 1px 6px -2px rgba(0, 0, 0, 0.4980392157)}@media all and (max-width: 450px){verdocs-build .preview-send-wrapper{-ms-flex:0;flex:0}}verdocs-build .preview-preview-wrapper{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;overflow-y:scroll}";
+const VerdocsBuildStyle0 = verdocsBuildCss;
 
 const VerdocsBuild = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.sdkError = createEvent(this, "sdkError", 7);
-    this.stepChanged = createEvent(this, "stepChanged", 7);
-    this.send = createEvent(this, "send", 7);
-    this.templateUpdated = createEvent(this, "templateUpdated", 7);
-    this.templateCreated = createEvent(this, "templateCreated", 7);
-    this.rolesUpdated = createEvent(this, "rolesUpdated", 7);
-    this.endpoint = VerdocsEndpoint.getDefault();
-    this.templateId = null;
-    this.step = 'preview';
-    this.store = null;
-  }
-  onTemplateIdChanged(newTemplateId) {
-    console.log('Template ID changed', newTemplateId);
-    this.loadTemplate(newTemplateId).catch((e) => console.log('Unknown Error', e));
-  }
-  onStepChanged(newStep) {
-    console.log('Step changed', newStep);
-    this.loadTemplate(this.templateId).catch((e) => console.log('Unknown Error', e));
-  }
-  async componentWillLoad() {
-    var _a, _b, _c;
-    try {
-      this.endpoint.loadSession();
-      if (!this.templateId) {
-        console.log(`[BUILD] No template ID, activating upload mode`);
-        this.step = 'attachments';
-        return;
-      }
-      if (!this.endpoint.session) {
-        console.log('[BUILD] Unable to start builder session, must be authenticated');
-        return;
-      }
-      this.loadTemplate(this.templateId).catch(e => console.log('[BUILD] Unable to load template', e));
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sdkError = createEvent(this, "sdkError", 7);
+        this.stepChanged = createEvent(this, "stepChanged", 7);
+        this.send = createEvent(this, "send", 7);
+        this.templateUpdated = createEvent(this, "templateUpdated", 7);
+        this.templateCreated = createEvent(this, "templateCreated", 7);
+        this.rolesUpdated = createEvent(this, "rolesUpdated", 7);
+        this.endpoint = VerdocsEndpoint.getDefault();
+        this.templateId = null;
+        this.step = 'preview';
+        this.store = null;
     }
-    catch (e) {
-      console.log('[BUILD] Error loading template', 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));
+    onTemplateIdChanged(newTemplateId) {
+        console.log('Template ID changed', newTemplateId);
+        this.loadTemplate(newTemplateId).catch((e) => console.log('Unknown Error', e));
     }
-  }
-  async loadTemplate(templateId) {
-    if (templateId) {
-      console.log('Loading store', templateId);
-      this.store = await getTemplateStore(this.endpoint, templateId, false);
-      // forceUpdate(this.el);
+    onStepChanged(newStep) {
+        console.log('Step changed', newStep);
+        this.loadTemplate(this.templateId).catch((e) => console.log('Unknown Error', e));
     }
-  }
-  handleCancel(e) {
-    console.log('Cancel', e.detail);
-    this.step = 'preview';
-  }
-  async handleTemplateCreated(templateId) {
-    var _a;
-    await this.loadTemplate(templateId);
-    this.templateId = templateId;
-    this.step = 'roles';
-    (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit('roles');
-  }
-  async handleRolesUpdated(e) {
-    var _a;
-    (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
-  }
-  async handleTemplateUpdated(e) {
-    var _a;
-    (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
-  }
-  handleAttachmentsNext() {
-    var _a;
-    this.step = 'roles';
-    (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit('roles');
-  }
-  handleRolesNext() {
-    var _a;
-    this.step = 'fields';
-    (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit('fields');
-  }
-  handleStepChanged(step) {
-    var _a;
-    console.log('osc', step);
-    this.step = step;
-    (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit(step);
-  }
-  render() {
-    if (!this.endpoint.session) {
-      return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+    async componentWillLoad() {
+        var _a, _b, _c;
+        try {
+            this.endpoint.loadSession();
+            if (!this.templateId) {
+                console.log(`[BUILD] No template ID, activating upload mode`);
+                this.step = 'attachments';
+                return;
+            }
+            if (!this.endpoint.session) {
+                console.log('[BUILD] Unable to start builder session, must be authenticated');
+                return;
+            }
+            this.loadTemplate(this.templateId).catch(e => console.log('[BUILD] Unable to load template', e));
+        }
+        catch (e) {
+            console.log('[BUILD] Error loading template', 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));
+        }
     }
-    if (!this.store) {
-      console.log('[BUILD] No template ID, rendering created view');
-      return (h(Host, null, h("div", { class: "content" }, h("verdocs-template-build-tabs", { endpoint: this.endpoint, templateId: this.templateId, step: "attachments", onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, onStepChanged: e => this.handleStepChanged(e.detail) }), h("verdocs-template-create", { endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleAttachmentsNext(), onTemplateCreated: e => this.handleTemplateCreated(e.detail.templateId) }))));
+    async loadTemplate(templateId) {
+        if (templateId) {
+            console.log('Loading store', templateId);
+            this.store = await getTemplateStore(this.endpoint, templateId, false);
+            // forceUpdate(this.el);
+        }
     }
-    console.log('[BUILD] Rendering build view', this.templateId, this.step, ['attachments', 'roles', 'settings', 'fields', 'preview'].indexOf(this.step));
-    return (h(Host, null, h("div", { class: "content" }, h("verdocs-template-build-tabs", { endpoint: this.endpoint, templateId: this.templateId, step: this.step, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, onStepChanged: e => this.handleStepChanged(e.detail) }), this.step === 'attachments' && (h("verdocs-template-attachments", { templateId: this.templateId, endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleAttachmentsNext(), onTemplateUpdated: e => this.handleTemplateUpdated(e) })), this.step === 'roles' && (h("verdocs-template-roles", { templateId: this.templateId, endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleRolesNext(), onRolesUpdated: e => this.handleRolesUpdated(e) })), this.step === 'settings' && (h("div", { style: { flexDirection: 'column', gap: '20px', display: 'flex', maxWidth: '400px', margin: '20px' } }, h("verdocs-template-name", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), h("verdocs-template-reminders", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), h("verdocs-template-visibility", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }))), this.step === 'fields' && h("verdocs-template-fields", { templateId: this.templateId, endpoint: this.endpoint, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), this.step === 'preview' && (h("div", { class: "preview-container" }, h("div", { class: "preview-send-wrapper" }, h("verdocs-send", { templateId: this.templateId, endpoint: this.endpoint, onSend: e => { var _a; return (_a = this.send) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, style: { width: '100%' } })), h("div", { class: "preview-preview-wrapper" }, h("verdocs-preview", { templateId: this.templateId, endpoint: this.endpoint, style: { display: 'flex', flex: '1', maxWidth: '1000px' } })))))));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "templateId": ["onTemplateIdChanged"],
-    "step": ["onStepChanged"]
-  }; }
+    handleCancel(e) {
+        console.log('Cancel', e.detail);
+        this.step = 'preview';
+    }
+    async handleTemplateCreated(templateId) {
+        var _a;
+        await this.loadTemplate(templateId);
+        this.templateId = templateId;
+        this.step = 'roles';
+        (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit('roles');
+    }
+    async handleRolesUpdated(e) {
+        var _a;
+        (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
+    }
+    async handleTemplateUpdated(e) {
+        var _a;
+        (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
+    }
+    handleAttachmentsNext() {
+        var _a;
+        this.step = 'roles';
+        (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit('roles');
+    }
+    handleRolesNext() {
+        var _a;
+        this.step = 'fields';
+        (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit('fields');
+    }
+    handleStepChanged(step) {
+        var _a;
+        console.log('osc', step);
+        this.step = step;
+        (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit(step);
+    }
+    render() {
+        if (!this.endpoint.session) {
+            return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+        }
+        if (!this.store) {
+            console.log('[BUILD] No template ID, rendering created view');
+            return (h(Host, null, h("div", { class: "content" }, h("verdocs-template-build-tabs", { endpoint: this.endpoint, templateId: this.templateId, step: "attachments", onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, onStepChanged: e => this.handleStepChanged(e.detail) }), h("verdocs-template-create", { endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleAttachmentsNext(), onTemplateCreated: e => this.handleTemplateCreated(e.detail.templateId) }))));
+        }
+        console.log('[BUILD] Rendering build view', this.templateId, this.step, ['attachments', 'roles', 'settings', 'fields', 'preview'].indexOf(this.step));
+        return (h(Host, null, h("div", { class: "content" }, h("verdocs-template-build-tabs", { endpoint: this.endpoint, templateId: this.templateId, step: this.step, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, onStepChanged: e => this.handleStepChanged(e.detail) }), this.step === 'attachments' && (h("verdocs-template-attachments", { templateId: this.templateId, endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleAttachmentsNext(), onTemplateUpdated: e => this.handleTemplateUpdated(e) })), this.step === 'roles' && (h("verdocs-template-roles", { templateId: this.templateId, endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleRolesNext(), onRolesUpdated: e => this.handleRolesUpdated(e) })), this.step === 'settings' && (h("div", { style: { flexDirection: 'column', gap: '20px', display: 'flex', maxWidth: '400px', margin: '20px' } }, h("verdocs-template-name", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), h("verdocs-template-reminders", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), h("verdocs-template-visibility", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }))), this.step === 'fields' && h("verdocs-template-fields", { templateId: this.templateId, endpoint: this.endpoint, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), this.step === 'preview' && (h("div", { class: "preview-container" }, h("div", { class: "preview-send-wrapper" }, h("verdocs-send", { templateId: this.templateId, endpoint: this.endpoint, onSend: e => { var _a; return (_a = this.send) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, style: { width: '100%' } })), h("div", { class: "preview-preview-wrapper" }, h("verdocs-preview", { templateId: this.templateId, endpoint: this.endpoint, style: { display: 'flex', flex: '1', maxWidth: '1000px' } })))))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "templateId": ["onTemplateIdChanged"],
+        "step": ["onStepChanged"]
+    }; }
 };
-VerdocsBuild.style = verdocsBuildCss;
+VerdocsBuild.style = VerdocsBuildStyle0;
 
 export { VerdocsBuild as verdocs_build };

package/dist/esm/verdocs-button-panel.entry.js

@@ -1,76 +1,77 @@
-import { r as registerInstance, h, H as Host } from './index-172625c5.js';
-import { c as createPopper } from './popper-15e448b4.js';
+import { r as registerInstance, h, H as Host } from './index-b89cf6a4.js';
+import { c as createPopper } from './popper-0fbeff6d.js';
 
 const verdocsButtonPanelCss = "@-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-button-panel{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block}verdocs-button-panel .icon{display:inline-block;cursor:pointer;opacity:0.6}verdocs-button-panel .icon svg{fill:#707ae5}verdocs-button-panel .icon:hover{opacity:1}.verdocs-button-panel-content{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;display:none;background:#ffffff;color:#33364b;width:320px;font-weight:bold;padding:15px;font-size:14px;position:relative;border-radius:4px;z-index:10000}.verdocs-button-panel-content .arrow,.verdocs-button-panel-content .arrow::before{position:absolute;width:8px;height:8px;background:inherit}.verdocs-button-panel-content .arrow{visibility:hidden;top:-4px}.verdocs-button-panel-content .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}.verdocs-button-panel-content[data-show]{display:block}.verdocs-button-panel-content[data-popper-placement^=top]>.arrow{bottom:-4px}.verdocs-button-panel-content[data-popper-placement^=bottom]>.arrow{top:-4px}.verdocs-button-panel-content[data-popper-placement^=left]>.arrow{right:-4px}.verdocs-button-panel-content[data-popper-placement^=right]>.arrow{left:-4px}.verdocs-button-panel-content h6{font-size:16px;font-weight:bold;margin:0 0 16px 0;color:#092c4c;border-bottom:1px solid #cccccc}";
+const VerdocsButtonPanelStyle0 = verdocsButtonPanelCss;
 
 const VerdocsButtonPanel = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    // Not marked as @State because it's not the thing that controls our rendering
-    this.showing = false;
-    this.icon = '';
-  }
-  componentDidRender() {
-    document.body.appendChild(this.panelEl);
-    if (this.popperInstance) {
-      this.popperInstance.destroy();
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        // Not marked as @State because it's not the thing that controls our rendering
+        this.showing = false;
+        this.icon = '';
     }
-    this.popperInstance = createPopper(this.iconEl, this.panelEl, {
-    // placement: 'top-end',
-    // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],
-    });
-  }
-  disconnectedCallback() {
-    if (this.popperInstance) {
-      this.popperInstance.destroy();
-      this.popperInstance = null;
+    componentDidRender() {
+        document.body.appendChild(this.panelEl);
+        if (this.popperInstance) {
+            this.popperInstance.destroy();
+        }
+        this.popperInstance = createPopper(this.iconEl, this.panelEl, {
+        // placement: 'top-end',
+        // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],
+        });
     }
-    if (this.panelEl) {
-      this.panelEl.remove();
+    disconnectedCallback() {
+        if (this.popperInstance) {
+            this.popperInstance.destroy();
+            this.popperInstance = null;
+        }
+        if (this.panelEl) {
+            this.panelEl.remove();
+        }
     }
-  }
-  async showPanel() {
-    var _a, _b;
-    (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
-    (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
-    this.showing = true;
-    this.hiderEl = document.createElement('div');
-    this.hiderEl.id = 'verdocs-button-panel-hider';
-    this.hiderEl.style.zIndex = '100';
-    this.hiderEl.style.position = 'absolute';
-    this.hiderEl.style.top = '0px';
-    this.hiderEl.style.left = '0px';
-    this.hiderEl.style.right = '0px';
-    this.hiderEl.style.bottom = '0px';
-    this.hiderEl.onclick = (e) => {
-      e.stopPropagation();
-      this.toggle();
-    };
-    document.body.appendChild(this.hiderEl);
-  }
-  async hidePanel() {
-    var _a;
-    Array.from(document.getElementsByClassName('verdocs-button-panel-content')).forEach(el => {
-      el.removeAttribute('data-show');
-    });
-    (_a = document.getElementById('verdocs-button-panel-hider')) === null || _a === void 0 ? void 0 : _a.remove();
-    this.showing = false;
-  }
-  async toggle() {
-    if (this.showing) {
-      await this.hidePanel();
+    async showPanel() {
+        var _a, _b;
+        (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
+        (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
+        this.showing = true;
+        this.hiderEl = document.createElement('div');
+        this.hiderEl.id = 'verdocs-button-panel-hider';
+        this.hiderEl.style.zIndex = '100';
+        this.hiderEl.style.position = 'absolute';
+        this.hiderEl.style.top = '0px';
+        this.hiderEl.style.left = '0px';
+        this.hiderEl.style.right = '0px';
+        this.hiderEl.style.bottom = '0px';
+        this.hiderEl.onclick = (e) => {
+            e.stopPropagation();
+            this.toggle();
+        };
+        document.body.appendChild(this.hiderEl);
     }
-    else {
-      await this.showPanel();
+    async hidePanel() {
+        var _a;
+        Array.from(document.getElementsByClassName('verdocs-button-panel-content')).forEach(el => {
+            el.removeAttribute('data-show');
+        });
+        (_a = document.getElementById('verdocs-button-panel-hider')) === null || _a === void 0 ? void 0 : _a.remove();
+        this.showing = false;
+    }
+    async toggle() {
+        if (this.showing) {
+            await this.hidePanel();
+        }
+        else {
+            await this.showPanel();
+        }
+    }
+    render() {
+        return (h(Host, { key: 'ae010f54975177c5c9afcd285c11aa66d044dd04' }, h("div", { key: '4146c43e682c7d50e1ceda20ebc0d2083dbe6f12', class: "icon", innerHTML: this.icon, onClick: (e) => {
+                e.stopPropagation();
+                return this.toggle();
+            }, ref: el => (this.iconEl = el) }), h("div", { key: '20f21d910d41b23d1608b04d90473f6f7950f5b4', role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, h("div", { key: 'dc5070f0bfd13bce172a8e0e8cbbcb3520ca33dc', "data-popper-arrow": "true", class: "arrow" }), h("slot", { key: 'b9ee2f03c5bdf1f672dd5845a757e09cde1c18dc' }))));
     }
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "icon", innerHTML: this.icon, onClick: (e) => {
-        e.stopPropagation();
-        return this.toggle();
-      }, ref: el => (this.iconEl = el) }), h("div", { role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, h("div", { "data-popper-arrow": "true", class: "arrow" }), h("slot", null))));
-  }
 };
-VerdocsButtonPanel.style = verdocsButtonPanelCss;
+VerdocsButtonPanel.style = VerdocsButtonPanelStyle0;
 
 export { VerdocsButtonPanel as verdocs_button_panel };

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

@@ -1,107 +1,110 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-172625c5.js';
-import { c as createPopper } from './popper-15e448b4.js';
-import { V as VerdocsToast } from './Toast-f3b8fd46.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b89cf6a4.js';
+import { c as createPopper } from './popper-0fbeff6d.js';
+import { V as VerdocsToast } from './Toast-b71de686.js';
 
 const verdocsButtonCss = "@-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-button button{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;text-transform:uppercase;-ms-flex-pack:center;justify-content:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;font-weight:700;cursor:pointer;margin:0}verdocs-button button:disabled{cursor:inherit;pointer-events:none}verdocs-button button .icon{margin:0 12px}verdocs-button button .icon svg{fill:#ffffff;display:block}verdocs-button button .button-label{padding:0 12px}verdocs-button button.small{height:34px;font-size:13px}verdocs-button button.small .icon{margin:0 4px}verdocs-button button.small .icon svg{margin:2px 0 0 0;height:20px}verdocs-button button.small .button-label{padding:0 4px}verdocs-button button.normal{height:44px;font-size:14px}verdocs-button button.normal .icon.start{margin:0 4px 0 8px}verdocs-button button.normal .icon.end{margin:0 8px 0 4px}verdocs-button button.normal .icon svg{margin:2px 0 0 0;height:22px}verdocs-button button.normal .button-label{padding:0 10px}verdocs-button button.medium{height:52px;font-size:16px}verdocs-button button.medium .icon.start{margin:0 0 0 18px}verdocs-button button.medium .icon.end{margin:0 18px 0 0}verdocs-button button.medium .icon svg{margin:2px 0 0 0;height:26px}verdocs-button button.medium .button-label{padding:0 20px}verdocs-button button.large{height:60px;font-size:20px}verdocs-button button.large .icon.start{margin:0 0 0 24px}verdocs-button button.large .icon.end{margin:0 24px 0 0}verdocs-button button.large .icon svg{margin:2px 0 0 0;height:32px}verdocs-button button.large .button-label{padding:0 34px}verdocs-button button.standard{background:#55bc81;border-radius:4px;outline:none;border:none;color:white}verdocs-button button.standard:disabled{background-color:#999999;cursor:default}verdocs-button button.standard:active:not([disabled]){-webkit-filter:brightness(110%);filter:brightness(110%)}verdocs-button button.text{color:#4c56cb;background:transparent;font-weight:500;padding:0 4px;outline:none;border:none}verdocs-button button.text:disabled{color:#999999}verdocs-button button.text:active:not([disabled]){-webkit-filter:brightness(130%);filter:brightness(130%)}verdocs-button button.text .icon svg{fill:#4c56cb}verdocs-button button.outline{border:1px solid #4c56cb;color:#4c56cb;outline:none;background:transparent;border-radius:4px;padding:0 20px}verdocs-button button.outline:disabled{color:#999999;border:1px solid #999999}verdocs-button button.outline:active{background:#4c56cb;color:white}verdocs-button button.outline .icon svg{fill:#4c56cb}";
+const VerdocsButtonStyle0 = verdocsButtonCss;
 
 const VerdocsButton = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.label = undefined;
-    this.startIcon = null;
-    this.endIcon = null;
-    this.size = 'normal';
-    this.type = 'button';
-    this.variant = 'standard';
-    this.disabled = false;
-  }
-  render() {
-    return (h("button", { disabled: this.disabled, type: this.type, class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? h("span", { class: "icon start", innerHTML: this.startIcon }) : null, h("span", { class: "button-label" }, this.label), this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.label = undefined;
+        this.startIcon = null;
+        this.endIcon = null;
+        this.size = 'normal';
+        this.type = 'button';
+        this.variant = 'standard';
+        this.disabled = false;
+    }
+    render() {
+        return (h("button", { key: 'd796a22dcd2b135f3430d26a4cb4e8caf9109c9b', disabled: this.disabled, type: this.type, class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? h("span", { class: "icon start", innerHTML: this.startIcon }) : null, h("span", { key: 'c1de665728ed0e4bf739e4f5b30efc67cb81cfbf', class: "button-label" }, this.label), this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
+    }
 };
-VerdocsButton.style = verdocsButtonCss;
+VerdocsButton.style = VerdocsButtonStyle0;
 
 const verdocsHelpIconCss = "@-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-help-icon{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block;opacity:0.3;position:relative}verdocs-help-icon:hover{opacity:1}verdocs-help-icon .icon{display:inline-block}verdocs-help-icon .tooltip{display:none;min-width:200px;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;background:#ffffff;color:#33364b;max-width:240px;font-weight:bold;position:absolute;padding:5px 10px;font-size:13px;border-radius:4px;z-index:10000}verdocs-help-icon .tooltip .arrow,verdocs-help-icon .tooltip .arrow::before{position:absolute;width:8px;height:8px;background:inherit}verdocs-help-icon .tooltip .arrow{visibility:hidden;top:-4px}verdocs-help-icon .tooltip .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}verdocs-help-icon .tooltip[data-show]{display:block}verdocs-help-icon .tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}verdocs-help-icon .tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}verdocs-help-icon .tooltip[data-popper-placement^=left]>.arrow{right:-4px}verdocs-help-icon .tooltip[data-popper-placement^=right]>.arrow{left:-4px}";
+const VerdocsHelpIconStyle0 = verdocsHelpIconCss;
 
 const helpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="#5c6575"><path d="M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z"/></svg>';
 const VerdocsHelpIcon = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.text = '';
-    this.icon = helpIcon;
-    this.containerId = `verdocs-help-icon-${Math.random().toString(36).substring(2, 11)}`;
-  }
-  componentDidLoad() {
-    this.popperInstance = createPopper(this.iconEl, this.tooltipEl, {
-    // placement: 'top-end',
-    // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],
-    });
-  }
-  disconnectedCallback() {
-    if (this.popperInstance) {
-      this.popperInstance.destroy();
-      this.popperInstance = null;
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.text = '';
+        this.icon = helpIcon;
+        this.containerId = `verdocs-help-icon-${Math.random().toString(36).substring(2, 11)}`;
+    }
+    componentDidLoad() {
+        this.popperInstance = createPopper(this.iconEl, this.tooltipEl, {
+        // placement: 'top-end',
+        // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],
+        });
+    }
+    disconnectedCallback() {
+        if (this.popperInstance) {
+            this.popperInstance.destroy();
+            this.popperInstance = null;
+        }
+    }
+    show() {
+        var _a, _b;
+        (_a = this.tooltipEl) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
+        (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
+    }
+    hide() {
+        var _a;
+        (_a = this.tooltipEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
+    }
+    render() {
+        return (h(Host, { key: '4efe69ab5b8edeffe892fbce06d31dddf3c17e6b', class: {} }, h("div", { key: '05917e2f774970456b6c56a528fbdfe5b1a95586', "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), h("div", { key: '25c6b233a2e8dc60425d27611d0f9ea1b8804a90', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": "bottom", ref: el => (this.tooltipEl = el) }, h("span", { key: '5ae3b1fce0724c421dc13c4439e79a9e88e4b40a', innerHTML: this.text }), h("div", { key: '136ce3de3ec515328f8b47fb35c052aad6e4e223', "data-popper-arrow": "true", class: "arrow" }))));
     }
-  }
-  show() {
-    var _a, _b;
-    (_a = this.tooltipEl) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
-    (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
-  }
-  hide() {
-    var _a;
-    (_a = this.tooltipEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
-  }
-  render() {
-    return (h(Host, { class: {} }, h("div", { "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), h("div", { id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": "bottom", ref: el => (this.tooltipEl = el) }, h("span", { innerHTML: this.text }), h("div", { "data-popper-arrow": "true", class: "arrow" }))));
-  }
 };
-VerdocsHelpIcon.style = verdocsHelpIconCss;
+VerdocsHelpIcon.style = VerdocsHelpIconStyle0;
 
 const verdocsTextInputCss = "@-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-text-input{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px 0;display:block}verdocs-text-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #707ae5;border-radius:4px;background:#ffffff;color:#000;width:100%;font-size:16px;height:28px;padding:4px 12px;outline:none}verdocs-text-input .input-element:disabled{border:1px solid #aeb4bf;background:#f5f5fa}verdocs-text-input .input-element::-webkit-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-moz-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:focus{outline:1px solid #7d88ff}verdocs-text-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}verdocs-text-input .required{color:red;margin-left:2px;display:inline-block}verdocs-text-input [data-lastpass-icon-root]{display:none !important}verdocs-text-input .input-container{position:relative}verdocs-text-input .clear{top:7px;right:5px;width:18px;height:18px;fill:#cccccc;position:absolute}verdocs-text-input .clear:hover{fill:#720101;cursor:pointer}verdocs-text-input .copy{top:7px;right:5px;width:18px;height:18px;fill:#cccccc;position:absolute}verdocs-text-input .copy:hover{fill:#654dcb;cursor:pointer}verdocs-text-input.clearable .input-element,verdocs-text-input.copyable .input-element{padding-right:32px}";
+const VerdocsTextInputStyle0 = verdocsTextInputCss;
 
 const ClearIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.881 122.88"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M61.44,0c33.933,0,61.441,27.507,61.441,61.439 c0,33.933-27.508,61.44-61.441,61.44C27.508,122.88,0,95.372,0,61.439C0,27.507,27.508,0,61.44,0L61.44,0z M81.719,36.226 c1.363-1.363,3.572-1.363,4.936,0c1.363,1.363,1.363,3.573,0,4.936L66.375,61.439l20.279,20.278c1.363,1.363,1.363,3.573,0,4.937 c-1.363,1.362-3.572,1.362-4.936,0L61.44,66.376L41.162,86.654c-1.362,1.362-3.573,1.362-4.936,0c-1.363-1.363-1.363-3.573,0-4.937 l20.278-20.278L36.226,41.162c-1.363-1.363-1.363-3.573,0-4.936c1.363-1.363,3.573-1.363,4.936,0L61.44,56.504L81.719,36.226 L81.719,36.226z"/></g></svg>`;
 const CopyIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M15.988 3.012A2.25 2.25 0 0118 5.25v6.5A2.25 2.25 0 0115.75 14H13.5V7A2.5 2.5 0 0011 4.5H8.128a2.252 2.252 0 011.884-1.488A2.25 2.25 0 0112.25 1h1.5a2.25 2.25 0 012.238 2.012zM11.5 3.25a.75.75 0 01.75-.75h1.5a.75.75 0 01.75.75v.25h-3v-.25z" clip-rule="evenodd" /><path fill-rule="evenodd" d="M2 7a1 1 0 011-1h8a1 1 0 011 1v10a1 1 0 01-1 1H3a1 1 0 01-1-1V7zm2 3.25a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75zm0 3.5a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75z" clip-rule="evenodd" /></svg>`;
 const VerdocsTextInput = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.value = '';
-    this.label = '';
-    this.placeholder = '';
-    this.autocomplete = '';
-    this.helpText = '';
-    this.clearable = false;
-    this.copyable = false;
-    this.type = 'text';
-    this.disabled = false;
-    this.required = false;
-  }
-  copyToClipboard() {
-    this.inputEl.select();
-    navigator.clipboard
-      .writeText(this.value)
-      .then(() => VerdocsToast('Copied!'))
-      .catch(e => console.log('Error copying to clipboard', e));
-  }
-  render() {
-    return (h(Host, { class: `input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}` }, h("label", null, this.label && (h("div", { class: "input-label" }, this.label + ':', this.required && h("span", { class: "required" }, "*"))), h("div", { class: "input-container" }, h("input", { type: this.type, value: this.value, required: this.required, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete, ref: el => (this.inputEl = el), onInput: (e) => (this.value = e.target.value) }), this.clearable && this.value && (h("span", { innerHTML: ClearIcon, class: "clear", onClick: () => {
-        // We need to allow the onInput event to fire first in case
-        // the user was focused on this field before clicking clear.
-        setTimeout(() => {
-          var _a;
-          this.value = '';
-          (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setAttribute('value', '');
-          // We need to allow the value to "settle"
-          setTimeout(() => {
-            var _a, _b;
-            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event('focusout'));
-            (_b = this.inputEl) === null || _b === void 0 ? void 0 : _b.blur();
-          }, 50);
-        }, 50);
-      } })), !this.clearable && this.copyable && this.value && h("span", { innerHTML: CopyIcon, class: "copy", onClick: () => this.copyToClipboard() })), this.helpText && h("verdocs-help-icon", { text: this.helpText }))));
-  }
-  get hostEl() { return getElement(this); }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.value = '';
+        this.label = '';
+        this.placeholder = '';
+        this.autocomplete = '';
+        this.helpText = '';
+        this.clearable = false;
+        this.copyable = false;
+        this.type = 'text';
+        this.disabled = false;
+        this.required = false;
+    }
+    copyToClipboard() {
+        this.inputEl.select();
+        navigator.clipboard
+            .writeText(this.value)
+            .then(() => VerdocsToast('Copied!'))
+            .catch(e => console.log('Error copying to clipboard', e));
+    }
+    render() {
+        return (h(Host, { key: 'e71c4ce13dfab7ae8c7ca4b7eb64569cb817d8ce', class: `input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}` }, h("label", { key: '4a2a6be345baebfc23ce46fd765e051e2aca39de' }, this.label && (h("div", { key: '2a30635cbee56e7d3024e639366ed2d6618fa526', class: "input-label" }, this.label + ':', this.required && h("span", { key: '08a6295cdaf9b96d9b56391395635ddeb4e80a8e', class: "required" }, "*"))), h("div", { key: 'b2a5385fa49b86aef69f2d52a02267d48140fd58', class: "input-container" }, h("input", { key: '5b307bf77e7175c65c04e2d7a76e7da8dfc15d7c', type: this.type, value: this.value, required: this.required, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete, ref: el => (this.inputEl = el), onInput: (e) => (this.value = e.target.value) }), this.clearable && this.value && (h("span", { key: '566da7c21ce7fe8f41b08b3b69c8b7435c5aab82', innerHTML: ClearIcon, class: "clear", onClick: () => {
+                // We need to allow the onInput event to fire first in case
+                // the user was focused on this field before clicking clear.
+                setTimeout(() => {
+                    var _a;
+                    this.value = '';
+                    (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setAttribute('value', '');
+                    // We need to allow the value to "settle"
+                    setTimeout(() => {
+                        var _a, _b;
+                        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event('focusout'));
+                        (_b = this.inputEl) === null || _b === void 0 ? void 0 : _b.blur();
+                    }, 50);
+                }, 50);
+            } })), !this.clearable && this.copyable && this.value && h("span", { key: '02b7f45e12e9cf5810d1acd3b4f33062bd558517', innerHTML: CopyIcon, class: "copy", onClick: () => this.copyToClipboard() })), this.helpText && h("verdocs-help-icon", { key: '3ddca8b8197c0ba01f6725e57b617f73fd3f0739', text: this.helpText }))));
+    }
+    get hostEl() { return getElement(this); }
 };
-VerdocsTextInput.style = verdocsTextInputCss;
+VerdocsTextInput.style = VerdocsTextInputStyle0;
 
 export { VerdocsButton as verdocs_button, VerdocsHelpIcon as verdocs_help_icon, VerdocsTextInput as verdocs_text_input };