npm - @verdocs/web-sdk - Versions diffs - 1.9.3 → 1.9.4 - Mend

@verdocs/web-sdk 1.9.3 → 1.9.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 (81) hide show

package/dist/components/verdocs-dropdown2.js CHANGED Viewed

@@ -21,7 +21,8 @@ const VerdocsDropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   componentDidLoad() {
     this.popper = createPopper(this.dropdownButton, this.dropdownMenu, { placement: 'bottom-start', modifiers: [{ name: 'offset', options: { offset: [0, 6] } }] });
   }
-  handleSelectOption(option) {
+  handleSelectOption(e, option) {
+    e.stopPropagation();
     this.isOpen = false;
     this.optionSelected.emit(option);
     this.hide();
@@ -47,7 +48,8 @@ const VerdocsDropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     }
     this.hide();
   }
-  toggleDropdown() {
+  toggleDropdown(e) {
+    e.stopPropagation();
     if (this.isOpen) {
       this.hide();
     }
@@ -67,7 +69,7 @@ const VerdocsDropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   }
   render() {
     var _a;
-    return (h(Host, { class: { storybook: !!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV']), open: !!this.isOpen } }, h("button", { class: "arrow", innerHTML: SortDown, "aria-label": "Open Menu", onClick: () => this.toggleDropdown(), onBlur: e => this.handleHideDropdown(e), ref: el => (this.dropdownButton = el) }), h("div", { class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el) }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("button", { onClick: () => this.handleSelectOption(option), class: "option", disabled: option.disabled }, option.label))))));
+    return (h(Host, { class: { storybook: !!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV']), open: !!this.isOpen } }, h("button", { class: "arrow", innerHTML: SortDown, "aria-label": "Open Menu", onClick: e => this.toggleDropdown(e), onBlur: e => this.handleHideDropdown(e), ref: el => (this.dropdownButton = el) }), h("div", { class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el) }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("button", { onClick: e => this.handleSelectOption(e, option), class: "option", disabled: option.disabled }, option.label))))));
   }
   static get style() { return verdocsDropdownCss; }
 }, [0, "verdocs-dropdown", {

package/dist/components/verdocs-dropdown2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"verdocs-dropdown2.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,2lCAA2lC;;MCoBzmC,eAAe;;;;;mBAQO,EAAE;;;;EAkBnC,iBAAiB;IACf,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;GAC3B;EAED,gBAAgB;IACd,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,EAAE,EAAC,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAC,EAAC,CAAC,EAAC,CAAC,CAAC;GAC3J;EAED,kBAAkB,CAAC,MAAmB;~~IACpC~~,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACpB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACjC,IAAI,CAAC,IAAI,EAAE,CAAC;GACb;;;EAID,YAAY;;IACV,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACnB,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IAChD,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;IAEjD,MAAA,IAAI,CAAC,MAAM,0CAAE,UAAU,CAAC,OAAO,KAAK;MAClC,GAAG,OAAO;MACV,SAAS,EAAE,CAAC,GAAG,OAAO,CAAC,SAAS,EAAE,EAAC,IAAI,EAAE,gBAAgB,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;KAC3E,CAAC,CAAC,CAAC;IAEJ,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAC;GACvB;EAED,kBAAkB,CAAC,CAAM;;IACvB,IAAI,CAAA,MAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,MAAM,0CAAE,SAAS,MAAK,QAAQ,IAAI,CAAA,MAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,MAAM,0CAAE,SAAS,MAAK,OAAO,EAAE;;MAEzE,OAAO;KACR;IAED,IAAI,CAAC,IAAI,EAAE,CAAC;GACb;EAED,cAAc;~~IACZ~~,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;SAAM;MACL,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;GACF;EAED,IAAI;;IACF,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACpB,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;IAC/C,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IACtD,MAAA,IAAI,CAAC,MAAM,0CAAE,UAAU,CAAC,OAAO,KAAK;MAClC,GAAG,OAAO;MACV,SAAS,EAAE,CAAC,GAAG,OAAO,CAAC,SAAS,EAAE,EAAC,IAAI,EAAE,gBAAgB,EAAE,OAAO,EAAE,KAAK,EAAC,CAAC;KAC5E,CAAC,CAAC,CAAC;GACL;EAED,MAAM;;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,SAAS,EAAE,CAAC,EAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,eAAe,CAAC,CAAA,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,EAAC,IACxE,cACE,KAAK,EAAC,OAAO,EACb,SAAS,EAAE,QAAQ,gBACR,WAAW,EACtB,OAAO,EAAE,~~MAAM~~,IAAI,CAAC,cAAc,~~EAAE~~,EACpC,MAAM,EAAE,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EACvC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAuB,CAAC,GAC1D,EAEF,WAAK,KAAK,EAAC,OAAO,iBAAc,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAAoB,CAAC,IAC9F,MAAA,IAAI,CAAC,OAAO,0CAAE,GAAG,CAAC,MAAM,KACvB,cAAQ,OAAO,EAAE,~~MAAM~~,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,EAAE,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,~~IAC7F~~,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACE,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/controls/verdocs-dropdown/verdocs-dropdown.scss?tag=verdocs-dropdown","./src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-dropdown {\n font-family: $primary-font;\n display: block;\n\n .arrow {\n width: 32px;\n height: 26px;\n background: #fff;\n cursor: pointer;\n border-radius: 4px;\n align-items: center;\n display: inline-flex;\n border: 1px solid $light-border-color;\n justify-content: center;\n }\n\n .arrow svg {\n fill: $primary-color;\n transition: 0.3s;\n }\n\n .items {\n width: 200px;\n display: none;\n z-index: 10000;\n border-radius: 5px;\n background: $medium-bg;\n border: 1px solid $item-border-color;\n }\n\n .items[data-show] {\n display: block;\n }\n\n .option {\n width: 100%;\n color: #fff;\n border: none;\n display: block;\n text-align: left;\n background: none;\n padding: 10px 20px;\n }\n\n .option:hover {\n cursor: pointer;\n background: $primary-color;\n }\n\n .option[disabled] {\n color: $light-disabled-color;\n }\n\n .option[disabled]:hover {\n color: $light-disabled-color;\n cursor: inherit;\n background: transparent;\n }\n\n &.open {\n .items {\n display: block;\n }\n\n .arrow {\n background: $secondary-color;\n border: 1px solid $border-color;\n }\n\n .arrow svg {\n transform: scaleY(-1);\n fill: #fff;\n }\n }\n}\n","import {Host} from '@stencil/core';\nimport {createPopper, Instance} from '@popperjs/core';\nimport {Component, Prop, State, h, Event, EventEmitter} from '@stencil/core';\nimport SortDown from './down-arrow.svg';\n\nexport interface IMenuOption {\n label: string;\n id?: any;\n faIcon?: any;\n disabled?: boolean;\n}\n\n/*\n Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden\n * when the button is pressed again, or an option is selected.\n /\n@Component({\n tag: 'verdocs-dropdown',\n styleUrl: 'verdocs-dropdown.scss',\n})\nexport class VerdocsDropdown {\n private dropdownButton?: HTMLButtonElement;\n private dropdownMenu?: HTMLDivElement;\n private popper?: Instance;\n\n /\n The menu options to display.\n /\n @Prop() options: IMenuOption[] = [];\n\n /\n If set, the component will be open by default. This is primarily intended to be used for testing.\n /\n @Prop() open: boolean;\n\n /\n If set, the component will be open by default.\n /\n @State() isOpen: boolean;\n\n /\n Event fired when a menu option is clicked.\n * Web Component events need to be \"composed\" to cross the Shadow DOM and be received by parent frameworks.\n */\n @Event({composed: true}) optionSelected: EventEmitter<IMenuOption>;\n\n componentWillLoad() {\n this.isOpen = !!this.open;\n }\n\n componentDidLoad() {\n this.popper = createPopper(this.dropdownButton, this.dropdownMenu, {placement: 'bottom-start', modifiers: [{name: 'offset', options: {offset: [0, 6]}}]});\n }\n\n handleSelectOption(option: IMenuOption) {\n this.isOpen = false;\n this.optionSelected.emit(option);\n this.hide();\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.dropdownMenu.setAttribute('data-show', '');\n this.dropdownMenu.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.dropdownMenu.removeAttribute('data-show');\n this.dropdownMenu.setAttribute('aria-hidden', 'true');\n this.popper?.setOptions(options => ({\n ...options,\n modifiers: [...options.modifiers, {name: 'eventListeners', enabled: false}],\n }));\n }\n\n render() {\n return (\n <Host class={{storybook: !!window?.['STORYBOOK_ENV'], open: !!this.isOpen}}>\n <button\n class=\"arrow\"\n innerHTML={SortDown}\n aria-label=\"Open Menu\"\n onClick={() => this.toggleDropdown()}\n onBlur={e => this.handleHideDropdown(e)}\n ref={el => (this.dropdownButton = el as HTMLButtonElement)}\n />\n\n <div class=\"items\" aria-hidden={!this.open} ref={el => (this.dropdownMenu = el as HTMLDivElement)}>\n {this.options?.map(option => (\n <button onClick={() => this.handleSelectOption(option)} class=\"option\" disabled={option.disabled}>\n {option.label}\n </button>\n ))}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"verdocs-dropdown2.js","mappings":"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","names":[],"sources":["./src/components/controls/verdocs-dropdown/verdocs-dropdown.scss?tag=verdocs-dropdown","./src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-dropdown {\n font-family: $primary-font;\n display: block;\n\n .arrow {\n width: 32px;\n height: 26px;\n background: #fff;\n cursor: pointer;\n border-radius: 4px;\n align-items: center;\n display: inline-flex;\n border: 1px solid $light-border-color;\n justify-content: center;\n }\n\n .arrow svg {\n fill: $primary-color;\n transition: 0.3s;\n }\n\n .items {\n width: 200px;\n display: none;\n z-index: 10000;\n border-radius: 5px;\n background: $medium-bg;\n border: 1px solid $item-border-color;\n }\n\n .items[data-show] {\n display: block;\n }\n\n .option {\n width: 100%;\n color: #fff;\n border: none;\n display: block;\n text-align: left;\n background: none;\n padding: 10px 20px;\n }\n\n .option:hover {\n cursor: pointer;\n background: $primary-color;\n }\n\n .option[disabled] {\n color: $light-disabled-color;\n }\n\n .option[disabled]:hover {\n color: $light-disabled-color;\n cursor: inherit;\n background: transparent;\n }\n\n &.open {\n .items {\n display: block;\n }\n\n .arrow {\n background: $secondary-color;\n border: 1px solid $border-color;\n }\n\n .arrow svg {\n transform: scaleY(-1);\n fill: #fff;\n }\n }\n}\n","import {Host} from '@stencil/core';\nimport {createPopper, Instance} from '@popperjs/core';\nimport {Component, Prop, State, h, Event, EventEmitter} from '@stencil/core';\nimport SortDown from './down-arrow.svg';\n\nexport interface IMenuOption {\n label: string;\n id?: any;\n faIcon?: any;\n disabled?: boolean;\n}\n\n/*\n Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden\n * when the button is pressed again, or an option is selected.\n /\n@Component({\n tag: 'verdocs-dropdown',\n styleUrl: 'verdocs-dropdown.scss',\n})\nexport class VerdocsDropdown {\n private dropdownButton?: HTMLButtonElement;\n private dropdownMenu?: HTMLDivElement;\n private popper?: Instance;\n\n /\n The menu options to display.\n /\n @Prop() options: IMenuOption[] = [];\n\n /\n If set, the component will be open by default. This is primarily intended to be used for testing.\n /\n @Prop() open: boolean;\n\n /\n If set, the component will be open by default.\n /\n @State() isOpen: boolean;\n\n /\n Event fired when a menu option is clicked.\n * Web Component events need to be \"composed\" to cross the Shadow DOM and be received by parent frameworks.\n */\n @Event({composed: true}) optionSelected: EventEmitter<IMenuOption>;\n\n componentWillLoad() {\n this.isOpen = !!this.open;\n }\n\n componentDidLoad() {\n this.popper = createPopper(this.dropdownButton, this.dropdownMenu, {placement: 'bottom-start', modifiers: [{name: 'offset', options: {offset: [0, 6]}}]});\n }\n\n handleSelectOption(e: any, option: IMenuOption) {\n e.stopPropagation();\n this.isOpen = false;\n this.optionSelected.emit(option);\n this.hide();\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.dropdownMenu.setAttribute('data-show', '');\n this.dropdownMenu.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(e: any) {\n e.stopPropagation();\n\n if (this.isOpen) {\n this.hide();\n } else {\n this.showDropdown();\n }\n }\n\n hide() {\n this.isOpen = false;\n this.dropdownMenu.removeAttribute('data-show');\n this.dropdownMenu.setAttribute('aria-hidden', 'true');\n this.popper?.setOptions(options => ({\n ...options,\n modifiers: [...options.modifiers, {name: 'eventListeners', enabled: false}],\n }));\n }\n\n render() {\n return (\n <Host class={{storybook: !!window?.['STORYBOOK_ENV'], open: !!this.isOpen}}>\n <button\n class=\"arrow\"\n innerHTML={SortDown}\n aria-label=\"Open Menu\"\n onClick={e => this.toggleDropdown(e)}\n onBlur={e => this.handleHideDropdown(e)}\n ref={el => (this.dropdownButton = el as HTMLButtonElement)}\n />\n\n <div class=\"items\" aria-hidden={!this.open} ref={el => (this.dropdownMenu = el as HTMLDivElement)}>\n {this.options?.map(option => (\n <button onClick={e => this.handleSelectOption(e, option)} class=\"option\" disabled={option.disabled}>\n {option.label}\n </button>\n ))}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -82,7 +82,7 @@ const VerdocsTemplateCreate = /*@__PURE__*/ proxyCustomElement(class extends HTM
       console.log('created template', template);
       const template_document = await createTemplateDocument(this.endpoint, template.id, this.file);
       console.log('created document', template_document);
-      for await (let pageNumber of Array.from(Array(3).keys(), n => n + 1)) {
+      for await (let pageNumber of Array.from(Array(template_document.page_numbers).keys(), n => n + 1)) {
         console.log('Updating page', pageNumber);
         const page = await createPage(this.endpoint, template.id, { sequence: pageNumber, page_number: pageNumber, document_id: template_document.id });
         console.log('Created page', page);

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

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

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

@@ -6,6 +6,7 @@ import { g as getRGBA } from './Colors.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { r as renderDocumentField, a as getRoleIndex } from './utils.js';
 import { s as state } from './builderStore.js';
+import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$a } from './verdocs-button2.js';
 import { d as defineCustomElement$9 } from './verdocs-button-panel2.js';
 import { d as defineCustomElement$8 } from './verdocs-document-page2.js';
@@ -58,8 +59,9 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.template = null;
   }
   async componentWillLoad() {
-    var _a;
+    var _a, _b, _c, _d;
     try {
+      this.endpoint.loadSession();
       console.log(`[PREVIEW] Loading template ${this.templateId}`);
       state.templateId = this.templateId;
       const template = await getTemplate(this.endpoint, this.templateId);
@@ -83,7 +85,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     }
     catch (e) {
       console.log('[PREVIEW] Error with preview session', e);
-      // this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));
+      (_b = this.sdkError) === null || _b === void 0 ? void 0 : _b.emit(new SDKError(e.message, (_c = e.response) === null || _c === void 0 ? void 0 : _c.status, (_d = e.response) === null || _d === void 0 ? void 0 : _d.data));
     }
   }
   componentDidRender() {

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

	@@ -1 +1 @@
1	- {"file":"verdocs-template-fields2.js","mappings":"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","names":["builderStore"],"sources":["./src/components/elements/verdocs-template-fields/verdocs-template-fields.scss?tag=verdocs-template-fields","./src/components/elements/verdocs-template-fields/verdocs-template-fields.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-fields {\n position: relative;\n font-family: $verdocs-primary-font;\n\n .page-0 {\n padding: 65px 15px 0 15px;\n box-sizing: border-box;\n\n .user-placed-fields {\n height: 100px;\n position: relative;\n background: #ffffff;\n box-shadow: 0 0 10px 5px #0000000f;\n\n .title {\n top: 0;\n left: 0;\n color: #ffffff;\n font-size: 12px;\n padding: 3px 6px;\n font-weight: bold;\n position: absolute;\n background: $verdocs-grey-blue;\n }\n }\n }\n\n .fields-bar {\n height: 50px;\n display: flex;\n z-index: 10000;\n position: fixed;\n padding: 5px 20px;\n line-height: 28px;\n align-items: center;\n flex-direction: row;\n box-sizing: border-box;\n background: $verdocs-grey-blue;\n\n .label {\n color: #ffffff;\n font-size: 14px;\n font-weight: bold;\n margin-right: 8px;\n }\n\n .icon {\n margin: 0 4px;\n display: flex;\n transform: scale(0.8, 0.8);\n\n svg {\n fill: #ffffff;\n }\n }\n\n .operation {\n border: none;\n outline: none;\n color: #ffffff;\n cursor: pointer;\n font-size: 16px;\n margin-left: 10px;\n background: transparent;\n text-transform: uppercase;\n\n &:disabled {\n color: #cccccc;\n cursor: inherit;\n pointer-events: none;\n }\n }\n }\n}\n","import interact from 'interactjs';\nimport {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplate, ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, h, Event, EventEmitter, Fragment, Prop, State, Host} from '@stencil/core';\nimport {IPageRenderEvent} from '../../embeds/verdocs-view/verdocs-view';\nimport {getRoleIndex, renderDocumentField} from '../../../utils/utils';\nimport {getTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport builderStore from '../../../utils/builderStore';\nimport {SDKError} from '../../../utils/errors';\n\n/*\n Helper function to safely set/update components in a CSS transform attribute. Transform is normally set as a string of\n * `operation1(param) operation2(param) ...` components, which makes updating them a bit of a pain. This will remove the\n * specified component if it's already set and replace it with the new value, without touching the other components that\n * may already be set. Note that this operation moves the component to the end of the transform chain so it's not meant\n * to be used for order-sensitive components e.g. translate-then-rotate.\n /\nconst updateCssTransform = (el: HTMLElement, key: string, value: string) => {\n // e.g. 'scale(1.87908, 1.87908) translate(0px, 0px);'\n const currentTransform = el.style.transform;\n // e.g. ['scale(1.87908, 1.87908)', 'scale', '1.87908, 1.87908', ...], [ 'translate(0px, 0px)', 'translate', '0px, 0px']]\n const components = [...currentTransform.matchAll(/(\\w+)\$([^)])\$/gi)];\n el.style.transform = [\n components //\n .filter(component => component[1] !== key) // Remove the entry if it's already set\n .map(component => component[0]), // Convert back the remaining entries\n `${key}(${value})`,\n ].join(' ');\n};\n\nconst iconSingleline = '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z\"/></svg>';\n\nconst iconMultiline =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z\"/></svg>';\n\nconst iconCheck =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z\"/></svg>';\n\nconst iconRadio =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z\"/></svg>';\n\nconst iconDatepicker =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z\"/></svg>';\n\nconst iconSignature =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z\"/></svg>';\n\nconst iconInitial = '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z\"/></svg>';\n\n/*\n Displays a builder experience for laying out fields in a template. Note that this experience requires a large display area to\n * present all of the required controls, so it is primarily intended to be used in desktop environments.\n /\n@Component({\n tag: 'verdocs-template-fields',\n styleUrl: 'verdocs-template-fields.scss',\n shadow: false,\n})\nexport class VerdocsTemplateFields {\n page0El: HTMLDivElement;\n toolbarEl: HTMLDivElement;\n\n /\n The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n The ID of the template to create the document from.\n /\n @Prop() templateId: string \| null = null;\n\n /\n Event fired when the user completes the step.\n /\n @Event({composed: true}) settingsUpdated: EventEmitter;\n\n /\n Event fired when the user cancels the dialog.\n /\n @Event({composed: true}) cancel: EventEmitter;\n\n /\n Event fired if an error occurs. The event details will contain information about the error. Most errors will\n * terminate the process, and the calling application should correct the condition and re-render the component.\n */\n @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n @State() pdfUrl = null;\n @State() template: ITemplate \| null = null;\n\n async componentWillLoad() {\n try {\n console.log(`[PREVIEW] Loading template ${this.templateId}`);\n builderStore.templateId = this.templateId;\n const template = await getTemplate(this.endpoint, this.templateId);\n\n console.log('[PREVIEW] Got template', this.template);\n this.template = template;\n builderStore.template = this.template;\n\n this.pdfUrl = `${this.endpoint.getBaseURL()}/templates/${this.templateId}/documents/${template.template_document?.id}?file=true`;\n\n builderStore.roleNames = template.roles.map(role => role.name);\n // this.roles = template.roles.map(role => role.name);\n console.log('[PREVIEW] Loaded roles', builderStore.roleNames);\n\n builderStore.fields = [];\n template.roles.forEach(role => {\n builderStore.fields.push(...role.fields);\n });\n console.log('[PREVIEW] Loaded fields', builderStore.fields);\n // this.fields = [];\n // template.roles.forEach(role => {\n // this.fields.push(...role.fields);\n // });\n // console.log('[PREVIEW] Loaded fields', this.fields);\n } catch (e) {\n console.log('[PREVIEW] Error with preview session', e);\n // this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n }\n }\n\n componentDidRender() {\n // console.log('rendered', this.page0El, this.toolbarEl);\n // console.log('w', this.page0El.clientWidth);\n // console.log('t', this.toolbarEl.clientWidth);\n interact.dynamicDrop(true);\n this.toolbarEl.style.width = `${this.page0El.clientWidth}px`;\n }\n\n async handleFieldChange(field: ITemplateField, e: any, optionId?: string) {\n console.log('[PREVIEW] handleFieldChange', field, e, optionId);\n }\n\n handlePageRendered(e) {\n const pageInfo = e.detail as IPageRenderEvent;\n console.log('[PREVIEW] Page rendered', pageInfo);\n\n const fields = builderStore.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n console.log('[PREVIEW] Fields on page', fields);\n fields.forEach(field => {\n const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(builderStore.roleNames, field.role_name), this.handleFieldChange, true, true, true);\n // const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(this.roles, field.role_name), this.handleFieldChange, true, true, true);\n if (!el) {\n console.log('Skipping partially rendered field', field);\n return;\n }\n\n el.addEventListener('recipientChanged', e => {\n el.setAttribute('roleindex', getRoleIndex(builderStore.roleNames, e.detail));\n // el.setAttribute('roleindex', getRoleIndex(this.roles, e.detail));\n });\n\n el.setAttribute('xScale', pageInfo.renderedPage.xScale);\n el.setAttribute('yScale', pageInfo.renderedPage.yScale);\n\n interact(el).draggable({\n listeners: {\n start(event) {\n console.log('drag started', event.type, event.target);\n },\n move(event) {\n console.log('moved');\n const oldX = +(event.target.getAttribute('posX') \|\| 0);\n const oldY = +(event.target.getAttribute('posY') \|\| 0);\n const xScale = +(event.target.getAttribute('xScale') \|\| 1);\n const yScale = +(event.target.getAttribute('yScale') \|\| 1);\n const newX = event.dx / xScale + oldX;\n const newY = event.dy / yScale + oldY;\n event.target.setAttribute('posX', newX);\n event.target.setAttribute('posy', newY);\n updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);\n },\n end(event) {\n console.log('ended', event);\n // event.target.setAttribute('posX', 0);\n // event.target.setAttribute('posy', 0);\n // updateCssTransform(event.target, 'translate', `${0}px, ${0}px`);\n },\n },\n });\n });\n }\n\n render() {\n const testField: ITemplateField = {\n template_id: '',\n name: 'test',\n role_name: 'Recipient 1',\n type: 'textbox',\n required: true,\n setting: {\n x: 0,\n y: 0,\n },\n page_sequence: 0,\n };\n\n return (\n <Host>\n {this.pdfUrl ? (\n <Fragment>\n <div class=\"fields-bar\" ref={el => (this.toolbarEl = el as HTMLDivElement)}>\n <div class=\"label\">Add Field:</div>\n <verdocs-toolbar-icon icon={iconSingleline} text=\"Single-line Text Box\" onPress={() => console.log('single press')} />\n <verdocs-toolbar-icon icon={iconMultiline} text=\"Multi-line Text Box\" onPress={() => console.log('multi press')} />\n <verdocs-toolbar-icon icon={iconCheck} text=\"Checkbox\" onPress={() => console.log('check press')} />\n <verdocs-toolbar-icon icon={iconRadio} text=\"Radio Button\" onPress={() => console.log('radio press')} />\n <verdocs-toolbar-icon icon={iconDatepicker} text=\"Date Picker\" onPress={() => console.log('date press')} />\n <verdocs-toolbar-icon icon={iconSignature} text=\"Signature\" onPress={() => console.log('signature press')} />\n <verdocs-toolbar-icon icon={iconInitial} text=\"Initials\" onPress={() => console.log('initial press')} />\n <div style={{flex: '1'}} />\n <button onClick={() => console.log('save')} disabled={true} class=\"operation\">\n Save\n </button>\n <button onClick={() => console.log('close')} class=\"operation\">\n Close\n </button>\n </div>\n\n <div class=\"page-0\" ref={el => (this.page0El = el as HTMLDivElement)}>\n <div class=\"user-placed-fields\">\n <div class=\"title\">User-Placed Fields</div>\n <verdocs-field-signature\n field={testField}\n style={{width: '82px', height: '41px', left: '20px', top: '40px', transform: 'scale(1,1)', backgroundColor: getRGBA(0)}}\n moveable={true}\n editable={true}\n />\n </div>\n </div>\n\n <verdocs-view\n source={this.pdfUrl}\n endpoint={this.endpoint}\n onPageRendered={e => this.handlePageRendered(e)}\n pageLayers={[\n {name: 'page', type: 'canvas'},\n {name: 'controls', type: 'div'},\n ]}\n />\n </Fragment>\n ) : (\n <verdocs-loader />\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"verdocs-template-fields2.js","mappings":"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","names":["builderStore"],"sources":["./src/components/elements/verdocs-template-fields/verdocs-template-fields.scss?tag=verdocs-template-fields","./src/components/elements/verdocs-template-fields/verdocs-template-fields.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-fields {\n position: relative;\n font-family: $verdocs-primary-font;\n\n .page-0 {\n padding: 65px 15px 0 15px;\n box-sizing: border-box;\n\n .user-placed-fields {\n height: 100px;\n position: relative;\n background: #ffffff;\n box-shadow: 0 0 10px 5px #0000000f;\n\n .title {\n top: 0;\n left: 0;\n color: #ffffff;\n font-size: 12px;\n padding: 3px 6px;\n font-weight: bold;\n position: absolute;\n background: $verdocs-grey-blue;\n }\n }\n }\n\n .fields-bar {\n height: 50px;\n display: flex;\n z-index: 10000;\n position: fixed;\n padding: 5px 20px;\n line-height: 28px;\n align-items: center;\n flex-direction: row;\n box-sizing: border-box;\n background: $verdocs-grey-blue;\n\n .label {\n color: #ffffff;\n font-size: 14px;\n font-weight: bold;\n margin-right: 8px;\n }\n\n .icon {\n margin: 0 4px;\n display: flex;\n transform: scale(0.8, 0.8);\n\n svg {\n fill: #ffffff;\n }\n }\n\n .operation {\n border: none;\n outline: none;\n color: #ffffff;\n cursor: pointer;\n font-size: 16px;\n margin-left: 10px;\n background: transparent;\n text-transform: uppercase;\n\n &:disabled {\n color: #cccccc;\n cursor: inherit;\n pointer-events: none;\n }\n }\n }\n}\n","import interact from 'interactjs';\nimport {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplate, ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, h, Event, EventEmitter, Fragment, Prop, State, Host} from '@stencil/core';\nimport {IPageRenderEvent} from '../../embeds/verdocs-view/verdocs-view';\nimport {getRoleIndex, renderDocumentField} from '../../../utils/utils';\nimport {getTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport builderStore from '../../../utils/builderStore';\nimport {SDKError} from '../../../utils/errors';\n\n/*\n Helper function to safely set/update components in a CSS transform attribute. Transform is normally set as a string of\n * `operation1(param) operation2(param) ...` components, which makes updating them a bit of a pain. This will remove the\n * specified component if it's already set and replace it with the new value, without touching the other components that\n * may already be set. Note that this operation moves the component to the end of the transform chain so it's not meant\n * to be used for order-sensitive components e.g. translate-then-rotate.\n /\nconst updateCssTransform = (el: HTMLElement, key: string, value: string) => {\n // e.g. 'scale(1.87908, 1.87908) translate(0px, 0px);'\n const currentTransform = el.style.transform;\n // e.g. ['scale(1.87908, 1.87908)', 'scale', '1.87908, 1.87908', ...], [ 'translate(0px, 0px)', 'translate', '0px, 0px']]\n const components = [...currentTransform.matchAll(/(\\w+)\$([^)])\$/gi)];\n el.style.transform = [\n components //\n .filter(component => component[1] !== key) // Remove the entry if it's already set\n .map(component => component[0]), // Convert back the remaining entries\n `${key}(${value})`,\n ].join(' ');\n};\n\nconst iconSingleline = '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z\"/></svg>';\n\nconst iconMultiline =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z\"/></svg>';\n\nconst iconCheck =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z\"/></svg>';\n\nconst iconRadio =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z\"/></svg>';\n\nconst iconDatepicker =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z\"/></svg>';\n\nconst iconSignature =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z\"/></svg>';\n\nconst iconInitial = '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z\"/></svg>';\n\n/*\n Displays a builder experience for laying out fields in a template. Note that this experience requires a large display area to\n * present all of the required controls, so it is primarily intended to be used in desktop environments.\n /\n@Component({\n tag: 'verdocs-template-fields',\n styleUrl: 'verdocs-template-fields.scss',\n shadow: false,\n})\nexport class VerdocsTemplateFields {\n page0El: HTMLDivElement;\n toolbarEl: HTMLDivElement;\n\n /\n The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n The ID of the template to create the document from.\n /\n @Prop() templateId: string \| null = null;\n\n /\n Event fired when the user completes the step.\n /\n @Event({composed: true}) settingsUpdated: EventEmitter;\n\n /\n Event fired when the user cancels the dialog.\n /\n @Event({composed: true}) cancel: EventEmitter;\n\n /\n Event fired if an error occurs. The event details will contain information about the error. Most errors will\n * terminate the process, and the calling application should correct the condition and re-render the component.\n */\n @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n @State() pdfUrl = null;\n @State() template: ITemplate \| null = null;\n\n async componentWillLoad() {\n try {\n this.endpoint.loadSession();\n\n console.log(`[PREVIEW] Loading template ${this.templateId}`);\n builderStore.templateId = this.templateId;\n const template = await getTemplate(this.endpoint, this.templateId);\n\n console.log('[PREVIEW] Got template', this.template);\n this.template = template;\n builderStore.template = this.template;\n\n this.pdfUrl = `${this.endpoint.getBaseURL()}/templates/${this.templateId}/documents/${template.template_document?.id}?file=true`;\n\n builderStore.roleNames = template.roles.map(role => role.name);\n // this.roles = template.roles.map(role => role.name);\n console.log('[PREVIEW] Loaded roles', builderStore.roleNames);\n\n builderStore.fields = [];\n template.roles.forEach(role => {\n builderStore.fields.push(...role.fields);\n });\n console.log('[PREVIEW] Loaded fields', builderStore.fields);\n // this.fields = [];\n // template.roles.forEach(role => {\n // this.fields.push(...role.fields);\n // });\n // console.log('[PREVIEW] Loaded fields', this.fields);\n } catch (e) {\n console.log('[PREVIEW] Error with preview session', e);\n this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n }\n }\n\n componentDidRender() {\n // console.log('rendered', this.page0El, this.toolbarEl);\n // console.log('w', this.page0El.clientWidth);\n // console.log('t', this.toolbarEl.clientWidth);\n interact.dynamicDrop(true);\n this.toolbarEl.style.width = `${this.page0El.clientWidth}px`;\n }\n\n async handleFieldChange(field: ITemplateField, e: any, optionId?: string) {\n console.log('[PREVIEW] handleFieldChange', field, e, optionId);\n }\n\n handlePageRendered(e) {\n const pageInfo = e.detail as IPageRenderEvent;\n console.log('[PREVIEW] Page rendered', pageInfo);\n\n const fields = builderStore.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n console.log('[PREVIEW] Fields on page', fields);\n fields.forEach(field => {\n const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(builderStore.roleNames, field.role_name), this.handleFieldChange, true, true, true);\n // const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(this.roles, field.role_name), this.handleFieldChange, true, true, true);\n if (!el) {\n console.log('Skipping partially rendered field', field);\n return;\n }\n\n el.addEventListener('recipientChanged', e => {\n el.setAttribute('roleindex', getRoleIndex(builderStore.roleNames, e.detail));\n // el.setAttribute('roleindex', getRoleIndex(this.roles, e.detail));\n });\n\n el.setAttribute('xScale', pageInfo.renderedPage.xScale);\n el.setAttribute('yScale', pageInfo.renderedPage.yScale);\n\n interact(el).draggable({\n listeners: {\n start(event) {\n console.log('drag started', event.type, event.target);\n },\n move(event) {\n console.log('moved');\n const oldX = +(event.target.getAttribute('posX') \|\| 0);\n const oldY = +(event.target.getAttribute('posY') \|\| 0);\n const xScale = +(event.target.getAttribute('xScale') \|\| 1);\n const yScale = +(event.target.getAttribute('yScale') \|\| 1);\n const newX = event.dx / xScale + oldX;\n const newY = event.dy / yScale + oldY;\n event.target.setAttribute('posX', newX);\n event.target.setAttribute('posy', newY);\n updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);\n },\n end(event) {\n console.log('ended', event);\n // event.target.setAttribute('posX', 0);\n // event.target.setAttribute('posy', 0);\n // updateCssTransform(event.target, 'translate', `${0}px, ${0}px`);\n },\n },\n });\n });\n }\n\n render() {\n const testField: ITemplateField = {\n template_id: '',\n name: 'test',\n role_name: 'Recipient 1',\n type: 'textbox',\n required: true,\n setting: {\n x: 0,\n y: 0,\n },\n page_sequence: 0,\n };\n\n return (\n <Host>\n {this.pdfUrl ? (\n <Fragment>\n <div class=\"fields-bar\" ref={el => (this.toolbarEl = el as HTMLDivElement)}>\n <div class=\"label\">Add Field:</div>\n <verdocs-toolbar-icon icon={iconSingleline} text=\"Single-line Text Box\" onPress={() => console.log('single press')} />\n <verdocs-toolbar-icon icon={iconMultiline} text=\"Multi-line Text Box\" onPress={() => console.log('multi press')} />\n <verdocs-toolbar-icon icon={iconCheck} text=\"Checkbox\" onPress={() => console.log('check press')} />\n <verdocs-toolbar-icon icon={iconRadio} text=\"Radio Button\" onPress={() => console.log('radio press')} />\n <verdocs-toolbar-icon icon={iconDatepicker} text=\"Date Picker\" onPress={() => console.log('date press')} />\n <verdocs-toolbar-icon icon={iconSignature} text=\"Signature\" onPress={() => console.log('signature press')} />\n <verdocs-toolbar-icon icon={iconInitial} text=\"Initials\" onPress={() => console.log('initial press')} />\n <div style={{flex: '1'}} />\n <button onClick={() => console.log('save')} disabled={true} class=\"operation\">\n Save\n </button>\n <button onClick={() => console.log('close')} class=\"operation\">\n Close\n </button>\n </div>\n\n <div class=\"page-0\" ref={el => (this.page0El = el as HTMLDivElement)}>\n <div class=\"user-placed-fields\">\n <div class=\"title\">User-Placed Fields</div>\n <verdocs-field-signature\n field={testField}\n style={{width: '82px', height: '41px', left: '20px', top: '40px', transform: 'scale(1,1)', backgroundColor: getRGBA(0)}}\n moveable={true}\n editable={true}\n />\n </div>\n </div>\n\n <verdocs-view\n source={this.pdfUrl}\n endpoint={this.endpoint}\n onPageRendered={e => this.handlePageRendered(e)}\n pageLayers={[\n {name: 'page', type: 'canvas'},\n {name: 'controls', type: 'div'},\n ]}\n />\n </Fragment>\n ) : (\n <verdocs-loader />\n )}\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,6 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { g as getTemplate } from './Templates.js';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { s as state } from './builderStore.js';
+import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$4 } from './verdocs-button2.js';
 import { d as defineCustomElement$3 } from './verdocs-checkbox2.js';
 import { d as defineCustomElement$2 } from './verdocs-radio-button2.js';
@@ -14,16 +17,31 @@ const VerdocsTemplateProperties = /*@__PURE__*/ proxyCustomElement(class extends
     this.__registerHost();
     this.cancel = createEvent(this, "cancel", 7);
     this.settingsUpdated = createEvent(this, "settingsUpdated", 7);
+    this.sdkError = createEvent(this, "sdkError", 7);
     this.endpoint = VerdocsEndpoint.getDefault();
-    this.templateRole = null;
+    this.templateId = '';
+    this.template = null;
+    this.name = '';
     this.sendReminders = false;
+    this.firstReminderDays = '1';
+    this.reminderDays = '1';
   }
-  componentWillLoad() {
-  }
-  handleNameChange(e) {
-    console.log(e);
-    // this.name = e.target.value;
-    // this.searchContacts?.emit({query: this.name});
+  async componentWillLoad() {
+    var _a, _b, _c;
+    try {
+      this.endpoint.loadSession();
+      console.log(`[PROPERTIES] Loading template ${this.templateId}`);
+      state.templateId = this.templateId;
+      const template = await getTemplate(this.endpoint, this.templateId);
+      console.log('[PROPERTIES] Got template', template);
+      this.template = template;
+      this.name = template.name;
+      this.sendReminders = template.reminder_id !== null;
+    }
+    catch (e) {
+      console.log('[PROPERTIES] Error loading template', e);
+      (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+    }
   }
   handleMessageChange(e) {
     console.log(e);
@@ -43,13 +61,24 @@ const VerdocsTemplateProperties = /*@__PURE__*/ proxyCustomElement(class extends
     // });
   }
   render() {
-    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Template Name"), h("fieldset", null, h("verdocs-text-input", { value: "Motor Vehicle Bill of Sale", autocomplete: "off" })), h("h5", null, "Reminders"), h("fieldset", null, h("div", { class: "input-row" }, h("label", null, "Send Automatic Reminders"), h("verdocs-checkbox", { name: "automatic-reminders", checked: true })), h("div", { class: "input-row" }, h("label", null, "Days Before First Reminder"), h("verdocs-text-input", { value: "1" })), h("div", { class: "input-row" }, h("label", null, "Days Between Reminders"), h("verdocs-text-input", { value: "1" }))), h("h5", null, "Template Visibility"), h("fieldset", null, h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "private" }), h("label", { htmlFor: "verdocs-radio-button-visibility-private" }, h("div", { class: "title" }, "Private"), h("div", { class: "description" }, "Only you can share and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "shared" }), h("label", { htmlFor: "verdocs-radio-button-visibility-shared" }, h("div", { class: "title" }, "Shared to your organization"), h("div", { class: "description" }, "Give access to your organization to share and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "shared_public" }), h("label", { htmlFor: "verdocs-radio-button-visibility-shared_public" }, h("div", { class: "title" }, "Shared to your organization and Public"), h("div", { class: "description" }, "Give access to your organization to share this template, and anyone on the Web can find and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "public" }), h("label", { htmlFor: "verdocs-radio-button-visibility-public" }, h("div", { class: "title" }, "Public"), h("div", { class: "description" }, "Anyone on the Web can find and use this template")))), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onPress: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onPress: e => this.handleSubmit(e) }))));
+    console.log('vals', { firstReminderDays: this.firstReminderDays, reminderDays: this.reminderDays, name: this.name });
+    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Template Name"), h("fieldset", null, h("verdocs-text-input", { value: this.name, autocomplete: "off", onInput: (e) => {
+        this.name = e.target.value;
+      } })), h("h5", null, "Reminders"), h("fieldset", null, h("div", { class: "input-row" }, h("label", null, "Send Automatic Reminders"), h("verdocs-checkbox", { name: "automatic-reminders", checked: this.sendReminders, value: "on", onSelected: e => (this.sendReminders = e.detail.value === 'on') })), h("div", { class: "input-row" }, h("label", null, "Days Before First Reminder"), h("verdocs-text-input", { value: this.firstReminderDays, onInput: (e) => {
+        this.firstReminderDays = e.target.value;
+      } })), h("div", { class: "input-row" }, h("label", null, "Days Between Reminders"), h("verdocs-text-input", { value: this.reminderDays, onInput: (e) => {
+        this.firstReminderDays = e.target.value;
+      } }))), h("h5", null, "Template Visibility"), h("fieldset", null, h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "private" }), h("label", { htmlFor: "verdocs-radio-button-visibility-private" }, h("div", { class: "title" }, "Private"), h("div", { class: "description" }, "Only you can share and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "shared" }), h("label", { htmlFor: "verdocs-radio-button-visibility-shared" }, h("div", { class: "title" }, "Shared to your organization"), h("div", { class: "description" }, "Give access to your organization to share and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "shared_public" }), h("label", { htmlFor: "verdocs-radio-button-visibility-shared_public" }, h("div", { class: "title" }, "Shared to your organization and Public"), h("div", { class: "description" }, "Give access to your organization to share this template, and anyone on the Web can find and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "public" }), h("label", { htmlFor: "verdocs-radio-button-visibility-public" }, h("div", { class: "title" }, "Public"), h("div", { class: "description" }, "Anyone on the Web can find and use this template")))), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onPress: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onPress: e => this.handleSubmit(e) }))));
   }
   static get style() { return verdocsTemplatePropertiesCss; }
 }, [0, "verdocs-template-properties", {
     "endpoint": [16],
-    "templateRole": [16],
-    "sendReminders": [32]
+    "templateId": [1, "template-id"],
+    "template": [32],
+    "name": [32],
+    "sendReminders": [32],
+    "firstReminderDays": [32],
+    "reminderDays": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

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

	@@ -1 +1 @@
1	- {"file":"verdocs-template-properties2.js","mappings":"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","names":[],"sources":["./src/components/elements/verdocs-template-properties/verdocs-template-properties.scss?tag=verdocs-template-properties","./src/components/elements/verdocs-template-properties/verdocs-template-properties.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-properties {\n font-family: $verdocs-primary-font;\n\n form {\n display: flex;\n flex-direction: column;\n\n h5 {\n font-size: 14px;\n font-weight: 400;\n margin: 0 0 6px 0;\n }\n\n .row {\n display: flex;\n position: relative;\n margin: 0 0 20px 0;\n flex-direction: column;\n }\n\n fieldset {\n width: 440px;\n border: none;\n max-width: 100%;\n margin: 0 0 20px 0;\n box-sizing: border-box;\n padding: 20px 20px 10px 20px;\n background-color: $verdocs-grey-4;\n box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 12%), 0 0 2px 0 rgb(0 0 0 / 14%);\n }\n\n label {\n display: block;\n font-size: 14px;\n font-weight: 500;\n margin: 0 0 4px 0;\n color: $verdocs-bg-4;\n }\n\n input {\n border: none;\n font-size: 18px;\n padding: 3px 6px 3px 0;\n background: transparent;\n border-bottom: 1px solid $verdocs-dark-blue;\n\n &:focus {\n outline: none;\n }\n }\n\n .input-row {\n display: flex;\n margin: 0 0 10px 0;\n align-items: center;\n flex-direction: row;\n\n label {\n flex: 1;\n display: flex;\n }\n\n verdocs-text-input {\n margin: 0;\n display: flex;\n flex: 0 0 40px;\n\n input {\n text-align: center;\n }\n }\n\n verdocs-checkbox {\n display: flex;\n flex: 0 0 40px;\n justify-content: center;\n }\n }\n\n .radio-row {\n display: flex;\n position: relative;\n margin: 0 0 10px 0;\n flex-direction: row;\n\n verdocs-radio-button {\n display: flex;\n flex: 0 0 30px;\n }\n\n label {\n display: flex;\n flex-direction: column;\n\n .title {\n font-size: 16px;\n font-weight: 500;\n }\n\n .description {\n font-size: 14px;\n font-weight: 400;\n }\n }\n }\n }\n\n .buttons {\n display: flex;\n column-gap: 8px;\n margin-top: 16px;\n flex-direction: row;\n\n .flex-fill {\n flex: 1;\n }\n }\n\n ::placeholder {\n color: $verdocs-bg-2;\n }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {IRole} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, h, Event, EventEmitter, Prop, State} from '@stencil/core';\n\n/*\n Displays a collection of settings boxes that allow a user to configure a template's behavior.\n /\n@Component({\n tag: 'verdocs-template-properties',\n styleUrl: 'verdocs-template-properties.scss',\n shadow: false,\n})\nexport class VerdocsTemplateProperties {\n /\n The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n The role that this contact will be assigned to.\n /\n @Prop() templateRole: IRole \| null = null;\n\n /\n Event fired when the user cancels the dialog.\n /\n @Event({composed: true}) cancel: EventEmitter;\n\n /\n Event fired when the user completes the step.\n */\n @Event({composed: true}) settingsUpdated: EventEmitter;\n\n @State() sendReminders: boolean = false;\n\n componentWillLoad() {\n if (this.templateRole) {\n // this.showMessage = this.message !== '';\n }\n }\n\n handleNameChange(e: any) {\n console.log(e);\n // this.name = e.target.value;\n // this.searchContacts?.emit({query: this.name});\n }\n\n handleMessageChange(e: any) {\n console.log(e);\n // this.message = e.target.value;\n }\n\n handleCancel(e) {\n e.stopPropagation();\n this.cancel?.emit();\n }\n\n handleSubmit(e) {\n e.stopPropagation();\n\n this.settingsUpdated?.emit();\n\n // this.contactSelected?.emit({\n // delegator: this.delegator,\n // });\n }\n\n render() {\n return (\n <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n <h5>Template Name</h5>\n <fieldset>\n <verdocs-text-input value=\"Motor Vehicle Bill of Sale\" autocomplete=\"off\" />\n </fieldset>\n\n <h5>Reminders</h5>\n <fieldset>\n <div class=\"input-row\">\n <label>Send Automatic Reminders</label>\n <verdocs-checkbox name=\"automatic-reminders\" checked={true} />\n </div>\n\n <div class=\"input-row\">\n <label>Days Before First Reminder</label>\n <verdocs-text-input value=\"1\" />\n </div>\n <div class=\"input-row\">\n <label>Days Between Reminders</label>\n <verdocs-text-input value=\"1\" />\n </div>\n </fieldset>\n\n <h5>Template Visibility</h5>\n <fieldset>\n <div class=\"radio-row\">\n <verdocs-radio-button name=\"visibility\" checked={true} value=\"private\" />\n <label htmlFor=\"verdocs-radio-button-visibility-private\">\n <div class=\"title\">Private</div>\n <div class=\"description\">Only you can share and use this template</div>\n </label>\n </div>\n <div class=\"radio-row\">\n <verdocs-radio-button name=\"visibility\" checked={true} value=\"shared\" />\n <label htmlFor=\"verdocs-radio-button-visibility-shared\">\n <div class=\"title\">Shared to your organization</div>\n <div class=\"description\">Give access to your organization to share and use this template</div>\n </label>\n </div>\n <div class=\"radio-row\">\n <verdocs-radio-button name=\"visibility\" checked={true} value=\"shared_public\" />\n <label htmlFor=\"verdocs-radio-button-visibility-shared_public\">\n <div class=\"title\">Shared to your organization and Public</div>\n <div class=\"description\">Give access to your organization to share this template, and anyone on the Web can find and use this template</div>\n </label>\n </div>\n <div class=\"radio-row\">\n <verdocs-radio-button name=\"visibility\" checked={true} value=\"public\" />\n <label htmlFor=\"verdocs-radio-button-visibility-public\">\n <div class=\"title\">Public</div>\n <div class=\"description\">Anyone on the Web can find and use this template</div>\n </label>\n </div>\n </fieldset>\n\n <div class=\"buttons\">\n <div class=\"flex-fill\" />\n\n <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onPress={e => this.handleCancel(e)} />\n <verdocs-button label=\"OK\" size=\"small\" onPress={e => this.handleSubmit(e)} />\n </div>\n </form>\n );\n }\n}\n"],"version":3}
1	+ {"file":"verdocs-template-properties2.js","mappings":";;;;;;;;;;;AAAA,MAAM,4BAA4B,GAAG,m/FAAm/F;;MCe3gG,yBAAyB;;;;;;;oBAIA,eAAe,CAAC,UAAU,EAAE;sBAKnC,EAAE;oBAkBO,IAAI;gBAClB,EAAE;yBACD,KAAK;6BACD,GAAG;wBACR,GAAG;;EAE3B,MAAM,iBAAiB;;IACrB,IAAI;MACF,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;MAE5B,OAAO,CAAC,GAAG,CAAC,iCAAiC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;MAChEA,KAAY,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;MAC1C,MAAM,QAAQ,GAAG,MAAM,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;MAEnE,OAAO,CAAC,GAAG,CAAC,2BAA2B,EAAE,QAAQ,CAAC,CAAC;MACnD,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;MACzB,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;MAC1B,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,WAAW,KAAK,IAAI,CAAC;KACpD;IAAC,OAAO,CAAC,EAAE;MACV,OAAO,CAAC,GAAG,CAAC,qCAAqC,EAAE,CAAC,CAAC,CAAC;MACtD,MAAA,IAAI,CAAC,QAAQ,0CAAE,IAAI,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,OAAO,EAAE,MAAA,CAAC,CAAC,QAAQ,0CAAE,MAAM,EAAE,MAAA,CAAC,CAAC,QAAQ,0CAAE,IAAI,CAAC,CAAC,CAAC;KACpF;GACF;EAED,mBAAmB,CAAC,CAAM;IACxB,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;;GAEhB;EAED,YAAY,CAAC,CAAC;;IACZ,CAAC,CAAC,eAAe,EAAE,CAAC;IACpB,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,EAAE,CAAC;GACrB;EAED,YAAY,CAAC,CAAC;;IACZ,CAAC,CAAC,eAAe,EAAE,CAAC;IAEpB,MAAA,IAAI,CAAC,eAAe,0CAAE,IAAI,EAAE,CAAC;;;;GAK9B;EAED,MAAM;IACJ,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,EAAC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EAAE,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC,CAAC;IACnH,QACE,YAAM,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,EAAE,YAAY,EAAC,KAAK,IAC5F,8BAAsB,EACtB,oBACE,0BACE,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,YAAY,EAAC,KAAK,EAClB,OAAO,EAAE,CAAC,CAAM;QACd,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;OAC5B,GACD,CACO,EAEX,0BAAkB,EAClB,oBACE,WAAK,KAAK,EAAC,WAAW,IACpB,4CAAuC,EACvC,wBAAkB,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,EAAC,IAAI,EAAC,UAAU,EAAE,CAAC,KAAK,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,GAAI,CACpJ,EAEN,WAAK,KAAK,EAAC,WAAW,IACpB,8CAAyC,EACzC,0BACE,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAC7B,OAAO,EAAE,CAAC,CAAM;QACd,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;OACzC,GACD,CACE,EACN,WAAK,KAAK,EAAC,WAAW,IACpB,0CAAqC,EACrC,0BACE,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,OAAO,EAAE,CAAC,CAAM;QACd,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;OACzC,GACD,CACE,CACG,EAEX,oCAA4B,EAC5B,oBACE,WAAK,KAAK,EAAC,WAAW,IACpB,4BAAsB,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAC,SAAS,GAAG,EACzE,aAAO,OAAO,EAAC,yCAAyC,IACtD,WAAK,KAAK,EAAC,OAAO,cAAc,EAChC,WAAK,KAAK,EAAC,aAAa,+CAA+C,CACjE,CACJ,EACN,WAAK,KAAK,EAAC,WAAW,IACpB,4BAAsB,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAC,QAAQ,GAAG,EACxE,aAAO,OAAO,EAAC,wCAAwC,IACrD,WAAK,KAAK,EAAC,OAAO,kCAAkC,EACpD,WAAK,KAAK,EAAC,aAAa,sEAAsE,CACxF,CACJ,EACN,WAAK,KAAK,EAAC,WAAW,IACpB,4BAAsB,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAC,eAAe,GAAG,EAC/E,aAAO,OAAO,EAAC,+CAA+C,IAC5D,WAAK,KAAK,EAAC,OAAO,6CAA6C,EAC/D,WAAK,KAAK,EAAC,aAAa,oHAAoH,CACtI,CACJ,EACN,WAAK,KAAK,EAAC,WAAW,IACpB,4BAAsB,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAC,QAAQ,GAAG,EACxE,aAAO,OAAO,EAAC,wCAAwC,IACrD,WAAK,KAAK,EAAC,OAAO,aAAa,EAC/B,WAAK,KAAK,EAAC,aAAa,uDAAuD,CACzE,CACJ,CACG,EAEX,WAAK,KAAK,EAAC,SAAS,IAClB,WAAK,KAAK,EAAC,WAAW,GAAG,EAEzB,sBAAgB,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAI,EACpG,sBAAgB,KAAK,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAI,CAC1E,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["builderStore"],"sources":["./src/components/elements/verdocs-template-properties/verdocs-template-properties.scss?tag=verdocs-template-properties","./src/components/elements/verdocs-template-properties/verdocs-template-properties.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-properties {\n font-family: $verdocs-primary-font;\n\n form {\n display: flex;\n flex-direction: column;\n\n h5 {\n font-size: 14px;\n font-weight: 400;\n margin: 0 0 6px 0;\n }\n\n .row {\n display: flex;\n position: relative;\n margin: 0 0 20px 0;\n flex-direction: column;\n }\n\n fieldset {\n width: 440px;\n border: none;\n max-width: 100%;\n margin: 0 0 20px 0;\n box-sizing: border-box;\n padding: 20px 20px 10px 20px;\n background-color: $verdocs-grey-4;\n box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 12%), 0 0 2px 0 rgb(0 0 0 / 14%);\n }\n\n label {\n display: block;\n font-size: 14px;\n font-weight: 500;\n margin: 0 0 4px 0;\n color: $verdocs-bg-4;\n }\n\n input {\n border: none;\n font-size: 18px;\n padding: 3px 6px 3px 0;\n background: transparent;\n border-bottom: 1px solid $verdocs-dark-blue;\n\n &:focus {\n outline: none;\n }\n }\n\n .input-row {\n display: flex;\n margin: 0 0 10px 0;\n align-items: center;\n flex-direction: row;\n\n label {\n flex: 1;\n display: flex;\n }\n\n verdocs-text-input {\n margin: 0;\n display: flex;\n flex: 0 0 40px;\n\n input {\n text-align: center;\n }\n }\n\n verdocs-checkbox {\n display: flex;\n flex: 0 0 40px;\n justify-content: center;\n }\n }\n\n .radio-row {\n display: flex;\n position: relative;\n margin: 0 0 10px 0;\n flex-direction: row;\n\n verdocs-radio-button {\n display: flex;\n flex: 0 0 30px;\n }\n\n label {\n display: flex;\n flex-direction: column;\n\n .title {\n font-size: 16px;\n font-weight: 500;\n }\n\n .description {\n font-size: 14px;\n font-weight: 400;\n }\n }\n }\n }\n\n .buttons {\n display: flex;\n column-gap: 8px;\n margin-top: 16px;\n flex-direction: row;\n\n .flex-fill {\n flex: 1;\n }\n }\n\n ::placeholder {\n color: $verdocs-bg-2;\n }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop, State} from '@stencil/core';\nimport builderStore from '../../../utils/builderStore';\nimport {getTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport {ITemplate} from '@verdocs/js-sdk/Templates/Types';\nimport {SDKError} from '../../../utils/errors';\n\n/*\n Displays a collection of settings boxes that allow a user to configure a template's behavior.\n /\n@Component({\n tag: 'verdocs-template-properties',\n styleUrl: 'verdocs-template-properties.scss',\n shadow: false,\n})\nexport class VerdocsTemplateProperties {\n /\n The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n The template ID to edit.\n /\n @Prop() templateId: string = '';\n\n /\n Event fired when the user cancels the dialog.\n /\n @Event({composed: true}) cancel: EventEmitter;\n\n /\n Event fired when the user completes the step.\n /\n @Event({composed: true}) settingsUpdated: EventEmitter;\n\n /\n Event fired if an error occurs. The event details will contain information about the error. Most errors will\n * terminate the process, and the calling application should correct the condition and re-render the component.\n */\n @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n @State() template: ITemplate \| null = null;\n @State() name: string = '';\n @State() sendReminders = false;\n @State() firstReminderDays = '1';\n @State() reminderDays = '1';\n\n async componentWillLoad() {\n try {\n this.endpoint.loadSession();\n\n console.log(`[PROPERTIES] Loading template ${this.templateId}`);\n builderStore.templateId = this.templateId;\n const template = await getTemplate(this.endpoint, this.templateId);\n\n console.log('[PROPERTIES] Got template', template);\n this.template = template;\n this.name = template.name;\n this.sendReminders = template.reminder_id !== null;\n } catch (e) {\n console.log('[PROPERTIES] Error loading template', e);\n this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n }\n }\n\n handleMessageChange(e: any) {\n console.log(e);\n // this.message = e.target.value;\n }\n\n handleCancel(e) {\n e.stopPropagation();\n this.cancel?.emit();\n }\n\n handleSubmit(e) {\n e.stopPropagation();\n\n this.settingsUpdated?.emit();\n\n // this.contactSelected?.emit({\n // delegator: this.delegator,\n // });\n }\n\n render() {\n console.log('vals', {firstReminderDays: this.firstReminderDays, reminderDays: this.reminderDays, name: this.name});\n return (\n <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n <h5>Template Name</h5>\n <fieldset>\n <verdocs-text-input\n value={this.name}\n autocomplete=\"off\"\n onInput={(e: any) => {\n this.name = e.target.value;\n }}\n />\n </fieldset>\n\n <h5>Reminders</h5>\n <fieldset>\n <div class=\"input-row\">\n <label>Send Automatic Reminders</label>\n <verdocs-checkbox name=\"automatic-reminders\" checked={this.sendReminders} value=\"on\" onSelected={e => (this.sendReminders = e.detail.value === 'on')} />\n </div>\n\n <div class=\"input-row\">\n <label>Days Before First Reminder</label>\n <verdocs-text-input\n value={this.firstReminderDays}\n onInput={(e: any) => {\n this.firstReminderDays = e.target.value;\n }}\n />\n </div>\n <div class=\"input-row\">\n <label>Days Between Reminders</label>\n <verdocs-text-input\n value={this.reminderDays}\n onInput={(e: any) => {\n this.firstReminderDays = e.target.value;\n }}\n />\n </div>\n </fieldset>\n\n <h5>Template Visibility</h5>\n <fieldset>\n <div class=\"radio-row\">\n <verdocs-radio-button name=\"visibility\" checked={true} value=\"private\" />\n <label htmlFor=\"verdocs-radio-button-visibility-private\">\n <div class=\"title\">Private</div>\n <div class=\"description\">Only you can share and use this template</div>\n </label>\n </div>\n <div class=\"radio-row\">\n <verdocs-radio-button name=\"visibility\" checked={true} value=\"shared\" />\n <label htmlFor=\"verdocs-radio-button-visibility-shared\">\n <div class=\"title\">Shared to your organization</div>\n <div class=\"description\">Give access to your organization to share and use this template</div>\n </label>\n </div>\n <div class=\"radio-row\">\n <verdocs-radio-button name=\"visibility\" checked={true} value=\"shared_public\" />\n <label htmlFor=\"verdocs-radio-button-visibility-shared_public\">\n <div class=\"title\">Shared to your organization and Public</div>\n <div class=\"description\">Give access to your organization to share this template, and anyone on the Web can find and use this template</div>\n </label>\n </div>\n <div class=\"radio-row\">\n <verdocs-radio-button name=\"visibility\" checked={true} value=\"public\" />\n <label htmlFor=\"verdocs-radio-button-visibility-public\">\n <div class=\"title\">Public</div>\n <div class=\"description\">Anyone on the Web can find and use this template</div>\n </label>\n </div>\n </fieldset>\n\n <div class=\"buttons\">\n <div class=\"flex-fill\" />\n\n <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onPress={e => this.handleCancel(e)} />\n <verdocs-button label=\"OK\" size=\"small\" onPress={e => this.handleSubmit(e)} />\n </div>\n </form>\n );\n }\n}\n"],"version":3}

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

@@ -15,14 +15,14 @@ const VerdocsTextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this._value = '';
   }
   componentWillLoad() {
-    this._value = this.value;
+    // this._value = this.value;
   }
   componentDidLoad() { }
-  handleInput(e) {
-    this._value = e.target.value;
-  }
+  // handleInput(e: any) {
+  //   this._value = e.target.value;
+  // }
   render() {
-    return (h(Host, { class: "input-field" }, h("label", null, this.label ? h("div", { class: "input-label" }, this.label + ':') : h("div", null), h("input", { type: this.type, value: this._value, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete, onInput: e => this.handleInput(e) }))));
+    return (h(Host, { class: "input-field" }, h("label", null, this.label ? h("div", { class: "input-label" }, this.label + ':') : h("div", null), h("input", { type: this.type, value: this.value, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete }))));
   }
   static get style() { return verdocsTextInputCss; }
 }, [0, "verdocs-text-input", {

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

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

package/dist/docs.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-12-15T04:42:58",
+  "timestamp": "2022-12-15T17:45:31",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.20.0",
@@ -4621,16 +4621,17 @@
           "required": false
         },
         {
-          "name": "templateRole",
-          "type": "IRole",
+          "name": "templateId",
+          "type": "string",
           "mutable": false,
+          "attr": "template-id",
           "reflectToAttr": false,
-          "docs": "The role that this contact will be assigned to.",
+          "docs": "The template ID to edit.",
           "docsTags": [],
-          "default": "null",
+          "default": "''",
           "values": [
             {
-              "type": "IRole"
+              "type": "string"
             }
           ],
           "optional": false,
@@ -4648,6 +4649,15 @@
           "docs": "Event fired when the user cancels the dialog.",
           "docsTags": []
         },
+        {
+          "event": "sdkError",
+          "detail": "SDKError",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event fired if an error occurs. The event details will contain information about the error. Most errors will\nterminate the process, and the calling application should correct the condition and re-render the component.",
+          "docsTags": []
+        },
         {
           "event": "settingsUpdated",
           "detail": "any",