@verdocs/web-sdk 1.0.25 → 1.1.0

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

@@ -0,0 +1,99 @@
+verdocs-upload-dialog {
+  font-family: sans-serif;
+  font-family: var(--verdocs-font);
+  box-sizing: border-box;
+}
+verdocs-upload-dialog div {
+  box-sizing: border-box;
+}
+verdocs-upload-dialog .background-overlay {
+  position: absolute;
+  z-index: 10000;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #0000007f;
+}
+verdocs-upload-dialog .dialog {
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #fff;
+  padding: 16px;
+  box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);
+}
+verdocs-upload-dialog .heading {
+  display: flex;
+  flex-direction: row;
+  font-size: 20px;
+  font-weight: 500;
+}
+verdocs-upload-dialog .buttons {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+verdocs-upload-dialog .buttons verdocs-button {
+  margin-left: 16px;
+}
+verdocs-upload-dialog .drop-target {
+  padding: 30px 15px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #f5f5f5;
+  border: 2px dashed #979797;
+  min-height: 260px;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  color: rgba(0, 0, 0, 0.54);
+  opacity: 1;
+  margin: 20px 0;
+}
+verdocs-upload-dialog .drop-target p {
+  margin: 12px 0;
+}
+verdocs-upload-dialog .drop-target.dragging-over {
+  border: 5px solid blue;
+}
+verdocs-upload-dialog .drop-target > verdocs-button {
+  margin: 12px 0;
+  display: inline-block;
+}
+verdocs-upload-dialog .attachments {
+  height: 56px;
+  font-size: 0;
+  margin: 20px 0;
+  padding: 0 16px;
+  line-height: 56px;
+  white-space: normal;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14);
+}
+verdocs-upload-dialog .attachments .attachment {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+verdocs-upload-dialog .attachments .attachment .icon {
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+}
+verdocs-upload-dialog .attachments .attachment .icon.trash {
+  cursor: pointer;
+}
+verdocs-upload-dialog .attachments .attachment .name {
+  flex: 1;
+  display: flex;
+  padding: 0 8px;
+  font-size: 14px;
+  font-weight: 400;
+}

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

@@ -0,0 +1,163 @@
+import { Component, Prop, h, Event, Host, State } from '@stencil/core';
+import { fileToDataUrl } from '@verdocs/js-sdk/Utils/Files';
+import Paperclip from './paperclip.svg';
+import Trash from './trash.svg';
+/**
+ * Display a text input field. This adds a partially-transparent overlay and screen-centered dialog
+ * box with a message and optional header/title. An OK button is shown that will dismiss the message.
+ * It can also be dismissed by clicking the background overlay.
+ */
+export class VerdocsUploadDialog {
+  constructor() {
+    /**
+     * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.
+     */
+    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) {
+    if (e.target.className === 'background-overlay') {
+      e.preventDefault();
+      this.handleCancel();
+    }
+  }
+  handleDone() {
+    this.done.emit(this.decodedFiles);
+    this.open = false;
+  }
+  handleDragOver(e) {
+    e.preventDefault();
+    this.draggingOver = true;
+  }
+  handleDragLeave(e) {
+    e.preventDefault();
+    this.draggingOver = false;
+  }
+  async handleDrop(e) {
+    e.preventDefault();
+    this.draggingOver = false;
+    // Required for cross-browser support. Note that dataTransfer.items is of type DataTransferItemList and is not an array.
+    let droppedFiles = [];
+    if (e.dataTransfer.items) {
+      for (let i = 0; i < e.dataTransfer.items.length; i++) {
+        if (e.dataTransfer.items[i].kind === 'file') {
+          const file = e.dataTransfer.items[i].getAsFile();
+          droppedFiles.push(file);
+        }
+      }
+    }
+    else {
+      droppedFiles = e.dataTransfer.files;
+    }
+    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
+  }
+  handleRemoveAttachment(index) {
+    const newFiles = [...this.decodedFiles];
+    newFiles.splice(index, 1);
+    this.decodedFiles = newFiles;
+  }
+  handleSelectFile() {
+    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);
+    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]);
+    }
+    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 }))))));
+  }
+  static get is() { return "verdocs-upload-dialog"; }
+  static get originalStyleUrls() { return {
+    "$": ["verdocs-upload-dialog.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["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": {},
+    "decodedFiles": {}
+  }; }
+  static get events() { return [{
+      "method": "cancel",
+      "name": "cancel",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the dialog is closed. The event data will contain the closure reason."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "done",
+      "name": "done",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the dialog is closed. The event data will contain the closure reason."
+      },
+      "complexType": {
+        "original": "FileWithData[]",
+        "resolved": "FileWithData[]",
+        "references": {
+          "FileWithData": {
+            "location": "import",
+            "path": "@verdocs/js-sdk/Utils/Files"
+          }
+        }
+      }
+    }]; }
+}

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

