image-salon-sdk 1.0.48 → 1.0.49

package/dist/image-salon-sdk.js

@@ -6265,13 +6265,7 @@ class Hs {
       i.append(_n(), c, h);
     } else
       i.append(_n(), c);
-    if (this._setupDragAndDrop(A(this, Te)), A(this, Te).append(i), r) {
-      const h = document.getElementById(
-        "user-view-browse-wrapper"
-      );
-      h && (h.style.display = "none"), this._renderImagePreview(r);
-    }
-    return A(this, Et).appendChild(A(this, Te)), A(this, Et);
+    return this._setupDragAndDrop(A(this, Te)), A(this, Te).append(i), r && this._renderImagePreview(r, "", i, !0), A(this, Et).appendChild(A(this, Te)), A(this, Et);
   }
   _setupDragAndDrop(e) {
     if (!e) return;
@@ -6310,33 +6304,33 @@ class Hs {
       !1
     );
   }
-  _renderImagePreview(e, t) {
-    var h;
-    const n = document.getElementById(
+  _renderImagePreview(e, t, n, r = !1) {
+    var d;
+    const i = document.getElementById(
       "user-view-browse-wrapper"
-    );
-    n && (n.style.display = "none");
-    const r = document.getElementById("user-image-preview");
-    r && r.remove();
-    const i = ee("div", "user-image-preview");
-    i.id = "user-image-preview";
-    const o = ee(
+    ), o = i || n;
+    o && (o.style.display = "none");
+    const a = document.getElementById("user-image-preview");
+    a && a.remove();
+    const c = ee("div", "user-image-preview");
+    c.id = "user-image-preview";
+    const h = ee(
       "img",
       "",
       "max-width: 230px;max-height:250px;object-fit:cover;"
     );
-    o.src = e, o.alt = t || "";
-    const a = ee(
+    h.src = e, h.alt = t || "";
+    const l = ee(
       "div",
       "",
-      "width: 18px; height: 18px; display: none; cursor:pointer; align-items: center; justify-content: center; padding: 4px; position: absolute; top: -5px; right: -5px; background: #c10007; border-radius: 50%;z-index:1"
+      `width: 18px; height: 18px; display: ${r ? "flex" : "none"}; cursor:pointer; align-items: center; justify-content: center; padding: 4px; position: absolute; top: -5px; right: -5px; background: #c10007; border-radius: 50%;z-index:1`
     );
-    a.id = "remove-preview-btn";
-    const c = Vn();
-    c.style.fill = "#fff", a == null || a.appendChild(c), a.addEventListener("click", () => {
-      var l;
-      (l = A(this, Te)) == null || l.removeChild(i), this._removeUserToast(), A(this, rn).call(this), n && (n.style.display = "flex");
-    }), i == null || i.append(o, a), (h = A(this, Te)) == null || h.append(i);
+    l.id = "remove-preview-btn";
+    const u = Vn();
+    u.style.fill = "#fff", l == null || l.appendChild(u), l.addEventListener("click", () => {
+      var f;
+      (f = A(this, Te)) == null || f.removeChild(c), this._removeUserToast(), A(this, rn).call(this), o && (o.style.display = "flex");
+    }), c == null || c.append(h, l), (d = A(this, Te)) == null || d.append(c);
   }
   _renderRemovePreviewBtn() {
     const e = document.getElementById("remove-preview-btn");

package/dist/image-salon-sdk.umd.cjs

@@ -21,7 +21,7 @@ self.addEventListener('message', async (e) => {
     self.postMessage({ error: e.message + '\\n' + e.stack, id })
   }
 })
-`;let qn;function Ss(s,e){return new Promise((t,n)=>{qn||(qn=function(o){const a=[];return a.push(o),URL.createObjectURL(new Blob(a))}(Os));const r=new Worker(qn);r.addEventListener("message",function(o){if(e.signal&&e.signal.aborted)r.terminate();else if(o.data.progress===void 0){if(o.data.error)return n(new Error(o.data.error)),void r.terminate();t(o.data.file),r.terminate()}else e.onProgress(o.data.progress)}),r.addEventListener("error",n),e.signal&&e.signal.addEventListener("abort",()=>{n(e.signal.reason),r.terminate()}),r.postMessage({file:s,imageCompressionLibUrl:e.libURL,options:{...e,onProgress:void 0,signal:void 0}})})}function Se(s,e){return new Promise(function(t,n){let r,i,o,a,c,h;if(r={...e},o=0,{onProgress:a}=r,r.maxSizeMB=r.maxSizeMB||Number.POSITIVE_INFINITY,c=typeof r.useWebWorker!="boolean"||r.useWebWorker,delete r.useWebWorker,r.onProgress=f=>{o=f,typeof a=="function"&&a(o)},!(s instanceof Blob||s instanceof Bs))return n(new Error("The file given is not an instance of Blob or File"));if(!/^image/.test(s.type))return n(new Error("The file given is not an image"));if(h=typeof WorkerGlobalScope<"u"&&self instanceof WorkerGlobalScope,!c||typeof Worker!="function"||h)return jr(s,r).then((function(f){try{return i=f,d.call(this)}catch(y){return n(y)}}).bind(this),n);var l=(function(){try{return d.call(this)}catch(f){return n(f)}}).bind(this),u=function(f){try{return jr(s,r).then(function(y){try{return i=y,l()}catch(I){return n(I)}},n)}catch(y){return n(y)}};try{return r.libURL=r.libURL||"https://cdn.jsdelivr.net/npm/browser-image-compression@2.0.2/dist/browser-image-compression.js",Ss(s,r).then(function(f){try{return i=f,l()}catch{return u()}},u)}catch{u()}function d(){try{i.name=s.name,i.lastModified=s.lastModified}catch{}try{r.preserveExif&&s.type==="image/jpeg"&&(!r.fileType||r.fileType&&r.fileType===s.type)&&(i=Br(s,i))}catch{}return t(i)}})}Se.getDataUrlFromFile=Rr,Se.getFilefromDataUrl=Zn,Se.loadImage=Mr,Se.drawImageInCanvas=Hr,Se.drawFileInCanvas=An,Se.canvasToFile=kn,Se.getExifOrientation=$r,Se.handleMaxWidthOrHeight=Pr,Se.followExifOrientation=Wr,Se.cleanupCanvasMemory=st,Se.isAutoOrientationInBrowser=Vt,Se.approximateBelowMaximumCanvasSizeOfBrowser=Vr,Se.copyExifWithoutOrientation=Br,Se.getBrowserName=Bt,Se.version="2.0.2";const Zr=async(s,e,t,n=!0)=>{try{const r=Ds(s,e),o=(await Is(e==null?void 0:e.type,t,n)).response.url;return await fetch(o,{method:"PUT",headers:{"Content-Type":e==null?void 0:e.type,"x-amz-acl":"public-read"},body:r}),o==null?void 0:o.split("?")[0]}catch(r){throw r}},Ds=(s,e)=>{const t=e.type.split("/")[0];let n="";t==="video"?n=s==null?void 0:s.replace(/^data:video\/\w+;base64,/,""):t==="image"?n=s==null?void 0:s.replace(/^data:image\/\w+;base64,/,""):t==="audio"&&(n=s==null?void 0:s.replace(/^data:audio\/\w+;base64,/,""));const r=atob(n),i=new Uint8Array(r.length);for(let o=0;o<r.length;o++)i[o]=r.charCodeAt(o);return i};async function qr(s){const e={maxSizeMB:2,maxWidthOrHeight:1920,useWebWorker:!0};try{return await Se(s,e)}catch(t){throw Error(t)}}class Rs{constructor(e){X(this,vt);X(this,ve);X(this,Ae);X(this,mt);X(this,we,[]);X(this,Ie,[]);X(this,ot);X(this,je);X(this,Ot);X(this,At);X(this,at,[]);X(this,tt);X(this,kt);X(this,$t);X(this,Fn);X(this,Ft);X(this,Nt);X(this,gt);X(this,St);X(this,lt);X(this,ct);X(this,It);X(this,Tt);X(this,wt);X(this,Pt);X(this,nn);X(this,De);X(this,yt);X(this,rn,!1);X(this,Nn);X(this,sn);X(this,_e);X(this,Wt);X(this,Lt);X(this,jt);X(this,Zt);X(this,qt);X(this,Kt);X(this,zt);X(this,on);H(this,sn,e.isAdmin),H(this,ot,!1),H(this,$t,e.handleUpload.bind(this)),H(this,nn,e.accessToken),H(this,jt,e==null?void 0:e.mode),this._grpcOptionInitializer(),this._init(e).then(()=>{H(this,rn,!0),this._renderView(e),this.updateWindowObject({initialized:!0}),this._initializeGrpcConfig(e.mode,e.endPoint)})}async _init(e){try{const{mode:t}=e;this.updateWindowObject({mode:t})}catch{throw Error("Initialization failed")}}_isAdminOptions(e){return e.isAdmin===!0}_renderView(e){return this._isAdminOptions(e)?(H(this,je,!1),H(this,Ot,!1),H(this,Ft,0),H(this,ct,""),H(this,wt,!1),H(this,jt,e.mode),H(this,It,!1),H(this,Lt,""),H(this,yt,null),this._removeToastContainer(),this._renderAdminView(e)):(H(this,Wt,""),H(this,Zt,e.restrictedFileSize),H(this,qt,e==null?void 0:e.localizedFileRestrictedMessage),H(this,zt,e==null?void 0:e.localizedSuccessMessage),H(this,Kt,e==null?void 0:e.localizedErrorMessage),H(this,on,e.removeImagePreviewCB.bind(this)),this._removeUserToast(),this._renderUserView(e))}_renderAdminView(e){if(!A(this,rn))return;const{parentContainerId:t}=e;if(e.isAdmin===!0)var{buttonProps:n}=e;H(this,vt,document.getElementById(t));const r=document.createElement("button");r.className=n!=null&&n.buttonClass?n==null?void 0:n.buttonClass:"browse-image-button",r.addEventListener("focus",()=>{r.blur()});const i=document.createElement("span");i.textContent=n!=null&&n.buttonText?n==null?void 0:n.buttonText:"Browse Files";const o=document.createElement("span");o.innerHTML=n!=null&&n.buttonIcon?n==null?void 0:n.buttonIcon:"",r.type="button",r.append(i,o),n!=null&&n.buttonStyle&&Object.assign(r.style,n==null?void 0:n.buttonStyle),r.addEventListener("click",()=>{this._selectedImageContainer()}),A(this,vt).appendChild(r)}async _grpcOptionInitializer(){H(this,De,await Es(A(this,nn),A(this,jt)))}_selectedImageContainer(){var u;H(this,kt,We(`Save (${(u=A(this,we))==null?void 0:u.length})`,"dialog-btn confirm")),H(this,Nt,K("folder-container")),H(this,gt,K("folder-list-wrapper")),this._fetchAllFolders();const e=We("Cancel","dialog-btn cancel");We("","dialog-modal-close-btn","",!1,'<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 50 50"> <path d="M 9.15625 6.3125 L 6.3125 9.15625 L 22.15625 25 L 6.21875 40.96875 L 9.03125 43.78125 L 25 27.84375 L 40.9375 43.78125 L 43.78125 40.9375 L 27.84375 25 L 43.6875 9.15625 L 40.84375 6.3125 L 25 22.15625 Z"></path> </svg>').addEventListener("click",()=>{yn.hide(),H(this,we,[]),H(this,Ie,[])}),H(this,ve,K("browse-container"));const n=K();n.style.display="flex",n.style.alignItems="center",n.style.justifyContent="space-between",n.style.padding="10px 20px";const r=tn("Folders","folder-title"),i=We("","add-folder-btn");i.append(Nr()),this._createUpdateFolderDialog(i,"create"),n.append(r,i),A(this,Nt).append(n,A(this,gt));const o=this._renderSearchField(),a=this._createBrowseMoreContainer(),c=this._createBrowseImageMain(),h=K("footer");e.onclick=()=>{A(this,Fn).call(this),yn.hide(),H(this,Ie,[]),H(this,we,[])},A(this,kt).onclick=()=>{A(this,$t).call(this),yn.hide(),H(this,we,[]),H(this,Ie,[])},h.append(e,A(this,kt));const l=K("container-right-main");l.append(o,a,c,h),A(this,ve).append(A(this,Nt),l),yn.show({content:A(this,ve)})}_renderUserView(e){const{parentContainerId:t,restrictedFileSize:n,imagePreview:r}=e;H(this,vt,document.getElementById(t)),H(this,_e,ee("div","user-view-container"));const i=K("user-view-browse-wrapper","user-view-browse-wrapper"),o=ee("span","","","Drag & Drop or "),a=this._renderUserViewBrowseButton(),c=ee("p","","margin-block: 0px; font-size:14px");if(c.append(o,a),n){const h=ee("p","","margin-block: 0px; font-size: 13px; color: #777",`Max File size: ${n}MB`);i.append(Hn(),c,h)}else i.append(Hn(),c);if(this._setupDragAndDrop(A(this,_e)),A(this,_e).append(i),r){const h=document.getElementById("user-view-browse-wrapper");h&&(h.style.display="none"),this._renderImagePreview(r)}return A(this,vt).appendChild(A(this,_e)),A(this,vt)}_setupDragAndDrop(e){if(!e)return;["dragenter","dragover","dragleave","drop"].forEach(n=>{A(this,_e).addEventListener(n,r=>{r.preventDefault(),r.stopPropagation()},!1)}),["dragenter","dragover"].forEach(n=>{A(this,_e).addEventListener(n,()=>{A(this,_e).classList.add("highlight")},!1)}),["dragleave","drop"].forEach(n=>{A(this,_e).addEventListener(n,()=>{A(this,_e).classList.remove("highlight")},!1)}),A(this,_e).addEventListener("drop",n=>{var i;this._removeUserToast();let r=(i=n.dataTransfer)==null?void 0:i.files[0];r&&this._handleDroppedFile(r)},!1)}_renderImagePreview(e,t){var h;const n=document.getElementById("user-view-browse-wrapper");n&&(n.style.display="none");const r=document.getElementById("user-image-preview");r&&r.remove();const i=ee("div","user-image-preview");i.id="user-image-preview";const o=ee("img","","max-width: 230px;max-height:250px;object-fit:cover;");o.src=e,o.alt=t||"";const a=ee("div","","width: 18px; height: 18px; display: none; cursor:pointer; align-items: center; justify-content: center; padding: 4px; position: absolute; top: -5px; right: -5px; background: #c10007; border-radius: 50%;z-index:1");a.id="remove-preview-btn";const c=Vn();c.style.fill="#fff",a==null||a.appendChild(c),a.addEventListener("click",()=>{var l;(l=A(this,_e))==null||l.removeChild(i),this._removeUserToast(),A(this,on).call(this),n&&(n.style.display="flex")}),i==null||i.append(o,a),(h=A(this,_e))==null||h.append(i)}_renderRemovePreviewBtn(){const e=document.getElementById("remove-preview-btn");e&&(e.style.display="flex")}_handleDroppedFile(e){this._readFileAsBase64(e)}async _readFileAsBase64(e){const t=A(this,Zt)*1024*1024;if(e.size>t){this._renderUserToast(A(this,qt)?A(this,qt):`File size must be less than ${A(this,Zt)}MB.`,"error");return}H(this,ot,!0);try{const n=await qr(e);this._removeUserToast();const r=new FileReader;r.readAsDataURL(n),r.onload=()=>{this._userViewUploadAndAddSelectedImageList(r.result,e)},r.onerror=()=>{console.error("Error reading file:",r.error)}}catch(n){this._renderUserToast(n,"error")}}_renderUserToast(e,t="success"){const n=ee("div","","display:flex;align-items:center;gap:5px;margin-top:5px;");n.id="user-toast-container";const r=ee("p","","margin-block:0px;font-size:14px;padding-top:3px");r.textContent=e,r.style.color=t==="success"?"#4caf50":"#ee3f3f";const i=t==="success"?kr("#4caf50"):Mn();i.style.width="15px",i.style.height="15px",n.append(i,r),A(this,_e).appendChild(n)}_removeUserToast(){const e=document.getElementById("user-toast-container");e&&e.remove()}_renderUserViewBrowseButton(){const e=$n("file");e.style.display="none",e.setAttribute("multiple","true"),e.setAttribute("accept","image/*");const t=ee("a","user-upload-btn","","Click to upload");return t.classList.add("user-upload-btn"),t.role="button",t.addEventListener("click",()=>{this._removeUserToast(),e.click()}),e.addEventListener("change",()=>{const n=e.files[0];n&&this._readFileAsBase64(n),e.value=""}),t}_renderUserUploading(){const e=ee("div","","margin-top:5px;margin-bottom:8px;display:flex;flex-direction:column;align-items:center;gap:5px;font-weight:600;font-size:14px");e.id="user-uploading",e.innerHTML="Uploading...";const t=ee("div","linear-loader");e.appendChild(t),A(this,_e).append(e)}_removeUserUploading(){const e=document.getElementById("user-uploading");e&&e.remove()}async _userViewUploadAndAddSelectedImageList(e,t){this._renderUserUploading();try{this._renderImagePreview(e,t.name);const n=await Zr(e,t,A(this,De),!1);await this._uploadForUser(n,t),A(this,zt)&&this._renderUserToast(A(this,zt),"success"),this._renderRemovePreviewBtn()}catch{this._renderUserToast(A(this,Kt)?A(this,Kt):"Error uploading. Please try again later.","error")}finally{H(this,ot,!1),this._removeUserUploading()}}async _uploadForUser(e,t){var n;try{const r=await Gi(e,it[xr((n=t.type)==null?void 0:n.split("/")[0])],A(this,De));H(this,Wt,r==null?void 0:r.response),A(this,$t).call(this)}catch(r){throw Error(r)}}_createAllAndSelectedTab(e){const t=K("select-options"),n=tn("Browse","select"),r=tn("Selected","select","selected-images-tab");n.classList.add("selected"),[n,r].forEach((o,a)=>{o.addEventListener("click",()=>{var c;H(this,Ft,a),(c=document.querySelector(".select.selected"))==null||c.classList.remove("selected"),o.classList.add("selected"),this._updateSelectedImageListContainerUI()})}),t.append(n,r),e.appendChild(t)}_renderUploadButton(){const e=$n("file");e.style.display="none",e.setAttribute("multiple","true"),e.setAttribute("accept","image/*,video/*,audio/*,.gif"),H(this,mt,document.createElement("button")),A(this,mt).className="browse-more-btn";const t=document.createElement("span");return t.textContent="Upload",A(this,mt).append(Hn(),t),A(this,mt).type="button",A(this,mt).addEventListener("click",()=>e.click()),e.addEventListener("change",async()=>{const n=e.files[0];try{H(this,ot,!0);const r=await qr(n),i=new FileReader;i.readAsDataURL(r),i.onload=async()=>{await this._uploadAndAddSelectedImageList(i.result,n)}}catch(r){this._renderToastContainer(r,"error",A(this,ve))}e.value=""}),A(this,mt)}_renderCreateFolderBtn(){const e=document.createElement("button");e.className="create-folder-btn";const t=document.createElement("span");return t.textContent="Create",e.append(Nr(),t),this._createUpdateFolderDialog(e,"create"),e}_renderSearchField(){let e;const t=K("search-browse-container"),n=K("search-input-wrapper","search-input-wrapper");H(this,Tt,$n("search")),A(this,Tt).value="",A(this,Tt).addEventListener("input",i=>{H(this,Ie,[]);const o=i.target;e&&clearTimeout(e),e=setTimeout(()=>{if(!o.value){H(this,ct,""),H(this,It,!1),H(this,wt,!1),this._fetchFilesFromFolder(A(this,At));return}H(this,wt,!0),H(this,Pt,o.value),this._search(A(this,Pt))},750)}),A(this,Tt).setAttribute("placeholder","Search");const r=ms();return r.style.position="absolute",r.style.top="50%",r.style.left="5%",r.style.transform="translate(-5%, -50%)",n.append(r,A(this,Tt)),t.append(n),t}_createBrowseMoreContainer(){H(this,St,K("browse-more-btn-container")),this._createAllAndSelectedTab(A(this,St));const e=this._renderUploadButton(),t=this._renderCreateFolderBtn(),n=document.createElement("div");return n.style.display="flex",n.style.alignItems="center",n.style.gap="10px",n.append(e,t),A(this,St).appendChild(n),A(this,St)}_createBrowseImageMain(){const e=K("browse-image-main");return H(this,Ae,K("selected-image-container")),A(this,Ae).addEventListener("scroll",()=>{const t=A(this,Ae).clientHeight,n=A(this,Ae).scrollTop,r=A(this,Ae).scrollHeight;t+n>=r-5&&A(this,It)&&(A(this,wt)?this._search(A(this,Pt)):this._fetchFilesFromFolder(A(this,At)))}),e.appendChild(A(this,Ae)),e}_renderFetchingSkeletonUI(){for(let e=0;e<20;e++){const t=K("skeleton");t.innerHTML="",A(this,Ae).append(t)}}_renderEmptyImageContainer(){if(A(this,je)||A(this,ot))return;const e=K(),t=K(),n=document.createElement("p");A(this,wt)&&A(this,Ft)===0?(t.innerHTML=`
+`;let qn;function Ss(s,e){return new Promise((t,n)=>{qn||(qn=function(o){const a=[];return a.push(o),URL.createObjectURL(new Blob(a))}(Os));const r=new Worker(qn);r.addEventListener("message",function(o){if(e.signal&&e.signal.aborted)r.terminate();else if(o.data.progress===void 0){if(o.data.error)return n(new Error(o.data.error)),void r.terminate();t(o.data.file),r.terminate()}else e.onProgress(o.data.progress)}),r.addEventListener("error",n),e.signal&&e.signal.addEventListener("abort",()=>{n(e.signal.reason),r.terminate()}),r.postMessage({file:s,imageCompressionLibUrl:e.libURL,options:{...e,onProgress:void 0,signal:void 0}})})}function Se(s,e){return new Promise(function(t,n){let r,i,o,a,c,h;if(r={...e},o=0,{onProgress:a}=r,r.maxSizeMB=r.maxSizeMB||Number.POSITIVE_INFINITY,c=typeof r.useWebWorker!="boolean"||r.useWebWorker,delete r.useWebWorker,r.onProgress=f=>{o=f,typeof a=="function"&&a(o)},!(s instanceof Blob||s instanceof Bs))return n(new Error("The file given is not an instance of Blob or File"));if(!/^image/.test(s.type))return n(new Error("The file given is not an image"));if(h=typeof WorkerGlobalScope<"u"&&self instanceof WorkerGlobalScope,!c||typeof Worker!="function"||h)return jr(s,r).then((function(f){try{return i=f,d.call(this)}catch(y){return n(y)}}).bind(this),n);var l=(function(){try{return d.call(this)}catch(f){return n(f)}}).bind(this),u=function(f){try{return jr(s,r).then(function(y){try{return i=y,l()}catch(I){return n(I)}},n)}catch(y){return n(y)}};try{return r.libURL=r.libURL||"https://cdn.jsdelivr.net/npm/browser-image-compression@2.0.2/dist/browser-image-compression.js",Ss(s,r).then(function(f){try{return i=f,l()}catch{return u()}},u)}catch{u()}function d(){try{i.name=s.name,i.lastModified=s.lastModified}catch{}try{r.preserveExif&&s.type==="image/jpeg"&&(!r.fileType||r.fileType&&r.fileType===s.type)&&(i=Br(s,i))}catch{}return t(i)}})}Se.getDataUrlFromFile=Rr,Se.getFilefromDataUrl=Zn,Se.loadImage=Mr,Se.drawImageInCanvas=Hr,Se.drawFileInCanvas=An,Se.canvasToFile=kn,Se.getExifOrientation=$r,Se.handleMaxWidthOrHeight=Pr,Se.followExifOrientation=Wr,Se.cleanupCanvasMemory=st,Se.isAutoOrientationInBrowser=Vt,Se.approximateBelowMaximumCanvasSizeOfBrowser=Vr,Se.copyExifWithoutOrientation=Br,Se.getBrowserName=Bt,Se.version="2.0.2";const Zr=async(s,e,t,n=!0)=>{try{const r=Ds(s,e),o=(await Is(e==null?void 0:e.type,t,n)).response.url;return await fetch(o,{method:"PUT",headers:{"Content-Type":e==null?void 0:e.type,"x-amz-acl":"public-read"},body:r}),o==null?void 0:o.split("?")[0]}catch(r){throw r}},Ds=(s,e)=>{const t=e.type.split("/")[0];let n="";t==="video"?n=s==null?void 0:s.replace(/^data:video\/\w+;base64,/,""):t==="image"?n=s==null?void 0:s.replace(/^data:image\/\w+;base64,/,""):t==="audio"&&(n=s==null?void 0:s.replace(/^data:audio\/\w+;base64,/,""));const r=atob(n),i=new Uint8Array(r.length);for(let o=0;o<r.length;o++)i[o]=r.charCodeAt(o);return i};async function qr(s){const e={maxSizeMB:2,maxWidthOrHeight:1920,useWebWorker:!0};try{return await Se(s,e)}catch(t){throw Error(t)}}class Rs{constructor(e){X(this,vt);X(this,ve);X(this,Ae);X(this,mt);X(this,we,[]);X(this,Ie,[]);X(this,ot);X(this,je);X(this,Ot);X(this,At);X(this,at,[]);X(this,tt);X(this,kt);X(this,$t);X(this,Fn);X(this,Ft);X(this,Nt);X(this,gt);X(this,St);X(this,lt);X(this,ct);X(this,It);X(this,Tt);X(this,wt);X(this,Pt);X(this,nn);X(this,De);X(this,yt);X(this,rn,!1);X(this,Nn);X(this,sn);X(this,_e);X(this,Wt);X(this,Lt);X(this,jt);X(this,Zt);X(this,qt);X(this,Kt);X(this,zt);X(this,on);H(this,sn,e.isAdmin),H(this,ot,!1),H(this,$t,e.handleUpload.bind(this)),H(this,nn,e.accessToken),H(this,jt,e==null?void 0:e.mode),this._grpcOptionInitializer(),this._init(e).then(()=>{H(this,rn,!0),this._renderView(e),this.updateWindowObject({initialized:!0}),this._initializeGrpcConfig(e.mode,e.endPoint)})}async _init(e){try{const{mode:t}=e;this.updateWindowObject({mode:t})}catch{throw Error("Initialization failed")}}_isAdminOptions(e){return e.isAdmin===!0}_renderView(e){return this._isAdminOptions(e)?(H(this,je,!1),H(this,Ot,!1),H(this,Ft,0),H(this,ct,""),H(this,wt,!1),H(this,jt,e.mode),H(this,It,!1),H(this,Lt,""),H(this,yt,null),this._removeToastContainer(),this._renderAdminView(e)):(H(this,Wt,""),H(this,Zt,e.restrictedFileSize),H(this,qt,e==null?void 0:e.localizedFileRestrictedMessage),H(this,zt,e==null?void 0:e.localizedSuccessMessage),H(this,Kt,e==null?void 0:e.localizedErrorMessage),H(this,on,e.removeImagePreviewCB.bind(this)),this._removeUserToast(),this._renderUserView(e))}_renderAdminView(e){if(!A(this,rn))return;const{parentContainerId:t}=e;if(e.isAdmin===!0)var{buttonProps:n}=e;H(this,vt,document.getElementById(t));const r=document.createElement("button");r.className=n!=null&&n.buttonClass?n==null?void 0:n.buttonClass:"browse-image-button",r.addEventListener("focus",()=>{r.blur()});const i=document.createElement("span");i.textContent=n!=null&&n.buttonText?n==null?void 0:n.buttonText:"Browse Files";const o=document.createElement("span");o.innerHTML=n!=null&&n.buttonIcon?n==null?void 0:n.buttonIcon:"",r.type="button",r.append(i,o),n!=null&&n.buttonStyle&&Object.assign(r.style,n==null?void 0:n.buttonStyle),r.addEventListener("click",()=>{this._selectedImageContainer()}),A(this,vt).appendChild(r)}async _grpcOptionInitializer(){H(this,De,await Es(A(this,nn),A(this,jt)))}_selectedImageContainer(){var u;H(this,kt,We(`Save (${(u=A(this,we))==null?void 0:u.length})`,"dialog-btn confirm")),H(this,Nt,K("folder-container")),H(this,gt,K("folder-list-wrapper")),this._fetchAllFolders();const e=We("Cancel","dialog-btn cancel");We("","dialog-modal-close-btn","",!1,'<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 50 50"> <path d="M 9.15625 6.3125 L 6.3125 9.15625 L 22.15625 25 L 6.21875 40.96875 L 9.03125 43.78125 L 25 27.84375 L 40.9375 43.78125 L 43.78125 40.9375 L 27.84375 25 L 43.6875 9.15625 L 40.84375 6.3125 L 25 22.15625 Z"></path> </svg>').addEventListener("click",()=>{yn.hide(),H(this,we,[]),H(this,Ie,[])}),H(this,ve,K("browse-container"));const n=K();n.style.display="flex",n.style.alignItems="center",n.style.justifyContent="space-between",n.style.padding="10px 20px";const r=tn("Folders","folder-title"),i=We("","add-folder-btn");i.append(Nr()),this._createUpdateFolderDialog(i,"create"),n.append(r,i),A(this,Nt).append(n,A(this,gt));const o=this._renderSearchField(),a=this._createBrowseMoreContainer(),c=this._createBrowseImageMain(),h=K("footer");e.onclick=()=>{A(this,Fn).call(this),yn.hide(),H(this,Ie,[]),H(this,we,[])},A(this,kt).onclick=()=>{A(this,$t).call(this),yn.hide(),H(this,we,[]),H(this,Ie,[])},h.append(e,A(this,kt));const l=K("container-right-main");l.append(o,a,c,h),A(this,ve).append(A(this,Nt),l),yn.show({content:A(this,ve)})}_renderUserView(e){const{parentContainerId:t,restrictedFileSize:n,imagePreview:r}=e;H(this,vt,document.getElementById(t)),H(this,_e,ee("div","user-view-container"));const i=K("user-view-browse-wrapper","user-view-browse-wrapper"),o=ee("span","","","Drag & Drop or "),a=this._renderUserViewBrowseButton(),c=ee("p","","margin-block: 0px; font-size:14px");if(c.append(o,a),n){const h=ee("p","","margin-block: 0px; font-size: 13px; color: #777",`Max File size: ${n}MB`);i.append(Hn(),c,h)}else i.append(Hn(),c);return this._setupDragAndDrop(A(this,_e)),A(this,_e).append(i),r&&this._renderImagePreview(r,"",i,!0),A(this,vt).appendChild(A(this,_e)),A(this,vt)}_setupDragAndDrop(e){if(!e)return;["dragenter","dragover","dragleave","drop"].forEach(n=>{A(this,_e).addEventListener(n,r=>{r.preventDefault(),r.stopPropagation()},!1)}),["dragenter","dragover"].forEach(n=>{A(this,_e).addEventListener(n,()=>{A(this,_e).classList.add("highlight")},!1)}),["dragleave","drop"].forEach(n=>{A(this,_e).addEventListener(n,()=>{A(this,_e).classList.remove("highlight")},!1)}),A(this,_e).addEventListener("drop",n=>{var i;this._removeUserToast();let r=(i=n.dataTransfer)==null?void 0:i.files[0];r&&this._handleDroppedFile(r)},!1)}_renderImagePreview(e,t,n,r=!1){var d;const i=document.getElementById("user-view-browse-wrapper"),o=i||n;o&&(o.style.display="none");const a=document.getElementById("user-image-preview");a&&a.remove();const c=ee("div","user-image-preview");c.id="user-image-preview";const h=ee("img","","max-width: 230px;max-height:250px;object-fit:cover;");h.src=e,h.alt=t||"";const l=ee("div","",`width: 18px; height: 18px; display: ${r?"flex":"none"}; cursor:pointer; align-items: center; justify-content: center; padding: 4px; position: absolute; top: -5px; right: -5px; background: #c10007; border-radius: 50%;z-index:1`);l.id="remove-preview-btn";const u=Vn();u.style.fill="#fff",l==null||l.appendChild(u),l.addEventListener("click",()=>{var f;(f=A(this,_e))==null||f.removeChild(c),this._removeUserToast(),A(this,on).call(this),o&&(o.style.display="flex")}),c==null||c.append(h,l),(d=A(this,_e))==null||d.append(c)}_renderRemovePreviewBtn(){const e=document.getElementById("remove-preview-btn");e&&(e.style.display="flex")}_handleDroppedFile(e){this._readFileAsBase64(e)}async _readFileAsBase64(e){const t=A(this,Zt)*1024*1024;if(e.size>t){this._renderUserToast(A(this,qt)?A(this,qt):`File size must be less than ${A(this,Zt)}MB.`,"error");return}H(this,ot,!0);try{const n=await qr(e);this._removeUserToast();const r=new FileReader;r.readAsDataURL(n),r.onload=()=>{this._userViewUploadAndAddSelectedImageList(r.result,e)},r.onerror=()=>{console.error("Error reading file:",r.error)}}catch(n){this._renderUserToast(n,"error")}}_renderUserToast(e,t="success"){const n=ee("div","","display:flex;align-items:center;gap:5px;margin-top:5px;");n.id="user-toast-container";const r=ee("p","","margin-block:0px;font-size:14px;padding-top:3px");r.textContent=e,r.style.color=t==="success"?"#4caf50":"#ee3f3f";const i=t==="success"?kr("#4caf50"):Mn();i.style.width="15px",i.style.height="15px",n.append(i,r),A(this,_e).appendChild(n)}_removeUserToast(){const e=document.getElementById("user-toast-container");e&&e.remove()}_renderUserViewBrowseButton(){const e=$n("file");e.style.display="none",e.setAttribute("multiple","true"),e.setAttribute("accept","image/*");const t=ee("a","user-upload-btn","","Click to upload");return t.classList.add("user-upload-btn"),t.role="button",t.addEventListener("click",()=>{this._removeUserToast(),e.click()}),e.addEventListener("change",()=>{const n=e.files[0];n&&this._readFileAsBase64(n),e.value=""}),t}_renderUserUploading(){const e=ee("div","","margin-top:5px;margin-bottom:8px;display:flex;flex-direction:column;align-items:center;gap:5px;font-weight:600;font-size:14px");e.id="user-uploading",e.innerHTML="Uploading...";const t=ee("div","linear-loader");e.appendChild(t),A(this,_e).append(e)}_removeUserUploading(){const e=document.getElementById("user-uploading");e&&e.remove()}async _userViewUploadAndAddSelectedImageList(e,t){this._renderUserUploading();try{this._renderImagePreview(e,t.name);const n=await Zr(e,t,A(this,De),!1);await this._uploadForUser(n,t),A(this,zt)&&this._renderUserToast(A(this,zt),"success"),this._renderRemovePreviewBtn()}catch{this._renderUserToast(A(this,Kt)?A(this,Kt):"Error uploading. Please try again later.","error")}finally{H(this,ot,!1),this._removeUserUploading()}}async _uploadForUser(e,t){var n;try{const r=await Gi(e,it[xr((n=t.type)==null?void 0:n.split("/")[0])],A(this,De));H(this,Wt,r==null?void 0:r.response),A(this,$t).call(this)}catch(r){throw Error(r)}}_createAllAndSelectedTab(e){const t=K("select-options"),n=tn("Browse","select"),r=tn("Selected","select","selected-images-tab");n.classList.add("selected"),[n,r].forEach((o,a)=>{o.addEventListener("click",()=>{var c;H(this,Ft,a),(c=document.querySelector(".select.selected"))==null||c.classList.remove("selected"),o.classList.add("selected"),this._updateSelectedImageListContainerUI()})}),t.append(n,r),e.appendChild(t)}_renderUploadButton(){const e=$n("file");e.style.display="none",e.setAttribute("multiple","true"),e.setAttribute("accept","image/*,video/*,audio/*,.gif"),H(this,mt,document.createElement("button")),A(this,mt).className="browse-more-btn";const t=document.createElement("span");return t.textContent="Upload",A(this,mt).append(Hn(),t),A(this,mt).type="button",A(this,mt).addEventListener("click",()=>e.click()),e.addEventListener("change",async()=>{const n=e.files[0];try{H(this,ot,!0);const r=await qr(n),i=new FileReader;i.readAsDataURL(r),i.onload=async()=>{await this._uploadAndAddSelectedImageList(i.result,n)}}catch(r){this._renderToastContainer(r,"error",A(this,ve))}e.value=""}),A(this,mt)}_renderCreateFolderBtn(){const e=document.createElement("button");e.className="create-folder-btn";const t=document.createElement("span");return t.textContent="Create",e.append(Nr(),t),this._createUpdateFolderDialog(e,"create"),e}_renderSearchField(){let e;const t=K("search-browse-container"),n=K("search-input-wrapper","search-input-wrapper");H(this,Tt,$n("search")),A(this,Tt).value="",A(this,Tt).addEventListener("input",i=>{H(this,Ie,[]);const o=i.target;e&&clearTimeout(e),e=setTimeout(()=>{if(!o.value){H(this,ct,""),H(this,It,!1),H(this,wt,!1),this._fetchFilesFromFolder(A(this,At));return}H(this,wt,!0),H(this,Pt,o.value),this._search(A(this,Pt))},750)}),A(this,Tt).setAttribute("placeholder","Search");const r=ms();return r.style.position="absolute",r.style.top="50%",r.style.left="5%",r.style.transform="translate(-5%, -50%)",n.append(r,A(this,Tt)),t.append(n),t}_createBrowseMoreContainer(){H(this,St,K("browse-more-btn-container")),this._createAllAndSelectedTab(A(this,St));const e=this._renderUploadButton(),t=this._renderCreateFolderBtn(),n=document.createElement("div");return n.style.display="flex",n.style.alignItems="center",n.style.gap="10px",n.append(e,t),A(this,St).appendChild(n),A(this,St)}_createBrowseImageMain(){const e=K("browse-image-main");return H(this,Ae,K("selected-image-container")),A(this,Ae).addEventListener("scroll",()=>{const t=A(this,Ae).clientHeight,n=A(this,Ae).scrollTop,r=A(this,Ae).scrollHeight;t+n>=r-5&&A(this,It)&&(A(this,wt)?this._search(A(this,Pt)):this._fetchFilesFromFolder(A(this,At)))}),e.appendChild(A(this,Ae)),e}_renderFetchingSkeletonUI(){for(let e=0;e<20;e++){const t=K("skeleton");t.innerHTML="",A(this,Ae).append(t)}}_renderEmptyImageContainer(){if(A(this,je)||A(this,ot))return;const e=K(),t=K(),n=document.createElement("p");A(this,wt)&&A(this,Ft)===0?(t.innerHTML=`
 <svg width="300" height="300" viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_2304_257)">
 <path d="M564.829 772.4H336.658V948.386H564.829V772.4Z" fill="#EBEBEB"/>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "image-salon-sdk",
-  "version": "1.0.48",
+  "version": "1.0.49",
   "license": "ISC",
   "type": "module",
   "files": [