@verdocs/web-sdk 1.9.9 → 1.9.10

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

@@ -3,17 +3,18 @@ export default {
   title: 'Dialogs/Signature Dialog',
   component: 'verdocs-signature-dialog',
   args: {
-    open: true,
     name: 'Paige Turner',
   },
   argTypes: {
-    closed: {
-      action: 'closed',
-      table: {
-        disable: true,
-      },
+    onNext: {
+      action: 'next',
+      table: { disable: true },
+    },
+    onCancel: {
+      action: 'cancel',
+      table: { disable: true },
     },
   },
 };
-export const SignatureDialog = ({ name, open, closed }) => html `<verdocs-signature-dialog .name=${name} .open=${open} @closed=${closed} />`;
+export const SignatureDialog = ({ name, onCancel, onNext }) => html `<verdocs-signature-dialog .name=${name} @cancel=${onCancel} @next=${onNext} />`;
 //# sourceMappingURL=verdocs-signature-dialog.stories.js.map

package/dist/collection/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-signature-dialog.stories.js","sourceRoot":"","sources":["../../../../src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,0BAA0B;EACjC,SAAS,EAAE,0BAA0B;EACrC,IAAI,EAAE;IACJ,IAAI,EAAE,IAAI;IACV,IAAI,EAAE,cAAc;GACrB;EACD,QAAQ,EAAE;IACR,MAAM,EAAE;MACN,MAAM,EAAE,QAAQ;MAChB,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;OACd;KACF;GACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAC,EAAE,EAAE,CAAC,IAAI,CAAA,mCAAmC,IAAI,UAAU,IAAI,YAAY,MAAM,KAAK,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n  title: 'Dialogs/Signature Dialog',\n  component: 'verdocs-signature-dialog',\n  args: {\n    open: true,\n    name: 'Paige Turner',\n  },\n  argTypes: {\n    closed: {\n      action: 'closed',\n      table: {\n        disable: true,\n      },\n    },\n  },\n} as Meta;\n\nexport const SignatureDialog = ({name, open, closed}) => html`<verdocs-signature-dialog .name=${name} .open=${open} @closed=${closed} />`;\n"]}
+{"version":3,"file":"verdocs-signature-dialog.stories.js","sourceRoot":"","sources":["../../../../src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,0BAA0B;EACjC,SAAS,EAAE,0BAA0B;EACrC,IAAI,EAAE;IACJ,IAAI,EAAE,cAAc;GACrB;EACD,QAAQ,EAAE;IACR,MAAM,EAAE;MACN,MAAM,EAAE,MAAM;MACd,KAAK,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC;KACvB;IACD,QAAQ,EAAE;MACR,MAAM,EAAE,QAAQ;MAChB,KAAK,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC;KACvB;GACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAC,EAAE,EAAE,CAAC,IAAI,CAAA,mCAAmC,IAAI,YAAY,QAAQ,UAAU,MAAM,KAAK,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n  title: 'Dialogs/Signature Dialog',\n  component: 'verdocs-signature-dialog',\n  args: {\n    name: 'Paige Turner',\n  },\n  argTypes: {\n    onNext: {\n      action: 'next',\n      table: {disable: true},\n    },\n    onCancel: {\n      action: 'cancel',\n      table: {disable: true},\n    },\n  },\n} as Meta;\n\nexport const SignatureDialog = ({name, onCancel, onNext}) => html`<verdocs-signature-dialog .name=${name} @cancel=${onCancel} @next=${onNext} />`;\n"]}

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

@@ -29,12 +29,13 @@ verdocs-template-sender-dialog .dialog {
 }
 verdocs-template-sender-dialog .heading {
   display: flex;
-  flex-direction: row;
   font-size: 20px;
   font-weight: 500;
+  flex-direction: row;
 }
 verdocs-template-sender-dialog .buttons {
   display: flex;
+  margin-top: 10px;
   align-items: center;
   flex-direction: row;
   justify-content: flex-end;

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

@@ -6,7 +6,6 @@ import { h, Host } from '@stencil/core';
 export class VerdocsTemplateSenderDialog {
   constructor() {
     this.value = TemplateSenderTypes.EVERYONE;
-    this.open = false;
     this.newValue = TemplateSenderTypes.EVERYONE;
   }
   componentWillLoad() {
@@ -14,7 +13,6 @@ export class VerdocsTemplateSenderDialog {
   }
   handleCancel() {
     this.cancel.emit();
-    this.open = false;
   }
   // We need a separate event handler for clicking the background because it can receive events "through" other child components
   handleDismiss(e) {
@@ -24,14 +22,13 @@ export class VerdocsTemplateSenderDialog {
     }
   }
   handleDone() {
-    this.done.emit({ sender: this.newValue });
-    this.open = false;
+    this.next.emit(this.newValue);
   }
   handleSelectSetting(value) {
     this.newValue = value;
   }
   render() {
-    return (h(Host, { style: { display: this.open ? 'block' : 'none' } }, h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { class: "dialog" }, h("div", { class: "options" }, h("div", { class: "option" }, h("verdocs-radio-button", { checked: this.value === TemplateSenderTypes.EVERYONE, name: "template-sender", value: TemplateSenderTypes.EVERYONE, onSelected: () => this.handleSelectSetting(TemplateSenderTypes.EVERYONE) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone on the Web"), h("verdocs-help-icon", { text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), h("div", { class: "option" }, h("verdocs-radio-button", { checked: this.value === TemplateSenderTypes.EVERYONE_AS_CREATOR, name: "template-sender", value: TemplateSenderTypes.EVERYONE_AS_CREATOR, onSelected: () => this.handleSelectSetting(TemplateSenderTypes.EVERYONE_AS_CREATOR) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone on the Web as me"), h("verdocs-help-icon", { text: "Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)" }))), h("div", { class: "option" }, h("verdocs-radio-button", { checked: this.value === TemplateSenderTypes.ORGANIZATION_MEMBER, name: "template-sender", value: TemplateSenderTypes.ORGANIZATION_MEMBER, onSelected: () => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone in my organization"), h("verdocs-help-icon", { text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), h("div", { class: "option" }, h("verdocs-radio-button", { checked: this.value === TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR, name: "template-sender", value: TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR, onSelected: () => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone in my organization as me"), h("verdocs-help-icon", { text: "Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)" }))), h("div", { class: "option" }, h("verdocs-radio-button", { checked: this.value === TemplateSenderTypes.CREATOR, name: "template-sender", value: TemplateSenderTypes.CREATOR, onSelected: () => this.handleSelectSetting(TemplateSenderTypes.CREATOR) }), h("div", { class: "description" }, h("div", { class: "name" }, "Me"), h("verdocs-help-icon", { text: "Only I can use this template." })))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", variant: "outline", onPress: () => this.handleCancel() }), h("verdocs-button", { label: "Done", onPress: () => this.handleDone() }))))));
+    return (h(Host, null, h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { class: "dialog" }, h("div", { class: "options" }, h("div", { class: "option" }, h("verdocs-radio-button", { name: "template-sender", value: TemplateSenderTypes.EVERYONE, checked: this.value === TemplateSenderTypes.EVERYONE, onInput: () => this.handleSelectSetting(TemplateSenderTypes.EVERYONE) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone on the Web"), h("verdocs-help-icon", { text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), h("div", { class: "option" }, h("verdocs-radio-button", { name: "template-sender", value: TemplateSenderTypes.EVERYONE_AS_CREATOR, checked: this.value === TemplateSenderTypes.EVERYONE_AS_CREATOR, onInput: () => this.handleSelectSetting(TemplateSenderTypes.EVERYONE_AS_CREATOR) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone on the Web as me"), h("verdocs-help-icon", { text: "Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)" }))), h("div", { class: "option" }, h("verdocs-radio-button", { name: "template-sender", value: TemplateSenderTypes.ORGANIZATION_MEMBER, checked: this.value === TemplateSenderTypes.ORGANIZATION_MEMBER, onInput: () => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone in my organization"), h("verdocs-help-icon", { text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), h("div", { class: "option" }, h("verdocs-radio-button", { name: "template-sender", value: TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR, checked: this.value === TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR, onInput: () => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone in my organization as me"), h("verdocs-help-icon", { text: "Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)" }))), h("div", { class: "option" }, h("verdocs-radio-button", { name: "template-sender", value: TemplateSenderTypes.CREATOR, checked: this.value === TemplateSenderTypes.CREATOR, onInput: () => this.handleSelectSetting(TemplateSenderTypes.CREATOR) }), h("div", { class: "description" }, h("div", { class: "name" }, "Me"), h("verdocs-help-icon", { text: "Only I can use this template." })))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { label: "Done", onClick: () => this.handleDone() }))))));
   }
   static get is() { return "verdocs-template-sender-dialog"; }
   static get originalStyleUrls() {
@@ -68,24 +65,6 @@ export class VerdocsTemplateSenderDialog {
         "attribute": "value",
         "reflect": false,
         "defaultValue": "TemplateSenderTypes.EVERYONE"
-      },
-      "open": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed."
-        },
-        "attribute": "open",
-        "reflect": false,
-        "defaultValue": "false"
       }
     };
   }
