@verdocs/web-sdk 2.3.87 → 4.0.5

package/dist/components/verdocs-field-timestamp2.js

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
-import { g as getRGBA } from './Colors.js';
+import { getRGBA } from '@verdocs/js-sdk';
 import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore.js';
 import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
 import { g as getFieldSettings } from './utils.js';
-import { F as FORMAT_TIMESTAMP } from './Types2.js';
+import { a as FORMAT_TIMESTAMP } from './Types.js';
 import { S as SettingsIcon } from './Icons.js';
 import { d as defineCustomElement$8 } from './verdocs-button2.js';
 import { d as defineCustomElement$7 } from './verdocs-checkbox2.js';
@@ -13,148 +13,151 @@ import { d as defineCustomElement$4 } from './verdocs-portal2.js';
 import { d as defineCustomElement$3 } from './verdocs-select-input2.js';
 import { d as defineCustomElement$2 } from './verdocs-template-field-properties2.js';
 import { d as defineCustomElement$1 } from './verdocs-text-input2.js';
-import { f as format } from './index2.js';
+import { d as dateFns } from './index4.js';
 
-const verdocsFieldTimestampCss = "@-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-field-timestamp{width:160px;height:15px;opacity:0.5;display:block;font-size:9px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-field-timestamp.done{opacity:1}verdocs-field-timestamp input{position:absolute;cursor:inherit;width:100%;height:100%;font-size:9px;background:none;font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-timestamp input.hide{display:none}verdocs-field-timestamp.required{border:1px solid #cc0000}verdocs-field-timestamp.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-timestamp verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-timestamp verdocs-button-panel[data-active],verdocs-field-timestamp verdocs-button-panel:hover{opacity:1}verdocs-field-timestamp verdocs-button-panel .icon svg{fill:#333333}verdocs-field-timestamp verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-timestamp .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-timestamp .settings-icon svg{fill:#707ae5}verdocs-field-timestamp .settings-icon:hover{opacity:1}";
+const verdocsFieldTimestampCss = "@-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-field-timestamp{width:160px;height:15px;opacity:0.5;display:block;font-size:9px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-field-timestamp.done{opacity:1}verdocs-field-timestamp input{position:absolute;cursor:inherit;width:100%;height:100%;font-size:9px;background:none;font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-timestamp input.hide{display:none}verdocs-field-timestamp.required{border:1px solid rgb(204, 0, 0)}verdocs-field-timestamp.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-timestamp verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-timestamp verdocs-button-panel[data-active],verdocs-field-timestamp verdocs-button-panel:hover{opacity:1}verdocs-field-timestamp verdocs-button-panel .icon svg{fill:#333333}verdocs-field-timestamp verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-timestamp .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-timestamp .settings-icon svg{fill:#707ae5}verdocs-field-timestamp .settings-icon:hover{opacity:1}";
+const VerdocsFieldTimestampStyle0 = verdocsFieldTimestampCss;
 
