@verdocs/web-sdk 1.9.6 → 1.9.9

package/dist/cjs/verdocs-toggle-button.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 
-const verdocsToggleButtonCss = "verdocs-toggle-button{font-family:\"Barlow\", sans-serif}verdocs-toggle-button button{border:none;cursor:pointer;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;background:#cccccc;color:#33364b}verdocs-toggle-button button svg{max-width:100%;max-height:100%;fill:#33364b}verdocs-toggle-button button.active{background:#55bc81;color:#f5f5fa}verdocs-toggle-button button.active svg{fill:#f5f5fa}verdocs-toggle-button.size-normal button{width:40px;height:40px;padding:6px;border-radius:4px}verdocs-toggle-button.size-small button{width:34px;height:34px;padding:4px;border-radius:2px}";
+const verdocsToggleButtonCss = "verdocs-toggle-button{font-family:\"Barlow\", sans-serif}verdocs-toggle-button button{border:none;outline:none;cursor:pointer;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;background:#cccccc;color:#33364b}verdocs-toggle-button button svg{max-width:100%;max-height:100%;fill:#33364b}verdocs-toggle-button button.active{background:#55bc81;color:#f5f5fa}verdocs-toggle-button button.active svg{fill:#f5f5fa}verdocs-toggle-button button:focus{border:none;outline:none}verdocs-toggle-button.size-normal button{width:40px;height:40px;padding:6px;border-radius:4px}verdocs-toggle-button.size-small button{width:34px;height:34px;padding:4px;border-radius:2px}";
 
 const VerdocsToggleButton = class {
   constructor(hostRef) {

package/dist/cjs/verdocs-toggle-button.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"verdocs-toggle-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,sBAAsB,GAAG,0pBAA0pB;;MCS5qB,mBAAmB;;;;kBACb,KAAK;gBAKS,IAAI;iBAKH,IAAI;gBAKA,QAAQ;mBAOzB,KAAK;;EAExB,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC;GAC5B;EAED,YAAY,CAAC,CAAM;;IACjB,CAAC,CAAC,eAAe,EAAE,CAAC;IAEpB,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC/B,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;IACxB,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,CAAC,EAAC,MAAM,EAAE,QAAQ,EAAC,CAAC,CAAC;GACvC;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE,IAC7B,IAAI,CAAC,IAAI,IACRD,oBAAQ,SAAS,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,OAAO,EAAC,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAI,KAEnGA,oBAAQ,KAAK,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,OAAO,EAAC,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IACtE,IAAI,CAAC,KAAK,CACJ,CACV,CACI,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/controls/verdocs-toggle-button/verdocs-toggle-button.scss?tag=verdocs-toggle-button","./src/components/controls/verdocs-toggle-button/verdocs-toggle-button.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-toggle-button {\n  font-family: $primary-font;\n\n  button {\n    border: none;\n    cursor: pointer;\n    align-items: center;\n    display: inline-flex;\n    justify-content: center;\n    background: $verdocs-bg-1;\n    color: $verdocs-dark-blue;\n\n    svg {\n      max-width: 100%;\n      max-height: 100%;\n      fill: $verdocs-dark-blue;\n    }\n\n    &.active {\n      background: $verdocs-green;\n      color: $verdocs-grey-3;\n\n      svg {\n        fill: $verdocs-grey-3;\n      }\n    }\n  }\n\n  &.size-normal button {\n    width: 40px;\n    height: 40px;\n    padding: 6px;\n    border-radius: 4px;\n  }\n\n  &.size-small button {\n    width: 34px;\n    height: 34px;\n    padding: 4px;\n    border-radius: 2px;\n  }\n}\n","import {Component, Prop, h, State, Event, EventEmitter, Host} from '@stencil/core';\n\n/**\n * Displays a single button that can be toggled on or off by clicking it.\n */\n@Component({\n  tag: 'verdocs-toggle-button',\n  styleUrl: 'verdocs-toggle-button.scss',\n})\nexport class VerdocsToggleButton {\n  @Prop() active = false;\n\n  /**\n   * If set, should be an SVG object. This will be rendered as the button's visible element. If icon is supplied, label is ignored.\n   */\n  @Prop() icon?: string | null = null;\n\n  /**\n   * If set, should be an SVG object. This will be rendered as the button's visible element. If icon is supplied, label is ignored.\n   */\n  @Prop() label?: string | null = null;\n\n  /**\n   * How large the button should be. Small buttons are intended for dialog boxes and other smaller scale UI regions.\n   */\n  @Prop() size?: 'small' | 'normal' = 'normal';\n\n  /**\n   * Event fired when the button is pressed.\n   */\n  @Event({composed: true}) toggle!: EventEmitter<{active: boolean}>;\n\n  @State() _active = false;\n\n  componentWillLoad() {\n    this._active = this.active;\n  }\n\n  handleToggle(e: any) {\n    e.stopPropagation();\n\n    const newState = !this._active;\n    this._active = newState;\n    this.toggle?.emit({active: newState});\n  }\n\n  render() {\n    return (\n      <Host class={`size-${this.size}`}>\n        {this.icon ? (\n          <button innerHTML={this.icon} class={{active: this._active}} onClick={e => this.handleToggle(e)} />\n        ) : (\n          <button class={{active: this._active}} onClick={e => this.handleToggle(e)}>\n            {this.label}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-toggle-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,sBAAsB,GAAG,muBAAmuB;;MCSrvB,mBAAmB;;;;kBACb,KAAK;gBAKS,IAAI;iBAKH,IAAI;gBAKA,QAAQ;mBAOzB,KAAK;;EAExB,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC;GAC5B;EAED,YAAY,CAAC,CAAM;;IACjB,CAAC,CAAC,eAAe,EAAE,CAAC;IAEpB,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC/B,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;IACxB,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,CAAC,EAAC,MAAM,EAAE,QAAQ,EAAC,CAAC,CAAC;GACvC;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE,IAC7B,IAAI,CAAC,IAAI,IACRD,oBAAQ,SAAS,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,OAAO,EAAC,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAI,KAEnGA,oBAAQ,KAAK,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,OAAO,EAAC,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IACtE,IAAI,CAAC,KAAK,CACJ,CACV,CACI,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/controls/verdocs-toggle-button/verdocs-toggle-button.scss?tag=verdocs-toggle-button","./src/components/controls/verdocs-toggle-button/verdocs-toggle-button.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-toggle-button {\n  font-family: $primary-font;\n\n  button {\n    border: none;\n    outline: none;\n    cursor: pointer;\n    align-items: center;\n    display: inline-flex;\n    justify-content: center;\n    background: $verdocs-bg-1;\n    color: $verdocs-dark-blue;\n\n    svg {\n      max-width: 100%;\n      max-height: 100%;\n      fill: $verdocs-dark-blue;\n    }\n\n    &.active {\n      background: $verdocs-green;\n      color: $verdocs-grey-3;\n\n      svg {\n        fill: $verdocs-grey-3;\n      }\n    }\n\n    &:focus {\n      border: none;\n      outline: none;\n    }\n  }\n\n  &.size-normal button {\n    width: 40px;\n    height: 40px;\n    padding: 6px;\n    border-radius: 4px;\n  }\n\n  &.size-small button {\n    width: 34px;\n    height: 34px;\n    padding: 4px;\n    border-radius: 2px;\n  }\n}\n","import {Component, Prop, h, State, Event, EventEmitter, Host} from '@stencil/core';\n\n/**\n * Displays a single button that can be toggled on or off by clicking it.\n */\n@Component({\n  tag: 'verdocs-toggle-button',\n  styleUrl: 'verdocs-toggle-button.scss',\n})\nexport class VerdocsToggleButton {\n  @Prop() active = false;\n\n  /**\n   * If set, should be an SVG object. This will be rendered as the button's visible element. If icon is supplied, label is ignored.\n   */\n  @Prop() icon?: string | null = null;\n\n  /**\n   * If set, should be an SVG object. This will be rendered as the button's visible element. If icon is supplied, label is ignored.\n   */\n  @Prop() label?: string | null = null;\n\n  /**\n   * How large the button should be. Small buttons are intended for dialog boxes and other smaller scale UI regions.\n   */\n  @Prop() size?: 'small' | 'normal' = 'normal';\n\n  /**\n   * Event fired when the button is pressed.\n   */\n  @Event({composed: true}) toggle!: EventEmitter<{active: boolean}>;\n\n  @State() _active = false;\n\n  componentWillLoad() {\n    this._active = this.active;\n  }\n\n  handleToggle(e: any) {\n    e.stopPropagation();\n\n    const newState = !this._active;\n    this._active = newState;\n    this.toggle?.emit({active: newState});\n  }\n\n  render() {\n    return (\n      <Host class={`size-${this.size}`}>\n        {this.icon ? (\n          <button innerHTML={this.icon} class={{active: this._active}} onClick={e => this.handleToggle(e)} />\n        ) : (\n          <button class={{active: this._active}} onClick={e => this.handleToggle(e)}>\n            {this.label}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/verdocs-web-sdk.cjs.js

@@ -15,7 +15,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["verdocs-build.cjs",[[0,"verdocs-build",{"endpoint":[16],"templateId":[1,"template-id"],"step":[32],"pdfUrl":[32],"template":[32]}]]],["verdocs-sign.cjs",[[0,"verdocs-sign",{"endpoint":[16],"documentId":[1,"document-id"],"roleId":[1,"role-id"],"inviteCode":[1,"invite-code"],"recipient":[32],"signerToken":[32],"pdfUrl":[32],"recipientIndex":[32],"document":[32],"fields":[32],"hasSignature":[32],"nextButtonLabel":[32],"focusedField":[32]}]]],["verdocs-field-initial.cjs",[[0,"verdocs-field-initial",{"field":[16],"recipient":[16],"disabled":[4],"initials":[1],"editable":[4],"moveable":[4],"roleindex":[2],"tempInitials":[32],"focusField":[64]}]]],["verdocs-auth.cjs",[[0,"verdocs-auth",{"endpoint":[16],"visible":[4],"logo":[1],"debug":[4],"isAuthenticated":[32],"displayMode":[32],"username":[32],"password":[32],"loggingIn":[32],"activeSession":[32],"loginError":[32]}]]],["verdocs-field-date.cjs",[[0,"verdocs-field-date",{"field":[16],"recipient":[16],"disabled":[4],"editable":[4],"moveable":[4],"roleindex":[2],"focused":[32],"containerId":[32],"focusField":[64]}]]],["verdocs-field-textarea.cjs",[[0,"verdocs-field-textarea",{"field":[16],"recipient":[16],"disabled":[4],"editable":[4],"moveable":[4],"roleindex":[2],"focused":[32],"focusField":[64]}]]],["verdocs-field-textbox.cjs",[[0,"verdocs-field-textbox",{"field":[16],"recipient":[16],"disabled":[4],"editable":[4],"moveable":[4],"roleindex":[2],"focused":[32],"focusField":[64]}]]],["verdocs-field-timestamp.cjs",[[0,"verdocs-field-timestamp",{"field":[16],"recipient":[16],"disabled":[4],"editable":[4],"moveable":[4],"roleindex":[2],"focused":[32],"focusField":[64]}]]],["verdocs-preview.cjs",[[0,"verdocs-preview",{"endpoint":[16],"templateId":[1,"template-id"]}]]],["verdocs-search.cjs",[[0,"verdocs-search",{"endpoint":[16]}]]],["verdocs-contact-picker.cjs",[[0,"verdocs-contact-picker",{"endpoint":[16],"templateRole":[16],"contactSuggestions":[16],"name":[32],"email":[32],"phone":[32],"message":[32],"showSuggestions":[32],"showMessage":[32],"delegator":[32]}]]],["verdocs-send.cjs",[[0,"verdocs-send",{"endpoint":[16],"templateId":[1,"template-id"],"template":[32],"pdfUrl":[32],"containerId":[32],"rolesAtLevel":[32],"showPickerForId":[32],"sessionContacts":[32],"recipientsAssigned":[32]}]]],["verdocs-field-attachment.cjs",[[0,"verdocs-field-attachment",{"field":[16],"recipient":[16],"disabled":[4],"focusField":[64]}]]],["verdocs-kba-dialog.cjs",[[0,"verdocs-kba-dialog",{"step":[2],"steps":[2],"helptitle":[1],"helptext":[1],"mode":[1],"label":[1],"placeholder":[1],"choices":[16],"open":[4],"response":[32]}]]],["verdocs-field-dropdown.cjs",[[0,"verdocs-field-dropdown",{"field":[16],"recipient":[16],"disabled":[4],"focused":[32],"focusField":[64]}]]],["verdocs-field-payment.cjs",[[0,"verdocs-field-payment",{"field":[16],"recipient":[16],"disabled":[4],"fields":[16],"pageNum":[2,"page-num"],"roleName":[1,"role-name"],"fieldId":[1,"field-id"],"recipients":[8],"selectedRoleName":[1,"selected-role-name"],"pdfPages":[16],"currentSignature":[1,"current-signature"],"currentSignatureId":[1,"current-signature-id"],"currentInitial":[1,"current-initial"],"currentInitialId":[1,"current-initial-id"],"focused":[4],"signed":[4],"preparedMessage":[32],"signatureUrl":[32]}]]],["verdocs-organization-card.cjs",[[0,"verdocs-organization-card",{"organization":[16]}]]],["verdocs-search-tabs.cjs",[[0,"verdocs-search-tabs",{"selected":[32]}]]],["verdocs-status-indicator.cjs",[[0,"verdocs-status-indicator",{"size":[1],"theme":[1],"status":[1],"document":[16],"isOpen":[32],"recipientStatusIcons":[32],"containerId":[32]}]]],["verdocs-template-card.cjs",[[0,"verdocs-template-card",{"template":[16]}]]],["verdocs-template-tags.cjs",[[0,"verdocs-template-tags",{"tags":[16]}]]],["verdocs-toggle.cjs",[[0,"verdocs-toggle",{"options":[16],"theme":[1],"selectedOption":[32]}]]],["verdocs-initial-dialog.cjs",[[0,"verdocs-initial-dialog",{"initials":[1],"open":[4],"fontLoaded":[32],"enteredInitials":[32],"mode":[32]}]]],["verdocs-ok-dialog.cjs",[[0,"verdocs-ok-dialog",{"heading":[1],"message":[1],"open":[4],"cancel":[4]}]]],["verdocs-upload-dialog.cjs",[[0,"verdocs-upload-dialog",{"open":[4],"draggingOver":[32],"decodedFiles":[32]}]]],["verdocs-checkbox.cjs",[[0,"verdocs-checkbox",{"checked":[4],"name":[1],"value":[1],"disabled":[4]}]]],["verdocs-toggle-button.cjs",[[0,"verdocs-toggle-button",{"active":[4],"icon":[1],"label":[1],"size":[1],"_active":[32]}]]],["verdocs-dropdown_3.cjs",[[0,"verdocs-dropdown",{"options":[16],"open":[4],"isOpen":[32]}],[0,"verdocs-field-checkbox",{"field":[16],"recipient":[16],"option":[2],"disabled":[4]}],[0,"verdocs-field-radio-button",{"field":[16],"recipient":[16],"option":[2],"disabled":[4]}]]],["verdocs-quick-functions_3.cjs",[[0,"verdocs-quick-functions",{"endpoint":[16]}],[0,"verdocs-search-activity",{"endpoint":[16],"type":[1],"options":[8],"emptyMessage":[32],"authFailure":[32],"title":[32],"recent":[32],"saved":[32],"starred":[32]}],[0,"verdocs-search-box",{"endpoint":[16],"placeholder":[1],"type":[1],"query":[1],"grabsFocus":[4,"grabs-focus"],"focusField":[64]}]]],["verdocs-radio-button.cjs",[[0,"verdocs-radio-button",{"checked":[4],"name":[1],"value":[1],"disabled":[4]}]]],["verdocs-button.cjs",[[0,"verdocs-button",{"label":[1],"startIcon":[1,"start-icon"],"endIcon":[1,"end-icon"],"size":[1],"type":[1],"variant":[1],"disabled":[4]}]]],["verdocs-help-icon_2.cjs",[[0,"verdocs-template-sender-dialog",{"value":[1],"open":[4],"newValue":[32]}],[0,"verdocs-help-icon",{"text":[1],"containerId":[32]}]]],["verdocs-field-signature_3.cjs",[[0,"verdocs-field-signature",{"field":[16],"name":[1],"recipient":[16],"disabled":[4],"editable":[4],"moveable":[4],"roleindex":[2],"tempSignature":[32],"focusField":[64]}],[0,"verdocs-toolbar-icon",{"text":[1],"icon":[1],"containerId":[32]}],[0,"verdocs-signature-dialog",{"name":[1],"open":[4],"fontLoaded":[32],"enteredName":[32],"mode":[32]}]]],["verdocs-document-page_3.cjs",[[0,"verdocs-view",{"endpoint":[16],"templateId":[1,"template-id"],"rotation":[2],"pageLayers":[16],"source":[1],"loadProgress":[32],"template":[32],"pageNumbers":[32],"pageUris":[32],"numPages":[32]}],[0,"verdocs-document-page",{"pageImageUri":[1,"page-image-uri"],"pageNumber":[2,"page-number"],"virtualWidth":[2,"virtual-width"],"virtualHeight":[2,"virtual-height"],"layers":[16],"containerId":[32],"renderedWidth":[32],"renderedHeight":[32],"skipFirstNotification":[32]}],[0,"verdocs-loader"]]],["verdocs-button-panel_3.cjs",[[4,"verdocs-button-panel",{"icon":[1]}],[0,"verdocs-select-input",{"value":[1],"label":[1],"options":[16],"disabled":[4],"_value":[32]}],[0,"verdocs-text-input",{"value":[1],"label":[1],"placeholder":[1],"autocomplete":[1],"type":[1],"disabled":[4],"_value":[32]}]]],["verdocs-template-create_4.cjs",[[0,"verdocs-template-fields",{"endpoint":[16],"templateId":[1,"template-id"]}],[0,"verdocs-template-properties",{"endpoint":[16],"templateId":[1,"template-id"],"template":[32],"name":[32],"sendReminders":[32],"firstReminderDays":[32],"reminderDays":[32]}],[0,"verdocs-template-recipients",{"endpoint":[16],"templateRole":[16],"contactSuggestions":[16],"name":[32],"email":[32],"phone":[32],"message":[32],"showSuggestions":[32],"showMessage":[32],"delegator":[32],"sender":[32],"showingSenderDialog":[32],"orderedRoles":[32]}],[0,"verdocs-template-create",{"endpoint":[16],"file":[32]}]]]], options);
+  return index.bootstrapLazy([["verdocs-build.cjs",[[0,"verdocs-build",{"endpoint":[16],"templateId":[1,"template-id"],"step":[32],"pdfUrl":[32],"template":[32]}]]],["verdocs-sign.cjs",[[0,"verdocs-sign",{"endpoint":[16],"envelopeId":[1,"envelope-id"],"roleId":[1,"role-id"],"inviteCode":[1,"invite-code"],"recipient":[32],"signerToken":[32],"pdfUrl":[32],"recipientIndex":[32],"envelope":[32],"fields":[32],"hasSignature":[32],"nextButtonLabel":[32],"focusedField":[32]}]]],["verdocs-field-initial.cjs",[[0,"verdocs-field-initial",{"field":[16],"recipient":[16],"disabled":[4],"initials":[1],"editable":[4],"moveable":[4],"roleindex":[2],"tempInitials":[32],"focusField":[64]}]]],["verdocs-preview.cjs",[[0,"verdocs-preview",{"endpoint":[16],"templateId":[1,"template-id"]}]]],["verdocs-auth.cjs",[[0,"verdocs-auth",{"endpoint":[16],"visible":[4],"logo":[1],"debug":[4],"isAuthenticated":[32],"displayMode":[32],"username":[32],"password":[32],"loggingIn":[32],"activeSession":[32],"loginError":[32]}]]],["verdocs-field-date.cjs",[[0,"verdocs-field-date",{"field":[16],"recipient":[16],"disabled":[4],"editable":[4],"moveable":[4],"roleindex":[2],"focused":[32],"containerId":[32],"focusField":[64]}]]],["verdocs-field-textarea.cjs",[[0,"verdocs-field-textarea",{"field":[16],"recipient":[16],"disabled":[4],"editable":[4],"moveable":[4],"roleindex":[2],"focused":[32],"focusField":[64]}]]],["verdocs-field-textbox.cjs",[[0,"verdocs-field-textbox",{"field":[16],"recipient":[16],"disabled":[4],"editable":[4],"moveable":[4],"roleindex":[2],"focused":[32],"focusField":[64]}]]],["verdocs-field-timestamp.cjs",[[0,"verdocs-field-timestamp",{"field":[16],"recipient":[16],"disabled":[4],"editable":[4],"moveable":[4],"roleindex":[2],"focused":[32],"focusField":[64]}]]],["verdocs-search.cjs",[[0,"verdocs-search",{"endpoint":[16]}]]],["verdocs-contact-picker.cjs",[[0,"verdocs-contact-picker",{"endpoint":[16],"templateRole":[16],"contactSuggestions":[16],"name":[32],"email":[32],"phone":[32],"message":[32],"showSuggestions":[32],"showMessage":[32],"delegator":[32]}]]],["verdocs-send.cjs",[[0,"verdocs-send",{"endpoint":[16],"templateId":[1,"template-id"],"template":[32],"pdfUrl":[32],"containerId":[32],"rolesAtLevel":[32],"showPickerForId":[32],"sessionContacts":[32],"recipientsAssigned":[32]}]]],["verdocs-field-attachment.cjs",[[0,"verdocs-field-attachment",{"field":[16],"recipient":[16],"disabled":[4],"focusField":[64]}]]],["verdocs-kba-dialog.cjs",[[0,"verdocs-kba-dialog",{"step":[2],"steps":[2],"helptitle":[1],"helptext":[1],"mode":[1],"label":[1],"placeholder":[1],"choices":[16],"open":[4],"response":[32]}]]],["verdocs-field-dropdown.cjs",[[0,"verdocs-field-dropdown",{"field":[16],"recipient":[16],"disabled":[4],"focused":[32],"focusField":[64]}]]],["verdocs-field-payment.cjs",[[0,"verdocs-field-payment",{"field":[16],"recipient":[16],"disabled":[4],"fields":[16],"pageNum":[2,"page-num"],"roleName":[1,"role-name"],"fieldId":[1,"field-id"],"recipients":[8],"selectedRoleName":[1,"selected-role-name"],"pdfPages":[16],"currentSignature":[1,"current-signature"],"currentSignatureId":[1,"current-signature-id"],"currentInitial":[1,"current-initial"],"currentInitialId":[1,"current-initial-id"],"focused":[4],"signed":[4],"preparedMessage":[32],"signatureUrl":[32]}]]],["verdocs-organization-card.cjs",[[0,"verdocs-organization-card",{"organization":[16]}]]],["verdocs-search-tabs.cjs",[[0,"verdocs-search-tabs",{"selected":[32]}]]],["verdocs-status-indicator.cjs",[[0,"verdocs-status-indicator",{"size":[1],"theme":[1],"status":[1],"envelope":[16],"isOpen":[32],"recipientStatusIcons":[32],"containerId":[32]}]]],["verdocs-template-card.cjs",[[0,"verdocs-template-card",{"template":[16]}]]],["verdocs-template-tags.cjs",[[0,"verdocs-template-tags",{"tags":[16]}]]],["verdocs-toggle.cjs",[[0,"verdocs-toggle",{"options":[16],"theme":[1],"selectedOption":[32]}]]],["verdocs-initial-dialog.cjs",[[0,"verdocs-initial-dialog",{"initials":[1],"open":[4],"fontLoaded":[32],"enteredInitials":[32],"mode":[32]}]]],["verdocs-ok-dialog.cjs",[[0,"verdocs-ok-dialog",{"heading":[1],"message":[1],"open":[4],"cancel":[4]}]]],["verdocs-upload-dialog.cjs",[[0,"verdocs-upload-dialog",{"open":[4],"draggingOver":[32],"decodedFiles":[32]}]]],["verdocs-checkbox.cjs",[[0,"verdocs-checkbox",{"checked":[4],"name":[1],"value":[1],"disabled":[4]}]]],["verdocs-toggle-button.cjs",[[0,"verdocs-toggle-button",{"active":[4],"icon":[1],"label":[1],"size":[1],"_active":[32]}]]],["verdocs-dropdown_3.cjs",[[0,"verdocs-dropdown",{"options":[16],"open":[4],"isOpen":[32]}],[0,"verdocs-field-checkbox",{"field":[16],"recipient":[16],"option":[2],"disabled":[4]}],[0,"verdocs-field-radio-button",{"field":[16],"recipient":[16],"option":[2],"disabled":[4]}]]],["verdocs-quick-functions_3.cjs",[[0,"verdocs-quick-functions",{"endpoint":[16]}],[0,"verdocs-search-activity",{"endpoint":[16],"type":[1],"options":[8],"emptyMessage":[32],"authFailure":[32],"title":[32],"recent":[32],"saved":[32],"starred":[32]}],[0,"verdocs-search-box",{"endpoint":[16],"placeholder":[1],"type":[1],"query":[1],"grabsFocus":[4,"grabs-focus"],"focusField":[64]}]]],["verdocs-radio-button.cjs",[[0,"verdocs-radio-button",{"checked":[4],"name":[1],"value":[1],"disabled":[4]}]]],["verdocs-button.cjs",[[0,"verdocs-button",{"label":[1],"startIcon":[1,"start-icon"],"endIcon":[1,"end-icon"],"size":[1],"type":[1],"variant":[1],"disabled":[4]}]]],["verdocs-help-icon_2.cjs",[[0,"verdocs-template-sender-dialog",{"value":[1],"open":[4],"newValue":[32]}],[0,"verdocs-help-icon",{"text":[1],"containerId":[32]}]]],["verdocs-button-panel_3.cjs",[[4,"verdocs-button-panel",{"icon":[1]}],[0,"verdocs-select-input",{"value":[1],"label":[1],"options":[16],"disabled":[4],"_value":[32]}],[0,"verdocs-text-input",{"value":[1],"label":[1],"placeholder":[1],"autocomplete":[1],"type":[1],"disabled":[4],"_value":[32]}]]],["verdocs-field-signature_3.cjs",[[0,"verdocs-field-signature",{"field":[16],"name":[1],"recipient":[16],"disabled":[4],"editable":[4],"moveable":[4],"roleindex":[2],"tempSignature":[32],"focusField":[64]}],[0,"verdocs-toolbar-icon",{"text":[1],"icon":[1],"containerId":[32]}],[0,"verdocs-signature-dialog",{"name":[1],"open":[4],"fontLoaded":[32],"enteredName":[32],"mode":[32]}]]],["verdocs-document-page.cjs",[[0,"verdocs-document-page",{"pageImageUri":[1,"page-image-uri"],"pageNumber":[2,"page-number"],"virtualWidth":[2,"virtual-width"],"virtualHeight":[2,"virtual-height"],"layers":[16],"containerId":[32],"renderedWidth":[32],"renderedHeight":[32],"naturalWidth":[32],"naturalHeight":[32],"aspectRatio":[32],"skipFirstNotification":[32]}]]],["verdocs-loader_4.cjs",[[0,"verdocs-view",{"endpoint":[16],"templateId":[1,"template-id"],"envelopeId":[1,"envelope-id"],"rotation":[2],"pageLayers":[16],"template":[32],"envelope":[32]}],[0,"verdocs-loader"],[0,"verdocs-view-envelope-document",{"endpoint":[16],"envelopeId":[1,"envelope-id"],"documentId":[1,"document-id"],"rotation":[2],"pageLayers":[16],"envelopeDocument":[32]}],[0,"verdocs-view-template-document",{"endpoint":[16],"templateId":[1,"template-id"],"documentId":[1,"document-id"],"rotation":[2],"pageLayers":[16],"templateDocument":[32]}]]],["verdocs-template-create_4.cjs",[[0,"verdocs-template-fields",{"endpoint":[16],"templateId":[1,"template-id"]}],[0,"verdocs-template-properties",{"endpoint":[16],"templateId":[1,"template-id"],"template":[32],"name":[32],"visibility":[32],"sendReminders":[32],"firstReminderDays":[32],"reminderDays":[32]}],[0,"verdocs-template-recipients",{"endpoint":[16],"templateRole":[16],"contactSuggestions":[16],"name":[32],"email":[32],"phone":[32],"message":[32],"showSuggestions":[32],"showMessage":[32],"delegator":[32],"sender":[32],"showingSenderDialog":[32],"orderedRoles":[32]}],[0,"verdocs-template-create",{"endpoint":[16],"file":[32]}]]]], options);
 });
 
 //# sourceMappingURL=verdocs-web-sdk.cjs.js.map

