@verdocs/web-sdk 1.0.25 → 1.4.0

package/dist/collection/components/controls/verdocs-status-indicator/recipient-flow.js

@@ -0,0 +1,218 @@
+import { SVG } from '@svgdotjs/svg.js';
+// Source: workflow-svg.js project. Adapted to not be an external requirement to make it easier for the builder to work.
+export function RecipientFlow() {
+  let _json = { entities: [] };
+  let _draw;
+  let _lines = [];
+  function initalize(id, width, height) {
+    _draw = SVG().addTo(id).size(width, height);
+    _draw.entities = [];
+    _draw.lines = _draw.group();
+    _draw.labels = _draw.group();
+  }
+  function _renderEntities(_draw, entity) {
+    const group = _draw.group().attr({ id: entity.id });
+    _draw.entities.push(group);
+    //assginment and default values for entities
+    entity.background_color = entity.background_color ? entity.background_color : '#f06';
+    entity.color = entity.color ? entity.color : '#ffffff';
+    entity.radius = entity.radius ? entity.radius : 0;
+    //the real entity
+    group.entity = group
+      .rect(entity.width, entity.height)
+      .cx(entity.width / 2)
+      .cy(entity.height / 2)
+      .attr({ fill: '#ffffff', stroke: entity.color, ['stroke-width']: 2 })
+      .radius(entity.radius);
+    if (entity.class) {
+      group.entity.attr('class', entity.class);
+    }
+    group
+      .plain(entity.text)
+      .cx(14)
+      .cy(entity.height / 2 + 6)
+      .attr({ fill: entity.color });
+    group.move(entity.x, entity.y);
+  }
+  function _renderLabels() {
+    if (_json.labels && _json.labels.length > 0) {
+      _json.labels.forEach(l => {
+        _draw.labels.text(l.value).x(l.x).y(l.y);
+      });
+    }
+  }
+  function _renderPolylines(_draw, _lines) {
+    _lines.forEach(line => _renderOnePolyline(_draw, line));
+  }
+  function _renderOnePolyline(_draw, line) {
+    let polyline = '';
+    const line_color = line.color || '#4c56cb';
+    const from = _draw.findOne('#' + line.from.element);
+    const to = _draw.findOne('#' + line.to.element);
+    const pointsInBetween = _calculatePointsInBetween(line, from, to);
+    //start point
+    polyline += _calculateX(from, line.from.point) + ',' + _calculateY(from, line.from.point) + ' ';
+    // points between them
+    pointsInBetween.forEach(p => (polyline += p.x + ',' + p.y + ' '));
+    if (line.to.point === 'top') {
+      polyline += _calculateX(to, line.to.point) + ',' + _calculateY(to, line.to.point) + ' ';
+    }
+    else if (line.to.point === 'bottom') {
+      polyline += _calculateX(to, line.to.point) + ',' + _calculateY(to, line.to.point) + ' ';
+    }
+    else {
+      polyline += _calculateX(to, line.to.point) + ',' + _calculateY(to, line.to.point) + ' ';
+    }
+    if (!line.polyline) {
+      line.polyline = _draw.lines.polyline(polyline).fill('none').stroke({ color: line_color, width: 2, linecap: 'round', linejoin: 'round' }).attr('id', line.id);
+    }
+    else {
+      line.polyline.plot(polyline);
+    }
+  }
+  function _calculatePointsInBetween(line, from, to) {
+    const pointsInBetween = [];
+    const y1 = _calculateY(from, line.from.point);
+    const y2 = _calculateY(to, line.to.point);
+    const x1 = _calculateX(from, line.from.point);
+    const x2 = _calculateX(to, line.to.point);
+    const p1 = _translatePositionToNumber(line.from.point);
+    const p2 = _translatePositionToNumber(line.to.point);
+    const code = p1 - p2;
+    // same position
+    if (code === 0) {
+      if (line.from.point === 'top') {
+        if (y1 <= y2) {
+          pointsInBetween.push({ x: x1, y: y1 - 20 });
+          pointsInBetween.push({ x: x2, y: y1 - 20 });
+        }
+        else {
+          pointsInBetween.push({ x: x1, y: y2 - 20 });
+          pointsInBetween.push({ x: x2, y: y2 - 20 });
+        }
+      }
+      else if (line.from.point === 'bottom') {
+        if (y1 <= y2) {
+          pointsInBetween.push({ x: x1, y: y2 + 20 });
+          pointsInBetween.push({ x: x2, y: y2 + 20 });
+        }
+        else {
+          pointsInBetween.push({ x: x1, y: y1 + 20 });
+          pointsInBetween.push({ x: x2, y: y1 + 20 });
+        }
+      }
+      else {
+        if (x1 <= x2) {
+          pointsInBetween.push({ x: x2 + 20, y: y1 });
+          pointsInBetween.push({ x: x2 + 20, y: y2 });
+        }
+        else {
+          pointsInBetween.push({ x: x1 + 20, y: y1 });
+          pointsInBetween.push({ x: x1 + 20, y: y2 });
+        }
+      }
+    }
+    // on the opposite site
+    if (code === 2 || code === -2) {
+      // top or bottom
+      if (x1 !== x2) {
+        pointsInBetween.push({ x: x1, y: y2 + (y1 - y2) / 2 });
+        pointsInBetween.push({ x: x2, y: y2 + (y1 - y2) / 2 });
+      }
+    }
+    // corner cases
+    if (code === 1 || code === -1 || code === 3 || code === -3) {
+      if (line.from.point === 'top') {
+        if (y1 < y2 + 20) {
+          pointsInBetween.push({ x: x1, y: y1 - 20 });
+          pointsInBetween.push({ x: x2 + 20, y: y1 - 20 });
+          pointsInBetween.push({ x: x2 + 20, y: y2 });
+        }
+        else {
+          pointsInBetween.push({ x: x1, y: y2 });
+        }
+      }
+      if (line.from.point === 'bottom') {
+        if (y1 > y2 - 20) {
+          pointsInBetween.push({ x: x1, y: y1 + 20 });
+          pointsInBetween.push({ x: x2 + 20, y: y1 + 20 });
+          pointsInBetween.push({ x: x2 + 20, y: y2 });
+        }
+        else {
+          pointsInBetween.push({ x: x1, y: y2 });
+        }
+      }
+    }
+    return pointsInBetween;
+  }
+  function _translatePositionToNumber(position) {
+    switch (position) {
+      case 'top':
+        return 0;
+      case 'bottom':
+        return 2;
+      default:
+        return 3;
+    }
+  }
+  function _calculateX(group, position) {
+    const width = group.entity.attr('width');
+    const x = group.entity.attr('x');
+    switch (position) {
+      case 'top':
+      case 'bottom':
+        return x + width / 2;
+      default:
+        return x - width / 2;
+    }
+  }
+  function _calculateY(group, position) {
+    const height = group.entity.attr('height');
+    const y = group.entity.attr('y');
+    switch (position) {
+      case 'top':
+        return y;
+      case 'bottom':
+        return y + height;
+      default:
+        return y;
+    }
+  }
+  function _update() {
+    //clean up
+    _draw.entities.forEach(entity => entity.remove());
+    _draw.entities = [];
+    _lines = [];
+    // default values
+    if (!_json.labels) {
+      _json.labels = [];
+    }
+    _json.labels = _json.labels.map(l => {
+      return {
+        id: l.id,
+        value: l.value ? l.value : '',
+        x: l.x ? l.x : 0,
+        y: l.y ? l.y : 0,
+        color: l.color ? l.color : 'black',
+      };
+    });
+    _json.entities.map(entity => {
+      entity.type = entity.type ? entity.type : 'entity';
+      if (entity.type === 'operation') {
+        entity.height = entity.width;
+      }
+    });
+    _renderLabels();
+    _json.entities.forEach(entity => _renderEntities(_draw, entity));
+    _lines = _json.lines; // needed to have no circular dependencies
+    _renderPolylines(_draw, _lines);
+  }
+  function update(json) {
+    _json = json;
+    _update();
+  }
+  return {
+    initalize,
+    update,
+  };
+}

