@verdocs/web-sdk 6.10.7 → 6.13.0

package/dist/esm/verdocs-preview_6.entry.js

@@ -1,12 +1,13 @@
 import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment, g as getElement } from './index-CjTHbolG.js';
 import { i as interact } from './interact.min-Bf1WXbdg.js';
-import { VerdocsEndpoint, getTemplate, integerSequence, getOrganizationContacts, isValidEmail, createEnvelope, formatFullName, getRGBA, createTemplateDocument, deleteTemplateDocument, updateField, createField, updateTemplateRole, createTemplateRole } from '@verdocs/js-sdk';
+import { VerdocsEndpoint, getTemplate, integerSequence, getBrands, getOrganization, getOrganizationContacts, isValidEmail, createEnvelope, getRGBA, formatFullName, createTemplateDocument, deleteTemplateDocument, updateField, createField, updateTemplateRole, createTemplateRole } from '@verdocs/js-sdk';
 import { a as renderDocumentField, g as getFieldId, h as updateCssTransform, i as removeCssTransform, j as setControlStyles, d as defaultHeight, k as defaultWidth } from './utils-Bh3zb1Xs.js';
 import { S as SDKError } from './errors-C1sRVZWv.js';
 import { S as Store } from './Datastore-C7hFgM52.js';
-import { D as DefaultEndpoint } from './Environment-b2u0_wDk.js';
+import { D as DefaultEndpoint, g as getWebAppUrl } from './Environment-Cq60Emo_.js';
+import { u as updateScrollFade } from './ScrollFade-7UEjZarN.js';
 import { V as VerdocsToast } from './Toast-D97GxsI-.js';
-import { a as DocIcon, P as PngIcon, J as JpgIcon, b as PdfIcon, F as FileIcon, c as PageCountIcon, T as TrashIcon, D as DocumentPageIcon } from './Icons-BU5rnXp2.js';
+import { a as DocIcon, P as PngIcon, J as JpgIcon, b as PdfIcon, F as FileIcon, c as PageCountIcon, T as TrashIcon, D as DocumentPageIcon } from './Icons-DobS6Y7w.js';
 import './_commonjsHelpers-B85MJLTf.js';
 import './index-BglCURB-.js';
 import './Types-CIxfEdV7.js';
@@ -125,12 +126,28 @@ VerdocsPreview.style = verdocsPreviewCss();
 const getRoleNames = (template) => ((template === null || template === void 0 ? void 0 : template.roles) || []).map(role => role.name);
 const getRoleIndex = (template, role_name) => Math.max(getRoleNames(template).findIndex(name => name === role_name), 0);
 
