@verdocs/web-sdk 1.15.0 → 1.15.1

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

@@ -0,0 +1,36 @@
+verdocs-pagination {
+  gap: 8px;
+  display: flex;
+  flex-direction: row;
+  font-family: "Inter", "Barlow", sans-serif;
+}
+verdocs-pagination .page-button {
+  height: 38px;
+  display: flex;
+  flex: 0 0 38px;
+  cursor: pointer;
+  font-weight: 600;
+  border-radius: 4px;
+  align-items: center;
+  justify-content: center;
+  color: #33364b;
+  border: 1px solid #654dcb;
+}
+verdocs-pagination .page-button svg {
+  width: 18px;
+  height: 18px;
+}
+verdocs-pagination .page-button.selected {
+  cursor: default;
+  color: #ffffff;
+  background: #654dcb;
+}
+verdocs-pagination .ellipsis {
+  width: 38px;
+  height: 38px;
+  display: flex;
+  flex: 0 0 38px;
+  line-height: 32px;
+  justify-content: center;
+  color: #33364b;
+}

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

@@ -0,0 +1,129 @@
+import { Host } from '@stencil/core';
+import { integerSequence } from '@verdocs/js-sdk/Utils/Primitives';
+import { h } from '@stencil/core';
+const ChevronDoubleLeft = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" /></svg>`;
+const ChevronDoubleRight = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" /></svg>`;
+const PageButton = ({ page, selected, onClick }) => {
+  let label;
+  if (page === 'first') {
+    label = ChevronDoubleLeft;
+  }
+  else if (page === 'last') {
+    label = ChevronDoubleRight;
+  }
+  else {
+    label = String(page + 1);
+  }
+  return h("div", { class: `page-button ${page === selected ? 'selected' : ''}`, onClick: () => onClick(page), innerHTML: label });
+};
+/**
+ * Display a drop-down menu of quick filter options.
+ */
+export class VerdocsQuickFilter {
+  constructor() {
+    this.selectedPage = 0;
+    this.itemCount = 1;
+    this.perPage = 10;
+  }
+  handleSelectPage(page) {
+    var _a;
+    this.selectedPage = page;
+    (_a = this.selectPage) === null || _a === void 0 ? void 0 : _a.emit({ selectedPage: page });
+  }
+  render() {
+    const numPages = this.itemCount > 0 ? Math.ceil(this.itemCount / this.perPage) : 0;
+    // If there are 10 pages:
+    //   If page == 0 => firstPage: 0, numPagesToDisplay:
+    const firstPage = Math.max(0, this.selectedPage - 2);
+    const numPagesToDisplay = Math.min(numPages, 5);
+    return (h(Host, null, this.selectedPage > 0 && h(PageButton, { page: 'first', selected: this.selectedPage, onClick: () => this.handleSelectPage(0) }), firstPage > 0 && h("div", { class: "ellipsis" }, "..."), integerSequence(firstPage, numPagesToDisplay - firstPage).map(pageNumber => (h(PageButton, { page: pageNumber, selected: this.selectedPage, onClick: page => this.handleSelectPage(+page) }))), numPagesToDisplay < numPages && h("div", { class: "ellipsis" }, "..."), this.selectedPage < numPages - 1 && h(PageButton, { page: 'last', selected: this.selectedPage, onClick: () => this.handleSelectPage(numPages - 1) })));
+  }
+  static get is() { return "verdocs-pagination"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-pagination.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-pagination.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "selectedPage": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The currently selected page."
+        },
+        "attribute": "selected-page",
+        "reflect": true,
+        "defaultValue": "0"
+      },
+      "itemCount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The total number of items."
+        },
+        "attribute": "item-count",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "perPage": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The number of displayed per page."
+        },
+        "attribute": "per-page",
+        "reflect": false,
+        "defaultValue": "10"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "selectPage",
+        "name": "selectPage",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the selected page changes. The new page number is included in the event."
+        },
+        "complexType": {
+          "original": "{selectedPage: number}",
+          "resolved": "{ selectedPage: number; }",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,19 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Controls/Pagination',
+  component: 'verdocs-pagination',
+  args: {
+    selectedPage: 0,
+    itemCount: 37,
+    perPage: 10,
+    argTypes: {
+      onSelectPage: { action: 'selectPage' },
+    },
+  },
+};
+export const Pagination = ({ selectedPage, itemCount, perPage, onSelectPage }) => html `<verdocs-pagination
+  .selectedPage=${selectedPage}
+  .itemCount=${itemCount}
+  .perPage=${perPage}
+  @selectPage=${onSelectPage}
+/>`;

