@verdocs/web-sdk 1.9.6 → 1.9.9

package/dist/components/verdocs-template-create2.js

@@ -1,36 +1,12 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as createPage } from './Pages.js';
 import { c as createTemplate } from './Templates2.js';
+import { c as createTemplateDocument } from './TemplateDocuments.js';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$1 } from './verdocs-button2.js';
 
-/**
- * A TemplateDocument represents a PDF or other attachment in a Template.
- *
- * @module
- */
-/**
- * Create a Document for a particular Template.
- *
- * ```typescript
- * import {TemplateDocument} from '@verdocs/js-sdk/Templates';
- *
- * await TemplateDocument.createDocument((VerdocsEndpoint.getDefault(), templateID, params);
- * ```
- */
-var createTemplateDocument = function (endpoint, templateId, file, onUploadProgress) {
-    var formData = new FormData();
-    formData.append('document', file, file.name);
-    return endpoint.api //
-        .post("/templates/".concat(templateId, "/documents"), formData, {
-        timeout: 10000,
-        onUploadProgress: function (event) { return onUploadProgress === null || onUploadProgress === void 0 ? void 0 : onUploadProgress(Math.floor((event.loaded * 100) / event.total), event.loaded, event.total); },
-    })
-        .then(function (r) { return r.data; });
-};
-
 const verdocsTemplateCreateCss = "verdocs-template-create{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-create form{background-color:#ffffff;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-create form .upload-box{max-width:320px;text-align:center;padding:44px 18px 66px;border:2px dashed #979797;color:rgba(0, 0, 0, 0.54)}verdocs-template-create form .upload-box svg{width:64px;fill:#5c6575}verdocs-template-create .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-template-create ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-create ::-moz-placeholder{color:#aaaaaa}verdocs-template-create :-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::placeholder{color:#aaaaaa}";
 
 const FileIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"></path></svg>';

package/dist/components/verdocs-template-create2.js.map

