@verdocs/web-sdk 1.0.3 → 1.0.15

package/dist/collection/components/elements/org-popup/org-popup.css

@@ -1,8 +1,10 @@
-:host {
-  display: block;
+org-popup {
+  /* Fallback font for old browsers */
+  font-family: sans-serif;
+  font-family: var(--verdocs-font);
 }
 
-.container {
+org-popup .container {
   width: 242px;
   height: 64px;
   background-color: #33364b;
@@ -13,35 +15,35 @@
   justify-content: center;
 }
 
-.container:hover > .popup {
+org-popup .container:hover > .popup {
   display: flex;
   background: #ffffff;
   color: #33364b;
 }
 
-.icon {
+org-popup .icon {
   flex: 1;
   margin-left: 15px;
   margin-right: 0px;
 }
 
-.icon svg {
+org-popup .icon svg {
   width: 24px;
   margin-bottom: -5px;
 }
 
-.content {
+org-popup .content {
   color: #fff;
   flex: 4;
   font-family: sans-serif;
 }
 
-.popup {
+org-popup .popup {
   position: absolute;
   top: -1px;
   left: -4px;
   display: none;
-  border: 1px solid #1e2031;
+  border: 1px solid var(--verdocs-background-dark);
   border-radius: 10px;
   width: 326px;
   height: 220px;
@@ -52,7 +54,7 @@
   font-family: sans-serif;
 }
 
-.popup-header {
+org-popup .popup-header {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -63,7 +65,7 @@
   color: #4c56cb;
 }
 
-.popup-body {
+org-popup .popup-body {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -74,21 +76,19 @@
   text-transform: uppercase;
 }
 
-.popup-body span {
+org-popup .popup-body span {
   display: block;
   flex: 2 80px;
   margin-left: 7px;
 }
 
-.popup-body span:last-child {
+org-popup .popup-body span:last-child {
   margin-top: 5px;
 }
 
-.status {
+org-popup .status {
   width: 29px;
   height: 29px;
   background-color: #aeb4bf;
   border-radius: 50%;
-}
-
-
+}

package/dist/collection/components/elements/org-popup/org-popup.js

@@ -35,9 +35,8 @@ export class OrgPopup {
           h("span", null, (_f = this.organization) === null || _f === void 0 ? void 0 : _f.website)))));
   }
   static get is() { return "org-popup"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["org-popup.css"]
+    "$": ["org-popup.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["org-popup.css"]

package/dist/collection/components/elements/search-box/close.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0739 11.7565L19.7127 6.23228C20.0875 5.85692 20.0875 5.25309 19.7127 4.87773L19.0213 4.20046C18.6382 3.82511 18.0219 3.82511 17.6387 4.20046L12 9.72472L6.36127 4.20046C5.97814 3.82511 5.36179 3.82511 4.97866 4.20046L4.28735 4.87773C3.90422 5.25309 3.90422 5.85692 4.28735 6.23228L9.92608 11.7565L4.28735 17.2808C3.90422 17.6561 3.90422 18.26 4.28735 18.6353L4.97866 19.3126C5.36179 19.688 5.97814 19.688 6.36127 19.3126L12 13.7883L17.6387 19.3126C18.0219 19.688 18.6382 19.688 19.0213 19.3126L19.7127 18.6353C20.0958 18.26 20.0958 17.6561 19.7127 17.2808L14.0739 11.7565Z" fill="white"/>
+</svg>

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

@@ -1,3 +1,71 @@
-:host {
-  display: block;
+search-box {
+  /* Fallback font for old browsers */
+  font-family: sans-serif;
+  font-family: var(--verdocs-font);
 }
+search-box form {
+  display: flex;
+  flex-direction: row;
+  height: 45px;
+  box-sizing: border-box;
+  margin: 5px 0 0;
+  border-radius: 5px;
+  align-items: center;
+  background-color: #fff;
+  padding: 0 8px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--verdocs-container-border-color);
+}
+search-box form input {
+  box-sizing: border-box;
+  height: 43px;
+  width: 100%;
+  font-size: 18px;
+  border: none;
+}
+search-box form button.search {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-radius: 4px;
+  border: none;
+  width: 100px;
+  height: 28px;
+  font-weight: 700;
+  font-size: 10px;
+  letter-spacing: 1px;
+  background-color: #50be80;
+  text-transform: uppercase;
+  color: #fff;
+}
+search-box form .type {
+  background-color: #707ae5;
+  height: 30px;
+  display: inline-flex;
+  padding: 1px 0 2px 10px;
+  font-size: 13px;
+  line-height: 16px;
+  border-radius: 4px;
+  justify-content: center;
+  text-transform: uppercase;
+  align-items: center;
+  flex-direction: row;
+  color: #fff;
+  margin-right: 10px;
+}
+search-box form .type button {
+  border: none;
+  color: #fff;
+  margin: 5px 0 0 8px;
+  background: transparent;
+}
+search-box form svg {
+  width: 12px;
+  height: 12px;
+  margin-right: 6px;
+}
+search-box ::placeholder {
+  color: #aeb4bf;
+}

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

@@ -1,15 +1,81 @@
-import { Component, Host, h } from '@stencil/core';
+import { Component, Host, h, State, Event, Prop } from '@stencil/core';
+import SearchIcon from './search.svg';
+import CloseIcon from './close.svg';
 export class SearchBox {
+  constructor() {
+    this.type = 'all';
+  }
+  handleSubmit(e) {
+    e.preventDefault();
+    this.search.emit({ type: this.type, q: this.q });
+  }
+  handleChange(event) {
+    this.q = event.target.value;
+  }
   render() {
     return (h(Host, null,
-      h("slot", null)));
+      h("form", { onSubmit: e => this.handleSubmit(e) },
+        this.type !== undefined && this.type !== 'all' && (h("span", { class: "type" },
+          this.type,
+          "s ",
+          h("button", { class: "remove", innerHTML: CloseIcon }))),
+        h("input", { type: "text", placeholder: "search documents, templates, people...", value: this.q, onInput: e => this.handleChange(e) }),
+        h("button", { onClick: e => this.handleSubmit(e), class: "search" },
+          h("span", { innerHTML: SearchIcon }),
+          "Search"))));
   }
   static get is() { return "search-box"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["search-box.css"]
+    "$": ["search-box.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["search-box.css"]
   }; }
+  static get properties() { return {
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "TContentType",
+        "resolved": "\"all\" | \"document\" | \"organization\" | \"template\"",
+        "references": {
+          "TContentType": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "'all'"
+    }
+  }; }
+  static get states() { return {
+    "q": {}
+  }; }
+  static get events() { return [{
+      "method": "search",
+      "name": "search",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the query value has changed."
+      },
+      "complexType": {
+        "original": "ISearchEvent",
+        "resolved": "ISearchEvent",
+        "references": {
+          "ISearchEvent": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
 }

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

@@ -1,15 +1,13 @@
 import { html } from 'lit-html';
-import { action } from '@storybook/addon-actions';
 export default {
   title: 'Elements/Search/Search Box',
   component: 'search-box',
-  args: {},
-  argTypes: {},
-};
-const listener = {
-  handleEvent(e) {
-    action('selected', e);
+  args: {
+    type: 'all',
+  },
+  argTypes: {
+    search: { action: 'search' },
+    type: { type: 'string', control: 'radio', options: ['all', 'document', 'template', 'organization'] },
   },
-  capture: true,
 };
-export const Default = ({ options }) => html `<search-box .options=${options} @optionSelected=${listener} tall />`;
+export const Default = ({ type, search }) => html `<search-box .type=${type} @search=${search} />`;

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

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.4809 20.7176L17.9111 15.2536C19.0961 13.6368 19.727 11.6926 19.7128 9.70131C19.7201 7.53345 18.9846 5.42606 17.6244 3.71753C16.2642 2.009 14.3581 0.798456 12.2123 0.280282C10.0665 -0.237892 7.80552 -0.0336342 5.79227 0.86026C3.77902 1.75415 2.13038 3.28582 1.1111 5.20931C0.0918114 7.1328 -0.238985 9.33652 0.171813 11.4666C0.582612 13.5967 1.71117 15.5296 3.37628 16.9548C5.0414 18.3801 7.14646 19.2151 9.35344 19.3257C11.5604 19.4364 13.7413 18.8162 15.5458 17.5649L21.1372 23.05L21.1563 23.0663C21.4841 23.3487 21.9039 23.507 22.3401 23.5128C22.7823 23.5125 23.2063 23.3402 23.5191 23.0337V23.0337C23.6749 22.8812 23.7979 22.6995 23.8804 22.4993C23.963 22.2991 24.0036 22.0847 23.9997 21.8688C23.9959 21.6529 23.9477 21.44 23.858 21.2428C23.7683 21.0456 23.639 20.8682 23.4778 20.7212L23.4809 20.7176ZM14.5167 14.1975C13.4564 15.2349 12.0623 15.8797 10.5719 16.022C9.08145 16.1644 7.58681 15.7955 6.34249 14.9781C5.09816 14.1608 4.18109 12.9456 3.74751 11.5395C3.31393 10.1334 3.39064 8.6233 3.96455 7.26643C4.53846 5.90955 5.57409 4.7898 6.89507 4.09787C8.21606 3.40594 9.74071 3.18461 11.2093 3.4716C12.678 3.75858 13.9998 4.53612 14.9497 5.6718C15.8996 6.80748 16.4188 8.23105 16.4189 9.7001C16.4196 10.5357 16.2519 11.3632 15.9254 12.135C15.599 12.9069 15.1202 13.6078 14.5167 14.1975V14.1975Z" fill="white"/>
+</svg>

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

@@ -1,27 +1,26 @@
-:host {
-  display: block;
+search-quick-functions {
+  /* Fallback font for old browsers */
+  font-family: sans-serif;
+  font-family: var(--verdocs-font);
 }
-
-.container {
+search-quick-functions .container {
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   width: 240px;
-  background-color: #1e2031;
+  background-color: var(--verdocs-background-dark);
   text-transform: uppercase;
   padding: 10px 10px 20px 10px;
   font-family: sans-serif;
   color: #ffffff;
 }
-
-.title {
+search-quick-functions .title {
   font-size: 22px;
   font-weight: 700;
   line-height: 30px;
   margin: 1em 0 40px 0;
 }
-
-button {
+search-quick-functions button {
   width: 140px;
   height: 40px;
   border: none;
@@ -38,7 +37,6 @@ button {
   justify-content: space-evenly;
   background-color: #50be50;
 }
-
-button svg {
+search-quick-functions button svg {
   fill: #ffffff;
-}
+}

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

@@ -19,9 +19,8 @@ export class SearchQuickFunctions {
         h("button", { onClick: () => this.handleCreateDocument(), innerHTML: DocumentIcon }, "Document"))));
   }
   static get is() { return "search-quick-functions"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["search-quick-functions.css"]
+    "$": ["search-quick-functions.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["search-quick-functions.css"]

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

@@ -1,34 +1,32 @@
-:host {
-  display: block;
+search-recent {
+  /* Fallback font for old browsers */
+  font-family: sans-serif;
+  font-family: var(--verdocs-font);
 }
-
-.container {
+search-recent .container {
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   width: 240px;
-  background-color: #1e2031;
+  background-color: var(--verdocs-background-dark);
   text-transform: uppercase;
   padding: 10px 10px 20px 10px;
   font-family: sans-serif;
   color: #ffffff;
 }
-
-.title {
+search-recent .title {
   font-size: 22px;
   font-weight: 700;
   line-height: 30px;
 }
-
-.items {
+search-recent .items {
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   align-items: flex-start;
   margin-top: 20px;
 }
-
-.button {
+search-recent .button {
   background: transparent;
   border: none;
   height: 20px;
@@ -39,23 +37,19 @@
   display: flex;
   align-items: center;
 }
-
-.button:hover {
+search-recent .button:hover {
   cursor: pointer;
 }
-
-.button:not(:last-child) {
+search-recent .button:not(:last-child) {
   margin-bottom: 36px;
 }
-
-.button svg {
+search-recent .button svg {
   fill: #707ae5;
   width: 28px;
   height: 28px;
   margin-right: 26px;
 }
-
-.pill {
+search-recent .pill {
   font-size: 14px;
   display: inline-flex;
   padding: 3px 8px;
@@ -64,9 +58,8 @@
   background-color: #999999;
   color: #333;
 }
-
-.empty {
+search-recent .empty {
   text-transform: none;
   line-height: 22px;
   color: #ccc;
-}
+}

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

@@ -37,9 +37,8 @@ export class SearchRecent {
           this.recent.length < 1 && h("div", { class: "empty" }, "You do not have any recent searches.")))));
   }
   static get is() { return "search-recent"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["search-recent.css"]
+    "$": ["search-recent.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["search-recent.css"]

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

@@ -1,34 +1,32 @@
-:host {
-  display: block;
+search-saved {
+  /* Fallback font for old browsers */
+  font-family: sans-serif;
+  font-family: var(--verdocs-font);
 }
-
-.container {
+search-saved .container {
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   width: 240px;
-  background-color: #1e2031;
+  background-color: var(--verdocs-background-dark);
   text-transform: uppercase;
   padding: 10px 10px 20px 10px;
   font-family: sans-serif;
   color: #ffffff;
 }
-
-.title {
+search-saved .title {
   font-size: 22px;
   font-weight: 700;
   line-height: 30px;
 }
-
-.items {
+search-saved .items {
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   align-items: flex-start;
   margin-top: 20px;
 }
-
-.button {
+search-saved .button {
   background: transparent;
   border: none;
   height: 20px;
@@ -39,24 +37,20 @@
   display: flex;
   align-items: center;
 }
-
-.button:hover {
+search-saved .button:hover {
   cursor: pointer;
 }
-
-.button:not(:last-child) {
+search-saved .button:not(:last-child) {
   margin-bottom: 36px;
 }
-
-.button svg {
+search-saved .button svg {
   fill: #707ae5;
   width: 28px;
   height: 28px;
   margin-right: 26px;
 }
-
-.empty {
+search-saved .empty {
   text-transform: none;
   line-height: 22px;
   color: #ccc;
-}
+}

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

@@ -33,9 +33,8 @@ export class SearchSaved {
           this.saved.length < 1 && h("div", { class: "empty" }, "You do not have any saved searches.")))));
   }
   static get is() { return "search-saved"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["search-saved.css"]
+    "$": ["search-saved.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["search-saved.css"]

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

@@ -1,33 +1,28 @@
-:host {
-  display: block;
+search-starred {
+  /* Fallback font for old browsers */
+  font-family: sans-serif;
+  font-family: var(--verdocs-font);
 }
-
-.container {
+search-starred .container {
   display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
   width: 240px;
-  background-color: #1e2031;
+  color: #ffffff;
+  flex-direction: column;
   text-transform: uppercase;
   padding: 10px 10px 20px 10px;
-  font-family: sans-serif;
-  color: #ffffff;
+  background-color: var(--verdocs-background-dark);
 }
-
-.title {
+search-starred .title {
   font-size: 22px;
   font-weight: 700;
   line-height: 30px;
 }
-
-.items {
+search-starred .items {
   display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
   margin-top: 20px;
+  flex-direction: column;
 }
-
-.item {
+search-starred .item {
   border: none;
   display: flex;
   text-align: left;
@@ -35,52 +30,39 @@
   flex-direction: row;
   background: transparent;
 }
-
-.item:hover {
+search-starred .item:hover {
   cursor: pointer;
 }
-
-.icon {
-  flex: 0;
+search-starred .icon {
+  flex: 0 0 22px;
   margin-right: 14px;
 }
-
-.icon svg {
+search-starred .icon svg {
   fill: #707ae5;
   width: 22px;
   height: 22px;
 }
-
-.details {
+search-starred .details {
   display: flex;
+  overflow: hidden;
   flex-direction: column;
-  justify-content: flex-start;
 }
-
-.item-title {
+search-starred .item-title {
   font-size: 16px;
-  font-family: sans-serif;
   font-weight: 400;
-  /*line-height: 33px;*/
   color: #ffffff;
-  width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-
-.info {
+search-starred .info {
   font-size: 14px;
-  font-family: sans-serif;
   font-weight: 500;
   line-height: 23px;
   color: #aeb4bf;
-  grid-column: 2/10;
-  grid-row: 2;
 }
-
-.empty {
+search-starred .empty {
   text-transform: none;
   line-height: 22px;
   color: #ccc;
-}
+}