-const VerdocsFieldTimestamp = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.settingsChanged = createEvent(this, "settingsChanged", 7);
-    this.deleted = createEvent(this, "deleted", 7);
-    this.fieldStore = null;
-    this.roleStore = null;
-    this.templateid = '';
-    this.fieldname = '';
-    this.disabled = false;
-    this.editable = false;
-    this.moveable = false;
-    this.done = false;
-    this.xscale = 1;
-    this.yscale = 1;
-    this.pagenumber = 1;
-    this.showingProperties = false;
-  }
-  async focusField() {
-    this.el.focus();
-  }
-  async showSettingsPanel() {
-    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
-    if (settingsPanel && settingsPanel.showPanel) {
-      settingsPanel.showPanel();
+const VerdocsFieldTimestamp = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldTimestamp extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.settingsChanged = createEvent(this, "settingsChanged", 7);
+        this.deleted = createEvent(this, "deleted", 7);
+        this.fieldStore = null;
+        this.roleStore = null;
+        this.templateid = '';
+        this.fieldname = '';
+        this.disabled = false;
+        this.editable = false;
+        this.moveable = false;
+        this.done = false;
+        this.xscale = 1;
+        this.yscale = 1;
+        this.pagenumber = 1;
+        this.showingProperties = false;
     }
-  }
-  async hideSettingsPanel() {
-    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
-    if (settingsPanel && settingsPanel.hidePanel) {
-      settingsPanel.hidePanel();
+    async focusField() {
+        this.el.focus();
     }
-  }
-  async componentWillLoad() {
-    this.fieldStore = getTemplateFieldStore(this.templateid);
-    this.roleStore = getTemplateRoleStore(this.templateid);
-  }
-  render() {
-    var _a, _b;
-    const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
-    const roleIndex = getRoleIndex(this.roleStore, field.role_name);
-    const backgroundColor = field['rgba'] || getRGBA(roleIndex);
-    if (!field) {
-      return h(Fragment, null);
+    async showSettingsPanel() {
+        const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
+        if (settingsPanel && settingsPanel.showPanel) {
+            settingsPanel.showPanel();
+        }
     }
-    const settings = getFieldSettings(field);
-    const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
-    const value = settings.value || new Date().toISOString();
-    const dt = new Date(value);
-    const formatted = format(dt, FORMAT_TIMESTAMP);
-    if (this.done) {
-      return h(Host, { class: { done: this.done } }, formatted);
+    async hideSettingsPanel() {
+        const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
+        if (settingsPanel && settingsPanel.hidePanel) {
+            settingsPanel.hidePanel();
+        }
     }
-    return (h(Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order,
-      // TODO: It would really make more sense to show the date and time but the default width of 64px for this field
-      // is encoded in a ton of existing entries in the database and is hard to change.
-      value: formatted, disabled: true, ref: el => (this.el = el) }), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
-        e.stopPropagation();
-        this.showingProperties = !this.showingProperties;
-      } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
-        var _a;
-        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name });
-        return this.hideSettingsPanel();
-      }, onSettingsChanged: e => {
-        var _a;
-        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
-        return this.hideSettingsPanel();
-      }, helpText: 'Time stamps are automatically set when the recipient signs the document.' })))))));
-  }
-  static get style() { return verdocsFieldTimestampCss; }
+    async componentWillLoad() {
+        this.fieldStore = getTemplateFieldStore(this.templateid);
+        this.roleStore = getTemplateRoleStore(this.templateid);
+    }
+    render() {
+        var _a, _b;
+        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
+        const roleIndex = getRoleIndex(this.roleStore, field.role_name);
+        const backgroundColor = field['rgba'] || getRGBA(roleIndex);
+        if (!field) {
+            return h(Fragment, null);
+        }
+        const settings = getFieldSettings(field);
+        // TODO:
+        // const disabled = this.disabled ?? settings.disabled ?? false;
+        const disabled = (_a = this.disabled) !== null && _a !== void 0 ? _a : false;
+        const value = settings.value || new Date().toISOString();
+        const dt = new Date(value);
+        const formatted = dateFns.format(dt, FORMAT_TIMESTAMP);
+        if (this.done) {
+            return h(Host, { class: { done: this.done } }, formatted);
+        }
+        return (h(Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", placeholder: (_b = field.placeholder) !== null && _b !== void 0 ? _b : '',
+            // TODO: It would really make more sense to show the date and time but the default width of 64px for this field
+            // is encoded in a ton of existing entries in the database and is hard to change.
+            value: formatted, disabled: true, ref: el => (this.el = el) }), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
+                e.stopPropagation();
+                this.showingProperties = !this.showingProperties;
+            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
+                var _a;
+                (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name });
+                return this.hideSettingsPanel();
+            }, onSettingsChanged: e => {
+                var _a;
+                (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
+                return this.hideSettingsPanel();
+            }, helpText: 'Time stamps are automatically set when the recipient signs the document.' })))))));
+    }
+    static get style() { return VerdocsFieldTimestampStyle0; }
 }, [0, "verdocs-field-timestamp", {
-    "templateid": [1],
-    "fieldname": [1],
-    "disabled": [4],
-    "editable": [4],
-    "moveable": [4],
-    "done": [4],
-    "xscale": [2],
-    "yscale": [2],
-    "pagenumber": [2],
-    "showingProperties": [32],
-    "focusField": [64],
-    "showSettingsPanel": [64],
-    "hideSettingsPanel": [64]
-  }]);
+        "templateid": [1],
+        "fieldname": [1],
+        "disabled": [4],
+        "editable": [4],
+        "moveable": [4],
+        "done": [4],
+        "xscale": [2],
+        "yscale": [2],
+        "pagenumber": [2],
+        "showingProperties": [32],
+        "focusField": [64],
+        "showSettingsPanel": [64],
+        "hideSettingsPanel": [64]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["verdocs-field-timestamp", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-portal", "verdocs-select-input", "verdocs-template-field-properties", "verdocs-text-input"];
-  components.forEach(tagName => { switch (tagName) {
-    case "verdocs-field-timestamp":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, VerdocsFieldTimestamp);
-      }
-      break;
-    case "verdocs-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "verdocs-checkbox":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "verdocs-component-error":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "verdocs-help-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "verdocs-portal":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "verdocs-select-input":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "verdocs-template-field-properties":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "verdocs-text-input":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["verdocs-field-timestamp", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-portal", "verdocs-select-input", "verdocs-template-field-properties", "verdocs-text-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "verdocs-field-timestamp":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VerdocsFieldTimestamp);
+            }
+            break;
+        case "verdocs-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "verdocs-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "verdocs-component-error":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "verdocs-help-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "verdocs-portal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "verdocs-select-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "verdocs-template-field-properties":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "verdocs-text-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 defineCustomElement();
 

package/dist/components/verdocs-file-chooser.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface VerdocsFileChooser extends Components.VerdocsFileChooser, HTMLElement {}
 export const VerdocsFileChooser: {
-  prototype: VerdocsFileChooser;
-  new (): VerdocsFileChooser;
+    prototype: VerdocsFileChooser;
+    new (): VerdocsFileChooser;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/verdocs-file-chooser2.js

@@ -1,58 +1,58 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import './Types.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { u as unicodeNBSP } from './Icons.js';
 import { d as defineCustomElement$1 } from './verdocs-button2.js';
 
 const verdocsFileChooserCss = "@-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-file-chooser{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-file-chooser .upload-box{text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;padding:40px 15px;color:rgba(0, 0, 0, 0.54)}verdocs-file-chooser .upload-box svg{width:64px;height:64px;fill:#5c6575}verdocs-file-chooser .selected-filename{font-size:20px;font-weight:bold;overflow-wrap:anywhere}verdocs-file-chooser .or-prefer{height:20px;margin:20px 0;font-size:16px}";
+const VerdocsFileChooserStyle0 = verdocsFileChooserCss;
 
-const VerdocsFileChooser = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.fileSelected = createEvent(this, "fileSelected", 7);
-    this.endpoint = VerdocsEndpoint.getDefault();
-    this.file = undefined;
-  }
-  handleFileChanged(e) {
-    var _a, _b;
-    this.file = ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || null;
-    (_b = this.fileSelected) === null || _b === void 0 ? void 0 : _b.emit({ file: this.file });
-    console.debug('[CHOOSER] Selected file', this.file);
-  }
-  handleSelectFile(e) {
-    var _a, _b;
-    e.stopPropagation();
-    this.file = null;
-    (_a = this.fileSelected) === null || _a === void 0 ? void 0 : _a.emit({ file: null });
-    (_b = document.getElementById('verdocs-file-chooser')) === null || _b === void 0 ? void 0 : _b.click();
-  }
-  render() {
-    const buttonlabel = this.file ? 'Select a different file' : 'Select a file from your computer';
-    return (h(Host, null, h("input", { type: "file", multiple: true, id: "verdocs-file-chooser", accept: "application/pdf,.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), h("div", { class: "upload-box" }, h("div", { class: "selected-filename" }, this.file ? this.file.name : 'Drag a file here'), h("div", { class: "or-prefer" }, this.file ? unicodeNBSP : 'Or, if you prefer...'), h("verdocs-button", { label: buttonlabel, size: "small", onClick: e => this.handleSelectFile(e) }))));
-  }
-  static get style() { return verdocsFileChooserCss; }
+const VerdocsFileChooser = /*@__PURE__*/ proxyCustomElement(class VerdocsFileChooser extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.fileSelected = createEvent(this, "fileSelected", 7);
+        this.endpoint = VerdocsEndpoint.getDefault();
+        this.file = undefined;
+    }
+    handleFileChanged(e) {
+        var _a, _b;
+        this.file = ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || null;
+        (_b = this.fileSelected) === null || _b === void 0 ? void 0 : _b.emit({ file: this.file });
+        console.debug('[CHOOSER] Selected file', this.file);
+    }
+    handleSelectFile(e) {
+        var _a, _b;
+        e.stopPropagation();
+        this.file = null;
+        (_a = this.fileSelected) === null || _a === void 0 ? void 0 : _a.emit({ file: null });
+        (_b = document.getElementById('verdocs-file-chooser')) === null || _b === void 0 ? void 0 : _b.click();
+    }
+    render() {
+        const buttonlabel = this.file ? 'Select a different file' : 'Select a file from your computer';
+        return (h(Host, { key: 'f8febf3e2ed17a5997e9e97aad97a83ecd5a0bb2' }, h("input", { key: 'b151b6e4a19521ecb95b40a7b414c6ffd3e7c74b', type: "file", multiple: true, id: "verdocs-file-chooser", accept: "application/pdf,.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), h("div", { key: '9aa5d9b06f54f4479afb9276702632c695d24d0f', class: "upload-box" }, h("div", { key: '769adcb7a66ae0357e581909978fc18e5cca75ab', class: "selected-filename" }, this.file ? this.file.name : 'Drag a file here'), h("div", { key: 'd50342ec030cf44a608b7e13e480015c63822ea7', class: "or-prefer" }, this.file ? unicodeNBSP : 'Or, if you prefer...'), h("verdocs-button", { key: 'd6a883649258392cb922a4b0a4901e526017bf5f', label: buttonlabel, size: "small", onClick: e => this.handleSelectFile(e) }))));
+    }
+    static get style() { return VerdocsFileChooserStyle0; }
 }, [0, "verdocs-file-chooser", {
-    "endpoint": [16],
-    "file": [32]
-  }]);
+        "endpoint": [16],
+        "file": [32]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["verdocs-file-chooser", "verdocs-button"];
-  components.forEach(tagName => { switch (tagName) {
-    case "verdocs-file-chooser":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, VerdocsFileChooser);
-      }
-      break;
-    case "verdocs-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["verdocs-file-chooser", "verdocs-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "verdocs-file-chooser":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VerdocsFileChooser);
+            }
+            break;
+        case "verdocs-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 defineCustomElement();
 

package/dist/components/verdocs-floating-menu.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface VerdocsFloatingMenu extends Components.VerdocsFloatingMenu, HTMLElement {}
 export const VerdocsFloatingMenu: {
-  prototype: VerdocsFloatingMenu;
-  new (): VerdocsFloatingMenu;
+    prototype: VerdocsFloatingMenu;
+    new (): VerdocsFloatingMenu;
 };
 /**
  * Used to define this component and all nested components recursively.