package/dist/collection/components/controls/verdocs-status-indicator/signed-dark.svg

@@ -0,0 +1,4 @@
+<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="M15.632 12.656C15.8453 13.1467 15.952 13.712 15.952 14.352C15.952 14.928 15.856 15.4613 15.664 15.952C15.408 16.6347 14.976 17.168 14.368 17.552C13.7707 17.936 13.0613 18.128 12.24 18.128C11.4293 18.128 10.7147 17.9253 10.096 17.52C9.488 17.1147 9.05067 16.5653 8.784 15.872C8.63467 15.456 8.54933 15.008 8.528 14.528C8.528 14.4 8.592 14.336 8.72 14.336H10.608C10.736 14.336 10.8 14.4 10.8 14.528C10.8427 14.88 10.9013 15.1413 10.976 15.312C11.072 15.5893 11.2267 15.808 11.44 15.968C11.664 16.1173 11.9253 16.192 12.224 16.192C12.8213 16.192 13.232 15.9307 13.456 15.408C13.6053 15.088 13.68 14.7147 13.68 14.288C13.68 13.7867 13.6 13.376 13.44 13.056C13.1947 12.5547 12.784 12.304 12.208 12.304C12.0907 12.304 11.968 12.3413 11.84 12.416C11.712 12.48 11.5573 12.576 11.376 12.704C11.3333 12.736 11.2907 12.752 11.248 12.752C11.184 12.752 11.136 12.72 11.104 12.656L10.16 11.328C10.1387 11.296 10.128 11.2587 10.128 11.216C10.128 11.152 10.1493 11.0987 10.192 11.056L12.736 8.832C12.7573 8.81067 12.7627 8.78933 12.752 8.768C12.752 8.74667 12.736 8.736 12.704 8.736H8.944C8.89067 8.736 8.84267 8.72 8.8 8.688C8.768 8.64533 8.752 8.59733 8.752 8.544V6.992C8.752 6.93867 8.768 6.896 8.8 6.864C8.84267 6.82133 8.89067 6.8 8.944 6.8H15.616C15.6693 6.8 15.712 6.82133 15.744 6.864C15.7867 6.896 15.808 6.93867 15.808 6.992V8.752C15.808 8.83733 15.7707 8.91733 15.696 8.992L13.6 10.912C13.5787 10.9333 13.568 10.9547 13.568 10.976C13.5787 10.9973 13.6053 11.008 13.648 11.008C14.576 11.1893 15.2373 11.7387 15.632 12.656Z" fill="white"/>
+</svg>

