@verdocs/web-sdk 1.9.10 → 1.9.15

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

@@ -0,0 +1,276 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1329d89c.js');
+const Envelopes = require('./Envelopes-eacee000.js');
+require('./Types-da57ce69.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-8c408e5b.js');
+const utils = require('./utils-beee79a1.js');
+const errors = require('./errors-0396da3d.js');
+require('./index-eb130f52.js');
+
+const verdocsViewCss = "verdocs-view{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-view div,verdocs-view canvas{-webkit-box-sizing:border-box;box-sizing:border-box}";
+
+const VerdocsView = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sdkError = index.createEvent(this, "sdkError", 7);
+    this.endpoint = VerdocsEndpoint.VerdocsEndpoint.getDefault();
+    this.envelopeId = '';
+  }
+  componentWillLoad() {
+    this.endpoint.loadSession();
+  }
+  // TODO: Handling signing vs preview-as-user cases
+  // TODO: Handle anonymous case and failure to load due to not being logged in
+  async componentDidLoad() {
+    var _a, _b, _c;
+    if (!this.envelopeId) {
+      console.error(`[VIEW] Missing reuqired envelopeId`);
+      return;
+    }
+    try {
+      await Envelopes.getEnvelopeById(this.endpoint, this.envelopeId);
+    }
+    catch (e) {
+      (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+    }
+  }
+  // Determine whether a page is "rotated" (in either direction)
+  // isRotated(rotation) {
+  //   return rotation !== 0 && rotation % 180 !== 0;
+  // }
+  // Render one document page. Note that pageNumber is 1-based.
+  // async renderPage(pageNumber: number): Promise<void> {
+  //   const domPage = this.domPages[pageNumber];
+  //
+  //   // Two async operations happen here, loading the PDF and rendering the DOM div/canvas placeholders to draw the pages on.
+  //   if (!domPage) {
+  //     console.log('[VIEW] Skipping rendering page not yet in DOM', {pageNumber});
+  //     return;
+  //   }
+  //
+  //   const pageMetrics = this.sourcePageMetrics[pageNumber];
+  //
+  //   console.log('[VIEW] Rendering page', {pageNumber, pageMetrics, domPage});
+  //   try {
+  //     // const pdfPage = await this.pdfDocument.getPage(pageNumber);
+  //     // const viewport = pdfPage.getViewport({scale: domPage.xScale});
+  //     // console.log('[VIEW] Page viewport', domPage.xScale, viewport);
+  //
+  //     // const canvas = document.getElementById(`${domPage.containerId}-page`) as HTMLCanvasElement | null;
+  //     // if (!canvas) {
+  //     //   console.log('[VIEW] Unable to find canvas element');
+  //     //   return;
+  //     // }
+  //     //
+  //     // canvas.width = domPage.renderedWidth;
+  //     // canvas.height = domPage.renderedHeight;
+  //     // const canvasContext = canvas.getContext('2d');
+  //     // canvasContext.clearRect(0, 0, domPage.renderedWidth, domPage.renderedHeight);
+  //     // await pdfPage.render({canvasContext, viewport});
+  //
+  //     this.pageRendered.emit({
+  //       renderedPage: domPage,
+  //       sourcePageMetrics: pageMetrics,
+  //       pages: this.domPages,
+  //     });
+  //   } catch (e) {
+  //     this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));
+  //     console.warn('[VIEW] Error rendering page', e);
+  //   }
+  // }
+  // async renderPages(): Promise<void> {
+  //   const pageNumbersToRender = integerSequence(1, this.numPages);
+  //   for await (let pageNumber of pageNumbersToRender) {
+  //     try {
+  //       await this.renderPage(pageNumber);
+  //     } catch (e) {
+  //       this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));
+  //       console.warn('[VIEW] Error rendering pages', e);
+  //     }
+  //   }
+  // }
+  // onProgress(progress: OnProgressParameters) {
+  //   console.log(`[VIEW] Progress ${Math.floor((progress.loaded / progress.total) * 100)} (${progress.loaded} / ${progress.total})`);
+  //   this.loadProgress = Math.floor((100 * progress.loaded) / progress.total);
+  // }
+  // After a document is done loading, go through its pages to get their dimensions
+  // async parsePageMetrics(pdfDocument: pdfjsLib.PDFDocumentProxy) {
+  //   const pageNumbersToRender = integerSequence(1, pdfDocument.numPages);
+  //
+  //   for await (let pageNumber of pageNumbersToRender) {
+  //     const pdfPage = await pdfDocument.getPage(1);
+  //     const [pageX0, pageY0, pageX1, pageY1] = pdfPage.view;
+  //     this.sourcePageMetrics[pageNumber] = {width: pageX1 - pageX0, height: pageY1 - pageY0};
+  //   }
+  //
+  //   console.log('[VIEW] Parsed page metrics', this.sourcePageMetrics);
+  // }
+  // loadAndRender(src: string): void {
+  //   console.log('[VIEW] Loading', src);
+  //
+  //   const token = this.endpoint.getToken();
+  //   const httpHeaders = token ? {Authorization: `Bearer ${token}`} : {};
+  //
+  //   const source = {
+  //     url: src,
+  //     cMapUrl: CMAPS_URL,
+  //     cMapPacked: true,
+  //     httpHeaders,
+  //     withCredentials: true,
+  //     stopAtErrors: true,
+  //     verbosity: pdfjsLib.VerbosityLevel.WARNINGS,
+  //     // verbosity: pdfjsLib.VerbosityLevel.INFOS,
+  //   } as DocumentInitParameters;
+  //
+  //   // @ts-ignore
+  //   const loadingTask = pdf.getDocument(source, null, null, this.onProgress);
+  //   loadingTask.onProgress = this.onProgress;
+  //   loadingTask.promise
+  //     .then(async (pdfDocument: pdfjsLib.PDFDocumentProxy) => {
+  //       await this.parsePageMetrics(pdfDocument);
+  //
+  //       this.pdfDocument = pdfDocument;
+  //       this.numPages = pdfDocument.numPages;
+  //       this.fingerprints = pdfDocument.fingerprints;
+  //       console.log(`[VIEW] Got PDF document fingerprints "${this.fingerprints.join(', ')}", ${this.numPages} page(s)`);
+  //
+  //       // We don't try to render the pages here, setting loadProtress triggers that by adding the individual page entries in
+  //       // DOM in render() below. Each page then fires onPageRendered when it is ready to receive content.
+  //       this.loadProgress = 100;
+  //     })
+  //     .catch(e => {
+  //       this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));
+  //       console.log('[VIEW] Loading error', e);
+  //     });
+  // }
+  // async handlePageRendered(e: any) {
+  //   e.stopPropagation();
+  //
+  //   const domPage = e.detail as IDocumentPageInfo;
+  //   this.domPages[domPage.pageNumber] = domPage;
+  //   await this.renderPage(domPage.pageNumber);
+  // }
+  async handleFieldChange(field, e, optionId) {
+    console.log('fieldChange', field, e);
+    switch (field.type) {
+      case 'textbox':
+        Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value: e.detail })
+          .then(r => console.log('Update result', r))
+          .catch(e => {
+          var _a, _b, _c, _d, _e, _f;
+          (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+          if (((_d = e.response) === null || _d === void 0 ? void 0 : _d.status) === 401 && ((_f = (_e = e.response) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.error) === 'jwt expired') {
+            console.log('jwt expired');
+          }
+          console.log('Error updating', e);
+        });
+        break;
+      case 'checkbox_group':
+        Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value: { options: [{ id: optionId, checked: e.detail }] } })
+          .then(r => console.log('Update result', r))
+          .catch(e => {
+          var _a, _b, _c;
+          (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+          console.log('Error updating', e);
+        });
+        break;
+      case 'radio_button_group':
+        const options = field.settings.options.map(option => ({ id: option.id, selected: optionId === option.id }));
+        Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value: { options } })
+          .then(r => console.log('Update result', r))
+          .catch(e => {
+          var _a, _b, _c;
+          (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+          console.log('Error updating', e);
+        });
+        break;
+      case 'dropdown':
+        Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value: e.detail })
+          .then(r => console.log('Update result', r))
+          .catch(e => {
+          var _a, _b, _c;
+          (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+          console.log('Error updating', e);
+        });
+        break;
+      case 'initial':
+        console.log('Got initial', e.detail);
+        break;
+      case 'signature':
+        console.log('Got signature', e.detail);
+        break;
+    }
+  }
+  handlePageRendered(e) {
+    const pageInfo = e.detail;
+    console.log('[SIGN] Page rendered', pageInfo);
+    Envelopes.state.envelope.recipients.map(recipient => {
+      const fields = recipient.fields.filter(field => field.page === pageInfo.pageNumber);
+      // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
+      console.log('[SIGN] Fields on page', fields);
+      fields.forEach(field => {
+        const el = utils.renderDocumentField(field, pageInfo, utils.getRoleIndex(Envelopes.state.roleNames, field.recipient_role), { disabled: true, editable: false, draggable: false });
+        if (!el) {
+          return;
+        }
+        el.addEventListener('input', e => {
+          console.log('Field input', e.target.value, e.target);
+          this.handleFieldChange(field, e);
+        });
+        el.setAttribute('xScale', pageInfo.xScale);
+        el.setAttribute('yScale', pageInfo.yScale);
+        // interact(el).draggable({
+        //   listeners: {
+        //     start(event) {
+        //       console.log('[FIELDS] Drag started', event.type, event.target);
+        //     },
+        //     move(event) {
+        //       const oldX = +(event.target.getAttribute('posX') || 0);
+        //       const oldY = +(event.target.getAttribute('posY') || 0);
+        //       const xScale = +(event.target.getAttribute('xScale') || 1);
+        //       const yScale = +(event.target.getAttribute('yScale') || 1);
+        //       const newX = event.dx / xScale + oldX;
+        //       const newY = event.dy / yScale + oldY;
+        //       event.target.setAttribute('posX', newX);
+        //       event.target.setAttribute('posy', newY);
+        //       updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
+        //     },
+        //     end(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`);
+        //     },
+        //   },
+        // });
+      });
+    });
+  }
+  render() {
+    var _a;
+    console.log('[VIEW] Rendering', Envelopes.state.error, Envelopes.state.loading, Envelopes.state.envelope);
+    if (Envelopes.state.loading || !Envelopes.state.envelope) {
+      return (index.h(index.Host, null, index.h("verdocs-loader", null)));
+    }
+    if (Envelopes.state.error) {
+      return (index.h(index.Host, null, index.h("div", null, Envelopes.state.error)));
+    }
+    return (index.h(index.Host, null, (((_a = Envelopes.state.envelope) === null || _a === void 0 ? void 0 : _a.documents) || []).map(envelopeDocument => {
+      const pages = [...((envelopeDocument === null || envelopeDocument === void 0 ? void 0 : envelopeDocument.pages) || [])];
+      pages.sort((a, b) => a.sequence - b.sequence);
+      return (index.h(index.Fragment, null, pages.map(page => (index.h("verdocs-document-page", { pageImageUri: page.display_uri, virtualWidth: 612, virtualHeight: 792, pageNumber: page.sequence, onPageRendered: e => this.handlePageRendered(e), layers: [
+          { name: 'page', type: 'canvas' },
+          { name: 'controls', type: 'div' },
+        ] })))));
+    })));
+  }
+  get component() { return index.getElement(this); }
+};
+VerdocsView.style = verdocsViewCss;
+
+exports.verdocs_view = VerdocsView;
+
+//# sourceMappingURL=verdocs-view.cjs.entry.js.map