package/dist/collection/components/controls/verdocs-quick-filter/verdocs-quick-filter.css

@@ -0,0 +1,97 @@
+verdocs-quick-filter {
+  position: relative;
+  font-family: "Inter", "Barlow", sans-serif;
+}
+verdocs-quick-filter .control {
+  outline: 0;
+  height: 34px;
+  display: flex;
+  cursor: pointer;
+  border-radius: 4px;
+  align-items: center;
+  flex-direction: row;
+  box-sizing: border-box;
+  background: #ffffff;
+  transition: all 100ms ease 0s;
+  border: 1px solid #cccccc;
+}
+verdocs-quick-filter .title {
+  padding: 0 8px;
+  font-size: 14px;
+  max-width: 100%;
+  overflow: hidden;
+  color: #33364b;
+  white-space: nowrap;
+  box-sizing: border-box;
+  text-overflow: ellipsis;
+}
+verdocs-quick-filter .title .prefix {
+  display: inline;
+  font-weight: 700;
+  margin: 0 7px 0 0;
+  color: #4c56cb;
+}
+verdocs-quick-filter .arrow {
+  width: 32px;
+  height: 32px;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  background: #ffffff;
+  transition: color 150ms ease 0s;
+}
+verdocs-quick-filter .arrow svg {
+  transition: 0.3s;
+  fill: #cccccc;
+}
+verdocs-quick-filter .separator {
+  width: 1px;
+  display: block;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  align-self: stretch;
+  box-sizing: border-box;
+  background-color: #cccccc;
+}
+verdocs-quick-filter .items {
+  display: none;
+  z-index: 10000;
+  position: absolute;
+  border-radius: 4px;
+  background: #ffffff;
+  box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 4px 11px;
+}
+verdocs-quick-filter .items[data-show] {
+  display: block;
+}
+verdocs-quick-filter .option {
+  width: 100%;
+  border: none;
+  display: block;
+  font-size: 14px;
+  text-align: left;
+  background: none;
+  padding: 10px 20px;
+  color: #1e2031;
+}
+verdocs-quick-filter .option:hover {
+  cursor: pointer;
+  background: #4c56cb3f;
+}
+verdocs-quick-filter .option[disabled] {
+  color: #aaaaaa;
+}
+verdocs-quick-filter .option[disabled]:hover {
+  cursor: inherit;
+  background: transparent;
+  color: #aaaaaa;
+}
+verdocs-quick-filter.open .items {
+  display: block;
+}
+verdocs-quick-filter.open .arrow svg {
+  transform: scaleY(-1);
+}

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