package/dist/collection/components/controls/verdocs-status-indicator/signed-light.svg

@@ -0,0 +1,4 @@
+<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="M15.632 12.656C15.8453 13.1467 15.952 13.712 15.952 14.352C15.952 14.928 15.856 15.4613 15.664 15.952C15.408 16.6347 14.976 17.168 14.368 17.552C13.7707 17.936 13.0613 18.128 12.24 18.128C11.4293 18.128 10.7147 17.9253 10.096 17.52C9.488 17.1147 9.05067 16.5653 8.784 15.872C8.63467 15.456 8.54933 15.008 8.528 14.528C8.528 14.4 8.592 14.336 8.72 14.336H10.608C10.736 14.336 10.8 14.4 10.8 14.528C10.8427 14.88 10.9013 15.1413 10.976 15.312C11.072 15.5893 11.2267 15.808 11.44 15.968C11.664 16.1173 11.9253 16.192 12.224 16.192C12.8213 16.192 13.232 15.9307 13.456 15.408C13.6053 15.088 13.68 14.7147 13.68 14.288C13.68 13.7867 13.6 13.376 13.44 13.056C13.1947 12.5547 12.784 12.304 12.208 12.304C12.0907 12.304 11.968 12.3413 11.84 12.416C11.712 12.48 11.5573 12.576 11.376 12.704C11.3333 12.736 11.2907 12.752 11.248 12.752C11.184 12.752 11.136 12.72 11.104 12.656L10.16 11.328C10.1387 11.296 10.128 11.2587 10.128 11.216C10.128 11.152 10.1493 11.0987 10.192 11.056L12.736 8.832C12.7573 8.81067 12.7627 8.78933 12.752 8.768C12.752 8.74667 12.736 8.736 12.704 8.736H8.944C8.89067 8.736 8.84267 8.72 8.8 8.688C8.768 8.64533 8.752 8.59733 8.752 8.544V6.992C8.752 6.93867 8.768 6.896 8.8 6.864C8.84267 6.82133 8.89067 6.8 8.944 6.8H15.616C15.6693 6.8 15.712 6.82133 15.744 6.864C15.7867 6.896 15.808 6.93867 15.808 6.992V8.752C15.808 8.83733 15.7707 8.91733 15.696 8.992L13.6 10.912C13.5787 10.9333 13.568 10.9547 13.568 10.976C13.5787 10.9973 13.6053 11.008 13.648 11.008C14.576 11.1893 15.2373 11.7387 15.632 12.656Z" fill="#654DCB"/>
+</svg>