@@ -0,0 +1,18 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Dialogs/Upload Dialog',
+  component: 'verdocs-upload-dialog',
+  args: {
+    open: true,
+    message: 'Login failed. Please check your username and password and try again.',
+  },
+  argTypes: {
+    closed: {
+      action: 'closed',
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+export const UploadDialog = ({ message, open, closed }) => html `<verdocs-upload-dialog .message=${message} .open=${open} @closed=${closed} />`;

package/dist/collection/components/elements/search-box/search-box.js

@@ -3,6 +3,9 @@ import SearchIcon from './search.svg';
 import CloseIcon from './close.svg';
 /**
  * Displays a customizable input box for search queries.
+ *
+ * Authentication is required to demonstrate this Element. You may do this in Storybook by using the Auth
+ * embed. This Element will reuse the same session produced by logging in via that Embed.
  */
 export class SearchBox {
   constructor() {

package/dist/collection/components/elements/search-box/search-box.stories.js

@@ -12,4 +12,4 @@ export default {
     type: { type: 'string', control: 'radio', options: ['all', 'document', 'template', 'organization'] },
   },
 };
-export const Default = ({ type, searchClicked, typeChanged, queryChanged }) => html `<search-box .type=${type} @searchClicked=${searchClicked} @typeChanged=${typeChanged} @queryChanged=${queryChanged} />`;
+export const SearchBox = ({ type, searchClicked, typeChanged, queryChanged }) => html `<search-box .type=${type} @searchClicked=${searchClicked} @typeChanged=${typeChanged} @queryChanged=${queryChanged} />`;

package/dist/collection/components/elements/search-quick-functions/search-quick-functions.js

@@ -3,6 +3,9 @@ import TemplateIcon from './template-icon.svg';
 import DocumentIcon from './document-icon.svg';
 /**
  * Display quick-function buttons for creating templates and documents.
+ *
+ * Authentication is required to demonstrate this Element. You may do this in Storybook by using the Auth
+ * embed. This Element will reuse the same session produced by logging in via that Embed.
  */
 export class SearchQuickFunctions {
   handleCreateTemplate() {

package/dist/collection/components/elements/search-quick-functions/search-quick-functions.stories.js

@@ -12,4 +12,4 @@ export default {
     createDocument: { action: 'createDocument' },
   },
 };
-export const Default = ({ options, createTemplate, createDocument }) => html `<search-quick-functions .options=${options} @createTemplate=${createTemplate} @createDocument=${createDocument} tall />`;
+export const QuickFunctions = ({ options, createTemplate, createDocument }) => html `<search-quick-functions .options=${options} @createTemplate=${createTemplate} @createDocument=${createDocument} tall />`;

package/dist/collection/components/elements/search-recent/search-recent.js

@@ -4,6 +4,9 @@ import SearchIcon from './search-icon.svg';
 /**
  * Display a list of recent searches. Note that only some types of searches are automatically saved in the
  * user's history (those that contain a unique `q` query string from the next-most-recent search.
+ *
+ * Authentication is required to demonstrate this Element. You may do this in Storybook by using the Auth
+ * embed. This Element will reuse the same session produced by logging in via that Embed.
  */
 export class SearchRecent {
   constructor() {
@@ -13,13 +16,21 @@ export class SearchRecent {
      */
     this.limit = 10;
     this.recent = [];
+    this.emptyMessage = 'You do not have any recent searches.';
   }
   componentDidLoad() {
     getSearchHistory()
       .then(r => {
       this.recent = r.recent;
+      this.emptyMessage = 'You do not have any recent searches.';
     })
-      .catch(e => console.warn('[Verdocs/search-recent] Error getting search history', e));
+      .catch(e => {
+      var _a;
+      console.warn('[Verdocs/search-recent] Error getting reent searches', e);
+      if (((_a = e === null || e === void 0 ? void 0 : e.response) === null || _a === void 0 ? void 0 : _a.status) === 401) {
+        this.emptyMessage = 'Authenticated required.';
+      }
+    });
   }
   handleSelectEntry(entry) {
     this.entrySelected.emit(entry);
@@ -30,7 +41,7 @@ export class SearchRecent {
         h("p", { class: "title" }, "Recent Searches"),
         h("div", { class: "items" },
           this.recent.slice(0, this.limit).map(entry => (h("button", { class: "button", innerHTML: SearchIcon, onClick: () => this.handleSelectEntry(entry) }, entry.params.q))),
-          this.recent.length < 1 && h("div", { class: "empty" }, "You do not have any recent searches.")))));
+          this.recent.length < 1 && h("div", { class: "empty" }, this.emptyMessage)))));
   }
   static get is() { return "search-recent"; }
   static get originalStyleUrls() { return {
@@ -60,7 +71,8 @@ export class SearchRecent {
     }
   }; }
   static get states() { return {
-    "recent": {}
+    "recent": {},
+    "emptyMessage": {}
   }; }
   static get events() { return [{
       "method": "entrySelected",

package/dist/collection/components/elements/search-recent/search-recent.stories.js

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Elements/Search/Recent',
+  title: 'Elements/Search/Recent Searches',
   component: 'search-recent',
   args: {
     limit: 10,
@@ -9,4 +9,4 @@ export default {
     entrySelected: { action: 'entrySelected' },
   },
 };
-export const Default = ({ limit, entrySelected }) => html `<search-recent .limit=${limit} @entrySelected=${entrySelected} />`;
+export const RecentSearches = ({ limit, entrySelected }) => html `<search-recent .limit=${limit} @entrySelected=${entrySelected} />`;

package/dist/collection/components/elements/search-saved/search-saved.js

@@ -4,6 +4,9 @@ import SearchIcon from './search-icon.svg';
 /**
  * Display a list of saved searches. Note that only some types of searches are automatically saved in the
  * user's history (those that contain a unique `q` query string from the next-most-recent search.
+ *
+ * Authentication is required to demonstrate this Element. You may do this in Storybook by using the Auth
+ * embed. This Element will reuse the same session produced by logging in via that Embed.
  */
 export class SearchSaved {
   constructor() {
@@ -13,13 +16,21 @@ export class SearchSaved {
      */
     this.limit = 10;
     this.saved = [];
+    this.emptyMessage = 'You do not have any saved searches.';
   }
   componentDidLoad() {
     getSearchHistory()
       .then(r => {
       this.saved = r.saved;
+      this.emptyMessage = 'You do not have any saved searches.';
     })
-      .catch(e => console.warn('[Verdocs/search-saved] Error getting search history', e));
+      .catch(e => {
+      var _a;
+      console.warn('[Verdocs/search-recent] Error getting saved searches', e);
+      if (((_a = e === null || e === void 0 ? void 0 : e.response) === null || _a === void 0 ? void 0 : _a.status) === 401) {
+        this.emptyMessage = 'Authenticated required.';
+      }
+    });
   }
   handleSelectEntry(entry) {
     this.entrySelected.emit(entry);
@@ -30,7 +41,7 @@ export class SearchSaved {
         h("p", { class: "title" }, "Saved Searches"),
         h("div", { class: "items" },
           this.saved.slice(0, this.limit).map(entry => (h("button", { class: "button", innerHTML: SearchIcon, onClick: () => this.handleSelectEntry(entry) }, entry.name))),
-          this.saved.length < 1 && h("div", { class: "empty" }, "You do not have any saved searches.")))));
+          this.saved.length < 1 && h("div", { class: "empty" }, this.emptyMessage)))));
   }
   static get is() { return "search-saved"; }
   static get originalStyleUrls() { return {
@@ -60,7 +71,8 @@ export class SearchSaved {
     }
   }; }
   static get states() { return {
-    "saved": {}
+    "saved": {},
+    "emptyMessage": {}
   }; }
   static get events() { return [{
       "method": "entrySelected",

package/dist/collection/components/elements/search-saved/search-saved.stories.js

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Elements/Search/Saved',
+  title: 'Elements/Search/Saved Searches',
   component: 'search-saved',
   args: {
     limit: 10,
@@ -9,4 +9,4 @@ export default {
     entrySelected: { action: 'entrySelected' },
   },
 };
-export const Default = ({ limit, entrySelected }) => html `<search-saved .limit=${limit} @entrySelected=${entrySelected} />`;
+export const SavedSearches = ({ limit, entrySelected }) => html `<search-saved .limit=${limit} @entrySelected=${entrySelected} />`;

package/dist/collection/components/elements/search-starred/search-starred.js

@@ -1,9 +1,29 @@
-import { Component, Host, h, Prop, Event } from '@stencil/core';
+import { Component, Host, h, Prop, Event, State } from '@stencil/core';
 import DocumentIcon from './document-icon.svg';
 /**
  * Display a list of starred items.
+ *
+ * Authentication is required to demonstrate this Element. You may do this in Storybook by using the Auth
+ * embed. This Element will reuse the same session produced by logging in via that Embed.
  */
 export class SearchStarred {
+  constructor() {
+    this.emptyMessage = 'You do not have any starred searches.';
+  }
+  componentDidLoad() {
+    // TODO
+    // getStarred()
+    //   .then(r => {
+    //     this.saved = r.saved;
+    //     this.emptyMessage = 'You do not have any saved searches.';
+    //   })
+    //   .catch(e => {
+    //     console.warn('[Verdocs/search-recent] Error getting saved searches', e);
+    //     if (e?.response?.status === 401) {
+    //       this.emptyMessage = 'Authenticated required.';
+    //     }
+    //   });
+  }
   handleSelectEntry(entry) {
     this.entrySelected.emit(entry);
   }
@@ -39,7 +59,7 @@ export class SearchStarred {
               h("div", { class: "info" },
                 option.pages ? `${this.computePagesText(option.pages)} ` : '',
                 option.recipients ? this.computeRecipientsText(option.recipients) : ''))))),
-          (((_b = this.options) === null || _b === void 0 ? void 0 : _b.length) || []) < 1 && h("div", { class: "empty" }, "You do not have any starred items.")))));
+          (((_b = this.options) === null || _b === void 0 ? void 0 : _b.length) || []) < 1 && h("div", { class: "empty" }, this.emptyMessage)))));
   }
   static get is() { return "search-starred"; }
   static get originalStyleUrls() { return {
@@ -67,6 +87,9 @@ export class SearchStarred {
       "reflect": false
     }
   }; }