@@ -1 +1 @@
-{"file":"verdocs-template-create2.js","mappings":"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","names":[],"sources":["./node_modules/@verdocs/js-sdk/Templates/TemplateDocuments.js","./src/components/elements/verdocs-template-create/verdocs-template-create.scss?tag=verdocs-template-create","./src/components/elements/verdocs-template-create/verdocs-template-create.tsx"],"sourcesContent":["/**\n * A TemplateDocument represents a PDF or other attachment in a Template.\n *\n * @module\n */\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __generator = (this && this.__generator) || function (thisArg, body) {\n    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n    return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n    function verb(n) { return function (v) { return step([n, v]); }; }\n    function step(op) {\n        if (f) throw new TypeError(\"Generator is already executing.\");\n        while (_) try {\n            if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n            if (y = 0, t) op = [op[0] & 2, t.value];\n            switch (op[0]) {\n                case 0: case 1: t = op; break;\n                case 4: _.label++; return { value: op[1], done: false };\n                case 5: _.label++; y = op[1]; op = [0]; continue;\n                case 7: op = _.ops.pop(); _.trys.pop(); continue;\n                default:\n                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n                    if (t[2]) _.ops.pop();\n                    _.trys.pop(); continue;\n            }\n            op = body.call(thisArg, _);\n        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n    }\n};\n/**\n * Get all the Template Documents associated to a particular Template.\n *\n * ```typescript\n * import {TemplateDocument} from '@verdocs/js-sdk/Templates';\n *\n * await TemplateDocument.getDocuments((VerdocsEndpoint.getDefault(), templateID);\n * ```\n */\nexport var getTemplateDocuments = function (endpoint, templateId) {\n    return endpoint.api //\n        .get(\"/templates/\".concat(templateId, \"/documents/\"))\n        .then(function (r) { return r.data; });\n};\n/**\n * Create a Document for a particular Template.\n *\n * ```typescript\n * import {TemplateDocument} from '@verdocs/js-sdk/Templates';\n *\n * await TemplateDocument.createDocument((VerdocsEndpoint.getDefault(), templateID, params);\n * ```\n */\nexport var createTemplateDocument = function (endpoint, templateId, file, onUploadProgress) {\n    var formData = new FormData();\n    formData.append('document', file, file.name);\n    return endpoint.api //\n        .post(\"/templates/\".concat(templateId, \"/documents\"), formData, {\n        timeout: 10000,\n        onUploadProgress: function (event) { return onUploadProgress === null || onUploadProgress === void 0 ? void 0 : onUploadProgress(Math.floor((event.loaded * 100) / event.total), event.loaded, event.total); },\n    })\n        .then(function (r) { return r.data; });\n};\n/**\n * Get a specific Document.\n *\n * ```typescript\n * import {TemplateDocument} from '@verdocs/js-sdk/Templates';\n *\n * await TemplateDocument.getDocument((VerdocsEndpoint.getDefault(), templateID, documentID);\n * ```\n */\nexport var getTemplateDocument = function (endpoint, templateId, documentId) {\n    return endpoint.api //\n        .get(\"/templates/\".concat(templateId, \"/documents/\").concat(documentId))\n        .then(function (r) { return r.data; });\n};\n/**\n * Delete a specific Document.\n *\n * ```typescript\n * import {TemplateDocument} from '@verdocs/js-sdk/Templates';\n *\n * await TemplateDocument.deleteDocument((VerdocsEndpoint.getDefault(), templateID, documentID);\n * ```\n */\nexport var deleteTemplateDocument = function (endpoint, templateId, documentId) {\n    return endpoint.api //\n        .delete(\"/templates/\".concat(templateId, \"/documents/\").concat(documentId))\n        .then(function (r) { return r.data; });\n};\n/**\n * Get (binary download) a file attached to a Template. It is important to use this method\n * rather than a direct A HREF or similar link to set the authorization headers for the\n * request.\n */\nexport var getTemplateDocumentFile = function (endpoint, templateId, documentId) { return __awaiter(void 0, void 0, void 0, function () {\n    return __generator(this, function (_a) {\n        return [2 /*return*/, endpoint.api //\n                .get(\"/templates/\".concat(templateId, \"/documents/\").concat(documentId, \"?file=true\"), {\n                responseType: 'arraybuffer',\n            })\n                .then(function (r) { return Buffer.from(r.data, 'binary').toString('base64'); })];\n    });\n}); };\n/**\n * Get (binary download) a file attached to a Template. It is important to use this method\n * rather than a direct A HREF or similar link to set the authorization headers for the\n * request.\n */\nexport var getTemplateDocumentThumbnail = function (endpoint, templateId, documentId) { return __awaiter(void 0, void 0, void 0, function () {\n    return __generator(this, function (_a) {\n        return [2 /*return*/, endpoint.api //\n                .get(\"/templates/\".concat(templateId, \"/documents/\").concat(documentId, \"?thumbnail=true\"), {\n                responseType: 'arraybuffer',\n            })\n                .then(function (r) { return Buffer.from(r.data, 'binary').toString('base64'); })];\n    });\n}); };\n","@import '../../../theme.scss';\n\nverdocs-template-create {\n  font-family: $verdocs-primary-font;\n\n  form {\n    background-color: $verdocs-grey-4;\n    padding: 12px;\n    display: flex;\n    flex-direction: column;\n\n    .upload-box {\n      max-width: 320px;\n      text-align: center;\n      padding: 44px 18px 66px;\n      border: 2px dashed #979797;\n      color: rgba(0, 0, 0, 0.54);\n\n      svg {\n        width: 64px;\n        fill: #5c6575;\n      }\n    }\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 8px;\n    margin-top: 16px;\n    align-items: center;\n    flex-direction: row;\n    justify-content: flex-end;\n\n    .flex-fill {\n      flex: 1;\n    }\n  }\n\n  ::placeholder {\n    color: $verdocs-bg-2;\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop, State} from '@stencil/core';\nimport {createTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport {SDKError} from '../../../utils/errors';\nimport {ITemplate, ITemplateDocument} from '@verdocs/js-sdk/Templates/Types';\nimport {createTemplateDocument} from '@verdocs/js-sdk/Templates/TemplateDocuments';\nimport {createPage} from '@verdocs/js-sdk/Templates/Pages';\n\nconst FileIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z\"></path></svg>';\n\n/**\n * Displays a file upload mechanism suitable for the first step of creating a template.\n */\n@Component({\n  tag: 'verdocs-template-create',\n  styleUrl: 'verdocs-template-create.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateCreate {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the user changes the type.\n   */\n  @Event({composed: true}) templateCreated: EventEmitter<{template: ITemplate; template_document: ITemplateDocument}>;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  @State() file: File | null;\n\n  componentWillLoad() {}\n\n  handleFileChanged(e: any) {\n    console.log('files', e.target.files);\n    this.file = e.target.files?.[0] || null;\n    console.log('Selected file', this.file);\n    // this.filePath = e.target.files?.[0]?.name;\n  }\n\n  handleUpload(e) {\n    e.stopPropagation();\n    const fileElem = document.getElementById('verdocs-template-create-file');\n    fileElem.click();\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.cancel?.emit();\n  }\n\n  async handleSubmit(e) {\n    e.stopPropagation();\n\n    // Should be true if we're here because onClick is only enabled then. We're just guarding this for Typescript.\n    if (!this.file) {\n      return;\n    }\n\n    try {\n      const template = await createTemplate(this.endpoint, {name: this.file.name});\n      console.log('created template', template);\n\n      const template_document = await createTemplateDocument(this.endpoint, template.id, this.file);\n      console.log('created document', template_document);\n\n      for await (let pageNumber of Array.from(Array(template_document.page_numbers).keys(), n => n + 1)) {\n        console.log('Updating page', pageNumber);\n        const page = await createPage(this.endpoint, template.id, {sequence: pageNumber, page_number: pageNumber, document_id: template_document.id});\n        console.log('Created page', page);\n      }\n\n      this.templateCreated?.emit({template, template_document});\n      // this.fileUploaded?.emit({filePath: this.filePath});\n    } catch (e) {\n      console.log('[TEMPLATE-CREATE] Error creating template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  render() {\n    return (\n      <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n        <input type=\"file\" id=\"verdocs-template-create-file\" multiple accept=\"application/pdf\" style={{display: 'none'}} onChange={e => this.handleFileChanged(e)} />\n\n        <div class=\"upload-box\">\n          <div>\n            <span innerHTML={FileIcon} />\n          </div>\n          <div style={{marginTop: '20px', fontSize: '20px', fontWeight: 'bold'}}>Drag a file here</div>\n          <div style={{marginTop: '20px', marginBottom: '20px', fontSize: '16px'}}>Or, if you prefer...</div>\n          <verdocs-button label=\"Select a file from your computer\" size=\"small\" onPress={e => this.handleUpload(e)} />\n        </div>\n\n        <div class=\"buttons\">\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onPress={e => this.handleCancel(e)} />\n          <verdocs-button label=\"Next\" size=\"small\" onPress={e => this.handleSubmit(e)} disabled={!this.file} />\n        </div>\n      </form>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-template-create2.js","mappings":"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","names":[],"sources":["./src/components/elements/verdocs-template-create/verdocs-template-create.scss?tag=verdocs-template-create","./src/components/elements/verdocs-template-create/verdocs-template-create.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-create {\n  font-family: $verdocs-primary-font;\n\n  form {\n    background-color: $verdocs-grey-4;\n    padding: 12px;\n    display: flex;\n    flex-direction: column;\n\n    .upload-box {\n      max-width: 320px;\n      text-align: center;\n      padding: 44px 18px 66px;\n      border: 2px dashed #979797;\n      color: rgba(0, 0, 0, 0.54);\n\n      svg {\n        width: 64px;\n        fill: #5c6575;\n      }\n    }\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 8px;\n    margin-top: 16px;\n    align-items: center;\n    flex-direction: row;\n    justify-content: flex-end;\n\n    .flex-fill {\n      flex: 1;\n    }\n  }\n\n  ::placeholder {\n    color: $verdocs-bg-2;\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop, State} from '@stencil/core';\nimport {createTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport {SDKError} from '../../../utils/errors';\nimport {ITemplate, ITemplateDocument} from '@verdocs/js-sdk/Templates/Types';\nimport {createTemplateDocument} from '@verdocs/js-sdk/Templates/TemplateDocuments';\nimport {createPage} from '@verdocs/js-sdk/Templates/Pages';\n\nconst FileIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z\"></path></svg>';\n\n/**\n * Displays a file upload mechanism suitable for the first step of creating a template.\n */\n@Component({\n  tag: 'verdocs-template-create',\n  styleUrl: 'verdocs-template-create.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateCreate {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the user changes the type.\n   */\n  @Event({composed: true}) templateCreated: EventEmitter<{template: ITemplate; template_document: ITemplateDocument}>;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  @State() file: File | null;\n\n  componentWillLoad() {}\n\n  handleFileChanged(e: any) {\n    console.log('files', e.target.files);\n    this.file = e.target.files?.[0] || null;\n    console.log('Selected file', this.file);\n    // this.filePath = e.target.files?.[0]?.name;\n  }\n\n  handleUpload(e) {\n    e.stopPropagation();\n    const fileElem = document.getElementById('verdocs-template-create-file');\n    fileElem.click();\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.cancel?.emit();\n  }\n\n  async handleSubmit(e) {\n    e.stopPropagation();\n\n    // Should be true if we're here because onClick is only enabled then. We're just guarding this for Typescript.\n    if (!this.file) {\n      return;\n    }\n\n    try {\n      const template = await createTemplate(this.endpoint, {name: this.file.name});\n      console.log('created template', template);\n\n      const template_document = await createTemplateDocument(this.endpoint, template.id, this.file);\n      console.log('created document', template_document);\n\n      for await (let pageNumber of Array.from(Array(template_document.page_numbers).keys(), n => n + 1)) {\n        console.log('Updating page', pageNumber);\n        const page = await createPage(this.endpoint, template.id, {sequence: pageNumber, page_number: pageNumber, document_id: template_document.id});\n        console.log('Created page', page);\n      }\n\n      this.templateCreated?.emit({template, template_document});\n      // this.fileUploaded?.emit({filePath: this.filePath});\n    } catch (e) {\n      console.log('[TEMPLATE-CREATE] Error creating template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  render() {\n    return (\n      <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n        <input type=\"file\" id=\"verdocs-template-create-file\" multiple accept=\"application/pdf\" style={{display: 'none'}} onChange={e => this.handleFileChanged(e)} />\n\n        <div class=\"upload-box\">\n          <div>\n            <span innerHTML={FileIcon} />\n          </div>\n          <div style={{marginTop: '20px', fontSize: '20px', fontWeight: 'bold'}}>Drag a file here</div>\n          <div style={{marginTop: '20px', marginBottom: '20px', fontSize: '16px'}}>Or, if you prefer...</div>\n          <verdocs-button label=\"Select a file from your computer\" size=\"small\" onPress={e => this.handleUpload(e)} />\n        </div>\n\n        <div class=\"buttons\">\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onPress={e => this.handleCancel(e)} />\n          <verdocs-button label=\"Next\" size=\"small\" onPress={e => this.handleSubmit(e)} disabled={!this.file} />\n        </div>\n      </form>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-template-fields2.js

@@ -7,16 +7,18 @@ import { r as renderDocumentField, a as getRoleIndex } from './utils.js';
 import { s as state } from './templateStore.js';
 import { l as loadTemplate } from './Templates.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$a } from './verdocs-button2.js';
-import { d as defineCustomElement$9 } from './verdocs-button-panel2.js';
-import { d as defineCustomElement$8 } from './verdocs-document-page2.js';
-import { d as defineCustomElement$7 } from './verdocs-field-signature2.js';
-import { d as defineCustomElement$6 } from './verdocs-loader2.js';
-import { d as defineCustomElement$5 } from './verdocs-select-input2.js';
-import { d as defineCustomElement$4 } from './verdocs-signature-dialog2.js';
-import { d as defineCustomElement$3 } from './verdocs-text-input2.js';
-import { d as defineCustomElement$2 } from './verdocs-toolbar-icon2.js';
-import { d as defineCustomElement$1 } from './verdocs-view2.js';
+import { d as defineCustomElement$c } from './verdocs-button2.js';
+import { d as defineCustomElement$b } from './verdocs-button-panel2.js';
+import { d as defineCustomElement$a } from './verdocs-document-page2.js';
+import { d as defineCustomElement$9 } from './verdocs-field-signature2.js';
+import { d as defineCustomElement$8 } from './verdocs-loader2.js';
+import { d as defineCustomElement$7 } from './verdocs-select-input2.js';
+import { d as defineCustomElement$6 } from './verdocs-signature-dialog2.js';
+import { d as defineCustomElement$5 } from './verdocs-text-input2.js';
+import { d as defineCustomElement$4 } from './verdocs-toolbar-icon2.js';
+import { d as defineCustomElement$3 } from './verdocs-view2.js';
+import { d as defineCustomElement$2 } from './verdocs-view-envelope-document2.js';
+import { d as defineCustomElement$1 } from './verdocs-view-template-document2.js';
 
 const verdocsTemplateFieldsCss = "verdocs-template-fields{position:relative;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-fields .page-0{padding:65px 15px 0 15px;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-fields .page-0 .user-placed-fields{height:100px;position:relative;background:#ffffff;-webkit-box-shadow:0 0 10px 5px #0000000f;box-shadow:0 0 10px 5px #0000000f}verdocs-template-fields .page-0 .user-placed-fields .title{top:0;left:0;color:#ffffff;font-size:12px;padding:3px 6px;font-weight:bold;position:absolute;background:#46497d}verdocs-template-fields .fields-bar{height:50px;display:-ms-flexbox;display:flex;z-index:10000;position:fixed;padding:5px 20px;line-height:28px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;background:#46497d}verdocs-template-fields .fields-bar .label{color:#ffffff;font-size:14px;font-weight:bold;margin-right:8px}verdocs-template-fields .fields-bar .icon{margin:0 4px;display:-ms-flexbox;display:flex;-webkit-transform:scale(0.8, 0.8);transform:scale(0.8, 0.8)}verdocs-template-fields .fields-bar .icon svg{fill:#ffffff}verdocs-template-fields .fields-bar .operation{border:none;outline:none;color:#ffffff;cursor:pointer;font-size:16px;margin-left:10px;background:transparent;text-transform:uppercase}verdocs-template-fields .fields-bar .operation:disabled{color:#cccccc;cursor:inherit;pointer-events:none}";
 
@@ -74,7 +76,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
       }
     }
     catch (e) {
-      console.log('[PREVIEW] Error with preview session', e);
+      console.log('[FIELDS] Error with preview session', e);
       (_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));
     }
   }
