@verdocs/web-sdk 1.7.2 → 1.7.5

package/dist/components/verdocs-search-box2.js

@@ -36,6 +36,18 @@ const VerdocsSearchBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
      * The text search string entered by the user.
      */
     this.query = '';
+    /**
+     * If set, the input field will attempt to "grab" focus after being rendered.
+     */
+    this.grabsFocus = false;
+  }
+  async focusField() {
+    this.inputEl.focus();
+  }
+  componentDidRender() {
+    if (this.grabsFocus) {
+      this.inputEl.focus();
+    }
   }
   handleSearch(e) {
     this.searchClicked.emit({ type: this.type, query: this.query });
@@ -54,14 +66,16 @@ const VerdocsSearchBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     }
   }
   render() {
-    return (h("form", { onSubmit: e => this.handleSearch(e) }, this.type !== undefined && this.type !== 'all' && (h("span", { class: "type" }, this.type, "s ", h("button", { class: "remove", innerHTML: CloseIcon, onClick: () => this.handleClearFilter() }))), h("input", { type: "text", placeholder: this.placeholder, value: this.query, onInput: e => this.handleChange(e), onKeyUp: e => this.handleKeyUp(e) }), h("button", { onClick: e => this.handleSearch(e), class: "search" }, h("span", { innerHTML: SearchIcon }), "Search")));
+    return (h("form", { onSubmit: e => this.handleSearch(e) }, this.type !== undefined && this.type !== 'all' && (h("span", { class: "type" }, this.type, "s ", h("button", { class: "remove", innerHTML: CloseIcon, onClick: () => this.handleClearFilter() }))), h("input", { type: "text", value: this.query, placeholder: this.placeholder, onInput: e => this.handleChange(e), onKeyUp: e => this.handleKeyUp(e), ref: el => (this.inputEl = el) }), h("button", { onClick: e => this.handleSearch(e), class: "search" }, h("span", { innerHTML: SearchIcon }), "Search")));
   }
   static get style() { return verdocsSearchBoxCss; }
 }, [0, "verdocs-search-box", {
     "endpoint": [16],
     "placeholder": [1],
     "type": [1],
-    "query": [1]
+    "query": [1],
+    "grabsFocus": [4, "grabs-focus"],
+    "focusField": [64]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/verdocs-search-box2.js.map

@@ -1 +1 @@
-{"file":"verdocs-search-box2.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,mBAAmB,GAAG,gzDAAgzD;;MCuB/zD,gBAAgB;EAL7B;;;;;;;;;IASU,aAAQ,GAAoB,eAAe,CAAC,UAAU,EAAE,CAAC;;;;IAKzD,gBAAW,GAAG,wCAAwC,CAAC;;;;IAKvD,SAAI,GAAiB,KAAK,CAAC;;;;IAK3B,UAAK,GAAG,EAAE,CAAC;GAqDpB;EApCC,YAAY,CAAC,CAAC;IACZ,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC;IAC9D,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,OAAO,KAAK,CAAC;GACd;EAED,YAAY,CAAC,CAAC;IACZ,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;GACxC;EAED,iBAAiB;IACf,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC9B;EAED,WAAW,CAAC,CAAC;IACX,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;MACrB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC;KAC/D;GACF;EAED,MAAM;IACJ,QACE,YAAM,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IACtC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,KAC7C,YAAM,KAAK,EAAC,MAAM,IACf,IAAI,CAAC,IAAI,QAAG,cAAQ,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,EAAE,GAAI,CAChG,CACR,EACD,aAAO,IAAI,EAAC,MAAM,EAAC,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAI,EAC9I,cAAQ,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,KAAK,EAAC,QAAQ,IACxD,YAAM,SAAS,EAAE,UAAU,GAAI,WAExB,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/elements/verdocs-search-box/verdocs-search-box.scss?tag=verdocs-search-box","./src/components/elements/verdocs-search-box/verdocs-search-box.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-search-box {\n  font-family: $verdocs-primary-font;\n\n  form {\n    display: flex;\n    flex-direction: row;\n    height: 45px;\n    box-sizing: border-box;\n    margin: 5px 0 0;\n    border-radius: 5px;\n    align-items: center;\n    background-color: #fff;\n    padding: 0 8px;\n    border-width: 1px;\n    border-style: solid;\n    border-color: $verdocs-light-blue;\n\n    input {\n      box-sizing: border-box;\n      height: 43px;\n      width: 100%;\n      font-size: 18px;\n      border: none;\n\n      &:focus {\n        outline: none;\n      }\n    }\n\n    button.search {\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      box-sizing: border-box;\n      border-radius: 4px;\n      border: none;\n      width: 100px;\n      height: 28px;\n      font-weight: 700;\n      font-size: 10px;\n      letter-spacing: 1px;\n      background-color: $verdocs-green;\n      text-transform: uppercase;\n      color: #fff;\n    }\n\n    .type {\n      background-color: $verdocs-light-blue;\n      height: 30px;\n      display: inline-flex;\n      padding: 1px 0 2px 10px;\n      font-size: 13px;\n      line-height: 16px;\n      border-radius: 4px;\n      justify-content: center;\n      text-transform: uppercase;\n      align-items: center;\n      flex-direction: row;\n      color: #fff;\n      margin-right: 10px;\n\n      button {\n        border: none;\n        color: #fff;\n        margin: 5px 0 0 8px;\n        background: transparent;\n      }\n    }\n\n    svg {\n      width: 12px;\n      height: 12px;\n      margin-right: 6px;\n    }\n  }\n\n  ::placeholder {\n    color: $verdocs-grey-2;\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop} from '@stencil/core';\nimport SearchIcon from './search.svg';\nimport CloseIcon from './close.svg';\n\nexport type TContentType = 'all' | 'document' | 'template' | 'organization';\n\nexport interface ISearchEvent {\n  query: string;\n  type: TContentType;\n}\n\n/**\n * Displays a customizable input box for search queries.\n *\n * Authentication is required to demonstrate this Element. You may do this in Storybook by using the Auth\n * embed. This Element will reuse the same session produced by logging in via that Embed.\n */\n@Component({\n  tag: 'verdocs-search-box',\n  styleUrl: 'verdocs-search-box.scss',\n  shadow: false,\n})\nexport class VerdocsSearchBox {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The placeholder to display in the input field.\n   */\n  @Prop() placeholder = 'search documents, templates, people...';\n\n  /**\n   * If set to a value other than 'all', a removeable filter indicator will be displayed.\n   */\n  @Prop() type: TContentType = 'all';\n\n  /**\n   * The text search string entered by the user.\n   */\n  @Prop() query = '';\n\n  /**\n   * Event fired when the user changes the type.\n   */\n  @Event({composed: true}) searchClicked: EventEmitter<ISearchEvent>;\n\n  /**\n   * Event fired when the user changes the type.\n   */\n  @Event({composed: true}) typeChanged: EventEmitter<TContentType>;\n\n  /**\n   * Event fired when the user changes the query string.\n   */\n  @Event({composed: true}) queryChanged: EventEmitter<string>;\n\n  handleSearch(e) {\n    this.searchClicked.emit({type: this.type, query: this.query});\n    e.preventDefault();\n    return false;\n  }\n\n  handleChange(e) {\n    this.queryChanged.emit(e.target.value);\n  }\n\n  handleClearFilter() {\n    this.typeChanged.emit('all');\n  }\n\n  handleKeyUp(e) {\n    if (e.key === 'Enter') {\n      this.searchClicked.emit({type: this.type, query: this.query});\n    }\n  }\n\n  render() {\n    return (\n      <form onSubmit={e => this.handleSearch(e)}>\n        {this.type !== undefined && this.type !== 'all' && (\n          <span class=\"type\">\n            {this.type}s <button class=\"remove\" innerHTML={CloseIcon} onClick={() => this.handleClearFilter()} />\n          </span>\n        )}\n        <input type=\"text\" placeholder={this.placeholder} value={this.query} onInput={e => this.handleChange(e)} onKeyUp={e => this.handleKeyUp(e)} />\n        <button onClick={e => this.handleSearch(e)} class=\"search\">\n          <span innerHTML={SearchIcon} />\n          Search\n        </button>\n      </form>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-search-box2.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,mBAAmB,GAAG,gzDAAgzD;;MCuB/zD,gBAAgB;EAL7B;;;;;;;;;IAWU,aAAQ,GAAoB,eAAe,CAAC,UAAU,EAAE,CAAC;;;;IAKzD,gBAAW,GAAG,wCAAwC,CAAC;;;;IAKvD,SAAI,GAAiB,KAAK,CAAC;;;;IAK3B,UAAK,GAAG,EAAE,CAAC;;;;IAKX,eAAU,GAAG,KAAK,CAAC;GAsE5B;EArDW,MAAM,UAAU;IACxB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;GACtB;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;KACtB;GACF;EAED,YAAY,CAAC,CAAC;IACZ,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC;IAC9D,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,OAAO,KAAK,CAAC;GACd;EAED,YAAY,CAAC,CAAC;IACZ,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;GACxC;EAED,iBAAiB;IACf,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC9B;EAED,WAAW,CAAC,CAAC;IACX,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;MACrB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC;KAC/D;GACF;EAED,MAAM;IACJ,QACE,YAAM,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IACtC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,KAC7C,YAAM,KAAK,EAAC,MAAM,IACf,IAAI,CAAC,IAAI,QAAG,cAAQ,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,EAAE,GAAI,CAChG,CACR,EACD,aACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAClC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACjC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,GAC9B,EACF,cAAQ,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,KAAK,EAAC,QAAQ,IACxD,YAAM,SAAS,EAAE,UAAU,GAAI,WAExB,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/elements/verdocs-search-box/verdocs-search-box.scss?tag=verdocs-search-box","./src/components/elements/verdocs-search-box/verdocs-search-box.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-search-box {\n  font-family: $verdocs-primary-font;\n\n  form {\n    display: flex;\n    flex-direction: row;\n    height: 45px;\n    box-sizing: border-box;\n    margin: 5px 0 0;\n    border-radius: 5px;\n    align-items: center;\n    background-color: #fff;\n    padding: 0 8px;\n    border-width: 1px;\n    border-style: solid;\n    border-color: $verdocs-light-blue;\n\n    input {\n      box-sizing: border-box;\n      height: 43px;\n      width: 100%;\n      font-size: 18px;\n      border: none;\n\n      &:focus {\n        outline: none;\n      }\n    }\n\n    button.search {\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      box-sizing: border-box;\n      border-radius: 4px;\n      border: none;\n      width: 100px;\n      height: 28px;\n      font-weight: 700;\n      font-size: 10px;\n      letter-spacing: 1px;\n      background-color: $verdocs-green;\n      text-transform: uppercase;\n      color: #fff;\n    }\n\n    .type {\n      background-color: $verdocs-light-blue;\n      height: 30px;\n      display: inline-flex;\n      padding: 1px 0 2px 10px;\n      font-size: 13px;\n      line-height: 16px;\n      border-radius: 4px;\n      justify-content: center;\n      text-transform: uppercase;\n      align-items: center;\n      flex-direction: row;\n      color: #fff;\n      margin-right: 10px;\n\n      button {\n        border: none;\n        color: #fff;\n        margin: 5px 0 0 8px;\n        background: transparent;\n      }\n    }\n\n    svg {\n      width: 12px;\n      height: 12px;\n      margin-right: 6px;\n    }\n  }\n\n  ::placeholder {\n    color: $verdocs-grey-2;\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop, Method} from '@stencil/core';\nimport SearchIcon from './search.svg';\nimport CloseIcon from './close.svg';\n\nexport type TContentType = 'all' | 'document' | 'template' | 'organization';\n\nexport interface ISearchEvent {\n  query: string;\n  type: TContentType;\n}\n\n/**\n * Displays a customizable input box for search queries.\n *\n * Authentication is required to demonstrate this Element. You may do this in Storybook by using the Auth\n * embed. This Element will reuse the same session produced by logging in via that Embed.\n */\n@Component({\n  tag: 'verdocs-search-box',\n  styleUrl: 'verdocs-search-box.scss',\n  shadow: false,\n})\nexport class VerdocsSearchBox {\n  private inputEl: HTMLInputElement;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The placeholder to display in the input field.\n   */\n  @Prop() placeholder = 'search documents, templates, people...';\n\n  /**\n   * If set to a value other than 'all', a removeable filter indicator will be displayed.\n   */\n  @Prop() type: TContentType = 'all';\n\n  /**\n   * The text search string entered by the user.\n   */\n  @Prop() query = '';\n\n  /**\n   * If set, the input field will attempt to \"grab\" focus after being rendered.\n   */\n  @Prop() grabsFocus = false;\n\n  /**\n   * Event fired when the user changes the type.\n   */\n  @Event({composed: true}) searchClicked: EventEmitter<ISearchEvent>;\n\n  /**\n   * Event fired when the user changes the type.\n   */\n  @Event({composed: true}) typeChanged: EventEmitter<TContentType>;\n\n  /**\n   * Event fired when the user changes the query string.\n   */\n  @Event({composed: true}) queryChanged: EventEmitter<string>;\n\n  @Method() async focusField() {\n    this.inputEl.focus();\n  }\n\n  componentDidRender() {\n    if (this.grabsFocus) {\n      this.inputEl.focus();\n    }\n  }\n\n  handleSearch(e) {\n    this.searchClicked.emit({type: this.type, query: this.query});\n    e.preventDefault();\n    return false;\n  }\n\n  handleChange(e) {\n    this.queryChanged.emit(e.target.value);\n  }\n\n  handleClearFilter() {\n    this.typeChanged.emit('all');\n  }\n\n  handleKeyUp(e) {\n    if (e.key === 'Enter') {\n      this.searchClicked.emit({type: this.type, query: this.query});\n    }\n  }\n\n  render() {\n    return (\n      <form onSubmit={e => this.handleSearch(e)}>\n        {this.type !== undefined && this.type !== 'all' && (\n          <span class=\"type\">\n            {this.type}s <button class=\"remove\" innerHTML={CloseIcon} onClick={() => this.handleClearFilter()} />\n          </span>\n        )}\n        <input\n          type=\"text\"\n          value={this.query}\n          placeholder={this.placeholder}\n          onInput={e => this.handleChange(e)}\n          onKeyUp={e => this.handleKeyUp(e)}\n          ref={el => (this.inputEl = el)}\n        />\n        <button onClick={e => this.handleSearch(e)} class=\"search\">\n          <span innerHTML={SearchIcon} />\n          Search\n        </button>\n      </form>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-status-indicator.js

@@ -7323,6 +7323,7 @@ const VerdocsStatusIndicator$1 = /*@__PURE__*/ proxyCustomElement(class extends
      */
     this.theme = 'light';
     this.recipientStatusIcons = [];
+    this.containerId = `verdocs-status-indicator-${Math.random().toString(36).substring(2, 11)}`;
   }
   componentDidLoad() {
     var _a;
@@ -7389,7 +7390,7 @@ const VerdocsStatusIndicator$1 = /*@__PURE__*/ proxyCustomElement(class extends
       });
       this.recipientStatusIcons = statusIcons;
       const diagram = RecipientFlow();
-      diagram.initalize('#verdocs-recipient-status-diagram', canvasWidth, canvasHeight);
+      diagram.initalize(`#${this.containerId}`, canvasWidth, canvasHeight);
       diagram.update({ entities, lines });
     }
   }
@@ -7518,7 +7519,7 @@ const VerdocsStatusIndicator$1 = /*@__PURE__*/ proxyCustomElement(class extends
     }
     const icon = this.getStatusIcon(status);
     const statusMessage = this.getStatusMessage(status);
-    return (h(Host, { ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.document ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: () => this.document && this.toggleDropdown(), onBlur: e => this.document && this.handleHideDropdown(e) }, h("span", { class: "icon", innerHTML: icon }), h("span", { class: "content" }, statusMessage), h("div", { class: "detail-panel", ref: el => (this.detailPanel = el) }, h("div", { id: "verdocs-recipient-status-diagram" }), this.recipientStatusIcons.map(icon => (h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
+    return (h(Host, { ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.document ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: () => this.document && this.toggleDropdown(), onBlur: e => this.document && this.handleHideDropdown(e) }, h("span", { class: "icon", innerHTML: icon }), h("span", { class: "content" }, statusMessage), h("div", { class: "detail-panel", ref: el => (this.detailPanel = el) }, h("div", { id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
   }
   static get style() { return verdocsStatusIndicatorCss; }
 }, [0, "verdocs-status-indicator", {
@@ -7527,7 +7528,8 @@ const VerdocsStatusIndicator$1 = /*@__PURE__*/ proxyCustomElement(class extends
     "status": [1],
     "document": [16],
     "isOpen": [32],
-    "recipientStatusIcons": [32]
+    "recipientStatusIcons": [32],
+    "containerId": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {