npm - @verdocs/web-sdk - Versions diffs - 1.7.1 → 1.7.4 - Mend

@verdocs/web-sdk 1.7.1 → 1.7.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (259) hide show

package/dist/cjs/verdocs-template-card.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-9ea8fdb4.js');
+const index = require('./index-2aebde37.js');
 const ActionsIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>`;

package/dist/cjs/verdocs-template-tags.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-9ea8fdb4.js');
+const index = require('./index-2aebde37.js');
 const verdocsTemplateTagsCss = "verdocs-template-tags{font-family:\"Barlow\", sans-serif}verdocs-template-tags span{margin:0 4px;height:28px;font-size:12px;font-weight:600;padding:5px 12px 7px;border-radius:5px;display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;text-transform:uppercase;color:#33364b;border:1px solid #707ae5;background-color:#f5f5fa}";

package/dist/cjs/verdocs-text-input.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-9ea8fdb4.js');
+const index = require('./index-2aebde37.js');
 const verdocsTextInputCss = "verdocs-text-input{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:20px 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}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-label{display:block;color:#33354c;font-weight:400;font-size:14px;margin:0 0 4px 0}";

package/dist/cjs/verdocs-toggle.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-9ea8fdb4.js');
+const index = require('./index-2aebde37.js');
 const verdocsToggleCss = "verdocs-toggle{font-family:\"Barlow\", sans-serif}verdocs-toggle .container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;background-color:#f5f5fa}verdocs-toggle .label{font-size:24px;font-weight:700;color:#33354c;-ms-flex-item-align:center;align-self:center;margin-right:27px;font-family:sans-serif}verdocs-toggle .buttons{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap}verdocs-toggle .buttons button{width:60px;height:60px;border:2px solid #654dcb;border-radius:5px;cursor:pointer}verdocs-toggle .buttons button:not(:last-child){margin-right:11px}verdocs-toggle .buttons svg{width:30px;height:30px}verdocs-toggle .buttons button:hover{background-color:#654dcb;-webkit-transition:0.25s;transition:0.25s}verdocs-toggle .buttons button:hover svg{fill:#f5f5fa;-webkit-transition:0.25s;transition:0.25s}verdocs-toggle .selected{background-color:#707ae5;-webkit-transition:0.25s;transition:0.25s}verdocs-toggle .selected svg{fill:#ffffff;-webkit-transition:0.25s;transition:0.25s}";

package/dist/cjs/verdocs-upload-dialog.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-9ea8fdb4.js');
+const index = require('./index-2aebde37.js');
 /**
  * Given a File, extract the file's content as a base64 encoded data URL. The response will have a prefix that

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

@@ -1,9 +1,9 @@
 'use strict';
-const index = require('./index-9ea8fdb4.js');
+const index = require('./index-2aebde37.js');
 /*
- Stencil Client Patch Browser v2.17.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.17.4 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('verdocs-web-sdk.cjs.js', document.baseURI).href));
@@ -15,7 +15,7 @@ const patchBrowser = () => {
 };
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["verdocs-sign.cjs",[[0,"verdocs-sign",{"endpoint":[16],"documentId":[1,"document-id"],"roleId":[1,"role-id"],"inviteCode":[1,"invite-code"],"recipient":[32],"signerToken":[32],"pdfUrl":[32],"recipientIndex":[32],"document":[32],"fields":[32],"hasSignature":[32],"nextButtonLabel":[32],"focusedField":[32]}]]],["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-initial.cjs",[[0,"verdocs-field-initial",{"required":[4],"fullName":[1,"full-name"],"value":[1],"focusField":[64]}]]],["verdocs-field-signature.cjs",[[0,"verdocs-field-signature",{"field":[16],"recipient":[16],"tempSignature":[32],"focusField":[64]}]]],["verdocs-search.cjs",[[0,"verdocs-search",{"endpoint":[16]}]]],["verdocs-field-attachment.cjs",[[0,"verdocs-field-attachment",{"field":[16],"order":[2],"value":[1],"required":[4],"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],"open":[4],"response":[32]}]]],["verdocs-field-date.cjs",[[0,"verdocs-field-date",{"placeholder":[1],"order":[2],"value":[1],"required":[4],"disabled":[4],"focused":[32],"focusField":[64]}]]],["verdocs-field-dropdown.cjs",[[0,"verdocs-field-dropdown",{"options":[16],"required":[4],"order":[2],"disabled":[4],"value":[1],"focused":[32],"focusField":[64]}]]],["verdocs-field-payment.cjs",[[0,"verdocs-field-payment",{"field":[16],"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-field-textarea.cjs",[[0,"verdocs-field-textarea",{"placeholder":[1],"order":[2],"value":[1],"required":[4],"disabled":[4],"focused":[32],"focusField":[64]}]]],["verdocs-field-textbox.cjs",[[0,"verdocs-field-textbox",{"field":[16],"focused":[32],"focusField":[64]}]]],["verdocs-field-timestamp.cjs",[[0,"verdocs-field-timestamp",{"field":[16],"focused":[32],"focusField":[64]}]]],["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],"document":[16],"isOpen":[32],"recipientStatusIcons":[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]},[[6,"click","handleClick"]]]]],["verdocs-text-input.cjs",[[0,"verdocs-text-input",{"value":[1],"label":[1],"placeholder":[1],"autocomplete":[1],"type":[1],"disabled":[4],"_value":[32]}]]],["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-initial-dialog.cjs",[[0,"verdocs-initial-dialog",{"fullname":[1],"open":[4],"fontLoaded":[32],"enteredInitials":[32],"mode":[32]}]]],["verdocs-signature-dialog.cjs",[[0,"verdocs-signature-dialog",{"fullName":[1,"full-name"],"open":[4],"fontLoaded":[32],"enteredName":[32],"mode":[32]}]]],["verdocs-ok-dialog.cjs",[[0,"verdocs-ok-dialog",{"heading":[1],"message":[1],"open":[4],"cancel":[4]}]]],["verdocs-upload-dialog.cjs",[[0,"verdocs-upload-dialog",{"open":[4],"draggingOver":[32],"decodedFiles":[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]}]]],["verdocs-document-page_2.cjs",[[0,"verdocs-document-page",{"pageNumber":[2,"page-number"],"virtualWidth":[2,"virtual-width"],"virtualHeight":[2,"virtual-height"],"layers":[16],"containerId":[32],"renderedWidth":[32],"renderedHeight":[32],"skipFirstNotification":[32]}],[0,"verdocs-loader"]]],["verdocs-dropdown_4.cjs",[[0,"verdocs-view",{"endpoint":[16],"rotation":[2],"pageLayers":[16],"source":[1],"loadProgress":[32],"numPages":[32]}],[0,"verdocs-dropdown",{"options":[16],"open":[4],"isOpen":[32]}],[0,"verdocs-field-checkbox",{"order":[2],"value":[4],"required":[4],"disabled":[4]}],[0,"verdocs-field-radio-button",{"order":[2],"checked":[4],"value":[1],"name":[1],"required":[4],"disabled":[4]}]]]], options);
+  return index.bootstrapLazy([["verdocs-sign.cjs",[[0,"verdocs-sign",{"endpoint":[16],"documentId":[1,"document-id"],"roleId":[1,"role-id"],"inviteCode":[1,"invite-code"],"recipient":[32],"signerToken":[32],"pdfUrl":[32],"recipientIndex":[32],"document":[32],"fields":[32],"hasSignature":[32],"nextButtonLabel":[32],"focusedField":[32]}]]],["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-initial.cjs",[[0,"verdocs-field-initial",{"required":[4],"fullName":[1,"full-name"],"value":[1],"focusField":[64]}]]],["verdocs-field-signature.cjs",[[0,"verdocs-field-signature",{"field":[16],"recipient":[16],"tempSignature":[32],"focusField":[64]}]]],["verdocs-search.cjs",[[0,"verdocs-search",{"endpoint":[16]}]]],["verdocs-field-attachment.cjs",[[0,"verdocs-field-attachment",{"field":[16],"order":[2],"value":[1],"required":[4],"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],"open":[4],"response":[32]}]]],["verdocs-field-date.cjs",[[0,"verdocs-field-date",{"placeholder":[1],"order":[2],"value":[1],"required":[4],"disabled":[4],"focused":[32],"focusField":[64]}]]],["verdocs-field-dropdown.cjs",[[0,"verdocs-field-dropdown",{"options":[16],"required":[4],"order":[2],"disabled":[4],"value":[1],"focused":[32],"focusField":[64]}]]],["verdocs-field-payment.cjs",[[0,"verdocs-field-payment",{"field":[16],"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-field-textarea.cjs",[[0,"verdocs-field-textarea",{"placeholder":[1],"order":[2],"value":[1],"required":[4],"disabled":[4],"focused":[32],"focusField":[64]}]]],["verdocs-field-textbox.cjs",[[0,"verdocs-field-textbox",{"field":[16],"focused":[32],"focusField":[64]}]]],["verdocs-field-timestamp.cjs",[[0,"verdocs-field-timestamp",{"field":[16],"focused":[32],"focusField":[64]}]]],["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],"document":[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]},[[6,"click","handleClick"]]]]],["verdocs-text-input.cjs",[[0,"verdocs-text-input",{"value":[1],"label":[1],"placeholder":[1],"autocomplete":[1],"type":[1],"disabled":[4],"_value":[32]}]]],["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-initial-dialog.cjs",[[0,"verdocs-initial-dialog",{"fullname":[1],"open":[4],"fontLoaded":[32],"enteredInitials":[32],"mode":[32]}]]],["verdocs-signature-dialog.cjs",[[0,"verdocs-signature-dialog",{"fullName":[1,"full-name"],"open":[4],"fontLoaded":[32],"enteredName":[32],"mode":[32]}]]],["verdocs-ok-dialog.cjs",[[0,"verdocs-ok-dialog",{"heading":[1],"message":[1],"open":[4],"cancel":[4]}]]],["verdocs-upload-dialog.cjs",[[0,"verdocs-upload-dialog",{"open":[4],"draggingOver":[32],"decodedFiles":[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-document-page_2.cjs",[[0,"verdocs-document-page",{"pageNumber":[2,"page-number"],"virtualWidth":[2,"virtual-width"],"virtualHeight":[2,"virtual-height"],"layers":[16],"containerId":[32],"renderedWidth":[32],"renderedHeight":[32],"skipFirstNotification":[32]}],[0,"verdocs-loader"]]],["verdocs-dropdown_4.cjs",[[0,"verdocs-view",{"endpoint":[16],"rotation":[2],"pageLayers":[16],"source":[1],"loadProgress":[32],"numPages":[32]}],[0,"verdocs-dropdown",{"options":[16],"open":[4],"isOpen":[32]}],[0,"verdocs-field-checkbox",{"order":[2],"value":[4],"required":[4],"disabled":[4]}],[0,"verdocs-field-radio-button",{"order":[2],"checked":[4],"value":[1],"name":[1],"required":[4],"disabled":[4]}]]]], options);
 });
 //# sourceMappingURL=verdocs-web-sdk.cjs.js.map

package/dist/cjs/verdocs-web-sdk.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"verdocs-web-sdk.cjs.js","mappings":";;;;AAAA;AACA;AACA;AAIA,MAAM,YAAY,GAAG,MAAM;AA6B3B,IAAI,MAAM,UAAU,GAAG,iNAAe,CAAC;AACvC,IAAI,MAAM,IAAI,GAAyD,EAAE,CAAC;AAe1E,IAAI,IAAuB,UAAU,KAAK,EAAE,EAAE;AAC9C,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D,KAWK;AACL,IAAI,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;AC/DD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI;AAE/B,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;","names":["promiseResolve","bootstrapLazy"],"sources":["./node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/\n Stencil Client Patch Browser v2.17.3 \| MIT Licensed \| https://stenciljs.com\n /\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s\|-/g, '_')}`;\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n if (BUILD.cssVarShim) {\n // shim css vars\n plt.$cssShim$ = win.__cssshim;\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n if (BUILD.profile && !performance.mark) {\n // not all browsers support performance.mark/measure (Safari 10)\n // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n // simply stub the implementations out.\n // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n // @ts-ignore\n performance.mark = performance.measure = () => {\n /noop/\n };\n performance.getEntriesByName = () => [];\n }\n // @ts-ignore\n const scriptElm = BUILD.scriptDataOpts \|\| BUILD.safari10 \|\| BUILD.dynamicImportShim\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($\|\\\\?\|#)`).test(s.src) \|\|\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? scriptElm['data-opts'] \|\| {} : {};\n if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD /) {\n // Safari < v11 support: This IF is true if it's Safari below v11.\n // This fn cannot use async/await since Safari didn't support it until v11,\n // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n // so both the ESM file and nomodule file would get downloaded. Only Safari\n // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n return {\n then() {\n / promise noop /\n },\n };\n }\n if (!BUILD.safari10 && importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n }\n else if (BUILD.dynamicImportShim \|\| BUILD.safari10) {\n opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') \|\| scriptElm.src, win.location.href)).href;\n if (BUILD.dynamicImportShim) {\n patchDynamicImport(opts.resourcesUrl, scriptElm);\n }\n if (BUILD.dynamicImportShim && !win.customElements) {\n // module support, but no custom elements support (Old Edge)\n // @ts-ignore\n return import(/ webpackChunkName: \"polyfills-dom\" / './dom.js').then(() => opts);\n }\n }\n return promiseResolve(opts);\n};\nconst patchDynamicImport = (base, orgScriptElm) => {\n const importFunctionName = getDynamicImportFunction(NAMESPACE);\n try {\n // test if this browser supports dynamic imports\n // There is a caching issue in V8, that breaks using import() in Function\n // By generating a random string, we can workaround it\n // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n }\n catch (e) {\n // this shim is specifically for browsers that do support \"esm\" imports\n // however, they do NOT support \"dynamic\" imports\n // basically this code is for old Edge, v18 and below\n const moduleMap = new Map();\n win[importFunctionName] = (src) => {\n const url = new URL(src, base).href;\n let mod = moduleMap.get(url);\n if (!mod) {\n const script = doc.createElement('script');\n script.type = 'module';\n script.crossOrigin = orgScriptElm.crossOrigin;\n script.src = URL.createObjectURL(new Blob([`import as m from '${url}'; window.${importFunctionName}.m = m;`], {\n type: 'application/javascript',\n }));\n mod = new Promise((resolve) => {\n script.onload = () => {\n resolve(win[importFunctionName].m);\n script.remove();\n };\n });\n moduleMap.set(url, mod);\n doc.head.appendChild(script);\n }\n return mod;\n };\n }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","import { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n globalScripts();\n return bootstrapLazy([/!__STENCIL_LAZY_DATA__/], options);\n});\n"],"version":3}
1	+ {"file":"verdocs-web-sdk.cjs.js","mappings":";;;;AAAA;AACA;AACA;AAIA,MAAM,YAAY,GAAG,MAAM;AA6B3B,IAAI,MAAM,UAAU,GAAG,iNAAe,CAAC;AACvC,IAAI,MAAM,IAAI,GAAyD,EAAE,CAAC;AAe1E,IAAI,IAAuB,UAAU,KAAK,EAAE,EAAE;AAC9C,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D,KAWK;AACL,IAAI,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;AC/DD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI;AAE/B,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;","names":["promiseResolve","bootstrapLazy"],"sources":["./node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/\n Stencil Client Patch Browser v2.17.4 \| MIT Licensed \| https://stenciljs.com\n /\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s\|-/g, '_')}`;\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n if (BUILD.cssVarShim) {\n // shim css vars\n plt.$cssShim$ = win.__cssshim;\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n if (BUILD.profile && !performance.mark) {\n // not all browsers support performance.mark/measure (Safari 10)\n // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n // simply stub the implementations out.\n // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n // @ts-ignore\n performance.mark = performance.measure = () => {\n /noop/\n };\n performance.getEntriesByName = () => [];\n }\n // @ts-ignore\n const scriptElm = BUILD.scriptDataOpts \|\| BUILD.safari10 \|\| BUILD.dynamicImportShim\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($\|\\\\?\|#)`).test(s.src) \|\|\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? scriptElm['data-opts'] \|\| {} : {};\n if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD /) {\n // Safari < v11 support: This IF is true if it's Safari below v11.\n // This fn cannot use async/await since Safari didn't support it until v11,\n // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n // so both the ESM file and nomodule file would get downloaded. Only Safari\n // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n return {\n then() {\n / promise noop /\n },\n };\n }\n if (!BUILD.safari10 && importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n }\n else if (BUILD.dynamicImportShim \|\| BUILD.safari10) {\n opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') \|\| scriptElm.src, win.location.href)).href;\n if (BUILD.dynamicImportShim) {\n patchDynamicImport(opts.resourcesUrl, scriptElm);\n }\n if (BUILD.dynamicImportShim && !win.customElements) {\n // module support, but no custom elements support (Old Edge)\n // @ts-ignore\n return import(/ webpackChunkName: \"polyfills-dom\" / './dom.js').then(() => opts);\n }\n }\n return promiseResolve(opts);\n};\nconst patchDynamicImport = (base, orgScriptElm) => {\n const importFunctionName = getDynamicImportFunction(NAMESPACE);\n try {\n // test if this browser supports dynamic imports\n // There is a caching issue in V8, that breaks using import() in Function\n // By generating a random string, we can workaround it\n // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n }\n catch (e) {\n // this shim is specifically for browsers that do support \"esm\" imports\n // however, they do NOT support \"dynamic\" imports\n // basically this code is for old Edge, v18 and below\n const moduleMap = new Map();\n win[importFunctionName] = (src) => {\n const url = new URL(src, base).href;\n let mod = moduleMap.get(url);\n if (!mod) {\n const script = doc.createElement('script');\n script.type = 'module';\n script.crossOrigin = orgScriptElm.crossOrigin;\n script.src = URL.createObjectURL(new Blob([`import as m from '${url}'; window.${importFunctionName}.m = m;`], {\n type: 'application/javascript',\n }));\n mod = new Promise((resolve) => {\n script.onload = () => {\n resolve(win[importFunctionName].m);\n script.remove();\n };\n });\n moduleMap.set(url, mod);\n doc.head.appendChild(script);\n }\n return mod;\n };\n }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","import { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n globalScripts();\n return bootstrapLazy([/!__STENCIL_LAZY_DATA__/], options);\n});\n"],"version":3}

package/dist/collection/collection-manifest.json CHANGED Viewed

@@ -37,7 +37,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.17.3",
+    "version": "2.17.4",
     "typescriptVersion": "4.5.4"
   },
   "collections": [],

package/dist/collection/components/controls/verdocs-status-indicator/verdocs-status-indicator.js CHANGED Viewed

@@ -44,6 +44,7 @@ export class VerdocsStatusIndicator {
      */
     this.theme = 'light';
     this.recipientStatusIcons = [];
+    this.containerId = `verdocs-status-indicator-${Math.random().toString(36).substring(2, 11)}`;
   }
   componentDidLoad() {
     var _a;
@@ -110,7 +111,7 @@ export class VerdocsStatusIndicator {
       });
       this.recipientStatusIcons = statusIcons;
       const diagram = RecipientFlow();
-      diagram.initalize('#verdocs-recipient-status-diagram', canvasWidth, canvasHeight);
+      diagram.initalize(`#${this.containerId}`, canvasWidth, canvasHeight);
       diagram.update({ entities, lines });
     }
   }
@@ -243,7 +244,7 @@ export class VerdocsStatusIndicator {
       h("span", { class: "icon", innerHTML: icon }),
       h("span", { class: "content" }, statusMessage),
       h("div", { class: "detail-panel", ref: el => (this.detailPanel = el) },
-        h("div", { id: "verdocs-recipient-status-diagram" }),
+        h("div", { id: `${this.containerId}` }),
         this.recipientStatusIcons.map(icon => (h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
   }
   static get is() { return "verdocs-status-indicator"; }
@@ -339,7 +340,8 @@ export class VerdocsStatusIndicator {
   }; }
   static get states() { return {
     "isOpen": {},
-    "recipientStatusIcons": {}
+    "recipientStatusIcons": {},
+    "containerId": {}
   }; }
 }
 //# sourceMappingURL=verdocs-status-indicator.js.map

package/dist/collection/components/controls/verdocs-status-indicator/verdocs-status-indicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"verdocs-status-indicator.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-status-indicator/verdocs-status-indicator.tsx"],"names":[],"mappings":"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","sourcesContent":["import {RecipientFlow} from './recipient-flow';\nimport {createPopper, Instance} from '@popperjs/core';\nimport {Component, Prop, Host, h, State} from '@stencil/core';\nimport {IDocument, TDocumentStatus, TRecipientStatus} from '@verdocs/js-sdk/Documents/Documents';\nimport AcceptedLight from './accepted-light.svg';\nimport AcceptedDark from './accepted-dark.svg';\nimport CanceledLight from './canceled-light.svg';\nimport CanceledDark from './canceled-dark.svg';\nimport CompletedLight from './complete-light.svg';\nimport CompletedDark from './complete-dark.svg';\nimport DeclinedLight from './declined-light.svg';\nimport DeclinedDark from './declined-dark.svg';\nimport InProgressLight from './in-progress-light.svg';\nimport InProgressDark from './in-progress-dark.svg';\nimport OpenedLight from './opened-light.svg';\nimport OpenedDark from './opened-dark.svg';\nimport PendingLight from './pending-light.svg';\nimport PendingDark from './pending-dark.svg';\nimport SignedLight from './signed-light.svg';\nimport SignedDark from './signed-dark.svg';\nimport SomeSignedLight from './some-signed-light.svg';\nimport SomeSignedDark from './some-signed-dark.svg';\nimport SubmittedLight from './submitted-light.svg';\nimport SubmittedDark from './submitted-dark.svg';\n\nconst ENTRY_WIDTH = 140;\nconst ENTRY_HEIGHT = 40;\nconst ENTRY_PADDING = 40;\n\n/*\n Displays an icon and message describing a document's completion status. For convenience, the status may be passed in either\n * directly as a status field or the whole document object may be passed in.\n \n If the document is provided, the status flag will indicate the document's overall status. This also makes the component clickable\n * to display a popup panel with per-recipient status data.\n \n If the status is provided as a string it can be either a `TRecipientStatus` or `TDocumentStatus` value.\n /\n@Component({\n tag: 'verdocs-status-indicator',\n styleUrl: 'verdocs-status-indicator.scss',\n})\nexport class VerdocsStatusIndicator {\n private summaryComponent?: HTMLButtonElement;\n private detailPanel?: HTMLDivElement;\n private popper?: Instance;\n\n /\n The size (height) of the indicator. The small variant is suitable for use in densely populated components such as table rows.\n /\n @Prop() size: 'small' \| 'normal' = 'normal';\n\n /\n The theme to use for diplay.\n /\n @Prop() theme?: 'dark' \| 'light' = 'light';\n\n /\n The status to display.\n /\n // The accepted override is here because we don't actually have an official status for that yet, but we plan to add it\n @Prop() status?: TDocumentStatus \| TRecipientStatus \| 'accepted';\n\n /\n The document to display status for. Ignored if `status` is set directly.\n /\n @Prop() document?: IDocument;\n\n @State() isOpen: boolean;\n\n @State() recipientStatusIcons = [];\n\n componentDidLoad() {\n this.popper = createPopper(this.summaryComponent, this.detailPanel, {placement: 'bottom-start', modifiers: [{name: 'offset', options: {offset: [0, 10]}}]});\n\n if (this.document?.recipients) {\n const recipientsAtLevel = [];\n this.document.recipients.forEach(recipient => {\n const level = recipient.sequence - 1;\n recipientsAtLevel[level] \|\|= [];\n const id = `r-${level}-${recipientsAtLevel[level].length}`;\n recipientsAtLevel[level].push({...recipient, id});\n });\n\n const levelCount = Object.keys(recipientsAtLevel).length;\n\n const canvasHeight = levelCount ENTRY_HEIGHT + (levelCount + 1) * ENTRY_PADDING;\n let canvasWidth = 0;\n Object.values(recipientsAtLevel).forEach(recipients => {\n let minW = recipients.length * ENTRY_WIDTH + (recipients.length + 1) * ENTRY_PADDING;\n if (minW > canvasWidth) {\n canvasWidth = minW;\n }\n });\n\n const entities = [];\n const lines = [];\n const statusIcons = [];\n\n let y = ENTRY_PADDING;\n Object.entries(recipientsAtLevel).forEach(([level, recipients]) => {\n // To center align here, we figure out how many items are per line and how much leftover space there would be if we just\n // drew them left-to-right. We add half of that as a left offset.\n const renderedItemsWidth = recipients.length * (ENTRY_WIDTH + ENTRY_PADDING);\n const leftoverSpace = canvasWidth - renderedItemsWidth;\n const leftOffset = ENTRY_PADDING / 2 + leftoverSpace / 2;\n\n recipients.forEach((recipient, index) => {\n const [first, last] = (recipient.full_name \|\| 'Unknown').toUpperCase().split(' ');\n const name = `${first} ${last?.substring(0, 1)}`;\n const entity = {\n id: recipient.id,\n text: name,\n icon: this.getStatusIcon(recipient.status),\n x: index * (ENTRY_WIDTH + ENTRY_PADDING) + leftOffset,\n y,\n width: ENTRY_WIDTH,\n height: ENTRY_HEIGHT,\n color: this.getStatusColor(recipient.status),\n radius: 8,\n };\n entities.push(entity);\n\n statusIcons.push({\n icon: this.getStatusIcon(recipient.status),\n x: index * (ENTRY_WIDTH + ENTRY_PADDING) + leftOffset + (ENTRY_WIDTH - 32),\n y: y + ENTRY_HEIGHT / 2 - 13,\n });\n\n recipientsAtLevel[+level - 1]?.forEach(prevRecip => {\n const line = {\n id: `line-${prevRecip.id}-${entity.id}`,\n from: {element: prevRecip.id, point: 'bottom'},\n to: {element: entity.id, point: 'top'},\n color: this.getStatusColor(recipient.status),\n };\n lines.push(line);\n });\n });\n\n y += ENTRY_HEIGHT + ENTRY_PADDING;\n });\n\n this.recipientStatusIcons = statusIcons;\n\n const diagram = RecipientFlow();\n diagram.initalize('#verdocs-recipient-status-diagram', canvasWidth, canvasHeight);\n diagram.update({entities, lines});\n }\n }\n\n // See https://popper.js.org/docs/v2/tutorial/\n // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists\n showDropdown() {\n this.isOpen = true;\n this.detailPanel.setAttribute('data-show', '');\n this.detailPanel.removeAttribute('aria-hidden');\n\n this.popper?.setOptions(options => ({\n ...options,\n modifiers: [...options.modifiers, {name: 'eventListeners', enabled: true}],\n }));\n\n this.popper?.update();\n }\n\n handleHideDropdown(e: any) {\n if (e?.target?.localName === 'button' && e?.target?.className === 'arrow') {\n // This event is fired when a menu element is clicked because the button \"loses focus\" then too\n return;\n }\n\n this.hide();\n }\n\n toggleDropdown() {\n if (this.isOpen) {\n this.hide();\n } else {\n this.showDropdown();\n }\n }\n\n hide() {\n this.isOpen = false;\n this.detailPanel.removeAttribute('data-show');\n this.detailPanel.setAttribute('aria-hidden', 'true');\n this.popper?.setOptions(options => ({\n ...options,\n modifiers: [...options.modifiers, {name: 'eventListeners', enabled: false}],\n }));\n }\n\n getStatusColor(status: string) {\n switch (status) {\n case 'invited':\n case 'opened':\n case 'accepted':\n case 'signed':\n return '#654dcb';\n case 'some-signed':\n case 'submitted':\n case 'complete':\n return '#55bc81';\n case 'declined':\n return '#ff0000';\n case 'canceled':\n case 'in progress':\n case 'pending':\n default:\n return '#999999';\n }\n }\n\n getStatusIcon(status: string) {\n switch (status) {\n case 'accepted':\n return this.theme === 'light' ? AcceptedLight : AcceptedDark;\n case 'complete':\n return this.theme === 'light' ? CompletedLight : CompletedDark;\n case 'in progress':\n return this.theme === 'light' ? InProgressLight : InProgressDark;\n case 'canceled':\n return this.theme === 'light' ? CanceledLight : CanceledDark;\n case 'declined':\n return this.theme === 'light' ? DeclinedLight : DeclinedDark;\n case 'invited':\n return this.theme === 'light' ? InProgressLight : InProgressDark;\n case 'opened':\n return this.theme === 'light' ? OpenedLight : OpenedDark;\n case 'signed':\n return this.theme === 'light' ? SignedLight : SignedDark;\n case 'submitted':\n return this.theme === 'light' ? SubmittedLight : SubmittedDark;\n case 'some-signed':\n return this.theme === 'light' ? SomeSignedLight : SomeSignedDark;\n default:\n case 'pending':\n return this.theme === 'light' ? PendingLight : PendingDark;\n }\n }\n\n getStatusMessage(status: string) {\n switch (status) {\n case 'accepted':\n return 'Accepted';\n case 'complete':\n return 'Completed';\n case 'in progress':\n return 'In Progress';\n case 'canceled':\n return 'Cancelled';\n case 'declined':\n return 'Declined';\n case 'invited':\n return 'Invited';\n case 'opened':\n return 'Opened';\n case 'signed':\n return 'Signed';\n case 'submitted':\n return 'Submitted';\n case 'some-signed':\n return 'Partly Signed';\n default:\n case 'pending':\n return 'Pending';\n }\n }\n\n render() {\n // The extra fallback for accepted is to future proof for when we add that.\n let status: string = this.status \|\| this.document?.status \|\| 'pending' \|\| 'accepted';\n if (!this.status && this.document?.recipients) {\n const submittedRecipients = this.document.recipients.filter(r => r.status === 'submitted');\n if (submittedRecipients.length > 0 && submittedRecipients.length !== this.document.recipients.length) {\n status = 'some-signed';\n }\n }\n\n const icon = this.getStatusIcon(status);\n const statusMessage = this.getStatusMessage(status);\n\n return (\n <Host\n ref={el => (this.summaryComponent = el as HTMLButtonElement)}\n class={`${this.theme} ${this.size} ${this.document ? 'has-document' : ''}`}\n aria-label=\"Click to View Details\"\n onClick={() => this.document && this.toggleDropdown()}\n onBlur={e => this.document && this.handleHideDropdown(e)}\n >\n <span class=\"icon\" innerHTML={icon} />\n <span class=\"content\">{statusMessage}</span>\n\n <div class=\"detail-panel\" ref={el => (this.detailPanel = el as HTMLDivElement)}>\n <div id=\"verdocs-recipient-status-diagram\" />\n {this.recipientStatusIcons.map(icon => (\n <span innerHTML={icon.icon} style={{position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px`}} />\n ))}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"verdocs-status-indicator.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-status-indicator/verdocs-status-indicator.tsx"],"names":[],"mappings":"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","sourcesContent":["import {RecipientFlow} from './recipient-flow';\nimport {createPopper, Instance} from '@popperjs/core';\nimport {Component, Prop, Host, h, State} from '@stencil/core';\nimport {IDocument, TDocumentStatus, TRecipientStatus} from '@verdocs/js-sdk/Documents/Documents';\nimport AcceptedLight from './accepted-light.svg';\nimport AcceptedDark from './accepted-dark.svg';\nimport CanceledLight from './canceled-light.svg';\nimport CanceledDark from './canceled-dark.svg';\nimport CompletedLight from './complete-light.svg';\nimport CompletedDark from './complete-dark.svg';\nimport DeclinedLight from './declined-light.svg';\nimport DeclinedDark from './declined-dark.svg';\nimport InProgressLight from './in-progress-light.svg';\nimport InProgressDark from './in-progress-dark.svg';\nimport OpenedLight from './opened-light.svg';\nimport OpenedDark from './opened-dark.svg';\nimport PendingLight from './pending-light.svg';\nimport PendingDark from './pending-dark.svg';\nimport SignedLight from './signed-light.svg';\nimport SignedDark from './signed-dark.svg';\nimport SomeSignedLight from './some-signed-light.svg';\nimport SomeSignedDark from './some-signed-dark.svg';\nimport SubmittedLight from './submitted-light.svg';\nimport SubmittedDark from './submitted-dark.svg';\n\nconst ENTRY_WIDTH = 140;\nconst ENTRY_HEIGHT = 40;\nconst ENTRY_PADDING = 40;\n\n/*\n Displays an icon and message describing a document's completion status. For convenience, the status may be passed in either\n * directly as a status field or the whole document object may be passed in.\n \n If the document is provided, the status flag will indicate the document's overall status. This also makes the component clickable\n * to display a popup panel with per-recipient status data.\n \n If the status is provided as a string it can be either a `TRecipientStatus` or `TDocumentStatus` value.\n /\n@Component({\n tag: 'verdocs-status-indicator',\n styleUrl: 'verdocs-status-indicator.scss',\n})\nexport class VerdocsStatusIndicator {\n private summaryComponent?: HTMLButtonElement;\n private detailPanel?: HTMLDivElement;\n private popper?: Instance;\n\n /\n The size (height) of the indicator. The small variant is suitable for use in densely populated components such as table rows.\n /\n @Prop() size: 'small' \| 'normal' = 'normal';\n\n /\n The theme to use for diplay.\n /\n @Prop() theme?: 'dark' \| 'light' = 'light';\n\n /\n The status to display.\n /\n // The accepted override is here because we don't actually have an official status for that yet, but we plan to add it\n @Prop() status?: TDocumentStatus \| TRecipientStatus \| 'accepted';\n\n /\n The document to display status for. Ignored if `status` is set directly.\n /\n @Prop() document?: IDocument;\n\n @State() isOpen: boolean;\n\n @State() recipientStatusIcons = [];\n\n @State() containerId = `verdocs-status-indicator-${Math.random().toString(36).substring(2, 11)}`;\n\n componentDidLoad() {\n this.popper = createPopper(this.summaryComponent, this.detailPanel, {placement: 'bottom-start', modifiers: [{name: 'offset', options: {offset: [0, 10]}}]});\n\n if (this.document?.recipients) {\n const recipientsAtLevel = [];\n this.document.recipients.forEach(recipient => {\n const level = recipient.sequence - 1;\n recipientsAtLevel[level] \|\|= [];\n const id = `r-${level}-${recipientsAtLevel[level].length}`;\n recipientsAtLevel[level].push({...recipient, id});\n });\n\n const levelCount = Object.keys(recipientsAtLevel).length;\n\n const canvasHeight = levelCount ENTRY_HEIGHT + (levelCount + 1) * ENTRY_PADDING;\n let canvasWidth = 0;\n Object.values(recipientsAtLevel).forEach(recipients => {\n let minW = recipients.length * ENTRY_WIDTH + (recipients.length + 1) * ENTRY_PADDING;\n if (minW > canvasWidth) {\n canvasWidth = minW;\n }\n });\n\n const entities = [];\n const lines = [];\n const statusIcons = [];\n\n let y = ENTRY_PADDING;\n Object.entries(recipientsAtLevel).forEach(([level, recipients]) => {\n // To center align here, we figure out how many items are per line and how much leftover space there would be if we just\n // drew them left-to-right. We add half of that as a left offset.\n const renderedItemsWidth = recipients.length * (ENTRY_WIDTH + ENTRY_PADDING);\n const leftoverSpace = canvasWidth - renderedItemsWidth;\n const leftOffset = ENTRY_PADDING / 2 + leftoverSpace / 2;\n\n recipients.forEach((recipient, index) => {\n const [first, last] = (recipient.full_name \|\| 'Unknown').toUpperCase().split(' ');\n const name = `${first} ${last?.substring(0, 1)}`;\n const entity = {\n id: recipient.id,\n text: name,\n icon: this.getStatusIcon(recipient.status),\n x: index * (ENTRY_WIDTH + ENTRY_PADDING) + leftOffset,\n y,\n width: ENTRY_WIDTH,\n height: ENTRY_HEIGHT,\n color: this.getStatusColor(recipient.status),\n radius: 8,\n };\n entities.push(entity);\n\n statusIcons.push({\n icon: this.getStatusIcon(recipient.status),\n x: index * (ENTRY_WIDTH + ENTRY_PADDING) + leftOffset + (ENTRY_WIDTH - 32),\n y: y + ENTRY_HEIGHT / 2 - 13,\n });\n\n recipientsAtLevel[+level - 1]?.forEach(prevRecip => {\n const line = {\n id: `line-${prevRecip.id}-${entity.id}`,\n from: {element: prevRecip.id, point: 'bottom'},\n to: {element: entity.id, point: 'top'},\n color: this.getStatusColor(recipient.status),\n };\n lines.push(line);\n });\n });\n\n y += ENTRY_HEIGHT + ENTRY_PADDING;\n });\n\n this.recipientStatusIcons = statusIcons;\n\n const diagram = RecipientFlow();\n diagram.initalize(`#${this.containerId}`, canvasWidth, canvasHeight);\n diagram.update({entities, lines});\n }\n }\n\n // See https://popper.js.org/docs/v2/tutorial/\n // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists\n showDropdown() {\n this.isOpen = true;\n this.detailPanel.setAttribute('data-show', '');\n this.detailPanel.removeAttribute('aria-hidden');\n\n this.popper?.setOptions(options => ({\n ...options,\n modifiers: [...options.modifiers, {name: 'eventListeners', enabled: true}],\n }));\n\n this.popper?.update();\n }\n\n handleHideDropdown(e: any) {\n if (e?.target?.localName === 'button' && e?.target?.className === 'arrow') {\n // This event is fired when a menu element is clicked because the button \"loses focus\" then too\n return;\n }\n\n this.hide();\n }\n\n toggleDropdown() {\n if (this.isOpen) {\n this.hide();\n } else {\n this.showDropdown();\n }\n }\n\n hide() {\n this.isOpen = false;\n this.detailPanel.removeAttribute('data-show');\n this.detailPanel.setAttribute('aria-hidden', 'true');\n this.popper?.setOptions(options => ({\n ...options,\n modifiers: [...options.modifiers, {name: 'eventListeners', enabled: false}],\n }));\n }\n\n getStatusColor(status: string) {\n switch (status) {\n case 'invited':\n case 'opened':\n case 'accepted':\n case 'signed':\n return '#654dcb';\n case 'some-signed':\n case 'submitted':\n case 'complete':\n return '#55bc81';\n case 'declined':\n return '#ff0000';\n case 'canceled':\n case 'in progress':\n case 'pending':\n default:\n return '#999999';\n }\n }\n\n getStatusIcon(status: string) {\n switch (status) {\n case 'accepted':\n return this.theme === 'light' ? AcceptedLight : AcceptedDark;\n case 'complete':\n return this.theme === 'light' ? CompletedLight : CompletedDark;\n case 'in progress':\n return this.theme === 'light' ? InProgressLight : InProgressDark;\n case 'canceled':\n return this.theme === 'light' ? CanceledLight : CanceledDark;\n case 'declined':\n return this.theme === 'light' ? DeclinedLight : DeclinedDark;\n case 'invited':\n return this.theme === 'light' ? InProgressLight : InProgressDark;\n case 'opened':\n return this.theme === 'light' ? OpenedLight : OpenedDark;\n case 'signed':\n return this.theme === 'light' ? SignedLight : SignedDark;\n case 'submitted':\n return this.theme === 'light' ? SubmittedLight : SubmittedDark;\n case 'some-signed':\n return this.theme === 'light' ? SomeSignedLight : SomeSignedDark;\n default:\n case 'pending':\n return this.theme === 'light' ? PendingLight : PendingDark;\n }\n }\n\n getStatusMessage(status: string) {\n switch (status) {\n case 'accepted':\n return 'Accepted';\n case 'complete':\n return 'Completed';\n case 'in progress':\n return 'In Progress';\n case 'canceled':\n return 'Cancelled';\n case 'declined':\n return 'Declined';\n case 'invited':\n return 'Invited';\n case 'opened':\n return 'Opened';\n case 'signed':\n return 'Signed';\n case 'submitted':\n return 'Submitted';\n case 'some-signed':\n return 'Partly Signed';\n default:\n case 'pending':\n return 'Pending';\n }\n }\n\n render() {\n // The extra fallback for accepted is to future proof for when we add that.\n let status: string = this.status \|\| this.document?.status \|\| 'pending' \|\| 'accepted';\n if (!this.status && this.document?.recipients) {\n const submittedRecipients = this.document.recipients.filter(r => r.status === 'submitted');\n if (submittedRecipients.length > 0 && submittedRecipients.length !== this.document.recipients.length) {\n status = 'some-signed';\n }\n }\n\n const icon = this.getStatusIcon(status);\n const statusMessage = this.getStatusMessage(status);\n\n return (\n <Host\n ref={el => (this.summaryComponent = el as HTMLButtonElement)}\n class={`${this.theme} ${this.size} ${this.document ? 'has-document' : ''}`}\n aria-label=\"Click to View Details\"\n onClick={() => this.document && this.toggleDropdown()}\n onBlur={e => this.document && this.handleHideDropdown(e)}\n >\n <span class=\"icon\" innerHTML={icon} />\n <span class=\"content\">{statusMessage}</span>\n\n <div class=\"detail-panel\" ref={el => (this.detailPanel = el as HTMLDivElement)}>\n <div id={`${this.containerId}`} />\n {this.recipientStatusIcons.map(icon => (\n <span innerHTML={icon.icon} style={{position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px`}} />\n ))}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/elements/verdocs-search-box/verdocs-search-box.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
-import { Component, h, Event, Prop } from '@stencil/core';
+import { Component, h, Event, Prop, Method } from '@stencil/core';
 import SearchIcon from './search.svg';
 import CloseIcon from './close.svg';
 /**
@@ -26,6 +26,18 @@ export class VerdocsSearchBox {
      * The text search string entered by the user.
      */
     this.query = '';
+    /**
+     * If set, the input field will attempt to "grab" focus after being rendered.
+     */
+    this.grabsFocus = false;
+  }
+  async focusField() {
+    this.inputEl.focus();
+  }
+  componentDidRender() {
+    if (this.grabsFocus) {
+      this.inputEl.focus();
+    }
   }
   handleSearch(e) {
     this.searchClicked.emit({ type: this.type, query: this.query });
@@ -49,7 +61,7 @@ export class VerdocsSearchBox {
         this.type,
         "s ",
         h("button", { class: "remove", innerHTML: CloseIcon, onClick: () => this.handleClearFilter() }))),