@@ -86,19 +88,18 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.toolbarEl.style.width = `${this.page0El.clientWidth}px`;
   }
   async handleFieldChange(field, e, optionId) {
-    console.log('[PREVIEW] handleFieldChange', field, e, optionId);
+    console.log('[FIELDS] handleFieldChange', field, e, optionId);
   }
   handlePageRendered(e) {
     const pageInfo = e.detail;
-    console.log('[PREVIEW] Page rendered', pageInfo);
+    console.log('[FIELDS] Page rendered', pageInfo);
     const fields = state.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
     // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
-    console.log('[PREVIEW] Fields on page', fields);
+    console.log('[FIELDS] Fields on page', fields);
     fields.forEach(field => {
       const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(state.roleNames, field.role_name), this.handleFieldChange, true, true, true);
       // const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(this.roles, field.role_name), this.handleFieldChange, true, true, true);
       if (!el) {
-        console.log('Skipping partially rendered field', field);
         return;
       }
       el.addEventListener('recipientChanged', e => {
@@ -110,10 +111,9 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
       interact(el).draggable({
         listeners: {
           start(event) {
-            console.log('drag started', event.type, event.target);
+            console.log('[FIELDS] Drag started', event.type, event.target);
           },
           move(event) {
-            console.log('moved');
             const oldX = +(event.target.getAttribute('posX') || 0);
             const oldY = +(event.target.getAttribute('posY') || 0);
             const xScale = +(event.target.getAttribute('xScale') || 1);
@@ -125,7 +125,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
             updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
           },
           end(event) {
-            console.log('ended', event);
+            console.log('[FIELDS] Drag ended', event);
             // event.target.setAttribute('posX', 0);
             // event.target.setAttribute('posy', 0);
             // updateCssTransform(event.target, 'translate', `${0}px, ${0}px`);
@@ -164,7 +164,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-template-fields", "verdocs-button", "verdocs-button-panel", "verdocs-document-page", "verdocs-field-signature", "verdocs-loader", "verdocs-select-input", "verdocs-signature-dialog", "verdocs-text-input", "verdocs-toolbar-icon", "verdocs-view"];
+  const components = ["verdocs-template-fields", "verdocs-button", "verdocs-button-panel", "verdocs-document-page", "verdocs-field-signature", "verdocs-loader", "verdocs-select-input", "verdocs-signature-dialog", "verdocs-text-input", "verdocs-toolbar-icon", "verdocs-view", "verdocs-view-envelope-document", "verdocs-view-template-document"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-template-fields":
       if (!customElements.get(tagName)) {
@@ -173,50 +173,60 @@ function defineCustomElement() {
       break;
     case "verdocs-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$c();
       }
       break;
     case "verdocs-button-panel":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$b();
       }
       break;
     case "verdocs-document-page":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$a();
       }
       break;
     case "verdocs-field-signature":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$9();
       }
       break;
     case "verdocs-loader":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$8();
       }
       break;
     case "verdocs-select-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$7();
       }
       break;
     case "verdocs-signature-dialog":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$6();
       }
       break;
     case "verdocs-text-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$5();
       }
       break;
     case "verdocs-toolbar-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$2();
+        defineCustomElement$4();
       }
       break;
     case "verdocs-view":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "verdocs-view-envelope-document":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "verdocs-view-template-document":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }

package/dist/components/verdocs-template-fields2.js.map

@@ -1 +1 @@
-{"file":"verdocs-template-fields2.js","mappings":"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","names":["TemplateStore"],"sources":["./src/components/elements/verdocs-template-fields/verdocs-template-fields.scss?tag=verdocs-template-fields","./src/components/elements/verdocs-template-fields/verdocs-template-fields.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-fields {\n  position: relative;\n  font-family: $verdocs-primary-font;\n\n  .page-0 {\n    padding: 65px 15px 0 15px;\n    box-sizing: border-box;\n\n    .user-placed-fields {\n      height: 100px;\n      position: relative;\n      background: #ffffff;\n      box-shadow: 0 0 10px 5px #0000000f;\n\n      .title {\n        top: 0;\n        left: 0;\n        color: #ffffff;\n        font-size: 12px;\n        padding: 3px 6px;\n        font-weight: bold;\n        position: absolute;\n        background: $verdocs-grey-blue;\n      }\n    }\n  }\n\n  .fields-bar {\n    height: 50px;\n    display: flex;\n    z-index: 10000;\n    position: fixed;\n    padding: 5px 20px;\n    line-height: 28px;\n    align-items: center;\n    flex-direction: row;\n    box-sizing: border-box;\n    background: $verdocs-grey-blue;\n\n    .label {\n      color: #ffffff;\n      font-size: 14px;\n      font-weight: bold;\n      margin-right: 8px;\n    }\n\n    .icon {\n      margin: 0 4px;\n      display: flex;\n      transform: scale(0.8, 0.8);\n\n      svg {\n        fill: #ffffff;\n      }\n    }\n\n    .operation {\n      border: none;\n      outline: none;\n      color: #ffffff;\n      cursor: pointer;\n      font-size: 16px;\n      margin-left: 10px;\n      background: transparent;\n      text-transform: uppercase;\n\n      &:disabled {\n        color: #cccccc;\n        cursor: inherit;\n        pointer-events: none;\n      }\n    }\n  }\n}\n","import interact from 'interactjs';\nimport {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, h, Event, EventEmitter, Fragment, Prop, Host} from '@stencil/core';\nimport {IPageRenderEvent} from '../../embeds/verdocs-view/verdocs-view';\nimport {getRoleIndex, renderDocumentField} from '../../../utils/utils';\nimport TemplateStore from '../../../utils/templateStore';\nimport {loadTemplate} from '../../../utils/Templates';\nimport {SDKError} from '../../../utils/errors';\n\n/**\n * Helper function to safely set/update components in a CSS transform attribute. Transform is normally set as a string of\n * `operation1(param) operation2(param) ...` components, which makes updating them a bit of a pain. This will remove the\n * specified component if it's already set and replace it with the new value, without touching the other components that\n * may already be set. Note that this operation moves the component to the end of the transform chain so it's not meant\n * to be used for order-sensitive components e.g. translate-then-rotate.\n */\nconst updateCssTransform = (el: HTMLElement, key: string, value: string) => {\n  // e.g. 'scale(1.87908, 1.87908) translate(0px, 0px);'\n  const currentTransform = el.style.transform;\n  // e.g. ['scale(1.87908, 1.87908)', 'scale', '1.87908, 1.87908', ...], [ 'translate(0px, 0px)', 'translate', '0px, 0px']]\n  const components = [...currentTransform.matchAll(/(\\w+)\\(([^)]*)\\)/gi)];\n  el.style.transform = [\n    components //\n      .filter(component => component[1] !== key) // Remove the entry if it's already set\n      .map(component => component[0]), // Convert back the remaining entries\n    `${key}(${value})`,\n  ].join(' ');\n};\n\nconst iconSingleline = '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z\"/></svg>';\n\nconst iconMultiline =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z\"/></svg>';\n\nconst iconCheck =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z\"/></svg>';\n\nconst iconRadio =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z\"/></svg>';\n\nconst iconDatepicker =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z\"/></svg>';\n\nconst iconSignature =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z\"/></svg>';\n\nconst iconInitial = '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z\"/></svg>';\n\n/**\n * Displays a builder experience for laying out fields in a template. Note that this experience requires a large display area to\n * present all of the required controls, so it is primarily intended to be used in desktop environments.\n */\n@Component({\n  tag: 'verdocs-template-fields',\n  styleUrl: 'verdocs-template-fields.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateFields {\n  page0El: HTMLDivElement;\n  toolbarEl: HTMLDivElement;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The ID of the template to create the document from.\n   */\n  @Prop() templateId: string | null = null;\n\n  /**\n   * Event fired when the user completes the step.\n   */\n  @Event({composed: true}) settingsUpdated: EventEmitter;\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n\n      if (!this.templateId) {\n        console.log(`[FIELDS] Missing required template ID ${this.templateId}`);\n        return;\n      }\n\n      try {\n        console.log(`[FIELDS] Loading template ${this.templateId}`);\n        await loadTemplate(this.endpoint, this.templateId);\n      } catch (e) {\n        console.log('[FIELDS] Error loading template', e);\n        this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n      }\n    } catch (e) {\n      console.log('[PREVIEW] Error with preview session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  componentDidRender() {\n    // console.log('rendered', this.page0El, this.toolbarEl);\n    // console.log('w', this.page0El.clientWidth);\n    // console.log('t', this.toolbarEl.clientWidth);\n    interact.dynamicDrop(true);\n    this.toolbarEl.style.width = `${this.page0El.clientWidth}px`;\n  }\n\n  async handleFieldChange(field: ITemplateField, e: any, optionId?: string) {\n    console.log('[PREVIEW] handleFieldChange', field, e, optionId);\n  }\n\n  handlePageRendered(e) {\n    const pageInfo = e.detail as IPageRenderEvent;\n    console.log('[PREVIEW] Page rendered', pageInfo);\n\n    const fields = TemplateStore.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n    // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n    console.log('[PREVIEW] Fields on page', fields);\n    fields.forEach(field => {\n      const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(TemplateStore.roleNames, field.role_name), this.handleFieldChange, true, true, true);\n      // const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(this.roles, field.role_name), this.handleFieldChange, true, true, true);\n      if (!el) {\n        console.log('Skipping partially rendered field', field);\n        return;\n      }\n\n      el.addEventListener('recipientChanged', e => {\n        el.setAttribute('roleindex', getRoleIndex(TemplateStore.roleNames, e.detail));\n        // el.setAttribute('roleindex', getRoleIndex(this.roles, e.detail));\n      });\n\n      el.setAttribute('xScale', pageInfo.renderedPage.xScale);\n      el.setAttribute('yScale', pageInfo.renderedPage.yScale);\n\n      interact(el).draggable({\n        listeners: {\n          start(event) {\n            console.log('drag started', event.type, event.target);\n          },\n          move(event) {\n            console.log('moved');\n            const oldX = +(event.target.getAttribute('posX') || 0);\n            const oldY = +(event.target.getAttribute('posY') || 0);\n            const xScale = +(event.target.getAttribute('xScale') || 1);\n            const yScale = +(event.target.getAttribute('yScale') || 1);\n            const newX = event.dx / xScale + oldX;\n            const newY = event.dy / yScale + oldY;\n            event.target.setAttribute('posX', newX);\n            event.target.setAttribute('posy', newY);\n            updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);\n          },\n          end(event) {\n            console.log('ended', event);\n            // event.target.setAttribute('posX', 0);\n            // event.target.setAttribute('posy', 0);\n            // updateCssTransform(event.target, 'translate', `${0}px, ${0}px`);\n          },\n        },\n      });\n    });\n  }\n\n  render() {\n    const testField: ITemplateField = {\n      template_id: '',\n      name: 'test',\n      role_name: 'Recipient 1',\n      type: 'textbox',\n      required: true,\n      setting: {\n        x: 0,\n        y: 0,\n      },\n      page_sequence: 0,\n    };\n\n    if (TemplateStore.loading) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        {TemplateStore.template ? (\n          <Fragment>\n            <div class=\"fields-bar\" ref={el => (this.toolbarEl = el as HTMLDivElement)}>\n              <div class=\"label\">Add Field:</div>\n              <verdocs-toolbar-icon icon={iconSingleline} text=\"Single-line Text Box\" onPress={() => console.log('single press')} />\n              <verdocs-toolbar-icon icon={iconMultiline} text=\"Multi-line Text Box\" onPress={() => console.log('multi press')} />\n              <verdocs-toolbar-icon icon={iconCheck} text=\"Checkbox\" onPress={() => console.log('check press')} />\n              <verdocs-toolbar-icon icon={iconRadio} text=\"Radio Button\" onPress={() => console.log('radio press')} />\n              <verdocs-toolbar-icon icon={iconDatepicker} text=\"Date Picker\" onPress={() => console.log('date press')} />\n              <verdocs-toolbar-icon icon={iconSignature} text=\"Signature\" onPress={() => console.log('signature press')} />\n              <verdocs-toolbar-icon icon={iconInitial} text=\"Initials\" onPress={() => console.log('initial press')} />\n              <div style={{flex: '1'}} />\n              <button onClick={() => console.log('save')} disabled={true} class=\"operation\">\n                Save\n              </button>\n              <button onClick={() => console.log('close')} class=\"operation\">\n                Close\n              </button>\n            </div>\n\n            <div class=\"page-0\" ref={el => (this.page0El = el as HTMLDivElement)}>\n              <div class=\"user-placed-fields\">\n                <div class=\"title\">User-Placed Fields</div>\n                <verdocs-field-signature\n                  field={testField}\n                  style={{width: '82px', height: '41px', left: '20px', top: '40px', transform: 'scale(1,1)', backgroundColor: getRGBA(0)}}\n                  moveable={true}\n                  editable={true}\n                />\n              </div>\n            </div>\n\n            <verdocs-view\n              templateId={this.templateId}\n              endpoint={this.endpoint}\n              onPageRendered={e => this.handlePageRendered(e)}\n              pageLayers={[\n                {name: 'page', type: 'canvas'},\n                {name: 'controls', type: 'div'},\n              ]}\n            />\n          </Fragment>\n        ) : (\n          <div>Error loading Template. Please try again later.</div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-template-fields2.js","mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,wBAAwB,GAAG,s9CAAs9C;;ACWv/C;;;;;;;AAOA,MAAM,kBAAkB,GAAG,CAAC,EAAe,EAAE,GAAW,EAAE,KAAa;;EAErE,MAAM,gBAAgB,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC;;EAE5C,MAAM,UAAU,GAAG,CAAC,GAAG,gBAAgB,CAAC,QAAQ,CAAC,oBAAoB,CAAC,CAAC,CAAC;EACxE,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG;IACnB,UAAU;OACP,MAAM,CAAC,SAAS,IAAI,SAAS,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC;OACzC,GAAG,CAAC,SAAS,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;IACjC,GAAG,GAAG,IAAI,KAAK,GAAG;GACnB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,oIAAoI,CAAC;AAE5J,MAAM,aAAa,GACjB,6LAA6L,CAAC;AAEhM,MAAM,SAAS,GACb,oYAAoY,CAAC;AAEvY,MAAM,SAAS,GACb,2pBAA2pB,CAAC;AAE9pB,MAAM,cAAc,GAClB,0sBAA0sB,CAAC;AAE7sB,MAAM,aAAa,GACjB,qWAAqW,CAAC;AAExW,MAAM,WAAW,GAAG,6JAA6J,CAAC;MAWrK,qBAAqB;;;;;;;oBAOI,eAAe,CAAC,UAAU,EAAE;sBAK5B,IAAI;;EAkBxC,MAAM,iBAAiB;;IACrB,IAAI;MACF,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;MAE5B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QACpB,OAAO,CAAC,GAAG,CAAC,yCAAyC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;QACxE,OAAO;OACR;MAED,IAAI;QACF,OAAO,CAAC,GAAG,CAAC,6BAA6B,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;QAC5D,MAAM,YAAY,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;OACpD;MAAC,OAAO,CAAC,EAAE;QACV,OAAO,CAAC,GAAG,CAAC,iCAAiC,EAAE,CAAC,CAAC,CAAC;QAClD,MAAA,IAAI,CAAC,QAAQ,0CAAE,IAAI,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,OAAO,EAAE,MAAA,CAAC,CAAC,QAAQ,0CAAE,MAAM,EAAE,MAAA,CAAC,CAAC,QAAQ,0CAAE,IAAI,CAAC,CAAC,CAAC;OACpF;KACF;IAAC,OAAO,CAAC,EAAE;MACV,OAAO,CAAC,GAAG,CAAC,qCAAqC,EAAE,CAAC,CAAC,CAAC;MACtD,MAAA,IAAI,CAAC,QAAQ,0CAAE,IAAI,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,OAAO,EAAE,MAAA,CAAC,CAAC,QAAQ,0CAAE,MAAM,EAAE,MAAA,CAAC,CAAC,QAAQ,0CAAE,IAAI,CAAC,CAAC,CAAC;KACpF;GACF;EAED,kBAAkB;;;;IAIhB,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAC3B,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,IAAI,CAAC;GAC9D;EAED,MAAM,iBAAiB,CAAC,KAAqB,EAAE,CAAM,EAAE,QAAiB;IACtE,OAAO,CAAC,GAAG,CAAC,4BAA4B,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC;GAC/D;EAED,kBAAkB,CAAC,CAAC;IAClB,MAAM,QAAQ,GAAG,CAAC,CAAC,MAA0B,CAAC;IAC9C,OAAO,CAAC,GAAG,CAAC,wBAAwB,EAAE,QAAQ,CAAC,CAAC;IAEhD,MAAM,MAAM,GAAGA,KAAa,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,aAAa,KAAK,QAAQ,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;;IAE9G,OAAO,CAAC,GAAG,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAC;IAC/C,MAAM,CAAC,OAAO,CAAC,KAAK;MAClB,MAAM,EAAE,GAAG,mBAAmB,CAAC,KAAK,EAAE,QAAQ,CAAC,YAAY,EAAE,YAAY,CAACA,KAAa,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;;MAE/J,IAAI,CAAC,EAAE,EAAE;QACP,OAAO;OACR;MAED,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,CAAC;QACvC,EAAE,CAAC,YAAY,CAAC,WAAW,EAAE,YAAY,CAACA,KAAa,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;;OAE/E,CAAC,CAAC;MAEH,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;MACxD,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;MAExD,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC;QACrB,SAAS,EAAE;UACT,KAAK,CAAC,KAAK;YACT,OAAO,CAAC,GAAG,CAAC,uBAAuB,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;WAChE;UACD,IAAI,CAAC,KAAK;YACR,MAAM,IAAI,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;YACvD,MAAM,IAAI,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;YACvD,MAAM,MAAM,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;YAC3D,MAAM,MAAM,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;YAC3D,MAAM,IAAI,GAAG,KAAK,CAAC,EAAE,GAAG,MAAM,GAAG,IAAI,CAAC;YACtC,MAAM,IAAI,GAAG,KAAK,CAAC,EAAE,GAAG,MAAM,GAAG,IAAI,CAAC;YACtC,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;YACxC,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;YACxC,kBAAkB,CAAC,KAAK,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,OAAO,IAAI,IAAI,CAAC,CAAC;WACvE;UACD,GAAG,CAAC,KAAK;YACP,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,KAAK,CAAC,CAAC;;;;WAI3C;SACF;OACF,CAAC,CAAC;KACJ,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,MAAM,SAAS,GAAmB;MAChC,WAAW,EAAE,EAAE;MACf,IAAI,EAAE,MAAM;MACZ,SAAS,EAAE,aAAa;MACxB,IAAI,EAAE,SAAS;MACf,QAAQ,EAAE,IAAI;MACd,OAAO,EAAE;QACP,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,CAAC;OACL;MACD,aAAa,EAAE,CAAC;KACjB,CAAC;IAEF,IAAIA,KAAa,CAAC,OAAO,EAAE;MACzB,QACE,EAAC,IAAI,QACH,yBAAkB,CACb,EACP;KACH;IAED,QACE,EAAC,IAAI,QACFA,KAAa,CAAC,QAAQ,IACrB,EAAC,QAAQ,QACP,WAAK,KAAK,EAAC,YAAY,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAoB,CAAC,IACxE,WAAK,KAAK,EAAC,OAAO,iBAAiB,EACnC,4BAAsB,IAAI,EAAE,cAAc,EAAE,IAAI,EAAC,sBAAsB,EAAC,OAAO,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,GAAI,EACtH,4BAAsB,IAAI,EAAE,aAAa,EAAE,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,GAAI,EACnH,4BAAsB,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,GAAI,EACpG,4BAAsB,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,cAAc,EAAC,OAAO,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,GAAI,EACxG,4BAAsB,IAAI,EAAE,cAAc,EAAE,IAAI,EAAC,aAAa,EAAC,OAAO,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,GAAI,EAC3G,4BAAsB,IAAI,EAAE,aAAa,EAAE,IAAI,EAAC,WAAW,EAAC,OAAO,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAI,EAC7G,4BAAsB,IAAI,EAAE,WAAW,EAAE,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,GAAI,EACxG,WAAK,KAAK,EAAE,EAAC,IAAI,EAAE,GAAG,EAAC,GAAI,EAC3B,cAAQ,OAAO,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAC,WAAW,WAEpE,EACT,cAAQ,OAAO,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,KAAK,EAAC,WAAW,YAErD,CACL,EAEN,WAAK,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAoB,CAAC,IAClE,WAAK,KAAK,EAAC,oBAAoB,IAC7B,WAAK,KAAK,EAAC,OAAO,yBAAyB,EAC3C,+BACE,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,EAAC,EACvH,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAE,IAAI,GACd,CACE,CACF,EAEN,oBACE,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAC/C,UAAU,EAAE;QACV,EAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAC;QAC9B,EAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAC;OAChC,GACD,CACO,KAEX,iEAA0D,CAC3D,CACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["TemplateStore"],"sources":["./src/components/elements/verdocs-template-fields/verdocs-template-fields.scss?tag=verdocs-template-fields","./src/components/elements/verdocs-template-fields/verdocs-template-fields.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-fields {\n  position: relative;\n  font-family: $verdocs-primary-font;\n\n  .page-0 {\n    padding: 65px 15px 0 15px;\n    box-sizing: border-box;\n\n    .user-placed-fields {\n      height: 100px;\n      position: relative;\n      background: #ffffff;\n      box-shadow: 0 0 10px 5px #0000000f;\n\n      .title {\n        top: 0;\n        left: 0;\n        color: #ffffff;\n        font-size: 12px;\n        padding: 3px 6px;\n        font-weight: bold;\n        position: absolute;\n        background: $verdocs-grey-blue;\n      }\n    }\n  }\n\n  .fields-bar {\n    height: 50px;\n    display: flex;\n    z-index: 10000;\n    position: fixed;\n    padding: 5px 20px;\n    line-height: 28px;\n    align-items: center;\n    flex-direction: row;\n    box-sizing: border-box;\n    background: $verdocs-grey-blue;\n\n    .label {\n      color: #ffffff;\n      font-size: 14px;\n      font-weight: bold;\n      margin-right: 8px;\n    }\n\n    .icon {\n      margin: 0 4px;\n      display: flex;\n      transform: scale(0.8, 0.8);\n\n      svg {\n        fill: #ffffff;\n      }\n    }\n\n    .operation {\n      border: none;\n      outline: none;\n      color: #ffffff;\n      cursor: pointer;\n      font-size: 16px;\n      margin-left: 10px;\n      background: transparent;\n      text-transform: uppercase;\n\n      &:disabled {\n        color: #cccccc;\n        cursor: inherit;\n        pointer-events: none;\n      }\n    }\n  }\n}\n","import interact from 'interactjs';\nimport {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, h, Event, EventEmitter, Fragment, Prop, Host} from '@stencil/core';\nimport {IPageRenderEvent} from '../../embeds/verdocs-view/verdocs-view';\nimport {getRoleIndex, renderDocumentField} from '../../../utils/utils';\nimport TemplateStore from '../../../utils/templateStore';\nimport {loadTemplate} from '../../../utils/Templates';\nimport {SDKError} from '../../../utils/errors';\n\n/**\n * Helper function to safely set/update components in a CSS transform attribute. Transform is normally set as a string of\n * `operation1(param) operation2(param) ...` components, which makes updating them a bit of a pain. This will remove the\n * specified component if it's already set and replace it with the new value, without touching the other components that\n * may already be set. Note that this operation moves the component to the end of the transform chain so it's not meant\n * to be used for order-sensitive components e.g. translate-then-rotate.\n */\nconst updateCssTransform = (el: HTMLElement, key: string, value: string) => {\n  // e.g. 'scale(1.87908, 1.87908) translate(0px, 0px);'\n  const currentTransform = el.style.transform;\n  // e.g. ['scale(1.87908, 1.87908)', 'scale', '1.87908, 1.87908', ...], [ 'translate(0px, 0px)', 'translate', '0px, 0px']]\n  const components = [...currentTransform.matchAll(/(\\w+)\\(([^)]*)\\)/gi)];\n  el.style.transform = [\n    components //\n      .filter(component => component[1] !== key) // Remove the entry if it's already set\n      .map(component => component[0]), // Convert back the remaining entries\n    `${key}(${value})`,\n  ].join(' ');\n};\n\nconst iconSingleline = '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z\"/></svg>';\n\nconst iconMultiline =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z\"/></svg>';\n\nconst iconCheck =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z\"/></svg>';\n\nconst iconRadio =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z\"/></svg>';\n\nconst iconDatepicker =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z\"/></svg>';\n\nconst iconSignature =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z\"/></svg>';\n\nconst iconInitial = '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z\"/></svg>';\n\n/**\n * Displays a builder experience for laying out fields in a template. Note that this experience requires a large display area to\n * present all of the required controls, so it is primarily intended to be used in desktop environments.\n */\n@Component({\n  tag: 'verdocs-template-fields',\n  styleUrl: 'verdocs-template-fields.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateFields {\n  page0El: HTMLDivElement;\n  toolbarEl: HTMLDivElement;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The ID of the template to create the document from.\n   */\n  @Prop() templateId: string | null = null;\n\n  /**\n   * Event fired when the user completes the step.\n   */\n  @Event({composed: true}) settingsUpdated: EventEmitter;\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n\n      if (!this.templateId) {\n        console.log(`[FIELDS] Missing required template ID ${this.templateId}`);\n        return;\n      }\n\n      try {\n        console.log(`[FIELDS] Loading template ${this.templateId}`);\n        await loadTemplate(this.endpoint, this.templateId);\n      } catch (e) {\n        console.log('[FIELDS] Error loading template', e);\n        this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n      }\n    } catch (e) {\n      console.log('[FIELDS] Error with preview session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  componentDidRender() {\n    // console.log('rendered', this.page0El, this.toolbarEl);\n    // console.log('w', this.page0El.clientWidth);\n    // console.log('t', this.toolbarEl.clientWidth);\n    interact.dynamicDrop(true);\n    this.toolbarEl.style.width = `${this.page0El.clientWidth}px`;\n  }\n\n  async handleFieldChange(field: ITemplateField, e: any, optionId?: string) {\n    console.log('[FIELDS] handleFieldChange', field, e, optionId);\n  }\n\n  handlePageRendered(e) {\n    const pageInfo = e.detail as IPageRenderEvent;\n    console.log('[FIELDS] Page rendered', pageInfo);\n\n    const fields = TemplateStore.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n    // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n    console.log('[FIELDS] Fields on page', fields);\n    fields.forEach(field => {\n      const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(TemplateStore.roleNames, field.role_name), this.handleFieldChange, true, true, true);\n      // const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(this.roles, field.role_name), this.handleFieldChange, true, true, true);\n      if (!el) {\n        return;\n      }\n\n      el.addEventListener('recipientChanged', e => {\n        el.setAttribute('roleindex', getRoleIndex(TemplateStore.roleNames, e.detail));\n        // el.setAttribute('roleindex', getRoleIndex(this.roles, e.detail));\n      });\n\n      el.setAttribute('xScale', pageInfo.renderedPage.xScale);\n      el.setAttribute('yScale', pageInfo.renderedPage.yScale);\n\n      interact(el).draggable({\n        listeners: {\n          start(event) {\n            console.log('[FIELDS] Drag started', event.type, event.target);\n          },\n          move(event) {\n            const oldX = +(event.target.getAttribute('posX') || 0);\n            const oldY = +(event.target.getAttribute('posY') || 0);\n            const xScale = +(event.target.getAttribute('xScale') || 1);\n            const yScale = +(event.target.getAttribute('yScale') || 1);\n            const newX = event.dx / xScale + oldX;\n            const newY = event.dy / yScale + oldY;\n            event.target.setAttribute('posX', newX);\n            event.target.setAttribute('posy', newY);\n            updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);\n          },\n          end(event) {\n            console.log('[FIELDS] Drag ended', event);\n            // event.target.setAttribute('posX', 0);\n            // event.target.setAttribute('posy', 0);\n            // updateCssTransform(event.target, 'translate', `${0}px, ${0}px`);\n          },\n        },\n      });\n    });\n  }\n\n  render() {\n    const testField: ITemplateField = {\n      template_id: '',\n      name: 'test',\n      role_name: 'Recipient 1',\n      type: 'textbox',\n      required: true,\n      setting: {\n        x: 0,\n        y: 0,\n      },\n      page_sequence: 0,\n    };\n\n    if (TemplateStore.loading) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        {TemplateStore.template ? (\n          <Fragment>\n            <div class=\"fields-bar\" ref={el => (this.toolbarEl = el as HTMLDivElement)}>\n              <div class=\"label\">Add Field:</div>\n              <verdocs-toolbar-icon icon={iconSingleline} text=\"Single-line Text Box\" onPress={() => console.log('single press')} />\n              <verdocs-toolbar-icon icon={iconMultiline} text=\"Multi-line Text Box\" onPress={() => console.log('multi press')} />\n              <verdocs-toolbar-icon icon={iconCheck} text=\"Checkbox\" onPress={() => console.log('check press')} />\n              <verdocs-toolbar-icon icon={iconRadio} text=\"Radio Button\" onPress={() => console.log('radio press')} />\n              <verdocs-toolbar-icon icon={iconDatepicker} text=\"Date Picker\" onPress={() => console.log('date press')} />\n              <verdocs-toolbar-icon icon={iconSignature} text=\"Signature\" onPress={() => console.log('signature press')} />\n              <verdocs-toolbar-icon icon={iconInitial} text=\"Initials\" onPress={() => console.log('initial press')} />\n              <div style={{flex: '1'}} />\n              <button onClick={() => console.log('save')} disabled={true} class=\"operation\">\n                Save\n              </button>\n              <button onClick={() => console.log('close')} class=\"operation\">\n                Close\n              </button>\n            </div>\n\n            <div class=\"page-0\" ref={el => (this.page0El = el as HTMLDivElement)}>\n              <div class=\"user-placed-fields\">\n                <div class=\"title\">User-Placed Fields</div>\n                <verdocs-field-signature\n                  field={testField}\n                  style={{width: '82px', height: '41px', left: '20px', top: '40px', transform: 'scale(1,1)', backgroundColor: getRGBA(0)}}\n                  moveable={true}\n                  editable={true}\n                />\n              </div>\n            </div>\n\n            <verdocs-view\n              templateId={this.templateId}\n              endpoint={this.endpoint}\n              onPageRendered={e => this.handlePageRendered(e)}\n              pageLayers={[\n                {name: 'page', type: 'canvas'},\n                {name: 'controls', type: 'div'},\n              ]}\n            />\n          </Fragment>\n        ) : (\n          <div>Error loading Template. Please try again later.</div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-template-properties2.js

@@ -22,6 +22,7 @@ const VerdocsTemplateProperties = /*@__PURE__*/ proxyCustomElement(class extends
     this.templateId = '';
     this.template = null;
     this.name = '';
+    this.visibility = '';
     this.sendReminders = false;
     this.firstReminderDays = '1';
     this.reminderDays = '1';
@@ -59,7 +60,19 @@ const VerdocsTemplateProperties = /*@__PURE__*/ proxyCustomElement(class extends
   handleSubmit(e) {
     var _a;
     e.stopPropagation();
-    (_a = this.settingsUpdated) === null || _a === void 0 ? void 0 : _a.emit();
+    console.log('new', {
+      name: this.name,
+      visibility: this.visibility,
+      firstReminderDays: +this.firstReminderDays,
+      reminderDays: +this.reminderDays,
+      sendReminders: this.sendReminders,
+    });
+    (_a = this.settingsUpdated) === null || _a === void 0 ? void 0 : _a.emit({
+      name: this.name,
+      firstReminderDays: +this.firstReminderDays,
+      reminderDays: +this.reminderDays,
+      sendReminders: this.sendReminders,
+    });
     // this.contactSelected?.emit({
     //   delegator: this.delegator,
     // });
@@ -80,6 +93,7 @@ const VerdocsTemplateProperties = /*@__PURE__*/ proxyCustomElement(class extends
     "templateId": [1, "template-id"],
     "template": [32],
     "name": [32],
+    "visibility": [32],
     "sendReminders": [32],
     "firstReminderDays": [32],
     "reminderDays": [32]

package/dist/components/verdocs-template-properties2.js.map

@@ -1 +1 @@
-{"file":"verdocs-template-properties2.js","mappings":"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","names":["TemplateStore"],"sources":["./src/components/elements/verdocs-template-properties/verdocs-template-properties.scss?tag=verdocs-template-properties","./src/components/elements/verdocs-template-properties/verdocs-template-properties.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-properties {\n  font-family: $verdocs-primary-font;\n\n  form {\n    display: flex;\n    flex-direction: column;\n\n    h5 {\n      font-size: 14px;\n      font-weight: 400;\n      margin: 0 0 6px 0;\n    }\n\n    .row {\n      display: flex;\n      position: relative;\n      margin: 0 0 20px 0;\n      flex-direction: column;\n    }\n\n    fieldset {\n      width: 440px;\n      border: none;\n      max-width: 100%;\n      margin: 0 0 20px 0;\n      box-sizing: border-box;\n      padding: 20px 20px 10px 20px;\n      background-color: $verdocs-grey-4;\n      box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 12%), 0 0 2px 0 rgb(0 0 0 / 14%);\n    }\n\n    label {\n      display: block;\n      font-size: 14px;\n      font-weight: 500;\n      margin: 0 0 4px 0;\n      color: $verdocs-bg-4;\n    }\n\n    input {\n      border: none;\n      font-size: 18px;\n      padding: 3px 6px 3px 0;\n      background: transparent;\n      border-bottom: 1px solid $verdocs-dark-blue;\n\n      &:focus {\n        outline: none;\n      }\n    }\n\n    .input-row {\n      display: flex;\n      margin: 0 0 10px 0;\n      align-items: center;\n      flex-direction: row;\n\n      label {\n        flex: 1;\n        display: flex;\n      }\n\n      verdocs-text-input {\n        margin: 0;\n        display: flex;\n        flex: 0 0 40px;\n\n        input {\n          text-align: center;\n        }\n      }\n\n      verdocs-checkbox {\n        display: flex;\n        flex: 0 0 40px;\n        justify-content: center;\n      }\n    }\n\n    .radio-row {\n      display: flex;\n      position: relative;\n      margin: 0 0 10px 0;\n      flex-direction: row;\n\n      verdocs-radio-button {\n        display: flex;\n        flex: 0 0 30px;\n      }\n\n      label {\n        display: flex;\n        flex-direction: column;\n\n        .title {\n          font-size: 16px;\n          font-weight: 500;\n        }\n\n        .description {\n          font-size: 14px;\n          font-weight: 400;\n        }\n      }\n    }\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 8px;\n    margin-top: 16px;\n    flex-direction: row;\n\n    .flex-fill {\n      flex: 1;\n    }\n  }\n\n  ::placeholder {\n    color: $verdocs-bg-2;\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop, State} from '@stencil/core';\nimport {getTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport {ITemplate} from '@verdocs/js-sdk/Templates/Types';\nimport {SDKError} from '../../../utils/errors';\nimport TemplateStore from '../../../utils/templateStore';\n\n/**\n * Displays a collection of settings boxes that allow a user to configure a template's behavior.\n */\n@Component({\n  tag: 'verdocs-template-properties',\n  styleUrl: 'verdocs-template-properties.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateProperties {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The template ID to edit.\n   */\n  @Prop() templateId: string = '';\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the user completes the step.\n   */\n  @Event({composed: true}) settingsUpdated: EventEmitter;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  @State() template: ITemplate | null = null;\n  @State() name: string = '';\n  @State() sendReminders = false;\n  @State() firstReminderDays = '1';\n  @State() reminderDays = '1';\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n\n      console.log(`[PROPERTIES] Loading template ${this.templateId}`);\n      const template = await getTemplate(this.endpoint, this.templateId);\n      if (!template) {\n        console.log('[PREVIEW] Unable to load template');\n        return;\n      }\n\n      console.log('[PROPERTIES] Got template', template);\n      this.template = template;\n      TemplateStore.template = template;\n      this.name = template.name;\n      this.sendReminders = template.reminder_id !== null;\n    } catch (e) {\n      console.log('[PROPERTIES] Error loading template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  handleMessageChange(e: any) {\n    console.log(e);\n    // this.message = e.target.value;\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.cancel?.emit();\n  }\n\n  handleSubmit(e) {\n    e.stopPropagation();\n\n    this.settingsUpdated?.emit();\n\n    // this.contactSelected?.emit({\n    //   delegator: this.delegator,\n    // });\n  }\n\n  render() {\n    console.log('vals', {firstReminderDays: this.firstReminderDays, reminderDays: this.reminderDays, name: this.name});\n    return (\n      <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n        <h5>Template Name</h5>\n        <fieldset>\n          <verdocs-text-input\n            value={this.name}\n            autocomplete=\"off\"\n            onInput={(e: any) => {\n              this.name = e.target.value;\n            }}\n          />\n        </fieldset>\n\n        <h5>Reminders</h5>\n        <fieldset>\n          <div class=\"input-row\">\n            <label>Send Automatic Reminders</label>\n            <verdocs-checkbox name=\"automatic-reminders\" checked={this.sendReminders} value=\"on\" onSelected={e => (this.sendReminders = e.detail.value === 'on')} />\n          </div>\n\n          <div class=\"input-row\">\n            <label>Days Before First Reminder</label>\n            <verdocs-text-input\n              value={this.firstReminderDays}\n              onInput={(e: any) => {\n                this.firstReminderDays = e.target.value;\n              }}\n            />\n          </div>\n          <div class=\"input-row\">\n            <label>Days Between Reminders</label>\n            <verdocs-text-input\n              value={this.reminderDays}\n              onInput={(e: any) => {\n                this.firstReminderDays = e.target.value;\n              }}\n            />\n          </div>\n        </fieldset>\n\n        <h5>Template Visibility</h5>\n        <fieldset>\n          <div class=\"radio-row\">\n            <verdocs-radio-button name=\"visibility\" checked={true} value=\"private\" />\n            <label htmlFor=\"verdocs-radio-button-visibility-private\">\n              <div class=\"title\">Private</div>\n              <div class=\"description\">Only you can share and use this template</div>\n            </label>\n          </div>\n          <div class=\"radio-row\">\n            <verdocs-radio-button name=\"visibility\" checked={true} value=\"shared\" />\n            <label htmlFor=\"verdocs-radio-button-visibility-shared\">\n              <div class=\"title\">Shared to your organization</div>\n              <div class=\"description\">Give access to your organization to share and use this template</div>\n            </label>\n          </div>\n          <div class=\"radio-row\">\n            <verdocs-radio-button name=\"visibility\" checked={true} value=\"shared_public\" />\n            <label htmlFor=\"verdocs-radio-button-visibility-shared_public\">\n              <div class=\"title\">Shared to your organization and Public</div>\n              <div class=\"description\">Give access to your organization to share this template, and anyone on the Web can find and use this template</div>\n            </label>\n          </div>\n          <div class=\"radio-row\">\n            <verdocs-radio-button name=\"visibility\" checked={true} value=\"public\" />\n            <label htmlFor=\"verdocs-radio-button-visibility-public\">\n              <div class=\"title\">Public</div>\n              <div class=\"description\">Anyone on the Web can find and use this template</div>\n            </label>\n          </div>\n        </fieldset>\n\n        <div class=\"buttons\">\n          <div class=\"flex-fill\" />\n\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onPress={e => this.handleCancel(e)} />\n          <verdocs-button label=\"OK\" size=\"small\" onPress={e => this.handleSubmit(e)} />\n        </div>\n      </form>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-template-properties2.js","mappings":"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","names":["TemplateStore"],"sources":["./src/components/elements/verdocs-template-properties/verdocs-template-properties.scss?tag=verdocs-template-properties","./src/components/elements/verdocs-template-properties/verdocs-template-properties.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-properties {\n  font-family: $verdocs-primary-font;\n\n  form {\n    display: flex;\n    flex-direction: column;\n\n    h5 {\n      font-size: 14px;\n      font-weight: 400;\n      margin: 0 0 6px 0;\n    }\n\n    .row {\n      display: flex;\n      position: relative;\n      margin: 0 0 20px 0;\n      flex-direction: column;\n    }\n\n    fieldset {\n      width: 440px;\n      border: none;\n      max-width: 100%;\n      margin: 0 0 20px 0;\n      box-sizing: border-box;\n      padding: 20px 20px 10px 20px;\n      background-color: $verdocs-grey-4;\n      box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 12%), 0 0 2px 0 rgb(0 0 0 / 14%);\n    }\n\n    label {\n      display: block;\n      font-size: 14px;\n      font-weight: 500;\n      margin: 0 0 4px 0;\n      color: $verdocs-bg-4;\n    }\n\n    input {\n      border: none;\n      font-size: 18px;\n      padding: 3px 6px 3px 0;\n      background: transparent;\n      border-bottom: 1px solid $verdocs-dark-blue;\n\n      &:focus {\n        outline: none;\n      }\n    }\n\n    .input-row {\n      display: flex;\n      margin: 0 0 10px 0;\n      align-items: center;\n      flex-direction: row;\n\n      label {\n        flex: 1;\n        display: flex;\n      }\n\n      verdocs-text-input {\n        margin: 0;\n        display: flex;\n        flex: 0 0 40px;\n\n        input {\n          text-align: center;\n        }\n      }\n\n      verdocs-checkbox {\n        display: flex;\n        flex: 0 0 40px;\n        justify-content: center;\n      }\n    }\n\n    .radio-row {\n      display: flex;\n      position: relative;\n      margin: 0 0 10px 0;\n      flex-direction: row;\n\n      verdocs-radio-button {\n        display: flex;\n        flex: 0 0 30px;\n      }\n\n      label {\n        display: flex;\n        flex-direction: column;\n\n        .title {\n          font-size: 16px;\n          font-weight: 500;\n        }\n\n        .description {\n          font-size: 14px;\n          font-weight: 400;\n        }\n      }\n    }\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 8px;\n    margin-top: 16px;\n    flex-direction: row;\n\n    .flex-fill {\n      flex: 1;\n    }\n  }\n\n  ::placeholder {\n    color: $verdocs-bg-2;\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop, State} from '@stencil/core';\nimport {getTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport {ITemplate} from '@verdocs/js-sdk/Templates/Types';\nimport {SDKError} from '../../../utils/errors';\nimport TemplateStore from '../../../utils/templateStore';\n\n/**\n * Displays a collection of settings boxes that allow a user to configure a template's behavior.\n */\n@Component({\n  tag: 'verdocs-template-properties',\n  styleUrl: 'verdocs-template-properties.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateProperties {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The template ID to edit.\n   */\n  @Prop() templateId: string = '';\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the user completes the step.\n   */\n  @Event({composed: true}) settingsUpdated: EventEmitter<{name: string; sendReminders: boolean; firstReminderDays: number; reminderDays: number}>;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  @State() template: ITemplate | null = null;\n  @State() name: string = '';\n  @State() visibility: string = '';\n  @State() sendReminders = false;\n  @State() firstReminderDays = '1';\n  @State() reminderDays = '1';\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n\n      console.log(`[PROPERTIES] Loading template ${this.templateId}`);\n      const template = await getTemplate(this.endpoint, this.templateId);\n      if (!template) {\n        console.log('[PREVIEW] Unable to load template');\n        return;\n      }\n\n      console.log('[PROPERTIES] Got template', template);\n      this.template = template;\n      TemplateStore.template = template;\n      this.name = template.name;\n      this.sendReminders = template.reminder_id !== null;\n    } catch (e) {\n      console.log('[PROPERTIES] Error loading template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  handleMessageChange(e: any) {\n    console.log(e);\n    // this.message = e.target.value;\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.cancel?.emit();\n  }\n\n  handleSubmit(e) {\n    e.stopPropagation();\n\n    console.log('new', {\n      name: this.name,\n      visibility: this.visibility,\n      firstReminderDays: +this.firstReminderDays,\n      reminderDays: +this.reminderDays,\n      sendReminders: this.sendReminders,\n    });\n    this.settingsUpdated?.emit({\n      name: this.name,\n      firstReminderDays: +this.firstReminderDays,\n      reminderDays: +this.reminderDays,\n      sendReminders: this.sendReminders,\n    });\n\n    // this.contactSelected?.emit({\n    //   delegator: this.delegator,\n    // });\n  }\n\n  render() {\n    console.log('vals', {firstReminderDays: this.firstReminderDays, reminderDays: this.reminderDays, name: this.name});\n    return (\n      <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n        <h5>Template Name</h5>\n        <fieldset>\n          <verdocs-text-input\n            value={this.name}\n            autocomplete=\"off\"\n            onInput={(e: any) => {\n              this.name = e.target.value;\n            }}\n          />\n        </fieldset>\n\n        <h5>Reminders</h5>\n        <fieldset>\n          <div class=\"input-row\">\n            <label>Send Automatic Reminders</label>\n            <verdocs-checkbox name=\"automatic-reminders\" checked={this.sendReminders} value=\"on\" onSelected={e => (this.sendReminders = e.detail.value === 'on')} />\n          </div>\n\n          <div class=\"input-row\">\n            <label>Days Before First Reminder</label>\n            <verdocs-text-input\n              value={this.firstReminderDays}\n              onInput={(e: any) => {\n                this.firstReminderDays = e.target.value;\n              }}\n            />\n          </div>\n          <div class=\"input-row\">\n            <label>Days Between Reminders</label>\n            <verdocs-text-input\n              value={this.reminderDays}\n              onInput={(e: any) => {\n                this.firstReminderDays = e.target.value;\n              }}\n            />\n          </div>\n        </fieldset>\n\n        <h5>Template Visibility</h5>\n        <fieldset>\n          <div class=\"radio-row\">\n            <verdocs-radio-button name=\"visibility\" checked={true} value=\"private\" />\n            <label htmlFor=\"verdocs-radio-button-visibility-private\">\n              <div class=\"title\">Private</div>\n              <div class=\"description\">Only you can share and use this template</div>\n            </label>\n          </div>\n          <div class=\"radio-row\">\n            <verdocs-radio-button name=\"visibility\" checked={true} value=\"shared\" />\n            <label htmlFor=\"verdocs-radio-button-visibility-shared\">\n              <div class=\"title\">Shared to your organization</div>\n              <div class=\"description\">Give access to your organization to share and use this template</div>\n            </label>\n          </div>\n          <div class=\"radio-row\">\n            <verdocs-radio-button name=\"visibility\" checked={true} value=\"shared_public\" />\n            <label htmlFor=\"verdocs-radio-button-visibility-shared_public\">\n              <div class=\"title\">Shared to your organization and Public</div>\n              <div class=\"description\">Give access to your organization to share this template, and anyone on the Web can find and use this template</div>\n            </label>\n          </div>\n          <div class=\"radio-row\">\n            <verdocs-radio-button name=\"visibility\" checked={true} value=\"public\" />\n            <label htmlFor=\"verdocs-radio-button-visibility-public\">\n              <div class=\"title\">Public</div>\n              <div class=\"description\">Anyone on the Web can find and use this template</div>\n            </label>\n          </div>\n        </fieldset>\n\n        <div class=\"buttons\">\n          <div class=\"flex-fill\" />\n\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onPress={e => this.handleCancel(e)} />\n          <verdocs-button label=\"OK\" size=\"small\" onPress={e => this.handleSubmit(e)} />\n        </div>\n      </form>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-text-input2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const verdocsTextInputCss = "verdocs-text-input{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px 0;display:block}verdocs-text-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #707ae5;border-radius:4px;background:#ffffff;color:#000;width:100%;font-size:16px;height:28px;padding:4px 12px;outline:none}verdocs-text-input .input-element::-webkit-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-moz-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:focus{outline:1px solid #7d88ff}verdocs-text-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}";
+const verdocsTextInputCss = "verdocs-text-input{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px 0;display:block}verdocs-text-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #707ae5;border-radius:4px;background:#ffffff;color:#000;width:100%;font-size:16px;height:28px;padding:4px 12px;outline:none}verdocs-text-input .input-element::-webkit-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-moz-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:focus{outline:1px solid #7d88ff}verdocs-text-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}verdocs-text-input [data-lastpass-icon-root]{display:none !important}";
 
 const VerdocsTextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/verdocs-text-input2.js.map

@@ -1 +1 @@
-{"file":"verdocs-text-input2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,s6BAAs6B;;MCWr7B,gBAAgB;;;;iBAIH,EAAE;iBAKF,EAAE;uBAKI,EAAE;wBAKD,EAAE;gBAMmD,MAAM;oBAK9D,KAAK;kBAEP,EAAE;;EAE5B,iBAAiB;;GAEhB;EAED,gBAAgB,MAAK;;;;EAMrB,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,aAAa,IACvB,iBACG,IAAI,CAAC,KAAK,GAAG,WAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,GAAG,GAAG,CAAO,GAAG,cAAO,EACzE,aACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAC,eAAe,mBACP,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,GAE/B,CACI,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/controls/verdocs-text-input/verdocs-text-input.scss?tag=verdocs-text-input","./src/components/controls/verdocs-text-input/verdocs-text-input.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-text-input {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  margin: 0 0 10px 0;\n  display: block;\n\n  .input-element {\n    box-sizing: border-box;\n    border: 1px solid $border-color;\n    border-radius: 4px;\n    background: $verdocs-grey-4;\n    color: #000;\n    width: 100%;\n    font-size: 16px;\n    height: 28px;\n    padding: 4px 12px;\n    outline: none;\n\n    &::placeholder {\n      color: $light-disabled-color;\n      opacity: 1;\n    }\n\n    &:focus {\n      outline: 1px solid $border-color-highlight;\n    }\n  }\n\n  .input-label {\n    display: block;\n    color: $label-color-light;\n    font-weight: 700;\n    font-size: 14px;\n    margin: 0 0 4px 0;\n  }\n}\n","import {Component, Prop, State, Host, h} from '@stencil/core';\n\n/**\n * Display a text input field. This is just a standard HTML input field with minimal markup to fit the\n * visual styles of the other components. Note that events \"bubble\" from the input field to the container,\n * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emmit.\n */\n@Component({\n  tag: 'verdocs-text-input',\n  styleUrl: 'verdocs-text-input.scss',\n})\nexport class VerdocsTextInput {\n  /**\n   * The initial value for the input field.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * The label for the field.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The placeholder for the field.\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * If desired, the autocomplete attribute to set.\n   */\n  @Prop() autocomplete: string = '';\n\n  /**\n   * The type of field to render. Only text-type fields are allowed here for the current styling. Additional types\n   * (e.g. a date picker) will be supported by other controls in the future.\n   */\n  @Prop() type: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' = 'text';\n\n  /**\n   * Should the field be disabled?\n   */\n  @Prop() disabled: boolean = false;\n\n  @State() _value: string = '';\n\n  componentWillLoad() {\n    // this._value = this.value;\n  }\n\n  componentDidLoad() {}\n\n  // handleInput(e: any) {\n  //   this._value = e.target.value;\n  // }\n\n  render() {\n    return (\n      <Host class=\"input-field\">\n        <label>\n          {this.label ? <div class=\"input-label\">{this.label + ':'}</div> : <div />}\n          <input\n            type={this.type}\n            value={this.value}\n            class=\"input-element\"\n            data-lpignore=\"true\"\n            disabled={this.disabled}\n            placeholder={this.placeholder}\n            autoComplete={this.autocomplete}\n            // onInput={e => this.handleInput(e)}\n          />\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-text-input2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,2+BAA2+B;;MCW1/B,gBAAgB;;;;iBAIH,EAAE;iBAKF,EAAE;uBAKI,EAAE;wBAKD,EAAE;gBAMmD,MAAM;oBAK9D,KAAK;kBAEP,EAAE;;EAE5B,iBAAiB;;GAEhB;EAED,gBAAgB,MAAK;;;;EAMrB,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,aAAa,IACvB,iBACG,IAAI,CAAC,KAAK,GAAG,WAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,GAAG,GAAG,CAAO,GAAG,cAAO,EACzE,aACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAC,eAAe,mBACP,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,GAE/B,CACI,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/controls/verdocs-text-input/verdocs-text-input.scss?tag=verdocs-text-input","./src/components/controls/verdocs-text-input/verdocs-text-input.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-text-input {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  margin: 0 0 10px 0;\n  display: block;\n\n  .input-element {\n    box-sizing: border-box;\n    border: 1px solid $border-color;\n    border-radius: 4px;\n    background: $verdocs-grey-4;\n    color: #000;\n    width: 100%;\n    font-size: 16px;\n    height: 28px;\n    padding: 4px 12px;\n    outline: none;\n\n    &::placeholder {\n      color: $light-disabled-color;\n      opacity: 1;\n    }\n\n    &:focus {\n      outline: 1px solid $border-color-highlight;\n    }\n  }\n\n  .input-label {\n    display: block;\n    color: $label-color-light;\n    font-weight: 700;\n    font-size: 14px;\n    margin: 0 0 4px 0;\n  }\n\n  // @see https://community.logmein.com/t5/LastPass-Support-Discussions/placeholder-text-overrides-data-lpignore-quot-true-quot/td-p/295135\n  // LastPass is ignoring the data-lpignore attribute in some cases\n  [data-lastpass-icon-root] {\n    display: none !important;\n  }\n}\n","import {Component, Prop, State, Host, h} from '@stencil/core';\n\n/**\n * Display a text input field. This is just a standard HTML input field with minimal markup to fit the\n * visual styles of the other components. Note that events \"bubble\" from the input field to the container,\n * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emmit.\n */\n@Component({\n  tag: 'verdocs-text-input',\n  styleUrl: 'verdocs-text-input.scss',\n})\nexport class VerdocsTextInput {\n  /**\n   * The initial value for the input field.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * The label for the field.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The placeholder for the field.\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * If desired, the autocomplete attribute to set.\n   */\n  @Prop() autocomplete: string = '';\n\n  /**\n   * The type of field to render. Only text-type fields are allowed here for the current styling. Additional types\n   * (e.g. a date picker) will be supported by other controls in the future.\n   */\n  @Prop() type: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' = 'text';\n\n  /**\n   * Should the field be disabled?\n   */\n  @Prop() disabled: boolean = false;\n\n  @State() _value: string = '';\n\n  componentWillLoad() {\n    // this._value = this.value;\n  }\n\n  componentDidLoad() {}\n\n  // handleInput(e: any) {\n  //   this._value = e.target.value;\n  // }\n\n  render() {\n    return (\n      <Host class=\"input-field\">\n        <label>\n          {this.label ? <div class=\"input-label\">{this.label + ':'}</div> : <div />}\n          <input\n            type={this.type}\n            value={this.value}\n            class=\"input-element\"\n            data-lpignore=\"true\"\n            disabled={this.disabled}\n            placeholder={this.placeholder}\n            autoComplete={this.autocomplete}\n            // onInput={e => this.handleInput(e)}\n          />\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-toggle-button2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/verdocs-toggle-button2.js.map

@@ -1 +1 @@
-{"file":"verdocs-toggle-button2.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,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE,IAC7B,IAAI,CAAC,IAAI,IACR,cAAQ,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,KAEnG,cAAQ,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":[],"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-button2.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,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE,IAC7B,IAAI,CAAC,IAAI,IACR,cAAQ,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,KAEnG,cAAQ,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":[],"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/components/verdocs-view-envelope-document.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsViewEnvelopeDocument extends Components.VerdocsViewEnvelopeDocument, HTMLElement {}
+export const VerdocsViewEnvelopeDocument: {
+  prototype: VerdocsViewEnvelopeDocument;
+  new (): VerdocsViewEnvelopeDocument;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/verdocs-view-envelope-document.js

@@ -0,0 +1,8 @@
+import { V as VerdocsViewEnvelopeDocument$1, d as defineCustomElement$1 } from './verdocs-view-envelope-document2.js';
+
+const VerdocsViewEnvelopeDocument = VerdocsViewEnvelopeDocument$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsViewEnvelopeDocument, defineCustomElement };
+
+//# sourceMappingURL=verdocs-view-envelope-document.js.map

package/dist/components/verdocs-view-envelope-document.js.map

@@ -0,0 +1 @@
+{"file":"verdocs-view-envelope-document.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}