@verdocs/web-sdk 2.3.88 → 4.0.5

package/dist/collection/components/envelopes/verdocs-status-indicator/verdocs-status-indicator.js

@@ -1,6 +1,6 @@
-import { RecipientFlow } from './recipient-flow';
-import { createPopper } from '@popperjs/core';
-import { Host, h } from '@stencil/core';
+import { RecipientFlow } from "./recipient-flow";
+import { createPopper } from "@popperjs/core";
+import { Host, h } from "@stencil/core";
 const AcceptedDark = `<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12.5" cy="12.5" r="11.5" stroke="white" stroke-width="2"/><path d="M11.728 15.968C11.7067 15.9893 11.7013 16.0107 11.712 16.032C11.7227 16.0533 11.744 16.064 11.776 16.064H16.112C16.1653 16.064 16.208 16.0853 16.24 16.128C16.2827 16.16 16.304 16.2027 16.304 16.256V17.808C16.304 17.8613 16.2827 17.9093 16.24 17.952C16.208 17.984 16.1653 18 16.112 18H8.912C8.85867 18 8.81067 17.984 8.768 17.952C8.736 17.9093 8.72 17.8613 8.72 17.808V16.336C8.72 16.24 8.752 16.16 8.816 16.096C9.33867 15.584 9.872 15.0293 10.416 14.432C10.96 13.824 11.3013 13.4453 11.44 13.296C11.7387 12.944 12.0427 12.608 12.352 12.288C13.3227 11.2107 13.808 10.4107 13.808 9.888C13.808 9.51467 13.6747 9.21067 13.408 8.976C13.1413 8.73067 12.7947 8.608 12.368 8.608C11.9413 8.608 11.5947 8.73067 11.328 8.976C11.0613 9.21067 10.928 9.52533 10.928 9.92V10.32C10.928 10.3733 10.9067 10.4213 10.864 10.464C10.832 10.496 10.7893 10.512 10.736 10.512H8.848C8.79467 10.512 8.74667 10.496 8.704 10.464C8.672 10.4213 8.656 10.3733 8.656 10.32V9.568C8.688 8.992 8.86933 8.48533 9.2 8.048C9.53067 7.6 9.968 7.25867 10.512 7.024C11.0667 6.78933 11.6853 6.672 12.368 6.672C13.1253 6.672 13.7813 6.816 14.336 7.104C14.9013 7.38133 15.3333 7.76 15.632 8.24C15.9413 8.72 16.096 9.25333 16.096 9.84C16.096 10.288 15.984 10.7467 15.76 11.216C15.536 11.6853 15.2 12.192 14.752 12.736C14.4213 13.152 14.064 13.5627 13.68 13.968C13.296 14.3733 12.7253 14.96 11.968 15.728L11.728 15.968Z" fill="white"/></svg>`;
 const AcceptedLight = `<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12.5" cy="12.5" r="11.5" stroke="#654DCB" stroke-width="2"/><path d="M11.728 15.968C11.7067 15.9893 11.7013 16.0107 11.712 16.032C11.7227 16.0533 11.744 16.064 11.776 16.064H16.112C16.1653 16.064 16.208 16.0853 16.24 16.128C16.2827 16.16 16.304 16.2027 16.304 16.256V17.808C16.304 17.8613 16.2827 17.9093 16.24 17.952C16.208 17.984 16.1653 18 16.112 18H8.912C8.85867 18 8.81067 17.984 8.768 17.952C8.736 17.9093 8.72 17.8613 8.72 17.808V16.336C8.72 16.24 8.752 16.16 8.816 16.096C9.33867 15.584 9.872 15.0293 10.416 14.432C10.96 13.824 11.3013 13.4453 11.44 13.296C11.7387 12.944 12.0427 12.608 12.352 12.288C13.3227 11.2107 13.808 10.4107 13.808 9.888C13.808 9.51467 13.6747 9.21067 13.408 8.976C13.1413 8.73067 12.7947 8.608 12.368 8.608C11.9413 8.608 11.5947 8.73067 11.328 8.976C11.0613 9.21067 10.928 9.52533 10.928 9.92V10.32C10.928 10.3733 10.9067 10.4213 10.864 10.464C10.832 10.496 10.7893 10.512 10.736 10.512H8.848C8.79467 10.512 8.74667 10.496 8.704 10.464C8.672 10.4213 8.656 10.3733 8.656 10.32V9.568C8.688 8.992 8.86933 8.48533 9.2 8.048C9.53067 7.6 9.968 7.25867 10.512 7.024C11.0667 6.78933 11.6853 6.672 12.368 6.672C13.1253 6.672 13.7813 6.816 14.336 7.104C14.9013 7.38133 15.3333 7.76 15.632 8.24C15.9413 8.72 16.096 9.25333 16.096 9.84C16.096 10.288 15.984 10.7467 15.76 11.216C15.536 11.6853 15.2 12.192 14.752 12.736C14.4213 13.152 14.064 13.5627 13.68 13.968C13.296 14.3733 12.7253 14.96 11.968 15.728L11.728 15.968Z" fill="#654DCB"/></svg>`;
 const CanceledDark = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 24C15.1826 24 18.2348 22.7357 20.4853 20.4853C22.7357 18.2348 24 15.1826 24 12C24 8.8174 22.7357 5.76516 20.4853 3.51472C18.2348 1.26428 15.1826 0 12 0C8.8174 0 5.76516 1.26428 3.51472 3.51472C1.26428 5.76516 0 8.8174 0 12C0 15.1826 1.26428 18.2348 3.51472 20.4853C5.76516 22.7357 8.8174 24 12 24V24ZM9 7.5C8.60218 7.5 8.22064 7.65804 7.93934 7.93934C7.65804 8.22064 7.5 8.60218 7.5 9V15C7.5 15.3978 7.65804 15.7794 7.93934 16.0607C8.22064 16.342 8.60218 16.5 9 16.5H15C15.3978 16.5 15.7794 16.342 16.0607 16.0607C16.342 15.7794 16.5 15.3978 16.5 15V9C16.5 8.60218 16.342 8.22064 16.0607 7.93934C15.7794 7.65804 15.3978 7.5 15 7.5H9Z" fill="#9095B3"/></svg>`;
@@ -34,321 +34,325 @@ const ENTRY_PADDING = 40;
  * If the status is provided as a string it can be either a `TRecipientStatus` or `TDocumentStatus` value.
  */
 export class VerdocsStatusIndicator {
-  constructor() {
-    this.recipientStatusIcons = [];
-    this.size = 'normal';
-    this.theme = 'light';
-    this.status = undefined;
-    this.envelope = undefined;
-    this.isOpen = undefined;
-    this.containerId = `verdocs-status-indicator-${Math.random().toString(36).substring(2, 11)}`;
-  }
-  componentDidLoad() {
-    var _a;
-    this.popper = createPopper(this.summaryComponent, this.detailPanel, { placement: 'bottom-start', modifiers: [{ name: 'offset', options: { offset: [0, 10] } }] });
-    if ((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.recipients) {
-      const recipientsAtLevel = [];
-      this.envelope.recipients.forEach(recipient => {
-        const level = recipient.sequence - 1;
-        recipientsAtLevel[level] || (recipientsAtLevel[level] = []);
-        const id = `r-${level}-${recipientsAtLevel[level].length}`;
-        recipientsAtLevel[level].push({ ...recipient, id });
-      });
-      const levelCount = Object.keys(recipientsAtLevel).length;
-      const canvasHeight = levelCount * ENTRY_HEIGHT + (levelCount + 1) * ENTRY_PADDING;
-      let canvasWidth = 0;
-      Object.values(recipientsAtLevel).forEach(recipients => {
-        let minW = recipients.length * ENTRY_WIDTH + (recipients.length + 1) * ENTRY_PADDING;
-        if (minW > canvasWidth) {
-          canvasWidth = minW;
+    constructor() {
+        this.recipientStatusIcons = [];
+        this.size = 'normal';
+        this.theme = 'light';
+        this.status = undefined;
+        this.envelope = undefined;
+        this.isOpen = undefined;
+        this.containerId = `verdocs-status-indicator-${Math.random().toString(36).substring(2, 11)}`;
+    }
+    componentDidLoad() {
+        var _a;
+        this.popper = createPopper(this.summaryComponent, this.detailPanel, { placement: 'bottom-start', modifiers: [{ name: 'offset', options: { offset: [0, 10] } }] });
+        if ((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.recipients) {
+            const recipientsAtLevel = [];
+            this.envelope.recipients.forEach(recipient => {
+                const level = recipient.sequence - 1;
+                recipientsAtLevel[level] || (recipientsAtLevel[level] = []);
+                const id = `r-${level}-${recipientsAtLevel[level].length}`;
+                recipientsAtLevel[level].push({ ...recipient, id });
+            });
+            const levelCount = Object.keys(recipientsAtLevel).length;
+            const canvasHeight = levelCount * ENTRY_HEIGHT + (levelCount + 1) * ENTRY_PADDING;
+            let canvasWidth = 0;
+            Object.values(recipientsAtLevel).forEach(recipients => {
+                let minW = recipients.length * ENTRY_WIDTH + (recipients.length + 1) * ENTRY_PADDING;
+                if (minW > canvasWidth) {
+                    canvasWidth = minW;
+                }
+            });
+            const entities = [];
+            const lines = [];
+            const statusIcons = [];
+            let y = ENTRY_PADDING;
+            Object.entries(recipientsAtLevel).forEach(([level, recipients]) => {
+                // To center align here, we figure out how many items are per line and how much leftover space there would be if we just
+                // drew them left-to-right. We add half of that as a left offset.
+                const renderedItemsWidth = recipients.length * (ENTRY_WIDTH + ENTRY_PADDING);
+                const leftoverSpace = canvasWidth - renderedItemsWidth;
+                const leftOffset = ENTRY_PADDING / 2 + leftoverSpace / 2;
+                recipients.forEach((recipient, index) => {
+                    var _a;
+                    const [first, last] = (recipient.full_name || 'Unknown').toUpperCase().split(' ');
+                    const name = `${first} ${last === null || last === void 0 ? void 0 : last.substring(0, 1)}`;
+                    const entity = {
+                        id: recipient.id,
+                        text: name,
+                        icon: this.getStatusIcon(recipient.status),
+                        x: index * (ENTRY_WIDTH + ENTRY_PADDING) + leftOffset,
+                        y,
+                        width: ENTRY_WIDTH,
+                        height: ENTRY_HEIGHT,
+                        color: this.getStatusColor(recipient.status),
+                        radius: 8,
+                    };
+                    entities.push(entity);
+                    statusIcons.push({
+                        icon: this.getStatusIcon(recipient.status),
+                        x: index * (ENTRY_WIDTH + ENTRY_PADDING) + leftOffset + (ENTRY_WIDTH - 32),
+                        y: y + ENTRY_HEIGHT / 2 - 13,
+                    });
+                    (_a = recipientsAtLevel[+level - 1]) === null || _a === void 0 ? void 0 : _a.forEach(prevRecip => {
+                        const line = {
+                            id: `line-${prevRecip.id}-${entity.id}`,
+                            from: { element: prevRecip.id, point: 'bottom' },
+                            to: { element: entity.id, point: 'top' },
+                            color: this.getStatusColor(recipient.status),
+                        };
+                        lines.push(line);
+                    });
+                });
+                y += ENTRY_HEIGHT + ENTRY_PADDING;
+            });
+            this.recipientStatusIcons = statusIcons;
+            const diagram = RecipientFlow();
+            diagram.initalize(`#${this.containerId}`, canvasWidth, canvasHeight);
+            diagram.update({ entities, lines });
         }
-      });
-      const entities = [];
-      const lines = [];
-      const statusIcons = [];
-      let y = ENTRY_PADDING;
-      Object.entries(recipientsAtLevel).forEach(([level, recipients]) => {
-        // To center align here, we figure out how many items are per line and how much leftover space there would be if we just
-        // drew them left-to-right. We add half of that as a left offset.
-        const renderedItemsWidth = recipients.length * (ENTRY_WIDTH + ENTRY_PADDING);
-        const leftoverSpace = canvasWidth - renderedItemsWidth;
-        const leftOffset = ENTRY_PADDING / 2 + leftoverSpace / 2;
-        recipients.forEach((recipient, index) => {
-          var _a;
-          const [first, last] = (recipient.full_name || 'Unknown').toUpperCase().split(' ');
-          const name = `${first} ${last === null || last === void 0 ? void 0 : last.substring(0, 1)}`;
-          const entity = {
-            id: recipient.id,
-            text: name,
-            icon: this.getStatusIcon(recipient.status),
-            x: index * (ENTRY_WIDTH + ENTRY_PADDING) + leftOffset,
-            y,
-            width: ENTRY_WIDTH,
-            height: ENTRY_HEIGHT,
-            color: this.getStatusColor(recipient.status),
-            radius: 8,
-          };
-          entities.push(entity);
-          statusIcons.push({
-            icon: this.getStatusIcon(recipient.status),
-            x: index * (ENTRY_WIDTH + ENTRY_PADDING) + leftOffset + (ENTRY_WIDTH - 32),
-            y: y + ENTRY_HEIGHT / 2 - 13,
-          });
-          (_a = recipientsAtLevel[+level - 1]) === null || _a === void 0 ? void 0 : _a.forEach(prevRecip => {
-            const line = {
-              id: `line-${prevRecip.id}-${entity.id}`,
-              from: { element: prevRecip.id, point: 'bottom' },
-              to: { element: entity.id, point: 'top' },
-              color: this.getStatusColor(recipient.status),
-            };
-            lines.push(line);
-          });
-        });
-        y += ENTRY_HEIGHT + ENTRY_PADDING;
-      });
-      this.recipientStatusIcons = statusIcons;
-      const diagram = RecipientFlow();
-      diagram.initalize(`#${this.containerId}`, canvasWidth, canvasHeight);
-      diagram.update({ entities, lines });
     }
-  }
-  // 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.isOpen = true;
-    this.detailPanel.setAttribute('data-show', '');
-    this.detailPanel.removeAttribute('aria-hidden');
-    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions(options => ({
-      ...options,
-      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }],
-    }));
-    (_b = this.popper) === null || _b === void 0 ? void 0 : _b.update();
-  }
-  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;
+    // 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.isOpen = true;
+        this.detailPanel.setAttribute('data-show', '');
+        this.detailPanel.removeAttribute('aria-hidden');
+        (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions(options => ({
+            ...options,
+            modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }],
+        }));
+        (_b = this.popper) === null || _b === void 0 ? void 0 : _b.update();
     }
-    this.hide();
-  }
-  toggleDropdown() {
-    if (this.isOpen) {
-      this.hide();
+    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();
     }
-    else {
-      this.showDropdown();
+    toggleDropdown() {
+        if (this.isOpen) {
+            this.hide();
+        }
+        else {
+            this.showDropdown();
+        }
     }
-  }
-  hide() {
-    var _a;
-    this.isOpen = false;
-    this.detailPanel.removeAttribute('data-show');
-    this.detailPanel.setAttribute('aria-hidden', 'true');
-    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions(options => ({
-      ...options,
-      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }],
-    }));
-  }
-  getStatusColor(status) {
-    switch (status) {
-      case 'invited':
-      case 'opened':
-      case 'accepted':
-      case 'signed':
-        return '#654dcb';
-      case 'some-signed':
-      case 'submitted':
-      case 'complete':
-        return '#55bc81';
-      case 'declined':
-        return '#ff0000';
-      case 'canceled':
-      case 'in progress':
-      case 'pending':
-      default:
-        return '#999999';
+    hide() {
+        var _a;
+        this.isOpen = false;
+        this.detailPanel.removeAttribute('data-show');
+        this.detailPanel.setAttribute('aria-hidden', 'true');
+        (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions(options => ({
+            ...options,
+            modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }],
+        }));
     }
-  }
-  getStatusIcon(status) {
-    switch (status) {
-      case 'accepted':
-        return this.theme === 'light' ? AcceptedLight : AcceptedDark;
-      case 'complete':
-        return this.theme === 'light' ? CompletedLight : CompletedDark;
-      case 'in progress':
-        return this.theme === 'light' ? InProgressLight : InProgressDark;
-      case 'canceled':
-        return this.theme === 'light' ? CanceledLight : CanceledDark;
-      case 'declined':
-        return this.theme === 'light' ? DeclinedLight : DeclinedDark;
-      case 'invited':
-        return this.theme === 'light' ? InProgressLight : InProgressDark;
-      case 'opened':
-        return this.theme === 'light' ? OpenedLight : OpenedDark;
-      case 'signed':
-        return this.theme === 'light' ? SignedLight : SignedDark;
-      case 'submitted':
-        return this.theme === 'light' ? SubmittedLight : SubmittedDark;
-      case 'some-signed':
-        return this.theme === 'light' ? SomeSignedLight : SomeSignedDark;
-      default:
-      case 'pending':
-        return this.theme === 'light' ? PendingLight : PendingDark;
+    getStatusColor(status) {
+        switch (status) {
+            case 'invited':
+            case 'opened':
+            case 'accepted':
+            case 'signed':
+                return '#654dcb';
+            case 'some-signed':
+            case 'submitted':
+            case 'complete':
+                return '#55bc81';
+            case 'declined':
+                return '#ff0000';
+            case 'canceled':
+            case 'in progress':
+            case 'pending':
+            default:
+                return '#999999';
+        }
     }
-  }
-  getStatusMessage(status) {
-    switch (status) {
-      case 'accepted':
-        return 'Accepted';
-      case 'complete':
-        return 'Completed';
-      case 'in progress':
-        return 'In Progress';
-      case 'canceled':
-        return 'Cancelled';
-      case 'declined':
-        return 'Declined';
-      case 'invited':
-        return 'Invited';
-      case 'opened':
-        return 'Opened';
-      case 'signed':
-        return 'Signed';
-      case 'submitted':
-        return 'Submitted';
-      case 'some-signed':
-        return 'Partly Signed';
-      case 'pending':
-        return 'Pending';
-      default:
-        return status;
+    getStatusIcon(status) {
+        switch (status) {
+            case 'accepted':
+                return this.theme === 'light' ? AcceptedLight : AcceptedDark;
+            case 'complete':
+                return this.theme === 'light' ? CompletedLight : CompletedDark;
+            case 'in progress':
+                return this.theme === 'light' ? InProgressLight : InProgressDark;
+            case 'canceled':
+                return this.theme === 'light' ? CanceledLight : CanceledDark;
+            case 'declined':
+                return this.theme === 'light' ? DeclinedLight : DeclinedDark;
+            case 'invited':
+                return this.theme === 'light' ? InProgressLight : InProgressDark;
+            case 'opened':
+                return this.theme === 'light' ? OpenedLight : OpenedDark;
+            case 'signed':
+                return this.theme === 'light' ? SignedLight : SignedDark;
+            case 'submitted':
+                return this.theme === 'light' ? SubmittedLight : SubmittedDark;
+            case 'some-signed':
+                return this.theme === 'light' ? SomeSignedLight : SomeSignedDark;
+            default:
+            case 'pending':
+                return this.theme === 'light' ? PendingLight : PendingDark;
+        }
     }
-  }
-  render() {
-    var _a, _b;
-    // The extra fallback for accepted is to future proof for when we add that.
-    let status = this.status || ((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.status) || 'pending' || 'accepted';
-    if (!this.status && ((_b = this.envelope) === null || _b === void 0 ? void 0 : _b.recipients)) {
-      const submittedRecipients = this.envelope.recipients.filter(r => r.status === 'submitted');
-      if (submittedRecipients.length > 0 && submittedRecipients.length !== this.envelope.recipients.length) {
-        status = 'some-signed';
-      }
+    getStatusMessage(status) {
+        switch (status) {
+            case 'accepted':
+                return 'Accepted';
+            case 'complete':
+                return 'Completed';
+            case 'in progress':
+                return 'In Progress';
+            case 'canceled':
+                return 'Cancelled';
+            case 'declined':
+                return 'Declined';
+            case 'invited':
+                return 'Invited';
+            case 'opened':
+                return 'Opened';
+            case 'signed':
+                return 'Signed';
+            case 'submitted':
+                return 'Submitted';
+            case 'some-signed':
+                return 'Partly Signed';
+            case 'pending':
+                return 'Pending';
+            default:
+                return status;
+        }
     }
-    const icon = this.getStatusIcon(status);
-    const statusMessage = this.getStatusMessage(status);
-    return (h(Host, { ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.envelope ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: e => {
-        e.stopPropagation();
-        e.preventDefault();
-        this.envelope && this.toggleDropdown();
-      }, onBlur: e => this.envelope && this.handleHideDropdown(e) }, h("span", { class: "icon", innerHTML: icon }), h("span", { class: "content" }, statusMessage), h("div", { class: "detail-panel", ref: el => (this.detailPanel = el) }, h("div", { id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
-  }
-  static get is() { return "verdocs-status-indicator"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["verdocs-status-indicator.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["verdocs-status-indicator.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'small' | 'normal'",
-          "resolved": "\"normal\" | \"small\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The size (height) of the indicator. The small variant is suitable for use in densely populated components such as table rows."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'normal'"
-      },
-      "theme": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'dark' | 'light'",
-          "resolved": "\"dark\" | \"light\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The theme to use for diplay."
-        },
-        "attribute": "theme",
-        "reflect": false,
-        "defaultValue": "'light'"
-      },
-      "status": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "TEnvelopeStatus | TRecipientStatus | 'accepted'",
-          "resolved": "\"accepted\" | \"canceled\" | \"complete\" | \"declined\" | \"in progress\" | \"invited\" | \"opened\" | \"pending\" | \"signed\" | \"submitted\"",
-          "references": {
-            "TEnvelopeStatus": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Envelopes/Types"
-            },
-            "TRecipientStatus": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Envelopes/Types"
+    render() {
+        var _a, _b;
+        // The extra fallback for accepted is to future proof for when we add that.
+        let status = this.status || ((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.status) || 'pending' || 'accepted';
+        if (!this.status && ((_b = this.envelope) === null || _b === void 0 ? void 0 : _b.recipients)) {
+            const submittedRecipients = this.envelope.recipients.filter(r => r.status === 'submitted');
+            if (submittedRecipients.length > 0 && submittedRecipients.length !== this.envelope.recipients.length) {
+                status = 'some-signed';
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The status to display."
-        },
-        "attribute": "status",
-        "reflect": false
-      },
-      "envelope": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "IEnvelope | IEnvelopeSummary",
-          "resolved": "IEnvelope | IEnvelopeSummary",
-          "references": {
-            "IEnvelope": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Envelopes/Types"
+        }
+        const icon = this.getStatusIcon(status);
+        const statusMessage = this.getStatusMessage(status);
+        return (h(Host, { key: '4f448a7efa8648f23fa6fca7c1684998c54a2869', ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.envelope ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: e => {
+                e.stopPropagation();
+                e.preventDefault();
+                this.envelope && this.toggleDropdown();
+            }, onBlur: e => this.envelope && this.handleHideDropdown(e) }, h("span", { key: '8849c6dbf2be4339630768f064e76cb660919f15', class: "icon", innerHTML: icon }), h("span", { key: 'ae89d44c5b7bc18d1670957097c36ed044645a23', class: "content" }, statusMessage), h("div", { key: '65779af7d179cba0d6d685834f4da129472590c0', class: "detail-panel", ref: el => (this.detailPanel = el) }, h("div", { key: '9b564f492cdcaa5fdb4b622a0ea32be625f0cd57', id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
+    }
+    static get is() { return "verdocs-status-indicator"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["verdocs-status-indicator.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["verdocs-status-indicator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'normal'",
+                    "resolved": "\"normal\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size (height) of the indicator. The small variant is suitable for use in densely populated components such as table rows."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'normal'"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dark' | 'light'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The theme to use for diplay."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'light'"
             },
-            "IEnvelopeSummary": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Envelopes/Types"
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TEnvelopeStatus | TRecipientStatus | 'accepted'",
+                    "resolved": "\"accepted\" | \"canceled\" | \"complete\" | \"declined\" | \"in progress\" | \"invited\" | \"opened\" | \"pending\" | \"signed\" | \"submitted\"",
+                    "references": {
+                        "TEnvelopeStatus": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        },
+                        "TRecipientStatus": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The status to display."
+                },
+                "attribute": "status",
+                "reflect": false
+            },
+            "envelope": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IEnvelope | IEnvelopeSummary",
+                    "resolved": "IEnvelope | IEnvelopeSummary",
+                    "references": {
+                        "IEnvelope": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        },
+                        "IEnvelopeSummary": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The document to display status for. Ignored if `status` is set directly."
+                }
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The document to display status for. Ignored if `status` is set directly."
-        }
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isOpen": {},
-      "containerId": {}
-    };
-  }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "containerId": {}
+        };
+    }
 }