@verdocs/web-sdk 4.0.8 → 4.1.2

package/dist/collection/components/fields/verdocs-field-textbox/verdocs-field-textbox.js

@@ -6,7 +6,7 @@ import { getRoleIndex, getTemplateRoleStore } from "../../../utils/TemplateRoleS
 import { getFieldSettings } from "../../../utils/utils";
 import { SettingsIcon } from "../../../utils/Icons";
 /**
- * Display a text input field.
+ * Display a simple 1-line text input field.
  */
 export class VerdocsFieldTextbox {
     constructor() {
@@ -77,49 +77,37 @@ export class VerdocsFieldTextbox {
         Object.assign(e.target.dataset, { x, y, h });
     }
     handleResizeEnd(e) {
-        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
+        const { fieldname = '' } = this;
+        const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
         const newSettings = { ...getFieldSettings(field) };
-        const [translateX, translateY] = e.target.style.transform.split('(')[1].split(')')[0].split(',').map(parseFloat);
-        console.log({ translateX, translateY });
         newSettings.width = Math.round(parseFloat(e.target.style.width));
         newSettings.height = Math.round(parseFloat(e.target.style.height));
-        // newSettings.x = Math.round(newSettings.x + translateX / this.xscale);
-        // newSettings.y = Math.round(newSettings.y - translateY / this.yscale);
         updateField(this.endpoint, this.templateid, this.fieldname, { settings: newSettings })
             .then(field => {
             var _a;
-            console.log('Update result', field);
             updateStoreField(this.fieldStore, this.fieldname, field);
-            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name, settings: newSettings, field });
+            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname, settings: newSettings, field });
             Object.assign(e.target.dataset, { x: 0, y: 0, h: 0 });
         })
             .catch(e => console.log('Field update failed', e));
     }
     render() {
-        var _a, _b;
-        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
-        const roleIndex = getRoleIndex(this.roleStore, field.role_name);
-        const backgroundColor = field['rgba'] || getRGBA(roleIndex);
-        if (!field) {
-            return h(Fragment, null);
-        }
-        const settings = getFieldSettings(field);
-        // TODO:
-        // const disabled = this.disabled ?? settings.disabled ?? false;
-        const disabled = (_a = this.disabled) !== null && _a !== void 0 ? _a : false;
-        const value = (settings === null || settings === void 0 ? void 0 : settings.result) || '';
-        const width = settings.width || 150;
+        const { templateid, fieldname = '', editable = false, focused, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
+        const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
+        const { required = false, role_name = '', placeholder = '' } = field || {};
+        const { result: value = '', width = 150 } = getFieldSettings(field);
         // TODO: This is an outdated technique from the old system. We should compute it.
         const maxlength = width / 5;
-        if (this.done) {
-            return h(Host, { class: { done: this.done } }, value);
+        const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
+        if (done) {
+            return h(Host, { class: { done } }, value);
         }
-        return (h(Host, { class: { required: field.required, disabled, done: this.done, focused: this.focused }, style: { backgroundColor } }, h("input", { type: "text", name: field.name, placeholder: (_b = field.placeholder) !== null && _b !== void 0 ? _b : '', value: value, disabled: disabled, required: field === null || field === void 0 ? void 0 : field.required, ref: el => (this.inputEl = el), maxlength: maxlength, onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
+        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, h("input", { type: "text", name: fieldname, value: value, disabled: disabled, required: required, placeholder: placeholder, maxlength: maxlength, ref: el => (this.inputEl = el), onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
-            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
+            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
                 var _a;
-                (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name });
+                (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname });
                 return this.hideSettingsPanel();
             }, onSettingsChanged: e => {
                 var _a;
@@ -177,7 +165,7 @@ export class VerdocsFieldTextbox {
                     "text": "The template the field is for/from. Only required in Builder mode, to support the Field Properties dialog."
                 },
                 "attribute": "templateid",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "fieldname": {
@@ -267,7 +255,7 @@ export class VerdocsFieldTextbox {
                     "text": "If set, the field is considered \"done\" and is drawn in a display-final-value state."
                 },
                 "attribute": "done",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "xscale": {
@@ -285,7 +273,7 @@ export class VerdocsFieldTextbox {
                     "text": "If set, the field will be be scaled horizontally by this factor."
                 },
                 "attribute": "xscale",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             },
             "yscale": {
@@ -303,7 +291,7 @@ export class VerdocsFieldTextbox {
                     "text": "If set, the field will be be scaled vertically by this factor."
                 },
                 "attribute": "yscale",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             },
             "pagenumber": {
@@ -321,7 +309,7 @@ export class VerdocsFieldTextbox {
                     "text": "The page the field is on"
                 },
                 "attribute": "pagenumber",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             }
         };

package/dist/collection/components/fields/verdocs-field-timestamp/verdocs-field-timestamp.css

@@ -43,7 +43,7 @@ verdocs-field-timestamp.required {
   border: 1px solid rgb(204, 0, 0);
 }
 verdocs-field-timestamp.focused {
-  animation: verdocs-field-pulse 0.75s 2;
+  animation: verdocs-field-pulse 0.4s 1;
 }
 verdocs-field-timestamp verdocs-button-panel {
   top: -3px;

package/dist/collection/components/fields/verdocs-field-timestamp/verdocs-field-timestamp.js

@@ -7,7 +7,8 @@ import { getFieldSettings } from "../../../utils/utils";
 import { FORMAT_TIMESTAMP } from "../../../utils/Types";
 import { SettingsIcon } from "../../../utils/Icons";
 /**
- * Display a timestamp field.
+ * Display a timestamp. Timestamps are not editable by signers. Instead, they are automatically
+ * filled when the signer submits the document.
  */
 export class VerdocsFieldTimestamp {
     constructor() {
@@ -44,32 +45,21 @@ export class VerdocsFieldTimestamp {
         this.roleStore = getTemplateRoleStore(this.templateid);
     }
     render() {
-        var _a, _b;
-        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
-        const roleIndex = getRoleIndex(this.roleStore, field.role_name);
-        const backgroundColor = field['rgba'] || getRGBA(roleIndex);
-        if (!field) {
-            return h(Fragment, null);
+        const { templateid, fieldname = '', editable = false, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
+        const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
+        const { required = false, role_name = '', placeholder = '' } = field || {};
+        const { value = '' } = getFieldSettings(field);
+        const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
+        const formatted = format(new Date(value || new Date().toISOString()), FORMAT_TIMESTAMP);
+        if (done) {
+            return h(Host, { class: { done } }, formatted);
         }
-        const settings = getFieldSettings(field);
-        // TODO:
-        // const disabled = this.disabled ?? settings.disabled ?? false;
-        const disabled = (_a = this.disabled) !== null && _a !== void 0 ? _a : false;
-        const value = settings.value || new Date().toISOString();
-        const dt = new Date(value);
-        const formatted = format(dt, FORMAT_TIMESTAMP);
-        if (this.done) {
-            return h(Host, { class: { done: this.done } }, formatted);
-        }
-        return (h(Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", placeholder: (_b = field.placeholder) !== null && _b !== void 0 ? _b : '',
-            // TODO: It would really make more sense to show the date and time but the default width of 64px for this field
-            // is encoded in a ton of existing entries in the database and is hard to change.
-            value: formatted, disabled: true, ref: el => (this.el = el) }), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
+        return (h(Host, { class: { required, disabled, done }, style: { backgroundColor } }, h("input", { type: "text", placeholder: placeholder, value: formatted, disabled: true, ref: el => (this.el = el) }), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
-            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
+            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
                 var _a;
-                (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name });
+                (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname });
                 return this.hideSettingsPanel();
             }, onSettingsChanged: e => {
                 var _a;
@@ -105,7 +95,7 @@ export class VerdocsFieldTimestamp {
                     "text": "The template the field is for/from. Only required in Builder mode, to support the Field Properties dialog."
                 },
                 "attribute": "templateid",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "fieldname": {
@@ -123,7 +113,7 @@ export class VerdocsFieldTimestamp {
                     "text": "The name of the field to display."
                 },
                 "attribute": "fieldname",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "disabled": {
@@ -141,7 +131,7 @@ export class VerdocsFieldTimestamp {
                     "text": "If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled."
                 },
                 "attribute": "disabled",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "editable": {
@@ -159,7 +149,7 @@ export class VerdocsFieldTimestamp {
                     "text": "If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\nchanged, so it should typically only be enabled in the Builder."
                 },
                 "attribute": "editable",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "moveable": {
@@ -177,7 +167,7 @@ export class VerdocsFieldTimestamp {
                     "text": "If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields."
                 },
                 "attribute": "moveable",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "done": {
@@ -195,7 +185,7 @@ export class VerdocsFieldTimestamp {
                     "text": "If set, the field is considered \"done\" and is drawn in a display-final-value state."
                 },
                 "attribute": "done",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "xscale": {
@@ -213,7 +203,7 @@ export class VerdocsFieldTimestamp {
                     "text": "If set, the field will be be scaled horizontally by this factor."
                 },
                 "attribute": "xscale",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             },
             "yscale": {
@@ -231,7 +221,7 @@ export class VerdocsFieldTimestamp {
                     "text": "If set, the field will be be scaled vertically by this factor."
                 },
                 "attribute": "yscale",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             },
             "pagenumber": {

package/dist/collection/components/settings/verdocs-settings-api-keys/verdocs-settings-api-keys.js

@@ -32,7 +32,7 @@ export class VerdocsSettingsApiKeys {
     }
     async componentDidLoad() {
         this.newApiKeyProfileId = this.endpoint.session.profile_id;
-        getOrganizationMembers(this.endpoint, this.endpoint.session.organization_id)
+        getOrganizationMembers(this.endpoint)
             .then(mem => {
             this.members = mem;
         })
@@ -45,7 +45,7 @@ export class VerdocsSettingsApiKeys {
         this.loadKeys();
     }
     loadKeys() {
-        getApiKeys(this.endpoint, this.endpoint.session.organization_id)
+        getApiKeys(this.endpoint)
             .then(r => {
             this.keys = r;
         })
@@ -57,7 +57,7 @@ export class VerdocsSettingsApiKeys {
         });
     }
     async handleDeleteKey() {
-        deleteApiKey(this.endpoint, this.deletingKey.organization_id, this.deletingKey.client_id)
+        deleteApiKey(this.endpoint, this.deletingKey.client_id)
             .then(() => {
             this.deletingKey = null;
             VerdocsToast('API key deleted', { style: 'success' });
@@ -72,7 +72,7 @@ export class VerdocsSettingsApiKeys {
         });
     }
     async handleRotateKey() {
-        rotateApiKey(this.endpoint, this.rotatingKey.organization_id, this.rotatingKey.client_id)
+        rotateApiKey(this.endpoint, this.rotatingKey.client_id)
             .then(r => {
             this.rotatingKey = null;
             VerdocsToast('API key rotated', { style: 'success' });
@@ -89,7 +89,7 @@ export class VerdocsSettingsApiKeys {
     }
     async handleCreateKey() {
         // TODO: Add permission dropdown
-        createApiKey(this.endpoint, this.endpoint.session.organization_id, { permission: 'personal', name: this.newApiKeyName, profile_id: this.newApiKeyProfileId })
+        createApiKey(this.endpoint, { permission: 'personal', name: this.newApiKeyName, profile_id: this.newApiKeyProfileId })
             .then(r => {
             this.creatingKey = false;
             this.createdKey = r;

package/dist/collection/components/settings/verdocs-settings-members/verdocs-settings-members.js

@@ -62,11 +62,7 @@ export class VerdocsSettingsMembers {
     async loadMembers() {
         var _a, _b, _c;
         try {
-            const [members, invites] = await Promise.all([
-                // getRoles(this.endpoint),
-                getOrganizationMembers(this.endpoint, this.endpoint.session.organization_id),
-                getOrganizationInvitations(this.endpoint, this.endpoint.session.organization_id),
-            ]);
+            const [members, invites] = await Promise.all([getOrganizationMembers(this.endpoint), getOrganizationInvitations(this.endpoint)]);
             this.members = members;
             this.invited = invites;
             this.newRole = 'member';
@@ -78,11 +74,9 @@ export class VerdocsSettingsMembers {
     }
     async handleInviteMember() {
         this.submitting = true;
-        createOrganizationInvitation(VerdocsEndpoint.getDefault(), this.endpoint.session.organization_id, {
+        createOrganizationInvitation(VerdocsEndpoint.getDefault(), {
             email: this.newEmailAddress,
             role: this.newRole,
-            // TODO: Test
-            // organization_id: this.endpoint.session.organization_id,
         })
             .then(r => {
             console.log('[SETTINGS] Invited member', r);
@@ -104,7 +98,7 @@ export class VerdocsSettingsMembers {
     }
     async handleDeleteMember() {
         this.submitting = true;
-        deleteOrganizationMember(VerdocsEndpoint.getDefault(), this.deletingMember.organization_id, this.deletingMember.email)
+        deleteOrganizationMember(VerdocsEndpoint.getDefault(), this.deletingMember.email)
             .then(() => {
             this.submitting = false;
             this.deletingMember = null;
@@ -120,7 +114,7 @@ export class VerdocsSettingsMembers {
     }
     async handleDeleteInvitation() {
         this.submitting = true;
-        deleteOrganizationInvitation(VerdocsEndpoint.getDefault(), this.deletingInvitation.organization_id, this.deletingInvitation.email)
+        deleteOrganizationInvitation(VerdocsEndpoint.getDefault(), this.deletingInvitation.email)
             .then(() => {
             this.submitting = false;
             this.deletingInvitation = null;
@@ -136,7 +130,7 @@ export class VerdocsSettingsMembers {
     }
     async handleResendInvitation() {
         this.submitting = true;
-        resendOrganizationInvitation(VerdocsEndpoint.getDefault(), this.resendingInvitation.organization_id, this.resendingInvitation.email)
+        resendOrganizationInvitation(VerdocsEndpoint.getDefault(), this.resendingInvitation.email)
             .then(() => {
             this.submitting = false;
             this.resendingInvitation = null;

package/dist/collection/components/settings/verdocs-settings-organization/verdocs-settings-organization.js

@@ -20,7 +20,6 @@ export class VerdocsSettingsOrganization {
         this.dirty = false;
         this.submitting = false;
         this.name = '';
-        this.business_name = '';
         this.contact_email = '';
         this.phone = '';
         this.url = '';
@@ -39,7 +38,6 @@ export class VerdocsSettingsOrganization {
     }
     resetForm(organization) {
         this.name = organization.name;
-        this.business_name = organization.business_name;
         this.contact_email = organization.contact_email;
         this.phone = organization.phone;
         this.url = organization.url;
@@ -51,7 +49,6 @@ export class VerdocsSettingsOrganization {
         e.stopPropagation();
         updateOrganization(VerdocsEndpoint.getDefault(), this.endpoint.session.organization_id, {
             name: this.name,
-            business_name: this.business_name,
             contact_email: this.contact_email,
             phone: this.phone,
             url: this.url,
@@ -67,7 +64,6 @@ export class VerdocsSettingsOrganization {
     processFields() {
         const validation = schema.safeParse({
             name: this.name,
-            business_name: this.business_name,
             contact_email: this.contact_email,
             phone: this.phone,
             url: this.url,
@@ -84,9 +80,6 @@ export class VerdocsSettingsOrganization {
         return (h(Host, null, h("h1", null, "Organization Profile"), h("form", { onSubmit: e => this.handleSubmit(e) }, h("div", { class: "columns" }, h("div", { class: "column" }, h("verdocs-text-input", { id: "verdocs-organization-name", value: this.name, autocomplete: "off", label: "Name", required: false, disabled: false, placeholder: "Enter your organization's name...", onInput: (e) => (this.name = e.target.value), onFocusout: (e) => {
                 this.name = e.target.value.trim();
                 this.processFields();
-            } }), h("verdocs-text-input", { id: "verdocs-organization-business-name", value: this.business_name, autocomplete: "off", label: "Display Name", placeholder: "The name to display on communications...", onInput: (e) => (this.business_name = e.target.value), onFocusout: (e) => {
-                this.business_name = e.target.value.trim();
-                this.processFields();
             } }), h("verdocs-text-input", { id: "verdocs-organization-url", value: this.url, autocomplete: "off", label: "Web URL", placeholder: "Enter your Web URL...", onInput: (e) => (this.url = e.target.value), onFocusout: (e) => {
                 this.url = e.target.value.trim();
                 this.processFields();
@@ -141,7 +134,6 @@ export class VerdocsSettingsOrganization {
             "dirty": {},
             "submitting": {},
             "name": {},
-            "business_name": {},
             "contact_email": {},
             "phone": {},
             "url": {}

package/dist/collection/components/templates/verdocs-template-build-tabs/verdocs-template-build-tabs.css

@@ -11,12 +11,15 @@
 }
 verdocs-template-build-tabs {
   flex: 1;
-  gap: 20px;
+  gap: 15px;
   display: flex;
   align-items: center;
-  flex-direction: column;
+  flex-direction: row;
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
 }
+verdocs-template-build-tabs verdocs-button-panel svg {
+  transform: scale(0.8);
+}
 verdocs-template-build-tabs verdocs-template-attachments,
 verdocs-template-build-tabs verdocs-template-roles {
   margin: 20px;
@@ -33,4 +36,36 @@ verdocs-template-build-tabs verdocs-template-fields {
 }
 verdocs-template-build-tabs verdocs-preview {
   flex: 1;
+}
+
+.template-details-panel .row {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  margin: 10px 0;
+}
+.template-details-panel label {
+  flex: 0 0 70px;
+}
+.template-details-panel .value {
+  flex: 1;
+  font-weight: 300;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.template-details-panel .icon-button {
+  cursor: pointer;
+  opacity: 0.8;
+  flex: 0;
+  width: 18px;
+  height: 18px;
+}
+.template-details-panel .icon-button svg {
+  stroke: #000000;
+  width: 18px;
+  height: 18px;
+}
+.template-details-panel .icon-button:hover {
+  opacity: 1;
 }

package/dist/collection/components/templates/verdocs-template-build-tabs/verdocs-template-build-tabs.js

@@ -1,7 +1,11 @@
+import { format } from "date-fns";
 import { VerdocsEndpoint } from "@verdocs/js-sdk";
 import { h, Host } from "@stencil/core";
 import { getTemplateStore } from "../../../utils/TemplateStore";
+import { VerdocsToast } from "../../../utils/Toast";
 import { SDKError } from "../../../utils/errors";
+const HelpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="#5c6575"><path d="M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z"/></svg>';
+const CopyIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" /></svg>`;
 const STEPS = ['attachments', 'roles', 'settings', 'fields', 'preview'];
 /**
  * Display a set of tabs for the template builder.
@@ -11,14 +15,18 @@ export class VerdocsTemplateBuildTabs {
         this.endpoint = VerdocsEndpoint.getDefault();
         this.templateId = null;
         this.step = 'preview';
-        this.store = null;
+        this.templateStore = null;
     }
-    onStepChanged() {
-        console.log('Step changed', this.step, this.templateId);
-        this.loadTemplate().catch((e) => console.log('Unknown Error', e));
+    onTemplateIdChanged(newTemplateId) {
+        console.log('[BUILD_TABS] Template ID changed', newTemplateId);
+        this.loadTemplate(newTemplateId).catch((e) => console.log('Unknown Error', e));
+    }
+    onStepChanged(newStep) {
+        console.log('[BUILD_TABS] Step changed', newStep);
+        this.loadTemplate(this.templateId).catch((e) => console.log('Unknown Error', e));
     }
     async componentWillLoad() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f;
         try {
             this.endpoint.loadSession();
             if (!this.endpoint.session) {
@@ -26,19 +34,26 @@ export class VerdocsTemplateBuildTabs {
                 return;
             }
             if (!this.templateId) {
-                this.step = 'preview';
+                this.step = 'attachments';
+                console.log('[BUILD_TABS] Missing required template ID, forcing view to attachments');
                 return;
             }
-            this.loadTemplate().catch(e => console.log('[BUILD_TABS] Unable to load template', e));
+            try {
+                this.templateStore = await getTemplateStore(this.endpoint, this.templateId, false);
+            }
+            catch (e) {
+                console.log('[BUILD_TABS] Error loading template', e);
+                (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+            }
         }
         catch (e) {
             console.log('[BUILD_TABS] Error loading template', e);
-            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+            (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
         }
     }
-    async loadTemplate() {
-        if (this.templateId) {
-            this.store = await getTemplateStore(this.endpoint, this.templateId, false);
+    async loadTemplate(templateId) {
+        if (templateId) {
+            this.templateStore = await getTemplateStore(this.endpoint, templateId, false);
         }
     }
     setStep(e) {
@@ -49,23 +64,30 @@ export class VerdocsTemplateBuildTabs {
         this.step = e.detail.tab.id;
         (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail.tab.id);
     }
+    copyTemplateId() {
+        navigator.clipboard
+            .writeText(this.templateId)
+            .then(() => {
+            VerdocsToast('Template ID copied', { style: 'success', duration: 3000 });
+        })
+            .catch(e => {
+            var _a;
+            console.warn('[BUILD_TABS] Error copying to clipboard', e);
+            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e);
+        });
+    }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
         if (!this.endpoint.session) {
             return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
         }
         let canPreview = false;
         let canEditFields = false;
         let canEditRoles = false;
-        console.log('[BUILD_TABS] Rendering tabs', this.templateId, this.step);
-        if (this.templateId && this.store && this.store.state) {
-            canEditRoles = ((_c = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c.length) > 0;
-            canEditFields = canEditRoles && ((_f = (_e = (_d = this.store) === null || _d === void 0 ? void 0 : _d.state) === null || _e === void 0 ? void 0 : _e.roles) === null || _f === void 0 ? void 0 : _f.length) > 0;
-            canPreview = canEditFields && ((_j = (_h = (_g = this.store) === null || _g === void 0 ? void 0 : _g.state) === null || _h === void 0 ? void 0 : _h.fields) === null || _j === void 0 ? void 0 : _j.length) > 0;
-            // TODO
-            // canPreview = this.store && userCanPreviewTemplate(this.endpoint.session, this.store?.state);
-            // canEditFields = this.store && userCanBuildTemplate(this.endpoint.session, this.store?.state);
-            // canEditRoles = this.store && userCanUpdateTemplate(this.endpoint.session, this.store?.state);
+        if (this.templateId && this.templateStore && this.templateStore.state) {
+            canEditRoles = ((_c = (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c.length) > 0;
+            canEditFields = canEditRoles && ((_f = (_e = (_d = this.templateStore) === null || _d === void 0 ? void 0 : _d.state) === null || _e === void 0 ? void 0 : _e.roles) === null || _f === void 0 ? void 0 : _f.length) > 0;
+            canPreview = canEditFields && ((_j = (_h = (_g = this.templateStore) === null || _g === void 0 ? void 0 : _g.state) === null || _h === void 0 ? void 0 : _h.fields) === null || _j === void 0 ? void 0 : _j.length) > 0;
         }
         let selectedStepIndex = Math.max(STEPS.indexOf(this.step), 0);
         if (!canPreview && selectedStepIndex >= 4) {
@@ -77,14 +99,14 @@ export class VerdocsTemplateBuildTabs {
         if (!canEditRoles && selectedStepIndex >= 1) {
             selectedStepIndex = 0;
         }
-        console.log({ selectedStepIndex, canPreview, canEditFields, canEditRoles });
         return (h(Host, null, h("verdocs-tabs", { onSelectTab: e => this.setStep(e), selectedTab: selectedStepIndex, tabs: [
-                { id: 'attachments', disabled: false, label: this.templateId && this.store ? 'Attachment(s)' : 'Upload Attachment(s)' },
+                { id: 'attachments', disabled: false, label: 'Attachment(s)' },
                 { id: 'roles', disabled: !canEditRoles, label: 'Roles' },
                 { id: 'settings', disabled: !canEditFields, label: 'Settings' },
                 { id: 'fields', disabled: !canEditFields, label: 'Fields' },
                 { id: 'preview', disabled: !canPreview, label: 'Preview/Send' },
-            ] })));
+            ] }), this.templateId && (h("div", { class: "info" }, h("verdocs-button-panel", { icon: HelpIcon }, h("div", { class: "template-details-panel" }, h("h6", null, "Template Details"), h("div", { class: "row" }, h("label", null, "ID:"), h("div", { class: "value" }, this.templateId), h("div", { class: "icon-button", innerHTML: CopyIcon, onClick: () => this.copyTemplateId() })), h("div", { class: "row" }, h("label", null, "Name:"), h("div", { class: "value" }, (_l = (_k = this.templateStore) === null || _k === void 0 ? void 0 : _k.state) === null || _l === void 0 ? void 0 : _l.name)), h("div", { class: "row" }, h("label", null, "Visibility:"), h("div", { class: "value" }, ((_o = (_m = this.templateStore) === null || _m === void 0 ? void 0 : _m.state) === null || _o === void 0 ? void 0 : _o.is_public) ? 'Public' : ((_q = (_p = this.templateStore) === null || _p === void 0 ? void 0 : _p.state) === null || _q === void 0 ? void 0 : _q.is_personal) ? 'Private' : 'Shared')), h("div", { class: "row" }, h("label", null, "Created:"), h("div", { class: "value" }, ((_s = (_r = this.templateStore) === null || _r === void 0 ? void 0 : _r.state) === null || _s === void 0 ? void 0 : _s.counter) ? format(new Date((_u = (_t = this.templateStore) === null || _t === void 0 ? void 0 : _t.state) === null || _u === void 0 ? void 0 : _u.created_at), 'P p') : '')), h("div", { class: "row" }, h("label", null, "Used:"), h("div", { class: "value" }, (_w = (_v = this.templateStore) === null || _v === void 0 ? void 0 : _v.state) === null || _w === void 0 ? void 0 :
+            _w.counter, " time(s)"))))))));
     }
     static get is() { return "verdocs-template-build-tabs"; }
     static get originalStyleUrls() {
@@ -167,7 +189,7 @@ export class VerdocsTemplateBuildTabs {
     }
     static get states() {
         return {
-            "store": {}
+            "templateStore": {}
         };
     }
     static get events() {
@@ -217,6 +239,9 @@ export class VerdocsTemplateBuildTabs {
     }
     static get watchers() {
         return [{
+                "propName": "templateId",
+                "methodName": "onTemplateIdChanged"
+            }, {
                 "propName": "step",
                 "methodName": "onStepChanged"
             }];

package/dist/collection/components/templates/verdocs-template-card/verdocs-template-card.js

@@ -12,7 +12,7 @@ export class VerdocsTemplateCard {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '8c1e1c635b1baa655956acdb25c0dadf7aa7fb37' }, h("span", { key: '27f70562114c4b477a39d2c592ac970958308b6a', class: "name" }, this.template.name), h("span", { key: 'e7d9da9cef9ead160a65a4cee49f030d52b20eb3', class: "org-name" }, ((_a = this.template.organization) === null || _a === void 0 ? void 0 : _a.name) || 'Public'), h("hr", { key: 'ae53a4cb7e75c6b2af578e2518b601e742aecfb8' }), h("div", { key: 'f493a7d3641fe90d6bf35649664f76b5fc1ee3d3', class: "controls" }, h("div", { key: 'f0ef5225ff60e056166eede4ba69d4999c1a9887', class: "control" }, h("span", { key: '5f3f45383a81584741ee04b1fce6b4720bab9063', class: "icon", innerHTML: StarIcon }), h("span", { key: '9faf96a64292b6529e29186a4bd1e12d9ad3b42b', class: "value" }, this.template.star_counter)), h("div", { key: '2b605818b05ddf5ea9c3ac28f1bad3d0c8a3e3fb', class: "control secondary" }, h("span", { key: 'c12a8f975614144c72060cf9213a7e8081636602', class: "icon", innerHTML: PagesIcon }), h("span", { key: '53dd14ec4e8c0c57bbff3866901d10baa61abc31', class: "value" }, ((_d = (_c = (_b = this.template) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.pages) || 1)), h("div", { key: 'c2e72a02dcb918fe595f2fd7228728bd29b1c816', class: "control secondary" }, h("span", { key: '9ed65ee6703d3db204c7f9619884615d3595f9f2', class: "icon", innerHTML: EmailIcon }), h("span", { key: '805565cdc082e8d76e2dd2db98aeede1eee9810f', class: "value" }, this.template.counter)), h("span", { key: '8914f5b5d9d2395bd60f7fded9d58b4c48f85100', class: "additional-controls", innerHTML: ActionsIcon }))));
+        return (h(Host, { key: '92db1527b29db1accce1236ad170c1d071bd9af9' }, h("span", { key: '6df84f4e3f47f2a3bde4de1aaeb55cfdaaf24cec', class: "name" }, this.template.name), h("span", { key: '6be1cd61a1496fa579f25ff06fcd5295149aada1', class: "org-name" }, ((_a = this.template.organization) === null || _a === void 0 ? void 0 : _a.name) || 'Public'), h("hr", { key: '8f95b065445cf18ec71b2976c5c75d7335857f1a' }), h("div", { key: 'cce4e78b58f924de6b68bcf947af20dbed74ae15', class: "controls" }, h("div", { key: '124cf87ac1ab5f25d505004ebba55c0ad00d3b34', class: "control" }, h("span", { key: 'b39885d89f97c7f29077f5a0e8e943c2fd74e8a0', class: "icon", innerHTML: StarIcon }), h("span", { key: '7fa8e32525ed221d9907e658ca6f982fed16dba6', class: "value" }, this.template.star_counter)), h("div", { key: '37fb74c5e9302e8c310e2052b725183bac587c3d', class: "control secondary" }, h("span", { key: 'bef0ebc42c5f9062bf67d86a097dd0d4a8e03e11', class: "icon", innerHTML: PagesIcon }), h("span", { key: '3763e7ec4ac4e73ce712c460101223d6f8663b2a', class: "value" }, ((_d = (_c = (_b = this.template) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.pages) || 1)), h("div", { key: 'e4f9d35db361036a46297e82ecf1528058e214bc', class: "control secondary" }, h("span", { key: '985da1d76dfeecb4e57e440fbf788c18453696a1', class: "icon", innerHTML: EmailIcon }), h("span", { key: 'f098866929e19bf47e30a660aba05a3e508561ed', class: "value" }, this.template.counter)), h("span", { key: 'c742e5c6e1087a9b0f1a8b037476759274838c42', class: "additional-controls", innerHTML: ActionsIcon }))));
     }
     static get is() { return "verdocs-template-card"; }
     static get originalStyleUrls() {

package/dist/collection/components/templates/verdocs-template-document-page/verdocs-template-document-page.js

@@ -93,7 +93,7 @@ export class VerdocsTemplateDocumentPage {
     }
     render() {
         const height = `${this.renderedHeight}px`;
-        return (h(Host, { key: '9757c99456d32f5b95307f6c4282a70d2df0bf51', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } }, layer.name === 'controls' &&
+        return (h(Host, { key: '6fabe54a0840385228e13a0e61f7748d41fbcf17', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } }, layer.name === 'controls' &&
             this.fieldStore
                 .get('fields')
                 .filter(field => field && field.page === this.pageNumber)