@aquera/nile-elements 0.1.58-beta-1.0 → 0.1.59-beta-1.0

package/dist/nile-file-preview/nile-file-preview.css.esm.js

@@ -0,0 +1,594 @@
+import{css as e}from"lit";const r=e`
+  :host {
+    display: inline-block;
+  }
+
+  * {
+    padding: 0px;
+    margin: 0px;
+    box-sizing: border-box;
+  }
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 18px;
+    height: auto;
+  }
+
+  input {
+    display: none;
+  }
+
+  .horizontal-div {
+    max-height: 62px;
+    width: 648px;
+    min-width: 230px;
+    padding: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 18px;
+    border-radius: var(--nile-radius-radius-xs);
+    border: 1px dashed var(--nile-colors-neutral-500);
+    color: var(--nile-colors-dark-900);
+    background-color: var(--nile-colors-white-base);
+  }
+  
+  .hover-state {
+    border-color: var(--nile-colors-primary-600);
+  }
+
+  .vertical-div {
+    height: auto;
+    min-height: 156px;
+    min-width: 240px;
+    width: 240px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    gap: 18px;
+    padding: 12px;
+    border-radius: var(--nile-radius-radius-xs);
+    color: var(--nile-colors-dark-900);
+    border: 1px dashed var(--nile-colors-neutral-500);
+    background-color: var(--nile-colors-white-base);
+    position: relative; 
+    margin-bottom: 10px;
+  }
+
+  .vertical-div:hover {
+    border-color: var(--nile-colors-blue-500);
+  }
+
+  .outer-div-border {
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  .inner-div {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 18px;
+    box-sizing: border-box;
+  }
+
+  .icons-container {
+    display: flex;
+    gap: 4px;
+  }
+
+  .general-icon {
+    transform: rotate(-18.11deg);
+    position: relative;
+    bottom: 3px;
+  }
+
+  .image-icon {
+    transform: rotate(15deg);
+  }
+
+  .icon:hover {
+    cursor: pointer;
+  }
+
+  /* Uploading State */
+  .uploading {
+    height: 62px;
+    width: 648px;
+    padding: 12px;
+    min-width: 230px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 18px;
+    box-sizing: border-box;
+    border: 1px solid var(--nile-colors-neutral-400);
+    border-radius: 4px;
+    background-color: var(--nile-colors-white-base);
+  }
+  
+  .uploading:hover {
+    border-color: var(--nile-colors-neutral-400);
+  }
+
+  .progress-bar-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .progress-bar-percent {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .progress-bar-container p {
+    margin: 0px;
+  }
+
+  .progress-bar-container > p {
+    font-size: var(--nile-type-scale-1);
+    color: var(--nile-colors-dark-500);
+    text-align: left;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 222px;
+  }
+
+  .progress-bar-container .horizontal-file-name {
+    font-size: var(--nile-type-scale-1);
+    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-dark-500);
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 538px;
+  }
+  
+  .progress-bar-container .vertical-file-name {
+    font-size: var(--nile-type-scale-1);
+    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-dark-500);
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 212px;
+  }
+
+  /* PREVIEW STATE */
+  .preview {
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  .preview:hover {
+    border-color: var(--nile-colors-neutral-400);
+  }
+
+  .preview-inner {
+    display: flex;
+    gap: 18px;
+  }
+
+  .preview-image-container {
+    height: 42px;
+    width: 42px;
+  }
+
+  .preview-image-container img, iframe {
+    height: 42px;
+    width: 42px;
+    object-fit: contain;
+    border-radius: var(--nile-radius-radius-xs);
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+  
+  .preview-file-info {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .preview-file-info p {
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+    text-align: left;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 500px;
+  }
+
+  .preview-file-info p:last-of-type{
+    color: var(--nile-colors-neutral-700);
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
+    text-align: left;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 538px;
+  }
+
+  .preview nile-icon:hover {
+    cursor: pointer;
+  }
+
+  .preview-actions {
+    padding-right: 12px;
+  }
+
+  /* NO PREVIEW STATE */
+  .no-preview {
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  .no-preview:hover {
+    border-color: var(--nile-colors-neutral-400);
+  }
+
+  .no-preview-container {
+    display: flex;
+    gap: 18px;
+  }
+
+  .document-icon {
+    height: 40px;
+    width: 40px;
+    border-radius: var(--nile-radius-radius-xs);
+    padding: 2px 3px 2px 3px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid var(--nile-colors-blue-400);
+    background-color: var(--nile-colors-blue-100);
+  }
+
+  .document-icon nile-icon {
+    height: 40px;
+    width: 40px;
+  }
+  
+  .preview-file-info {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .preview-file-info p {
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .preview-file-info p:last-of-type{
+    color: var(--nile-colors-neutral-700);
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .no-preview > nile-icon:hover {
+    cursor: pointer;
+  }
+
+  /* ERROR STATE */
+  .error {
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  .error:hover {
+    border-color: var(--nile-colors-neutral-400);
+  }
+
+  .error-container {
+    width: 95%;
+    display: flex;
+    gap: 18px;
+  }
+
+  .error-icon {
+    height: 40px;
+    width: 40px;
+    border-radius: var(--nile-radius-radius-xs);
+    padding: 2px 3px 2px 3px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid var(--nile-colors-red-400);
+    background-color: var(--nile-colors-red-100);
+  }
+
+  .error-icon nile-icon {
+    height: 40px;
+    width: 40px;
+  }
+  
+  .file-info {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .file-info p {
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 538px;
+  }
+  
+  .file-info > nile-tooltip > span {
+    color: var(--nile-colors-red-700);
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
+    width: 90%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-align: left;
+  }
+
+  .error > nile-icon:hover {
+    cursor: pointer;
+  }
+
+  .file-info .horizontal-file-name {
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-dark-900);
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 538px;
+  }
+
+  /* VARTICAL STATE START */
+  /* Default State */
+  .vertical-default {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 18px
+  }
+
+  .content-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    text-align: center;
+  }
+
+  .content-container h4 {
+    font-weight: var(--nile-font-weight-regular);
+    text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 222px;
+  }
+
+  .content-container p:first-child {
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+    text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 222px;
+  }
+
+  .content-container p:last-child {
+    margin: 0px;
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-neutral-700);
+    text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 222px;
+  }
+
+  /* Drag State */
+  .vertical-drag {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap:18px;
+    font-size: var(--nile-type-scale-3);
+    color: var(--nile-colors-blue-700);
+    background-color: var(--nile-colors-blue-100);
+    border-color: var(--nile-colors-blue-500);
+  }
+
+  /* Uploading State */
+  .vertical-uploading {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  .vertical-uploading:hover {
+    border-color: var(--nile-colors-neutral-400);
+  }
+
+  .loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 40px;
+  }
+
+  .corner-icon {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+
+  /* Preview State */
+  .vertical-preview {
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  .vertical-preview:hover {
+    border-color: var(--nile-colors-neutral-400);
+  }
+
+  .image-preview {
+    border: 1px solid var(--nile-colors-neutral-400);
+    object-fit: cover;
+    width: 80px;
+    height: 80px;
+    border-radius: var(--nile-radius-radius-xs);
+  }
+
+  /* Vertical No Preview State */
+  .vertical-no-preview {
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  .vertical-no-preview:hover {
+    border-color: var(--nile-colors-neutral-400);
+  }
+
+  .vertical-document-icon {
+    height: 80px;
+    width: 80px;
+    padding: 2px 3px 2px 3px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--nile-radius-radius-xs);
+    border: 1px solid var(--nile-colors-blue-400);
+    background-color: var(--nile-colors-blue-100);
+  }
+
+  /* Veritcal Error State */
+  .vertical-error {
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  .vertical-error:hover {
+    border-color: var(--nile-colors-neutral-400);
+  }
+
+  .error-bg {
+    background-color: var(--nile-colors-red-100);
+    border: 1px solid var(--nile-colors-red-400);
+  }
+
+  .file-info-vertical-state {
+    width: 100%;
+    text-align: center;
+  }
+
+  .file-info-vertical-state p {
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+    padding-bottom: 6px;
+    text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 222px;
+  }
+  
+  .file-info-vertical-state > nile-tooltip > span {
+    color: var(--nile-colors-red-700);
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
+    text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: block;
+    width: 212px;
+  }
+
+  .error-message {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+    text-align: center
+  }
+
+  .error-p {
+    color: var(--nile-colors-red-700);
+    font-size: var(--nile-type-scale-2);
+    width: 216px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+  }
+
+  .error-p p {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0;
+  }
+
+
+  /* Displaing uploaded files CSS */
+  .display-files {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 8px;
+    width: 648px;
+    min-width: 230px;
+    max-height: 200px;
+    overflow-y: auto;
+    border: 1px solid var(--nile-colors-neutral-700);
+    border-radius: var(--nile-radius-radius-xs);
+    scrollbar-width: none;
+    padding: 12px;
+  }
+
+  ul, li {
+    width: 100%;
+  }
+
+  li {
+    list-style-type: none;
+  }
+`;export{r as s};