-      h("input", { type: "text", placeholder: this.placeholder, value: this.query, onInput: e => this.handleChange(e), onKeyUp: e => this.handleKeyUp(e) }),
+      h("input", { type: "text", value: this.query, placeholder: this.placeholder, onInput: e => this.handleChange(e), onKeyUp: e => this.handleKeyUp(e), ref: el => (this.inputEl = el) }),
       h("button", { onClick: e => this.handleSearch(e), class: "search" },
         h("span", { innerHTML: SearchIcon }),
         "Search")));
@@ -140,6 +152,24 @@ export class VerdocsSearchBox {
       "attribute": "query",
       "reflect": false,
       "defaultValue": "''"
+    },
+    "grabsFocus": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If set, the input field will attempt to \"grab\" focus after being rendered."
+      },
+      "attribute": "grabs-focus",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get events() { return [{
@@ -196,5 +226,23 @@ export class VerdocsSearchBox {
         "references": {}
       }
     }]; }
+  static get methods() { return {
+    "focusField": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
 }
 //# sourceMappingURL=verdocs-search-box.js.map

package/dist/collection/components/elements/verdocs-search-box/verdocs-search-box.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"verdocs-search-box.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-search-box/verdocs-search-box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,KAAK,EAAgB,IAAI,EAAC,MAAM,eAAe,CAAC;~~AACtE~~,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,SAAS,MAAM,aAAa,CAAC;AASpC;;;;;GAKG;AAMH,MAAM,OAAO,gBAAgB;EAL7B;~~IAME~~;;OAEG;IACK,aAAQ,GAAoB,eAAe,CAAC,UAAU,EAAE,CAAC;IAEjE;;OAEG;IACK,gBAAW,GAAG,wCAAwC,CAAC;IAE/D;;OAEG;IACK,SAAI,GAAiB,KAAK,CAAC;IAEnC;;OAEG;IACK,UAAK,GAAG,EAAE,CAAC;~~GAqDpB~~;~~EApCC~~,YAAY,CAAC,CAAC;IACZ,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC;IAC9D,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,OAAO,KAAK,CAAC;EACf,CAAC;EAED,YAAY,CAAC,CAAC;IACZ,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;EACzC,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC/B,CAAC;EAED,WAAW,CAAC,CAAC;IACX,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;MACrB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC;KAC/D;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,YAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;MACtC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,CACjD,YAAM,KAAK,EAAC,MAAM;QACf,IAAI,CAAC,IAAI;;QAAG,cAAQ,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,EAAE,GAAI,CAChG,CACR;MACD,~~aAAO~~,IAAI,EAAC,MAAM,~~EAAC~~,~~WAAW~~,EAAE,IAAI,CAAC,~~WAAW~~,~~EAAE~~,~~KAAK~~,EAAE,IAAI,CAAC,~~KAAK~~,~~EAAE~~,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,~~EAAE~~,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,~~GAAI~~;~~MAC9I~~,cAAQ,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,KAAK,EAAC,QAAQ;QACxD,YAAM,SAAS,EAAE,UAAU,GAAI;iBAExB,CACJ,CACR,CAAC;EACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop} from '@stencil/core';\nimport SearchIcon from './search.svg';\nimport CloseIcon from './close.svg';\n\nexport type TContentType = 'all' \| 'document' \| 'template' \| 'organization';\n\nexport interface ISearchEvent {\n query: string;\n type: TContentType;\n}\n\n/*\n Displays a customizable input box for search queries.\n \n Authentication is required to demonstrate this Element. You may do this in Storybook by using the Auth\n * embed. This Element will reuse the same session produced by logging in via that Embed.\n /\n@Component({\n tag: 'verdocs-search-box',\n styleUrl: 'verdocs-search-box.scss',\n shadow: false,\n})\nexport class VerdocsSearchBox {\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 placeholder to display in the input field.\n /\n @Prop() placeholder = 'search documents, templates, people...';\n\n /\n If set to a value other than 'all', a removeable filter indicator will be displayed.\n /\n @Prop() type: TContentType = 'all';\n\n /\n The text search string entered by the user.\n /\n @Prop() query = '';\n\n /\n Event fired when the user changes the type.\n /\n @Event({composed: true}) searchClicked: EventEmitter<ISearchEvent>;\n\n /\n Event fired when the user changes the type.\n /\n @Event({composed: true}) typeChanged: EventEmitter<TContentType>;\n\n /\n Event fired when the user changes the query string.\n */\n @Event({composed: true}) queryChanged: EventEmitter<string>;\n\n handleSearch(e) {\n this.searchClicked.emit({type: this.type, query: this.query});\n e.preventDefault();\n return false;\n }\n\n handleChange(e) {\n this.queryChanged.emit(e.target.value);\n }\n\n handleClearFilter() {\n this.typeChanged.emit('all');\n }\n\n handleKeyUp(e) {\n if (e.key === 'Enter') {\n this.searchClicked.emit({type: this.type, query: this.query});\n }\n }\n\n render() {\n return (\n <form onSubmit={e => this.handleSearch(e)}>\n {this.type !== undefined && this.type !== 'all' && (\n <span class=\"type\">\n {this.type}s <button class=\"remove\" innerHTML={CloseIcon} onClick={() => this.handleClearFilter()} />\n </span>\n )}\n <input type=\"text\" ~~placeholder~~={this.placeholder~~} value~~={this.~~query~~} onInput={e => this.handleChange(e)} onKeyUp={e => this.handleKeyUp(e)} />\n <button onClick={e => this.handleSearch(e)} class=\"search\">\n <span innerHTML={SearchIcon} />\n Search\n </button>\n </form>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"verdocs-search-box.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-search-box/verdocs-search-box.tsx"],"names":[],"mappings":"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","sourcesContent":["import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop, Method} from '@stencil/core';\nimport SearchIcon from './search.svg';\nimport CloseIcon from './close.svg';\n\nexport type TContentType = 'all' \| 'document' \| 'template' \| 'organization';\n\nexport interface ISearchEvent {\n query: string;\n type: TContentType;\n}\n\n/*\n Displays a customizable input box for search queries.\n \n Authentication is required to demonstrate this Element. You may do this in Storybook by using the Auth\n * embed. This Element will reuse the same session produced by logging in via that Embed.\n /\n@Component({\n tag: 'verdocs-search-box',\n styleUrl: 'verdocs-search-box.scss',\n shadow: false,\n})\nexport class VerdocsSearchBox {\n private inputEl: HTMLInputElement;\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 placeholder to display in the input field.\n /\n @Prop() placeholder = 'search documents, templates, people...';\n\n /\n If set to a value other than 'all', a removeable filter indicator will be displayed.\n /\n @Prop() type: TContentType = 'all';\n\n /\n The text search string entered by the user.\n /\n @Prop() query = '';\n\n /\n If set, the input field will attempt to \"grab\" focus after being rendered.\n /\n @Prop() grabsFocus = false;\n\n /\n Event fired when the user changes the type.\n /\n @Event({composed: true}) searchClicked: EventEmitter<ISearchEvent>;\n\n /\n Event fired when the user changes the type.\n /\n @Event({composed: true}) typeChanged: EventEmitter<TContentType>;\n\n /\n Event fired when the user changes the query string.\n */\n @Event({composed: true}) queryChanged: EventEmitter<string>;\n\n @Method() async focusField() {\n this.inputEl.focus();\n }\n\n componentDidRender() {\n if (this.grabsFocus) {\n this.inputEl.focus();\n }\n }\n\n handleSearch(e) {\n this.searchClicked.emit({type: this.type, query: this.query});\n e.preventDefault();\n return false;\n }\n\n handleChange(e) {\n this.queryChanged.emit(e.target.value);\n }\n\n handleClearFilter() {\n this.typeChanged.emit('all');\n }\n\n handleKeyUp(e) {\n if (e.key === 'Enter') {\n this.searchClicked.emit({type: this.type, query: this.query});\n }\n }\n\n render() {\n return (\n <form onSubmit={e => this.handleSearch(e)}>\n {this.type !== undefined && this.type !== 'all' && (\n <span class=\"type\">\n {this.type}s <button class=\"remove\" innerHTML={CloseIcon} onClick={() => this.handleClearFilter()} />\n </span>\n )}\n <input\n type=\"text\"\n value={this.query}\n placeholder={this.placeholder}\n onInput={e => this.handleChange(e)}\n onKeyUp={e => this.handleKeyUp(e)}\n ref={el => (this.inputEl = el)}\n />\n <button onClick={e => this.handleSearch(e)} class=\"search\">\n <span innerHTML={SearchIcon} />\n Search\n </button>\n </form>\n );\n }\n}\n"]}

package/dist/components/verdocs-search-box2.js CHANGED Viewed

@@ -36,6 +36,18 @@ const VerdocsSearchBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
      * The text search string entered by the user.
      */
     this.query = '';
+    /**
+     * If set, the input field will attempt to "grab" focus after being rendered.
+     */
+    this.grabsFocus = false;
+  }
+  async focusField() {
+    this.inputEl.focus();
+  }
+  componentDidRender() {
+    if (this.grabsFocus) {
+      this.inputEl.focus();
+    }
   }
   handleSearch(e) {
     this.searchClicked.emit({ type: this.type, query: this.query });
@@ -54,14 +66,16 @@ const VerdocsSearchBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     }
   }
   render() {
-    return (h("form", { onSubmit: e => this.handleSearch(e) }, this.type !== undefined && this.type !== 'all' && (h("span", { class: "type" }, this.type, "s ", h("button", { class: "remove", innerHTML: CloseIcon, onClick: () => this.handleClearFilter() }))), h("input", { type: "text", placeholder: this.placeholder, value: this.query, onInput: e => this.handleChange(e), onKeyUp: e => this.handleKeyUp(e) }), h("button", { onClick: e => this.handleSearch(e), class: "search" }, h("span", { innerHTML: SearchIcon }), "Search")));
+    return (h("form", { onSubmit: e => this.handleSearch(e) }, this.type !== undefined && this.type !== 'all' && (h("span", { class: "type" }, this.type, "s ", h("button", { class: "remove", innerHTML: CloseIcon, onClick: () => this.handleClearFilter() }))), h("input", { type: "text", value: this.query, placeholder: this.placeholder, onInput: e => this.handleChange(e), onKeyUp: e => this.handleKeyUp(e), ref: el => (this.inputEl = el) }), h("button", { onClick: e => this.handleSearch(e), class: "search" }, h("span", { innerHTML: SearchIcon }), "Search")));
   }
   static get style() { return verdocsSearchBoxCss; }
 }, [0, "verdocs-search-box", {
     "endpoint": [16],
     "placeholder": [1],
     "type": [1],
-    "query": [1]
+    "query": [1],
+    "grabsFocus": [4, "grabs-focus"],
+    "focusField": [64]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/verdocs-search-box2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"verdocs-search-box2.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,mBAAmB,GAAG,gzDAAgzD;;MCuB/zD,gBAAgB;EAL7B;;;;;;;;;~~IASU~~,aAAQ,GAAoB,eAAe,CAAC,UAAU,EAAE,CAAC;;;;IAKzD,gBAAW,GAAG,wCAAwC,CAAC;;;;IAKvD,SAAI,GAAiB,KAAK,CAAC;;;;IAK3B,UAAK,GAAG,EAAE,CAAC;~~GAqDpB~~;~~EApCC~~,YAAY,CAAC,CAAC;IACZ,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC;IAC9D,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,OAAO,KAAK,CAAC;GACd;EAED,YAAY,CAAC,CAAC;IACZ,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;GACxC;EAED,iBAAiB;IACf,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC9B;EAED,WAAW,CAAC,CAAC;IACX,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;MACrB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC;KAC/D;GACF;EAED,MAAM;IACJ,QACE,YAAM,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IACtC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,KAC7C,YAAM,KAAK,EAAC,MAAM,IACf,IAAI,CAAC,IAAI,QAAG,cAAQ,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,EAAE,GAAI,CAChG,CACR,EACD,~~aAAO~~,IAAI,EAAC,MAAM,~~EAAC~~,~~WAAW~~,EAAE,IAAI,CAAC,~~WAAW~~,~~EAAE~~,~~KAAK~~,EAAE,IAAI,CAAC,~~KAAK~~,~~EAAE~~,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,~~EAAE~~,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,~~GAAI~~,~~EAC9I~~,cAAQ,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,KAAK,EAAC,QAAQ,IACxD,YAAM,SAAS,EAAE,UAAU,GAAI,WAExB,CACJ,EACP;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["./src/components/elements/verdocs-search-box/verdocs-search-box.scss?tag=verdocs-search-box","./src/components/elements/verdocs-search-box/verdocs-search-box.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-search-box {\n font-family: $verdocs-primary-font;\n\n form {\n display: flex;\n flex-direction: row;\n height: 45px;\n box-sizing: border-box;\n margin: 5px 0 0;\n border-radius: 5px;\n align-items: center;\n background-color: #fff;\n padding: 0 8px;\n border-width: 1px;\n border-style: solid;\n border-color: $verdocs-light-blue;\n\n input {\n box-sizing: border-box;\n height: 43px;\n width: 100%;\n font-size: 18px;\n border: none;\n\n &:focus {\n outline: none;\n }\n }\n\n button.search {\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n border-radius: 4px;\n border: none;\n width: 100px;\n height: 28px;\n font-weight: 700;\n font-size: 10px;\n letter-spacing: 1px;\n background-color: $verdocs-green;\n text-transform: uppercase;\n color: #fff;\n }\n\n .type {\n background-color: $verdocs-light-blue;\n height: 30px;\n display: inline-flex;\n padding: 1px 0 2px 10px;\n font-size: 13px;\n line-height: 16px;\n border-radius: 4px;\n justify-content: center;\n text-transform: uppercase;\n align-items: center;\n flex-direction: row;\n color: #fff;\n margin-right: 10px;\n\n button {\n border: none;\n color: #fff;\n margin: 5px 0 0 8px;\n background: transparent;\n }\n }\n\n svg {\n width: 12px;\n height: 12px;\n margin-right: 6px;\n }\n }\n\n ::placeholder {\n color: $verdocs-grey-2;\n }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop} from '@stencil/core';\nimport SearchIcon from './search.svg';\nimport CloseIcon from './close.svg';\n\nexport type TContentType = 'all' \| 'document' \| 'template' \| 'organization';\n\nexport interface ISearchEvent {\n query: string;\n type: TContentType;\n}\n\n/*\n Displays a customizable input box for search queries.\n \n Authentication is required to demonstrate this Element. You may do this in Storybook by using the Auth\n * embed. This Element will reuse the same session produced by logging in via that Embed.\n /\n@Component({\n tag: 'verdocs-search-box',\n styleUrl: 'verdocs-search-box.scss',\n shadow: false,\n})\nexport class VerdocsSearchBox {\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 placeholder to display in the input field.\n /\n @Prop() placeholder = 'search documents, templates, people...';\n\n /\n If set to a value other than 'all', a removeable filter indicator will be displayed.\n /\n @Prop() type: TContentType = 'all';\n\n /\n The text search string entered by the user.\n /\n @Prop() query = '';\n\n /\n Event fired when the user changes the type.\n /\n @Event({composed: true}) searchClicked: EventEmitter<ISearchEvent>;\n\n /\n Event fired when the user changes the type.\n /\n @Event({composed: true}) typeChanged: EventEmitter<TContentType>;\n\n /\n Event fired when the user changes the query string.\n */\n @Event({composed: true}) queryChanged: EventEmitter<string>;\n\n handleSearch(e) {\n this.searchClicked.emit({type: this.type, query: this.query});\n e.preventDefault();\n return false;\n }\n\n handleChange(e) {\n this.queryChanged.emit(e.target.value);\n }\n\n handleClearFilter() {\n this.typeChanged.emit('all');\n }\n\n handleKeyUp(e) {\n if (e.key === 'Enter') {\n this.searchClicked.emit({type: this.type, query: this.query});\n }\n }\n\n render() {\n return (\n <form onSubmit={e => this.handleSearch(e)}>\n {this.type !== undefined && this.type !== 'all' && (\n <span class=\"type\">\n {this.type}s <button class=\"remove\" innerHTML={CloseIcon} onClick={() => this.handleClearFilter()} />\n </span>\n )}\n <input type=\"text\" ~~placeholder~~={this.placeholder~~} value~~={this.~~query~~} onInput={e => this.handleChange(e)} onKeyUp={e => this.handleKeyUp(e)} />\n <button onClick={e => this.handleSearch(e)} class=\"search\">\n <span innerHTML={SearchIcon} />\n Search\n </button>\n </form>\n );\n }\n}\n"],"version":3}
1	+ {"file":"verdocs-search-box2.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,mBAAmB,GAAG,gzDAAgzD;;MCuB/zD,gBAAgB;EAL7B;;;;;;;;;IAWU,aAAQ,GAAoB,eAAe,CAAC,UAAU,EAAE,CAAC;;;;IAKzD,gBAAW,GAAG,wCAAwC,CAAC;;;;IAKvD,SAAI,GAAiB,KAAK,CAAC;;;;IAK3B,UAAK,GAAG,EAAE,CAAC;;;;IAKX,eAAU,GAAG,KAAK,CAAC;GAsE5B;EArDW,MAAM,UAAU;IACxB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;GACtB;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;KACtB;GACF;EAED,YAAY,CAAC,CAAC;IACZ,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC;IAC9D,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,OAAO,KAAK,CAAC;GACd;EAED,YAAY,CAAC,CAAC;IACZ,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;GACxC;EAED,iBAAiB;IACf,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC9B;EAED,WAAW,CAAC,CAAC;IACX,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;MACrB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC;KAC/D;GACF;EAED,MAAM;IACJ,QACE,YAAM,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IACtC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,KAC7C,YAAM,KAAK,EAAC,MAAM,IACf,IAAI,CAAC,IAAI,QAAG,cAAQ,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,EAAE,GAAI,CAChG,CACR,EACD,aACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAClC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACjC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,GAC9B,EACF,cAAQ,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,KAAK,EAAC,QAAQ,IACxD,YAAM,SAAS,EAAE,UAAU,GAAI,WAExB,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/elements/verdocs-search-box/verdocs-search-box.scss?tag=verdocs-search-box","./src/components/elements/verdocs-search-box/verdocs-search-box.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-search-box {\n font-family: $verdocs-primary-font;\n\n form {\n display: flex;\n flex-direction: row;\n height: 45px;\n box-sizing: border-box;\n margin: 5px 0 0;\n border-radius: 5px;\n align-items: center;\n background-color: #fff;\n padding: 0 8px;\n border-width: 1px;\n border-style: solid;\n border-color: $verdocs-light-blue;\n\n input {\n box-sizing: border-box;\n height: 43px;\n width: 100%;\n font-size: 18px;\n border: none;\n\n &:focus {\n outline: none;\n }\n }\n\n button.search {\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n border-radius: 4px;\n border: none;\n width: 100px;\n height: 28px;\n font-weight: 700;\n font-size: 10px;\n letter-spacing: 1px;\n background-color: $verdocs-green;\n text-transform: uppercase;\n color: #fff;\n }\n\n .type {\n background-color: $verdocs-light-blue;\n height: 30px;\n display: inline-flex;\n padding: 1px 0 2px 10px;\n font-size: 13px;\n line-height: 16px;\n border-radius: 4px;\n justify-content: center;\n text-transform: uppercase;\n align-items: center;\n flex-direction: row;\n color: #fff;\n margin-right: 10px;\n\n button {\n border: none;\n color: #fff;\n margin: 5px 0 0 8px;\n background: transparent;\n }\n }\n\n svg {\n width: 12px;\n height: 12px;\n margin-right: 6px;\n }\n }\n\n ::placeholder {\n color: $verdocs-grey-2;\n }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop, Method} from '@stencil/core';\nimport SearchIcon from './search.svg';\nimport CloseIcon from './close.svg';\n\nexport type TContentType = 'all' \| 'document' \| 'template' \| 'organization';\n\nexport interface ISearchEvent {\n query: string;\n type: TContentType;\n}\n\n/*\n Displays a customizable input box for search queries.\n \n Authentication is required to demonstrate this Element. You may do this in Storybook by using the Auth\n * embed. This Element will reuse the same session produced by logging in via that Embed.\n /\n@Component({\n tag: 'verdocs-search-box',\n styleUrl: 'verdocs-search-box.scss',\n shadow: false,\n})\nexport class VerdocsSearchBox {\n private inputEl: HTMLInputElement;\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 placeholder to display in the input field.\n /\n @Prop() placeholder = 'search documents, templates, people...';\n\n /\n If set to a value other than 'all', a removeable filter indicator will be displayed.\n /\n @Prop() type: TContentType = 'all';\n\n /\n The text search string entered by the user.\n /\n @Prop() query = '';\n\n /\n If set, the input field will attempt to \"grab\" focus after being rendered.\n /\n @Prop() grabsFocus = false;\n\n /\n Event fired when the user changes the type.\n /\n @Event({composed: true}) searchClicked: EventEmitter<ISearchEvent>;\n\n /\n Event fired when the user changes the type.\n /\n @Event({composed: true}) typeChanged: EventEmitter<TContentType>;\n\n /\n Event fired when the user changes the query string.\n */\n @Event({composed: true}) queryChanged: EventEmitter<string>;\n\n @Method() async focusField() {\n this.inputEl.focus();\n }\n\n componentDidRender() {\n if (this.grabsFocus) {\n this.inputEl.focus();\n }\n }\n\n handleSearch(e) {\n this.searchClicked.emit({type: this.type, query: this.query});\n e.preventDefault();\n return false;\n }\n\n handleChange(e) {\n this.queryChanged.emit(e.target.value);\n }\n\n handleClearFilter() {\n this.typeChanged.emit('all');\n }\n\n handleKeyUp(e) {\n if (e.key === 'Enter') {\n this.searchClicked.emit({type: this.type, query: this.query});\n }\n }\n\n render() {\n return (\n <form onSubmit={e => this.handleSearch(e)}>\n {this.type !== undefined && this.type !== 'all' && (\n <span class=\"type\">\n {this.type}s <button class=\"remove\" innerHTML={CloseIcon} onClick={() => this.handleClearFilter()} />\n </span>\n )}\n <input\n type=\"text\"\n value={this.query}\n placeholder={this.placeholder}\n onInput={e => this.handleChange(e)}\n onKeyUp={e => this.handleKeyUp(e)}\n ref={el => (this.inputEl = el)}\n />\n <button onClick={e => this.handleSearch(e)} class=\"search\">\n <span innerHTML={SearchIcon} />\n Search\n </button>\n </form>\n );\n }\n}\n"],"version":3}

package/dist/components/verdocs-status-indicator.js CHANGED Viewed

@@ -7323,6 +7323,7 @@ const VerdocsStatusIndicator$1 = /*@__PURE__*/ proxyCustomElement(class extends
      */
     this.theme = 'light';
     this.recipientStatusIcons = [];
+    this.containerId = `verdocs-status-indicator-${Math.random().toString(36).substring(2, 11)}`;
   }
   componentDidLoad() {
     var _a;
@@ -7389,7 +7390,7 @@ const VerdocsStatusIndicator$1 = /*@__PURE__*/ proxyCustomElement(class extends
       });
       this.recipientStatusIcons = statusIcons;
       const diagram = RecipientFlow();
-      diagram.initalize('#verdocs-recipient-status-diagram', canvasWidth, canvasHeight);
+      diagram.initalize(`#${this.containerId}`, canvasWidth, canvasHeight);
       diagram.update({ entities, lines });
     }
   }
@@ -7518,7 +7519,7 @@ const VerdocsStatusIndicator$1 = /*@__PURE__*/ proxyCustomElement(class extends
     }
     const icon = this.getStatusIcon(status);
     const statusMessage = this.getStatusMessage(status);
-    return (h(Host, { ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.document ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: () => this.document && this.toggleDropdown(), onBlur: e => this.document && this.handleHideDropdown(e) }, h("span", { class: "icon", innerHTML: icon }), h("span", { class: "content" }, statusMessage), h("div", { class: "detail-panel", ref: el => (this.detailPanel = el) }, h("div", { id: "verdocs-recipient-status-diagram" }), this.recipientStatusIcons.map(icon => (h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
+    return (h(Host, { ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.document ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: () => this.document && this.toggleDropdown(), onBlur: e => this.document && this.handleHideDropdown(e) }, h("span", { class: "icon", innerHTML: icon }), h("span", { class: "content" }, statusMessage), h("div", { class: "detail-panel", ref: el => (this.detailPanel = el) }, h("div", { id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
   }
   static get style() { return verdocsStatusIndicatorCss; }
 }, [0, "verdocs-status-indicator", {
@@ -7527,7 +7528,8 @@ const VerdocsStatusIndicator$1 = /*@__PURE__*/ proxyCustomElement(class extends
     "status": [1],
     "document": [16],
     "isOpen": [32],
-    "recipientStatusIcons": [32]
+    "recipientStatusIcons": [32],
+    "containerId": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {