@verdocs/web-sdk 6.13.0 → 6.13.2

package/dist/cjs/verdocs-sign.cjs.entry.js

@@ -60,6 +60,7 @@ const VerdocsSign = class {
         this.fatalErrorMessage = '';
         this.focusedField = '';
         this.disclosures = jsSdk.DEFAULT_DISCLOSURES;
+        this.brand = null;
         this.fieldUpdateCounter = 0;
         this.submitting = false;
         this.submitted = false;
@@ -262,10 +263,32 @@ const VerdocsSign = class {
             existing.remove();
         }
     }
+    // A brand saved from the detail form has colors but no CSS block of its own. Those colors still
+    // have to reach the signing UI, so a minimal block is built from them, using the same variables
+    // the Builder would have emitted.
+    synthesizeBrandCss(brand) {
+        const primary = typeof brand.primary_color === 'string' ? brand.primary_color.trim() : '';
+        if (!/^#[0-9a-f]{6}$/i.test(primary)) {
+            return '';
+        }
+        const shade = (hex, amount) => {
+            const channel = (i) => Math.round(Math.max(0, Math.min(255, parseInt(hex.slice(i, i + 2), 16) * (1 + amount))));
+            return `#${[1, 3, 5].map(i => channel(i).toString(16).padStart(2, '0')).join('')}`;
+        };
+        const secondary = typeof brand.secondary_color === 'string' && /^#[0-9a-f]{6}$/i.test(brand.secondary_color.trim()) ? brand.secondary_color.trim() : primary;
+        return [
+            ':root, .verdocs-custom-theme {',
+            `  --verdocs-primary-color: ${primary};`,
+            `  --verdocs-primary-color-hover: ${shade(primary, -0.14)};`,
+            `  --verdocs-link-color: ${secondary};`,
+            `  --verdocs-checkbox-color: ${primary};`,
+            '}',
+        ].join('\n');
+    }
     applyBrandStyleOverrides(brand) {
         const styleId = this.getBrandStyleOverridesId();
         const existing = document.getElementById(styleId);
-        const overrides = brand === null || brand === void 0 ? void 0 : brand.style_overrides;
+        const overrides = brand ? (typeof brand.style_overrides === 'string' && brand.style_overrides.trim() ? brand.style_overrides : this.synthesizeBrandCss(brand)) : '';
         if (typeof overrides === 'string' && overrides.length > 0) {
             const styleEl = existing || document.createElement('style');
             styleEl.id = styleId;
@@ -279,15 +302,25 @@ const VerdocsSign = class {
         }
     }
     processAuthResponse(response) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         const { envelope, recipient, brand } = response;
         (_a = envelope.documents) === null || _a === void 0 ? void 0 : _a.sort((a, b) => (a.order !== b.order ? a.order - b.order : a.created_at.localeCompare(b.created_at)));
         const { auth_step } = recipient;
         this.recipient = recipient;
         this.envelope = envelope;
-        this.disclosures = ((_c = (_b = this.envelope) === null || _b === void 0 ? void 0 : _b.organization) === null || _c === void 0 ? void 0 : _c.disclaimer) || jsSdk.DEFAULT_DISCLOSURES;
-        this.applyOrgStyleOverrides();
-        this.applyBrandStyleOverrides(brand);
+        this.brand = brand || null;
+        this.disclosures = (brand === null || brand === void 0 ? void 0 : brand.disclaimer) || ((_c = (_b = this.envelope) === null || _b === void 0 ? void 0 : _b.organization) === null || _c === void 0 ? void 0 : _c.disclaimer) || jsSdk.DEFAULT_DISCLOSURES;
+        // A resolved brand (the envelope's own, or the organization's default) replaces the
+        // organization's legacy CSS block outright. Applying both let the older block's direct
+        // header and button rules beat the brand's variables, so the brand never showed.
+        if (brand) {
+            (_d = document.getElementById(this.getOrgStyleOverridesId())) === null || _d === void 0 ? void 0 : _d.remove();
+            this.applyBrandStyleOverrides(brand);
+        }
+        else {
+            this.applyOrgStyleOverrides();
+            this.applyBrandStyleOverrides(null);
+        }
         this.authStep = auth_step;
         this.delegated = !!recipient.delegated_to;
         this.agreed = recipient.agreed;
@@ -324,7 +357,7 @@ const VerdocsSign = class {
             this.nextButtonLabel = 'Next';
         }
         this.checkRecipientFields();
-        (_d = this.envelopeLoaded) === null || _d === void 0 ? void 0 : _d.emit({ endpoint: this.endpoint, envelope: this.envelope });
+        (_e = this.envelopeLoaded) === null || _e === void 0 ? void 0 : _e.emit({ endpoint: this.endpoint, envelope: this.envelope });
     }
     handleClickAgree() {
         this.submitting = true;
@@ -1162,7 +1195,8 @@ const VerdocsSign = class {
         const totalPages = this.envelope.documents.reduce((acc, doc) => acc + doc.pages, 0);
         const pageOptions = jsSdk.integerSequence(1, totalPages).map(p => ({ label: p.toString(), value: p.toString() }));
         let globalPageCounter = 0;
-        return (index.h(index.Host, null, this.toolbarStyle === 'menu' && (index.h("div", { id: "verdocs-sign-header" }, index.h("div", { class: "inner" }, index.h("div", { class: "title" }, this.envelope.name), index.h("div", { style: { flex: '1' } }), !this.finishLater && !this.submitted &&
+        return (index.h(index.Host, null, this.toolbarStyle === 'menu' && (index.h("div", { id: "verdocs-sign-header" }, index.h("div", { class: "inner" }, index.h("div", { class: "title" }, this.envelope.name), index.h("div", { style: { flex: '1' } }), !this.finishLater &&
+            !this.submitted &&
             (() => {
                 const remaining = this.getRequiredTotalCount() - this.getRequiredFilledCount();
                 const optionalLeft = this.getOptionalUnfilledCount();
@@ -1230,7 +1264,7 @@ const VerdocsSign = class {
             }, onExit: () => (this.adoptingSignature = false) })), (this.submitting || this.showSpinner) && (index.h("verdocs-portal", null, index.h("div", { class: "spinner-overlay" }, index.h("verdocs-spinner", null)))), this.showDownloadDialog && (index.h("verdocs-download-dialog", { signed: this.envelope.signed, polling: this.polling, documents: this.envelope.documents, onExit: () => {
                 this.showDownloadDialog = false;
                 this.stopPolling();
-            }, onDownload: e => this.handleOnDownload(e) })), !this.loading && !this.isDone && !this.submitted && (index.h("verdocs-sign-footer", { endpoint: this.endpoint, envelopeId: this.envelopeId, isDone: this.isDone, onAskQuestion: (e) => {
+            }, onDownload: e => this.handleOnDownload(e) })), !this.loading && !this.isDone && !this.submitted && (index.h("verdocs-sign-footer", { endpoint: this.endpoint, envelopeId: this.envelopeId, brand: this.brand, isDone: this.isDone, onAskQuestion: (e) => {
                 jsSdk.askQuestion(this.endpoint, this.envelopeId, this.roleId, { question: e.detail.question })
                     .then(() => Toast.VerdocsToast('Your question has been sent.', { style: 'success' }))
                     .catch(e => {