package/dist/nile-file-preview/nile-file-preview.esm.js

@@ -0,0 +1,3 @@
+import{__decorate as t}from"tslib";import{s}from"./nile-file-preview.css.esm.js";import{N as i}from"../internal/nile-element.esm.js";import{property as e,customElement as h}from"lit/decorators.js";import{a,b as r}from"./utils/nile-file-preview.util.esm.js";import{F as l,a as o,b as n,c as p}from"./types/nile-file-preview.enums.esm.js";import{html as c}from"lit";import{g as m,a as d,b as f,c as u,d as y,e as v,f as w,h as g}from"./nile-file-preview.template.esm.js";let b=class extends i{constructor(){super(...arguments),this.errorMessage="",this.fileUrl="",this.uploadStatus=0,this.state=l.DEFAULT,this.variant=o.HORIZONTAL,this.inputFileName="",this.inputFileHtml=null,this.originalUrl="",this.dummyFile=new File(["sdfjbs ewhf"],"dummy.txt",{type:"text/plain"})}static get styles(){return[s]}connectedCallback(){super.connectedCallback(),this.emit(n.NILE_INIT)}firstUpdated(t){super.firstUpdated(t),a(this)}updated(t){t.has("uploadStatus")&&this.uploadStatus?this.uploadStatus<100?this.createUploadState(this.inputFile,this.uploadStatus):this.createState(this.inputFile):t.has("inputFile")&&this.inputFile?(this.createState(this.inputFile),this.emit(n.NILE_RECEIVE)):t.has("fileUrl")&&this.fileUrl?(this.handleFileUrl(this.fileUrl),this.emit(n.NILE_RECEIVE)):t.has("errorMessage")&&this.createState(this.inputFile)}createUploadState(t,s){const i=this.variant===o.HORIZONTAL;this.inputFileHtml=i?m(t,s):d(t,s),this.requestUpdate()}async handleFileUrl(t){this.originalUrl=t;try{const s=await fetch(t),i=await s.blob(),e=this.inputFileName||t.split("/").pop()||p.UNKNOWN_FILE_NAME,h=new File([i],e,{type:i.type});this.createState(h)}catch(t){const s=new File([],this.inputFileName||p.UNKNOWN_FILE_NAME,{type:"application/octet-stream"});this.errorMessage=p.FAILED_TO_LOAD,console.error(this.errorMessage),this.inputFileHtml=this.variant===o.HORIZONTAL?f(s,this.errorMessage,this.originalUrl):u(s,this.errorMessage,this.originalUrl),this.requestUpdate()}}async createState(t){const s=this.variant===o.HORIZONTAL;if(this.errorMessage)this.errorMessage=this.errorMessage?p.UPLOAD_CANCEL:p.INVALID_FORMAT,this.inputFileHtml=s?f(t,this.errorMessage,this.originalUrl):u(t,this.errorMessage,this.originalUrl);else if(t.type.startsWith("image/"))try{const i=await r(t);this.inputFileHtml=s?y(i,t,this.originalUrl):v(i,t,this.originalUrl)}catch(i){this.inputFileHtml=s?w(t,this.originalUrl):g(t,this.originalUrl)}else this.inputFileHtml=s?w(t,this.originalUrl):g(t,this.originalUrl);this.requestUpdate()}render(){return c`
+			${this.inputFileHtml?this.inputFileHtml:c``}
+    `}disconnectedCallback(){super.disconnectedCallback(),this.emit(n.NILE_DESTROY)}};t([e({type:String})],b.prototype,"errorMessage",void 0),t([e({type:Object})],b.prototype,"inputFile",void 0),t([e({type:String})],b.prototype,"fileUrl",void 0),t([e({type:Number})],b.prototype,"uploadStatus",void 0),t([e({type:String})],b.prototype,"state",void 0),t([e({type:String})],b.prototype,"variant",void 0),t([e({type:String})],b.prototype,"inputFileName",void 0),b=t([h("nile-file-preview")],b);export{b as N};

