image-salon-sdk 1.0.78 → 1.0.79

package/dist/image-salon.d.ts

@@ -25,6 +25,7 @@ declare class ImageSalon {
     private _renderImageErrorContainer;
     private _renderImageLoadingContainer;
     private _renderRemovePreviewBtn;
+    private _showInitialPreview;
     private _readFileAsBase64;
     private _renderUserToast;
     private _removeUserToast;

package/dist/style.css

@@ -1 +1 @@
-.browse-container{width:100%;display:flex;margin:auto}.folder-container{border-right:solid 1px rgba(0,0,0,.05);min-width:18rem;width:100px;background:#0000000d;display:flex;flex-direction:column}.folder-list-wrapper{width:100%;height:714px;max-height:714px;overflow-y:auto;order:2;flex:1}.folder-option-btn{background:transparent;border:none;margin-left:auto;padding-right:8px;cursor:pointer;position:absolute;top:5px;right:5px}.folder-action{order:3;display:flex;gap:10px;justify-content:flex-start;align-items:center;padding:10px;border-top:solid 1px rgba(0,0,0,.05)}.folder-action-btn{padding:0;margin:0;cursor:pointer;border:0}.folder-action-btn:hover{opacity:.8}.folders{list-style:none;margin:0;padding:0}.folder,.folder-move{text-align:left;cursor:pointer}.folder>div,.folder-move>div{padding-left:1rem;padding-block:5px}.folders.nested{display:none;padding-left:0}.folders.nested.visible li.folder>div,.folders.nested.visible li.folder-move>div{position:relative;padding-left:20px}.folders.nested.visible li.folder>div:before,.folders.nested.visible li.folder-move>div:before{content:"";position:absolute;top:0;left:15px;width:10px;height:20px;border-left:solid 1px rgba(0,0,0,.5);border-bottom:solid 1px rgba(0,0,0,.5);border-radius:0 0 0 2px;z-index:-1}.folder .folders.nested.visible,.folder-move .folders.nested.visible{display:block}.folder.active>div>button>svg,.folder-move.active>div>button>svg{transform:rotate(90deg)}.folder.active .folder-option-btn>svg,.folder-move.active .folder-option-btn>svg{transform:none}.folder-option-btn:hover{opacity:.5}.folders.nested li.folder,.folders.nested li.folder-move{font-size:.95rem;padding-left:30px}.folders.nested li.folder>div,.folders.nested li.folder-move>div{padding-block:5px}.folder-name{font-size:1rem;padding-left:4px}.folder.selected>div,.folder-move.selected>div,.folder .folders.nested li div.selected,.folder-move .folders.nested li div.selected{background:#0000001a}.folder>div:hover,.folder-move>div:hover{background:#00000014}.add-folder-btn{border:0;cursor:pointer}.add-folder-btn:hover{opacity:.6}.expand-icon{border:0;outline:none;cursor:pointer;background:transparent;padding:0}.expand-icon:hover{opacity:.5}.container-right-main{width:100%;padding:2rem 3rem}.user-view-container{overflow:hidden;border:2px dashed #d1d5db;border-radius:4px;padding:20px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.user-view-container.highlight{border:2px dashed #2c96f8;background-color:#e0f2fe;transition:all ease-in-out .2s}.user-view-browse-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}.user-view-image-container{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;margin:20px 0;background-color:#00000012;padding:20px;border:8px}.user-view-image-container .user-view-image-button{position:absolute;top:-10px;right:-15px;cursor:pointer;outline:none;border:none;background-color:#0000}.user-view-image-button svg{padding:3px;fill:#fff;background-color:red;border:8px;width:15px;height:15px}.user-view-image-wrapper{position:relative;gap:10px;border-radius:100%;width:200px;height:200px}.user-view-image-wrapper .user-view-image{position:absolute;height:100%;width:100%;border-radius:100%;top:0;right:0;bottom:0;left:0;object-fit:cover}.browse-options{margin-top:10px;justify-content:space-between;align-items:center}.browse-options,.select-options{display:flex;gap:20px}.browse-options p,.select-options .select{font-size:16px;position:relative;padding-block:10px;cursor:pointer;transition:color .25s ease-in-out;text-transform:uppercase}.select-options .select{padding-block:5px!important;padding-inline:10px;font-size:16px}.browse-options p.selected,.select-options .select.selected{color:#2c96f8}.browse-options p:after,.select-options .select:after{content:"";position:absolute;bottom:0;left:50%;width:100%;height:3px;background:#2c96f8;border-radius:4px;transform:translate(-50%) scale(0);transform-origin:center;transition:transform .25s ease-in-out}.browse-options p.selected:after{transform:translate(-50%) scale(1)}.select-options .select.selected:after{transform:translate(-50%) scale(1)}.browse-options p:not(.selected):hover{color:#8ec8ff}.browse-image-main{display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;border:3px dashed #d1d5db;background-color:#f3f4f6;border-radius:4px;padding:20px 10px;margin-top:20px}.upload-span-text{font-size:26px;font-weight:600}.browse-image-button,.browse-more-btn,.create-folder-btn{border:none;padding:10px 15px;font-size:16px;font-weight:600;border-radius:6px;color:#fff;background-color:#2c96f8;display:flex;gap:5px;align-items:center;justify-content:center;transition:opacity .2s ease-in-out;background-color:#0284c7;cursor:pointer}.create-folder-btn{background-color:#0000001a;color:#333}.upload-btn-icon{width:60px;height:60px;opacity:10%}.browse-more-btn-container{display:flex;justify-content:space-between;align-items:center;margin-top:20px;border-bottom:solid 1px rgba(0,0,0,.05)}.choose-create-folder-wrapper{display:flex;align-items:center;gap:20px}.browse-button:hover,.browse-more-btn:hover,.create-folder-btn:hover{opacity:.8}.selected-image-container{width:100%;display:grid;grid-template-columns:repeat(6,minmax(200px,1fr));gap:10px;row-gap:30px;max-height:500px;height:500px;overflow-x:auto;padding-top:20px;padding-bottom:10px;padding-inline:10px}.no-selected-image-container{display:flex;justify-content:center;gap:10px;max-width:1250px;width:1250px;min-height:14em;font-size:1.0625rem}.no-selected-image-container>div>p{text-align:center}.selected-image-wrapper{width:200px;max-width:200px;margin:0 auto;cursor:pointer}.selected-image-wrapper p{margin-block:2px}.selected-image-content.checked{outline:2px solid #56a7f3!important;border-radius:4px}.selected-image-content{padding:5px;background:#00000012;border-radius:12px;display:flex;flex-direction:column;align-items:center}.selected-image-name{font-size:16px;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selected-image-top-bar{position:relative;anchor-name:--image-action;padding:4px 0 4px 8px;width:100%;display:flex;justify-content:space-between;align-items:center}.selected-image-type{display:flex;align-items:center;padding:4px;height:fit-content;background:#f14b4b;color:#fff;border-radius:4px}.selected-image-btn{cursor:pointer;transition:all .25s ease-in-out;background:none;border:none;outline:none}.selected-image-btn:hover{opacity:.5}.selected-image-container .selected-image,.selected-image-container .uploaded-video,.selected-image-container .uploaded-audio{width:100%;height:100%;object-fit:contain;object-position:center;aspect-ratio:16/9;border-radius:12px}.dialog-modal-close-btn:hover{opacity:.5}.action-wrapper{display:flex;flex-direction:column}.action-option{display:flex;align-items:center;gap:8px;font-size:14px;padding:8px 10px;border:none}.action-option.preview{color:#464646}.action-option.move{color:#16ad3d}.action-option.rename{color:#2c96f8}.action-option.delete{color:#f14b4b}.action-option:hover{background:#d8e2ec;cursor:pointer}.preview-header-wrapper{display:flex;align-items:center;gap:5px}.preview-details-container{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding:20px 10px}.preview-details-wrapper{display:flex;flex-direction:column;align-items:start;background:#0000000f;border-radius:14px;gap:10px;padding:14px}.preview-option-image-wrapper{position:relative;max-width:640px;max-height:640px;width:100%;height:100%;background:#1c1c1c}.preview-option-image{position:absolute;top:0;left:0;object-fit:contain;width:100%;height:100%}.preview-option-wrapper{display:flex;align-items:start;flex-direction:column;gap:6px}.preview-title{color:#000}.preview-option-name{color:#0000008c}.preview-option-name.extension{text-transform:uppercase}.loader{width:40px;height:40px;border-radius:100%;margin:100px}.upload-btn{margin-left:auto;border:0;outline:0;background:green;font-size:18px;padding:10px 20px;color:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease-in-out}.upload-btn:not(:disabled):hover{opacity:.8}.upload-btn:disabled,.browse-more-btn:disabled{background:#0006;cursor:not-allowed;pointer-events:none}.footer{display:flex;justify-content:flex-end;align-items:center;margin-top:20px;gap:10px}.edit-form-wrapper,.move-form-wrapper{display:grid;gap:10px}.form-control{display:flex;flex-direction:column;align-items:start;padding:10px;gap:10px}.input-label{font-size:16px}.folder-field.current,.folder-field.source{width:240px;min-width:200px;border:solid 1px rgba(0,0,0,.2);padding:5px 10px;border-radius:8px;text-align:left;display:flex;align-items:center;gap:10px}.input-field{border:1px solid rgba(0,0,0,.2);border-radius:4px;padding:10px 5px;width:20rem;min-width:20rem}.preview-option-name{width:210px;border:1px solid rgba(0,0,0,.2);padding:15px 10px;border-radius:4px;background:#0000000d;text-align:left}.preview-option-name{width:600px}.dialog-presentation{width:100%;height:100%}.dialog-container{position:fixed;display:grid;place-items:center;top:0;left:0;z-index:9999!important;width:inherit;height:inherit;opacity:0}.dialog-backdrop{position:absolute;top:0;left:0;background-color:#0009;height:100%;width:100%;z-index:999!important;opacity:0;pointer-events:none;transition:opacity .2s}.dialog{opacity:0;z-index:9999!important;overflow:auto;max-height:100vh;border-radius:3px;transform:scale(.8)}.dialog-header{display:flex;padding:10px}.dialog-header-text{font-weight:500;font-size:20px;margin:0;padding:0}.dialog-content{background-color:#fff;color:#000;text-align:center;box-shadow:0 0 35px #0003}.dialog-footer{display:flex;gap:10px;align-items:center;justify-content:flex-end;padding-inline:.75rem;margin-top:.5em}.dialog-btn{padding:.55rem 1.25rem;border:none;outline:none;cursor:pointer;border-radius:4px;font-size:1rem;transition:opacity .2s ease-in-out;display:flex;gap:10px;justify-content:center;align-items:center;background:none;transition:all .2s ease-in-out}.dialog-btn:hover,.dialog-close-btn:hover{opacity:.5}.dialog-btn:disabled{background:#0006;pointer-events:none}.confirm{background-color:teal;color:#fff}.cancel:hover{background-color:#0003}.dialog-close-btn{position:absolute;top:15px;right:15px;border:0!important;outline:none!important;background:transparent!important;cursor:pointer}.loader-svg{width:1.25em;transform-origin:center;animation:rotate4 2s linear infinite}.loader-circle{fill:none;stroke-width:4;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:dash4 1.5s ease-in-out infinite}.linear-loader{height:3px;border-radius:30px;background-color:#0003;position:relative}.linear-loader:before{content:"";position:absolute;background:#0071e2;top:0;left:0;width:0%;height:100%;border-radius:30px;animation:moving 1s ease-in-out infinite}@keyframes moving{50%{width:100%}to{width:0;right:0;left:unset}}@keyframes rotate4{to{transform:rotate(360deg)}}@keyframes dash4{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,200;stroke-dashoffset:-35px}to{stroke-dashoffset:-125px}}.skeleton{width:200px;height:150px;max-width:100%;border-radius:12px;position:relative;overflow:hidden;background-color:#dddbdd;display:inline-block;margin:0 auto}.skeleton.folder{width:100%;max-width:100%;height:20px;margin-top:10px}.skeleton:after{position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-100%);background-image:linear-gradient(90deg,#fff0 0,#fff3 20%,#ffffff80,#fff0);animation:shimmer 2s infinite;content:""}@keyframes shimmer{to{transform:translate(100%)}}.message-container{position:absolute;bottom:25px;left:20%;padding:10px 15px;border-radius:4px;display:flex;align-items:center;gap:10px;max-width:40em;font-size:1rem}.message-container p{margin:0}.message-container.success{border:solid 1px #7fd382;background:#bdffbf;color:#4caf50}.message-container.error{border:solid 1px #ffa8a8;background:#ffc7c7;color:#ee3f3f}.search-browse-container{margin-top:10px;display:flex;justify-content:space-between;align-items:center}.search-browse-container input{padding-block:.85rem;padding-left:3rem;padding-right:.5rem;border:solid 1px rgba(0,0,0,.05);background:#0000000d;font-size:1rem;border-radius:4px;width:100%;transition:all .25s ease-in-out}.search-browse-container input:focus-visible{outline:none;background:#fff;box-shadow:0 0 5px -1px #000000a8;-webkit-box-shadow:0px 0px 5px -1px rgba(0,0,0,.66);-moz-box-shadow:0px 0px 5px -1px rgba(0,0,0,.66)}.search-input-wrapper{position:relative}.uploading{display:block}.popover{position:absolute;gap:10px;align-items:start;padding-block:2px;justify-content:start;width:max-content;top:0;right:4px;z-index:12000;opacity:1;border-radius:4px;transition:opacity .2s;background:#fff;font-size:1rem;border:solid 1px rgba(0,0,0,.1);box-shadow:1px 1px 2px #0000004d;-webkit-box-shadow:1px 1px 2px 0px rgba(0,0,0,.3);-moz-box-shadow:1px 1px 2px 0px rgba(0,0,0,.3)}.user-image-preview{position:relative}.user-upload-btn{text-decoration:underline;color:#1447e6;cursor:pointer;font-weight:500}.user-upload-btn:hover{opacity:.8}@media screen and (max-width: 1280px){.browse-image-main{min-width:800px}.selected-image-container{grid-template-columns:repeat(4,1fr)}.no-selected-image-container{max-width:830px;width:830px}}@media screen and (max-width: 768px){.browse-image-main{min-width:400px}.selected-image-container{grid-template-columns:repeat(2,1fr)}.no-selected-image-container{max-width:410px;width:410px}.folder-container{min-width:15rem}}@media screen and (max-width: 768px){.browse-more-btn{padding:10px 12px;font-size:13px}.browse-more-btn>svg{width:18px;height:18px}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
+.browse-container{width:80vw;display:flex;margin:auto}.folder-container{border-right:solid 1px rgba(0,0,0,.05);min-width:18rem;width:100px;background:#0000000d;display:flex;flex-direction:column}.folder-list-wrapper{width:100%;height:714px;max-height:714px;overflow-y:auto;order:2;flex:1}.folder-option-btn{background:transparent;border:none;margin-left:auto;padding-right:8px;cursor:pointer;position:absolute;top:5px;right:5px}.folder-action{order:3;display:flex;gap:10px;justify-content:flex-start;align-items:center;padding:10px;border-top:solid 1px rgba(0,0,0,.05)}.folder-action-btn{padding:0;margin:0;cursor:pointer;border:0}.folder-action-btn:hover{opacity:.8}.folders{list-style:none;margin:0;padding:0}.folder,.folder-move{text-align:left;cursor:pointer}.folder>div,.folder-move>div{padding-left:1rem;padding-block:5px}.folders.nested{display:none;padding-left:0}.folders.nested.visible li.folder>div,.folders.nested.visible li.folder-move>div{position:relative;padding-left:20px}.folders.nested.visible li.folder>div:before,.folders.nested.visible li.folder-move>div:before{content:"";position:absolute;top:0;left:15px;width:10px;height:20px;border-left:solid 1px rgba(0,0,0,.5);border-bottom:solid 1px rgba(0,0,0,.5);border-radius:0 0 0 2px;z-index:-1}.folder .folders.nested.visible,.folder-move .folders.nested.visible{display:block}.folder.active>div>button>svg,.folder-move.active>div>button>svg{transform:rotate(90deg)}.folder.active .folder-option-btn>svg,.folder-move.active .folder-option-btn>svg{transform:none}.folder-option-btn:hover{opacity:.5}.folders.nested li.folder,.folders.nested li.folder-move{font-size:.95rem;padding-left:30px}.folders.nested li.folder>div,.folders.nested li.folder-move>div{padding-block:5px}.folder-name{font-size:1rem;padding-left:4px}.folder.selected>div,.folder-move.selected>div,.folder .folders.nested li div.selected,.folder-move .folders.nested li div.selected{background:#0000001a}.folder>div:hover,.folder-move>div:hover{background:#00000014}.add-folder-btn{border:0;cursor:pointer}.add-folder-btn:hover{opacity:.6}.expand-icon{border:0;outline:none;cursor:pointer;background:transparent;padding:0}.expand-icon:hover{opacity:.5}.container-right-main{width:100%;padding:2rem 3rem}.user-view-container{overflow:hidden;border:2px dashed #d1d5db;border-radius:4px;padding:20px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.user-view-container.highlight{border:2px dashed #2c96f8;background-color:#e0f2fe;transition:all ease-in-out .2s}.user-view-browse-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}.user-view-image-container{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;margin:20px 0;background-color:#00000012;padding:20px;border:8px}.user-view-image-container .user-view-image-button{position:absolute;top:-10px;right:-15px;cursor:pointer;outline:none;border:none;background-color:#0000}.user-view-image-button svg{padding:3px;fill:#fff;background-color:red;border:8px;width:15px;height:15px}.user-view-image-wrapper{position:relative;gap:10px;border-radius:100%;width:200px;height:200px}.user-view-image-wrapper .user-view-image{position:absolute;height:100%;width:100%;border-radius:100%;top:0;right:0;bottom:0;left:0;object-fit:cover}.browse-options{margin-top:10px;justify-content:space-between;align-items:center}.browse-options,.select-options{display:flex;gap:20px}.browse-options p,.select-options .select{font-size:16px;position:relative;padding-block:10px;cursor:pointer;transition:color .25s ease-in-out;text-transform:uppercase}.select-options .select{padding-block:5px!important;padding-inline:10px;font-size:16px}.browse-options p.selected,.select-options .select.selected{color:#2c96f8}.browse-options p:after,.select-options .select:after{content:"";position:absolute;bottom:0;left:50%;width:100%;height:3px;background:#2c96f8;border-radius:4px;transform:translate(-50%) scale(0);transform-origin:center;transition:transform .25s ease-in-out}.browse-options p.selected:after{transform:translate(-50%) scale(1)}.select-options .select.selected:after{transform:translate(-50%) scale(1)}.browse-options p:not(.selected):hover{color:#8ec8ff}.browse-image-main{display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;border:3px dashed #d1d5db;background-color:#f3f4f6;border-radius:4px;padding:20px 10px;margin-top:20px}.upload-span-text{font-size:26px;font-weight:600}.browse-image-button,.browse-more-btn,.create-folder-btn{border:none;padding:10px 15px;font-size:16px;font-weight:600;border-radius:6px;color:#fff;background-color:#2c96f8;display:flex;gap:5px;align-items:center;justify-content:center;transition:opacity .2s ease-in-out;background-color:#0284c7;cursor:pointer}.create-folder-btn{background-color:#0000001a;color:#333}.upload-btn-icon{width:60px;height:60px;opacity:10%}.browse-more-btn-container{display:flex;justify-content:space-between;align-items:center;margin-top:20px;border-bottom:solid 1px rgba(0,0,0,.05)}.choose-create-folder-wrapper{display:flex;align-items:center;gap:20px}.browse-button:hover,.browse-more-btn:hover,.create-folder-btn:hover{opacity:.8}.selected-image-container{width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;row-gap:30px;max-height:500px;height:500px;overflow-x:auto;padding-top:20px;padding-bottom:10px;padding-inline:10px}.no-selected-image-container{display:flex;justify-content:center;gap:10px;max-width:1250px;width:1250px;min-height:14em;font-size:1.0625rem}.no-selected-image-container>div>p{text-align:center}.selected-image-wrapper{width:200px;max-width:200px;margin:0 auto;cursor:pointer}.selected-image-wrapper p{margin-block:2px}.selected-image-content.checked{outline:2px solid #56a7f3!important;border-radius:4px}.selected-image-content{padding:5px;background:#00000012;border-radius:12px;display:flex;flex-direction:column;align-items:center}.selected-image-name{font-size:16px;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selected-image-top-bar{position:relative;anchor-name:--image-action;padding:4px 0 4px 8px;width:100%;display:flex;justify-content:space-between;align-items:center}.selected-image-type{display:flex;align-items:center;padding:4px;height:fit-content;background:#f14b4b;color:#fff;border-radius:4px}.selected-image-btn{cursor:pointer;transition:all .25s ease-in-out;background:none;border:none;outline:none}.selected-image-btn:hover{opacity:.5}.selected-image-container .selected-image,.selected-image-container .uploaded-video,.selected-image-container .uploaded-audio{width:100%;height:100%;object-fit:contain;object-position:center;aspect-ratio:16/9;border-radius:12px}.dialog-modal-close-btn:hover{opacity:.5}.action-wrapper{display:flex;flex-direction:column}.action-option{display:flex;align-items:center;gap:8px;font-size:14px;padding:8px 10px;border:none}.action-option.preview{color:#464646}.action-option.move{color:#16ad3d}.action-option.rename{color:#2c96f8}.action-option.delete{color:#f14b4b}.action-option:hover{background:#d8e2ec;cursor:pointer}.preview-header-wrapper{display:flex;align-items:center;gap:5px}.preview-details-container{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding:20px 10px}.preview-details-wrapper{display:flex;flex-direction:column;align-items:start;background:#0000000f;border-radius:14px;gap:10px;padding:14px}.preview-option-image-wrapper{position:relative;max-width:640px;max-height:640px;width:100%;height:100%;background:#1c1c1c}.preview-option-image{position:absolute;top:0;left:0;object-fit:contain;width:100%;height:100%}.preview-option-wrapper{display:flex;align-items:start;flex-direction:column;gap:6px}.preview-title{color:#000}.preview-option-name{color:#0000008c}.preview-option-name.extension{text-transform:uppercase}.loader{width:40px;height:40px;border-radius:100%;margin:100px}.upload-btn{margin-left:auto;border:0;outline:0;background:green;font-size:18px;padding:10px 20px;color:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease-in-out}.upload-btn:not(:disabled):hover{opacity:.8}.upload-btn:disabled,.browse-more-btn:disabled{background:#0006;cursor:not-allowed;pointer-events:none}.footer{display:flex;justify-content:flex-end;align-items:center;margin-top:20px;gap:10px}.edit-form-wrapper,.move-form-wrapper{display:grid;gap:10px}.form-control{display:flex;flex-direction:column;align-items:start;padding:10px;gap:10px}.input-label{font-size:16px}.folder-field.current,.folder-field.source{width:240px;min-width:200px;border:solid 1px rgba(0,0,0,.2);padding:5px 10px;border-radius:8px;text-align:left;display:flex;align-items:center;gap:10px}.input-field{border:1px solid rgba(0,0,0,.2);border-radius:4px;padding:10px 5px;width:20rem;min-width:20rem}.preview-option-name{width:210px;border:1px solid rgba(0,0,0,.2);padding:15px 10px;border-radius:4px;background:#0000000d;text-align:left}.preview-option-name{width:600px}.dialog-presentation{width:100%;height:100%}.dialog-container{position:fixed;display:grid;place-items:center;top:0;left:0;z-index:9999!important;width:inherit;height:inherit;opacity:0}.dialog-backdrop{position:absolute;top:0;left:0;background-color:#0009;height:100%;width:100%;z-index:999!important;opacity:0;pointer-events:none;transition:opacity .2s}.dialog{opacity:0;z-index:9999!important;overflow:auto;max-height:100vh;border-radius:3px;transform:scale(.8)}.dialog-header{display:flex;padding:10px}.dialog-header-text{font-weight:500;font-size:20px;margin:0;padding:0}.dialog-content{background-color:#fff;color:#000;text-align:center;box-shadow:0 0 35px #0003}.dialog-footer{display:flex;gap:10px;align-items:center;justify-content:flex-end;padding-inline:.75rem;margin-top:.5em}.dialog-btn{padding:.55rem 1.25rem;border:none;outline:none;cursor:pointer;border-radius:4px;font-size:1rem;transition:opacity .2s ease-in-out;display:flex;gap:10px;justify-content:center;align-items:center;background:none;transition:all .2s ease-in-out}.dialog-btn:hover,.dialog-close-btn:hover{opacity:.5}.dialog-btn:disabled{background:#0006;pointer-events:none}.confirm{background-color:teal;color:#fff}.cancel:hover{background-color:#0003}.dialog-close-btn{position:absolute;top:15px;right:15px;border:0!important;outline:none!important;background:transparent!important;cursor:pointer}.loader-svg{width:1.25em;transform-origin:center;animation:rotate4 2s linear infinite}.loader-circle{fill:none;stroke-width:4;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:dash4 1.5s ease-in-out infinite}.linear-loader{height:3px;border-radius:30px;background-color:#0003;position:relative}.linear-loader:before{content:"";position:absolute;background:#0071e2;top:0;left:0;width:0%;height:100%;border-radius:30px;animation:moving 1s ease-in-out infinite}@keyframes moving{50%{width:100%}to{width:0;right:0;left:unset}}@keyframes rotate4{to{transform:rotate(360deg)}}@keyframes dash4{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,200;stroke-dashoffset:-35px}to{stroke-dashoffset:-125px}}.skeleton{width:200px;height:150px;max-width:100%;border-radius:12px;position:relative;overflow:hidden;background-color:#dddbdd;display:inline-block;margin:0 auto}.skeleton.folder{width:100%;max-width:100%;height:20px;margin-top:10px}.skeleton:after{position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-100%);background-image:linear-gradient(90deg,#fff0 0,#fff3 20%,#ffffff80,#fff0);animation:shimmer 2s infinite;content:""}@keyframes shimmer{to{transform:translate(100%)}}.message-container{position:absolute;bottom:25px;left:20%;padding:10px 15px;border-radius:4px;display:flex;align-items:center;gap:10px;max-width:40em;font-size:1rem}.message-container p{margin:0}.message-container.success{border:solid 1px #7fd382;background:#bdffbf;color:#4caf50}.message-container.error{border:solid 1px #ffa8a8;background:#ffc7c7;color:#ee3f3f}.search-browse-container{margin-top:10px;display:flex;justify-content:space-between;align-items:center}.search-browse-container input{padding-block:.85rem;padding-left:3rem;padding-right:.5rem;border:solid 1px rgba(0,0,0,.05);background:#0000000d;font-size:1rem;border-radius:4px;width:100%;transition:all .25s ease-in-out}.search-browse-container input:focus-visible{outline:none;background:#fff;box-shadow:0 0 5px -1px #000000a8;-webkit-box-shadow:0px 0px 5px -1px rgba(0,0,0,.66);-moz-box-shadow:0px 0px 5px -1px rgba(0,0,0,.66)}.search-input-wrapper{position:relative}.uploading{display:block}.popover{position:absolute;gap:10px;align-items:start;padding-block:2px;justify-content:start;width:max-content;top:0;right:4px;z-index:12000;opacity:1;border-radius:4px;transition:opacity .2s;background:#fff;font-size:1rem;border:solid 1px rgba(0,0,0,.1);box-shadow:1px 1px 2px #0000004d;-webkit-box-shadow:1px 1px 2px 0px rgba(0,0,0,.3);-moz-box-shadow:1px 1px 2px 0px rgba(0,0,0,.3)}.user-image-preview{position:relative}.user-upload-btn{text-decoration:underline;color:#1447e6;cursor:pointer;font-weight:500}.user-upload-btn:hover{opacity:.8}@media screen and (max-width: 1280px){.no-selected-image-container{max-width:830px;width:830px}}@media screen and (max-width: 768px){.browse-image-main{min-width:400px}.no-selected-image-container{max-width:410px;width:410px}.folder-container{min-width:15rem}}@media screen and (max-width: 768px){.browse-more-btn{padding:10px 12px;font-size:13px}.browse-more-btn>svg{width:18px;height:18px}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}

package/dist/types/image-salon-types.d.ts

@@ -6,6 +6,7 @@ export interface AdminOptionsProps extends OptionsProps {
 }
 export interface UserOptionsProps extends OptionsProps {
     isAdmin: false;
+    uploadText?: string;
     imagePreview?: string;
     localizedFileRestrictedMessage?: string;
     localizedSuccessMessage?: string;

package/package.json

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