package/dist/collection/components/controls/verdocs-status-indicator/some-signed-dark.svg

@@ -0,0 +1,3 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.62395 13.5009L12.2073 16.0842L17.374 10.9176M8.11916 4.06786C9.04568 3.99392 9.92527 3.6296 10.6327 3.02678C11.4322 2.34513 12.4484 1.9707 13.499 1.9707C14.5495 1.9707 15.5657 2.34513 16.3652 3.02678C17.0726 3.6296 17.9522 3.99392 18.8787 4.06786C19.926 4.15118 20.9092 4.60497 21.6521 5.34781C22.3949 6.09064 22.8487 7.07389 22.932 8.12111C23.0059 9.04764 23.3703 9.92723 23.9731 10.6347C24.6547 11.4341 25.0292 12.4503 25.0292 13.5009C25.0292 14.5515 24.6547 15.5677 23.9731 16.3671C23.3703 17.0746 23.0059 17.9542 22.932 18.8807C22.8487 19.9279 22.3949 20.9112 21.6521 21.654C20.9092 22.3968 19.926 22.8506 18.8787 22.9339C17.9522 23.0079 17.0726 23.3722 16.3652 23.975C15.5657 24.6567 14.5495 25.0311 13.499 25.0311C12.4484 25.0311 11.4322 24.6567 10.6327 23.975C9.92527 23.3722 9.04568 23.0079 8.11916 22.9339C7.07194 22.8506 6.08869 22.3968 5.34585 21.654C4.60302 20.9112 4.14923 19.9279 4.06591 18.8807C3.99196 17.9542 3.62765 17.0746 3.02483 16.3671C2.34318 15.5677 1.96875 14.5515 1.96875 13.5009C1.96875 12.4503 2.34318 11.4341 3.02483 10.6347C3.62765 9.92723 3.99196 9.04764 4.06591 8.12111C4.14923 7.07389 4.60302 6.09064 5.34585 5.34781C6.08869 4.60497 7.07194 4.15118 8.11916 4.06786V4.06786Z" stroke="#63C58E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/collection/components/controls/verdocs-status-indicator/some-signed-light.svg