package/dist/nile-file-preview/nile-file-preview.template.cjs.js

@@ -0,0 +1,2 @@
+System.register(["./nile-file-preview.css.cjs.js","lit","./utils/nile-file-preview.util.cjs.js","./types/nile-file-preview.enums.cjs.js"],function(_export,_context){"use strict";var i,e,n,l,c,o,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,_templateObject8;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function a(n,l){return i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div class=\"uploading\" part=\"horizontal-uploading-state\">\n        <nile-loader width=\"24\" height=\"24\"></nile-loader>\n        <div class=\"progress-bar-container\">\n          <div class=\"progress-bar-percent\">\n            <p>Uploading File...</p>\n            <p>","%</p>\n          </div>\n          <nile-progress-bar\n            part=\"horizontal-progress-bar\"\n            value=\"","\"\n          ></nile-progress-bar>\n          <p class=\"horizontal-file-name\">","</p>\n        </div>\n        <slot @click="," name=\"cancelIcon\">\n          <nile-icon\n            name=\"close\"\n            size=\"14\"\n            class=\"icon\"\n          ></nile-icon>\n        </slot>\n      </div>\n    "])),l,l,n.name,function(i){return e(n,i);});}function s(e,o,a){return i(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n    <div class=\"preview horizontal-div\" part=\"horizontal-preview-state\">\n      <div class=\"preview-inner\">\n        <div class=\"preview-image-container\">\n            <img\n              class=\"image-preview\"\n              src=","\n              alt=","\n            />\n        </div>\n        <div class=\"preview-file-info\">\n          <p>","</p>\n          <p>"," &#8226; ","</p>\n        </div>\n      </div>\n      <div class=\"preview-actions\">\n        <slot @click="," name=\"cancelIcon\">\n          <nile-icon\n            name=\"trash\"\n            size=\"14\"\n            class=\"icon\"\n          ></nile-icon>\n        </slot>\n      </div>\n    </div>\n  "])),e,o.name,o.name,n(o.type),l(Number(o.size)),function(i){return c(o,i,a);});}function r(e,a){return i(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n    <div class=\"no-preview horizontal-div\" part=\"horizontal-no-preview-state\">\n      <div class=\"no-preview-container\">\n        <div class=\"document-icon\">\n          <nile-icon name=\"general\" size=\"20\" color=\"var(--nile-colors-blue-500)\"></nile-icon>\n        </div>\n        <div class=\"preview-file-info\">\n          <p>","</p>\n          <p>"," &#8226; ","</p>\n        </div>\n      </div>\n      <div>\n        <slot @click="," name=\"cancelIcon\">\n          <nile-icon\n            name=\"trash\"\n            size=\"14\"\n            class=\"icon\"\n          ></nile-icon>\n        </slot>\n      </div>\n    </div>\n  "])),o(e.name,e===null||e===void 0?void 0:e.type),n(e.type),l(Number(e.size)),function(i){return c(e,i,a);});}function t(e,n,l){return i(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n    <div class=\"error horizontal-div\" part=\"horizontal-error-state\">\n      <div class=\"error-container\">\n        <div class=\"error-icon\">\n          <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n        </div>\n        <div class=\"file-info\">\n          <p class=\"horizontal-file-name\">","</p>\n          <nile-tooltip content=",">\n            <span>","</span>\n          </nile-tooltip>\n        </div>\n      </div>\n      <slot @click="," name=\"cancelIcon\">\n          <nile-icon\n            name=\"close\"\n            size=\"14\"\n            class=\"icon\"\n          ></nile-icon>\n        </slot>\n    </div>\n  "])),e.name,n,n,function(i){return c(e,i,l);});}function v(n,l){return i(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n    <div class=\"vertical-div vertical-uploading\" part=\"vertical-uploading-state\">\n      <div class=\"loading\">\n        <nile-loader width=\"24\" height=\"24\"></nile-loader>\n      </div>\n\n      <div class=\"progress-bar-container\">\n        <div class=\"progress-bar-percent\">\n          <p>Uploading...</p>\n          <p>","%</p>\n        </div>\n        <nile-progress-bar value=","></nile-progress-bar>\n        <p class=\"vertical-file-name\">","</p>\n      </div>\n\n      <slot @click="," name=\"cancelIcon\">\n        <nile-icon\n          name=\"close\"\n          size=\"14\"\n          class=\"icon corner-icon\"\n        ></nile-icon>\n      </slot>\n    </div>\n  "])),l,l,n.name,function(i){return e(n,i);});}function p(e,o,a){return i(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["\n    <div class=\"vertical-div vertical-preview\" part=\"vertical-preview-state\">\n      <div>\n        <img\n          class=\"image-preview\"\n          src=","\n          alt=","\n        />\n      </div>\n\n      <div class=\"content-container\">\n        <p>","</p>\n         <p>"," &#8226; ","</p>\n      </div>\n\n      <slot @click="," name=\"cancelIcon\">\n        <nile-icon\n          name=\"trash\"\n          size=\"14\"\n          class=\"icon corner-icon\"\n        ></nile-icon>\n      </slot>\n    </div>\n  "])),e,o.name,o.name,n(o.type),l(Number(o.size)),function(i){return c(o,i,a);});}function d(e,a){return i(_templateObject7||(_templateObject7=_taggedTemplateLiteral(["\n    <div class=\"vertical-div vertical-no-preview\" part=\"vertical-no-preview-state\">\n      <div class=\"vertical-document-icon\">\n        <nile-icon name=\"general\" size=\"20\" color=\"var(--nile-colors-blue-500)\"></nile-icon>\n      </div>\n\n      <div class=\"content-container\">\n        <p>","</p>\n        <p>"," &#8226; ","</p>\n      </div>\n\n      <slot @click="," name=\"cancelIcon\">\n        <nile-icon\n          name=\"trash\"\n          size=\"14\"\n          class=\"icon corner-icon\"\n        ></nile-icon>\n      </slot>\n    </div>\n  "])),o(e.name,e===null||e===void 0?void 0:e.type),n(e.type),l(Number(e.size)),function(i){return c(e,i,a);});}function m(e,n,l){return i(_templateObject8||(_templateObject8=_taggedTemplateLiteral(["\n    <div class=\"vertical-div vertical-error\" part=\"vertical-error-state\">\n      <div class=\"vertical-document-icon error-bg\">\n        <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n      </div>\n\n      <div class=\"file-info-vertical-state\">\n        <p class=\"vertical-file-name\">","</p>\n        <nile-tooltip content=",">\n          <span>","</span>\n        </nile-tooltip>\n      </div>\n\n      <slot @click="," name=\"cancelIcon\">\n        <nile-icon\n          name=\"close\"\n          size=\"14\"\n          class=\"icon corner-icon\"\n        ></nile-icon>\n      </slot>\n    </div>\n  "])),e.name,n,n,function(i){return c(e,i,l);});}_export({a:v,b:t,c:m,d:s,e:p,f:r,g:a,h:d});return{setters:[function(_nileFilePreviewCssCjsJs){},function(_lit){i=_lit.html;},function(_utilsNileFilePreviewUtilCjsJs){e=_utilsNileFilePreviewUtilCjsJs.c;n=_utilsNileFilePreviewUtilCjsJs.g;l=_utilsNileFilePreviewUtilCjsJs.f;c=_utilsNileFilePreviewUtilCjsJs.r;o=_utilsNileFilePreviewUtilCjsJs.t;},function(_typesNileFilePreviewEnumsCjsJs){}],execute:function execute(){}};});
+//# sourceMappingURL=nile-file-preview.template.cjs.js.map

