@verdocs/web-sdk 2.3.87 → 4.0.5

package/dist/collection/components/controls/verdocs-toggle-button/verdocs-toggle-button.js

@@ -1,136 +1,136 @@
-import { h, Host } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 /**
  * Displays a single button that can be toggled on or off by clicking it.
  */
 export class VerdocsToggleButton {
-  constructor() {
-    this.active = false;
-    this.icon = null;
-    this.label = null;
-    this.size = 'normal';
-    this._active = false;
-  }
-  componentWillLoad() {
-    this._active = this.active;
-  }
-  handleToggle(e) {
-    var _a;
-    e.stopPropagation();
-    const newState = !this._active;
-    this._active = newState;
-    (_a = this.toggle) === null || _a === void 0 ? void 0 : _a.emit({ active: newState });
-  }
-  render() {
-    return (h(Host, { class: `size-${this.size}` }, this.icon ? (h("button", { innerHTML: this.icon, class: { active: this._active }, onClick: e => this.handleToggle(e) })) : (h("button", { class: { active: this._active }, onClick: e => this.handleToggle(e) }, this.label))));
-  }
-  static get is() { return "verdocs-toggle-button"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["verdocs-toggle-button.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["verdocs-toggle-button.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "active": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "active",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "icon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | null",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If set, should be an SVG object. This will be rendered as the button's visible element. If icon is supplied, label is ignored."
-        },
-        "attribute": "icon",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | null",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If set, should be an SVG object. This will be rendered as the button's visible element. If icon is supplied, label is ignored."
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'small' | 'normal'",
-          "resolved": "\"normal\" | \"small\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "How large the button should be. Small buttons are intended for dialog boxes and other smaller scale UI regions."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'normal'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "_active": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "toggle",
-        "name": "toggle",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the button is pressed."
-        },
-        "complexType": {
-          "original": "{active: boolean}",
-          "resolved": "{ active: boolean; }",
-          "references": {}
-        }
-      }];
-  }
+    constructor() {
+        this.active = false;
+        this.icon = null;
+        this.label = null;
+        this.size = 'normal';
+        this._active = false;
+    }
+    componentWillLoad() {
+        this._active = this.active;
+    }
+    handleToggle(e) {
+        var _a;
+        e.stopPropagation();
+        const newState = !this._active;
+        this._active = newState;
+        (_a = this.toggle) === null || _a === void 0 ? void 0 : _a.emit({ active: newState });
+    }
+    render() {
+        return (h(Host, { key: 'f953a03258c2b74858b247a3d206028bf0285f1f', class: `size-${this.size}` }, this.icon ? (h("button", { innerHTML: this.icon, class: { active: this._active }, onClick: e => this.handleToggle(e) })) : (h("button", { class: { active: this._active }, onClick: e => this.handleToggle(e) }, this.label))));
+    }
+    static get is() { return "verdocs-toggle-button"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["verdocs-toggle-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["verdocs-toggle-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "active",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If set, should be an SVG object. This will be rendered as the button's visible element. If icon is supplied, label is ignored."
+                },
+                "attribute": "icon",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If set, should be an SVG object. This will be rendered as the button's visible element. If icon is supplied, label is ignored."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'normal'",
+                    "resolved": "\"normal\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "How large the button should be. Small buttons are intended for dialog boxes and other smaller scale UI regions."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'normal'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_active": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toggle",
+                "name": "toggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired when the button is pressed."
+                },
+                "complexType": {
+                    "original": "{active: boolean}",
+                    "resolved": "{ active: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
 }

package/dist/collection/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.js