+  static get states() { return {
+    "emptyMessage": {}
+  }; }
   static get events() { return [{
       "method": "entrySelected",
       "name": "entrySelected",

package/dist/collection/components/elements/search-starred/search-starred.stories.js

@@ -23,7 +23,7 @@ const dummyData = [
  * Display a list of starred items (favorite templates).
  */
 export default {
-  title: 'Elements/Search/Starred',
+  title: 'Elements/Search/Starred Items',
   component: 'search-starred',
   args: {
     options: dummyData,
@@ -32,4 +32,4 @@ export default {
     entrySelected: { action: 'entrySelected' },
   },
 };
-export const Default = ({ options, entrySelected }) => html `<search-starred .options=${options} @entrySelected=${entrySelected} tall />`;
+export const StarredItems = ({ options, entrySelected }) => html `<search-starred .options=${options} @entrySelected=${entrySelected} tall />`;

package/dist/collection/components/elements/search-tabs/search-tabs.stories.js

@@ -15,4 +15,4 @@ const listener = {
   },
   capture: true,
 };
-export const Default = ({ options }) => html `<search-tabs .options=${options} @optionSelected=${listener} tall />`;
+export const Tabs = ({ options }) => html `<search-tabs .options=${options} @optionSelected=${listener} tall />`;

package/dist/collection/components/elements/verdocs-field-attachment/paperclip.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" 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>

package/dist/collection/components/elements/verdocs-field-attachment/verdocs-field-attachment.css

@@ -0,0 +1,21 @@
+verdocs-field-attachment {
+  /* Fallback font for old browsers */
+  font-family: sans-serif;
+  font-family: var(--verdocs-font);
+  width: 24px;
+  height: 24px;
+  display: block;
+  font-size: 11px;
+  background-color: transparent;
+  transform-origin: bottom left;
+}
+verdocs-field-attachment span {
+  width: 20px;
+  cursor: pointer;
+}
+verdocs-field-attachment.required span {
+  border: 1px solid var(--verdocs-required-color);
+}
+verdocs-field-attachment.focused {
+  animation: verdocs-field-pulse 0.75s 2;
+}