@verdocs/web-sdk 1.2.0 → 1.4.0

package/dist/verdocs-web-sdk/verdocs-upload-dialog.entry.js

@@ -0,0 +1,119 @@
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-ddbd60b5.js';
+
+/**
+ * Given a File, extract the file's content as a base64 encoded data URL. The response will have a prefix that
+ * includes the MIME type of the file, e.g. "data:image/jpeg;base64,iVBORw0K......"
+ */
+var fileToDataUrl = function (file) {
+    return new Promise(function (resolve, reject) {
+        var reader = new FileReader();
+        reader.onload = function () {
+            return resolve({
+                lastModified: file.lastModified,
+                size: file.size,
+                type: file.type,
+                name: file.name,
+                data: reader.result,
+            });
+        };
+        reader.onerror = reject;
+        if (file) {
+            reader.readAsDataURL(file);
+        }
+        else {
+            reject(new Error('Invalid 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:#fff;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 blue}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 VerdocsUploadDialog = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.cancel = createEvent(this, "cancel", 7);
+    this.done = createEvent(this, "done", 7);
+    /**
+     * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.
+     */
+    this.open = false;
+    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) {
+    if (e.target.className === 'background-overlay') {
+      e.preventDefault();
+      this.handleCancel();
+    }
+  }
+  handleDone() {
+    this.done.emit(this.decodedFiles);
+    this.open = false;
+  }
+  handleDragOver(e) {
+    e.preventDefault();
+    this.draggingOver = true;
+  }
+  handleDragLeave(e) {
+    e.preventDefault();
+    this.draggingOver = false;
+  }
+  async handleDrop(e) {
+    e.preventDefault();
+    this.draggingOver = false;
+    // Required for cross-browser support. Note that dataTransfer.items is of type DataTransferItemList and is not an array.
+    let droppedFiles = [];
+    if (e.dataTransfer.items) {
+      for (let i = 0; i < e.dataTransfer.items.length; i++) {
+        if (e.dataTransfer.items[i].kind === 'file') {
+          const file = e.dataTransfer.items[i].getAsFile();
+          droppedFiles.push(file);
+        }
+      }
+    }
+    else {
+      droppedFiles = e.dataTransfer.files;
+    }
+    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
+  }
+  handleRemoveAttachment(index) {
+    const newFiles = [...this.decodedFiles];
+    newFiles.splice(index, 1);
+    this.decodedFiles = newFiles;
+  }
+  handleSelectFile() {
+    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);
+    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]);
+    }
+    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
+  }
+  render() {
+    return (h(Host, { style: { display: this.open ? 'block' : 'none' } }, h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { class: "dialog" }, h("div", { class: "heading" }, "Upload attachment"), this.decodedFiles.length < 1 ? (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) }, h("p", null, "Drag and drop a file here..."), h("p", null, "- or -"), h("verdocs-button", { label: "Select a file...", onPress: () => this.handleSelectFile() }), h("input", { type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, onChange: e => this.handleFileChange(e) }))) : (h("div", { class: "attachments" }, this.decodedFiles.map((file, index) => (h("div", { class: "attachment" }, h("div", { class: "icon", innerHTML: Paperclip }), h("div", { class: "name" }, file.name), h("div", { class: "icon trash", innerHTML: Trash, onClick: () => this.handleRemoveAttachment(index) })))))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", variant: "outline", onPress: () => this.handleCancel() }), h("verdocs-button", { label: "Done", onPress: () => this.handleDone(), disabled: this.decodedFiles.length < 1 }))))));
+  }
+};
+VerdocsUploadDialog.style = verdocsUploadDialogCss;
+
+export { VerdocsUploadDialog as verdocs_upload_dialog };

package/dist/verdocs-web-sdk/verdocs-upload-dialog.system.entry.js

