@creaditor/web-starterkit 1.0.0

package/dist/7209.creaditor.bundle.js

@@ -0,0 +1,660 @@
+"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[2590,7209],{93967(e,t,s){s.d(t,{T:()=>i});const i=s(59929).AH`
+  :host {
+    direction: ltr;
+  }
+  .new-folder-form {
+    max-width: 250px;
+  }
+  .add-btn {
+    background: var(--primary);
+    color: #fff;
+    padding: 6px;
+  }
+  paper-listbox {
+    background: transparent;
+  }
+  .file-col {
+    position: relative;
+  }
+  vaadin-item,
+  vaadin-list-box,
+  lang-text {
+    direction: ltr;
+    text-align: left;
+  }
+  .moved {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    background: #fff;
+    opacity: 0.8;
+    height: 100%;
+    z-index: 2;
+    height: 100%;
+  }
+  .onOver {
+    background: red;
+  }
+  paper-item {
+    cursor: pointer;
+    font-family: Arial;
+    font-size: 16px;
+  }
+  .icon-btn {
+    min-width: 50px;
+  }
+  .divider-y {
+    width: 1px;
+    height: 30px;
+    background: #cccccc;
+  }
+  .list {
+    background: var(--alpha);
+    height: 100vh;
+    max-width: 210px;
+  }
+  .search {
+    --cdtr-input-height: 35px;
+    width: 200px;
+  }
+  .scroll-body {
+    max-height: calc(100vh - 260px);
+    overflow: auto;
+    padding: 5px;
+  }
+  .footer {
+    background: #fff;
+    width: 100%;
+    height: 40px;
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 0px;
+    position: absolute;
+    width: 100%;
+    top: 100%;
+    transform: translateY(-100%);
+    left: 0;
+  }
+  .scroll-body::-webkit-scrollbar {
+    width: 6px;
+  }
+  .scroll-body::-webkit-scrollbar-track {
+    background: #f1f1f1;
+  }
+  .scroll-body::-webkit-scrollbar-thumb {
+    background: #272727;
+  }
+  .scroll-body::-webkit-scrollbar-thumb:hover {
+    background: #555;
+  }
+
+  paper-button.upload,
+  paper-button.add {
+    background: var(--primary);
+    color: var(--primaryText);
+    display: flex;
+    gap: 10px;
+    padding: 5px 22px;
+  }
+  paper-button.upload {
+    border-radius: 20px;
+  }
+  .upload-container {
+    padding: 44px 5px;
+    /* border:2px dashed grey; */
+  }
+  .gallery-container {
+    padding: 40px 20px;
+  }
+`},27209(e,t,s){s.r(t),s.d(t,{CreaditorGalleryWrapper:()=>g});var i=s(59929),r=s(5441),o=s(86319),l=s(49549),a=s(91597),n=s(21421),d=s(93967);function c(e){try{localStorage.setItem("creaditor-gallery-folder",e)}catch(e){console.warn("Could not write to localStorage:",e)}}class p extends i.WF{constructor(){super(),this.newFolderModalRef=(0,n._)(),this.newFolderInputRef=(0,n._)(),this.drop=this.drop.bind(this),this.controls=!0,this.sendFiles=this.sendFiles.bind(this),this.onSearch=this.onSearch.bind(this),this.coverEl=document.createElement("div"),this.sortItems=[{index:0,text:"fromNewToOld",value:{filter:"date",sortBy:"ASC"},checked:!0},{index:1,text:"fromOldToNew",value:{filter:"date",sortBy:"DESC"},checked:!1},{index:2,text:o.M.get("lang","aToZ"),value:{filter:"name",sortBy:"ASC"},checked:!1},{index:3,text:o.M.get("lang","zToA"),value:{filter:"name",sortBy:"DESC"},checked:!1}],this.filterItems=[{index:0,text:o.M.get("lang","folders"),value:"folders",checked:!0},{index:1,text:o.M.get("lang","images"),value:"images",checked:!0}]}openNewFolderModal(e){const t=this.newFolderModalRef.value;t&&(t.positionTarget=e.target,t.open(),this.newFolderInputRef.value.focus())}sendFiles(){const e={detail:this.files.filter(e=>e.selected),bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("file",e))}onLiked(e){const t={detail:e,bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("like",t))}onClickFolder(e,t){this.freeImages=!1,this.controls=t;const s={detail:e,bubbles:!1,composed:!1};this.folderName=e.name,this.dispatchEvent(new CustomEvent("folder",s))}onSelectFile(e){const t={detail:e,bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("file",t))}onSelectPexelsImage(e){const t={detail:e,bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("file",t))}onUpload(){const e=(0,r.A)("input",{hidden:!0,type:"file",accept:"image/*"});e.onchange=e=>{const t=e.target;if(t.files&&t.files[0]){const e=new FileReader,s=t.files[0];e.onload=e=>{const t={detail:s,bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("upload",t))},e.readAsDataURL(s)}},e.click()}onCreateNewFolder(){const e=this.newFolderInputRef.value.value;if(e.length<=30){const t={detail:e,bubbles:!1,composed:!1};this.newFolderModalRef.value.close(),this.dispatchEvent(new CustomEvent("newFolder",t)),this.newFolderInputRef.value.value=""}}onClickCategory(){}onReset(){c(null),this.freeImages=!1,this.folderName=o.M.get("lang","myImages"),this.dispatchEvent(new CustomEvent("reset",{}))}onSearch(e,t){c(null),this.freeImages=!1;let s=!1;"object"==typeof t&&t.isLiked&&(s=!0);const i=e.target.value;(0,a.A)(()=>{const e={detail:{value:i,isLiked:s},bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("search",e))})}drop(e,t){e.preventDefault();const s=e.dataTransfer.getData("fileId"),i=(e.dataTransfer.getData("folderId"),{detail:{fileId:s,folderId:t},bubbles:!1,composed:!1});this.dispatchEvent(new CustomEvent("moveFile",i))}onFilterMedia(e){const t=e.detail.value,s=t.index,i=[...this.filterItems];i[s].checked=!i[s].checked,this.filterItems=i}onSort(e){const t=e.detail.value,s={detail:t,bubbles:!1,composed:!1},i=t.index,r=[...this.sortItems];r.forEach((e,t)=>{e.checked=i===t}),this.sortItems=r,this.dispatchEvent(new CustomEvent("filter",s))}onDeleteFile(e){const t={detail:e,bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("deleteFile",t))}onDeleteFolder(e){const t={detail:e,bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("deleteFolder",t))}dragStart(e,t){e.dataTransfer.setData("fileId",t)}dragOver(e,t){e.dataTransfer.setData("folderId",t),e.preventDefault()}onFreeImages(){this.freeImages=!0,c("freeImages"),s.e(767).then(s.bind(s,70767))}onScroll(e){const t=e.target;if(t.scrollTop+t.offsetHeight>=t.scrollHeight-50){const e={detail:{folderId:this.folderId,page:this.page},bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("loadMore",e))}}connectedCallback(){super.connectedCallback(),s.e(5156).then(s.bind(s,85156));"freeImages"===function(){try{return localStorage.getItem("creaditor-gallery-folder")}catch(e){return console.warn("Could not read from localStorage:",e),null}}()&&(this.freeImages=!0,s.e(767).then(s.bind(s,70767)))}render(){Array.isArray(this.files)||(this.files=[]),Array.isArray(this.folders)||(this.folders=[]);const e=this.folders.filter(e=>"public"!==e.visibility),t=this.folders.filter(e=>"public"===e.visibility);return i.qy` <cdtr-row dir="rtl">
+      <cdtr-col class="list" sm="3">
+        <cdtr-row alignItems="center" class="upload-container">
+          <paper-button @click=${this.onUpload} class="upload">
+            <lang-text text="upload"></lang-text
+            ><cdtr-upload-icon width="20"></cdtr-upload-icon>
+          </paper-button>
+        </cdtr-row>
+        <paper-listbox selected="${this.freeImages?"2":"0"}">
+          <paper-item @click=${this.onReset}
+            ><lang-text text="myImages"></lang-text
+          ></paper-item>
+          <paper-item @click=${e=>this.onSearch(e,{isLiked:!0})}
+            ><lang-text text="favorites"></lang-text
+          ></paper-item>
+          <paper-item @click=${this.onFreeImages}> <lang-text text="freeImages"></lang-text> </paper-item>
+          ${Array.isArray(t)?t.map(e=>i.qy`<paper-item
+                    @click=${()=>this.onClickFolder(e,!1)}
+                    ><lang-text text="${e.name}"></lang-text
+                  ></paper-item>`):null}
+        </paper-listbox>
+      </cdtr-col>
+      ${this.freeImages?i.qy`<cdtr-col>
+            <cdtr-pexels-gallery
+              @file=${e=>this.onSelectPexelsImage(e.detail)}
+            ></cdtr-pexels-gallery>
+          </cdtr-col>`:i.qy`<cdtr-col>
+            <div class="gallery-container">
+              <cdtr-row alignItems="center">
+                <cdtr-input
+                  type="search"
+                  @input=${this.onSearch}
+                  placeholder="${o.M.get("lang","search")}"
+                  class="search"
+                ></cdtr-input>
+
+                <div class="divider-y"></div>
+
+                <paper-button
+                  @click=${this.openNewFolderModal}
+                  class="icon-btn"
+                >
+                  <cdtr-tooltip delay="500,0" arrow=${!1} content="newFolder"
+                    ><cdtr-new-folder-icon></cdtr-new-folder-icon> </cdtr-tooltip
+                ></paper-button>
+              </cdtr-row>
+              <cdtr-row mt="1">
+                ${this.folderName?i.qy`
+                      <cdtr-title style="font-size:14px"
+                        ><lang-text text="main"></lang-text
+                      ></cdtr-title>
+                      <cdtr-arrow-icon
+                        width="16"
+                        height="16"
+                        to="left"
+                      ></cdtr-arrow-icon>
+                      <cdtr-title style="font-size:14px;color:var(--primary);"
+                        >${this.folderName}</cdtr-title
+                      >
+                    `:null}
+              </cdtr-row>
+              <cdtr-row mt="2" justify="space-between">
+                ${this.filterItems[0].checked?i.qy` <cdtr-col sm="2">
+                      <cdtr-row
+                        spacing="2px"
+                        class="scroll-body"
+                        justify="space-between"
+                      >
+                        <cdtr-col sm="12">
+                          <cdtr-editor-media-card
+                            @click=${()=>{this.onReset()}}
+                            .controls=${!1}
+                            type="folder"
+                            name=${o.M.get("lang","myImages")}
+                          ></cdtr-editor-media-card>
+                        </cdtr-col>
+                        ${(0,l.u)(e||[],e=>e.id,(e,t)=>i.qy`<cdtr-col sm="12">
+                              <cdtr-editor-media-card
+                                @deleteFolder=${()=>this.onDeleteFolder(e)}
+                                @deleteFile=${()=>this.onDeleteFile(e)}
+                                @dragover=${t=>this.dragOver(t,e.id)}
+                                @drop=${t=>this.drop(t,e.id)}
+                                @click=${()=>{this.onClickFolder(e,!0),this.folders.forEach(e=>e.selected=!1),e.selected=!e.selected,this.folders=[...this.folders]}}
+                                .selected=${e.selected}
+                                .controls=${!0}
+                                type="folder"
+                                name=${e.name||"..."}
+                                subTitle="${parseFloat(e.file_count)||""}"
+                              ></cdtr-editor-media-card>
+                            </cdtr-col>`)}
+                      </cdtr-row>
+                    </cdtr-col>`:null}
+                ${this.filterItems[1].checked?i.qy` <cdtr-col sm="10">
+                      <cdtr-row
+                        @scroll=${this.onScroll}
+                        class="scroll-body"
+                        justify="space-evenly"
+                      >
+                        ${(0,l.u)(this.files||[],e=>e.id,(e,t)=>i.qy`<cdtr-col class="file-col" sm="3">
+                              ${e.moved?i.qy` <div class="moved"></div> `:null}
+                              <cdtr-editor-media-card
+                                @deleteFile=${()=>this.onDeleteFile(e)}
+                                @deleteFolder=${()=>this.onDeleteFolder(e)}
+                                @like=${()=>this.onLiked(e)}
+                                draggable=${!0}
+                                @dragstart=${t=>this.dragStart(t,e.id)}
+                                @dblclick=${()=>this.onSelectFile(e)}
+                                @click=${t=>{t.shiftKey&&this.multi||this.files.forEach(e=>e.selected=!1),e.selected=!e.selected,this.files=[...this.files]}}
+                                .selected=${e.selected}
+                                .controls=${this.controls}
+                                .liked=${e.isLiked||e.isFavorite}
+                                src=${e.src}
+                                name=${e.name}
+                                subTitle="${e.size}"
+                              ></cdtr-editor-media-card>
+                            </cdtr-col>`)}
+                      </cdtr-row>
+                    </cdtr-col>`:null}
+                <cdtr-row alignItems="center" justify="flex-end" class="footer">
+                  <paper-button @click=${this.sendFiles} class="add-btn"
+                    ><lang-text text="choose"></lang-text
+                  ></paper-button>
+                </cdtr-row>
+              </cdtr-row>
+            </div>
+          </cdtr-col>`}
+      <paper-dialog
+        ${(0,n.K)(this.newFolderModalRef)}
+        no-overlap
+        horizontal-align="left"
+        vertical-align="top"
+      >
+        <form class="new-folder-form">
+          <cdtr-row spacing="5px">
+            <cdtr-col sm="10"
+              ><h2><lang-text text="addFolder"></lang-text></h2
+            ></cdtr-col>
+            <cdtr-col sm="10"
+              ><cdtr-title><lang-text text="folderName"></lang-text></cdtr-title
+            ></cdtr-col>
+            <cdtr-col sm="10"
+              ><cdtr-input
+                @submit=${this.onCreateNewFolder}
+                ${(0,n.K)(this.newFolderInputRef)}
+                autofocus=${!0}
+                maxLength=${30}
+              ></cdtr-input
+            ></cdtr-col>
+            <cdtr-col sm="10">
+              <paper-button @click=${this.onCreateNewFolder} class="add" raised
+                ><lang-text text="yes,Create"></lang-text
+              ></paper-button>
+            </cdtr-col>
+          </cdtr-row>
+        </form>
+      </paper-dialog>
+    </cdtr-row>`}}p.styles=d.T,p.properties={folders:{type:Array},files:{type:Array},pageCount:{type:Number},prevUrl:{type:String},nextUrl:{type:String},folderName:{type:String},filterItems:{type:Array},multi:{type:Boolean},controls:{type:Boolean},freeImages:{type:Boolean}},customElements.define("cdtr-gallery-files",p);class h extends i.WF{constructor(){super(),this.uploads={}}connectedCallback(){super.connectedCallback(),this.addEventListener("upload-start",this.handleUploadStart.bind(this)),this.addEventListener("upload-progress",this.handleUploadProgress.bind(this)),this.addEventListener("upload-complete",this.handleUploadComplete.bind(this)),this.addEventListener("upload-error",this.handleUploadError.bind(this))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("upload-start",this.handleUploadStart.bind(this)),this.removeEventListener("upload-progress",this.handleUploadProgress.bind(this)),this.removeEventListener("upload-complete",this.handleUploadComplete.bind(this)),this.removeEventListener("upload-error",this.handleUploadError.bind(this))}handleUploadStart(e){const{uploadId:t,fileName:s}=e.detail;this.uploads[t]={fileName:s,status:"uploading",progress:0,error:null},this.requestUpdate()}handleUploadProgress(e){const{uploadId:t,progress:s}=e.detail;this.uploads[t]&&(this.uploads[t].progress=s,this.requestUpdate())}handleUploadComplete(e){const{uploadId:t}=e.detail;this.uploads[t]&&(this.uploads[t].status="completed",this.uploads[t].progress=100,this.requestUpdate(),setTimeout(()=>{this.removeUpload(t)},3e3))}handleUploadError(e){const{uploadId:t,error:s}=e.detail;this.uploads[t]&&(this.uploads[t].status="error",this.uploads[t].error=s,this.requestUpdate(),setTimeout(()=>{this.removeUpload(t)},5e3))}removeUpload(e){delete this.uploads[e],this.requestUpdate()}getStatusIcon(e){switch(e){case"uploading":default:return i.qy`<div class="status-icon uploading"></div>`;case"completed":return i.qy`<div class="status-icon completed"></div>`;case"error":return i.qy`<div class="status-icon error"></div>`}}getProgressFillClass(e){switch(e){case"completed":return"progress-fill completed";case"error":return"progress-fill error";default:return"progress-fill"}}render(){const e=Object.entries(this.uploads).map(e=>{let[t,s]=e;return i.qy`
+        <div class="upload-item">
+          <div class="upload-header">
+            <span class="file-name" title="${s.fileName}">${s.fileName}</span>
+            <div style="display: flex; align-items: center; gap: 8px;">
+              ${this.getStatusIcon(s.status)}
+              <button 
+                class="close-btn" 
+                @click=${()=>this.removeUpload(t)}
+                title="Close"
+              >×</button>
+            </div>
+          </div>
+          
+          <div class="progress-bar">
+            <div 
+              class="${this.getProgressFillClass(s.status)}"
+              style="width: ${s.progress}%"
+            ></div>
+          </div>
+          
+          <div class="progress-text">
+            ${"uploading"===s.status?`${s.progress}%`:"completed"===s.status?"Upload completed":"error"===s.status?"Upload failed":""}
+          </div>
+          
+          ${s.error?i.qy`
+            <div class="error-message">
+              ${s.error.message||s.error}
+            </div>
+          `:""}
+        </div>
+      `});return i.qy`
+      <div>
+        ${e}
+      </div>
+    `}}h.styles=i.AH`
+    :host {
+      display: block;
+      position: fixed;
+      top: 20px;
+      right: 20px;
+      z-index: 9999;
+      max-width: 300px;
+    }
+    
+    .upload-item {
+      background: white;
+      border: 1px solid #e0e0e0;
+      border-radius: 8px;
+      padding: 12px;
+      margin-bottom: 8px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      animation: slideIn 0.3s ease-out;
+    }
+    
+    @keyframes slideIn {
+      from {
+        transform: translateX(100%);
+        opacity: 0;
+      }
+      to {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
+    
+    .upload-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 8px;
+    }
+    
+    .file-name {
+      font-size: 14px;
+      font-weight: 500;
+      color: #333;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 200px;
+    }
+    
+    .status-icon {
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+    }
+    
+    .status-icon.uploading {
+      background: #007bff;
+      animation: pulse 1.5s infinite;
+    }
+    
+    .status-icon.completed {
+      background: #28a745;
+    }
+    
+    .status-icon.error {
+      background: #dc3545;
+    }
+    
+    @keyframes pulse {
+      0% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.5;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+    
+    .progress-bar {
+      width: 100%;
+      height: 4px;
+      background: #f0f0f0;
+      border-radius: 2px;
+      overflow: hidden;
+      margin-bottom: 4px;
+    }
+    
+    .progress-fill {
+      height: 100%;
+      background: linear-gradient(90deg, #007bff, #0056b3);
+      transition: width 0.3s ease;
+      border-radius: 2px;
+    }
+    
+    .progress-fill.completed {
+      background: #28a745;
+    }
+    
+    .progress-fill.error {
+      background: #dc3545;
+    }
+    
+    .progress-text {
+      font-size: 12px;
+      color: #666;
+      text-align: right;
+    }
+    
+    .error-message {
+      font-size: 12px;
+      color: #dc3545;
+      margin-top: 4px;
+    }
+    
+    .close-btn {
+      background: none;
+      border: none;
+      color: #999;
+      cursor: pointer;
+      font-size: 16px;
+      padding: 0;
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    .close-btn:hover {
+      color: #666;
+    }
+  `,h.properties={uploads:{type:Object}},customElements.define("cdtr-upload-loading",h);s(2590);class u extends i.WF{constructor(){super(),this.isVisible=!1,this.fileName="",this.status="uploading",this.progress=0,this.timeElapsed=0,this.pollInterval=null,this.timeoutId=null,this.progressInterval=null,this.startTime=null,this.maxDuration=3e4,this.pollFrequency=7e3}connectedCallback(){super.connectedCallback(),window.addEventListener("cdtr-upload-start",this.handleUploadStart.bind(this))}disconnectedCallback(){super.disconnectedCallback(),this.cleanup(),window.removeEventListener("cdtr-upload-start",this.handleUploadStart.bind(this))}handleUploadStart(e){console.log("Upload monitor received event:",e.detail);const{fileName:t,file:s}=e.detail;this.startUploadMonitor(t,s)}startUploadMonitor(e,t){console.log("Starting upload monitor for:",e),this.fileName=e,this.isVisible=!0,this.status="uploading",this.progress=0,this.timeElapsed=0,this.startTime=Date.now(),this.uploadedFile=t,console.log("Component should be visible now, isVisible:",this.isVisible),this.requestUpdate(),this.simulateUploadProgress(),setTimeout(()=>{this.status="checking",this.startPolling(),this.startTimeout()},this.pollFrequency)}simulateUploadProgress(){let e=0;this.progressInterval=setInterval(()=>{e+=15*Math.random(),e>=90&&(e=90,clearInterval(this.progressInterval),this.progressInterval=null),this.progress=Math.floor(e),this.requestUpdate()},300)}startPolling(){this.progress=100,this.status="completed",this.requestUpdate(),setTimeout(()=>{this.isVisible=!1,this.requestUpdate()},5e3)}startTimeout(){this.timeoutId=setTimeout(()=>{"completed"!==this.status&&this.handleTimeout()},this.maxDuration)}handleUploadSuccess(){this.cleanup(),this.status="completed",this.progress=100,this.requestUpdate(),setTimeout(()=>{this.isVisible=!1,this.requestUpdate()},2e3)}handleTimeout(){this.cleanup(),this.status="timeout",this.requestUpdate(),setTimeout(()=>{this.isVisible=!1,this.requestUpdate()},1e4)}cleanup(){this.pollInterval&&(clearInterval(this.pollInterval),this.pollInterval=null),this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null),this.progressInterval&&(clearInterval(this.progressInterval),this.progressInterval=null)}getCircleProgress(){const e=2*Math.PI*26;return e-this.progress/100*e}renderContent(){switch(this.status){case"uploading":return i.qy`
+          <div class="progress-circle">
+            <svg class="progress-ring" width="60" height="60">
+              <circle class="progress-ring-bg" cx="30" cy="30" r="26"></circle>
+              <circle
+                class="progress-ring-progress"
+                cx="30"
+                cy="30"
+                r="26"
+                style="stroke-dashoffset: ${this.getCircleProgress()}"
+              ></circle>
+            </svg>
+            <div class="progress-text">${this.progress}%</div>
+          </div>
+          <div class="status-text">
+            <lang-text text="uploading"></lang-text>
+          </div>
+          <div class="file-name" title="${this.fileName}">${this.fileName}</div>
+        `;case"checking":return i.qy`
+          <div class="spinner"></div>
+          <div class="status-text">
+            <lang-text text="verifying"></lang-text>
+          </div>
+          <div class="file-name" title="${this.fileName}">${this.fileName}</div>
+        `;case"completed":return i.qy`
+          <div class="success-icon"></div>
+          <div class="status-text">
+            <lang-text text="completed"></lang-text>
+          </div>
+          <div class="file-name" title="${this.fileName}">${this.fileName}</div>
+        `;case"timeout":return i.qy`
+          <div class="error-icon"></div>
+          <div class="status-text"><lang-text text="timeout"></lang-text></div>
+          <div class="file-name" title="${this.fileName}">${this.fileName}</div>
+          <div style="font-size: 10px; color: #666; margin-top: 4px;">
+            File may be uploaded. Refresh gallery.
+          </div>
+        `;default:return i.qy``}}render(){return console.log("Render called - isVisible:",this.isVisible,"status:",this.status,"progress:",this.progress),this.isVisible?i.qy` <div class="upload-card">${this.renderContent()}</div> `:i.qy``}}u.styles=i.AH`
+    :host {
+      display: block;
+      position: fixed;
+      bottom: 20px;
+      left: 20px;
+      z-index: 10000;
+    }
+
+    .upload-card {
+      background: white;
+      border-radius: 12px;
+      padding: 16px;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+      text-align: center;
+      min-width: 200px;
+      max-width: 250px;
+      animation: slideInLeft 0.3s ease-out;
+    }
+
+    @keyframes slideInLeft {
+      from {
+        transform: translateX(-100%);
+        opacity: 0;
+      }
+      to {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
+
+    .progress-circle {
+      position: relative;
+      width: 60px;
+      height: 60px;
+      margin: 0 auto 12px;
+    }
+
+    .progress-ring {
+      transform: rotate(-90deg);
+    }
+
+    .progress-ring-circle {
+      transition: stroke-dashoffset 0.3s ease;
+      transform-origin: 50% 50%;
+    }
+
+    .progress-ring-bg {
+      fill: none;
+      stroke: #f0f0f0;
+      stroke-width: 6;
+    }
+
+    .progress-ring-progress {
+      fill: none;
+      stroke: #007bff;
+      stroke-width: 6;
+      stroke-linecap: round;
+      stroke-dasharray: 163.36; /* 2 * PI * 26 (radius) */
+      stroke-dashoffset: 163.36;
+    }
+
+    .progress-text {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 14px;
+      font-weight: 600;
+      color: #333;
+      font-family: var(--font-family);
+    }
+
+    .status-text {
+      font-size: 13px;
+      font-weight: 500;
+      color: #333;
+      margin-bottom: 6px;
+    }
+
+    .file-name {
+      font-size: 11px;
+      color: #666;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 220px;
+      margin: 0 auto;
+    }
+
+    .spinner {
+      width: 24px;
+      height: 24px;
+      border: 3px solid #f3f3f3;
+      border-top: 3px solid #007bff;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin: 0 auto 12px;
+    }
+
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    .success-icon {
+      width: 60px;
+      height: 60px;
+      margin: 0 auto 12px;
+      border-radius: 50%;
+      background: #28a745;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      animation: scaleIn 0.3s ease-out;
+    }
+
+    .success-icon::after {
+      content: "✓";
+      font-size: 30px;
+      color: white;
+      font-weight: bold;
+    }
+
+    @keyframes scaleIn {
+      from {
+        transform: scale(0);
+      }
+      to {
+        transform: scale(1);
+      }
+    }
+
+    .error-icon {
+      width: 60px;
+      height: 60px;
+      margin: 0 auto 12px;
+      border-radius: 50%;
+      background: #dc3545;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      animation: scaleIn 0.3s ease-out;
+    }
+
+    .error-icon::after {
+      content: "✕";
+      font-size: 30px;
+      color: white;
+      font-weight: bold;
+    }
+  `,u.properties={isVisible:{type:Boolean},fileName:{type:String},status:{type:String},progress:{type:Number},timeElapsed:{type:Number}},customElements.define("cdtr-upload-progress-monitor",u);var f=s(18396),m=s(13681);class g extends i.WF{constructor(){super(),this.sortBy="ASC",this.files=[],this.folders=[],this.uploadStatus={},this.onSearch=this.onSearch.bind(this),this.close=this.close.bind(this),this.reset=this.reset.bind(this);const e=new f.A;this.eventEmitter=e;const t=o.M.get("config","editor","configure","mediaGalleryManager");e.files=this.files,e.close=this.close,"function"==typeof t&&(e.render=this.reset,console.log("init mediaGalleryManager"),t(e)),this.reset()}reset(){this.dirId=null,this.eventEmitter.dispatch("load-folders",{resolve:e=>{this.folders=e}}),this.eventEmitter.dispatch("load-files",{resolve:e=>{this.files=[...e]}})}uploadFile(e){this.folders||(this.folders=[]);const t=e.detail,s=this.folders.find(e=>e.selected),i=`${t.name}-${Date.now()}`;this.uploadStatus[i]={fileName:t.name,status:"uploading",progress:0,error:null},console.log("Dispatching cdtr-upload-start event for:",t.name),this.dispatchEvent(new CustomEvent("cdtr-upload-start",{detail:{uploadId:i,fileName:t.name,file:t},bubbles:!0,composed:!0})),console.log("Event dispatched"),this.eventEmitter.dispatch("upload-file",{file:t,dirId:s?s.id:null,uploadId:i,execCommand:(e,t)=>{o.M.get("editor").store().execCommand(e,t)},options:{},onProgress:e=>{this.uploadStatus[i]&&(this.uploadStatus[i].progress=e,this.requestUpdate("uploadStatus"),this.dispatchEvent(new CustomEvent("upload-progress",{detail:{uploadId:i,fileName:t.name,progress:e},bubbles:!0,composed:!0})))},onComplete:e=>{this.uploadStatus[i]&&(this.uploadStatus[i].status="completed",this.uploadStatus[i].progress=100,this.requestUpdate("uploadStatus"),this.dispatchEvent(new CustomEvent("cdtr-upload-complete",{detail:{uploadId:i,fileName:t.name,result:e},bubbles:!0,composed:!0})),setTimeout(()=>{delete this.uploadStatus[i],this.requestUpdate("uploadStatus")},3e3))},onError:e=>{this.uploadStatus[i]&&(this.uploadStatus[i].status="error",this.uploadStatus[i].error=e,this.requestUpdate("uploadStatus"),this.dispatchEvent(new CustomEvent("cdtr-upload-error",{detail:{uploadId:i,fileName:t.name,error:e},bubbles:!0,composed:!0})),setTimeout(()=>{delete this.uploadStatus[i],this.requestUpdate("uploadStatus")},5e3))}}),this.opened=!1}onSearch(e){const{value:t,isLiked:s}=e.detail;s?this.eventEmitter.dispatch("load-files",{isLiked:s,resolve:e=>{Array.isArray(e)?this.files=[...e]:console.error("files is not array",e)}}):t.trim().length>2?this.eventEmitter.dispatch("load-files",{filter:"name",search:t,resolve:e=>{this.files=[...e]}}):0===t.trim().length&&this.reset()}onFilter(e){const t=e.detail;this.eventEmitter.dispatch("load-files",{filter:"name",search:t.value})}onSelectFolder(e){const t=e.detail,s=this.sortBy,i=t.id;this.dirId=i,this.eventEmitter.dispatch("load-files",{filter:"dir",dirId:i,sortBy:s,resolve:e=>{this.files=e}})}oncreateNewFolder(e){const t=e.detail;this.eventEmitter.dispatch("create-folder",{name:t,resolve:e=>{this.folders||(this.folders=[]);const t=[...this.folders];t.forEach(e=>e.selected=!1),e.selected=!0,t.unshift(e),this.folders=t,this.onSelectFolder({detail:e})}})}onMoveFile(e){const t=e.detail;this.eventEmitter.dispatch("on-move-file",{data:t,resolve:e=>{if(this.folders||(this.folders=[]),this.dirId===t.folderId)return;const s=this.files.findIndex(e=>e.id===t.fileId);if(-1!==s){const e=[...this.files];e[s].moved=!0,this.files=e}const i=this.folders.findIndex(e=>e.id===t.folderId);if(-1!==i){const e=[...this.folders];e[i].file_count+=1,this.folders=e}}})}onLike(e){const t=e.detail;this.eventEmitter.dispatch("on-like",{fileId:t.id,resolve:e=>{const s=this.files.findIndex(e=>e.id===t.id);if(-1!==s){const e=[...this.files];e[s].isLiked=!e[s].isLiked,this.files=e}}})}onselectFile(e){const t={detail:e.detail,bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("file",t))}close(){this.dispatchEvent(new CustomEvent("close",{}))}onDleteFile(e){const t=e.detail;this.eventEmitter.dispatch("delete-file",{id:t.id,type:"image",resolve:e=>{const s=this.files.findIndex(e=>e.id===t.id);if(-1!==s){const e=[...this.files];e.splice(s,1),this.files=e}}})}onLoadMore(){this.eventEmitter.dispatch("lazy-load-files-on-scroll",{resolve:e=>{if(Array.isArray(e)&&e.length>0){const t=[...this.files,...e];this.files=t}}})}onDeleteFolder(e){const t=e.detail;this.eventEmitter.dispatch("delete-folder",{id:t.id,resolve:e=>{this.folders||(this.folders=[]);const s=this.folders.findIndex(e=>e.id===t.id);if(-1!==s){const e=[...this.folders];e.splice(s,1),this.folders=e}}})}connectedCallback(){super.connectedCallback(),m.vP.on("on:upload-file","gallery:on:upload-file",async e=>{let{image:t,type:s}=e;if("base64"===s){const e=t.split(",")[1]||t,s=atob(e),i=new Array(s.length);for(let e=0;e<s.length;e++)i[e]=s.charCodeAt(e);const r=new Uint8Array(i),o=new Blob([r],{type:"image/png"}),l=new File([o],"uploaded-image.png",{type:"image/png"});this.uploadFile({detail:l})}else if("url"===s){const e=await fetch(t),s=await e.blob(),i=new File([s],"uploaded-image.png",{type:s.type||"image/png"});this.uploadFile({detail:i})}})}render(){return i.qy` 
+      <cdtr-upload-loading></cdtr-upload-loading>
+      <cdtr-upload-progress-monitor></cdtr-upload-progress-monitor>
+      <cdtr-drawer
+        @close=${this.close}
+        width="50vw"
+        .opened=${this.opened}
+      >
+        <cdtr-gallery-files
+          @loadMore=${this.onLoadMore}
+          @deleteFile=${this.onDleteFile}
+          @deleteFolder=${this.onDeleteFolder}
+          @like=${this.onLike}
+          @newFolder=${this.oncreateNewFolder}
+          @moveFile=${this.onMoveFile}
+          @file=${this.onselectFile}
+          @filter=${this.onFilter}
+          @folder=${this.onSelectFolder}
+          @search=${this.onSearch}
+          @reset=${this.reset}
+          @upload=${this.uploadFile}
+          .nextUrl=${this.nextUrl}
+          .prevUrl=${this.prevUrl}
+          .pageCount=${this.pageCount}
+          .files=${this.files}
+          .multi=${this.multi}
+          .folders=${this.folders}
+        ></cdtr-gallery-files>
+      </cdtr-drawer>`}}g.styles=i.AH``,g.properties={folders:{type:Array},files:{type:Array},pageCount:{type:Number},prevUrl:{type:String},nextUrl:{type:String},opened:{type:Boolean},multi:{type:Boolean},uploadStatus:{type:Object}},customElements.define("cdtr-gallery",g)},2590(e,t,s){s.r(t),s.d(t,{TitleEditor:()=>o});var i=s(59929),r=s(86319);class o extends i.WF{constructor(){super(),this.text="",this.whiteSpace="pre"}connectedCallback(){super.connectedCallback(),this.style.fontFamily="var(--font-family)",this.bold&&(this.style.fontWeight="bold")}render(){const e=r.M.get("theme");e&&(this.style.direction=e.direction,this.style.textAlign=this.textAlign||e.textAlign);const t=r.M.get("lang",this.text);return i.qy`<slot
+      ><span
+        style="-webkit-font-smoothing: antialiased;text-transform:capitalize;
+display:inline-block;direction:var(--direction-locale);text-align:var(--text-align-locale);white-space:${this.whiteSpace}"
+        >${t||this.text}</span
+      ></slot
+    >`}}o.properties={text:{type:String,reflect:!1},whiteSpace:{type:String},textAlign:{type:String},bold:{type:Boolean}},customElements.get("lang-text")||customElements.define("lang-text",o)},13681(e,t,s){s.d(t,{vP:()=>c});const i=window.cdtrSignalKey||`___${Math.random().toString(36).substr(2,9)}`;window.cdtrSignalKey=i,window[i]||(window[i]={});const r=window[i],o=window.__cdtrEvents||{};function l(e){return crypto.subtle.digest("SHA-256",(new TextEncoder).encode(e)).then(e=>Array.from(new Uint8Array(e)).map(e=>e.toString(16).padStart(2,"0")).join(""))}function a(e){if(e.length%2!=0)throw new Error("Invalid hex string");const t=new Uint8Array(e.length/2);for(let s=0;s<e.length;s+=2)t[s/2]=parseInt(e.substr(s,2),16);return t}async function n(e){const t=await l(e),s=r[t];if(s){const e=await crypto.subtle.importKey("raw",a(t),{name:"AES-GCM"},!1,["encrypt","decrypt"]),i=await async function(e,t,s){const i=await crypto.subtle.decrypt({name:"AES-GCM",iv:t},e,s);return(new TextDecoder).decode(i)}(e,s.iv,s.encrypted);return JSON.parse(i)}return null}function d(e,t){if(o[e])for(const s in o[e])Object.prototype.hasOwnProperty.call(o[e],s)&&o[e][s].forEach(e=>e(t));Array.isArray(o["*"])&&o["*"].forEach(e=>e(t))}window.__cdtrEvents=o;const c={set:async function(e,t){const s=JSON.parse(JSON.stringify(t)),i=await l(e),n=await crypto.subtle.importKey("raw",a(i),{name:"AES-GCM"},!1,["encrypt","decrypt"]),c=await async function(e,t){const s=crypto.getRandomValues(new Uint8Array(12)),i=(new TextEncoder).encode(t),r=await crypto.subtle.encrypt({name:"AES-GCM",iv:s},e,i);return{iv:s,encrypted:new Uint8Array(r)}}(n,JSON.stringify(s));r[i]=c,o.set&&o.set[i]&&o.set[i].forEach(e=>e(s)),Array.isArray(o["*"])&&o["*"].forEach(e=>e(s)),d(e,s)},get:n,remove:async function(e){const t=await l(e);delete r[t]},on:async function(e,t,s){o[e]||(o[e]={});const i=await l(t);o[e][i]||(o[e][i]=[]),o[e][i].push(e=>{!function(){const e=(new Error).stack;if(e&&e.indexOf(" at <anonymous>:1")>-1)throw console.warn("Function call blocked: Detected console execution."),new Error("Function call blocked: Detected console execution.")}(),s(e)});const r=await n(t);return r&&s(r),i},off:function(e,t){o[e]&&o[e][t]&&delete o[e][t]},dispatch:d,OPTIONS:{SET:"set"}}}}]);