@@ -0,0 +1,3 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.62395 13.5009L12.2073 16.0842L17.374 10.9176M8.11916 4.06786C9.04568 3.99392 9.92527 3.6296 10.6327 3.02678C11.4322 2.34513 12.4484 1.9707 13.499 1.9707C14.5495 1.9707 15.5657 2.34513 16.3652 3.02678C17.0726 3.6296 17.9522 3.99392 18.8787 4.06786C19.926 4.15118 20.9092 4.60497 21.6521 5.34781C22.3949 6.09064 22.8487 7.07389 22.932 8.12111C23.0059 9.04764 23.3703 9.92723 23.9731 10.6347C24.6547 11.4341 25.0292 12.4503 25.0292 13.5009C25.0292 14.5515 24.6547 15.5677 23.9731 16.3671C23.3703 17.0746 23.0059 17.9542 22.932 18.8807C22.8487 19.9279 22.3949 20.9112 21.6521 21.654C20.9092 22.3968 19.926 22.8506 18.8787 22.9339C17.9522 23.0079 17.0726 23.3722 16.3652 23.975C15.5657 24.6567 14.5495 25.0311 13.499 25.0311C12.4484 25.0311 11.4322 24.6567 10.6327 23.975C9.92527 23.3722 9.04568 23.0079 8.11916 22.9339C7.07194 22.8506 6.08869 22.3968 5.34585 21.654C4.60302 20.9112 4.14923 19.9279 4.06591 18.8807C3.99196 17.9542 3.62765 17.0746 3.02483 16.3671C2.34318 15.5677 1.96875 14.5515 1.96875 13.5009C1.96875 12.4503 2.34318 11.4341 3.02483 10.6347C3.62765 9.92723 3.99196 9.04764 4.06591 8.12111C4.14923 7.07389 4.60302 6.09064 5.34585 5.34781C6.08869 4.60497 7.07194 4.15118 8.11916 4.06786V4.06786Z" stroke="#654DCB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/collection/components/controls/verdocs-status-indicator/submitted-dark.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.7152 2.35464C7.71225 2.27504 8.65876 1.88287 9.41995 1.23399C10.2797 0.501758 11.3721 0.0996094 12.5013 0.0996094C13.6306 0.0996094 14.723 0.501758 15.5827 1.23399C16.3439 1.88287 17.2904 2.27504 18.2875 2.35464C19.4135 2.44463 20.4706 2.93273 21.2693 3.73145C22.068 4.53017 22.5561 5.58727 22.6461 6.71324C22.7251 7.70989 23.1173 8.65694 23.7667 9.41799C24.499 10.2777 24.9011 11.3701 24.9011 12.4994C24.9011 13.6287 24.499 14.7211 23.7667 15.5808C23.1179 16.342 22.7257 17.2885 22.6461 18.2855C22.5561 19.4115 22.068 20.4686 21.2693 21.2673C20.4706 22.0661 19.4135 22.5542 18.2875 22.6441C17.2904 22.7237 16.3439 23.1159 15.5827 23.7648C14.723 24.497 13.6306 24.8992 12.5013 24.8992C11.3721 24.8992 10.2797 24.497 9.41995 23.7648C8.65876 23.1159 7.71225 22.7237 6.7152 22.6441C5.58923 22.5542 4.53213 22.0661 3.73341 21.2673C2.93469 20.4686 2.44658 19.4115 2.35659 18.2855C2.27699 17.2885 1.88482 16.342 1.23595 15.5808C0.503711 14.7211 0.101562 13.6287 0.101562 12.4994C0.101562 11.3701 0.503711 10.2777 1.23595 9.41799C1.88482 8.65681 2.27699 7.71029 2.35659 6.71324C2.44658 5.58727 2.93469 4.53017 3.73341 3.73145C4.53213 2.93273 5.58923 2.44463 6.7152 2.35464V2.35464ZM18.2472 10.4952C18.5295 10.2029 18.6858 9.81138 18.6822 9.40497C18.6787 8.99857 18.5157 8.60981 18.2283 8.32242C17.9409 8.03504 17.5522 7.87203 17.1458 7.8685C16.7394 7.86497 16.3478 8.0212 16.0555 8.30354L10.9513 13.4077L8.9472 11.4035C8.65486 11.1212 8.26333 10.965 7.85692 10.9685C7.45052 10.972 7.06176 11.135 6.77438 11.4224C6.48699 11.7098 6.32398 12.0986 6.32045 12.505C6.31692 12.9114 6.47315 13.3029 6.7555 13.5952L9.8555 16.6952C10.1462 16.9858 10.5403 17.1491 10.9513 17.1491C11.3624 17.1491 11.7565 16.9858 12.0472 16.6952L18.2472 10.4952V10.4952Z" fill="#63C58E"/>
+</svg>