-const verdocsSendCss = () => `verdocs-send{padding:10px;position:relative;background:#ffffff;-ms-flex-direction:column;flex-direction:column;font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif)}verdocs-send.sendable{display:-ms-flexbox;display:flex}verdocs-send .recipients{position:relative}verdocs-send .left-line{top:32px;left:20px;z-index:1;width:12px;bottom:30px;position:absolute;background:#ffffff;border-left:3px dotted #9b9b9b}verdocs-send .level{display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin-left:50px;position:relative;-ms-flex-direction:row;flex-direction:row;padding:8px 0 4px 0;border-bottom:1px solid rgba(151, 151, 151, 0.2666666667)}verdocs-send .level .level-icon{top:14px;z-index:2;left:-40px;width:24px;height:24px;position:absolute;background:#ffffff}verdocs-send .level .level-icon svg{fill:rgba(0, 0, 0, 0.537254902)}verdocs-send .level .recipient{height:30px;display:-ms-flexbox;display:flex;-ms-flex:0 0 30px;flex:0 0 30px;color:#000000;cursor:pointer;font-size:14px;-ms-flex-align:center;align-items:center;border-radius:30px;-ms-flex-direction:row;flex-direction:row;background:#dddddd;white-space:nowrap;border:2px solid #dddddd;padding:2px 10px 2px 14px}verdocs-send .level .recipient .icon{width:22px;height:22px;-ms-flex:0 0 22px;flex:0 0 22px;margin:0 0 0 10px}verdocs-send .level .recipient .icon svg{width:22px;height:22px;fill:#333333;outline:none}verdocs-send .level .complete{-ms-flex:1;flex:1;height:30px;display:-ms-flexbox;display:flex;color:#000000;font-size:14px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:3px 10px 3px 2px}verdocs-send .buttons{display:-ms-flexbox;display:flex;margin-top:10px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}verdocs-send .buttons .error-message{width:100%;color:#cc0000;font-size:13px;margin-bottom:10px}verdocs-send verdocs-contact-picker{left:0;top:41px;z-index:10;position:absolute;border:1px solid #dddddd;-webkit-box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1);box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1)}`;
+const verdocsSendCss = () => `verdocs-send{--send-ink:var(--verdocs-body-color, #111827);--send-ink-2:#374151;--send-muted:#6b7280;--send-faint:#9ca3af;--send-rule:#e5e7eb;--send-control-border:#d1d5db;--send-accent:var(--verdocs-link-color, #4c56cb);--send-accent-tint:#f4f5fc;--send-accent-tint-2:#e6e7f8;--send-warning-bg:#fffbeb;--send-warning-border:#fde68a;--send-warning-icon:#d97706;--send-warning-text:#78350f;--send-radius:var(--verdocs-dialog-radius, 8px);--send-min-height:480px;--send-max-width:480px;display:none;position:relative;overflow:hidden;width:100%;max-width:var(--verdocs-send-max-width, var(--send-max-width));-webkit-box-sizing:border-box;box-sizing:border-box;background:#ffffff;color:var(--send-ink);font-size:14px;border-radius:var(--send-radius);border:1px solid var(--send-rule);font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif)}verdocs-send *{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-send.sendable{display:block}verdocs-send .track{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:var(--send-min-height);-webkit-transition:-webkit-transform 220ms ease-out;transition:-webkit-transform 220ms ease-out;transition:transform 220ms ease-out;transition:transform 220ms ease-out, -webkit-transform 220ms ease-out}verdocs-send.detail-open .track{-webkit-transform:translateX(-100%);transform:translateX(-100%)}@media (prefers-reduced-motion: reduce){verdocs-send .track{-webkit-transition:none;transition:none}}verdocs-send .pane{padding:16px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .main-pane{-ms-flex:1;flex:1}verdocs-send .detail-pane{position:absolute;top:0;left:100%;bottom:0;width:100%;overflow:hidden}verdocs-send .detail{-ms-flex:1;flex:1;min-height:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .detail-body-wrap{position:relative;-ms-flex:1;flex:1;min-height:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .detail-body{-ms-flex:1;flex:1;min-height:0;overflow-y:auto}verdocs-send .scroll-fade{position:absolute;left:0;right:0;bottom:0;height:36px;opacity:0;pointer-events:none;-webkit-transition:opacity 150ms ease-out;transition:opacity 150ms ease-out;background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#ffffff));background:linear-gradient(rgba(255, 255, 255, 0), #ffffff)}verdocs-send .scrollable:not(.at-end)>.scroll-fade{opacity:1}verdocs-send .recipient-detail verdocs-contact-picker{-ms-flex:1;flex:1;min-height:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .section-title{font-size:12px;font-weight:600;color:var(--send-ink-2);margin:0 0 6px 0}verdocs-send .delivery-title{margin-top:16px}verdocs-send .step{font-size:11px;color:var(--send-muted);padding:10px 0 4px 0}verdocs-send .recipient,verdocs-send .kv{all:unset;display:-ms-flexbox;display:flex;width:100%;cursor:pointer;-ms-flex-align:center;align-items:center;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;border-top:1px solid var(--send-rule);color:var(--send-ink);font-family:inherit}verdocs-send .recipient:focus-visible,verdocs-send .kv:focus-visible{outline:2px solid var(--send-accent);outline-offset:-2px;border-radius:4px}verdocs-send .recipient .chevron,verdocs-send .kv .chevron{-ms-flex:0 0 16px;flex:0 0 16px;width:16px;height:16px;color:var(--send-faint)}verdocs-send .recipient .chevron svg,verdocs-send .kv .chevron svg{width:16px;height:16px;display:block}verdocs-send .recipient{padding:8px 6px 8px 0}verdocs-send .recipient:last-child{border-bottom:1px solid var(--send-rule)}verdocs-send .recipient .who{-ms-flex:1;flex:1;min-width:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .recipient .role-name{font-size:13px;font-weight:600}verdocs-send .recipient .who-detail{font-size:12px;color:var(--send-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-send .recipient .who-detail.configure{color:var(--send-accent);font-weight:500}verdocs-send .recipient .options{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:4px;margin-top:3px}verdocs-send .recipient .pill{height:18px;padding:0 6px;border-radius:999px;font-size:10px;font-weight:500;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;background:var(--send-accent-tint);color:var(--send-ink-2)}verdocs-send .role-dot{-ms-flex:0 0 10px;flex:0 0 10px;width:10px;height:10px;border-radius:50%;border:1px solid rgba(0, 0, 0, 0.1)}verdocs-send .kv{height:40px;padding:0 6px 0 0;font-size:13px}verdocs-send .kv:last-child{border-bottom:1px solid var(--send-rule)}verdocs-send .kv:disabled{cursor:default;color:var(--send-muted)}verdocs-send .kv .key{-ms-flex:0 0 84px;flex:0 0 84px;color:var(--send-muted)}verdocs-send .kv .value{-ms-flex:1;flex:1;min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-send .kv .value small{font-size:inherit;font-weight:400;color:var(--send-muted)}verdocs-send .kv .value.off{color:var(--send-warning-icon)}verdocs-send .main-spacer,verdocs-send .detail-spacer{-ms-flex:1;flex:1}verdocs-send .buttons{display:-ms-flexbox;display:flex;margin-top:14px;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}verdocs-send .buttons .error-message{width:100%;color:#cc0000;font-size:13px;margin-bottom:10px}verdocs-send .detail-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin:-2px 0 14px 0}verdocs-send .detail-header .back{all:unset;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;cursor:pointer;font-size:13px;font-weight:500;color:var(--send-accent);font-family:inherit;-ms-flex:0 0 52px;flex:0 0 52px}verdocs-send .detail-header .back .icon,verdocs-send .detail-header .back .icon svg{width:16px;height:16px;display:block}verdocs-send .detail-header .back:focus-visible{outline:2px solid var(--send-accent);outline-offset:2px;border-radius:4px}verdocs-send .detail-header .detail-title{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;font-size:14px;font-weight:600;text-align:center}verdocs-send .detail-header .detail-header-spacer{-ms-flex:0 0 52px;flex:0 0 52px}verdocs-send .detail-footer{margin-top:10px;padding-top:12px;border-top:1px solid var(--send-rule)}verdocs-send .detail-footer verdocs-button,verdocs-send .detail-footer verdocs-button button{width:100%}verdocs-send .hint{font-size:12px;line-height:1.5;color:var(--send-muted);margin:10px 0 0 0}verdocs-send .option-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .option{all:unset;display:-ms-flexbox;display:flex;width:100%;cursor:pointer;-ms-flex-align:center;align-items:center;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;padding:10px 0;font-size:13px;font-family:inherit;color:var(--send-ink);border-top:1px solid var(--send-rule)}verdocs-send .option:first-child{border-top:0}verdocs-send .option:focus-visible{outline:2px solid var(--send-accent);outline-offset:-2px;border-radius:4px}verdocs-send .option .radio{-ms-flex:0 0 16px;flex:0 0 16px;width:16px;height:16px;border-radius:50%;border:1px solid var(--send-control-border);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-send .option.selected .radio{border-color:var(--send-accent)}verdocs-send .option.selected .radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--send-accent)}verdocs-send .option .swatch{-ms-flex:0 0 22px;flex:0 0 22px;width:22px;height:22px;border-radius:5px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:9px;font-weight:700;color:#ffffff;overflow:hidden}verdocs-send .option .swatch.logo{background:#ffffff;border:1px solid var(--send-rule)}verdocs-send .option .swatch img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;display:block}verdocs-send .option .option-label{-ms-flex:1;flex:1;min-width:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .option .option-label small{font-size:11px;color:var(--send-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-send .option-divider{height:0;margin:2px 0;border-top:1px solid var(--send-control-border)}verdocs-send .option-divider+.option{border-top:0}verdocs-send .hint a{color:var(--send-accent);font-weight:500;text-decoration:none;border-bottom:1px solid var(--send-accent-tint-2)}verdocs-send .hint a .icon,verdocs-send .hint a .icon svg{width:11px;height:11px;display:inline-block;vertical-align:-1px;margin-left:2px}verdocs-send .expires-field{position:relative}verdocs-send .expires-field input{width:100%;height:36px;padding:0 52px 0 10px;font-size:14px;font-family:inherit;color:var(--send-ink);background:#ffffff;border:1px solid var(--send-control-border);border-radius:6px;outline:none}verdocs-send .expires-field input:focus{border-color:var(--send-accent);-webkit-box-shadow:0 0 0 2px var(--send-accent-tint-2);box-shadow:0 0 0 2px var(--send-accent-tint-2)}verdocs-send .expires-field input::-webkit-input-placeholder{color:var(--send-faint)}verdocs-send .expires-field input::-moz-placeholder{color:var(--send-faint)}verdocs-send .expires-field input:-ms-input-placeholder{color:var(--send-faint)}verdocs-send .expires-field input::-ms-input-placeholder{color:var(--send-faint)}verdocs-send .expires-field input::placeholder{color:var(--send-faint)}verdocs-send .expires-field .suffix{position:absolute;right:10px;top:0;height:36px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:13px;color:var(--send-muted);pointer-events:none}verdocs-send .warning{display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin-top:12px;padding:10px 12px;font-size:12px;line-height:1.5;border-radius:6px;color:var(--send-warning-text);background:var(--send-warning-bg);border:1px solid var(--send-warning-border)}verdocs-send .warning>.icon{-ms-flex:0 0 18px;flex:0 0 18px;width:18px;height:18px;margin-top:1px;color:var(--send-warning-icon)}verdocs-send .warning>.icon svg{width:18px;height:18px;display:block}verdocs-send .warning a{color:var(--send-accent);font-weight:500;text-decoration:none;border-bottom:1px solid var(--send-accent-tint-2)}verdocs-send .warning a .icon,verdocs-send .warning a .icon svg{width:11px;height:11px;display:inline-block;vertical-align:-1px;margin-left:2px}verdocs-send verdocs-checkbox{display:block;padding:4px 0;font-size:13px}`;
 
