npm - @verdocs/web-sdk - Versions diffs - 1.9.9 → 1.9.10 - Mend

@verdocs/web-sdk 1.9.9 → 1.9.10

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 (523) hide show

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

@@ -17,28 +17,6 @@ const VerdocsToggle = class {
     var _a;
     this.selectedOption = ((_a = this.options) === null || _a === void 0 ? void 0 : _a.defaultSelection) || 0;
   }
-  // @Listen('click', {
-  //   target: 'document',
-  //   capture: true,
-  //   passive: false,
-  // })
-  // handleClick(event) {
-  //   event.preventDefault();
-  //   let container = event.target;
-  //   if (container.matches('toggle-icon-buttons')) {
-  //     container = event.target.shadowRoot;
-  //     const element = container.activeElement;
-  //     const siblings = Array.from(element.parentElement.children).filter(child => {
-  //       return child !== element;
-  //     });
-  //     siblings.map((sibling: any) => {
-  //       return sibling.classList.remove('selected');
-  //     });
-  //     if (!element.classList.contains('selected')) {
-  //       element.classList.add('selected');
-  //     }
-  //   }
-  // }
   render() {
     return (index.h("div", { class: "container" }, index.h("span", { class: "label" }, `${this.options.label}:`), index.h("div", { class: "buttons" }, this.options.buttons.map((button, index$1) => (index.h("button", { id: button.id, key: button.id, innerHTML: button.icon, class: index$1 === this.selectedOption ? 'selected' : '', onClick: () => {
         console.log('clicked', index$1);

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

	@@ -1 +1 @@
1	- {"file":"verdocs-toggle.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,ulCAAulC;;~~MCwBnmC~~,aAAa;;;;;0BAWU,CAAC;;EAEnC,iBAAiB;;IACf,IAAI,CAAC,cAAc,GAAG,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,gBAAgB,KAAI,CAAC,CAAC;GAC3D~~;;;;;;;;;;;;;;;;;;;;;;;EAyBD~~,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,WAAW,IACpBA,kBAAM,KAAK,EAAC,OAAO,IAAE,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,CAAQ,EACrDA,iBAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAgB,EAAEC,OAAa,MACxDD,oBACE,EAAE,EAAE,MAAM,CAAC,EAAE,EACb,GAAG,EAAE,MAAM,CAAC,EAAE,EACd,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,KAAK,EAAEC,OAAK,KAAK,IAAI,CAAC,cAAc,GAAG,UAAU,GAAG,EAAE,EACtD,OAAO,EAAE;QACP,OAAO,CAAC,GAAG,CAAC,SAAS,EAAEA,OAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,cAAc,GAAGA,OAAK,CAAC;OAC7B,GACD,CACH,CAAC,CACE,CACF,EACN;GACH;;;;;;","names":["h","index"],"sources":["./src/components/controls/verdocs-toggle/verdocs-toggle.scss?tag=verdocs-toggle","./src/components/controls/verdocs-toggle/verdocs-toggle.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-toggle {\n font-family: $primary-font;\n\n .container {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n background-color: $container-bg;\n }\n\n .label {\n font-size: 24px;\n font-weight: 700;\n color: $medium-bg;\n align-self: center;\n margin-right: 27px;\n font-family: sans-serif;\n }\n\n .buttons {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n }\n\n .buttons button {\n width: 60px;\n height: 60px;\n border: 2px solid $item-border-color;\n border-radius: 5px;\n cursor: pointer;\n }\n\n .buttons button:not(:last-child) {\n margin-right: 11px;\n }\n\n .buttons svg {\n width: 30px;\n height: 30px;\n }\n\n .buttons button:hover {\n background-color: $item-border-color;\n transition: 0.25s;\n }\n\n .buttons button:hover svg {\n fill: $container-bg;\n transition: 0.25s;\n }\n\n .selected {\n background-color: $border-color;\n transition: 0.25s;\n }\n\n .selected svg {\n fill: #ffffff;\n transition: 0.25s;\n }\n}\n","import {Component, Prop, h, State} from '@stencil/core';\n\nexport interface IButtons {\n id: string;\n icon: string;\n}\n\nexport interface IToggleIconButtons {\n label: string;\n defaultSelection: number;\n buttons: IButtons[];\n}\n\n/*\n Displays a label and a set of buttons, also allowing a default selection of a button\n \n ```typescript\n \n ```\n /\n@Component({\n tag: 'verdocs-toggle',\n styleUrl: 'verdocs-toggle.scss',\n})\nexport class VerdocsToggle {\n /\n The tags to display\n /\n @Prop() options: IToggleIconButtons;\n\n /\n The \"theme\" to be used\n */\n @Prop() theme: 'light' \| 'dark';\n\n @State() selectedOption: number = 0;\n\n componentWillLoad() {\n this.selectedOption = this.options?.defaultSelection \|\| 0;\n }\n\n // @Listen('click', {\n // target: 'document',\n // capture: true,\n // passive: false,\n // })\n // handleClick(event) {\n // event.preventDefault();\n // let container = event.target;\n // if (container.matches('toggle-icon-buttons')) {\n // container = event.target.shadowRoot;\n // const element = container.activeElement;\n // const siblings = Array.from(element.parentElement.children).filter(child => {\n // return child !== element;\n // });\n // siblings.map((sibling: any) => {\n // return sibling.classList.remove('selected');\n // });\n // if (!element.classList.contains('selected')) {\n // element.classList.add('selected');\n // }\n // }\n // }\n\n render() {\n return (\n <div class=\"container\">\n <span class=\"label\">{`${this.options.label}:`}</span>\n <div class=\"buttons\">\n {this.options.buttons.map((button: IButtons, index: number) => (\n <button\n id={button.id}\n key={button.id}\n innerHTML={button.icon}\n class={index === this.selectedOption ? 'selected' : ''}\n onClick={() => {\n console.log('clicked', index);\n this.selectedOption = index;\n }}\n />\n ))}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"verdocs-toggle.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,ulCAAulC;;MCoBnmC,aAAa;;;;;0BAWU,CAAC;;EAEnC,iBAAiB;;IACf,IAAI,CAAC,cAAc,GAAG,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,gBAAgB,KAAI,CAAC,CAAC;GAC3D;EAED,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,WAAW,IACpBA,kBAAM,KAAK,EAAC,OAAO,IAAE,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,CAAQ,EACrDA,iBAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAgB,EAAEC,OAAa,MACxDD,oBACE,EAAE,EAAE,MAAM,CAAC,EAAE,EACb,GAAG,EAAE,MAAM,CAAC,EAAE,EACd,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,KAAK,EAAEC,OAAK,KAAK,IAAI,CAAC,cAAc,GAAG,UAAU,GAAG,EAAE,EACtD,OAAO,EAAE;QACP,OAAO,CAAC,GAAG,CAAC,SAAS,EAAEA,OAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,cAAc,GAAGA,OAAK,CAAC;OAC7B,GACD,CACH,CAAC,CACE,CACF,EACN;GACH;;;;;;","names":["h","index"],"sources":["./src/components/controls/verdocs-toggle/verdocs-toggle.scss?tag=verdocs-toggle","./src/components/controls/verdocs-toggle/verdocs-toggle.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-toggle {\n font-family: $primary-font;\n\n .container {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n background-color: $container-bg;\n }\n\n .label {\n font-size: 24px;\n font-weight: 700;\n color: $medium-bg;\n align-self: center;\n margin-right: 27px;\n font-family: sans-serif;\n }\n\n .buttons {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n }\n\n .buttons button {\n width: 60px;\n height: 60px;\n border: 2px solid $item-border-color;\n border-radius: 5px;\n cursor: pointer;\n }\n\n .buttons button:not(:last-child) {\n margin-right: 11px;\n }\n\n .buttons svg {\n width: 30px;\n height: 30px;\n }\n\n .buttons button:hover {\n background-color: $item-border-color;\n transition: 0.25s;\n }\n\n .buttons button:hover svg {\n fill: $container-bg;\n transition: 0.25s;\n }\n\n .selected {\n background-color: $border-color;\n transition: 0.25s;\n }\n\n .selected svg {\n fill: #ffffff;\n transition: 0.25s;\n }\n}\n","import {Component, Prop, h, State} from '@stencil/core';\n\nexport interface IButtons {\n id: string;\n icon: string;\n}\n\nexport interface IToggleIconButtons {\n label: string;\n defaultSelection: number;\n buttons: IButtons[];\n}\n\n/*\n Displays a label and a set of buttons, also allowing a default selection of a button\n /\n@Component({\n tag: 'verdocs-toggle',\n styleUrl: 'verdocs-toggle.scss',\n})\nexport class VerdocsToggle {\n /\n The tags to display\n /\n @Prop() options: IToggleIconButtons;\n\n /\n The \"theme\" to be used\n */\n @Prop() theme: 'light' \| 'dark';\n\n @State() selectedOption: number = 0;\n\n componentWillLoad() {\n this.selectedOption = this.options?.defaultSelection \|\| 0;\n }\n\n render() {\n return (\n <div class=\"container\">\n <span class=\"label\">{`${this.options.label}:`}</span>\n <div class=\"buttons\">\n {this.options.buttons.map((button: IButtons, index: number) => (\n <button\n id={button.id}\n key={button.id}\n innerHTML={button.icon}\n class={index === this.selectedOption ? 'selected' : ''}\n onClick={() => {\n console.log('clicked', index);\n this.selectedOption = index;\n }}\n />\n ))}\n </div>\n </div>\n );\n }\n}\n"],"version":3}

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

@@ -30,30 +30,20 @@ var fileToDataUrl = function (file) {
     });
 };
-const Paperclip = `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
-</svg>
-`;
-const Trash = `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-</svg>
-`;
 const verdocsUploadDialogCss = "verdocs-upload-dialog{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-upload-dialog div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-upload-dialog .background-overlay{position:absolute;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-upload-dialog .dialog{width:300px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;background:#ffffff;padding:16px;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4)}verdocs-upload-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-size:20px;font-weight:500}verdocs-upload-dialog .buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-upload-dialog .buttons verdocs-button{margin-left:16px}verdocs-upload-dialog .drop-target{padding:30px 15px;width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#f5f5f5;border:2px dashed #979797;min-height:260px;text-align:center;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:rgba(0, 0, 0, 0.54);opacity:1;margin:20px 0}verdocs-upload-dialog .drop-target p{margin:12px 0}verdocs-upload-dialog .drop-target.dragging-over{border:5px solid #4c56cb}verdocs-upload-dialog .drop-target>verdocs-button{margin:12px 0;display:inline-block}verdocs-upload-dialog .attachments{height:56px;font-size:0;margin:20px 0;padding:0 16px;line-height:56px;white-space:normal;-webkit-box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14);box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)}verdocs-upload-dialog .attachments .attachment{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-upload-dialog .attachments .attachment .icon{width:18px;height:18px;line-height:18px}verdocs-upload-dialog .attachments .attachment .icon.trash{cursor:pointer}verdocs-upload-dialog .attachments .attachment .name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;padding:0 8px;font-size:14px;font-weight:400}";
+const TrashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>`;
+const PaperclipIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /></svg>`;
 const VerdocsUploadDialog = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.cancel = index.createEvent(this, "cancel", 7);
-    this.done = index.createEvent(this, "done", 7);
-    this.open = false;
+    this.next = index.createEvent(this, "next", 7);
     this.draggingOver = false;
     this.decodedFiles = [];
   }
   handleCancel() {
     this.cancel.emit();
-    this.open = false;
   }
   // We need a separate event handler for clicking the background because it can receive events "through" other child components
   handleDismiss(e) {
@@ -63,8 +53,7 @@ const VerdocsUploadDialog = class {
     }
   }
   handleDone() {
-    this.done.emit(this.decodedFiles);
-    this.open = false;
+    this.next.emit(this.decodedFiles);
   }
   handleDragOver(e) {
     e.preventDefault();
@@ -101,18 +90,16 @@ const VerdocsUploadDialog = class {
     var _a;
     (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.click();
   }
-  async handleFileChange(e) {
-    var _a, _b, _c;
-    console.log('fileChange', e);
-    console.log('files', (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.files);
+  async handleFileChange() {
+    var _a, _b;
     let droppedFiles = [];
-    for (let i = 0; i < ((_b = this.fileInput) === null || _b === void 0 ? void 0 : _b.files.length); i++) {
-      droppedFiles.push((_c = this.fileInput) === null || _c === void 0 ? void 0 : _c.files[i]);
+    for (let i = 0; i < ((_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.files.length); i++) {
+      droppedFiles.push((_b = this.fileInput) === null || _b === void 0 ? void 0 : _b.files[i]);
     }
     this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
   }
   render() {
-    return (index.h(index.Host, { style: { display: this.open ? 'block' : 'none' } }, index.h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, index.h("div", { class: "dialog" }, index.h("div", { class: "heading" }, "Upload attachment"), this.decodedFiles.length < 1 ? (index.h("div", { class: { 'drop-target': true, 'dragging-over': this.draggingOver }, onDragOver: e => this.handleDragOver(e), onDragLeave: e => this.handleDragLeave(e), onDrop: e => this.handleDrop(e) }, index.h("p", null, "Drag and drop a file here..."), index.h("p", null, "- or -"), index.h("verdocs-button", { label: "Select a file...", onPress: () => this.handleSelectFile() }), index.h("input", { type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, onChange: e => this.handleFileChange(e) }))) : (index.h("div", { class: "attachments" }, this.decodedFiles.map((file, index$1) => (index.h("div", { class: "attachment" }, index.h("div", { class: "icon", innerHTML: Paperclip }), index.h("div", { class: "name" }, file.name), index.h("div", { class: "icon trash", innerHTML: Trash, onClick: () => this.handleRemoveAttachment(index$1) })))))), index.h("div", { class: "buttons" }, index.h("verdocs-button", { label: "Cancel", variant: "outline", onPress: () => this.handleCancel() }), index.h("verdocs-button", { label: "Done", onPress: () => this.handleDone(), disabled: this.decodedFiles.length < 1 }))))));
+    return (index.h(index.Host, null, index.h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, index.h("div", { class: "dialog" }, index.h("div", { class: "heading" }, "Upload attachment"), this.decodedFiles.length < 1 ? (index.h("div", { class: { 'drop-target': true, 'dragging-over': this.draggingOver }, onDragOver: e => this.handleDragOver(e), onDragLeave: e => this.handleDragLeave(e), onDrop: e => this.handleDrop(e) }, index.h("p", null, "Drag and drop a file here..."), index.h("p", null, "- or -"), index.h("verdocs-button", { label: "Select a file...", onClick: () => this.handleSelectFile() }), index.h("input", { type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, onChange: () => this.handleFileChange() }))) : (index.h("div", { class: "attachments" }, this.decodedFiles.map((file, index$1) => (index.h("div", { class: "attachment" }, index.h("div", { class: "icon", innerHTML: PaperclipIcon }), index.h("div", { class: "name" }, file.name), index.h("div", { class: "icon trash", innerHTML: TrashIcon, onClick: () => this.handleRemoveAttachment(index$1) })))))), index.h("div", { class: "buttons" }, index.h("verdocs-button", { label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), index.h("verdocs-button", { label: "Done", onClick: () => this.handleDone(), disabled: this.decodedFiles.length < 1 }))))));
   }
 };
 VerdocsUploadDialog.style = verdocsUploadDialogCss;

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

	@@ -1 +1 @@
1	- {"file":"verdocs-upload-dialog.entry.cjs.js","mappings":"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","names":["h","Host","index"],"sources":["./node_modules/@verdocs/js-sdk/Utils/Files.js","./src/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.scss?tag=verdocs-upload-dialog","./src/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.tsx"],"sourcesContent":["/*\n Given a File, extract the file's content as a base64 encoded data URL. The response will have a prefix that\n * includes the MIME type of the file, e.g. \"data:image/jpeg;base64,iVBORw0K......\"\n /\nexport var fileToDataUrl = function (file) {\n return new Promise(function (resolve, reject) {\n var reader = new FileReader();\n reader.onload = function () {\n return resolve({\n lastModified: file.lastModified,\n size: file.size,\n type: file.type,\n name: file.name,\n data: reader.result,\n });\n };\n reader.onerror = reject;\n if (file) {\n reader.readAsDataURL(file);\n }\n else {\n reject(new Error('Invalid file'));\n }\n });\n};\n","@import '../../../theme.scss';\n\nverdocs-upload-dialog {\n font-family: $primary-font;\n box-sizing: border-box;\n\n div {\n box-sizing: border-box;\n }\n\n .background-overlay {\n position: absolute;\n z-index: 10000;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #0000007f;\n }\n\n .dialog {\n width: 300px;\n display: flex;\n flex-direction: column;\n border-radius: 4px;\n overflow: hidden;\n background: $verdocs-grey-4;\n padding: 16px;\n box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n }\n\n .heading {\n display: flex;\n flex-direction: row;\n font-size: 20px;\n font-weight: 500;\n }\n\n .buttons {\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: flex-end;\n\n verdocs-button {\n margin-left: 16px;\n }\n }\n\n .drop-target {\n padding: 30px 15px;\n width: 100%;\n display: flex;\n flex-direction: column;\n background-color: #f5f5f5;\n border: 2px dashed #979797;\n min-height: 260px;\n text-align: center;\n justify-content: center;\n align-items: center;\n color: rgba(0, 0, 0, 0.54);\n opacity: 1;\n margin: 20px 0;\n\n p {\n margin: 12px 0;\n }\n\n &.dragging-over {\n border: 5px solid $verdocs-deep-blue;\n }\n\n > verdocs-button {\n margin: 12px 0;\n display: inline-block;\n }\n }\n\n .attachments {\n height: 56px;\n font-size: 0;\n margin: 20px 0;\n padding: 0 16px;\n line-height: 56px;\n white-space: normal;\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 .attachment {\n display: flex;\n align-items: center;\n flex-direction: row;\n\n .icon {\n width: 18px;\n height: 18px;\n line-height: 18px;\n\n &.trash {\n cursor: pointer;\n }\n }\n\n .name {\n flex: 1;\n display: flex;\n padding: 0 8px;\n font-size: 14px;\n font-weight: 400;\n }\n }\n }\n}\n","import {Component, Prop, h, Event, EventEmitter, Host, State} from '@stencil/core';\nimport {fileToDataUrl, FileWithData} from '@verdocs/js-sdk/Utils/Files';\nimport Paperclip from './paperclip.svg';\nimport Trash from './trash.svg';\n\n/\n Display a file upload experience.\n /\n@Component({\n tag: 'verdocs-upload-dialog',\n styleUrl: 'verdocs-upload-dialog.scss',\n})\nexport class VerdocsUploadDialog {\n private fileInput?: HTMLInputElement;\n\n /\n Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n /\n @Prop() open: boolean = false;\n\n /\n Event fired when the dialog is closed. The event data will contain the closure reason.\n /\n @Event({composed: true}) cancel: EventEmitter;\n\n /\n Event fired when the dialog is closed. The event data will contain the closure reason.\n */\n @Event({composed: true}) done: EventEmitter<FileWithData[]>;\n\n @State() draggingOver = false;\n\n @State() decodedFiles = [] as FileWithData[];\n\n handleCancel() {\n this.cancel.emit();\n this.open = false;\n }\n\n // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n handleDismiss(e: any) {\n if (e.target.className === 'background-overlay') {\n e.preventDefault();\n this.handleCancel();\n }\n }\n\n handleDone() {\n this.done.emit(this.decodedFiles);\n this.open = false;\n }\n\n handleDragOver(e) {\n e.preventDefault();\n this.draggingOver = true;\n }\n\n handleDragLeave(e) {\n e.preventDefault();\n this.draggingOver = false;\n }\n\n async handleDrop(e) {\n e.preventDefault();\n this.draggingOver = false;\n\n // Required for cross-browser support. Note that dataTransfer.items is of type DataTransferItemList and is not an array.\n let droppedFiles = [] as File[];\n if (e.dataTransfer.items) {\n for (let i = 0; i < e.dataTransfer.items.length; i++) {\n if (e.dataTransfer.items[i].kind === 'file') {\n const file = e.dataTransfer.items[i].getAsFile();\n droppedFiles.push(file);\n }\n }\n } else {\n droppedFiles = e.dataTransfer.files;\n }\n\n this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));\n }\n\n handleRemoveAttachment(index: number) {\n const newFiles = [...this.decodedFiles];\n newFiles.splice(index, 1);\n this.decodedFiles = newFiles;\n }\n\n handleSelectFile() {\n this.fileInput?.click();\n }\n\n async handleFileChange(e) {\n console.log('fileChange', e);\n console.log('files', this.fileInput?.files);\n let droppedFiles = [] as File[];\n for (let i = 0; i < this.fileInput?.files.length; i++) {\n droppedFiles.push(this.fileInput?.files[i]);\n }\n this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));\n }\n\n render() {\n return (\n <Host style={{display: this.open ? 'block' : 'none'}}>\n <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n <div class=\"dialog\">\n <div class=\"heading\">Upload attachment</div>\n\n {this.decodedFiles.length < 1 ? (\n <div\n class={{'drop-target': true, 'dragging-over': this.draggingOver}}\n onDragOver={e => this.handleDragOver(e)}\n onDragLeave={e => this.handleDragLeave(e)}\n onDrop={e => this.handleDrop(e)}\n >\n <p>Drag and drop a file here...</p>\n <p>- or -</p>\n\n <verdocs-button label=\"Select a file...\" onPress={() => this.handleSelectFile()} />\n <input type=\"file\" ref={el => (this.fileInput = el as HTMLInputElement)} style={{display: 'none'}} onChange={e => this.handleFileChange(e)} />\n </div>\n ) : (\n <div class=\"attachments\">\n {this.decodedFiles.map((file, index) => (\n <div class=\"attachment\">\n <div class=\"icon\" innerHTML={Paperclip} />\n <div class=\"name\">{file.name}</div>\n <div class=\"icon trash\" innerHTML={Trash} onClick={() => this.handleRemoveAttachment(index)} />\n </div>\n ))}\n </div>\n )}\n\n <div class=\"buttons\">\n <verdocs-button label=\"Cancel\" variant=\"outline\" onPress={() => this.handleCancel()} />\n <verdocs-button label=\"Done\" onPress={() => this.handleDone()} disabled={this.decodedFiles.length < 1} />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"verdocs-upload-dialog.entry.cjs.js","mappings":"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","names":["h","Host","index"],"sources":["./node_modules/@verdocs/js-sdk/Utils/Files.js","./src/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.scss?tag=verdocs-upload-dialog","./src/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.tsx"],"sourcesContent":["/*\n Given a File, extract the file's content as a base64 encoded data URL. The response will have a prefix that\n * includes the MIME type of the file, e.g. \"data:image/jpeg;base64,iVBORw0K......\"\n /\nexport var fileToDataUrl = function (file) {\n return new Promise(function (resolve, reject) {\n var reader = new FileReader();\n reader.onload = function () {\n return resolve({\n lastModified: file.lastModified,\n size: file.size,\n type: file.type,\n name: file.name,\n data: reader.result,\n });\n };\n reader.onerror = reject;\n if (file) {\n reader.readAsDataURL(file);\n }\n else {\n reject(new Error('Invalid file'));\n }\n });\n};\n","@import '../../../theme.scss';\n\nverdocs-upload-dialog {\n font-family: $primary-font;\n box-sizing: border-box;\n\n div {\n box-sizing: border-box;\n }\n\n .background-overlay {\n position: absolute;\n z-index: 10000;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #0000007f;\n }\n\n .dialog {\n width: 300px;\n display: flex;\n flex-direction: column;\n border-radius: 4px;\n overflow: hidden;\n background: $verdocs-grey-4;\n padding: 16px;\n box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n }\n\n .heading {\n display: flex;\n flex-direction: row;\n font-size: 20px;\n font-weight: 500;\n }\n\n .buttons {\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: flex-end;\n\n verdocs-button {\n margin-left: 16px;\n }\n }\n\n .drop-target {\n padding: 30px 15px;\n width: 100%;\n display: flex;\n flex-direction: column;\n background-color: #f5f5f5;\n border: 2px dashed #979797;\n min-height: 260px;\n text-align: center;\n justify-content: center;\n align-items: center;\n color: rgba(0, 0, 0, 0.54);\n opacity: 1;\n margin: 20px 0;\n\n p {\n margin: 12px 0;\n }\n\n &.dragging-over {\n border: 5px solid $verdocs-deep-blue;\n }\n\n > verdocs-button {\n margin: 12px 0;\n display: inline-block;\n }\n }\n\n .attachments {\n height: 56px;\n font-size: 0;\n margin: 20px 0;\n padding: 0 16px;\n line-height: 56px;\n white-space: normal;\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 .attachment {\n display: flex;\n align-items: center;\n flex-direction: row;\n\n .icon {\n width: 18px;\n height: 18px;\n line-height: 18px;\n\n &.trash {\n cursor: pointer;\n }\n }\n\n .name {\n flex: 1;\n display: flex;\n padding: 0 8px;\n font-size: 14px;\n font-weight: 400;\n }\n }\n }\n}\n","import {Component, h, Event, EventEmitter, Host, State} from '@stencil/core';\nimport {fileToDataUrl, FileWithData} from '@verdocs/js-sdk/Utils/Files';\n\nconst TrashIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\" /></svg>`;\n\nconst PaperclipIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13\" /></svg>`;\n\n/\n Display a file upload tool. Note that the file is not actually transmitted, so it may be used by\n * callers with a variety of workflows. Instead, data about the chosen file will be passed to the\n * caller via the onNext event handler.\n /\n@Component({\n tag: 'verdocs-upload-dialog',\n styleUrl: 'verdocs-upload-dialog.scss',\n})\nexport class VerdocsUploadDialog {\n private fileInput?: HTMLInputElement;\n\n /\n Event fired when the dialog is cancelled.\n /\n @Event({composed: true}) cancel: EventEmitter;\n\n /\n Event fired when the dialog is closed. The event data will contain the file selected.\n */\n @Event({composed: true}) next: EventEmitter<FileWithData[]>;\n\n @State() draggingOver = false;\n\n @State() decodedFiles = [] as FileWithData[];\n\n handleCancel() {\n this.cancel.emit();\n }\n\n // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n handleDismiss(e: any) {\n if (e.target.className === 'background-overlay') {\n e.preventDefault();\n this.handleCancel();\n }\n }\n\n handleDone() {\n this.next.emit(this.decodedFiles);\n }\n\n handleDragOver(e) {\n e.preventDefault();\n this.draggingOver = true;\n }\n\n handleDragLeave(e) {\n e.preventDefault();\n this.draggingOver = false;\n }\n\n async handleDrop(e) {\n e.preventDefault();\n this.draggingOver = false;\n\n // Required for cross-browser support. Note that dataTransfer.items is of type DataTransferItemList and is not an array.\n let droppedFiles = [] as File[];\n if (e.dataTransfer.items) {\n for (let i = 0; i < e.dataTransfer.items.length; i++) {\n if (e.dataTransfer.items[i].kind === 'file') {\n const file = e.dataTransfer.items[i].getAsFile();\n droppedFiles.push(file);\n }\n }\n } else {\n droppedFiles = e.dataTransfer.files;\n }\n\n this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));\n }\n\n handleRemoveAttachment(index: number) {\n const newFiles = [...this.decodedFiles];\n newFiles.splice(index, 1);\n this.decodedFiles = newFiles;\n }\n\n handleSelectFile() {\n this.fileInput?.click();\n }\n\n async handleFileChange() {\n let droppedFiles = [] as File[];\n for (let i = 0; i < this.fileInput?.files.length; i++) {\n droppedFiles.push(this.fileInput?.files[i]);\n }\n this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));\n }\n\n render() {\n return (\n <Host>\n <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n <div class=\"dialog\">\n <div class=\"heading\">Upload attachment</div>\n\n {this.decodedFiles.length < 1 ? (\n <div\n class={{'drop-target': true, 'dragging-over': this.draggingOver}}\n onDragOver={e => this.handleDragOver(e)}\n onDragLeave={e => this.handleDragLeave(e)}\n onDrop={e => this.handleDrop(e)}\n >\n <p>Drag and drop a file here...</p>\n <p>- or -</p>\n\n <verdocs-button label=\"Select a file...\" onClick={() => this.handleSelectFile()} />\n <input type=\"file\" ref={el => (this.fileInput = el as HTMLInputElement)} style={{display: 'none'}} onChange={() => this.handleFileChange()} />\n </div>\n ) : (\n <div class=\"attachments\">\n {this.decodedFiles.map((file, index) => (\n <div class=\"attachment\">\n <div class=\"icon\" innerHTML={PaperclipIcon} />\n <div class=\"name\">{file.name}</div>\n <div class=\"icon trash\" innerHTML={TrashIcon} onClick={() => this.handleRemoveAttachment(index)} />\n </div>\n ))}\n </div>\n )}\n\n <div class=\"buttons\">\n <verdocs-button label=\"Cancel\" variant=\"outline\" onClick={() => this.handleCancel()} />\n <verdocs-button label=\"Done\" onClick={() => this.handleDone()} disabled={this.decodedFiles.length < 1} />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

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

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

@@ -13,6 +13,10 @@ import { h } from '@stencil/core';
  * Icons may be placed either before ("start") or after ("end") the button label. Icons should be SVG objects passed as strings and will
  * be rendered as HTML inside the button label area. It is important that the root <SVG> tag contains a default `fill="#ffffff"` setting
  * for the base color, and that child elements below it do not. This allows the button color to carry into the icon properly.
+ *
+ * ```html
+ * <verdocs-button label="OK" onClick={() => (console.log('OK clicked'))} />
+ * ```
  */
 export class VerdocsButton {
   constructor() {
@@ -24,13 +28,8 @@ export class VerdocsButton {
     this.variant = 'standard';
     this.disabled = false;
   }
-  handleClick(e) {
-    var _a;
-    e.stopPropagation();
-    (_a = this.press) === null || _a === void 0 ? void 0 : _a.emit();
-  }
   render() {
-    return (h("button", { disabled: this.disabled, type: this.type, onClick: e => this.handleClick(e), class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? h("span", { class: "icon start", innerHTML: this.startIcon }) : null, h("span", { class: "label" }, this.label), this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
+    return (h("button", { disabled: this.disabled, type: this.type, class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? h("span", { class: "icon start", innerHTML: this.startIcon }) : null, h("span", { class: "label" }, this.label), this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
   }
   static get is() { return "verdocs-button"; }
   static get originalStyleUrls() {
@@ -74,7 +73,7 @@ export class VerdocsButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If desired, a prefix icon for the button"
+          "text": "If desired, a prefix icon for the button."
         },
         "attribute": "start-icon",
         "reflect": false,
@@ -92,7 +91,7 @@ export class VerdocsButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If desired, a suffix icon for the button"
+          "text": "If desired, a suffix icon for the button."
         },
         "attribute": "end-icon",
         "reflect": false,
@@ -172,23 +171,5 @@ export class VerdocsButton {
       }
     };
   }
-  static get events() {
-    return [{
-        "method": "press",
-        "name": "press",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the button is pressed."
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
 }
 //# sourceMappingURL=verdocs-button.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"verdocs-button.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-button/verdocs-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,~~EAAE~~,~~KAAK,EAAe,~~MAAM,eAAe,CAAC;~~AAEtE;;;;;;;;;;;;;;GAcG~~;AAKH,MAAM,OAAO,aAAa;;;qBASW,IAAI;mBAKN,IAAI;gBAKmB,QAAQ;gBAKlB,QAAQ;mBAKH,UAAU;oBAKjC,KAAK;;~~EAOjC~~,~~WAAW,CAAC,CAAM;;IAChB,CAAC,CAAC,eAAe,EAAE,CAAC;IACpB,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,EAAE,CAAC;EACrB,CAAC;EAED,~~MAAM;IACJ,OAAO,CACL,cAAQ,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,~~OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,~~KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE;~~MACpI~~,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAM,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,GAAI,CAAC,CAAC,CAAC,IAAI;MAC/E,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ;MACtC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,YAAM,KAAK,EAAC,UAAU,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,GAAI,CAAC,CAAC,CAAC,IAAI,CAClE,CACV,CAAC;EACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import {Component, Prop, h~~, Event, EventEmitter~~} from '@stencil/core';\n\n/*\n Display a simple button.\n \n Three variants are supported. `standard` and `outline` buttons look like traditional form buttons and are ideal candidates for 'Ok' and\n * 'Cancel' options in most cases. `text` buttons are intended to be used inline in content blocks or for more subtle button options.\n * (Auth uses text buttons for the Forgot Password and Sign Up options.)\n \n Four sizes are also supported. Most use cases will call for the `normal` size, but a `small` size is ideal for more subtle controls, such\n * as pagination or other secondary functions. `medium` buttons are slightly larger to provide balance in forms where other items are also\n * bigger, and `large` buttons are for cases where the page has mostly white-space and the buttons need to fill more space.\n \n Icons may be placed either before (\"start\") or after (\"end\") the button label. Icons should be SVG objects passed as strings and will\n * be rendered as HTML inside the button label area. It is important that the root <SVG> tag contains a default `fill=\"#ffffff\"` setting\n * for the base color, and that child elements below it do not. This allows the button color to carry into the icon properly.\n /\n@Component({\n tag: 'verdocs-button',\n styleUrl: 'verdocs-button.scss',\n})\nexport class VerdocsButton {\n /\n The label for the button.\n /\n @Prop() label!: string;\n\n /\n If desired, a prefix icon for the button\n /\n @Prop() startIcon: string \| null = null;\n\n /\n If desired, a suffix icon for the button\n /\n @Prop() endIcon: string \| null = null;\n\n /\n The size (height) of the button.\n /\n @Prop() size: 'small' \| 'normal' \| 'medium' \| 'large' = 'normal';\n\n /\n The type of the button.\n /\n @Prop() type: 'button' \| 'submit' \| 'reset' = 'button';\n\n /\n The display variant of the button.\n /\n @Prop() variant: 'standard' \| 'text' \| 'outline' = 'standard';\n\n /\n Whether the button should be disabled.\n /\n @Prop() disabled: boolean = false;\n\n /\n Event fired when the button is pressed.\n */\n @Event({composed: true, bubbles: false}) press!: EventEmitter;\n\n handleClick(e: any) {\n e.stopPropagation();\n this.press?.emit();\n }\n\n render() {\n return (\n <button disabled={this.disabled} type={this.type} ~~onClick={e => this.handleClick(e)}~~ class={`${this.variant} ${this.size} ${this.type}`}>\n {this.startIcon ? <span class=\"icon start\" innerHTML={this.startIcon} /> : null}\n <span class=\"label\">{this.label}</span>\n {this.endIcon ? <span class=\"icon end\" innerHTML={this.endIcon} /> : null}\n </button>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"verdocs-button.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-button/verdocs-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEjD;;;;;;;;;;;;;;;;;;GAkBG;AAKH,MAAM,OAAO,aAAa;;;qBASW,IAAI;mBAKN,IAAI;gBAKmB,QAAQ;gBAKlB,QAAQ;mBAKH,UAAU;oBAKjC,KAAK;;EAEjC,MAAM;IACJ,OAAO,CACL,cAAQ,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE;MACjG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAM,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,GAAI,CAAC,CAAC,CAAC,IAAI;MAC/E,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ;MACtC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,YAAM,KAAK,EAAC,UAAU,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,GAAI,CAAC,CAAC,CAAC,IAAI,CAClE,CACV,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, h} from '@stencil/core';\n\n/*\n Display a simple button.\n \n Three variants are supported. `standard` and `outline` buttons look like traditional form buttons and are ideal candidates for 'Ok' and\n * 'Cancel' options in most cases. `text` buttons are intended to be used inline in content blocks or for more subtle button options.\n * (Auth uses text buttons for the Forgot Password and Sign Up options.)\n \n Four sizes are also supported. Most use cases will call for the `normal` size, but a `small` size is ideal for more subtle controls, such\n * as pagination or other secondary functions. `medium` buttons are slightly larger to provide balance in forms where other items are also\n * bigger, and `large` buttons are for cases where the page has mostly white-space and the buttons need to fill more space.\n \n Icons may be placed either before (\"start\") or after (\"end\") the button label. Icons should be SVG objects passed as strings and will\n * be rendered as HTML inside the button label area. It is important that the root <SVG> tag contains a default `fill=\"#ffffff\"` setting\n * for the base color, and that child elements below it do not. This allows the button color to carry into the icon properly.\n \n ```html\n * <verdocs-button label=\"OK\" onClick={() => (console.log('OK clicked'))} />\n * ```\n /\n@Component({\n tag: 'verdocs-button',\n styleUrl: 'verdocs-button.scss',\n})\nexport class VerdocsButton {\n /\n The label for the button.\n /\n @Prop() label!: string;\n\n /\n If desired, a prefix icon for the button.\n /\n @Prop() startIcon: string \| null = null;\n\n /\n If desired, a suffix icon for the button.\n /\n @Prop() endIcon: string \| null = null;\n\n /\n The size (height) of the button.\n /\n @Prop() size: 'small' \| 'normal' \| 'medium' \| 'large' = 'normal';\n\n /\n The type of the button.\n /\n @Prop() type: 'button' \| 'submit' \| 'reset' = 'button';\n\n /\n The display variant of the button.\n /\n @Prop() variant: 'standard' \| 'text' \| 'outline' = 'standard';\n\n /\n Whether the button should be disabled.\n */\n @Prop() disabled: boolean = false;\n\n render() {\n return (\n <button disabled={this.disabled} type={this.type} class={`${this.variant} ${this.size} ${this.type}`}>\n {this.startIcon ? <span class=\"icon start\" innerHTML={this.startIcon} /> : null}\n <span class=\"label\">{this.label}</span>\n {this.endIcon ? <span class=\"icon end\" innerHTML={this.endIcon} /> : null}\n </button>\n );\n }\n}\n"]}

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

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

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

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

package/dist/collection/components/controls/verdocs-button-panel/verdocs-button-panel.js CHANGED Viewed

@@ -1,7 +1,15 @@
 import { createPopper } from '@popperjs/core';
 import { h, Host } from '@stencil/core';
 /**
- * Displays a clickable icon. When clicked, a customizable drop-down panel will be displayed.
+ * Displays a clickable icon suitable for display in a toolbar. When clicked, a customizable drop-down panel will be
+ * displayed.
+ *
+ * *
+ * ```html
+ * <verdocs-button-panel icon="<svg.../>">
+ *   <form>...</form>
+ * </verdocs-button-panel>
+ * ```
  */
 export class VerdocsButtonPanel {
   constructor() {

package/dist/collection/components/controls/verdocs-button-panel/verdocs-button-panel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"verdocs-button-panel.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-button-panel/verdocs-button-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAW,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAEvD~~;;GAEG~~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","sourcesContent":["import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Prop} from '@stencil/core';\n\n/*\n Displays a clickable icon. When clicked, a customizable drop-down panel will be displayed.\n /\n@Component({\n tag: 'verdocs-button-panel',\n styleUrl: 'verdocs-button-panel.scss',\n shadow: false,\n})\nexport class VerdocsButtonPanel {\n iconEl: HTMLDivElement;\n panelEl: HTMLDivElement;\n hiderEl?: HTMLDivElement;\n popperInstance: Instance;\n\n /\n SVG icon to display\n */\n @Prop() icon: string = '';\n\n componentDidRender() {\n document.body.appendChild(this.panelEl);\n if (this.popperInstance) {\n this.popperInstance.destroy();\n }\n\n this.popperInstance = createPopper(this.iconEl, this.panelEl, {\n // placement: 'top-end',\n // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n });\n }\n\n disconnectedCallback() {\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n\n if (this.panelEl) {\n this.panelEl.remove();\n }\n }\n\n showing = false;\n toggle(e: any) {\n e.stopPropagation();\n\n if (this.showing) {\n this.panelEl?.removeAttribute('data-show');\n this.hiderEl?.remove();\n this.showing = false;\n } else {\n this.panelEl?.setAttribute('data-show', '');\n this.popperInstance?.update().catch(() => {});\n this.showing = true;\n\n this.hiderEl = document.createElement('div');\n this.hiderEl.style.zIndex = '100';\n this.hiderEl.style.position = 'absolute';\n this.hiderEl.style.top = '0px';\n this.hiderEl.style.left = '0px';\n this.hiderEl.style.right = '0px';\n this.hiderEl.style.bottom = '0px';\n this.hiderEl.onclick = (e: any) => this.toggle(e);\n document.body.appendChild(this.hiderEl);\n }\n }\n\n render() {\n return (\n <Host>\n <div class=\"icon\" innerHTML={this.icon} onClick={(e: any) => this.toggle(e)} ref={el => (this.iconEl = el)} />\n <div role=\"tooltip\" class=\"verdocs-button-panel-content\" data-popper-placement=\"bottom\" ref={el => (this.panelEl = el as HTMLDivElement)}>\n <div data-popper-arrow=\"true\" class=\"arrow\" />\n <slot />\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"verdocs-button-panel.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-button-panel/verdocs-button-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Prop} from '@stencil/core';\n\n/*\n Displays a clickable icon suitable for display in a toolbar. When clicked, a customizable drop-down panel will be\n * displayed.\n \n \n ```html\n * <verdocs-button-panel icon=\"<svg.../>\">\n * <form>...</form>\n * </verdocs-button-panel>\n * ```\n /\n@Component({\n tag: 'verdocs-button-panel',\n styleUrl: 'verdocs-button-panel.scss',\n shadow: false,\n})\nexport class VerdocsButtonPanel {\n iconEl: HTMLDivElement;\n panelEl: HTMLDivElement;\n hiderEl?: HTMLDivElement;\n popperInstance: Instance;\n\n /\n SVG icon to display\n */\n @Prop() icon: string = '';\n\n componentDidRender() {\n document.body.appendChild(this.panelEl);\n if (this.popperInstance) {\n this.popperInstance.destroy();\n }\n\n this.popperInstance = createPopper(this.iconEl, this.panelEl, {\n // placement: 'top-end',\n // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n });\n }\n\n disconnectedCallback() {\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n\n if (this.panelEl) {\n this.panelEl.remove();\n }\n }\n\n showing = false;\n toggle(e: any) {\n e.stopPropagation();\n\n if (this.showing) {\n this.panelEl?.removeAttribute('data-show');\n this.hiderEl?.remove();\n this.showing = false;\n } else {\n this.panelEl?.setAttribute('data-show', '');\n this.popperInstance?.update().catch(() => {});\n this.showing = true;\n\n this.hiderEl = document.createElement('div');\n this.hiderEl.style.zIndex = '100';\n this.hiderEl.style.position = 'absolute';\n this.hiderEl.style.top = '0px';\n this.hiderEl.style.left = '0px';\n this.hiderEl.style.right = '0px';\n this.hiderEl.style.bottom = '0px';\n this.hiderEl.onclick = (e: any) => this.toggle(e);\n document.body.appendChild(this.hiderEl);\n }\n }\n\n render() {\n return (\n <Host>\n <div class=\"icon\" innerHTML={this.icon} onClick={(e: any) => this.toggle(e)} ref={el => (this.iconEl = el)} />\n <div role=\"tooltip\" class=\"verdocs-button-panel-content\" data-popper-placement=\"bottom\" ref={el => (this.panelEl = el as HTMLDivElement)}>\n <div data-popper-arrow=\"true\" class=\"arrow\" />\n <slot />\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -1,8 +1,20 @@
 import { h, Host } from '@stencil/core';
 /**
  * Displays a check box. Note that this is different from the `verdocs-field-checkbox` component, which is designed
- * to be used in signing experiences and contains settings that connect to template fields. This is just a simple check box
- * for UI displays e.g. dialog boxes.
+ * to be used in signing experiences and contains settings that connect to template fields. This is just a simple check
+ * box for UI displays e.g. dialog boxes.
+ *
+ * This control encapsulates a standard HTML checkbox. To subscribe to change events, connect an `onChange`
+ * handler. Sample usage:
+ *
+ * ```html
+ * <verdocs-checkbox
+ *    value="on"
+ *    name="thingEnabled"
+ *    checked={this.thingEnabled}
+ *    onInput={(e: any) => (this.thingEnabled = e.target.checked)}
+ * />
+ * ```
  */
 export class VerdocsCheckbox {
   constructor() {
@@ -11,12 +23,8 @@ export class VerdocsCheckbox {
     this.value = '';
     this.disabled = false;
   }
-  handleChange(e) {
-    console.log('changed', e.target.checked);
-    this.selected.emit({ value: this.value });
-  }
   render() {
-    return (h(Host, { class: { disabled: this.disabled } }, h("input", { type: "checkbox", value: this.value, name: this.name, id: `verdocs-checkbox-${this.name}-${this.value}`, checked: this.checked, disabled: this.disabled, onChange: e => this.handleChange(e) })));
+    return (h(Host, { class: { disabled: this.disabled } }, h("input", { type: "checkbox", value: this.value, name: this.name, checked: this.checked, disabled: this.disabled, id: `verdocs-checkbox-${this.name}-${this.value}` })));
   }
   static get is() { return "verdocs-checkbox"; }
   static get originalStyleUrls() {
@@ -105,23 +113,5 @@ export class VerdocsCheckbox {
       }
     };
   }
-  static get events() {
-    return [{
-        "method": "selected",
-        "name": "selected",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\nIt is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\nkeypress."
-        },
-        "complexType": {
-          "original": "{value: string}",
-          "resolved": "{ value: string; }",
-          "references": {}
-        }
-      }];
-  }
 }
 //# sourceMappingURL=verdocs-checkbox.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"verdocs-checkbox.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-checkbox/verdocs-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,~~EAAE~~,~~KAAK,EAAe,~~MAAM,eAAe,CAAC;~~AAE5E;;;;GAIG~~;AAMH,MAAM,OAAO,eAAe;;mBAIC,KAAK;gBAKT,EAAE;iBAKD,EAAE;oBAKG,KAAK;;~~EASlC~~,~~YAAY,CAAC,CAAM;IACjB,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC,~~MAAM~~,CAAC,OAAO,CAAC,CAAC~~;~~IACzC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC;EAC1C,CAAC;EAED,MAAM;~~IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC;MACpC,~~aACE~~,IAAI,EAAC,UAAU,~~EACf~~,KAAK,EAAE,IAAI,CAAC,KAAK,~~EACjB,IAAI,~~EAAE,IAAI,~~CAAC,IAAI,EACf,~~EAAE,~~EAAE,oBAAoB,~~IAAI,CAAC,IAAI,~~IAAI,IAAI,CAAC,KAAK,~~EAAE,~~EACjD,~~OAAO,EAAE,IAAI,CAAC,OAAO,~~EACrB~~,QAAQ,EAAE,IAAI,CAAC,QAAQ,~~EACvB~~,~~QAAQ~~,EAAE,~~CAAC~~,~~CAAC~~,~~EAAE,~~CAAC,IAAI,~~CAAC~~,~~YAAY~~,CAAC,~~CAAC~~,~~CAAC~~,~~GACnC~~,~~CACG~~,CACR,CAAC;EACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import {Component, h, Host, Prop~~, Event, EventEmitter~~} from '@stencil/core';\n\n/*\n Displays a check box. Note that this is different from the `verdocs-field-checkbox` component, which is designed\n * to be used in signing experiences and contains settings that connect to template fields. This is just a simple check ~~box~~\n * for UI displays e.g. dialog boxes.\n /\n@Component({\n tag: 'verdocs-checkbox',\n styleUrl: 'verdocs-checkbox.scss',\n shadow: false,\n})\nexport class VerdocsCheckbox {\n /\n Whether the radio button is currently selected.\n /\n @Prop() checked: boolean = false;\n\n /\n HTML form field name for the input.\n /\n @Prop() name: string = '';\n\n /\n Value to track with the input.\n /\n @Prop() value: string = '';\n\n /\n If set, the button will still be displayed but not selectable.\n /\n @Prop() disabled?: boolean = false;\n\n /\n Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n * keypress.\n */\n @Event({composed: true}) selected: EventEmitter<{value: string}>;\n\n handleChange(e: any) {\n console.log('changed', e.target.checked);\n this.selected.emit({value: this.value});\n }\n\n render() {\n return (\n <Host class={{disabled: this.disabled}}>\n <input\n type=\"checkbox\"\n value={this.value}\n name={this.name}\n id={`verdocs-checkbox-${this.name}-${this.value}`}~~\n checked={this.checked}\n disabled={this.disabled}\n onChange={e~~ ~~=> this.handleChange(e)}\n~~ />\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"verdocs-checkbox.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-checkbox/verdocs-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAEvD;;;;;;;;;;;;;;;;GAgBG;AAMH,MAAM,OAAO,eAAe;;mBAIC,KAAK;gBAKT,EAAE;iBAKD,EAAE;oBAKG,KAAK;;EAElC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC;MACpC,aAAO,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,EAAE,oBAAoB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,GAAI,CAC3J,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, h, Host, Prop} from '@stencil/core';\n\n/*\n Displays a check box. Note that this is different from the `verdocs-field-checkbox` component, which is designed\n * to be used in signing experiences and contains settings that connect to template fields. This is just a simple check\n * box for UI displays e.g. dialog boxes.\n \n This control encapsulates a standard HTML checkbox. To subscribe to change events, connect an `onChange`\n * handler. Sample usage:\n \n ```html\n * <verdocs-checkbox\n * value=\"on\"\n * name=\"thingEnabled\"\n * checked={this.thingEnabled}\n * onInput={(e: any) => (this.thingEnabled = e.target.checked)}\n * />\n * ```\n /\n@Component({\n tag: 'verdocs-checkbox',\n styleUrl: 'verdocs-checkbox.scss',\n shadow: false,\n})\nexport class VerdocsCheckbox {\n /\n Whether the radio button is currently selected.\n /\n @Prop() checked: boolean = false;\n\n /\n HTML form field name for the input.\n /\n @Prop() name: string = '';\n\n /\n Value to track with the input.\n /\n @Prop() value: string = '';\n\n /\n If set, the button will still be displayed but not selectable.\n */\n @Prop() disabled?: boolean = false;\n\n render() {\n return (\n <Host class={{disabled: this.disabled}}>\n <input type=\"checkbox\" value={this.value} name={this.name} checked={this.checked} disabled={this.disabled} id={`verdocs-checkbox-${this.name}-${this.value}`} />\n </Host>\n );\n }\n}\n"]}

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

@@ -8,7 +8,12 @@ export default {
     value: '1',
     disabled: false,
   },
-  argTypes: {},
+  argTypes: {
+    onInput: {
+      action: 'input',
+      description: 'Fired when the checkbox is clicked. e.target.checked will indicate the current status (true if checked).',
+    },
+  },
 };
-export const Checkbox = ({ checked, name, value, disabled }) => html ` <verdocs-checkbox .checked=${checked} .name=${name} .value=${value} .disabled=${disabled} /> `;
+export const Checkbox = ({ checked, name, value, disabled, onInput }) => html ` <verdocs-checkbox .checked=${checked} .name=${name} .value=${value} .disabled=${disabled} @input=${onInput} /> `;
 //# sourceMappingURL=verdocs-checkbox.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"verdocs-checkbox.stories.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-checkbox/verdocs-checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,SAAS,EAAE,kBAAkB;EAC7B,IAAI,EAAE;IACJ,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,GAAG;IACV,QAAQ,EAAE,KAAK;GAChB;EACD,QAAQ,EAAE,EAAE;~~CACL~~,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAC,EAAE,EAAE,~~CAAC~~,IAAI,CAAA,+BAA+B,OAAO,UAAU,IAAI,WAAW,KAAK,cAAc,QAAQ,MAAM,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n title: 'Controls/Checkbox',\n component: 'verdocs-checkbox',\n args: {\n checked: false,\n name: 'test',\n value: '1',\n disabled: false,\n },\n argTypes: {},\n} as Meta;\n\nexport const Checkbox = ({checked, name, value, disabled}) => html` <verdocs-checkbox .checked=${checked} .name=${name} .value=${value} .disabled=${disabled} /> `;\n"]}
1	+ {"version":3,"file":"verdocs-checkbox.stories.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-checkbox/verdocs-checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,SAAS,EAAE,kBAAkB;EAC7B,IAAI,EAAE;IACJ,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,GAAG;IACV,QAAQ,EAAE,KAAK;GAChB;EACD,QAAQ,EAAE;IACR,OAAO,EAAE;MACP,MAAM,EAAE,OAAO;MACf,WAAW,EAAE,0GAA0G;KACxH;GACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAC,EAAE,EAAE,CACpE,IAAI,CAAA,+BAA+B,OAAO,UAAU,IAAI,WAAW,KAAK,cAAc,QAAQ,WAAW,OAAO,MAAM,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n title: 'Controls/Checkbox',\n component: 'verdocs-checkbox',\n args: {\n checked: false,\n name: 'test',\n value: '1',\n disabled: false,\n },\n argTypes: {\n onInput: {\n action: 'input',\n description: 'Fired when the checkbox is clicked. e.target.checked will indicate the current status (true if checked).',\n },\n },\n} as Meta;\n\nexport const Checkbox = ({checked, name, value, disabled, onInput}) =>\n html` <verdocs-checkbox .checked=${checked} .name=${name} .value=${value} .disabled=${disabled} @input=${onInput} /> `;\n"]}