package/dist/collection/components/controls/verdocs-status-indicator/submitted-light.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.7152 2.35464C7.71225 2.27504 8.65876 1.88287 9.41995 1.23399C10.2797 0.501758 11.3721 0.0996094 12.5013 0.0996094C13.6306 0.0996094 14.723 0.501758 15.5827 1.23399C16.3439 1.88287 17.2904 2.27504 18.2875 2.35464C19.4135 2.44463 20.4706 2.93273 21.2693 3.73145C22.068 4.53017 22.5561 5.58727 22.6461 6.71324C22.7251 7.70989 23.1173 8.65694 23.7667 9.41799C24.499 10.2777 24.9011 11.3701 24.9011 12.4994C24.9011 13.6287 24.499 14.7211 23.7667 15.5808C23.1179 16.342 22.7257 17.2885 22.6461 18.2855C22.5561 19.4115 22.068 20.4686 21.2693 21.2673C20.4706 22.0661 19.4135 22.5542 18.2875 22.6441C17.2904 22.7237 16.3439 23.1159 15.5827 23.7648C14.723 24.497 13.6306 24.8992 12.5013 24.8992C11.3721 24.8992 10.2797 24.497 9.41995 23.7648C8.65876 23.1159 7.71225 22.7237 6.7152 22.6441C5.58923 22.5542 4.53213 22.0661 3.73341 21.2673C2.93469 20.4686 2.44658 19.4115 2.35659 18.2855C2.27699 17.2885 1.88482 16.342 1.23595 15.5808C0.503711 14.7211 0.101562 13.6287 0.101562 12.4994C0.101562 11.3701 0.503711 10.2777 1.23595 9.41799C1.88482 8.65681 2.27699 7.71029 2.35659 6.71324C2.44658 5.58727 2.93469 4.53017 3.73341 3.73145C4.53213 2.93273 5.58923 2.44463 6.7152 2.35464V2.35464ZM18.2472 10.4952C18.5295 10.2029 18.6858 9.81138 18.6822 9.40497C18.6787 8.99857 18.5157 8.60981 18.2283 8.32242C17.9409 8.03504 17.5522 7.87203 17.1458 7.8685C16.7394 7.86497 16.3478 8.0212 16.0555 8.30354L10.9513 13.4077L8.9472 11.4035C8.65486 11.1212 8.26333 10.965 7.85692 10.9685C7.45052 10.972 7.06176 11.135 6.77438 11.4224C6.48699 11.7098 6.32398 12.0986 6.32045 12.505C6.31692 12.9114 6.47315 13.3029 6.7555 13.5952L9.8555 16.6952C10.1462 16.9858 10.5403 17.1491 10.9513 17.1491C11.3624 17.1491 11.7565 16.9858 12.0472 16.6952L18.2472 10.4952V10.4952Z" fill="#50BE80"/>
+</svg>

package/dist/collection/components/controls/verdocs-status-indicator/verdocs-status-indicator.css

@@ -0,0 +1,48 @@
+verdocs-status-indicator {
+  display: flex;
+  font-size: 18px;
+  flex-wrap: nowrap;
+  padding: 4px 12px;
+  border-radius: 6px;
+  color: #33364b;
+  align-items: center;
+  flex-direction: row;
+  font-family: "Barlow", sans-serif;
+}
+verdocs-status-indicator.has-document:hover {
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.1);
+}
+verdocs-status-indicator .icon {
+  width: 25px;
+  height: 25px;
+  margin: 0 10px -4px 0;
+}
+verdocs-status-indicator.dark {
+  color: #ffffff;
+}
+verdocs-status-indicator.small {
+  font-size: 16px;
+}
+verdocs-status-indicator.small .icon {
+  width: 20px;
+  height: 20px;
+  margin: 0 8px -4px 0;
+}
+verdocs-status-indicator .detail-panel {
+  display: none;
+  background: #ffffff;
+  border: 1px solid #1e2031;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  border-radius: 10px;
+  font-weight: 500;
+}
+verdocs-status-indicator .detail-panel h1 {
+  font-size: 44px;
+  color: #092c4c;
+}
+verdocs-status-indicator .detail-panel[data-show] {
+  display: flex;
+}

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