package/dist/cjs/verdocs-view.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"verdocs-view.entry.cjs.js","mappings":"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","names":["VerdocsEndpoint","getEnvelopeById","SDKError","Envelopes.updateEnvelopeField","EnvelopeStore","renderDocumentField","getRoleIndex","h","Host","Fragment"],"sources":["./src/components/embeds/verdocs-view/verdocs-view.scss?tag=verdocs-view","./src/components/embeds/verdocs-view/verdocs-view.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-view {\n  font-family: $verdocs-primary-font;\n  display: flex;\n  padding: 15px;\n  row-gap: 15px;\n  min-height: 200px;\n  position: relative;\n  align-items: center;\n  box-sizing: border-box;\n  flex-direction: column;\n\n  div,\n  canvas {\n    box-sizing: border-box;\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Envelopes} from '@verdocs/js-sdk/Envelopes';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Element, Event, Host, Prop, EventEmitter, Fragment} from '@stencil/core';\nimport {getRoleIndex, renderDocumentField} from '../../../utils/utils';\nimport {getEnvelopeById} from '../../../utils/Envelopes';\nimport EnvelopeStore from '../../../utils/envelopeStore';\nimport {IDocumentPageInfo} from '../../../utils/Types';\nimport {SDKError} from '../../../utils/errors';\n\n/**\n * Render the documents attached to an envelope in read-only (view) mode. All documents are displayed in order.\n */\n@Component({\n  tag: 'verdocs-view',\n  styleUrl: 'verdocs-view.scss',\n  shadow: false,\n})\nexport class VerdocsView {\n  @Element() component: HTMLElement;\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 envelope ID to render. Set ONE OF templateId or envelopeId. If both are set, envelopeId will be ignored.\n   */\n  @Prop() envelopeId: string = '';\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  componentWillLoad() {\n    this.endpoint.loadSession();\n  }\n\n  // TODO: Handling signing vs preview-as-user cases\n  // TODO: Handle anonymous case and failure to load due to not being logged in\n  async componentDidLoad() {\n    if (!this.envelopeId) {\n      console.error(`[VIEW] Missing reuqired envelopeId`);\n      return;\n    }\n\n    try {\n      await getEnvelopeById(this.endpoint, this.envelopeId);\n    } catch (e) {\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  // Determine whether a page is \"rotated\" (in either direction)\n  // isRotated(rotation) {\n  //   return rotation !== 0 && rotation % 180 !== 0;\n  // }\n\n  // Render one document page. Note that pageNumber is 1-based.\n  // async renderPage(pageNumber: number): Promise<void> {\n  //   const domPage = this.domPages[pageNumber];\n  //\n  //   // Two async operations happen here, loading the PDF and rendering the DOM div/canvas placeholders to draw the pages on.\n  //   if (!domPage) {\n  //     console.log('[VIEW] Skipping rendering page not yet in DOM', {pageNumber});\n  //     return;\n  //   }\n  //\n  //   const pageMetrics = this.sourcePageMetrics[pageNumber];\n  //\n  //   console.log('[VIEW] Rendering page', {pageNumber, pageMetrics, domPage});\n  //   try {\n  //     // const pdfPage = await this.pdfDocument.getPage(pageNumber);\n  //     // const viewport = pdfPage.getViewport({scale: domPage.xScale});\n  //     // console.log('[VIEW] Page viewport', domPage.xScale, viewport);\n  //\n  //     // const canvas = document.getElementById(`${domPage.containerId}-page`) as HTMLCanvasElement | null;\n  //     // if (!canvas) {\n  //     //   console.log('[VIEW] Unable to find canvas element');\n  //     //   return;\n  //     // }\n  //     //\n  //     // canvas.width = domPage.renderedWidth;\n  //     // canvas.height = domPage.renderedHeight;\n  //     // const canvasContext = canvas.getContext('2d');\n  //     // canvasContext.clearRect(0, 0, domPage.renderedWidth, domPage.renderedHeight);\n  //     // await pdfPage.render({canvasContext, viewport});\n  //\n  //     this.pageRendered.emit({\n  //       renderedPage: domPage,\n  //       sourcePageMetrics: pageMetrics,\n  //       pages: this.domPages,\n  //     });\n  //   } catch (e) {\n  //     this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n  //     console.warn('[VIEW] Error rendering page', e);\n  //   }\n  // }\n\n  // async renderPages(): Promise<void> {\n  //   const pageNumbersToRender = integerSequence(1, this.numPages);\n  //   for await (let pageNumber of pageNumbersToRender) {\n  //     try {\n  //       await this.renderPage(pageNumber);\n  //     } catch (e) {\n  //       this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n  //       console.warn('[VIEW] Error rendering pages', e);\n  //     }\n  //   }\n  // }\n\n  // onProgress(progress: OnProgressParameters) {\n  //   console.log(`[VIEW] Progress ${Math.floor((progress.loaded / progress.total) * 100)} (${progress.loaded} / ${progress.total})`);\n  //   this.loadProgress = Math.floor((100 * progress.loaded) / progress.total);\n  // }\n\n  // After a document is done loading, go through its pages to get their dimensions\n  // async parsePageMetrics(pdfDocument: pdfjsLib.PDFDocumentProxy) {\n  //   const pageNumbersToRender = integerSequence(1, pdfDocument.numPages);\n  //\n  //   for await (let pageNumber of pageNumbersToRender) {\n  //     const pdfPage = await pdfDocument.getPage(1);\n  //     const [pageX0, pageY0, pageX1, pageY1] = pdfPage.view;\n  //     this.sourcePageMetrics[pageNumber] = {width: pageX1 - pageX0, height: pageY1 - pageY0};\n  //   }\n  //\n  //   console.log('[VIEW] Parsed page metrics', this.sourcePageMetrics);\n  // }\n\n  // loadAndRender(src: string): void {\n  //   console.log('[VIEW] Loading', src);\n  //\n  //   const token = this.endpoint.getToken();\n  //   const httpHeaders = token ? {Authorization: `Bearer ${token}`} : {};\n  //\n  //   const source = {\n  //     url: src,\n  //     cMapUrl: CMAPS_URL,\n  //     cMapPacked: true,\n  //     httpHeaders,\n  //     withCredentials: true,\n  //     stopAtErrors: true,\n  //     verbosity: pdfjsLib.VerbosityLevel.WARNINGS,\n  //     // verbosity: pdfjsLib.VerbosityLevel.INFOS,\n  //   } as DocumentInitParameters;\n  //\n  //   // @ts-ignore\n  //   const loadingTask = pdf.getDocument(source, null, null, this.onProgress);\n  //   loadingTask.onProgress = this.onProgress;\n  //   loadingTask.promise\n  //     .then(async (pdfDocument: pdfjsLib.PDFDocumentProxy) => {\n  //       await this.parsePageMetrics(pdfDocument);\n  //\n  //       this.pdfDocument = pdfDocument;\n  //       this.numPages = pdfDocument.numPages;\n  //       this.fingerprints = pdfDocument.fingerprints;\n  //       console.log(`[VIEW] Got PDF document fingerprints \"${this.fingerprints.join(', ')}\", ${this.numPages} page(s)`);\n  //\n  //       // We don't try to render the pages here, setting loadProtress triggers that by adding the individual page entries in\n  //       // DOM in render() below. Each page then fires onPageRendered when it is ready to receive content.\n  //       this.loadProgress = 100;\n  //     })\n  //     .catch(e => {\n  //       this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n  //       console.log('[VIEW] Loading error', e);\n  //     });\n  // }\n\n  // async handlePageRendered(e: any) {\n  //   e.stopPropagation();\n  //\n  //   const domPage = e.detail as IDocumentPageInfo;\n  //   this.domPages[domPage.pageNumber] = domPage;\n  //   await this.renderPage(domPage.pageNumber);\n  // }\n\n  async handleFieldChange(field: IDocumentField, e: any, optionId?: string) {\n    console.log('fieldChange', field, e);\n    switch (field.type) {\n      case 'textbox':\n        Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, field.name, {prepared: false, value: e.detail})\n          .then(r => console.log('Update result', r))\n          .catch(e => {\n            this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n            if (e.response?.status === 401 && e.response?.data?.error === 'jwt expired') {\n              console.log('jwt expired');\n            }\n            console.log('Error updating', e);\n          });\n        break;\n\n      case 'checkbox_group':\n        Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, field.name, {prepared: false, value: {options: [{id: optionId, checked: e.detail}]}})\n          .then(r => console.log('Update result', r))\n          .catch(e => {\n            this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n            console.log('Error updating', e);\n          });\n        break;\n\n      case 'radio_button_group':\n        const options = field.settings.options.map(option => ({id: option.id, selected: optionId === option.id}));\n        Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, field.name, {prepared: false, value: {options}})\n          .then(r => console.log('Update result', r))\n          .catch(e => {\n            this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n            console.log('Error updating', e);\n          });\n        break;\n\n      case 'dropdown':\n        Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, field.name, {prepared: false, value: e.detail})\n          .then(r => console.log('Update result', r))\n          .catch(e => {\n            this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n            console.log('Error updating', e);\n          });\n        break;\n\n      case 'initial':\n        console.log('Got initial', e.detail);\n        break;\n\n      case 'signature':\n        console.log('Got signature', e.detail);\n        break;\n    }\n  }\n\n  handlePageRendered(e) {\n    const pageInfo = e.detail as IDocumentPageInfo;\n    console.log('[SIGN] Page rendered', pageInfo);\n\n    EnvelopeStore.envelope.recipients.map(recipient => {\n      const fields = recipient.fields.filter(field => field.page === pageInfo.pageNumber);\n      // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n      console.log('[SIGN] Fields on page', fields);\n      fields.forEach(field => {\n        const el = renderDocumentField(field, pageInfo, getRoleIndex(EnvelopeStore.roleNames, field.recipient_role), {disabled: true, editable: false, draggable: false});\n        if (!el) {\n          return;\n        }\n\n        el.addEventListener('input', e => {\n          console.log('Field input', e.target.value, e.target);\n          this.handleFieldChange(field, e);\n        });\n\n        el.setAttribute('xScale', pageInfo.xScale);\n        el.setAttribute('yScale', pageInfo.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\n  render() {\n    console.log('[VIEW] Rendering', EnvelopeStore.error, EnvelopeStore.loading, EnvelopeStore.envelope);\n    if (EnvelopeStore.loading || !EnvelopeStore.envelope) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    if (EnvelopeStore.error) {\n      return (\n        <Host>\n          <div>{EnvelopeStore.error}</div>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        {(EnvelopeStore.envelope?.documents || []).map(envelopeDocument => {\n          const pages = [...(envelopeDocument?.pages || [])];\n          pages.sort((a, b) => a.sequence - b.sequence);\n\n          return (\n            <Fragment>\n              {pages.map(page => (\n                <verdocs-document-page\n                  pageImageUri={page.display_uri}\n                  virtualWidth={612}\n                  virtualHeight={792}\n                  pageNumber={page.sequence}\n                  onPageRendered={e => this.handlePageRendered(e)}\n                  layers={[\n                    {name: 'page', type: 'canvas'},\n                    {name: 'controls', type: 'div'},\n                  ]}\n                />\n              ))}\n            </Fragment>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

package/dist/collection/collection-manifest.json

@@ -6,9 +6,6 @@
     "./components/elements/verdocs-search-box/verdocs-search-box.js",
     "./components/elements/verdocs-template-recipients/verdocs-template-recipients.js",
     "./components/controls/verdocs-toggle/verdocs-toggle.js",
-    "./components/embeds/verdocs-view/verdocs-view.js",
-    "./components/elements/verdocs-view-envelope-document/verdocs-view-envelope-document.js",
-    "./components/elements/verdocs-view-template-document/verdocs-view-template-document.js",
     "./components/controls/verdocs-button/verdocs-button.js",
     "./components/controls/verdocs-button-panel/verdocs-button-panel.js",
     "./components/controls/verdocs-checkbox/verdocs-checkbox.js",
@@ -51,7 +48,8 @@
     "./components/embeds/verdocs-preview/verdocs-preview.js",
     "./components/embeds/verdocs-search/verdocs-search.js",
     "./components/embeds/verdocs-send/verdocs-send.js",
-    "./components/embeds/verdocs-sign/verdocs-sign.js"
+    "./components/embeds/verdocs-sign/verdocs-sign.js",
+    "./components/embeds/verdocs-view/verdocs-view.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/dist/collection/components/controls/verdocs-button/verdocs-button.stories.js

@@ -40,20 +40,20 @@ export default {
   argTypes: {
     startIcon: { defaultValue: false, control: { type: 'boolean' } },
     endIcon: { defaultValue: false, control: { type: 'boolean' } },
-    onClick: {
+    click: {
       action: 'click',
       description: 'Fired when the user clicks the button.',
       // table: {disable: true},
     },
   },
 };
-export const Button = ({ label, size, variant, disabled, startIcon, endIcon, onClick }) => html `<verdocs-button
+export const Button = ({ label, size, variant, disabled, startIcon, endIcon, click }) => html `<verdocs-button
     .label=${label}
     .size=${size}
     .variant=${variant}
     .disabled=${disabled}
     .startIcon=${startIcon ? CircleIcon : null}
     .endIcon=${endIcon ? ArrowIcon : null}
-    @click=${onClick}
+    @click=${click}
   />`;
 //# sourceMappingURL=verdocs-button.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"verdocs-button.stories.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-button/verdocs-button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,+BAA+B;AAC/B,MAAM,UAAU,GAAG;;;;;;;;;;;;;;CAclB,CAAC;AAEF,MAAM,SAAS,GAAG;;;;;;;;;;;CAWjB,CAAC;AAEF,eAAe;EACb,KAAK,EAAE,iBAAiB;EACxB,SAAS,EAAE,gBAAgB;EAC3B,IAAI,EAAE;IACJ,KAAK,EAAE,UAAU;IACjB,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,KAAK;GAChB;EACD,QAAQ,EAAE;IACR,SAAS,EAAE,EAAC,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,EAAC,IAAI,EAAE,SAAS,EAAC,EAAC;IAC5D,OAAO,EAAE,EAAC,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,EAAC,IAAI,EAAE,SAAS,EAAC,EAAC;IAC1D,OAAO,EAAE;MACP,MAAM,EAAE,OAAO;MACf,WAAW,EAAE,wCAAwC;MACrD,0BAA0B;KAC3B;GACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAC,EAAE,EAAE,CACtF,IAAI,CAAA;aACO,KAAK;YACN,IAAI;eACD,OAAO;gBACN,QAAQ;iBACP,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI;eAC/B,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;aAC5B,OAAO;KACf,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\n// Circle with three dots in it\nconst CircleIcon = `\n  <svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#ffffff\">\n    <g>\n      <rect fill=\"none\" height=\"24\" width=\"24\"/>\n    </g>\n    <g>\n      <g>\n        <path d=\"M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10s10-4.48,10-10C22,6.48,17.52,2,12,2z M12,20c-4.42,0-8-3.58-8-8 c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z\"/>\n        <circle cx=\"7\" cy=\"12\" r=\"1.5\"/>\n        <circle cx=\"12\" cy=\"12\" r=\"1.5\"/>\n        <circle cx=\"17\" cy=\"12\" r=\"1.5\"/>\n      </g>\n    </g>\n  </svg>\n`;\n\nconst ArrowIcon = `\n<svg width=\"10\" height=\"26\" viewBox=\"0 0 10 26\" fill=\"#ffffff\" xmlns=\"http://www.w3.org/2000/svg\">\n<g clip-path=\"url(#clip0_31568_3647)\">\n<path d=\"M9.64682 13.431L2.10645 20.9466C1.86503 21.1853 1.47466 21.1853 1.23324 20.9466L0.216218 19.9411C-0.0251976 19.7025 -0.0251976 19.3165 0.216218 19.0778L6.30296 12.9993L0.216218 6.9208C-0.0251976 6.68213 -0.0251976 6.29619 0.216218 6.05752L1.23324 5.05205C1.47466 4.81338 1.86503 4.81338 2.10645 5.05205L9.64682 12.5677C9.88824 12.8064 9.88824 13.1923 9.64682 13.431Z\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_31568_3647\">\n<rect width=\"9.86207\" height=\"26\"/>\n</clipPath>\n</defs>\n</svg>\n`;\n\nexport default {\n  title: 'Controls/Button',\n  component: 'verdocs-button',\n  args: {\n    label: 'Click Me',\n    type: 'button',\n    size: 'normal',\n    variant: 'standard',\n    disabled: false,\n  },\n  argTypes: {\n    startIcon: {defaultValue: false, control: {type: 'boolean'}},\n    endIcon: {defaultValue: false, control: {type: 'boolean'}},\n    onClick: {\n      action: 'click',\n      description: 'Fired when the user clicks the button.',\n      // table: {disable: true},\n    },\n  },\n} as Meta;\n\nexport const Button = ({label, size, variant, disabled, startIcon, endIcon, onClick}) =>\n  html`<verdocs-button\n    .label=${label}\n    .size=${size}\n    .variant=${variant}\n    .disabled=${disabled}\n    .startIcon=${startIcon ? CircleIcon : null}\n    .endIcon=${endIcon ? ArrowIcon : null}\n    @click=${onClick}\n  />`;\n"]}
+{"version":3,"file":"verdocs-button.stories.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-button/verdocs-button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,+BAA+B;AAC/B,MAAM,UAAU,GAAG;;;;;;;;;;;;;;CAclB,CAAC;AAEF,MAAM,SAAS,GAAG;;;;;;;;;;;CAWjB,CAAC;AAEF,eAAe;EACb,KAAK,EAAE,iBAAiB;EACxB,SAAS,EAAE,gBAAgB;EAC3B,IAAI,EAAE;IACJ,KAAK,EAAE,UAAU;IACjB,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,KAAK;GAChB;EACD,QAAQ,EAAE;IACR,SAAS,EAAE,EAAC,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,EAAC,IAAI,EAAE,SAAS,EAAC,EAAC;IAC5D,OAAO,EAAE,EAAC,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,EAAC,IAAI,EAAE,SAAS,EAAC,EAAC;IAC1D,KAAK,EAAE;MACL,MAAM,EAAE,OAAO;MACf,WAAW,EAAE,wCAAwC;MACrD,0BAA0B;KAC3B;GACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAC,EAAE,EAAE,CACpF,IAAI,CAAA;aACO,KAAK;YACN,IAAI;eACD,OAAO;gBACN,QAAQ;iBACP,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI;eAC/B,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;aAC5B,KAAK;KACb,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\n// Circle with three dots in it\nconst CircleIcon = `\n  <svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#ffffff\">\n    <g>\n      <rect fill=\"none\" height=\"24\" width=\"24\"/>\n    </g>\n    <g>\n      <g>\n        <path d=\"M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10s10-4.48,10-10C22,6.48,17.52,2,12,2z M12,20c-4.42,0-8-3.58-8-8 c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z\"/>\n        <circle cx=\"7\" cy=\"12\" r=\"1.5\"/>\n        <circle cx=\"12\" cy=\"12\" r=\"1.5\"/>\n        <circle cx=\"17\" cy=\"12\" r=\"1.5\"/>\n      </g>\n    </g>\n  </svg>\n`;\n\nconst ArrowIcon = `\n<svg width=\"10\" height=\"26\" viewBox=\"0 0 10 26\" fill=\"#ffffff\" xmlns=\"http://www.w3.org/2000/svg\">\n<g clip-path=\"url(#clip0_31568_3647)\">\n<path d=\"M9.64682 13.431L2.10645 20.9466C1.86503 21.1853 1.47466 21.1853 1.23324 20.9466L0.216218 19.9411C-0.0251976 19.7025 -0.0251976 19.3165 0.216218 19.0778L6.30296 12.9993L0.216218 6.9208C-0.0251976 6.68213 -0.0251976 6.29619 0.216218 6.05752L1.23324 5.05205C1.47466 4.81338 1.86503 4.81338 2.10645 5.05205L9.64682 12.5677C9.88824 12.8064 9.88824 13.1923 9.64682 13.431Z\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_31568_3647\">\n<rect width=\"9.86207\" height=\"26\"/>\n</clipPath>\n</defs>\n</svg>\n`;\n\nexport default {\n  title: 'Controls/Button',\n  component: 'verdocs-button',\n  args: {\n    label: 'Click Me',\n    type: 'button',\n    size: 'normal',\n    variant: 'standard',\n    disabled: false,\n  },\n  argTypes: {\n    startIcon: {defaultValue: false, control: {type: 'boolean'}},\n    endIcon: {defaultValue: false, control: {type: 'boolean'}},\n    click: {\n      action: 'click',\n      description: 'Fired when the user clicks the button.',\n      // table: {disable: true},\n    },\n  },\n} as Meta;\n\nexport const Button = ({label, size, variant, disabled, startIcon, endIcon, click}) =>\n  html`<verdocs-button\n    .label=${label}\n    .size=${size}\n    .variant=${variant}\n    .disabled=${disabled}\n    .startIcon=${startIcon ? CircleIcon : null}\n    .endIcon=${endIcon ? ArrowIcon : null}\n    @click=${click}\n  />`;\n"]}

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

@@ -1,25 +1,39 @@
+@charset "UTF-8";
 verdocs-checkbox {
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
-  width: 20px;
-  height: 20px;
-  display: block;
-  font-size: 11px;
-  position: relative;
-  background-color: transparent;
-  transform-origin: bottom left;
-  border-radius: 100%;
+  line-height: 18px;
 }
-verdocs-checkbox.disabled {
-  opacity: 0.5;
-}
-verdocs-checkbox.hide {
+verdocs-checkbox label > input[type=checkbox] {
   display: none;
 }
-verdocs-checkbox.focused {
-  animation: verdocs-field-pulse 0.75s 2;
+verdocs-checkbox label > input[type=checkbox] + *::before {
+  content: "";
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  line-height: 18px;
+  border-radius: 2px;
+  border-style: solid;
+  margin-right: 0.5rem;
+  border-width: 0.1rem;
+  display: inline-block;
+  vertical-align: bottom;
+  border-color: #aeb4bf;
+}
+verdocs-checkbox label > input[type=checkbox]:checked + * {
+  color: #55bc81;
+}
+verdocs-checkbox label > input[type=checkbox]:checked + *::before {
+  content: "✓";
+  color: white;
+  text-align: center;
+  background: #55bc81;
+  border-color: #55bc81;
+}
+verdocs-checkbox.dark label > input[type=checkbox] + *::before {
+  border-color: #ffffff;
 }
-verdocs-checkbox input[type=checkbox] {
-  width: 18px;
-  height: 18px;
-  accent-color: #3f9d67;
+verdocs-checkbox.dark label > input[type=checkbox]:checked + *::before {
+  background: #55bc81;
+  border-color: #55bc81;
 }

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

@@ -20,11 +20,13 @@ export class VerdocsCheckbox {
   constructor() {
     this.checked = false;
     this.name = '';
+    this.label = '';
     this.value = '';
+    this.theme = 'light';
     this.disabled = false;
   }
   render() {
-    return (h(Host, { class: { disabled: this.disabled } }, h("input", { type: "checkbox", value: this.value, name: this.name, checked: this.checked, disabled: this.disabled, id: `verdocs-checkbox-${this.name}-${this.value}` })));
+    return (h(Host, { class: { disabled: this.disabled, [this.theme]: true } }, h("label", null, h("input", { type: "checkbox", value: this.value, name: this.name, checked: this.checked, disabled: this.disabled }), h("span", null, this.label))));
   }
   static get is() { return "verdocs-checkbox"; }
   static get originalStyleUrls() {
@@ -75,6 +77,24 @@ export class VerdocsCheckbox {
         "reflect": false,
         "defaultValue": "''"
       },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label to display. Leave blank for no label. The label will be displayed to the right of the checkbox, but may be\nrepositioned with CSS."
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "''"
+      },
       "value": {
         "type": "string",
         "mutable": false,
@@ -87,12 +107,30 @@ export class VerdocsCheckbox {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Value to track with the input."
+          "text": "Value to track with the input. Value is not used internally by this component but is sometimes useful to set\nbecause it can be retrieved in event handlers via e.target.value. This can be used to identify which\ncheckbox was clicked in a checkbox group."
         },
         "attribute": "value",
         "reflect": false,
         "defaultValue": "''"
       },
+      "theme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'light' | 'dark'",
+          "resolved": "\"dark\" | \"light\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Style of checkbox to render. Use 'dark' when rendering on a dark background."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "'light'"
+      },
       "disabled": {
         "type": "boolean",
         "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"verdocs-checkbox.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-checkbox/verdocs-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAEvD;;;;;;;;;;;;;;;;GAgBG;AAMH,MAAM,OAAO,eAAe;;mBAIC,KAAK;gBAKT,EAAE;iBAKD,EAAE;oBAKG,KAAK;;EAElC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC;MACpC,aAAO,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,EAAE,oBAAoB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,GAAI,CAC3J,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, h, Host, Prop} from '@stencil/core';\n\n/**\n * Displays a check box. Note that this is different from the `verdocs-field-checkbox` component, which is designed\n * to be used in signing experiences and contains settings that connect to template fields. This is just a simple check\n * box for UI displays e.g. dialog boxes.\n *\n * This control encapsulates a standard HTML checkbox. To subscribe to change events, connect an `onChange`\n * handler. Sample usage:\n *\n * ```html\n * <verdocs-checkbox\n *    value=\"on\"\n *    name=\"thingEnabled\"\n *    checked={this.thingEnabled}\n *    onInput={(e: any) => (this.thingEnabled = e.target.checked)}\n * />\n * ```\n */\n@Component({\n  tag: 'verdocs-checkbox',\n  styleUrl: 'verdocs-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsCheckbox {\n  /**\n   * Whether the radio button is currently selected.\n   */\n  @Prop() checked: boolean = false;\n\n  /**\n   * HTML form field name for the input.\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Value to track with the input.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * If set, the button will still be displayed but not selectable.\n   */\n  @Prop() disabled?: boolean = false;\n\n  render() {\n    return (\n      <Host class={{disabled: this.disabled}}>\n        <input type=\"checkbox\" value={this.value} name={this.name} checked={this.checked} disabled={this.disabled} id={`verdocs-checkbox-${this.name}-${this.value}`} />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-checkbox.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-checkbox/verdocs-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAEvD;;;;;;;;;;;;;;;;GAgBG;AAMH,MAAM,OAAO,eAAe;;mBAIC,KAAK;gBAKT,EAAE;iBAMD,EAAE;iBAOF,EAAE;iBAKQ,OAAO;oBAKZ,KAAK;;EAElC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC;MACxD;QACE,aAAO,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI;QAC7G,gBAAO,IAAI,CAAC,KAAK,CAAQ,CACnB,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, h, Host, Prop} from '@stencil/core';\n\n/**\n * Displays a check box. Note that this is different from the `verdocs-field-checkbox` component, which is designed\n * to be used in signing experiences and contains settings that connect to template fields. This is just a simple check\n * box for UI displays e.g. dialog boxes.\n *\n * This control encapsulates a standard HTML checkbox. To subscribe to change events, connect an `onChange`\n * handler. Sample usage:\n *\n * ```html\n * <verdocs-checkbox\n *    value=\"on\"\n *    name=\"thingEnabled\"\n *    checked={this.thingEnabled}\n *    onInput={(e: any) => (this.thingEnabled = e.target.checked)}\n * />\n * ```\n */\n@Component({\n  tag: 'verdocs-checkbox',\n  styleUrl: 'verdocs-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsCheckbox {\n  /**\n   * Whether the radio button is currently selected.\n   */\n  @Prop() checked: boolean = false;\n\n  /**\n   * HTML form field name for the input.\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Label to display. Leave blank for no label. The label will be displayed to the right of the checkbox, but may be\n   * repositioned with CSS.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Value to track with the input. Value is not used internally by this component but is sometimes useful to set\n   * because it can be retrieved in event handlers via e.target.value. This can be used to identify which\n   * checkbox was clicked in a checkbox group.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * Style of checkbox to render. Use 'dark' when rendering on a dark background.\n   */\n  @Prop() theme: 'light' | 'dark' = 'light';\n\n  /**\n   * If set, the button will still be displayed but not selectable.\n   */\n  @Prop() disabled?: boolean = false;\n\n  render() {\n    return (\n      <Host class={{disabled: this.disabled, [this.theme]: true}}>\n        <label>\n          <input type=\"checkbox\" value={this.value} name={this.name} checked={this.checked} disabled={this.disabled} />\n          <span>{this.label}</span>\n        </label>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -3,17 +3,19 @@ export default {
   title: 'Controls/Checkbox',
   component: 'verdocs-checkbox',
   args: {
-    checked: false,
+    label: 'Sample checkbox',
     name: 'test',
-    value: '1',
+    theme: 'light',
+    checked: false,
     disabled: false,
+    value: '1',
   },
   argTypes: {
-    onInput: {
+    input: {
       action: 'input',
       description: 'Fired when the checkbox is clicked. e.target.checked will indicate the current status (true if checked).',
     },
   },
 };
-export const Checkbox = ({ checked, name, value, disabled, onInput }) => html ` <verdocs-checkbox .checked=${checked} .name=${name} .value=${value} .disabled=${disabled} @input=${onInput} /> `;
+export const Checkbox = ({ checked, label, name, value, disabled, theme, input }) => html ` <verdocs-checkbox .checked=${checked} .label=${label} .name=${name} .value=${value} .disabled=${disabled} .theme=${theme} @input=${input} /> `;
 //# sourceMappingURL=verdocs-checkbox.stories.js.map