@verdocs/web-sdk 1.15.0 → 1.15.2

package/dist/collection/components/controls/verdocs-quick-filter/verdocs-quick-filter.stories.js

@@ -0,0 +1,16 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Controls/Quick Filter',
+  component: 'verdocs-quick-filter',
+  args: {
+    options: [
+      { label: 'All', value: 'all' },
+      { label: 'Completed', value: 'completed' },
+      { label: 'Inbox', value: 'inbox' },
+    ],
+    value: 'all',
+    label: 'Filter',
+    placeholder: 'Select...',
+  },
+};
+export const QuickFilter = ({ options, value, label, placeholder }) => html `<verdocs-quick-filter .options=${options} .value=${value} .label=${label} .placeholder=${placeholder} />`;

package/dist/collection/components/controls/verdocs-select-input/verdocs-select-input.css

@@ -6,10 +6,11 @@ verdocs-select-input {
 }
 verdocs-select-input .input-element {
   box-sizing: border-box;
-  border: 1px solid #707ae5;
+  background: #ffffff;
+  border: 1px solid #cccccc;
   border-radius: 4px;
   background: #ffffff;
-  color: #000;
+  color: #092c4c;
   width: 100%;
   font-size: 16px;
   height: 28px;
@@ -19,9 +20,6 @@ verdocs-select-input .input-element::placeholder {
   color: #aaaaaa;
   opacity: 1;
 }
-verdocs-select-input .input-element:focus {
-  border: 1px solid #7d88ff;
-}
 verdocs-select-input .input-label {
   display: block;
   color: #555570;

package/dist/collection/components/controls/verdocs-spinner/verdocs-spinner.css

@@ -0,0 +1,15 @@
+verdocs-spinner {
+  display: inline-block;
+  border-radius: 50%;
+  animation: spin 1s ease-in-out infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,71 @@
+import { h, Host } from '@stencil/core';
+const LIGHT_STYLE = { border: '3px solid rgba(255, 255, 255, 0.3)', borderTopColor: '#fff' };
+const DARK_STYLE = { border: '3px solid rgba(0, 0, 0, 0.3)', borderTopColor: '#333' };
+/**
+ * Display a small loading spinner.
+ */
+export class VerdocsQuickFilter {
+  constructor() {
+    this.size = 32;
+    this.mode = 'light';
+  }
+  render() {
+    return (h(Host, { style: {
+        width: `${this.size}px`,
+        height: `${this.size}px`,
+        flex: `0 0 ${this.size}px`,
+        ...(this.mode === 'light' ? LIGHT_STYLE : DARK_STYLE),
+      } }));
+  }
+  static get is() { return "verdocs-spinner"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-spinner.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-spinner.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "32"
+      },
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'light' | 'dark'",
+          "resolved": "\"dark\" | \"light\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "mode",
+        "reflect": false,
+        "defaultValue": "'light'"
+      }
+    };
+  }
+}

package/dist/collection/components/controls/verdocs-spinner/verdocs-spinner.stories.js

@@ -0,0 +1,10 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Controls/Spinner',
+  component: 'verdocs-spinner',
+  args: {
+    size: 32,
+    mode: 'light',
+  },
+};
+export const Spinner = ({ size, mode }) => html `<verdocs-spinner .size=${size} .mode=${mode} />`;

package/dist/collection/components/envelopes/verdocs-envelopes-list/verdocs-envelopes-list.css

@@ -10,36 +10,47 @@ verdocs-envelopes-list {
   font-family: "Inter", "Barlow", sans-serif;
 }
 verdocs-envelopes-list .header {
-  margin: 0;
   width: 100%;
   row-gap: 4px;
   display: flex;
   flex-wrap: wrap;
-  column-gap: 16px;
+  column-gap: 12px;
+  margin: 0 0 10px 0;
   align-items: center;
   flex-direction: row;
 }
+verdocs-envelopes-list .header .filter {
+  width: 150px;
+}
+verdocs-envelopes-list .header verdocs-text-input {
+  margin: 0;
+}
+verdocs-envelopes-list .header verdocs-text-input input {
+  height: 32px;
+}
 verdocs-envelopes-list .filter {
   align-items: center;
 }
 verdocs-envelopes-list .envelope {
   width: 100%;
   margin: 3px 0;
+  background: #ffffff;
 }
 verdocs-envelopes-list .envelope:hover {
   cursor: pointer;
-  background: #ffffff;
-  border: 1px solid #cccccc;
+  background: #f5f5fa;
 }
 verdocs-envelopes-list .envelope .inner {
-  gap: 20px;
+  gap: 14px;
   display: flex;
   padding: 8px 20px;
   border-radius: 6px;
   flex-direction: row;
   align-items: center;
-  background: #f9f9f9;
-  border: 1px solid #e3e3e3;
+}
+verdocs-envelopes-list .envelope .inner svg {
+  width: 24px;
+  height: 24px;
 }
 verdocs-envelopes-list .vert-spacer {
   height: 50px;
@@ -56,19 +67,33 @@ verdocs-envelopes-list .last-modified {
   align-items: center;
   white-space: nowrap;
 }
-verdocs-envelopes-list .last-modified svg {
-  width: 32px;
-  height: 32px;
-  margin-right: 8px;
-}
 verdocs-envelopes-list .envelope-name {
   flex: 1;
   display: flex;
   color: #000000;
   font-size: 18px;
+  overflow: hidden;
   line-height: 28px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 verdocs-envelopes-list .envelope-recipients {
-  font-weight: 700;
   color: #4b5563;
+  font-weight: 700;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+verdocs-envelopes-list .empty-text {
+  font-size: 20px;
+  text-align: center;
+  margin: 16px 0 0 0;
+  padding: 80px 80px;
+  border: 2px solid #ccc;
+}
+verdocs-envelopes-list .containing {
+  gap: 12px;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
 }