@@ -0,0 +1,344 @@
+import { RecipientFlow } from './recipient-flow';
+import { createPopper } from '@popperjs/core';
+import { Component, Prop, Host, h, State } from '@stencil/core';
+import AcceptedLight from './accepted-light.svg';
+import AcceptedDark from './accepted-dark.svg';
+import CanceledLight from './canceled-light.svg';
+import CanceledDark from './canceled-dark.svg';
+import CompletedLight from './complete-light.svg';
+import CompletedDark from './complete-dark.svg';
+import DeclinedLight from './declined-light.svg';
+import DeclinedDark from './declined-dark.svg';
+import InProgressLight from './in-progress-light.svg';
+import InProgressDark from './in-progress-dark.svg';
+import OpenedLight from './opened-light.svg';
+import OpenedDark from './opened-dark.svg';
+import PendingLight from './pending-light.svg';
+import PendingDark from './pending-dark.svg';
+import SignedLight from './signed-light.svg';
+import SignedDark from './signed-dark.svg';
+import SomeSignedLight from './some-signed-light.svg';
+import SomeSignedDark from './some-signed-dark.svg';
+import SubmittedLight from './submitted-light.svg';
+import SubmittedDark from './submitted-dark.svg';
+const ENTRY_WIDTH = 140;
+const ENTRY_HEIGHT = 40;
+const ENTRY_PADDING = 40;
+/**
+ * Displays an icon and message describing a document's completion status. For convenience, the status may be passed in either
+ * directly as a status field or the whole document object may be passed in.
+ *
+ * If the document is provided, the status flag will indicate the document's overall status. This also makes the component clickable
+ * to display a popup panel with per-recipient status data.
+ *
+ * If the status is provided as a string it can be either a `TRecipientStatus` or `TDocumentStatus` value.
+ */
+export class VerdocsStatusIndicator {
+  constructor() {
+    /**
+     * The size (height) of the indicator. The small variant is suitable for use in densely populated components such as table rows.
+     */
+    this.size = 'normal';
+    /**
+     * The theme to use for diplay.
+     */
+    this.theme = 'light';
+    this.recipientStatusIcons = [];
+  }
+  componentDidLoad() {
+    var _a;
+    this.popper = createPopper(this.summaryComponent, this.detailPanel, { placement: 'bottom-start', modifiers: [{ name: 'offset', options: { offset: [0, 10] } }] });
+    if ((_a = this.document) === null || _a === void 0 ? void 0 : _a.recipients) {
+      const recipientsAtLevel = [];
+      this.document.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('#verdocs-recipient-status-diagram', 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;
+    }
+    this.hide();
+  }
+  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';
+    }
+  }
+  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;
+    }
+  }
+  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';
+      default:
+      case 'pending':
+        return 'Pending';
+    }
+  }
+  render() {
+    var _a, _b;
+    // The extra fallback for accepted is to future proof for when we add that.
+    let status = this.status || ((_a = this.document) === null || _a === void 0 ? void 0 : _a.status) || 'pending' || 'accepted';
+    if (!this.status && ((_b = this.document) === null || _b === void 0 ? void 0 : _b.recipients)) {
+      const submittedRecipients = this.document.recipients.filter(r => r.status === 'submitted');
+      if (submittedRecipients.length > 0 && submittedRecipients.length !== this.document.recipients.length) {
+        status = 'some-signed';
+      }
+    }
+    const icon = this.getStatusIcon(status);
+    const statusMessage = this.getStatusMessage(status);
+    return (h(Host, { ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.document ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: () => this.document && this.toggleDropdown(), onBlur: e => this.document && 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: "verdocs-recipient-status-diagram" }),
+        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": "TDocumentStatus | TRecipientStatus | 'accepted'",
+        "resolved": "\"accepted\" | \"canceled\" | \"complete\" | \"declined\" | \"in progress\" | \"invited\" | \"opened\" | \"pending\" | \"signed\" | \"submitted\"",
+        "references": {
+          "TDocumentStatus": {
+            "location": "import",
+            "path": "@verdocs/js-sdk/Documents/Documents"
+          },
+          "TRecipientStatus": {
+            "location": "import",
+            "path": "@verdocs/js-sdk/Documents/Documents"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The status to display."
+      },
+      "attribute": "status",
+      "reflect": false
+    },
+    "document": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "IDocument",
+        "resolved": "IDocument",
+        "references": {
+          "IDocument": {
+            "location": "import",
+            "path": "@verdocs/js-sdk/Documents/Documents"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The document to display status for. Ignored if `status` is set directly."
+      }
+    }
+  }; }
+  static get states() { return {
+    "isOpen": {},
+    "recipientStatusIcons": {}
+  }; }
+}