@@ -111,18 +90,18 @@ export class VerdocsTemplateSenderDialog {
           "references": {}
         }
       }, {
-        "method": "done",
-        "name": "done",
+        "method": "next",
+        "name": "next",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Event fired when the dialog is closed. The event data will contain the closure reason."
+          "text": "Event fired when the dialog is closed. The event data will contain the selected value."
         },
         "complexType": {
-          "original": "{sender: TemplateSenderTypes}",
-          "resolved": "{ sender: TemplateSenderTypes; }",
+          "original": "TemplateSenderTypes",
+          "resolved": "TemplateSenderTypes.CREATOR | TemplateSenderTypes.EVERYONE | TemplateSenderTypes.EVERYONE_AS_CREATOR | TemplateSenderTypes.ORGANIZATION_MEMBER | TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR",
           "references": {
             "TemplateSenderTypes": {
               "location": "import",

package/dist/collection/components/dialogs/verdocs-template-sender-dialog/verdocs-template-sender-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-template-sender-dialog.js","sourceRoot":"","sources":["../../../../src/components/dialogs/verdocs-template-sender-dialog/verdocs-template-sender-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {TemplateSenderTypes} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, Prop, h, Event, EventEmitter, Host, State} from '@stencil/core';\n\n/**\n * Display a dialog that allows a template sender to be selected.\n */\n@Component({\n  tag: 'verdocs-template-sender-dialog',\n  styleUrl: 'verdocs-template-sender-dialog.scss',\n})\nexport class VerdocsTemplateSenderDialog {\n  /**\n   * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n   */\n  @Prop() value: TemplateSenderTypes = TemplateSenderTypes.EVERYONE;\n\n  /**\n   * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n   */\n  @Prop() open: boolean = false;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the closure reason.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the closure reason.\n   */\n  @Event({composed: true}) done: EventEmitter<{sender: TemplateSenderTypes}>;\n\n  @State() newValue: TemplateSenderTypes = TemplateSenderTypes.EVERYONE;\n\n  componentWillLoad() {\n    this.newValue = this.value;\n  }\n\n  handleCancel() {\n    this.cancel.emit();\n    this.open = false;\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  handleDone() {\n    this.done.emit({sender: this.newValue});\n    this.open = false;\n  }\n\n  handleSelectSetting(value: TemplateSenderTypes) {\n    this.newValue = value;\n  }\n\n  render() {\n    return (\n      <Host style={{display: this.open ? 'block' : 'none'}}>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"options\">\n              <div class=\"option\">\n                <verdocs-radio-button\n                  checked={this.value === TemplateSenderTypes.EVERYONE}\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.EVERYONE}\n                  onSelected={() => this.handleSelectSetting(TemplateSenderTypes.EVERYONE)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone on the Web</div>\n                  <verdocs-help-icon text=\"Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  checked={this.value === TemplateSenderTypes.EVERYONE_AS_CREATOR}\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.EVERYONE_AS_CREATOR}\n                  onSelected={() => this.handleSelectSetting(TemplateSenderTypes.EVERYONE_AS_CREATOR)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone on the Web as me</div>\n                  <verdocs-help-icon text=\"Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  checked={this.value === TemplateSenderTypes.ORGANIZATION_MEMBER}\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.ORGANIZATION_MEMBER}\n                  onSelected={() => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone in my organization</div>\n                  <verdocs-help-icon text=\"Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  checked={this.value === TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR}\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR}\n                  onSelected={() => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone in my organization as me</div>\n                  <verdocs-help-icon text=\"Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  checked={this.value === TemplateSenderTypes.CREATOR}\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.CREATOR}\n                  onSelected={() => this.handleSelectSetting(TemplateSenderTypes.CREATOR)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Me</div>\n                  <verdocs-help-icon text=\"Only I can use this template.\" />\n                </div>\n              </div>\n            </div>\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"Cancel\" variant=\"outline\" onPress={() => this.handleCancel()} />\n              <verdocs-button label=\"Done\" onPress={() => this.handleDone()} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-template-sender-dialog.js","sourceRoot":"","sources":["../../../../src/components/dialogs/verdocs-template-sender-dialog/verdocs-template-sender-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {TemplateSenderTypes} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, Prop, h, Event, EventEmitter, Host, State} from '@stencil/core';\n\n/**\n * Display a dialog that allows a template sender to be selected.\n */\n@Component({\n  tag: 'verdocs-template-sender-dialog',\n  styleUrl: 'verdocs-template-sender-dialog.scss',\n})\nexport class VerdocsTemplateSenderDialog {\n  /**\n   * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n   */\n  @Prop() value: TemplateSenderTypes = TemplateSenderTypes.EVERYONE;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the closure reason.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the selected value.\n   */\n  @Event({composed: true}) next: EventEmitter<TemplateSenderTypes>;\n\n  @State() newValue: TemplateSenderTypes = TemplateSenderTypes.EVERYONE;\n\n  componentWillLoad() {\n    this.newValue = this.value;\n  }\n\n  handleCancel() {\n    this.cancel.emit();\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  handleDone() {\n    this.next.emit(this.newValue);\n  }\n\n  handleSelectSetting(value: TemplateSenderTypes) {\n    this.newValue = value;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"options\">\n              <div class=\"option\">\n                <verdocs-radio-button\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.EVERYONE}\n                  checked={this.value === TemplateSenderTypes.EVERYONE}\n                  onInput={() => this.handleSelectSetting(TemplateSenderTypes.EVERYONE)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone on the Web</div>\n                  <verdocs-help-icon text=\"Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.EVERYONE_AS_CREATOR}\n                  checked={this.value === TemplateSenderTypes.EVERYONE_AS_CREATOR}\n                  onInput={() => this.handleSelectSetting(TemplateSenderTypes.EVERYONE_AS_CREATOR)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone on the Web as me</div>\n                  <verdocs-help-icon text=\"Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.ORGANIZATION_MEMBER}\n                  checked={this.value === TemplateSenderTypes.ORGANIZATION_MEMBER}\n                  onInput={() => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone in my organization</div>\n                  <verdocs-help-icon text=\"Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR}\n                  checked={this.value === TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR}\n                  onInput={() => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone in my organization as me</div>\n                  <verdocs-help-icon text=\"Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.CREATOR}\n                  checked={this.value === TemplateSenderTypes.CREATOR}\n                  onInput={() => this.handleSelectSetting(TemplateSenderTypes.CREATOR)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Me</div>\n                  <verdocs-help-icon text=\"Only I can use this template.\" />\n                </div>\n              </div>\n            </div>\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"Cancel\" variant=\"outline\" onClick={() => this.handleCancel()} />\n              <verdocs-button label=\"Done\" onClick={() => this.handleDone()} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/dialogs/verdocs-template-sender-dialog/verdocs-template-sender-dialog.stories.js

@@ -1,19 +1,47 @@
 import { html } from 'lit-html';
+import { TemplateSenderTypes } from '@verdocs/js-sdk/Templates/Types';
 export default {
   title: 'Dialogs/Template Sender Dialog',
   component: 'verdocs-template-sender-dialog',
   args: {
-    open: true,
-    message: 'Login failed. Please check your username and password and try again.',
+    value: 'everyone',
   },
   argTypes: {
-    closed: {
-      action: 'closed',
-      table: {
-        disable: true,
+    value: {
+      options: [
+        TemplateSenderTypes.CREATOR,
+        TemplateSenderTypes.ORGANIZATION_MEMBER,
+        TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR,
+        TemplateSenderTypes.EVERYONE,
+        TemplateSenderTypes.EVERYONE_AS_CREATOR,
+      ],
+      mapping: {
+        [TemplateSenderTypes.CREATOR]: 'creator',
+        [TemplateSenderTypes.ORGANIZATION_MEMBER]: 'organization_member',
+        [TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR]: 'organization_member_as_creator',
+        [TemplateSenderTypes.EVERYONE]: 'everyone',
+        [TemplateSenderTypes.EVERYONE_AS_CREATOR]: 'everyone_as_creator',
       },
+      control: {
+        type: 'select',
+        labels: {
+          [TemplateSenderTypes.CREATOR]: 'creator',
+          [TemplateSenderTypes.ORGANIZATION_MEMBER]: 'organization_member',
+          [TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR]: 'organization_member_as_creator',
+          [TemplateSenderTypes.EVERYONE]: 'everyone',
+          [TemplateSenderTypes.EVERYONE_AS_CREATOR]: 'everyone_as_creator',
+        },
+      },
+    },
+    onNext: {
+      action: 'next',
+      table: { disable: true },
+    },
+    onCancel: {
+      action: 'cancel',
+      table: { disable: true },
     },
   },
 };
-export const TemplateSenderDialog = ({ message, open, closed }) => html `<verdocs-template-sender-dialog .message=${message} .open=${open} @closed=${closed} />`;
+export const TemplateSenderDialog = ({ value, onCancel, onNext }) => html `<verdocs-template-sender-dialog .value=${value} @cancel=${onCancel} @next=${onNext} />`;
 //# sourceMappingURL=verdocs-template-sender-dialog.stories.js.map

package/dist/collection/components/dialogs/verdocs-template-sender-dialog/verdocs-template-sender-dialog.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-template-sender-dialog.stories.js","sourceRoot":"","sources":["../../../../src/components/dialogs/verdocs-template-sender-dialog/verdocs-template-sender-dialog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,gCAAgC;EACvC,SAAS,EAAE,gCAAgC;EAC3C,IAAI,EAAE;IACJ,IAAI,EAAE,IAAI;IACV,OAAO,EAAE,sEAAsE;GAChF;EACD,QAAQ,EAAE;IACR,MAAM,EAAE;MACN,MAAM,EAAE,QAAQ;MAChB,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;OACd;KACF;GACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAC,EAAE,EAAE,CAAC,IAAI,CAAA,4CAA4C,OAAO,UAAU,IAAI,YAAY,MAAM,KAAK,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n  title: 'Dialogs/Template Sender Dialog',\n  component: 'verdocs-template-sender-dialog',\n  args: {\n    open: true,\n    message: 'Login failed. Please check your username and password and try again.',\n  },\n  argTypes: {\n    closed: {\n      action: 'closed',\n      table: {\n        disable: true,\n      },\n    },\n  },\n} as Meta;\n\nexport const TemplateSenderDialog = ({message, open, closed}) => html`<verdocs-template-sender-dialog .message=${message} .open=${open} @closed=${closed} />`;\n"]}
+{"version":3,"file":"verdocs-template-sender-dialog.stories.js","sourceRoot":"","sources":["../../../../src/components/dialogs/verdocs-template-sender-dialog/verdocs-template-sender-dialog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAE9B,OAAO,EAAC,mBAAmB,EAAC,MAAM,iCAAiC,CAAC;AAEpE,eAAe;EACb,KAAK,EAAE,gCAAgC;EACvC,SAAS,EAAE,gCAAgC;EAC3C,IAAI,EAAE;IACJ,KAAK,EAAE,UAAU;GAClB;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,OAAO,EAAE;QACP,mBAAmB,CAAC,OAAO;QAC3B,mBAAmB,CAAC,mBAAmB;QACvC,mBAAmB,CAAC,8BAA8B;QAClD,mBAAmB,CAAC,QAAQ;QAC5B,mBAAmB,CAAC,mBAAmB;OACxC;MACD,OAAO,EAAE;QACP,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,SAAS;QACxC,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,EAAE,qBAAqB;QAChE,CAAC,mBAAmB,CAAC,8BAA8B,CAAC,EAAE,gCAAgC;QACtF,CAAC,mBAAmB,CAAC,QAAQ,CAAC,EAAE,UAAU;QAC1C,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,EAAE,qBAAqB;OACjE;MACD,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE;UACN,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,SAAS;UACxC,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,EAAE,qBAAqB;UAChE,CAAC,mBAAmB,CAAC,8BAA8B,CAAC,EAAE,gCAAgC;UACtF,CAAC,mBAAmB,CAAC,QAAQ,CAAC,EAAE,UAAU;UAC1C,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,EAAE,qBAAqB;SACjE;OACF;KACF;IACD,MAAM,EAAE;MACN,MAAM,EAAE,MAAM;MACd,KAAK,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC;KACvB;IACD,QAAQ,EAAE;MACR,MAAM,EAAE,QAAQ;MAChB,KAAK,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC;KACvB;GACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAC,EAAE,EAAE,CAAC,IAAI,CAAA,0CAA0C,KAAK,YAAY,QAAQ,UAAU,MAAM,KAAK,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\nimport {TemplateSenderTypes} from '@verdocs/js-sdk/Templates/Types';\n\nexport default {\n  title: 'Dialogs/Template Sender Dialog',\n  component: 'verdocs-template-sender-dialog',\n  args: {\n    value: 'everyone',\n  },\n  argTypes: {\n    value: {\n      options: [\n        TemplateSenderTypes.CREATOR,\n        TemplateSenderTypes.ORGANIZATION_MEMBER,\n        TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR,\n        TemplateSenderTypes.EVERYONE,\n        TemplateSenderTypes.EVERYONE_AS_CREATOR,\n      ],\n      mapping: {\n        [TemplateSenderTypes.CREATOR]: 'creator',\n        [TemplateSenderTypes.ORGANIZATION_MEMBER]: 'organization_member',\n        [TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR]: 'organization_member_as_creator',\n        [TemplateSenderTypes.EVERYONE]: 'everyone',\n        [TemplateSenderTypes.EVERYONE_AS_CREATOR]: 'everyone_as_creator',\n      },\n      control: {\n        type: 'select',\n        labels: {\n          [TemplateSenderTypes.CREATOR]: 'creator',\n          [TemplateSenderTypes.ORGANIZATION_MEMBER]: 'organization_member',\n          [TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR]: 'organization_member_as_creator',\n          [TemplateSenderTypes.EVERYONE]: 'everyone',\n          [TemplateSenderTypes.EVERYONE_AS_CREATOR]: 'everyone_as_creator',\n        },\n      },\n    },\n    onNext: {\n      action: 'next',\n      table: {disable: true},\n    },\n    onCancel: {\n      action: 'cancel',\n      table: {disable: true},\n    },\n  },\n} as Meta;\n\nexport const TemplateSenderDialog = ({value, onCancel, onNext}) => html`<verdocs-template-sender-dialog .value=${value} @cancel=${onCancel} @next=${onNext} />`;\n"]}

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

@@ -1,19 +1,19 @@
 import { h, Host } from '@stencil/core';
 import { fileToDataUrl } from '@verdocs/js-sdk/Utils/Files';
-import Paperclip from './paperclip.svg';
-import Trash from './trash.svg';
+const TrashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>`;
+const PaperclipIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /></svg>`;
 /**
- * Display a file upload experience.
+ * Display a file upload tool. Note that the file is not actually transmitted, so it may be used by
+ * callers with a variety of workflows. Instead, data about the chosen file will be passed to the
+ * caller via the onNext event handler.
  */
 export class VerdocsUploadDialog {
   constructor() {
-    this.open = false;
     this.draggingOver = false;
     this.decodedFiles = [];
   }
   handleCancel() {
     this.cancel.emit();
-    this.open = false;
   }
   // We need a separate event handler for clicking the background because it can receive events "through" other child components
   handleDismiss(e) {
@@ -23,8 +23,7 @@ export class VerdocsUploadDialog {
     }
   }
   handleDone() {
-    this.done.emit(this.decodedFiles);
-    this.open = false;
+    this.next.emit(this.decodedFiles);
   }
   handleDragOver(e) {
     e.preventDefault();
@@ -61,18 +60,16 @@ export class VerdocsUploadDialog {
     var _a;
     (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.click();
   }
-  async handleFileChange(e) {
-    var _a, _b, _c;
-    console.log('fileChange', e);
-    console.log('files', (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.files);
+  async handleFileChange() {
+    var _a, _b;
     let droppedFiles = [];
-    for (let i = 0; i < ((_b = this.fileInput) === null || _b === void 0 ? void 0 : _b.files.length); i++) {
-      droppedFiles.push((_c = this.fileInput) === null || _c === void 0 ? void 0 : _c.files[i]);
+    for (let i = 0; i < ((_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.files.length); i++) {
+      droppedFiles.push((_b = this.fileInput) === null || _b === void 0 ? void 0 : _b.files[i]);
     }
     this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
   }
   render() {
-    return (h(Host, { style: { display: this.open ? 'block' : 'none' } }, h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { class: "dialog" }, h("div", { class: "heading" }, "Upload attachment"), this.decodedFiles.length < 1 ? (h("div", { class: { 'drop-target': true, 'dragging-over': this.draggingOver }, onDragOver: e => this.handleDragOver(e), onDragLeave: e => this.handleDragLeave(e), onDrop: e => this.handleDrop(e) }, h("p", null, "Drag and drop a file here..."), h("p", null, "- or -"), h("verdocs-button", { label: "Select a file...", onPress: () => this.handleSelectFile() }), h("input", { type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, onChange: e => this.handleFileChange(e) }))) : (h("div", { class: "attachments" }, this.decodedFiles.map((file, index) => (h("div", { class: "attachment" }, h("div", { class: "icon", innerHTML: Paperclip }), h("div", { class: "name" }, file.name), h("div", { class: "icon trash", innerHTML: Trash, onClick: () => this.handleRemoveAttachment(index) })))))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", variant: "outline", onPress: () => this.handleCancel() }), h("verdocs-button", { label: "Done", onPress: () => this.handleDone(), disabled: this.decodedFiles.length < 1 }))))));
+    return (h(Host, null, h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { class: "dialog" }, h("div", { class: "heading" }, "Upload attachment"), this.decodedFiles.length < 1 ? (h("div", { class: { 'drop-target': true, 'dragging-over': this.draggingOver }, onDragOver: e => this.handleDragOver(e), onDragLeave: e => this.handleDragLeave(e), onDrop: e => this.handleDrop(e) }, h("p", null, "Drag and drop a file here..."), h("p", null, "- or -"), h("verdocs-button", { label: "Select a file...", onClick: () => this.handleSelectFile() }), h("input", { type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, onChange: () => this.handleFileChange() }))) : (h("div", { class: "attachments" }, this.decodedFiles.map((file, index) => (h("div", { class: "attachment" }, h("div", { class: "icon", innerHTML: PaperclipIcon }), h("div", { class: "name" }, file.name), h("div", { class: "icon trash", innerHTML: TrashIcon, onClick: () => this.handleRemoveAttachment(index) })))))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { label: "Done", onClick: () => this.handleDone(), disabled: this.decodedFiles.length < 1 }))))));
   }
   static get is() { return "verdocs-upload-dialog"; }
   static get originalStyleUrls() {
@@ -85,28 +82,6 @@ export class VerdocsUploadDialog {
       "$": ["verdocs-upload-dialog.css"]
     };
   }
-  static get properties() {
-    return {
-      "open": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed."
-        },
-        "attribute": "open",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
   static get states() {
     return {
       "draggingOver": {},
@@ -122,7 +97,7 @@ export class VerdocsUploadDialog {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Event fired when the dialog is closed. The event data will contain the closure reason."
+          "text": "Event fired when the dialog is cancelled."
         },
         "complexType": {
           "original": "any",
@@ -130,14 +105,14 @@ export class VerdocsUploadDialog {
           "references": {}
         }
       }, {
-        "method": "done",
-        "name": "done",
+        "method": "next",
+        "name": "next",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Event fired when the dialog is closed. The event data will contain the closure reason."
+          "text": "Event fired when the dialog is closed. The event data will contain the file selected."
         },
         "complexType": {
           "original": "FileWithData[]",

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

@@ -1 +1 @@
-{"version":3,"file":"verdocs-upload-dialog.js","sourceRoot":"","sources":["../../../../src/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Prop, h, Event, EventEmitter, Host, State} from '@stencil/core';\nimport {fileToDataUrl, FileWithData} from '@verdocs/js-sdk/Utils/Files';\nimport Paperclip from './paperclip.svg';\nimport Trash from './trash.svg';\n\n/**\n * Display a file upload experience.\n */\n@Component({\n  tag: 'verdocs-upload-dialog',\n  styleUrl: 'verdocs-upload-dialog.scss',\n})\nexport class VerdocsUploadDialog {\n  private fileInput?: HTMLInputElement;\n\n  /**\n   * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n   */\n  @Prop() open: boolean = false;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the closure reason.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the closure reason.\n   */\n  @Event({composed: true}) done: EventEmitter<FileWithData[]>;\n\n  @State() draggingOver = false;\n\n  @State() decodedFiles = [] as FileWithData[];\n\n  handleCancel() {\n    this.cancel.emit();\n    this.open = false;\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  handleDone() {\n    this.done.emit(this.decodedFiles);\n    this.open = false;\n  }\n\n  handleDragOver(e) {\n    e.preventDefault();\n    this.draggingOver = true;\n  }\n\n  handleDragLeave(e) {\n    e.preventDefault();\n    this.draggingOver = false;\n  }\n\n  async handleDrop(e) {\n    e.preventDefault();\n    this.draggingOver = false;\n\n    // Required for cross-browser support. Note that dataTransfer.items is of type DataTransferItemList and is not an array.\n    let droppedFiles = [] as File[];\n    if (e.dataTransfer.items) {\n      for (let i = 0; i < e.dataTransfer.items.length; i++) {\n        if (e.dataTransfer.items[i].kind === 'file') {\n          const file = e.dataTransfer.items[i].getAsFile();\n          droppedFiles.push(file);\n        }\n      }\n    } else {\n      droppedFiles = e.dataTransfer.files;\n    }\n\n    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));\n  }\n\n  handleRemoveAttachment(index: number) {\n    const newFiles = [...this.decodedFiles];\n    newFiles.splice(index, 1);\n    this.decodedFiles = newFiles;\n  }\n\n  handleSelectFile() {\n    this.fileInput?.click();\n  }\n\n  async handleFileChange(e) {\n    console.log('fileChange', e);\n    console.log('files', this.fileInput?.files);\n    let droppedFiles = [] as File[];\n    for (let i = 0; i < this.fileInput?.files.length; i++) {\n      droppedFiles.push(this.fileInput?.files[i]);\n    }\n    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));\n  }\n\n  render() {\n    return (\n      <Host style={{display: this.open ? 'block' : 'none'}}>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"heading\">Upload attachment</div>\n\n            {this.decodedFiles.length < 1 ? (\n              <div\n                class={{'drop-target': true, 'dragging-over': this.draggingOver}}\n                onDragOver={e => this.handleDragOver(e)}\n                onDragLeave={e => this.handleDragLeave(e)}\n                onDrop={e => this.handleDrop(e)}\n              >\n                <p>Drag and drop a file here...</p>\n                <p>- or -</p>\n\n                <verdocs-button label=\"Select a file...\" onPress={() => this.handleSelectFile()} />\n                <input type=\"file\" ref={el => (this.fileInput = el as HTMLInputElement)} style={{display: 'none'}} onChange={e => this.handleFileChange(e)} />\n              </div>\n            ) : (\n              <div class=\"attachments\">\n                {this.decodedFiles.map((file, index) => (\n                  <div class=\"attachment\">\n                    <div class=\"icon\" innerHTML={Paperclip} />\n                    <div class=\"name\">{file.name}</div>\n                    <div class=\"icon trash\" innerHTML={Trash} onClick={() => this.handleRemoveAttachment(index)} />\n                  </div>\n                ))}\n              </div>\n            )}\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"Cancel\" variant=\"outline\" onPress={() => this.handleCancel()} />\n              <verdocs-button label=\"Done\" onPress={() => this.handleDone()} disabled={this.decodedFiles.length < 1} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-upload-dialog.js","sourceRoot":"","sources":["../../../../src/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAC,aAAa,EAAe,MAAM,6BAA6B,CAAC;AAExE,MAAM,SAAS,GAAG,+SAA+S,CAAC;AAElU,MAAM,aAAa,GAAG,uSAAuS,CAAC;AAE9T;;;;GAIG;AAKH,MAAM,OAAO,mBAAmB;;wBAaN,KAAK;wBAEL,EAAoB;;EAE5C,YAAY;IACV,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;EACrB,CAAC;EAED,8HAA8H;EAC9H,aAAa,CAAC,CAAM;IAClB,IAAI,CAAC,CAAC,MAAM,CAAC,SAAS,KAAK,oBAAoB,EAAE;MAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;MACnB,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;EACH,CAAC;EAED,UAAU;IACR,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EACpC,CAAC;EAED,cAAc,CAAC,CAAC;IACd,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;EAC3B,CAAC;EAED,eAAe,CAAC,CAAC;IACf,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;EAC5B,CAAC;EAED,KAAK,CAAC,UAAU,CAAC,CAAC;IAChB,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAE1B,wHAAwH;IACxH,IAAI,YAAY,GAAG,EAAY,CAAC;IAChC,IAAI,CAAC,CAAC,YAAY,CAAC,KAAK,EAAE;MACxB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACpD,IAAI,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,MAAM,EAAE;UAC3C,MAAM,IAAI,GAAG,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;UACjD,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACzB;OACF;KACF;SAAM;MACL,YAAY,GAAG,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC;KACrC;IAED,IAAI,CAAC,YAAY,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,CAAC;EACzE,CAAC;EAED,sBAAsB,CAAC,KAAa;IAClC,MAAM,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC;IACxC,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC1B,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;EAC/B,CAAC;EAED,gBAAgB;;IACd,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE,CAAC;EAC1B,CAAC;EAED,KAAK,CAAC,gBAAgB;;IACpB,IAAI,YAAY,GAAG,EAAY,CAAC;IAChC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAG,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,CAAC,MAAM,CAAA,EAAE,CAAC,EAAE,EAAE;MACrD,YAAY,CAAC,IAAI,CAAC,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;KAC7C;IACD,IAAI,CAAC,YAAY,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,CAAC;EACzE,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;QACjE,WAAK,KAAK,EAAC,QAAQ;UACjB,WAAK,KAAK,EAAC,SAAS,wBAAwB;UAE3C,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC9B,WACE,KAAK,EAAE,EAAC,aAAa,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,CAAC,YAAY,EAAC,EAChE,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EACvC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EACzC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;YAE/B,4CAAmC;YACnC,sBAAa;YAEb,sBAAgB,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAI;YACnF,aAAO,IAAI,EAAC,MAAM,EAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAsB,CAAC,EAAE,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAI,CAC1I,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,aAAa,IACrB,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,WAAK,KAAK,EAAC,YAAY;YACrB,WAAK,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,aAAa,GAAI;YAC9C,WAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAO;YACnC,WAAK,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,GAAI,CAC/F,CACP,CAAC,CACE,CACP;UAED,WAAK,KAAK,EAAC,SAAS;YAClB,sBAAgB,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,GAAI;YACvF,sBAAgB,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,GAAI,CACrG,CACF,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, h, Event, EventEmitter, Host, State} from '@stencil/core';\nimport {fileToDataUrl, FileWithData} from '@verdocs/js-sdk/Utils/Files';\n\nconst TrashIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\" /></svg>`;\n\nconst PaperclipIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13\" /></svg>`;\n\n/**\n * Display a file upload tool. Note that the file is not actually transmitted, so it may be used by\n * callers with a variety of workflows. Instead, data about the chosen file will be passed to the\n * caller via the onNext event handler.\n */\n@Component({\n  tag: 'verdocs-upload-dialog',\n  styleUrl: 'verdocs-upload-dialog.scss',\n})\nexport class VerdocsUploadDialog {\n  private fileInput?: HTMLInputElement;\n\n  /**\n   * Event fired when the dialog is cancelled.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the file selected.\n   */\n  @Event({composed: true}) next: EventEmitter<FileWithData[]>;\n\n  @State() draggingOver = false;\n\n  @State() decodedFiles = [] as FileWithData[];\n\n  handleCancel() {\n    this.cancel.emit();\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  handleDone() {\n    this.next.emit(this.decodedFiles);\n  }\n\n  handleDragOver(e) {\n    e.preventDefault();\n    this.draggingOver = true;\n  }\n\n  handleDragLeave(e) {\n    e.preventDefault();\n    this.draggingOver = false;\n  }\n\n  async handleDrop(e) {\n    e.preventDefault();\n    this.draggingOver = false;\n\n    // Required for cross-browser support. Note that dataTransfer.items is of type DataTransferItemList and is not an array.\n    let droppedFiles = [] as File[];\n    if (e.dataTransfer.items) {\n      for (let i = 0; i < e.dataTransfer.items.length; i++) {\n        if (e.dataTransfer.items[i].kind === 'file') {\n          const file = e.dataTransfer.items[i].getAsFile();\n          droppedFiles.push(file);\n        }\n      }\n    } else {\n      droppedFiles = e.dataTransfer.files;\n    }\n\n    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));\n  }\n\n  handleRemoveAttachment(index: number) {\n    const newFiles = [...this.decodedFiles];\n    newFiles.splice(index, 1);\n    this.decodedFiles = newFiles;\n  }\n\n  handleSelectFile() {\n    this.fileInput?.click();\n  }\n\n  async handleFileChange() {\n    let droppedFiles = [] as File[];\n    for (let i = 0; i < this.fileInput?.files.length; i++) {\n      droppedFiles.push(this.fileInput?.files[i]);\n    }\n    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"heading\">Upload attachment</div>\n\n            {this.decodedFiles.length < 1 ? (\n              <div\n                class={{'drop-target': true, 'dragging-over': this.draggingOver}}\n                onDragOver={e => this.handleDragOver(e)}\n                onDragLeave={e => this.handleDragLeave(e)}\n                onDrop={e => this.handleDrop(e)}\n              >\n                <p>Drag and drop a file here...</p>\n                <p>- or -</p>\n\n                <verdocs-button label=\"Select a file...\" onClick={() => this.handleSelectFile()} />\n                <input type=\"file\" ref={el => (this.fileInput = el as HTMLInputElement)} style={{display: 'none'}} onChange={() => this.handleFileChange()} />\n              </div>\n            ) : (\n              <div class=\"attachments\">\n                {this.decodedFiles.map((file, index) => (\n                  <div class=\"attachment\">\n                    <div class=\"icon\" innerHTML={PaperclipIcon} />\n                    <div class=\"name\">{file.name}</div>\n                    <div class=\"icon trash\" innerHTML={TrashIcon} onClick={() => this.handleRemoveAttachment(index)} />\n                  </div>\n                ))}\n              </div>\n            )}\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"Cancel\" variant=\"outline\" onClick={() => this.handleCancel()} />\n              <verdocs-button label=\"Done\" onClick={() => this.handleDone()} disabled={this.decodedFiles.length < 1} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/elements/verdocs-contact-picker/verdocs-contact-picker.js

@@ -59,7 +59,7 @@ export class VerdocsContactPicker {
     var _a;
     e.stopPropagation();
     this.showSuggestions = false;
-    (_a = this.contactSelected) === null || _a === void 0 ? void 0 : _a.emit({
+    (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({
       full_name: this.name,
       email: this.email,
       phone: this.phone,
@@ -86,7 +86,7 @@ export class VerdocsContactPicker {
       } }), h("verdocs-toggle-button", { icon: delegateIcon, size: "small", active: this.delegator, onToggle: e => {
         this.delegator = e.detail.active;
         this.showSuggestions = false;
-      } }), h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onPress: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onPress: e => this.handleSubmit(e) }))));
+      } }), h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onClick: e => this.handleSubmit(e) }))));
   }
   static get is() { return "verdocs-contact-picker"; }
   static get originalStyleUrls() {
@@ -215,8 +215,8 @@ export class VerdocsContactPicker {
           "references": {}
         }
       }, {
-        "method": "contactSelected",
-        "name": "contactSelected",
+        "method": "next",
+        "name": "next",
         "bubbles": true,
         "cancelable": true,
         "composed": true,

package/dist/collection/components/elements/verdocs-contact-picker/verdocs-contact-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-contact-picker.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-contact-picker/verdocs-contact-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {IRole} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, h, Event, EventEmitter, Prop, State} from '@stencil/core';\n\nconst messageIcon =\n  '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z\"></path></svg>';\n\nconst delegateIcon =\n  '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" data-testid=\"AssignmentIndIcon\" tabindex=\"-1\" title=\"AssignmentInd\"><path d=\"M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z\"></path></svg>';\n\nconst placeholderIcon =\n  '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" data-testid=\"AccountCircleIcon\" tabindex=\"-1\" title=\"AccountCircle\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20z\"></path></svg>';\n\nexport interface IContactSearchEvent {\n  // The text the user has entered in the search field\n  query: string;\n}\n\nexport interface IContactSelectEvent {\n  full_name: string;\n  email: string;\n  phone: string;\n  message: string;\n  delegator: boolean;\n}\n\nexport interface IEmailContact {\n  // Optional but recommended. An internal identifier used to identify the contact in the calling system.\n  id?: any;\n\n  // The user's avatar. If not set, a placeholder will be shown. To hide avatars entirely, use CSS to set\n  // `verdocs-contact-picker .avatar { display: none; }`\n  avatar?: string;\n\n  // The recipient's name, as it should be displayed to the user.\n  name: string;\n\n  // The email address for the contact.\n  email: string;\n\n  // An optional phone number for the contact. This number must be able SMS messages. If both email and phone are provided,\n  // notifications will be sent to both locations.\n  phone?: string;\n\n  [key: string]: any;\n}\n\nexport interface IPhoneContact {\n  // Optional but recommended. An internal identifier used to identify the contact in the calling system.\n  id?: any;\n\n  // The user's avatar. If not set, a placeholder will be shown. To hide avatars entirely, use CSS to set\n  // `verdocs-contact-picker .avatar { display: none; }`\n  avatar?: string;\n\n  // The recipient's name, as it should be displayed to the user.\n  name: string;\n\n  // The email address for the contact.\n  email?: string;\n\n  // An optional phone number for the contact. This number must be able SMS messages. If both email and phone are provided,\n  // notifications will be sent to both locations.\n  phone: string;\n\n  [key: string]: any;\n}\n\n/**\n * Displays a contact picker suitable for filling out Recipient objects when sending Documents.\n *\n * This picker can also be integrated with a backend to provide contact list / suggestion / address-book style behavior. As the\n * user interacts with the component, the text entered in the name field is sent back to the parent via the `searchContacts` event.\n * The parent can use that text as a query string to call a backend to obtain appropriate contacts to show. This list may also be\n * hard-coded ahead of time to provide the user with smart suggestions on initial display, such as \"Recently Used\" contacts, or\n * to always display the user's own contact record.\n */\n@Component({\n  tag: 'verdocs-contact-picker',\n  styleUrl: 'verdocs-contact-picker.scss',\n  shadow: false,\n})\nexport class VerdocsContactPicker {\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 role that this contact will be assigned to.\n   */\n  @Prop() templateRole: IRole | null = null;\n\n  /**\n   * If set, suggestions will be displayed in a drop-down list to the user. It is recommended that the number\n   * of suggestions be limited to the 5 best matching records.\n   */\n  @Prop() contactSuggestions: (IEmailContact | IPhoneContact)[] = [];\n\n  /**\n   * Event fired when the user enters text in the search field. The calling application may use this to update\n   * the `contactSuggestions` property.\n   */\n  @Event({composed: true}) searchContacts: EventEmitter<IContactSearchEvent>;\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the user changes the type.\n   */\n  @Event({composed: true}) contactSelected: EventEmitter<IContactSelectEvent>;\n\n  @State() name: string;\n  @State() email: string;\n  @State() phone: string;\n  @State() message: string;\n  @State() showSuggestions: boolean = false;\n  @State() showMessage: boolean = false;\n  @State() delegator: boolean = false;\n\n  componentWillLoad() {\n    if (this.templateRole) {\n      this.name = this.templateRole.full_name || '';\n      this.email = this.templateRole.email || '';\n      this.phone = this.templateRole.phone || '';\n      this.delegator = this.templateRole.delegator || false;\n      this.message = this.templateRole.message || '';\n      this.showMessage = this.message !== '';\n    }\n  }\n\n  handleNameChange(e: any) {\n    this.name = e.target.value;\n    this.searchContacts?.emit({query: this.name});\n  }\n\n  handleEmailChange(e: any) {\n    this.email = e.target.value;\n  }\n\n  handlePhoneChange(e: any) {\n    this.phone = e.target.value;\n  }\n\n  handleMessageChange(e: any) {\n    this.message = e.target.value;\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.showSuggestions = false;\n    this.cancel?.emit();\n  }\n\n  handleSubmit(e) {\n    e.stopPropagation();\n\n    this.showSuggestions = false;\n    this.contactSelected?.emit({\n      full_name: this.name,\n      email: this.email,\n      phone: this.phone,\n      message: this.message,\n      delegator: this.delegator,\n    });\n  }\n\n  handleSelectSuggestion(e: any, suggestion: IEmailContact | IPhoneContact) {\n    e.stopPropagation();\n\n    this.name = suggestion.name;\n    this.email = suggestion.email;\n    this.phone = suggestion.phone;\n    this.showSuggestions = false;\n  }\n\n  render() {\n    return (\n      <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n        <div class=\"row\">\n          <label htmlFor=\"verdocs-contact-picker-name\">Name:</label>\n          <input\n            id=\"verdocs-contact-picker-name\"\n            name=\"verdocs-contact-picker-name\"\n            type=\"text\"\n            data-lpignore=\"true\"\n            autocomplete=\"off\"\n            value={this.name}\n            placeholder=\"Recipient Name...\"\n            onFocus={() => (this.showSuggestions = this.contactSuggestions?.length > 0)}\n            // onBlur={() => (this.showSuggestions = false)}\n            onInput={e => this.handleNameChange(e)}\n          />\n\n          {this.showSuggestions && (\n            <div class=\"dropdown\">\n              {this.contactSuggestions.map(suggestion => (\n                <div key={suggestion.id ?? suggestion.name} class=\"suggestion\" onClick={e => this.handleSelectSuggestion(e, suggestion)}>\n                  {suggestion.avatar ? <img alt=\"Avatar\" class=\"avatar\" src={suggestion.avatar} /> : <div class=\"avatar\" innerHTML={placeholderIcon} />}\n                  <div class=\"details\">\n                    <div class=\"name\">{suggestion.name}</div>\n                    {suggestion.email && <div class=\"destination\">{suggestion.email}</div>}\n                    {suggestion.phone && <div class=\"destination\">{suggestion.phone}</div>}\n                  </div>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n\n        <div class=\"row\">\n          <label htmlFor=\"verdocs-contact-picker-email\">Email:</label>\n          <input\n            id=\"verdocs-contact-picker-email\"\n            name=\"verdocs-contact-picker-email\"\n            type=\"text\"\n            data-lpignore=\"true\"\n            autoComplete=\"off\"\n            value={this.email}\n            placeholder=\"Email Address...\"\n            onFocus={() => (this.showSuggestions = false)}\n            onInput={e => this.handleEmailChange(e)}\n          />\n        </div>\n\n        <div class=\"row\">\n          <label htmlFor=\"verdocs-contact-picker-phone\">Phone:</label>\n          <input\n            id=\"verdocs-contact-picker-phone\"\n            name=\"verdocs-contact-picker-phone\"\n            type=\"text\"\n            data-lpignore=\"true\"\n            autocomplete=\"off\"\n            value={this.phone}\n            placeholder=\"Phone Number...\"\n            onFocus={() => (this.showSuggestions = false)}\n            onInput={e => this.handlePhoneChange(e)}\n          />\n        </div>\n\n        {this.showMessage && (\n          <div class=\"row\">\n            <label htmlFor=\"verdocs-contact-picker-message\">Message:</label>\n            <input\n              id=\"verdocs-contact-picker-message\"\n              name=\"verdocs-contact-picker-message\"\n              type=\"text\"\n              data-lpignore=\"true\"\n              autocomplete=\"off\"\n              value={this.message}\n              placeholder=\"Invitation Message...\"\n              onFocus={() => (this.showSuggestions = false)}\n              onInput={e => this.handleMessageChange(e)}\n            />\n          </div>\n        )}\n\n        <div class=\"buttons\">\n          <verdocs-toggle-button\n            icon={messageIcon}\n            size=\"small\"\n            active={this.showMessage}\n            onToggle={e => {\n              this.showMessage = e.detail.active;\n              this.showSuggestions = false;\n            }}\n          />\n          <verdocs-toggle-button\n            icon={delegateIcon}\n            size=\"small\"\n            active={this.delegator}\n            onToggle={e => {\n              this.delegator = e.detail.active;\n              this.showSuggestions = false;\n            }}\n          />\n\n          <div class=\"flex-fill\" />\n\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onPress={e => this.handleCancel(e)} />\n          <verdocs-button label=\"OK\" size=\"small\" onPress={e => this.handleSubmit(e)} />\n        </div>\n      </form>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-contact-picker.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-contact-picker/verdocs-contact-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {IRole} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, h, Event, EventEmitter, Prop, State} from '@stencil/core';\n\nconst messageIcon =\n  '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z\"></path></svg>';\n\nconst delegateIcon =\n  '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" data-testid=\"AssignmentIndIcon\" tabindex=\"-1\" title=\"AssignmentInd\"><path d=\"M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z\"></path></svg>';\n\nconst placeholderIcon =\n  '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" data-testid=\"AccountCircleIcon\" tabindex=\"-1\" title=\"AccountCircle\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20z\"></path></svg>';\n\nexport interface IContactSearchEvent {\n  // The text the user has entered in the search field\n  query: string;\n}\n\nexport interface IContactSelectEvent {\n  full_name: string;\n  email: string;\n  phone: string;\n  message: string;\n  delegator: boolean;\n}\n\nexport interface IEmailContact {\n  // Optional but recommended. An internal identifier used to identify the contact in the calling system.\n  id?: any;\n\n  // The user's avatar. If not set, a placeholder will be shown. To hide avatars entirely, use CSS to set\n  // `verdocs-contact-picker .avatar { display: none; }`\n  avatar?: string;\n\n  // The recipient's name, as it should be displayed to the user.\n  name: string;\n\n  // The email address for the contact.\n  email: string;\n\n  // An optional phone number for the contact. This number must be able SMS messages. If both email and phone are provided,\n  // notifications will be sent to both locations.\n  phone?: string;\n\n  [key: string]: any;\n}\n\nexport interface IPhoneContact {\n  // Optional but recommended. An internal identifier used to identify the contact in the calling system.\n  id?: any;\n\n  // The user's avatar. If not set, a placeholder will be shown. To hide avatars entirely, use CSS to set\n  // `verdocs-contact-picker .avatar { display: none; }`\n  avatar?: string;\n\n  // The recipient's name, as it should be displayed to the user.\n  name: string;\n\n  // The email address for the contact.\n  email?: string;\n\n  // An optional phone number for the contact. This number must be able SMS messages. If both email and phone are provided,\n  // notifications will be sent to both locations.\n  phone: string;\n\n  [key: string]: any;\n}\n\n/**\n * Displays a contact picker suitable for filling out Recipient objects when sending Documents.\n *\n * This picker can also be integrated with a backend to provide contact list / suggestion / address-book style behavior. As the\n * user interacts with the component, the text entered in the name field is sent back to the parent via the `searchContacts` event.\n * The parent can use that text as a query string to call a backend to obtain appropriate contacts to show. This list may also be\n * hard-coded ahead of time to provide the user with smart suggestions on initial display, such as \"Recently Used\" contacts, or\n * to always display the user's own contact record.\n */\n@Component({\n  tag: 'verdocs-contact-picker',\n  styleUrl: 'verdocs-contact-picker.scss',\n  shadow: false,\n})\nexport class VerdocsContactPicker {\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 role that this contact will be assigned to.\n   */\n  @Prop() templateRole: IRole | null = null;\n\n  /**\n   * If set, suggestions will be displayed in a drop-down list to the user. It is recommended that the number\n   * of suggestions be limited to the 5 best matching records.\n   */\n  @Prop() contactSuggestions: (IEmailContact | IPhoneContact)[] = [];\n\n  /**\n   * Event fired when the user enters text in the search field. The calling application may use this to update\n   * the `contactSuggestions` property.\n   */\n  @Event({composed: true}) searchContacts: EventEmitter<IContactSearchEvent>;\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the user changes the type.\n   */\n  @Event({composed: true}) next: EventEmitter<IContactSelectEvent>;\n\n  @State() name: string;\n  @State() email: string;\n  @State() phone: string;\n  @State() message: string;\n  @State() showSuggestions: boolean = false;\n  @State() showMessage: boolean = false;\n  @State() delegator: boolean = false;\n\n  componentWillLoad() {\n    if (this.templateRole) {\n      this.name = this.templateRole.full_name || '';\n      this.email = this.templateRole.email || '';\n      this.phone = this.templateRole.phone || '';\n      this.delegator = this.templateRole.delegator || false;\n      this.message = this.templateRole.message || '';\n      this.showMessage = this.message !== '';\n    }\n  }\n\n  handleNameChange(e: any) {\n    this.name = e.target.value;\n    this.searchContacts?.emit({query: this.name});\n  }\n\n  handleEmailChange(e: any) {\n    this.email = e.target.value;\n  }\n\n  handlePhoneChange(e: any) {\n    this.phone = e.target.value;\n  }\n\n  handleMessageChange(e: any) {\n    this.message = e.target.value;\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.showSuggestions = false;\n    this.cancel?.emit();\n  }\n\n  handleSubmit(e) {\n    e.stopPropagation();\n\n    this.showSuggestions = false;\n    this.next?.emit({\n      full_name: this.name,\n      email: this.email,\n      phone: this.phone,\n      message: this.message,\n      delegator: this.delegator,\n    });\n  }\n\n  handleSelectSuggestion(e: any, suggestion: IEmailContact | IPhoneContact) {\n    e.stopPropagation();\n\n    this.name = suggestion.name;\n    this.email = suggestion.email;\n    this.phone = suggestion.phone;\n    this.showSuggestions = false;\n  }\n\n  render() {\n    return (\n      <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n        <div class=\"row\">\n          <label htmlFor=\"verdocs-contact-picker-name\">Name:</label>\n          <input\n            id=\"verdocs-contact-picker-name\"\n            name=\"verdocs-contact-picker-name\"\n            type=\"text\"\n            data-lpignore=\"true\"\n            autocomplete=\"off\"\n            value={this.name}\n            placeholder=\"Recipient Name...\"\n            onFocus={() => (this.showSuggestions = this.contactSuggestions?.length > 0)}\n            // onBlur={() => (this.showSuggestions = false)}\n            onInput={e => this.handleNameChange(e)}\n          />\n\n          {this.showSuggestions && (\n            <div class=\"dropdown\">\n              {this.contactSuggestions.map(suggestion => (\n                <div key={suggestion.id ?? suggestion.name} class=\"suggestion\" onClick={e => this.handleSelectSuggestion(e, suggestion)}>\n                  {suggestion.avatar ? <img alt=\"Avatar\" class=\"avatar\" src={suggestion.avatar} /> : <div class=\"avatar\" innerHTML={placeholderIcon} />}\n                  <div class=\"details\">\n                    <div class=\"name\">{suggestion.name}</div>\n                    {suggestion.email && <div class=\"destination\">{suggestion.email}</div>}\n                    {suggestion.phone && <div class=\"destination\">{suggestion.phone}</div>}\n                  </div>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n\n        <div class=\"row\">\n          <label htmlFor=\"verdocs-contact-picker-email\">Email:</label>\n          <input\n            id=\"verdocs-contact-picker-email\"\n            name=\"verdocs-contact-picker-email\"\n            type=\"text\"\n            data-lpignore=\"true\"\n            autoComplete=\"off\"\n            value={this.email}\n            placeholder=\"Email Address...\"\n            onFocus={() => (this.showSuggestions = false)}\n            onInput={e => this.handleEmailChange(e)}\n          />\n        </div>\n\n        <div class=\"row\">\n          <label htmlFor=\"verdocs-contact-picker-phone\">Phone:</label>\n          <input\n            id=\"verdocs-contact-picker-phone\"\n            name=\"verdocs-contact-picker-phone\"\n            type=\"text\"\n            data-lpignore=\"true\"\n            autocomplete=\"off\"\n            value={this.phone}\n            placeholder=\"Phone Number...\"\n            onFocus={() => (this.showSuggestions = false)}\n            onInput={e => this.handlePhoneChange(e)}\n          />\n        </div>\n\n        {this.showMessage && (\n          <div class=\"row\">\n            <label htmlFor=\"verdocs-contact-picker-message\">Message:</label>\n            <input\n              id=\"verdocs-contact-picker-message\"\n              name=\"verdocs-contact-picker-message\"\n              type=\"text\"\n              data-lpignore=\"true\"\n              autocomplete=\"off\"\n              value={this.message}\n              placeholder=\"Invitation Message...\"\n              onFocus={() => (this.showSuggestions = false)}\n              onInput={e => this.handleMessageChange(e)}\n            />\n          </div>\n        )}\n\n        <div class=\"buttons\">\n          <verdocs-toggle-button\n            icon={messageIcon}\n            size=\"small\"\n            active={this.showMessage}\n            onToggle={e => {\n              this.showMessage = e.detail.active;\n              this.showSuggestions = false;\n            }}\n          />\n          <verdocs-toggle-button\n            icon={delegateIcon}\n            size=\"small\"\n            active={this.delegator}\n            onToggle={e => {\n              this.delegator = e.detail.active;\n              this.showSuggestions = false;\n            }}\n          />\n\n          <div class=\"flex-fill\" />\n\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onClick={e => this.handleCancel(e)} />\n          <verdocs-button label=\"OK\" size=\"small\" onClick={e => this.handleSubmit(e)} />\n        </div>\n      </form>\n    );\n  }\n}\n"]}

package/dist/collection/components/elements/verdocs-contact-picker/verdocs-contact-picker.stories.js

@@ -22,15 +22,9 @@ export default {
   },
   argTypes: {
     searchContacts: { action: 'searchContacts' },
-    cancel: { action: 'cancel' },
-    contactSelected: { action: 'contactSelected' },
+    onCancel: { action: 'cancel' },
+    onNext: { action: 'next' },
   },
 };
-export const ContactPicker = ({ templateRole, contactSuggestions, searchContacts, cancel, contactSelected }) => html `<verdocs-contact-picker
-    .templateRole=${templateRole}
-    .contactSuggestions=${contactSuggestions}
-    @searchContacts=${searchContacts}
-    @cancel=${cancel}
-    @contactSelected=${contactSelected}
-  />`;
+export const ContactPicker = ({ templateRole, contactSuggestions, searchContacts, onCancel, onNext }) => html `<verdocs-contact-picker .templateRole=${templateRole} .contactSuggestions=${contactSuggestions} @searchContacts=${searchContacts} @cancel=${onCancel} @next=${onNext} />`;
 //# sourceMappingURL=verdocs-contact-picker.stories.js.map

package/dist/collection/components/elements/verdocs-contact-picker/verdocs-contact-picker.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-contact-picker.stories.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-contact-picker/verdocs-contact-picker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,SAAS,EAAE,wBAAwB;EACnC,IAAI,EAAE;IACJ,YAAY,EAAE;MACZ,WAAW,EAAE,sCAAsC;MACnD,IAAI,EAAE,aAAa;MACnB,SAAS,EAAE,EAAE;MACb,KAAK,EAAE,EAAE;MACT,KAAK,EAAE,EAAE;MACT,IAAI,EAAE,QAAQ;MACd,QAAQ,EAAE,CAAC;MACX,OAAO,EAAE,EAAE;KACZ;IACD,kBAAkB,EAAE;MAClB,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,cAAc,EAAC;MAC/D,EAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,uBAAuB,EAAE,MAAM,EAAE,iCAAiC,EAAC;MAC/F,EAAC,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,yBAAyB,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,iCAAiC,EAAC;MAC1H,EAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,cAAc,EAAC;KAC5C;GACF;EACD,QAAQ,EAAE;IACR,cAAc,EAAE,EAAC,MAAM,EAAE,gBAAgB,EAAC;IAC1C,MAAM,EAAE,EAAC,MAAM,EAAE,QAAQ,EAAC;IAC1B,eAAe,EAAE,EAAC,MAAM,EAAE,iBAAiB,EAAC;GAC7C;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAC,YAAY,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,EAAE,eAAe,EAAC,EAAE,EAAE,CAC3G,IAAI,CAAA;oBACc,YAAY;0BACN,kBAAkB;sBACtB,cAAc;cACtB,MAAM;uBACG,eAAe;KACjC,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n  title: 'Elements/Contact Picker',\n  component: 'verdocs-contact-picker',\n  args: {\n    templateRole: {\n      template_id: '65cbba07-d0ac-4b62-afe3-25d186238938',\n      name: 'Recipient 1',\n      full_name: '',\n      email: '',\n      phone: '',\n      type: 'signer',\n      sequence: 1,\n      message: '',\n    },\n    contactSuggestions: [\n      {name: 'Me', email: 'myuser@nomail.com', phone: '212-555-6664'},\n      {name: 'Will Power', email: 'will.power@nomail.com', avatar: 'https://i.pravatar.cc/48?img=59'},\n      {name: 'Paige Turner', email: 'paige.turner@nomail.com', phone: '212-555-6664', avatar: 'https://i.pravatar.cc/48?img=41'},\n      {name: 'Bill Board', phone: '212-555-6664'},\n    ],\n  },\n  argTypes: {\n    searchContacts: {action: 'searchContacts'},\n    cancel: {action: 'cancel'},\n    contactSelected: {action: 'contactSelected'},\n  },\n} as Meta;\n\nexport const ContactPicker = ({templateRole, contactSuggestions, searchContacts, cancel, contactSelected}) =>\n  html`<verdocs-contact-picker\n    .templateRole=${templateRole}\n    .contactSuggestions=${contactSuggestions}\n    @searchContacts=${searchContacts}\n    @cancel=${cancel}\n    @contactSelected=${contactSelected}\n  />`;\n"]}
+{"version":3,"file":"verdocs-contact-picker.stories.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-contact-picker/verdocs-contact-picker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,SAAS,EAAE,wBAAwB;EACnC,IAAI,EAAE;IACJ,YAAY,EAAE;MACZ,WAAW,EAAE,sCAAsC;MACnD,IAAI,EAAE,aAAa;MACnB,SAAS,EAAE,EAAE;MACb,KAAK,EAAE,EAAE;MACT,KAAK,EAAE,EAAE;MACT,IAAI,EAAE,QAAQ;MACd,QAAQ,EAAE,CAAC;MACX,OAAO,EAAE,EAAE;KACZ;IACD,kBAAkB,EAAE;MAClB,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,cAAc,EAAC;MAC/D,EAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,uBAAuB,EAAE,MAAM,EAAE,iCAAiC,EAAC;MAC/F,EAAC,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,yBAAyB,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,iCAAiC,EAAC;MAC1H,EAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,cAAc,EAAC;KAC5C;GACF;EACD,QAAQ,EAAE;IACR,cAAc,EAAE,EAAC,MAAM,EAAE,gBAAgB,EAAC;IAC1C,QAAQ,EAAE,EAAC,MAAM,EAAE,QAAQ,EAAC;IAC5B,MAAM,EAAE,EAAC,MAAM,EAAE,MAAM,EAAC;GACzB;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAC,YAAY,EAAE,kBAAkB,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,EAAC,EAAE,EAAE,CACpG,IAAI,CAAA,yCAAyC,YAAY,wBAAwB,kBAAkB,oBAAoB,cAAc,YAAY,QAAQ,UAAU,MAAM,KAAK,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n  title: 'Elements/Contact Picker',\n  component: 'verdocs-contact-picker',\n  args: {\n    templateRole: {\n      template_id: '65cbba07-d0ac-4b62-afe3-25d186238938',\n      name: 'Recipient 1',\n      full_name: '',\n      email: '',\n      phone: '',\n      type: 'signer',\n      sequence: 1,\n      message: '',\n    },\n    contactSuggestions: [\n      {name: 'Me', email: 'myuser@nomail.com', phone: '212-555-6664'},\n      {name: 'Will Power', email: 'will.power@nomail.com', avatar: 'https://i.pravatar.cc/48?img=59'},\n      {name: 'Paige Turner', email: 'paige.turner@nomail.com', phone: '212-555-6664', avatar: 'https://i.pravatar.cc/48?img=41'},\n      {name: 'Bill Board', phone: '212-555-6664'},\n    ],\n  },\n  argTypes: {\n    searchContacts: {action: 'searchContacts'},\n    onCancel: {action: 'cancel'},\n    onNext: {action: 'next'},\n  },\n} as Meta;\n\nexport const ContactPicker = ({templateRole, contactSuggestions, searchContacts, onCancel, onNext}) =>\n  html`<verdocs-contact-picker .templateRole=${templateRole} .contactSuggestions=${contactSuggestions} @searchContacts=${searchContacts} @cancel=${onCancel} @next=${onNext} />`;\n"]}