@@ -0,0 +1 @@
+var __awaiter=this&&this.__awaiter||function(e,t,n,o){function i(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,r){function a(e){try{s(o.next(e))}catch(e){r(e)}}function l(e){try{s(o["throw"](e))}catch(e){r(e)}}function s(e){e.done?n(e.value):i(e.value).then(a,l)}s((o=o.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},o,i,r,a;return a={next:l(0),throw:l(1),return:l(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function l(e){return function(t){return s([e,t])}}function s(a){if(o)throw new TypeError("Generator is already executing.");while(n)try{if(o=1,i&&(r=a[0]&2?i["return"]:a[0]?i["throw"]||((r=i["return"])&&r.call(i),0):i.next)&&!(r=r.call(i,a[1])).done)return r;if(i=0,r)a=[a[0]&2,r.value];switch(a[0]){case 0:case 1:r=a;break;case 4:n.label++;return{value:a[1],done:false};case 5:n.label++;i=a[1];a=[0];continue;case 7:a=n.ops.pop();n.trys.pop();continue;default:if(!(r=n.trys,r=r.length>0&&r[r.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!r||a[1]>r[0]&&a[1]<r[3])){n.label=a[1];break}if(a[0]===6&&n.label<r[1]){n.label=r[1];r=a;break}if(r&&n.label<r[2]){n.label=r[2];n.ops.push(a);break}if(r[2])n.ops.pop();n.trys.pop();continue}a=t.call(e,n)}catch(e){a=[6,e];i=0}finally{o=r=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(e,t,n){if(n||arguments.length===2)for(var o=0,i=t.length,r;o<i;o++){if(r||!(o in t)){if(!r)r=Array.prototype.slice.call(t,0,o);r[o]=t[o]}}return e.concat(r||Array.prototype.slice.call(t))};System.register(["./index-6465280a.system.js"],(function(e){"use strict";var t,n,o,i;return{setters:[function(e){t=e.r;n=e.e;o=e.h;i=e.f}],execute:function(){var r=function(e){return new Promise((function(t,n){var o=new FileReader;o.onload=function(){return t({lastModified:e.lastModified,size:e.size,type:e.type,name:e.name,data:o.result})};o.onerror=n;if(e){o.readAsDataURL(e)}else{n(new Error("Invalid file"))}}))};var a='<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">\n  <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" />\n</svg>\n';var l='<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">\n  <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" />\n</svg>\n';var s='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:#fff;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 blue}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}';var d=e("verdocs_upload_dialog",function(){function e(e){t(this,e);this.cancel=n(this,"cancel",7);this.done=n(this,"done",7);this.open=false;this.draggingOver=false;this.decodedFiles=[]}e.prototype.handleCancel=function(){this.cancel.emit();this.open=false};e.prototype.handleDismiss=function(e){if(e.target.className==="background-overlay"){e.preventDefault();this.handleCancel()}};e.prototype.handleDone=function(){this.done.emit(this.decodedFiles);this.open=false};e.prototype.handleDragOver=function(e){e.preventDefault();this.draggingOver=true};e.prototype.handleDragLeave=function(e){e.preventDefault();this.draggingOver=false};e.prototype.handleDrop=function(e){return __awaiter(this,void 0,void 0,(function(){var t,n,o,i;return __generator(this,(function(a){switch(a.label){case 0:e.preventDefault();this.draggingOver=false;t=[];if(e.dataTransfer.items){for(n=0;n<e.dataTransfer.items.length;n++){if(e.dataTransfer.items[n].kind==="file"){o=e.dataTransfer.items[n].getAsFile();t.push(o)}}}else{t=e.dataTransfer.files}i=this;return[4,Promise.all(t.map(r))];case 1:i.decodedFiles=a.sent();return[2]}}))}))};e.prototype.handleRemoveAttachment=function(e){var t=__spreadArray([],this.decodedFiles,true);t.splice(e,1);this.decodedFiles=t};e.prototype.handleSelectFile=function(){var e;(e=this.fileInput)===null||e===void 0?void 0:e.click()};e.prototype.handleFileChange=function(e){return __awaiter(this,void 0,void 0,(function(){var t,n,o,i,a,l;return __generator(this,(function(s){switch(s.label){case 0:console.log("fileChange",e);console.log("files",(t=this.fileInput)===null||t===void 0?void 0:t.files);i=[];for(a=0;a<((n=this.fileInput)===null||n===void 0?void 0:n.files.length);a++){i.push((o=this.fileInput)===null||o===void 0?void 0:o.files[a])}l=this;return[4,Promise.all(i.map(r))];case 1:l.decodedFiles=s.sent();return[2]}}))}))};e.prototype.render=function(){var e=this;return o(i,{style:{display:this.open?"block":"none"}},o("div",{class:"background-overlay",onClick:function(t){return e.handleDismiss(t)}},o("div",{class:"dialog"},o("div",{class:"heading"},"Upload attachment"),this.decodedFiles.length<1?o("div",{class:{"drop-target":true,"dragging-over":this.draggingOver},onDragOver:function(t){return e.handleDragOver(t)},onDragLeave:function(t){return e.handleDragLeave(t)},onDrop:function(t){return e.handleDrop(t)}},o("p",null,"Drag and drop a file here..."),o("p",null,"- or -"),o("verdocs-button",{label:"Select a file...",onPress:function(){return e.handleSelectFile()}}),o("input",{type:"file",ref:function(t){return e.fileInput=t},style:{display:"none"},onChange:function(t){return e.handleFileChange(t)}})):o("div",{class:"attachments"},this.decodedFiles.map((function(t,n){return o("div",{class:"attachment"},o("div",{class:"icon",innerHTML:a}),o("div",{class:"name"},t.name),o("div",{class:"icon trash",innerHTML:l,onClick:function(){return e.handleRemoveAttachment(n)}}))}))),o("div",{class:"buttons"},o("verdocs-button",{label:"Cancel",variant:"outline",onPress:function(){return e.handleCancel()}}),o("verdocs-button",{label:"Done",onPress:function(){return e.handleDone()},disabled:this.decodedFiles.length<1})))))};return e}());d.style=s}}}));