package/dist/nile-file-preview/nile-file-preview.template.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-file-preview.template.cjs.js","sources":["../../../src/nile-file-preview/nile-file-preview.template.ts"],"sourcesContent":["/**\n * Template File for nile-preview component\n */\n\nimport './nile-file-preview.css';\nimport { html, TemplateResult } from 'lit';\nimport { FilePreviewErrorMessages, RemoveFileDetail } from './types';\nimport { removeFile, cancelFileUpload } from './utils';\nimport { formatFileSize, truncateString, getFileType } from './utils/nile-file-preview.util';\n\n export function getHorizontalUploadingState(\n  file: File,\n  uploadStatus: number\n ): TemplateResult {\n    return html`\n      <div class=\"uploading\" part=\"horizontal-uploading-state\">\n        <nile-loader width=\"24\" height=\"24\"></nile-loader>\n        <div class=\"progress-bar-container\">\n          <div class=\"progress-bar-percent\">\n            <p>Uploading File...</p>\n            <p>${uploadStatus}%</p>\n          </div>\n          <nile-progress-bar\n            part=\"horizontal-progress-bar\"\n            value=\"${uploadStatus}\"\n          ></nile-progress-bar>\n          <p class=\"horizontal-file-name\">${file.name}</p>\n        </div>\n        <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name=\"cancelIcon\">\n          <nile-icon\n            name=\"close\"\n            size=\"14\"\n            class=\"icon\"\n          ></nile-icon>\n        </slot>\n      </div>\n    `;\n  }\n\nexport function getHorizontalPreviewState(\n  url: string,\n  file: File,\n  originalUrl: string\n): TemplateResult {\n  return html`\n    <div class=\"preview horizontal-div\" part=\"horizontal-preview-state\">\n      <div class=\"preview-inner\">\n        <div class=\"preview-image-container\">\n            <img\n              class=\"image-preview\"\n              src=${url}\n              alt=${file.name}\n            />\n        </div>\n        <div class=\"preview-file-info\">\n          <p>${file.name}</p>\n          <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>\n        </div>\n      </div>\n      <div class=\"preview-actions\">\n        <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n          <nile-icon\n            name=\"trash\"\n            size=\"14\"\n            class=\"icon\"\n          ></nile-icon>\n        </slot>\n      </div>\n    </div>\n  `;\n}\n\nexport function getHorizontalNoPreviewState(\n  file: File,\n  originalUrl: string\n): TemplateResult {\n  return html`\n    <div class=\"no-preview horizontal-div\" part=\"horizontal-no-preview-state\">\n      <div class=\"no-preview-container\">\n        <div class=\"document-icon\">\n          <nile-icon name=\"general\" size=\"20\" color=\"var(--nile-colors-blue-500)\"></nile-icon>\n        </div>\n        <div class=\"preview-file-info\">\n          <p>${truncateString(file.name, file?.type)}</p>\n          <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>\n        </div>\n      </div>\n      <div>\n        <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n          <nile-icon\n            name=\"trash\"\n            size=\"14\"\n            class=\"icon\"\n          ></nile-icon>\n        </slot>\n      </div>\n    </div>\n  `;\n}\n\nexport function getHorizontalErrorState(\n  file: File,\n  errorMessage: string,\n  originalUrl: string\n): TemplateResult {\n  return html`\n    <div class=\"error horizontal-div\" part=\"horizontal-error-state\">\n      <div class=\"error-container\">\n        <div class=\"error-icon\">\n          <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n        </div>\n        <div class=\"file-info\">\n          <p class=\"horizontal-file-name\">${file.name}</p>\n          <nile-tooltip content=${errorMessage}>\n            <span>${errorMessage}</span>\n          </nile-tooltip>\n        </div>\n      </div>\n      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n          <nile-icon\n            name=\"close\"\n            size=\"14\"\n            class=\"icon\"\n          ></nile-icon>\n        </slot>\n    </div>\n  `;\n}\n\n// vertical states\nexport function getVerticalUploadingState(\n  file: File,\n  uploadStatus: number\n): TemplateResult {\n  return html`\n    <div class=\"vertical-div vertical-uploading\" part=\"vertical-uploading-state\">\n      <div class=\"loading\">\n        <nile-loader width=\"24\" height=\"24\"></nile-loader>\n      </div>\n\n      <div class=\"progress-bar-container\">\n        <div class=\"progress-bar-percent\">\n          <p>Uploading...</p>\n          <p>${uploadStatus}%</p>\n        </div>\n        <nile-progress-bar value=${uploadStatus}></nile-progress-bar>\n        <p class=\"vertical-file-name\">${file.name}</p>\n      </div>\n\n      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name=\"cancelIcon\">\n        <nile-icon\n          name=\"close\"\n          size=\"14\"\n          class=\"icon corner-icon\"\n        ></nile-icon>\n      </slot>\n    </div>\n  `;\n}\n\n\nexport function getVerticalPreviewState(\n  url: string,\n  file: File,\n  originalUrl: string\n): TemplateResult {\n  return html`\n    <div class=\"vertical-div vertical-preview\" part=\"vertical-preview-state\">\n      <div>\n        <img\n          class=\"image-preview\"\n          src=${url}\n          alt=${file.name}\n        />\n      </div>\n\n      <div class=\"content-container\">\n        <p>${file.name}</p>\n         <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>\n      </div>\n\n      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n        <nile-icon\n          name=\"trash\"\n          size=\"14\"\n          class=\"icon corner-icon\"\n        ></nile-icon>\n      </slot>\n    </div>\n  `;\n}\n\nexport function getVerticalNoPreviewState(\n  file: File,\n  originalUrl: string\n): TemplateResult {\n  return html`\n    <div class=\"vertical-div vertical-no-preview\" part=\"vertical-no-preview-state\">\n      <div class=\"vertical-document-icon\">\n        <nile-icon name=\"general\" size=\"20\" color=\"var(--nile-colors-blue-500)\"></nile-icon>\n      </div>\n\n      <div class=\"content-container\">\n        <p>${truncateString(file.name, file?.type)}</p>\n        <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>\n      </div>\n\n      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n        <nile-icon\n          name=\"trash\"\n          size=\"14\"\n          class=\"icon corner-icon\"\n        ></nile-icon>\n      </slot>\n    </div>\n  `;\n}\n\nexport function getVerticalErrorState(\n  file: File,\n  errorMessage: string,\n  originalUrl: string\n): TemplateResult {\n  return html`\n    <div class=\"vertical-div vertical-error\" part=\"vertical-error-state\">\n      <div class=\"vertical-document-icon error-bg\">\n        <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n      </div>\n\n      <div class=\"file-info-vertical-state\">\n        <p class=\"vertical-file-name\">${file.name}</p>\n        <nile-tooltip content=${errorMessage}>\n          <span>${errorMessage}</span>\n        </nile-tooltip>\n      </div>\n\n      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n        <nile-icon\n          name=\"close\"\n          size=\"14\"\n          class=\"icon corner-icon\"\n        ></nile-icon>\n      </slot>\n    </div>\n  `;\n}"],"names":["getHorizontalUploadingState","file","uploadStatus","html","_templateObject","_taggedTemplateLiteral","name","e","cancelFileUpload","getHorizontalPreviewState","url","originalUrl","_templateObject2","getFileType","type","formatFileSize","Number","size","removeFile","getHorizontalNoPreviewState","_templateObject3","truncateString","getHorizontalErrorState","errorMessage","_templateObject4","getVerticalUploadingState","_templateObject5","getVerticalPreviewState","_templateObject6","getVerticalNoPreviewState","_templateObject7","getVerticalErrorState","_templateObject8","_export","a"],"mappings":"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"}