@@ -1,123 +1,124 @@
-import { createPopper } from '@popperjs/core';
-import { h, Host } from '@stencil/core';
+import { createPopper } from "@popperjs/core";
+import { h, Host } from "@stencil/core";
 // import {Component, Event, EventEmitter, h, Host, Prop, State} from '@stencil/core';
 /**
  * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.
  */
 export class VerdocsToolbarIcon {
-  constructor() {
-    this.text = '';
-    this.icon = '';
-    this.placement = 'bottom';
-    this.containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;
-  }
-  componentDidLoad() {
-    this.popperInstance = createPopper(this.iconEl, this.tooltip, {
-      placement: this.placement,
-      modifiers: this.placement === 'left' ? [{ name: 'offset', options: { offset: [0, 20] } }] : [],
-    });
-    // placement: 'top-end',
-    // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],
-    // });
-  }
-  disconnectedCallback() {
-    if (this.popperInstance) {
-      this.popperInstance.destroy();
-      this.popperInstance = null;
+    constructor() {
+        this.text = '';
+        this.icon = '';
+        this.placement = 'bottom';
+        this.containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;
     }
-  }
-  show() {
-    var _a, _b;
-    (_a = this.tooltip) === 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.tooltip) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
-  }
-  // handlePress() {
-  //   this.press?.emit();
-  // }
-  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": this.placement, ref: el => (this.tooltip = el) }, this.text, h("div", { "data-popper-arrow": "true", class: "arrow" }))));
-  }
-  static get is() { return "verdocs-toolbar-icon"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["verdocs-toolbar-icon.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["verdocs-toolbar-icon.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "text": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Help text to display on hover/focus"
-        },
-        "attribute": "text",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "icon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "SVG icon to display"
-        },
-        "attribute": "icon",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "placement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Placement",
-          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-          "references": {
-            "Placement": {
-              "location": "import",
-              "path": "@popperjs/core/lib/enums"
+    componentDidLoad() {
+        this.popperInstance = createPopper(this.iconEl, this.tooltip, {
+            placement: this.placement,
+            modifiers: this.placement === 'left' ? [{ name: 'offset', options: { offset: [0, 20] } }] : [],
+        });
+        // 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.tooltip) === 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.tooltip) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
+    }
+    // handlePress() {
+    //   this.press?.emit();
+    // }
+    render() {
+        return (h(Host, { key: 'c12c9e2593bf281d5c0ce60ebffebf974a4a1afb', class: {} }, h("div", { key: '7c03bd3e40eed4fa9966afe926cdc4c490d5a6d7', "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: 'd757834d1be057de971a7bcbb47158c9c2182907', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": this.placement, ref: el => (this.tooltip = el) }, this.text, h("div", { key: '0a9e2615fa20a0625b929173dd2705be5165c39a', "data-popper-arrow": "true", class: "arrow" }))));
+    }
+    static get is() { return "verdocs-toolbar-icon"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["verdocs-toolbar-icon.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["verdocs-toolbar-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Help text to display on hover/focus"
+                },
+                "attribute": "text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "SVG icon to display"
+                },
+                "attribute": "icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@popperjs/core/lib/enums",
+                            "id": ""
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Override the Popper \"placement\" setting"
+                },
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'bottom'"
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Override the Popper \"placement\" setting"
-        },
-        "attribute": "placement",
-        "reflect": false,
-        "defaultValue": "'bottom'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "containerId": {}
-    };
-  }
+        };
+    }
+    static get states() {
+        return {
+            "containerId": {}
+        };
+    }
 }

package/dist/collection/components/dialogs/verdocs-dialog/verdocs-dialog.css

@@ -25,7 +25,7 @@ verdocs-dialog .background-overlay {
   z-index: 10000;
   position: absolute;
   align-items: center;
-  background: #0000007f;
+  background: rgba(0, 0, 0, 0.4980392157);
   justify-content: center;
 }
 verdocs-dialog .dialog {

package/dist/collection/components/dialogs/verdocs-dialog/verdocs-dialog.js

@@ -1,46 +1,46 @@
-import { h, Host } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 /**
  * Display a simple dialog where the contents are provided via slots.
  */
 export class VerdocsDialog {
-  // We need a separate event handler for clicking the background because it can receive events "through" other child components
-  handleDismiss(e) {
-    var _a;
-    if (e.target.className === 'background-overlay') {
-      e.preventDefault();
-      (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
-    }
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { class: "dialog" }, h("slot", { name: "title" }, h("div", { class: "heading" }, "Please Confirm")), h("slot", null, h("div", { class: "content" }))))));
-  }
-  static get is() { return "verdocs-dialog"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["verdocs-dialog.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["verdocs-dialog.css"]
-    };
-  }
-  static get events() {
-    return [{
-        "method": "exit",
-        "name": "exit",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the dialog is dismissed by clicking the background overlay."
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+    // We need a separate event handler for clicking the background because it can receive events "through" other child components
+    handleDismiss(e) {
+        var _a;
+        if (e.target.className === 'background-overlay') {
+            e.preventDefault();
+            (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
         }
-      }];
-  }
+    }
+    render() {
+        return (h(Host, { key: '62e6836ec77a8cb2439248680f46bac274f8717c' }, h("div", { key: 'b9a7b1dd23a4f87ced0695fa87fdfef2a5ce51c9', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: 'c1702275d5bae4c5008ee75c00edc7f79eaca27e', class: "dialog" }, h("slot", { key: '2ffc0f8aacd561b5762fee8d762154e5d7820149', name: "title" }, h("div", { key: 'd0263fc7c6198c3508f8c874946e4ac1e895ce1b', class: "heading" }, "Please Confirm")), h("slot", { key: '68787dfb4db8dfb8308c81066e5126ead44978ed' }, h("div", { key: 'c6057bd9eac67d97010f57e0ed1975a9a3d57eb4', class: "content" }))))));
+    }
+    static get is() { return "verdocs-dialog"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["verdocs-dialog.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["verdocs-dialog.css"]
+        };
+    }
+    static get events() {
+        return [{
+                "method": "exit",
+                "name": "exit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired when the dialog is dismissed by clicking the background overlay."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
 }

package/dist/collection/components/dialogs/verdocs-initial-dialog/verdocs-initial-dialog.css

@@ -21,7 +21,7 @@ verdocs-initial-dialog {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #0000007f;
+  background: rgba(0, 0, 0, 0.4980392157);
 }
 verdocs-initial-dialog .dialog {
   width: 100%;
@@ -60,7 +60,7 @@ verdocs-initial-dialog canvas {
   width: 300px;
   height: 79px;
   max-width: 100%;
-  box-shadow: 0 0 6px 0 #0000001f;
+  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1215686275);
 }
 verdocs-initial-dialog .disclaimer {
   text-align: justify;