@verdocs/web-sdk 2.3.87 → 4.0.5

package/dist/collection/components/controls/verdocs-text-input/verdocs-text-input.js

@@ -1,5 +1,5 @@
-import { Host, h } from '@stencil/core';
-import { VerdocsToast } from '../../../utils/Toast';
+import { Host, h } from "@stencil/core";
+import { VerdocsToast } from "../../../utils/Toast";
 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>`;
 /**
@@ -8,236 +8,236 @@ const CopyIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><p
  * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emmit.
  */
 export class VerdocsTextInput {
-  constructor() {
-    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 }))));
-  }
-  static get is() { return "verdocs-text-input"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["verdocs-text-input.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["verdocs-text-input.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The initial value for the input field."
-        },
-        "attribute": "value",
-        "reflect": true,
-        "defaultValue": "''"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The label for the field."
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The placeholder for the field."
-        },
-        "attribute": "placeholder",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "autocomplete": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If desired, the autocomplete attribute to set."
-        },
-        "attribute": "autocomplete",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "helpText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If supplied, a help icon will be displayed to provide the user more information."
-        },
-        "attribute": "help-text",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "clearable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If set, a clear button will be displayed."
-        },
-        "attribute": "clearable",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "copyable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If set, a copy-to-clipboard button will be displayed. NOTE: A field may not be\nboth clearable and copyable. If both properties are set to true, copyable will\nbe ignored."
-        },
-        "attribute": "copyable",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url'",
-          "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The type of field to render. Only text-type fields are allowed here for the current styling. Additional types\n(e.g. a date picker) will be supported by other controls in the future."
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "'text'"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Should the field be disabled?"
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Should the field be required?"
-        },
-        "attribute": "required",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get elementRef() { return "hostEl"; }
+    constructor() {
+        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 }))));
+    }
+    static get is() { return "verdocs-text-input"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["verdocs-text-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["verdocs-text-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The initial value for the input field."
+                },
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label for the field."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placeholder for the field."
+                },
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If desired, the autocomplete attribute to set."
+                },
+                "attribute": "autocomplete",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "helpText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If supplied, a help icon will be displayed to provide the user more information."
+                },
+                "attribute": "help-text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If set, a clear button will be displayed."
+                },
+                "attribute": "clearable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "copyable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If set, a copy-to-clipboard button will be displayed. NOTE: A field may not be\nboth clearable and copyable. If both properties are set to true, copyable will\nbe ignored."
+                },
+                "attribute": "copyable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url'",
+                    "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of field to render. Only text-type fields are allowed here for the current styling. Additional types\n(e.g. a date picker) will be supported by other controls in the future."
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'text'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Should the field be disabled?"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Should the field be required?"
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
 }

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

@@ -1,77 +1,79 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 /**
  * Displays a label and a set of buttons, also allowing a default selection of a button
  */
 export class VerdocsToggle {
-  constructor() {
-    this.options = undefined;
-    this.theme = undefined;
-    this.selectedOption = 0;
-  }
-  componentWillLoad() {
-    var _a;
-    this.selectedOption = ((_a = this.options) === null || _a === void 0 ? void 0 : _a.defaultSelection) || 0;
-  }
-  render() {
-    return (h("div", { class: "container" }, h("span", { class: "label" }, `${this.options.label}:`), h("div", { class: "buttons" }, this.options.buttons.map((button, index) => (h("button", { id: button.id, key: button.id, innerHTML: button.icon, class: index === this.selectedOption ? 'selected' : '', onClick: () => {
-        console.log('clicked', index);
-        this.selectedOption = index;
-      } }))))));
-  }
-  static get is() { return "verdocs-toggle"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["verdocs-toggle.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["verdocs-toggle.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "options": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "IToggleIconButtons",
-          "resolved": "IToggleIconButtons",
-          "references": {
-            "IToggleIconButtons": {
-              "location": "local"
+    constructor() {
+        this.options = undefined;
+        this.theme = undefined;
+        this.selectedOption = 0;
+    }
+    componentWillLoad() {
+        var _a;
+        this.selectedOption = ((_a = this.options) === null || _a === void 0 ? void 0 : _a.defaultSelection) || 0;
+    }
+    render() {
+        return (h("div", { key: 'bc1116c5d0c8b9a5096ace164a02c420751cc2ec', class: "container" }, h("span", { key: 'e0346b9aabd5e4fbb29c6f5cc897795870f0643e', class: "label" }, `${this.options.label}:`), h("div", { key: 'd91de7ce4ad8808f4faaa18b2865c0c4c21f7287', class: "buttons" }, this.options.buttons.map((button, index) => (h("button", { id: button.id, key: button.id, innerHTML: button.icon, class: index === this.selectedOption ? 'selected' : '', onClick: () => {
+                console.log('clicked', index);
+                this.selectedOption = index;
+            } }))))));
+    }
+    static get is() { return "verdocs-toggle"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["verdocs-toggle.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["verdocs-toggle.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IToggleIconButtons",
+                    "resolved": "IToggleIconButtons",
+                    "references": {
+                        "IToggleIconButtons": {
+                            "location": "local",
+                            "path": "/Users/chad/projects/verdocs/web-sdk/verdocs-web-sdk/src/components/controls/verdocs-toggle/verdocs-toggle.tsx",
+                            "id": "src/components/controls/verdocs-toggle/verdocs-toggle.tsx::IToggleIconButtons"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The tags to display"
+                }
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The \"theme\" to be used"
+                },
+                "attribute": "theme",
+                "reflect": false
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The tags to display"
-        }
-      },
-      "theme": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'light' | 'dark'",
-          "resolved": "\"dark\" | \"light\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The \"theme\" to be used"
-        },
-        "attribute": "theme",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "selectedOption": {}
-    };
-  }
+        };
+    }
+    static get states() {
+        return {
+            "selectedOption": {}
+        };
+    }
 }