package/dist/collection/collection-manifest.json

@@ -7,6 +7,8 @@
     "./components/elements/verdocs-template-recipients/verdocs-template-recipients.js",
     "./components/controls/verdocs-toggle/verdocs-toggle.js",
     "./components/embeds/verdocs-view/verdocs-view.js",
+    "./components/elements/verdocs-view-envelope-document/verdocs-view-envelope-document.js",
+    "./components/elements/verdocs-view-template-document/verdocs-view-template-document.js",
     "./components/controls/verdocs-button/verdocs-button.js",
     "./components/controls/verdocs-button-panel/verdocs-button-panel.js",
     "./components/controls/verdocs-checkbox/verdocs-checkbox.js",

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

@@ -21,4 +21,5 @@ verdocs-checkbox.focused {
 verdocs-checkbox input[type=checkbox] {
   width: 18px;
   height: 18px;
+  accent-color: #3f9d67;
 }

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

@@ -1,8 +1,8 @@
 import { h, Host } from '@stencil/core';
 /**
- * Displays a radio button. Note that this is different from the `verdocs-field-radio-button` component, which is designed
- * to be used in signing experiences and contains settings that connect to template fields. This is just a simple radio
- * button for UI displays e.g. dialogs and .
+ * Displays a check box. Note that this is different from the `verdocs-field-checkbox` component, which is designed
+ * to be used in signing experiences and contains settings that connect to template fields. This is just a simple check box
+ * for UI displays e.g. dialog boxes.
  */
 export class VerdocsCheckbox {
   constructor() {

package/dist/collection/components/controls/verdocs-checkbox/verdocs-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-checkbox.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-checkbox/verdocs-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAe,MAAM,eAAe,CAAC;AAE5E;;;;GAIG;AAMH,MAAM,OAAO,eAAe;;mBAIC,KAAK;gBAKT,EAAE;iBAKD,EAAE;oBAKG,KAAK;;EASlC,YAAY,CAAC,CAAM;IACjB,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACzC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC;EAC1C,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC;MACpC,aACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,oBAAoB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,EACjD,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACnC,CACG,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, h, Host, Prop, Event, EventEmitter} from '@stencil/core';\n\n/**\n * Displays a radio button. Note that this is different from the `verdocs-field-radio-button` component, which is designed\n * to be used in signing experiences and contains settings that connect to template fields. This is just a simple radio\n * button for UI displays e.g. dialogs and .\n */\n@Component({\n  tag: 'verdocs-checkbox',\n  styleUrl: 'verdocs-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsCheckbox {\n  /**\n   * Whether the radio button is currently selected.\n   */\n  @Prop() checked: boolean = false;\n\n  /**\n   * HTML form field name for the input.\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Value to track with the input.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * If set, the button will still be displayed but not selectable.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) selected: EventEmitter<{value: string}>;\n\n  handleChange(e: any) {\n    console.log('changed', e.target.checked);\n    this.selected.emit({value: this.value});\n  }\n\n  render() {\n    return (\n      <Host class={{disabled: this.disabled}}>\n        <input\n          type=\"checkbox\"\n          value={this.value}\n          name={this.name}\n          id={`verdocs-checkbox-${this.name}-${this.value}`}\n          checked={this.checked}\n          disabled={this.disabled}\n          onChange={e => this.handleChange(e)}\n        />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-checkbox.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-checkbox/verdocs-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAe,MAAM,eAAe,CAAC;AAE5E;;;;GAIG;AAMH,MAAM,OAAO,eAAe;;mBAIC,KAAK;gBAKT,EAAE;iBAKD,EAAE;oBAKG,KAAK;;EASlC,YAAY,CAAC,CAAM;IACjB,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACzC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC;EAC1C,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC;MACpC,aACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,oBAAoB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,EACjD,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACnC,CACG,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, h, Host, Prop, Event, EventEmitter} from '@stencil/core';\n\n/**\n * Displays a check box. Note that this is different from the `verdocs-field-checkbox` component, which is designed\n * to be used in signing experiences and contains settings that connect to template fields. This is just a simple check box\n * for UI displays e.g. dialog boxes.\n */\n@Component({\n  tag: 'verdocs-checkbox',\n  styleUrl: 'verdocs-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsCheckbox {\n  /**\n   * Whether the radio button is currently selected.\n   */\n  @Prop() checked: boolean = false;\n\n  /**\n   * HTML form field name for the input.\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Value to track with the input.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * If set, the button will still be displayed but not selectable.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) selected: EventEmitter<{value: string}>;\n\n  handleChange(e: any) {\n    console.log('changed', e.target.checked);\n    this.selected.emit({value: this.value});\n  }\n\n  render() {\n    return (\n      <Host class={{disabled: this.disabled}}>\n        <input\n          type=\"checkbox\"\n          value={this.value}\n          name={this.name}\n          id={`verdocs-checkbox-${this.name}-${this.value}`}\n          checked={this.checked}\n          disabled={this.disabled}\n          onChange={e => this.handleChange(e)}\n        />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/controls/verdocs-organization-card/verdocs-organization-card.css

@@ -1,9 +1,13 @@
 verdocs-organization-card {
   font-family: "Barlow", sans-serif;
-  width: 242px;
   position: relative;
   display: flex;
   flex-direction: row;
+  align-items: center;
+  border: 1px solid #cccccc;
+  background: #ffffff;
+  border-radius: 8px;
+  padding: 7px 15px;
 }
 verdocs-organization-card:hover > .popup {
   display: flex;
@@ -12,59 +16,64 @@ verdocs-organization-card:hover > .popup {
 }
 verdocs-organization-card .icon {
   flex: 0;
-  margin: 0 7px 0 0;
+  height: 24px;
+  width: 24px;
+  margin: 0 14px 0 0;
 }
 verdocs-organization-card .icon svg {
   fill: #aeb4bf;
+  height: 24px;
   width: 24px;
-  margin-bottom: -5px;
+}
+verdocs-organization-card .content {
+  margin-top: 2px;
 }
 verdocs-organization-card .popup {
   position: absolute;
   top: -1px;
   left: -4px;
   display: none;
-  border: 1px solid #1e2031;
+  border: 1px solid #cccccc;
   border-radius: 10px;
   width: 326px;
-  height: 220px;
+  padding: 20px 40px 0 40px;
   flex-direction: column;
   flex-wrap: nowrap;
-  align-items: center;
-  justify-content: space-evenly;
   font-family: sans-serif;
 }
 verdocs-organization-card .popup-header {
   display: flex;
+  flex: 0;
   flex-direction: row;
-  align-items: center;
-  width: 242px;
-  height: 69px;
-  justify-content: space-between;
+  align-items: flex-end;
+  margin: 0 0 20px 0;
   font-size: 21px;
+  line-height: 16px;
   color: #4c56cb;
 }
+verdocs-organization-card .popup-header .status {
+  margin-right: 20px;
+}
 verdocs-organization-card .popup-body {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  width: 256.2px;
-  height: 95px;
-  justify-content: space-evenly;
-  font-size: 13px;
+  flex-direction: column;
+  font-size: 14px;
   text-transform: uppercase;
 }
-verdocs-organization-card .popup-body span {
-  display: block;
-  flex: 2 80px;
-  margin-left: 7px;
+verdocs-organization-card .status {
+  transform: scale(1.5);
+  width: 24px;
+  height: 24px;
 }
-verdocs-organization-card .popup-body span:last-child {
-  margin-top: 5px;
+verdocs-organization-card .field {
+  margin: 0 0 20px 0;
 }
-verdocs-organization-card .status {
-  width: 29px;
-  height: 29px;
-  background-color: #aeb4bf;
-  border-radius: 50%;
+verdocs-organization-card .field strong {
+  color: #7b7b9a;
+  display: block;
+  margin: 0 0 5px 0;
+}
+verdocs-organization-card .field a {
+  color: #654dcb;
+  text-transform: uppercase;
 }

package/dist/collection/components/controls/verdocs-organization-card/verdocs-organization-card.js

@@ -1,15 +1,16 @@
+import { format } from 'date-fns';
 import { h, Host } from '@stencil/core';
-import UserGroup from './user-group.svg';
+const UserIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><path d="M4,13c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C2,12.1,2.9,13,4,13z M5.13,14.1C4.76,14.04,4.39,14,4,14 c-0.99,0-1.93,0.21-2.78,0.58C0.48,14.9,0,15.62,0,16.43V18l4.5,0v-1.61C4.5,15.56,4.73,14.78,5.13,14.1z M20,13c1.1,0,2-0.9,2-2 c0-1.1-0.9-2-2-2s-2,0.9-2,2C18,12.1,18.9,13,20,13z M24,16.43c0-0.81-0.48-1.53-1.22-1.85C21.93,14.21,20.99,14,20,14 c-0.39,0-0.76,0.04-1.13,0.1c0.4,0.68,0.63,1.46,0.63,2.29V18l4.5,0V16.43z M16.24,13.65c-1.17-0.52-2.61-0.9-4.24-0.9 c-1.63,0-3.07,0.39-4.24,0.9C6.68,14.13,6,15.21,6,16.39V18h12v-1.61C18,15.21,17.32,14.13,16.24,13.65z M8.07,16 c0.09-0.23,0.13-0.39,0.91-0.69c0.97-0.38,1.99-0.56,3.02-0.56s2.05,0.18,3.02,0.56c0.77,0.3,0.81,0.46,0.91,0.69H8.07z M12,8 c0.55,0,1,0.45,1,1s-0.45,1-1,1s-1-0.45-1-1S11.45,8,12,8 M12,6c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3 C15,7.34,13.66,6,12,6L12,6z"/></g></svg>';
+const BusinessIcon = '<svg xmlns="http://www.w3.org/2000/svg"  focusable="false" aria-hidden="true" height="24px" viewBox="0 0 24 24" width="24px"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"></path></svg>';
 /**
- * Display a pop-up describing the company that was hovered over
+ * Display a small summary card describing an organization
  */
 export class VerdocsOrganizationCard {
   constructor() {
     this.organization = undefined;
   }
   render() {
-    console.log('org', JSON.stringify(this.organization, null, 2));
-    return (h(Host, null, h("span", { class: "icon", innerHTML: UserGroup }), h("span", { class: "content" }, this.organization.name), h("div", { class: "popup" }, h("div", { class: "popup-header" }, h("span", { class: "status" }), h("span", { class: "title" }, this.organization.name)), h("div", { class: "popup-body" }, h("span", { class: "joined" }, h("b", null, "Joined"), " ", 'Jan 1 2022'), h("span", { class: "followers" }, h("b", null, "Followers"), " 57"), h("span", { class: "website" }, h("b", null, "Website")), h("span", { class: "templates" }, h("b", null, "Templates"), " 7"), h("span", null, "https://www.google.com")))));
+    return (h(Host, null, h("span", { class: "icon", innerHTML: this.organization.is_business ? BusinessIcon : UserIcon }), h("span", { class: "content" }, this.organization.name), h("div", { class: "popup" }, h("div", { class: "popup-header" }, h("span", { class: "status" }, h("span", { class: "icon", innerHTML: this.organization.is_business ? BusinessIcon : UserIcon })), h("span", { class: "title" }, this.organization.name)), h("div", { class: "popup-body" }, h("div", { class: "field" }, h("strong", null, "Joined"), format(new Date(this.organization.created_at || undefined), 'LLL d, Y')), this.organization.url && (h("div", { class: "field" }, h("strong", null, "Website"), h("a", { href: this.organization.url, target: "_blank", rel: "nofollow" }, this.organization.url)))))));
   }
   static get is() { return "verdocs-organization-card"; }
   static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-organization-card/verdocs-organization-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-organization-card.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-organization-card/verdocs-organization-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAEvD,OAAO,SAAS,MAAM,kBAAkB,CAAC;AAEzC;;GAEG;AAKH,MAAM,OAAO,uBAAuB;;;;EAMlC,MAAM;IACJ,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;IAC/D,OAAO,CACL,EAAC,IAAI;MACH,YAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,SAAS,GAAI;MAE3C,YAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAQ;MAErD,WAAK,KAAK,EAAC,OAAO;QAChB,WAAK,KAAK,EAAC,cAAc;UACvB,YAAM,KAAK,EAAC,QAAQ,GAAG;UACvB,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAQ,CAC/C;QACN,WAAK,KAAK,EAAC,YAAY;UACrB,YAAM,KAAK,EAAC,QAAQ;YAClB,sBAAa;;YAAE,YAAY,CACtB;UACP,YAAM,KAAK,EAAC,WAAW;YACrB,yBAAgB;kBACX;UACP,YAAM,KAAK,EAAC,SAAS;YACnB,uBAAc,CACT;UACP,YAAM,KAAK,EAAC,WAAW;YACrB,yBAAgB;iBACX;UACP,yCAAmC,CAC/B,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, h, Host} from '@stencil/core';\nimport {IOrganization} from '@verdocs/js-sdk/Organizations/Types';\nimport UserGroup from './user-group.svg';\n\n/**\n * Display a pop-up describing the company that was hovered over\n */\n@Component({\n  tag: 'verdocs-organization-card',\n  styleUrl: 'verdocs-organization-card.scss',\n})\nexport class VerdocsOrganizationCard {\n  /**\n   * The organization to display\n   */\n  @Prop() organization: IOrganization;\n\n  render() {\n    console.log('org', JSON.stringify(this.organization, null, 2));\n    return (\n      <Host>\n        <span class=\"icon\" innerHTML={UserGroup} />\n\n        <span class=\"content\">{this.organization.name}</span>\n\n        <div class=\"popup\">\n          <div class=\"popup-header\">\n            <span class=\"status\" />\n            <span class=\"title\">{this.organization.name}</span>\n          </div>\n          <div class=\"popup-body\">\n            <span class=\"joined\">\n              <b>Joined</b> {'Jan 1 2022'}\n            </span>\n            <span class=\"followers\">\n              <b>Followers</b> 57\n            </span>\n            <span class=\"website\">\n              <b>Website</b>\n            </span>\n            <span class=\"templates\">\n              <b>Templates</b> 7\n            </span>\n            <span>https://www.google.com</span>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-organization-card.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-organization-card/verdocs-organization-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAGvD,MAAM,QAAQ,GACZ,w9BAAw9B,CAAC;AAE39B,MAAM,YAAY,GAChB,gWAAgW,CAAC;AAEnW;;GAEG;AAKH,MAAM,OAAO,uBAAuB;;;;EAMlC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,YAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,GAAI;MAEzF,YAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAQ;MAErD,WAAK,KAAK,EAAC,OAAO;QAChB,WAAK,KAAK,EAAC,cAAc;UACvB,YAAM,KAAK,EAAC,QAAQ;YAClB,YAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,GAAI,CACpF;UACP,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAQ,CAC/C;QAEN,WAAK,KAAK,EAAC,YAAY;UACrB,WAAK,KAAK,EAAC,OAAO;YAChB,2BAAuB;YACtB,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,IAAI,SAAS,CAAC,EAAE,UAAU,CAAC,CACpE;UACL,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CACxB,WAAK,KAAK,EAAC,OAAO;YAChB,4BAAwB;YACxB,SAAG,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,UAAU,IAC3D,IAAI,CAAC,YAAY,CAAC,GAAG,CACpB,CACA,CACP,CACG,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {format} from 'date-fns';\nimport {Component, Prop, h, Host} from '@stencil/core';\nimport {IOrganization} from '@verdocs/js-sdk/Organizations/Types';\n\nconst UserIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\"><rect fill=\"none\" height=\"24\" width=\"24\"/><g><path d=\"M4,13c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C2,12.1,2.9,13,4,13z M5.13,14.1C4.76,14.04,4.39,14,4,14 c-0.99,0-1.93,0.21-2.78,0.58C0.48,14.9,0,15.62,0,16.43V18l4.5,0v-1.61C4.5,15.56,4.73,14.78,5.13,14.1z M20,13c1.1,0,2-0.9,2-2 c0-1.1-0.9-2-2-2s-2,0.9-2,2C18,12.1,18.9,13,20,13z M24,16.43c0-0.81-0.48-1.53-1.22-1.85C21.93,14.21,20.99,14,20,14 c-0.39,0-0.76,0.04-1.13,0.1c0.4,0.68,0.63,1.46,0.63,2.29V18l4.5,0V16.43z M16.24,13.65c-1.17-0.52-2.61-0.9-4.24-0.9 c-1.63,0-3.07,0.39-4.24,0.9C6.68,14.13,6,15.21,6,16.39V18h12v-1.61C18,15.21,17.32,14.13,16.24,13.65z M8.07,16 c0.09-0.23,0.13-0.39,0.91-0.69c0.97-0.38,1.99-0.56,3.02-0.56s2.05,0.18,3.02,0.56c0.77,0.3,0.81,0.46,0.91,0.69H8.07z M12,8 c0.55,0,1,0.45,1,1s-0.45,1-1,1s-1-0.45-1-1S11.45,8,12,8 M12,6c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3 C15,7.34,13.66,6,12,6L12,6z\"/></g></svg>';\n\nconst BusinessIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\"  focusable=\"false\" aria-hidden=\"true\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\"><path d=\"M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z\"></path></svg>';\n\n/**\n * Display a small summary card describing an organization\n */\n@Component({\n  tag: 'verdocs-organization-card',\n  styleUrl: 'verdocs-organization-card.scss',\n})\nexport class VerdocsOrganizationCard {\n  /**\n   * The organization to display\n   */\n  @Prop() organization: IOrganization;\n\n  render() {\n    return (\n      <Host>\n        <span class=\"icon\" innerHTML={this.organization.is_business ? BusinessIcon : UserIcon} />\n\n        <span class=\"content\">{this.organization.name}</span>\n\n        <div class=\"popup\">\n          <div class=\"popup-header\">\n            <span class=\"status\">\n              <span class=\"icon\" innerHTML={this.organization.is_business ? BusinessIcon : UserIcon} />\n            </span>\n            <span class=\"title\">{this.organization.name}</span>\n          </div>\n\n          <div class=\"popup-body\">\n            <div class=\"field\">\n              <strong>Joined</strong>\n              {format(new Date(this.organization.created_at || undefined), 'LLL d, Y')}\n            </div>\n            {this.organization.url && (\n              <div class=\"field\">\n                <strong>Website</strong>\n                <a href={this.organization.url} target=\"_blank\" rel=\"nofollow\">\n                  {this.organization.url}\n                </a>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/controls/verdocs-organization-card/verdocs-organization-card.stories.js

@@ -1,7 +1,8 @@
 import { html } from 'lit-html';
 const MockOrganization = {
-  id: '3',
-  name: 'ACME Widgets, LLC',
+  id: '21643fd6-4097-47c0-9780-62dc0c01ddce',
+  name: 'Verdocs, LLC',
+  url: 'https://verdocs.com/',
   address: null,
   phone: null,
   business_name: null,
@@ -10,6 +11,7 @@ const MockOrganization = {
   contact_email: null,
   timezone: null,
   envelope_responsible: false,
+  created_at: '2022-12-21 20:16:50.262113+00',
 };
 export default {
   title: 'Controls/Organization Card',

package/dist/collection/components/controls/verdocs-organization-card/verdocs-organization-card.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-organization-card.stories.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-organization-card/verdocs-organization-card.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,MAAM,gBAAgB,GAAG;EACvB,EAAE,EAAE,GAAG;EACP,IAAI,EAAE,mBAAmB;EACzB,OAAO,EAAE,IAAI;EACb,KAAK,EAAE,IAAI;EACX,aAAa,EAAE,IAAI;EACnB,WAAW,EAAE,IAAI;EACjB,QAAQ,EAAE,IAAI;EACd,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,IAAI;EACd,oBAAoB,EAAE,KAAK;CACX,CAAC;AAEnB,eAAe;EACb,KAAK,EAAE,4BAA4B;EACnC,SAAS,EAAE,2BAA2B;EACtC,IAAI,EAAE;IACJ,YAAY,EAAE,gBAAgB;GAC/B;EACD,QAAQ,EAAE,EAAE;CACL,CAAC;AAEV,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAC,YAAY,EAAC,EAAE,EAAE,CAAC,IAAI,CAAA,4CAA4C,YAAY,KAAK,CAAC","sourcesContent":["import {Meta} from '@storybook/web-components';\nimport {html} from 'lit-html';\nimport {IOrganization} from '@verdocs/js-sdk/Organizations/Types';\n\nconst MockOrganization = {\n  id: '3',\n  name: 'ACME Widgets, LLC',\n  address: null,\n  phone: null,\n  business_name: null,\n  is_business: true,\n  address2: null,\n  contact_email: null,\n  timezone: null,\n  envelope_responsible: false,\n} as IOrganization;\n\nexport default {\n  title: 'Controls/Organization Card',\n  component: 'verdocs-organization-card',\n  args: {\n    organization: MockOrganization,\n  },\n  argTypes: {},\n} as Meta;\n\nexport const OrganizationCard = ({organization}) => html`<verdocs-organization-card .organization=${organization} />`;\n"]}
+{"version":3,"file":"verdocs-organization-card.stories.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-organization-card/verdocs-organization-card.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,MAAM,gBAAgB,GAAG;EACvB,EAAE,EAAE,sCAAsC;EAC1C,IAAI,EAAE,cAAc;EACpB,GAAG,EAAE,sBAAsB;EAC3B,OAAO,EAAE,IAAI;EACb,KAAK,EAAE,IAAI;EACX,aAAa,EAAE,IAAI;EACnB,WAAW,EAAE,IAAI;EACjB,QAAQ,EAAE,IAAI;EACd,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,IAAI;EACd,oBAAoB,EAAE,KAAK;EAC3B,UAAU,EAAE,+BAA+B;CAC3B,CAAC;AAEnB,eAAe;EACb,KAAK,EAAE,4BAA4B;EACnC,SAAS,EAAE,2BAA2B;EACtC,IAAI,EAAE;IACJ,YAAY,EAAE,gBAAgB;GAC/B;EACD,QAAQ,EAAE,EAAE;CACL,CAAC;AAEV,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAC,YAAY,EAAC,EAAE,EAAE,CAAC,IAAI,CAAA,4CAA4C,YAAY,KAAK,CAAC","sourcesContent":["import {Meta} from '@storybook/web-components';\nimport {html} from 'lit-html';\nimport {IOrganization} from '@verdocs/js-sdk/Organizations/Types';\n\nconst MockOrganization = {\n  id: '21643fd6-4097-47c0-9780-62dc0c01ddce',\n  name: 'Verdocs, LLC',\n  url: 'https://verdocs.com/',\n  address: null,\n  phone: null,\n  business_name: null,\n  is_business: true,\n  address2: null,\n  contact_email: null,\n  timezone: null,\n  envelope_responsible: false,\n  created_at: '2022-12-21 20:16:50.262113+00',\n} as IOrganization;\n\nexport default {\n  title: 'Controls/Organization Card',\n  component: 'verdocs-organization-card',\n  args: {\n    organization: MockOrganization,\n  },\n  argTypes: {},\n} as Meta;\n\nexport const OrganizationCard = ({organization}) => html`<verdocs-organization-card .organization=${organization} />`;\n"]}

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

@@ -38,7 +38,7 @@ export class VerdocsStatusIndicator {
     this.size = 'normal';
     this.theme = 'light';
     this.status = undefined;
-    this.document = undefined;
+    this.envelope = undefined;
     this.isOpen = undefined;
     this.recipientStatusIcons = [];
     this.containerId = `verdocs-status-indicator-${Math.random().toString(36).substring(2, 11)}`;
@@ -46,9 +46,9 @@ export class VerdocsStatusIndicator {
   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) {
+    if ((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.recipients) {
       const recipientsAtLevel = [];
-      this.document.recipients.forEach(recipient => {
+      this.envelope.recipients.forEach(recipient => {
         const level = recipient.sequence - 1;
         recipientsAtLevel[level] || (recipientsAtLevel[level] = []);
         const id = `r-${level}-${recipientsAtLevel[level].length}`;
@@ -228,20 +228,20 @@ export class VerdocsStatusIndicator {
   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) {
+    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';
       }
     }
     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: e => {
+    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.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: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
+        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() {
@@ -296,16 +296,16 @@ export class VerdocsStatusIndicator {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "TDocumentStatus | TRecipientStatus | 'accepted'",
+          "original": "TEnvelopeStatus | TRecipientStatus | 'accepted'",
           "resolved": "\"accepted\" | \"canceled\" | \"complete\" | \"declined\" | \"in progress\" | \"invited\" | \"opened\" | \"pending\" | \"signed\" | \"submitted\"",
           "references": {
-            "TDocumentStatus": {
+            "TEnvelopeStatus": {
               "location": "import",
-              "path": "@verdocs/js-sdk/Documents/Types"
+              "path": "@verdocs/js-sdk/Envelopes/Types"
             },
             "TRecipientStatus": {
               "location": "import",
-              "path": "@verdocs/js-sdk/Documents/Types"
+              "path": "@verdocs/js-sdk/Envelopes/Types"
             }
           }
         },
@@ -318,16 +318,16 @@ export class VerdocsStatusIndicator {
         "attribute": "status",
         "reflect": false
       },
-      "document": {
+      "envelope": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "IDocument",
-          "resolved": "IDocument",
+          "original": "IEnvelope",
+          "resolved": "IEnvelope",
           "references": {
-            "IDocument": {
+            "IEnvelope": {
               "location": "import",
-              "path": "@verdocs/js-sdk/Documents/Types"
+              "path": "@verdocs/js-sdk/Envelopes/Types"
             }
           }
         },

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

@@ -1 +1 @@
-{"version":3,"file":"verdocs-status-indicator.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-status-indicator/verdocs-status-indicator.tsx"],"names":[],"mappings":"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","sourcesContent":["import {RecipientFlow} from './recipient-flow';\nimport {createPopper, Instance} from '@popperjs/core';\nimport {Component, Prop, Host, h, State} from '@stencil/core';\nimport {IDocument, TDocumentStatus, TRecipientStatus} from '@verdocs/js-sdk/Documents/Types';\nimport AcceptedLight from './accepted-light.svg';\nimport AcceptedDark from './accepted-dark.svg';\nimport CanceledLight from './canceled-light.svg';\nimport CanceledDark from './canceled-dark.svg';\nimport CompletedLight from './complete-light.svg';\nimport CompletedDark from './complete-dark.svg';\nimport DeclinedLight from './declined-light.svg';\nimport DeclinedDark from './declined-dark.svg';\nimport InProgressLight from './in-progress-light.svg';\nimport InProgressDark from './in-progress-dark.svg';\nimport OpenedLight from './opened-light.svg';\nimport OpenedDark from './opened-dark.svg';\nimport PendingLight from './pending-light.svg';\nimport PendingDark from './pending-dark.svg';\nimport SignedLight from './signed-light.svg';\nimport SignedDark from './signed-dark.svg';\nimport SomeSignedLight from './some-signed-light.svg';\nimport SomeSignedDark from './some-signed-dark.svg';\nimport SubmittedLight from './submitted-light.svg';\nimport SubmittedDark from './submitted-dark.svg';\n\nconst ENTRY_WIDTH = 140;\nconst ENTRY_HEIGHT = 40;\nconst ENTRY_PADDING = 40;\n\n/**\n * Displays an icon and message describing a document's completion status. For convenience, the status may be passed in either\n * directly as a status field or the whole document object may be passed in.\n *\n * If the document is provided, the status flag will indicate the document's overall status. This also makes the component clickable\n * to display a popup panel with per-recipient status data.\n *\n * If the status is provided as a string it can be either a `TRecipientStatus` or `TDocumentStatus` value.\n */\n@Component({\n  tag: 'verdocs-status-indicator',\n  styleUrl: 'verdocs-status-indicator.scss',\n})\nexport class VerdocsStatusIndicator {\n  private summaryComponent?: HTMLButtonElement;\n  private detailPanel?: HTMLDivElement;\n  private popper?: Instance;\n\n  /**\n   * The size (height) of the indicator. The small variant is suitable for use in densely populated components such as table rows.\n   */\n  @Prop() size: 'small' | 'normal' = 'normal';\n\n  /**\n   * The theme to use for diplay.\n   */\n  @Prop() theme?: 'dark' | 'light' = 'light';\n\n  /**\n   * The status to display.\n   */\n  // The accepted override is here because we don't actually have an official status for that yet, but we plan to add it\n  @Prop() status?: TDocumentStatus | TRecipientStatus | 'accepted';\n\n  /**\n   * The document to display status for. Ignored if `status` is set directly.\n   */\n  @Prop() document?: IDocument;\n\n  @State() isOpen: boolean;\n\n  @State() recipientStatusIcons = [];\n\n  @State() containerId = `verdocs-status-indicator-${Math.random().toString(36).substring(2, 11)}`;\n\n  componentDidLoad() {\n    this.popper = createPopper(this.summaryComponent, this.detailPanel, {placement: 'bottom-start', modifiers: [{name: 'offset', options: {offset: [0, 10]}}]});\n\n    if (this.document?.recipients) {\n      const recipientsAtLevel = [];\n      this.document.recipients.forEach(recipient => {\n        const level = recipient.sequence - 1;\n        recipientsAtLevel[level] ||= [];\n        const id = `r-${level}-${recipientsAtLevel[level].length}`;\n        recipientsAtLevel[level].push({...recipient, id});\n      });\n\n      const levelCount = Object.keys(recipientsAtLevel).length;\n\n      const canvasHeight = levelCount * ENTRY_HEIGHT + (levelCount + 1) * ENTRY_PADDING;\n      let canvasWidth = 0;\n      Object.values(recipientsAtLevel).forEach(recipients => {\n        let minW = recipients.length * ENTRY_WIDTH + (recipients.length + 1) * ENTRY_PADDING;\n        if (minW > canvasWidth) {\n          canvasWidth = minW;\n        }\n      });\n\n      const entities = [];\n      const lines = [];\n      const statusIcons = [];\n\n      let y = ENTRY_PADDING;\n      Object.entries(recipientsAtLevel).forEach(([level, recipients]) => {\n        // To center align here, we figure out how many items are per line and how much leftover space there would be if we just\n        // drew them left-to-right. We add half of that as a left offset.\n        const renderedItemsWidth = recipients.length * (ENTRY_WIDTH + ENTRY_PADDING);\n        const leftoverSpace = canvasWidth - renderedItemsWidth;\n        const leftOffset = ENTRY_PADDING / 2 + leftoverSpace / 2;\n\n        recipients.forEach((recipient, index) => {\n          const [first, last] = (recipient.full_name || 'Unknown').toUpperCase().split(' ');\n          const name = `${first} ${last?.substring(0, 1)}`;\n          const entity = {\n            id: recipient.id,\n            text: name,\n            icon: this.getStatusIcon(recipient.status),\n            x: index * (ENTRY_WIDTH + ENTRY_PADDING) + leftOffset,\n            y,\n            width: ENTRY_WIDTH,\n            height: ENTRY_HEIGHT,\n            color: this.getStatusColor(recipient.status),\n            radius: 8,\n          };\n          entities.push(entity);\n\n          statusIcons.push({\n            icon: this.getStatusIcon(recipient.status),\n            x: index * (ENTRY_WIDTH + ENTRY_PADDING) + leftOffset + (ENTRY_WIDTH - 32),\n            y: y + ENTRY_HEIGHT / 2 - 13,\n          });\n\n          recipientsAtLevel[+level - 1]?.forEach(prevRecip => {\n            const line = {\n              id: `line-${prevRecip.id}-${entity.id}`,\n              from: {element: prevRecip.id, point: 'bottom'},\n              to: {element: entity.id, point: 'top'},\n              color: this.getStatusColor(recipient.status),\n            };\n            lines.push(line);\n          });\n        });\n\n        y += ENTRY_HEIGHT + ENTRY_PADDING;\n      });\n\n      this.recipientStatusIcons = statusIcons;\n\n      const diagram = RecipientFlow();\n      diagram.initalize(`#${this.containerId}`, canvasWidth, canvasHeight);\n      diagram.update({entities, lines});\n    }\n  }\n\n  // See https://popper.js.org/docs/v2/tutorial/\n  // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists\n  showDropdown() {\n    this.isOpen = true;\n    this.detailPanel.setAttribute('data-show', '');\n    this.detailPanel.removeAttribute('aria-hidden');\n\n    this.popper?.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, {name: 'eventListeners', enabled: true}],\n    }));\n\n    this.popper?.update();\n  }\n\n  handleHideDropdown(e: any) {\n    if (e?.target?.localName === 'button' && e?.target?.className === 'arrow') {\n      // This event is fired when a menu element is clicked because the button \"loses focus\" then too\n      return;\n    }\n\n    this.hide();\n  }\n\n  toggleDropdown() {\n    if (this.isOpen) {\n      this.hide();\n    } else {\n      this.showDropdown();\n    }\n  }\n\n  hide() {\n    this.isOpen = false;\n    this.detailPanel.removeAttribute('data-show');\n    this.detailPanel.setAttribute('aria-hidden', 'true');\n    this.popper?.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, {name: 'eventListeners', enabled: false}],\n    }));\n  }\n\n  getStatusColor(status: string) {\n    switch (status) {\n      case 'invited':\n      case 'opened':\n      case 'accepted':\n      case 'signed':\n        return '#654dcb';\n      case 'some-signed':\n      case 'submitted':\n      case 'complete':\n        return '#55bc81';\n      case 'declined':\n        return '#ff0000';\n      case 'canceled':\n      case 'in progress':\n      case 'pending':\n      default:\n        return '#999999';\n    }\n  }\n\n  getStatusIcon(status: string) {\n    switch (status) {\n      case 'accepted':\n        return this.theme === 'light' ? AcceptedLight : AcceptedDark;\n      case 'complete':\n        return this.theme === 'light' ? CompletedLight : CompletedDark;\n      case 'in progress':\n        return this.theme === 'light' ? InProgressLight : InProgressDark;\n      case 'canceled':\n        return this.theme === 'light' ? CanceledLight : CanceledDark;\n      case 'declined':\n        return this.theme === 'light' ? DeclinedLight : DeclinedDark;\n      case 'invited':\n        return this.theme === 'light' ? InProgressLight : InProgressDark;\n      case 'opened':\n        return this.theme === 'light' ? OpenedLight : OpenedDark;\n      case 'signed':\n        return this.theme === 'light' ? SignedLight : SignedDark;\n      case 'submitted':\n        return this.theme === 'light' ? SubmittedLight : SubmittedDark;\n      case 'some-signed':\n        return this.theme === 'light' ? SomeSignedLight : SomeSignedDark;\n      default:\n      case 'pending':\n        return this.theme === 'light' ? PendingLight : PendingDark;\n    }\n  }\n\n  getStatusMessage(status: string) {\n    switch (status) {\n      case 'accepted':\n        return 'Accepted';\n      case 'complete':\n        return 'Completed';\n      case 'in progress':\n        return 'In Progress';\n      case 'canceled':\n        return 'Cancelled';\n      case 'declined':\n        return 'Declined';\n      case 'invited':\n        return 'Invited';\n      case 'opened':\n        return 'Opened';\n      case 'signed':\n        return 'Signed';\n      case 'submitted':\n        return 'Submitted';\n      case 'some-signed':\n        return 'Partly Signed';\n      default:\n      case 'pending':\n        return 'Pending';\n    }\n  }\n\n  render() {\n    // The extra fallback for accepted is to future proof for when we add that.\n    let status: string = this.status || this.document?.status || 'pending' || 'accepted';\n    if (!this.status && this.document?.recipients) {\n      const submittedRecipients = this.document.recipients.filter(r => r.status === 'submitted');\n      if (submittedRecipients.length > 0 && submittedRecipients.length !== this.document.recipients.length) {\n        status = 'some-signed';\n      }\n    }\n\n    const icon = this.getStatusIcon(status);\n    const statusMessage = this.getStatusMessage(status);\n\n    return (\n      <Host\n        ref={el => (this.summaryComponent = el as HTMLButtonElement)}\n        class={`${this.theme} ${this.size} ${this.document ? 'has-document' : ''}`}\n        aria-label=\"Click to View Details\"\n        onClick={e => {\n          e.stopPropagation();\n          e.preventDefault();\n          this.document && this.toggleDropdown();\n        }}\n        onBlur={e => this.document && this.handleHideDropdown(e)}\n      >\n        <span class=\"icon\" innerHTML={icon} />\n        <span class=\"content\">{statusMessage}</span>\n\n        <div class=\"detail-panel\" ref={el => (this.detailPanel = el as HTMLDivElement)}>\n          <div id={`${this.containerId}`} />\n          {this.recipientStatusIcons.map(icon => (\n            <span innerHTML={icon.icon} style={{position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px`}} />\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-status-indicator.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-status-indicator/verdocs-status-indicator.tsx"],"names":[],"mappings":"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","sourcesContent":["import {RecipientFlow} from './recipient-flow';\nimport {createPopper, Instance} from '@popperjs/core';\nimport {Component, Prop, Host, h, State} from '@stencil/core';\nimport {IEnvelope, TEnvelopeStatus, TRecipientStatus} from '@verdocs/js-sdk/Envelopes/Types';\nimport AcceptedLight from './accepted-light.svg';\nimport AcceptedDark from './accepted-dark.svg';\nimport CanceledLight from './canceled-light.svg';\nimport CanceledDark from './canceled-dark.svg';\nimport CompletedLight from './complete-light.svg';\nimport CompletedDark from './complete-dark.svg';\nimport DeclinedLight from './declined-light.svg';\nimport DeclinedDark from './declined-dark.svg';\nimport InProgressLight from './in-progress-light.svg';\nimport InProgressDark from './in-progress-dark.svg';\nimport OpenedLight from './opened-light.svg';\nimport OpenedDark from './opened-dark.svg';\nimport PendingLight from './pending-light.svg';\nimport PendingDark from './pending-dark.svg';\nimport SignedLight from './signed-light.svg';\nimport SignedDark from './signed-dark.svg';\nimport SomeSignedLight from './some-signed-light.svg';\nimport SomeSignedDark from './some-signed-dark.svg';\nimport SubmittedLight from './submitted-light.svg';\nimport SubmittedDark from './submitted-dark.svg';\n\nconst ENTRY_WIDTH = 140;\nconst ENTRY_HEIGHT = 40;\nconst ENTRY_PADDING = 40;\n\n/**\n * Displays an icon and message describing a document's completion status. For convenience, the status may be passed in either\n * directly as a status field or the whole document object may be passed in.\n *\n * If the document is provided, the status flag will indicate the document's overall status. This also makes the component clickable\n * to display a popup panel with per-recipient status data.\n *\n * If the status is provided as a string it can be either a `TRecipientStatus` or `TDocumentStatus` value.\n */\n@Component({\n  tag: 'verdocs-status-indicator',\n  styleUrl: 'verdocs-status-indicator.scss',\n})\nexport class VerdocsStatusIndicator {\n  private summaryComponent?: HTMLButtonElement;\n  private detailPanel?: HTMLDivElement;\n  private popper?: Instance;\n\n  /**\n   * The size (height) of the indicator. The small variant is suitable for use in densely populated components such as table rows.\n   */\n  @Prop() size: 'small' | 'normal' = 'normal';\n\n  /**\n   * The theme to use for diplay.\n   */\n  @Prop() theme?: 'dark' | 'light' = 'light';\n\n  /**\n   * The status to display.\n   */\n  // The accepted override is here because we don't actually have an official status for that yet, but we plan to add it\n  @Prop() status?: TEnvelopeStatus | TRecipientStatus | 'accepted';\n\n  /**\n   * The document to display status for. Ignored if `status` is set directly.\n   */\n  @Prop() envelope?: IEnvelope;\n\n  @State() isOpen: boolean;\n\n  @State() recipientStatusIcons = [];\n\n  @State() containerId = `verdocs-status-indicator-${Math.random().toString(36).substring(2, 11)}`;\n\n  componentDidLoad() {\n    this.popper = createPopper(this.summaryComponent, this.detailPanel, {placement: 'bottom-start', modifiers: [{name: 'offset', options: {offset: [0, 10]}}]});\n\n    if (this.envelope?.recipients) {\n      const recipientsAtLevel = [];\n      this.envelope.recipients.forEach(recipient => {\n        const level = recipient.sequence - 1;\n        recipientsAtLevel[level] ||= [];\n        const id = `r-${level}-${recipientsAtLevel[level].length}`;\n        recipientsAtLevel[level].push({...recipient, id});\n      });\n\n      const levelCount = Object.keys(recipientsAtLevel).length;\n\n      const canvasHeight = levelCount * ENTRY_HEIGHT + (levelCount + 1) * ENTRY_PADDING;\n      let canvasWidth = 0;\n      Object.values(recipientsAtLevel).forEach(recipients => {\n        let minW = recipients.length * ENTRY_WIDTH + (recipients.length + 1) * ENTRY_PADDING;\n        if (minW > canvasWidth) {\n          canvasWidth = minW;\n        }\n      });\n\n      const entities = [];\n      const lines = [];\n      const statusIcons = [];\n\n      let y = ENTRY_PADDING;\n      Object.entries(recipientsAtLevel).forEach(([level, recipients]) => {\n        // To center align here, we figure out how many items are per line and how much leftover space there would be if we just\n        // drew them left-to-right. We add half of that as a left offset.\n        const renderedItemsWidth = recipients.length * (ENTRY_WIDTH + ENTRY_PADDING);\n        const leftoverSpace = canvasWidth - renderedItemsWidth;\n        const leftOffset = ENTRY_PADDING / 2 + leftoverSpace / 2;\n\n        recipients.forEach((recipient, index) => {\n          const [first, last] = (recipient.full_name || 'Unknown').toUpperCase().split(' ');\n          const name = `${first} ${last?.substring(0, 1)}`;\n          const entity = {\n            id: recipient.id,\n            text: name,\n            icon: this.getStatusIcon(recipient.status),\n            x: index * (ENTRY_WIDTH + ENTRY_PADDING) + leftOffset,\n            y,\n            width: ENTRY_WIDTH,\n            height: ENTRY_HEIGHT,\n            color: this.getStatusColor(recipient.status),\n            radius: 8,\n          };\n          entities.push(entity);\n\n          statusIcons.push({\n            icon: this.getStatusIcon(recipient.status),\n            x: index * (ENTRY_WIDTH + ENTRY_PADDING) + leftOffset + (ENTRY_WIDTH - 32),\n            y: y + ENTRY_HEIGHT / 2 - 13,\n          });\n\n          recipientsAtLevel[+level - 1]?.forEach(prevRecip => {\n            const line = {\n              id: `line-${prevRecip.id}-${entity.id}`,\n              from: {element: prevRecip.id, point: 'bottom'},\n              to: {element: entity.id, point: 'top'},\n              color: this.getStatusColor(recipient.status),\n            };\n            lines.push(line);\n          });\n        });\n\n        y += ENTRY_HEIGHT + ENTRY_PADDING;\n      });\n\n      this.recipientStatusIcons = statusIcons;\n\n      const diagram = RecipientFlow();\n      diagram.initalize(`#${this.containerId}`, canvasWidth, canvasHeight);\n      diagram.update({entities, lines});\n    }\n  }\n\n  // See https://popper.js.org/docs/v2/tutorial/\n  // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists\n  showDropdown() {\n    this.isOpen = true;\n    this.detailPanel.setAttribute('data-show', '');\n    this.detailPanel.removeAttribute('aria-hidden');\n\n    this.popper?.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, {name: 'eventListeners', enabled: true}],\n    }));\n\n    this.popper?.update();\n  }\n\n  handleHideDropdown(e: any) {\n    if (e?.target?.localName === 'button' && e?.target?.className === 'arrow') {\n      // This event is fired when a menu element is clicked because the button \"loses focus\" then too\n      return;\n    }\n\n    this.hide();\n  }\n\n  toggleDropdown() {\n    if (this.isOpen) {\n      this.hide();\n    } else {\n      this.showDropdown();\n    }\n  }\n\n  hide() {\n    this.isOpen = false;\n    this.detailPanel.removeAttribute('data-show');\n    this.detailPanel.setAttribute('aria-hidden', 'true');\n    this.popper?.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, {name: 'eventListeners', enabled: false}],\n    }));\n  }\n\n  getStatusColor(status: string) {\n    switch (status) {\n      case 'invited':\n      case 'opened':\n      case 'accepted':\n      case 'signed':\n        return '#654dcb';\n      case 'some-signed':\n      case 'submitted':\n      case 'complete':\n        return '#55bc81';\n      case 'declined':\n        return '#ff0000';\n      case 'canceled':\n      case 'in progress':\n      case 'pending':\n      default:\n        return '#999999';\n    }\n  }\n\n  getStatusIcon(status: string) {\n    switch (status) {\n      case 'accepted':\n        return this.theme === 'light' ? AcceptedLight : AcceptedDark;\n      case 'complete':\n        return this.theme === 'light' ? CompletedLight : CompletedDark;\n      case 'in progress':\n        return this.theme === 'light' ? InProgressLight : InProgressDark;\n      case 'canceled':\n        return this.theme === 'light' ? CanceledLight : CanceledDark;\n      case 'declined':\n        return this.theme === 'light' ? DeclinedLight : DeclinedDark;\n      case 'invited':\n        return this.theme === 'light' ? InProgressLight : InProgressDark;\n      case 'opened':\n        return this.theme === 'light' ? OpenedLight : OpenedDark;\n      case 'signed':\n        return this.theme === 'light' ? SignedLight : SignedDark;\n      case 'submitted':\n        return this.theme === 'light' ? SubmittedLight : SubmittedDark;\n      case 'some-signed':\n        return this.theme === 'light' ? SomeSignedLight : SomeSignedDark;\n      default:\n      case 'pending':\n        return this.theme === 'light' ? PendingLight : PendingDark;\n    }\n  }\n\n  getStatusMessage(status: string) {\n    switch (status) {\n      case 'accepted':\n        return 'Accepted';\n      case 'complete':\n        return 'Completed';\n      case 'in progress':\n        return 'In Progress';\n      case 'canceled':\n        return 'Cancelled';\n      case 'declined':\n        return 'Declined';\n      case 'invited':\n        return 'Invited';\n      case 'opened':\n        return 'Opened';\n      case 'signed':\n        return 'Signed';\n      case 'submitted':\n        return 'Submitted';\n      case 'some-signed':\n        return 'Partly Signed';\n      default:\n      case 'pending':\n        return 'Pending';\n    }\n  }\n\n  render() {\n    // The extra fallback for accepted is to future proof for when we add that.\n    let status: string = this.status || this.envelope?.status || 'pending' || 'accepted';\n    if (!this.status && this.envelope?.recipients) {\n      const submittedRecipients = this.envelope.recipients.filter(r => r.status === 'submitted');\n      if (submittedRecipients.length > 0 && submittedRecipients.length !== this.envelope.recipients.length) {\n        status = 'some-signed';\n      }\n    }\n\n    const icon = this.getStatusIcon(status);\n    const statusMessage = this.getStatusMessage(status);\n\n    return (\n      <Host\n        ref={el => (this.summaryComponent = el as HTMLButtonElement)}\n        class={`${this.theme} ${this.size} ${this.envelope ? 'has-document' : ''}`}\n        aria-label=\"Click to View Details\"\n        onClick={e => {\n          e.stopPropagation();\n          e.preventDefault();\n          this.envelope && this.toggleDropdown();\n        }}\n        onBlur={e => this.envelope && this.handleHideDropdown(e)}\n      >\n        <span class=\"icon\" innerHTML={icon} />\n        <span class=\"content\">{statusMessage}</span>\n\n        <div class=\"detail-panel\" ref={el => (this.detailPanel = el as HTMLDivElement)}>\n          <div id={`${this.containerId}`} />\n          {this.recipientStatusIcons.map(icon => (\n            <span innerHTML={icon.icon} style={{position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px`}} />\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -66,5 +66,5 @@ export default {
     },
   },
 };
-export const StatusIndicator = ({ theme, size, status, document }) => html `<verdocs-status-indicator .theme="${theme}" .size="${size}" .status="${status}" .document="${document}" />`;
+export const StatusIndicator = ({ theme, size, status, envelope }) => html `<verdocs-status-indicator .theme="${theme}" .size="${size}" .status="${status}" .envelope="${envelope}" />`;
 //# sourceMappingURL=verdocs-status-indicator.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"verdocs-status-indicator.stories.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-status-indicator/verdocs-status-indicator.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAE9B,MAAM,cAAc,GAAG;EACrB,gGAAgG;EAChG,EAAE,EAAE,MAAM;EACV,MAAM,EAAE,UAAU;EAClB,UAAU,EAAE;IACV,EAAC,SAAS,EAAE,cAAc,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAC;IACtG,EAAC,SAAS,EAAE,aAAa,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAC;IACtG,EAAC,SAAS,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAC;IACpG,EAAC,SAAS,EAAE,gBAAgB,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAC;GAC3G;CACF,CAAC;AAEF,eAAe;EACb,KAAK,EAAE,2BAA2B;EAClC,SAAS,EAAE,0BAA0B;EACrC,IAAI,EAAE;IACJ,QAAQ,EAAE,CAAC;IACX,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,QAAQ;GACf;EACD,QAAQ,EAAE;IACR,QAAQ,EAAE;MACR,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,OAAO,EAAE,EAAC,CAAC,EAAE,cAAc,EAAE,CAAC,EAAE,IAAI,EAAC;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE;UACN,CAAC,EAAE,iBAAiB;UACpB,CAAC,EAAE,SAAS;SACb;OACF;KACF;IACD,MAAM,EAAE;MACN,YAAY,EAAE,EAAE;MAChB,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,CAAC;MAClI,OAAO,EAAE;QACP,CAAC,EAAE,IAAI;QACP,UAAU,EAAE,UAAU;QACtB,SAAS,EAAE,SAAS;QACpB,aAAa,EAAE,aAAa;QAC5B,UAAU,EAAE,UAAU;QACtB,UAAU,EAAE,UAAU;QACtB,SAAS,EAAE,SAAS;QACpB,QAAQ,EAAE,QAAQ;QAClB,UAAU,EAAE,UAAU;QACtB,QAAQ,EAAE,QAAQ;QAClB,WAAW,EAAE,WAAW;OACzB;MACD,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE;UACN,CAAC,EAAE,SAAS;UACZ,UAAU,EAAE,UAAU;UACtB,SAAS,EAAE,SAAS;UACpB,aAAa,EAAE,aAAa;UAC5B,UAAU,EAAE,UAAU;UACtB,UAAU,EAAE,UAAU;UACtB,SAAS,EAAE,SAAS;UACpB,QAAQ,EAAE,QAAQ;UAClB,UAAU,EAAE,UAAU;UACtB,QAAQ,EAAE,QAAQ;UAClB,WAAW,EAAE,WAAW;SACzB;OACF;KACF;GACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAC,EAAE,EAAE,CACjE,IAAI,CAAA,qCAAqC,KAAK,YAAY,IAAI,cAAc,MAAM,gBAAgB,QAAQ,MAAM,CAAC","sourcesContent":["import {Meta} from '@storybook/web-components';\nimport {html} from 'lit-html';\n\nconst SampleDocument = {\n  // Skipping non-essential fields 9that the widget doesn't care about). But this is an IDocument.\n  id: '1234',\n  status: 'complete',\n  recipients: [\n    {role_name: 'Tax Preparer', status: 'submitted', full_name: 'Bill Board', sequence: 1, type: 'signer'},\n    {role_name: 'Recipient 1', status: 'submitted', full_name: 'Ante Bellum', sequence: 2, type: 'signer'},\n    {role_name: 'Recipient 2', status: 'opened', full_name: 'Sarah Bellum', sequence: 2, type: 'signer'},\n    {role_name: 'Office Manager', status: 'pending', full_name: 'Paige Turner', sequence: 3, type: 'approver'},\n  ],\n};\n\nexport default {\n  title: 'Controls/Status Indicator',\n  component: 'verdocs-status-indicator',\n  args: {\n    document: 0,\n    status: 'complete',\n    theme: 'light',\n    size: 'normal',\n  },\n  argTypes: {\n    document: {\n      options: [0, 1],\n      mapping: {0: SampleDocument, 1: null},\n      control: {\n        type: 'select',\n        labels: {\n          0: 'Sample Document',\n          1: 'Not Set',\n        },\n      },\n    },\n    status: {\n      defaultValue: '',\n      options: [0, 'complete', 'pending', 'in progress', 'declined', 'canceled', 'invited', 'opened', 'accepted', 'signed', 'submitted'],\n      mapping: {\n        0: null,\n        'complete': 'complete',\n        'pending': 'pending',\n        'in progress': 'in progress',\n        'declined': 'declined',\n        'canceled': 'canceled',\n        'invited': 'invited',\n        'opened': 'opened',\n        'accepted': 'accepted',\n        'signed': 'signed',\n        'submitted': 'submitted',\n      },\n      control: {\n        type: 'select',\n        labels: {\n          0: 'Not Set',\n          'complete': 'Complete',\n          'pending': 'Pending',\n          'in progress': 'In Progress',\n          'declined': 'Declined',\n          'canceled': 'Canceled',\n          'invited': 'Invited',\n          'opened': 'Opened',\n          'accepted': 'Accepted',\n          'signed': 'Signed',\n          'submitted': 'Submitted',\n        },\n      },\n    },\n  },\n} as Meta;\n\nexport const StatusIndicator = ({theme, size, status, document}) =>\n  html`<verdocs-status-indicator .theme=\"${theme}\" .size=\"${size}\" .status=\"${status}\" .document=\"${document}\" />`;\n"]}
+{"version":3,"file":"verdocs-status-indicator.stories.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-status-indicator/verdocs-status-indicator.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAE9B,MAAM,cAAc,GAAG;EACrB,gGAAgG;EAChG,EAAE,EAAE,MAAM;EACV,MAAM,EAAE,UAAU;EAClB,UAAU,EAAE;IACV,EAAC,SAAS,EAAE,cAAc,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAC;IACtG,EAAC,SAAS,EAAE,aAAa,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAC;IACtG,EAAC,SAAS,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAC;IACpG,EAAC,SAAS,EAAE,gBAAgB,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAC;GAC3G;CACF,CAAC;AAEF,eAAe;EACb,KAAK,EAAE,2BAA2B;EAClC,SAAS,EAAE,0BAA0B;EACrC,IAAI,EAAE;IACJ,QAAQ,EAAE,CAAC;IACX,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,QAAQ;GACf;EACD,QAAQ,EAAE;IACR,QAAQ,EAAE;MACR,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,OAAO,EAAE,EAAC,CAAC,EAAE,cAAc,EAAE,CAAC,EAAE,IAAI,EAAC;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE;UACN,CAAC,EAAE,iBAAiB;UACpB,CAAC,EAAE,SAAS;SACb;OACF;KACF;IACD,MAAM,EAAE;MACN,YAAY,EAAE,EAAE;MAChB,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,CAAC;MAClI,OAAO,EAAE;QACP,CAAC,EAAE,IAAI;QACP,UAAU,EAAE,UAAU;QACtB,SAAS,EAAE,SAAS;QACpB,aAAa,EAAE,aAAa;QAC5B,UAAU,EAAE,UAAU;QACtB,UAAU,EAAE,UAAU;QACtB,SAAS,EAAE,SAAS;QACpB,QAAQ,EAAE,QAAQ;QAClB,UAAU,EAAE,UAAU;QACtB,QAAQ,EAAE,QAAQ;QAClB,WAAW,EAAE,WAAW;OACzB;MACD,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE;UACN,CAAC,EAAE,SAAS;UACZ,UAAU,EAAE,UAAU;UACtB,SAAS,EAAE,SAAS;UACpB,aAAa,EAAE,aAAa;UAC5B,UAAU,EAAE,UAAU;UACtB,UAAU,EAAE,UAAU;UACtB,SAAS,EAAE,SAAS;UACpB,QAAQ,EAAE,QAAQ;UAClB,UAAU,EAAE,UAAU;UACtB,QAAQ,EAAE,QAAQ;UAClB,WAAW,EAAE,WAAW;SACzB;OACF;KACF;GACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAC,EAAE,EAAE,CACjE,IAAI,CAAA,qCAAqC,KAAK,YAAY,IAAI,cAAc,MAAM,gBAAgB,QAAQ,MAAM,CAAC","sourcesContent":["import {Meta} from '@storybook/web-components';\nimport {html} from 'lit-html';\n\nconst SampleDocument = {\n  // Skipping non-essential fields 9that the widget doesn't care about). But this is an IDocument.\n  id: '1234',\n  status: 'complete',\n  recipients: [\n    {role_name: 'Tax Preparer', status: 'submitted', full_name: 'Bill Board', sequence: 1, type: 'signer'},\n    {role_name: 'Recipient 1', status: 'submitted', full_name: 'Ante Bellum', sequence: 2, type: 'signer'},\n    {role_name: 'Recipient 2', status: 'opened', full_name: 'Sarah Bellum', sequence: 2, type: 'signer'},\n    {role_name: 'Office Manager', status: 'pending', full_name: 'Paige Turner', sequence: 3, type: 'approver'},\n  ],\n};\n\nexport default {\n  title: 'Controls/Status Indicator',\n  component: 'verdocs-status-indicator',\n  args: {\n    document: 0,\n    status: 'complete',\n    theme: 'light',\n    size: 'normal',\n  },\n  argTypes: {\n    document: {\n      options: [0, 1],\n      mapping: {0: SampleDocument, 1: null},\n      control: {\n        type: 'select',\n        labels: {\n          0: 'Sample Document',\n          1: 'Not Set',\n        },\n      },\n    },\n    status: {\n      defaultValue: '',\n      options: [0, 'complete', 'pending', 'in progress', 'declined', 'canceled', 'invited', 'opened', 'accepted', 'signed', 'submitted'],\n      mapping: {\n        0: null,\n        'complete': 'complete',\n        'pending': 'pending',\n        'in progress': 'in progress',\n        'declined': 'declined',\n        'canceled': 'canceled',\n        'invited': 'invited',\n        'opened': 'opened',\n        'accepted': 'accepted',\n        'signed': 'signed',\n        'submitted': 'submitted',\n      },\n      control: {\n        type: 'select',\n        labels: {\n          0: 'Not Set',\n          'complete': 'Complete',\n          'pending': 'Pending',\n          'in progress': 'In Progress',\n          'declined': 'Declined',\n          'canceled': 'Canceled',\n          'invited': 'Invited',\n          'opened': 'Opened',\n          'accepted': 'Accepted',\n          'signed': 'Signed',\n          'submitted': 'Submitted',\n        },\n      },\n    },\n  },\n} as Meta;\n\nexport const StatusIndicator = ({theme, size, status, envelope}) =>\n  html`<verdocs-status-indicator .theme=\"${theme}\" .size=\"${size}\" .status=\"${status}\" .envelope=\"${envelope}\" />`;\n"]}

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

@@ -29,4 +29,7 @@ verdocs-text-input .input-label {
   font-weight: 700;
   font-size: 14px;
   margin: 0 0 4px 0;
+}
+verdocs-text-input [data-lastpass-icon-root] {
+  display: none !important;
 }

package/dist/collection/components/controls/verdocs-toggle-button/verdocs-toggle-button.css

@@ -3,6 +3,7 @@ verdocs-toggle-button {
 }
 verdocs-toggle-button button {
   border: none;
+  outline: none;
   cursor: pointer;
   align-items: center;
   display: inline-flex;
@@ -22,6 +23,10 @@ verdocs-toggle-button button.active {
 verdocs-toggle-button button.active svg {
   fill: #f5f5fa;
 }
+verdocs-toggle-button button:focus {
+  border: none;
+  outline: none;
+}
 verdocs-toggle-button.size-normal button {
   width: 40px;
   height: 40px;