@@ -0,0 +1,204 @@
+import { Host } from '@stencil/core';
+import { createPopper } from '@popperjs/core';
+import { h } from '@stencil/core';
+import { renderedTextWidth } from '../../../utils/utils';
+const DropdownArrow = `<svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="css-8mmkcg"><path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path></svg>`;
+/**
+ * Display a drop-down menu of quick filter options.
+ */
+export class VerdocsQuickFilter {
+  constructor() {
+    // We need to do this to reliably disconnect the click-away listener
+    this.clickListenerSymbol = new AbortController();
+    this.options = [];
+    this.label = 'Filter';
+    this.value = '';
+    this.placeholder = 'Select...';
+    this.open = undefined;
+  }
+  componentDidLoad() {
+    this.popper = createPopper(this.dropdownButton, this.dropdownMenu, { placement: 'bottom-start', modifiers: [{ name: 'offset', options: { offset: [-1, 14] } }] });
+    window.addEventListener('click', this.clickListener.bind(this), { signal: this.clickListenerSymbol.signal });
+  }
+  disconnectedCallback() {
+    this.clickListenerSymbol.abort();
+  }
+  clickListener(e) {
+    const outside = !(e.target == this.el || this.el.contains(e.target));
+    if (outside) {
+      this.hide();
+    }
+  }
+  handleSelectOption(e, option) {
+    e.stopPropagation();
+    this.optionSelected.emit(option);
+    this.value = option.value;
+    this.hide();
+  }
+  // See https://popper.js.org/docs/v2/tutorial/
+  // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists
+  showDropdown() {
+    var _a, _b;
+    this.open = true;
+    this.dropdownMenu.setAttribute('data-show', '');
+    this.dropdownMenu.removeAttribute('aria-hidden');
+    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions(options => ({
+      ...options,
+      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }],
+    })).catch(() => { });
+    (_b = this.popper) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
+  }
+  handleHideDropdown(e) {
+    var _a, _b;
+    if (((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.localName) === 'button' && ((_b = e === null || e === void 0 ? void 0 : e.target) === null || _b === void 0 ? void 0 : _b.className) === 'arrow') {
+      // This event is fired when a menu element is clicked because the button "loses focus" then too
+      return;
+    }
+    this.hide();
+  }
+  toggleDropdown(e) {
+    e.stopPropagation();
+    if (this.open) {
+      this.hide();
+    }
+    else {
+      this.showDropdown();
+    }
+  }
+  hide() {
+    var _a;
+    this.open = false;
+    this.dropdownMenu.removeAttribute('data-show');
+    this.dropdownMenu.setAttribute('aria-hidden', 'true');
+    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions(options => ({
+      ...options,
+      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }],
+    })).catch(() => { });
+  }
+  render() {
+    var _a, _b, _c;
+    const selectedOption = (_a = this.options) === null || _a === void 0 ? void 0 : _a.find(option => option.value === this.value);
+    const longestOption = (_b = this.options) === null || _b === void 0 ? void 0 : _b.reduce((prev, curr) => (prev.label.length > curr.label.length ? prev : curr));
+    const longestLabelWidth = renderedTextWidth((longestOption === null || longestOption === void 0 ? void 0 : longestOption.label) || 'FILLER', '14px Inter, Barlow, sans-serif');
+    const prefixWidth = renderedTextWidth(this.label, '14px Inter, Barlow, sans-serif');
+    const minWidth = `${longestLabelWidth + prefixWidth + 40}px`;
+    return (h(Host, { class: { open: !!this.open }, style: { minWidth, display: 'inline-block' } }, h("div", { class: "control", onClick: e => this.toggleDropdown(e), onBlur: e => this.handleHideDropdown(e) }, h("div", { class: "title", ref: el => (this.dropdownButton = el) }, h("span", { class: "prefix" }, this.label, ":"), selectedOption ? selectedOption.label : this.placeholder), h("div", { style: { flex: '1' } }), h("div", { class: "separator" }), h("div", { class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu" })), h("div", { class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el), style: { minWidth } }, (_c = this.options) === null || _c === void 0 ? void 0 : _c.map(option => option.label ? (h("button", { onClick: e => this.handleSelectOption(e, option), class: `option ${option.value === this.value ? 'selected' : ''}`, disabled: option.disabled }, option.label)) : (h("div", { class: "separator" }))))));
+  }
+  static get is() { return "verdocs-quick-filter"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-quick-filter.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-quick-filter.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "options": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IFilterOption[]",
+          "resolved": "IFilterOption[]",
+          "references": {
+            "IFilterOption": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The menu options to display."
+        },
+        "defaultValue": "[]"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "'Filter'"
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false,
+        "defaultValue": "'Select...'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "open": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "optionSelected",
+        "name": "optionSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when a menu option is clicked.\nWeb Component events need to be \"composed\" to cross the Shadow DOM and be received by parent frameworks."
+        },
+        "complexType": {
+          "original": "IFilterOption",
+          "resolved": "IFilterOption",
+          "references": {
+            "IFilterOption": {
+              "location": "local"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}

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} />`;