-const editIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>';
-const startIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z"></path></svg>';
-const stepIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path></svg>';
-const doneIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z"></path></svg>';
+const chevronRightIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 6 6 6-6 6"/></svg>';
+const chevronLeftIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>';
+const warningIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4M12 17h.01"/></svg>';
+const externalLinkIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M10 14 21 3M21 14v7H3V3h7"/></svg>';
+const VERDOCS_LOGO_URL = 'https://app.verdocs.com/assets/blue-logo.svg';
+// Swipe mechanics for mobile users in detail views
+const SWIPE_START_FRACTION = 0.25;
+const SWIPE_MIN_DISTANCE = 60;
+const SWIPE_MAX_DURATION = 500;
+// Expiration controls. The API is less strict, but Web users prefer a simpler setup so we just range-limit it 1..120 here.
+const MIN_EXPIRY_DAYS = 1;
+const MAX_EXPIRY_DAYS = 120;
+const DEFAULT_EXPIRY_DAYS = 120;
+const AUTH_METHOD_LABELS = {
+    email: 'Email',
+    passcode: 'Passcode',
+    sms: 'SMS',
+    kba: 'KBA',
+    id: 'ID check',
+};
 const VerdocsSend = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -160,10 +177,22 @@ const VerdocsSend = class {
          * the embed is shown in a non-wizard flow with its own navigation for the user to exit.
          */
         this.showCancel = true;
+        /**
+         * Preselect a brand by key, overriding the organization default.
+         */
+        this.brandKey = '';
+        this.swipeStart = null;
+        this.swallowNextClick = false;
+        this.loadedOrganizationId = '';
         this.containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;
-        this.showPickerForId = '';
+        this.view = 'main';
+        this.editingRoleId = '';
         this.sessionContacts = [];
         this.sending = false;
+        this.brands = [];
+        this.organization = null;
+        this.expiresInDays = '';
+        this.noContact = false;
         this.rolesCompleted = {};
         this.loading = true;
         this.template = null;
@@ -171,6 +200,22 @@ const VerdocsSend = class {
     disconnectedCallback() {
         this.unlistenToTemplate();
     }
+    componentDidLoad() {
+        this.el.addEventListener('click', e => {
+            if (this.swallowNextClick) {
+                this.swallowNextClick = false;
+                e.stopPropagation();
+                e.preventDefault();
+            }
+        }, true);
+    }
+    // Make off-canvas controls leave the tab order
+    componentDidRender() {
+        var _a, _b;
+        updateScrollFade(this.el.querySelector('.detail-body'));
+        (_a = this.el.querySelector('.main-pane')) === null || _a === void 0 ? void 0 : _a.toggleAttribute('inert', this.view !== 'main');
+        (_b = this.el.querySelector('.detail-pane')) === null || _b === void 0 ? void 0 : _b.toggleAttribute('inert', this.view === 'main');
+    }
     async listenToTemplate() {
         console.log('[SEND] Loading template', this.templateId);
         this.unlistenToTemplate();
@@ -179,9 +224,53 @@ const VerdocsSend = class {
             this.template = template;
             this.loading = false;
             this.rolesCompleted = {};
+            this.view = 'main';
+            this.editingRoleId = '';
             this.recomputeRolesCompleted();
+            this.loadBrands();
         });
     }
+    loadBrands() {
+        var _a;
+        const organizationId = (_a = this.template) === null || _a === void 0 ? void 0 : _a.organization_id;
+        if (!organizationId || organizationId === this.loadedOrganizationId) {
+            return;
+        }
+        const changedOrganization = !!this.loadedOrganizationId;
+        this.loadedOrganizationId = organizationId;
+        this.brands = [];
+        this.organization = null;
+        if (changedOrganization) {
+            this.brandKey = '';
+        }
+        const stillCurrent = () => { var _a; return ((_a = this.template) === null || _a === void 0 ? void 0 : _a.organization_id) === organizationId; };
+        getBrands(this.endpoint, organizationId)
+            .then(brands => {
+            if (stillCurrent()) {
+                this.brands = brands || [];
+            }
+        })
+            .catch(e => console.log('[SEND] Unable to load brands', e));
+        getOrganization(this.endpoint, organizationId)
+            .then(organization => {
+            if (stillCurrent()) {
+                this.organization = organization;
+            }
+        })
+            .catch(e => console.log('[SEND] Unable to load organization', e));
+    }
+    handleExpiryInput(e) {
+        const digits = (e.target.value || '').replace(/[^0-9]/g, '');
+        this.expiresInDays = digits ? String(Math.min(Math.max(Number(digits), MIN_EXPIRY_DAYS), MAX_EXPIRY_DAYS)) : '';
+        e.target.value = this.expiresInDays;
+    }
+    effectiveExpiryDays() {
+        const days = Number(this.expiresInDays);
+        return days >= MIN_EXPIRY_DAYS ? days : DEFAULT_EXPIRY_DAYS;
+    }
+    expiresAt() {
+        return new Date(Date.now() + this.effectiveExpiryDays() * 24 * 60 * 60 * 1000);
+    }
     unlistenToTemplate() {
         if (this.templateListenerId) {
             Store.store.delListener(this.templateListenerId);
@@ -190,6 +279,11 @@ const VerdocsSend = class {
     }
     async reset() {
         this.rolesCompleted = {};
+        this.view = 'main';
+        this.editingRoleId = '';
+        this.brandKey = '';
+        this.expiresInDays = '';
+        this.noContact = false;
     }
     onTemplateIdChanged(newTemplateId) {
         console.log('[SEND] Template ID changed', newTemplateId);
@@ -277,25 +371,59 @@ const VerdocsSend = class {
         }));
         return rolesAtLevel;
     }
-    getLevelIcon(level) {
-        if (level === 'start') {
-            return h("div", { class: "level-icon", innerHTML: startIcon });
+    getRoleById(id) {
+        for (const level of this.getSequenceNumbers()) {
+            const match = this.getRolesAtLevel(level).find(role => role.id === id);
+            if (match) {
+                return match;
+            }
         }
-        else if (level === 'end') {
-            return h("div", { class: "level-icon", innerHTML: doneIcon });
+        return null;
+    }
+    // We only show options the sender switched on.
+    getRecipientOptionLabels(recipient) {
+        if (!recipient) {
+            return [];
         }
-        else {
-            return h("div", { class: "level-icon", innerHTML: stepIcon });
+        const labels = (recipient.auth_methods || []).filter(method => method !== 'email').map(method => AUTH_METHOD_LABELS[method] || method);
+        if (recipient.delegator) {
+            labels.push('May delegate');
+        }
+        if (recipient.name_locked) {
+            labels.push('Name locked');
         }
+        return labels;
+    }
+    getDefaultBrand() {
+        var _a;
+        const defaultId = (_a = this.organization) === null || _a === void 0 ? void 0 : _a.default_brand_id;
+        return (defaultId && this.brands.find(brand => brand.id === defaultId)) || null;
+    }
+    getDefaultBrandLabel() {
+        var _a;
+        const name = (_a = this.getDefaultBrand()) === null || _a === void 0 ? void 0 : _a.name;
+        return `Default (${name || 'Verdocs'})`;
+    }
+    getSelectedBrandLabel() {
+        if (!this.brandKey) {
+            return this.getDefaultBrandLabel();
+        }
+        const brand = this.brands.find(b => b.key === this.brandKey);
+        return (brand === null || brand === void 0 ? void 0 : brand.name) || (brand === null || brand === void 0 ? void 0 : brand.key) || this.brandKey;
+    }
+    showView(view) {
+        this.view = view;
     }
     handleSelectContact(e, role) {
         e.preventDefault();
-        this.rolesCompleted[role.id] = { ...role, ...e.detail };
-        this.showPickerForId = '';
+        this.rolesCompleted = { ...this.rolesCompleted, [role.id]: { ...role, ...e.detail } };
+        this.editingRoleId = '';
+        this.view = 'main';
     }
     handleClickRole(e, role) {
         e.stopPropagation();
-        this.showPickerForId = role.id;
+        this.editingRoleId = role.id;
+        this.view = 'recipient';
     }
     handleSend(e) {
         var _a;
@@ -317,7 +445,12 @@ const VerdocsSend = class {
             recipients: Object.values(this.rolesCompleted),
             timezone: localeData.timeZone,
             locale: localeData.locale,
+            expires_at: this.expiresAt().toISOString(),
         };
+        details.no_contact = this.noContact;
+        if (this.brandKey) {
+            details.brand_key = this.brandKey;
+        }
         const beforeSendResult = this.beforeSend.emit({ ...details, name: details.name, template: this.template });
         if (beforeSendResult.defaultPrevented) {
             console.log('[SEND] Send cancelled by parent', details);
@@ -346,6 +479,96 @@ const VerdocsSend = class {
         e.stopPropagation();
         (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
     }
+    handleSwipeStart(e) {
+        var _a, _b;
+        this.swallowNextClick = false;
+        const pane = e.currentTarget;
+        const rect = pane.getBoundingClientRect();
+        const onTextEntry = !!((_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, 'input, textarea, select, [contenteditable]'));
+        if (this.view === 'main' || onTextEntry || e.clientX - rect.left > rect.width * SWIPE_START_FRACTION) {
+            this.swipeStart = null;
+            return;
+        }
+        this.swipeStart = { x: e.clientX, y: e.clientY, time: Date.now() };
+    }
+    handleSwipeEnd(e) {
+        const start = this.swipeStart;
+        this.swipeStart = null;
+        if (!start) {
+            return;
+        }
+        const dx = e.clientX - start.x;
+        const dy = Math.abs(e.clientY - start.y);
+        if (dx >= SWIPE_MIN_DISTANCE && dx > dy && Date.now() - start.time <= SWIPE_MAX_DURATION) {
+            this.swallowNextClick = true;
+            this.showView('main');
+        }
+    }
+    renderDetailHeader(title) {
+        return (h("div", { class: "detail-header" }, h("button", { type: "button", class: "back", onClick: () => this.showView('main') }, h("span", { class: "icon", innerHTML: chevronLeftIcon }), "Back"), h("div", { class: "detail-title" }, title), h("div", { class: "detail-header-spacer" })));
+    }
+    renderDetailBody(content) {
+        return (h("div", { class: "detail-body-wrap" }, h("div", { class: "detail-body", onScroll: (e) => updateScrollFade(e.target) }, content), h("div", { class: "scroll-fade" })));
+    }
+    renderDoneButton() {
+        return (h("div", { class: "detail-footer" }, h("verdocs-button", { label: "Done", size: "small", onClick: () => this.showView('main') })));
+    }
+    renderRecipientView() {
+        var _a;
+        const role = this.getRoleById(this.editingRoleId);
+        if (!role) {
+            return h("div", { class: "detail recipient-detail" }, this.renderDetailHeader('Recipient'));
+        }
+        const roleIndex = getRoleIndex(this.template, role.role_name);
+        return (h("div", { class: "detail recipient-detail" }, this.renderDetailHeader([h("span", { class: "role-dot", style: { backgroundColor: getRGBA(roleIndex) } }), role.role_name]), h("verdocs-contact-picker", { key: role.id, showCancel: false, onExit: () => this.showView('main'), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: ((_a = this.rolesCompleted[role.id]) !== null && _a !== void 0 ? _a : role), onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })));
+    }
+    renderBrandSwatch(brand, fallbackInitial) {
+        const image = (brand === null || brand === void 0 ? void 0 : brand.favicon_url) || (brand === null || brand === void 0 ? void 0 : brand.thumbnail_url) || (brand ? null : VERDOCS_LOGO_URL);
+        if (image) {
+            return (h("span", { class: "swatch logo" }, h("img", { src: image, alt: "" })));
+        }
+        return (h("span", { class: "swatch", style: { backgroundColor: (brand === null || brand === void 0 ? void 0 : brand.primary_color) || '#4c56cb' } }, fallbackInitial.substring(0, 2).toUpperCase()));
+    }
+    renderBrandOption(key, label, sub, swatch) {
+        return (h("button", { type: "button", class: { option: true, selected: this.brandKey === key }, onClick: () => (this.brandKey = key) }, h("span", { class: "radio" }), swatch, h("span", { class: "option-label" }, label, h("small", null, sub))));
+    }
+    renderBrandView() {
+        const defaultBrand = this.getDefaultBrand();
+        const others = this.brands.filter(brand => brand.id !== (defaultBrand === null || defaultBrand === void 0 ? void 0 : defaultBrand.id)).sort((a, b) => (a.name || a.key).localeCompare(b.name || b.key));
+        const hasBrands = this.brands.length > 0;
+        return (h("div", { class: "detail" }, this.renderDetailHeader('Brand'), this.renderDetailBody([
+            h("div", { class: "option-list" }, this.renderBrandOption('', this.getDefaultBrandLabel(), 'Organization default', this.renderBrandSwatch(defaultBrand, (defaultBrand === null || defaultBrand === void 0 ? void 0 : defaultBrand.name) || 'V')), others.length > 0 && h("div", { class: "option-divider" }), others.map(brand => this.renderBrandOption(brand.key, brand.name || brand.key, brand.key, this.renderBrandSwatch(brand, brand.name || brand.key)))),
+            !hasBrands && (h("p", { class: "hint" }, "Configure the look and feel of the signing experience by", ' ', h("a", { href: `${getWebAppUrl(this.endpoint)}/settings/branding`, target: "_blank", rel: "noopener" }, "Creating a Brand", h("span", { class: "icon", innerHTML: externalLinkIcon })), ".")),
+        ]), this.renderDoneButton()));
+    }
+    renderExpiresView() {
+        const expiresAt = this.expiresAt();
+        const when = `${expiresAt.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })} at ${expiresAt.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' })}`;
+        return (h("div", { class: "detail" }, this.renderDetailHeader('Expiration'), this.renderDetailBody([
+            h("div", { class: "expires-field" }, h("input", { type: "text", inputMode: "numeric", "aria-label": "Expires in (days)", placeholder: String(DEFAULT_EXPIRY_DAYS), value: this.expiresInDays, disabled: this.sending, onInput: (e) => this.handleExpiryInput(e) }), h("span", { class: "suffix" }, "days")),
+            h("p", { class: "hint" }, "This envelope will expire on ", when, ". Expirations may be set from ", MIN_EXPIRY_DAYS, "-", MAX_EXPIRY_DAYS, " days. If left blank, this will default to ", DEFAULT_EXPIRY_DAYS, "."),
+        ]), this.renderDoneButton()));
+    }
+    renderNotificationsView() {
+        return (h("div", { class: "detail" }, this.renderDetailHeader('Notifications'), this.renderDetailBody([
+            h("verdocs-checkbox", { size: "small", label: "Disable notifications", checked: this.noContact, onInput: (e) => (this.noContact = !!e.target.checked) }),
+            this.noContact && (h("div", { class: "warning" }, h("span", { class: "icon", innerHTML: warningIcon }), h("div", null, "Disabling notifications turns off invitations and reminders to recipients as well as status updates to you. You may obtain invite links in the recipient summary or via an API call. We strongly recommend enabling", ' ', h("a", { href: `${getWebAppUrl(this.endpoint)}/settings/webhooks`, target: "_blank", rel: "noopener" }, "Webhooks", h("span", { class: "icon", innerHTML: externalLinkIcon })), ' ', "to help automate this process."))),
+        ]), this.renderDoneButton()));
+    }
+    renderDetail() {
+        switch (this.view) {
+            case 'recipient':
+                return this.renderRecipientView();
+            case 'brand':
+                return this.renderBrandView();
+            case 'expires':
+                return this.renderExpiresView();
+            case 'notifications':
+                return this.renderNotificationsView();
+            default:
+                return null;
+        }
+    }
     render() {
         var _a;
         if (this.loading) {
@@ -359,21 +582,20 @@ const VerdocsSend = class {
         const allRolesAssigned = rolesAssigned.length >= getRoleNames(this.template).length;
         const assignedEmails = rolesAssigned.map(r => r.email.toLowerCase());
         const hasDuplicateEmails = new Set(assignedEmails).size < assignedEmails.length;
-        return (h(Host, { class: { sendable: (_a = this.template) === null || _a === void 0 ? void 0 : _a.is_sendable } }, h("div", { class: "recipients" }, h("div", { class: "left-line" }), h("div", { class: `level level-start` }, this.getLevelIcon('start'), h("div", { class: "complete" }, "Send Envelope")), levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon('sequence'), this.getRolesAtLevel(level).map(role => {
-            var _a, _b, _c;
-            const unknown = !role.email || !role.first_name || !role.last_name;
-            const roleName = ((_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.first_name) ? formatFullName(this.rolesCompleted[role.id]) : unknown ? role.role_name : formatFullName(role);
-            const elId = `verdocs-send-recipient-${role.role_name}`;
-            const roleIndex = getRoleIndex(this.template, role.role_name);
-            const rgba = getRGBA(roleIndex);
-            const completed = rolesAssigned.findIndex(r => r.role_name === role.role_name) > -1;
-            const style = {
-                backgroundColor: rgba,
-                border: completed ? '2px solid #55bc81' : '2px solid #dddddd',
-            };
-            return unknown ? (h("div", { class: "recipient", "data-ri": roleIndex, "data-rn": role.role_name, style: style, onClick: e => this.handleClickRole(e, role), id: elId }, roleName, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_b = this.rolesCompleted[role.id]) !== null && _b !== void 0 ? _b : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))))) : (h("div", { class: "recipient", "data-ri": roleIndex, "data-rn": role.role_name, style: style, onClick: e => this.handleClickRole(e, role), id: elId }, roleName, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: ((_c = this.rolesCompleted[role.id]) !== null && _c !== void 0 ? _c : role), onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
-        })))), h("div", { class: `level level-done` }, this.getLevelIcon('end'), h("div", { class: "complete" }, "Signing Complete"))), h("div", { class: "buttons" }, hasDuplicateEmails && h("div", { class: "error-message" }, "Recipients cannot share the same email."), this.showCancel && h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending || hasDuplicateEmails, onClick: e => this.handleSend(e) }), this.sending && h("verdocs-spinner", null))));
+        const expiresAt = this.expiresAt();
+        const expiresShort = expiresAt.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+        return (h(Host, { class: { 'sendable': (_a = this.template) === null || _a === void 0 ? void 0 : _a.is_sendable, 'detail-open': this.view !== 'main' } }, h("div", { class: "track" }, h("div", { class: "pane main-pane", "aria-hidden": this.view !== 'main' ? 'true' : 'false' }, h("div", { class: "section-title" }, "Recipients"), h("div", { class: "recipients" }, levels.map(level => [
+            levels.length > 1 && h("div", { class: "step" }, "Step ", level),
+            this.getRolesAtLevel(level).map(role => {
+                const roleIndex = getRoleIndex(this.template, role.role_name);
+                const completed = this.rolesCompleted[role.id];
+                const assigned = completed && rolesAssigned.findIndex(r => r.role_name === role.role_name) > -1;
+                const optionLabels = this.getRecipientOptionLabels(completed);
+                return (h("button", { type: "button", class: "recipient", "data-ri": roleIndex, "data-rn": role.role_name, onClick: e => this.handleClickRole(e, role) }, h("span", { class: "role-dot", style: { backgroundColor: getRGBA(roleIndex) } }), h("span", { class: "who" }, h("span", { class: "role-name" }, role.role_name), assigned ? (h("span", { class: "who-detail" }, formatFullName(completed), " \u00B7 ", completed.email)) : (h("span", { class: "who-detail configure" }, "Configure recipient")), optionLabels.length > 0 && (h("span", { class: "options" }, optionLabels.map(label => (h("span", { class: "pill" }, label)))))), h("span", { class: "chevron", innerHTML: chevronRightIcon })));
+            }),
+        ])), h("div", { class: "section-title delivery-title" }, "Delivery"), h("div", { class: "delivery" }, h("button", { type: "button", class: "kv", onClick: () => this.showView('brand'), disabled: this.sending }, h("span", { class: "key" }, "Brand"), h("span", { class: "value" }, this.getSelectedBrandLabel()), h("span", { class: "chevron", innerHTML: chevronRightIcon })), h("button", { type: "button", class: "kv", onClick: () => this.showView('expires'), disabled: this.sending }, h("span", { class: "key" }, "Expires"), h("span", { class: "value" }, this.effectiveExpiryDays(), " days ", h("small", null, "\u00B7 ", expiresShort)), h("span", { class: "chevron", innerHTML: chevronRightIcon })), h("button", { type: "button", class: "kv", onClick: () => this.showView('notifications'), disabled: this.sending }, h("span", { class: "key" }, "Notifications"), h("span", { class: { value: true, off: this.noContact } }, this.noContact ? 'Off' : 'On'), h("span", { class: "chevron", innerHTML: chevronRightIcon }))), h("div", { class: "main-spacer" }), h("div", { class: "buttons" }, hasDuplicateEmails && h("div", { class: "error-message" }, "Recipients cannot share the same email."), this.sending && h("verdocs-spinner", null), this.showCancel && h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending || hasDuplicateEmails, onClick: e => this.handleSend(e) }))), h("div", { class: "pane detail-pane", "aria-hidden": this.view === 'main' ? 'true' : 'false', onPointerDown: e => this.handleSwipeStart(e), onPointerUp: e => this.handleSwipeEnd(e), onPointerCancel: () => (this.swipeStart = null) }, this.renderDetail()))));
     }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "templateId": [{
                 "onTemplateIdChanged": 0