@aquera/nile-elements 0.1.36-beta-1.1 → 0.1.36-beta-1.3

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

@@ -0,0 +1,521 @@
+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 {
+    min-height: 156px;
+    height: auto;
+    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; 
+  }
+
+  .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;
+  }
+
+  .content {
+    display: flex;  
+    flex-direction: column;
+    justify-content: center;
+    gap: 8px;
+  }
+
+  .content h4 {
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-dark-900);
+  }
+      
+  .content p {
+    margin: 0px;
+    font-size: var(--nile-type-scale-2);
+    color: var(--nile-colors-neutral-700);
+  }
+
+  /*  DISABLED STATE */
+  .disable {
+    background-color: var(--nile-colors-dark-200);
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  /* DRAGGING */
+  .dragging {
+    background-color: var(--nile-colors-blue-100);
+    border-color: var(--nile-colors-primary-600);
+    display: flex;
+    align-items: center;
+    gap: 18px;
+    color: var(--nile-colors-blue-700);
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .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 {
+    width: 648px;
+    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)
+  }
+  
+  .uploading:hover {
+    border-color: var(--nile-colors-neutral-400);
+  }
+
+  .progress-bar-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0px;
+  }
+
+  .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);
+  }
+
+  /* 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);
+  }
+
+  .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);
+  }
+
+  .preview nile-icon:hover {
+    cursor: pointer;
+  }
+
+  /* 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: 100%;
+    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);
+  }
+
+  .file-info p:last-of-type{
+    color: var(--nile-colors-red-700);
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .error > nile-icon:hover {
+    cursor: pointer;
+  }
+
+  /* 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);
+  }
+
+  .content-container p:first-child {
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .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);
+  }
+
+  /* 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;
+  }
+
+  .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);
+  }
+
+  .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 as i}from"./nile-file-preview.css.esm.js";import{N as s}from"../internal/nile-element.esm.js";import{property as e,customElement as h}from"lit/decorators.js";import{g as r}from"./utils/file-preview.util.esm.js";import{F as a,a as l,b as o,c as n}from"./types/file-preview.enums.esm.js";import{html as p}from"lit";import{g as c,a as m,b as d,c as y,d as f,e as u}from"./nile-file-preview.template.esm.js";let v=class extends s{constructor(){super(...arguments),this.errorMessage="",this.fileUrl="",this.uploadStatus=0,this.allowedTypes=[],this.state=a.DEFAULT,this.variant=l.HORIZONTAL,this.inputFileName="",this.inputFileHtml=null,this.originalUrl=""}static get styles(){return[i]}connectedCallback(){super.connectedCallback(),this.emit(o.NILE_INIT)}updated(t){t.has("inputFile")&&this.inputFile?(this.createState(this.inputFile),this.emit(o.NILE_RECEIVE)):t.has("fileUrl")&&this.fileUrl&&(this.handleFileUrl(this.fileUrl),this.emit(o.NILE_RECEIVE))}async handleFileUrl(t){this.originalUrl=t;try{const i=await fetch(t),s=await i.blob(),e=this.inputFileName||t.split("/").pop()||n.UNKNOWN_FILE_NAME,h=new File([s],e,{type:s.type});this.createState(h)}catch(t){const i=new File([],this.inputFileName||n.UNKNOWN_FILE_NAME,{type:"application/octet-stream"});this.errorMessage=n.FAILED_TO_LOAD,this.inputFileHtml=this.variant===l.HORIZONTAL?c(i,this.errorMessage,this.originalUrl):m(i,this.errorMessage,this.originalUrl),this.requestUpdate()}}async createState(t){const i=this.variant===l.HORIZONTAL;if(this.allowedTypes.includes(t.type))if(t.type.startsWith("image/"))try{const s=await r(t);this.inputFileHtml=i?d(s,t,this.originalUrl):y(s,t,this.originalUrl)}catch(s){this.inputFileHtml=i?f(t,this.originalUrl):u(t,this.originalUrl)}else this.inputFileHtml=i?f(t,this.originalUrl):u(t,this.originalUrl);else this.errorMessage=n.INVALID_FORMAT,this.inputFileHtml=i?c(t,this.errorMessage,this.originalUrl):m(t,this.errorMessage,this.originalUrl);this.requestUpdate()}render(){return p`
+			${this.inputFileHtml?this.inputFileHtml:p``}
+    `}disconnectedCallback(){super.disconnectedCallback(),this.emit(o.NILE_DESTROY)}};t([e({type:String})],v.prototype,"errorMessage",void 0),t([e({type:Object})],v.prototype,"inputFile",void 0),t([e({type:String})],v.prototype,"fileUrl",void 0),t([e({type:Number})],v.prototype,"uploadStatus",void 0),t([e({type:Array})],v.prototype,"allowedTypes",void 0),t([e({type:String})],v.prototype,"state",void 0),t([e({type:String})],v.prototype,"variant",void 0),t([e({type:String})],v.prototype,"inputFileName",void 0),v=t([h("nile-preview")],v);export{v 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/file-preview.util.cjs.js","./types/file-preview.enums.cjs.js"],function(_export,_context){"use strict";var i,e,_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 n(n,c,r){return i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n    <div class=\"preview horizontal-div\">\n      <div class=\"preview-inner\">\n        <div class=\"preview-image-container\">\n          ","\n        </div>\n        <div class=\"preview-file-info\">\n          <p>","</p>\n          <p>"," &#8226; ","KB</p>\n        </div>\n      </div>\n      <nile-icon \n        @click=","\n        name=\"trash\" \n        size=\"14\" \n        class=\"icon\"\n      ></nile-icon>\n    </div>\n  "])),c.type.startsWith("image/")?i(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["<img src=\"","\" alt=\"Image Preview\" />"])),n):i(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["<iframe src=\"","\" type=\"","\" width=\"40px\" height=\"40px\" />"])),n,c.type),c.name,c.type.split("/")[1].toUpperCase(),(Number(c.size)/1e3).toFixed(0),function(i){return e(c,i,r);});}function c(n,c){return i(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n    <div class=\"no-preview horizontal-div\">\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; ","KB</p>\n        </div>\n      </div>\n      <div>\n        <nile-icon\n          @click=","\n          name=\"trash\"\n          size=\"14\"\n          class=\"icon\"\n        ></nile-icon>\n      </div>\n    </div>\n  "])),n.name,n.type.split("/")[1].toUpperCase(),(Number(n.size)/1e3).toFixed(0),function(i){return e(n,i,c);});}function r(n,c,r){return i(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n    <div class=\"error horizontal-div\">\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>","</p>\n          <p>","</p>\n        </div>\n      </div>\n      <nile-icon \n        @click="," \n        name=\"close\" \n        size=\"14\" \n        class=\"icon\"\n      ></nile-icon>\n    </div>\n  "])),n.name,c,function(i){return e(n,i,r);});}function o(n,c,r){return i(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["\n    <div class=\"vertical-div vertical-preview\">\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; ","KB</p>\n      </div>\n\n      <nile-icon \n        @click=","\n        name=\"trash\" \n        size=\"14\" \n        class=\"corner-icon icon\"\n      ></nile-icon>\n    </div>\n  "])),n,c.name,c.name,c.type.split("/")[1].toUpperCase(),(Number(c.size)/1e3).toFixed(0),function(i){return e(c,i,r);});}function s(n,c){return i(_templateObject7||(_templateObject7=_taggedTemplateLiteral(["\n    <div class=\"vertical-div vertical-no-preview\">\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; ","KB</p>\n      </div>\n\n      <nile-icon\n        @click=","\n        name=\"trash\"\n        size=\"14\"\n        class=\"corner-icon  icon\"\n      ></nile-icon>\n    </div>\n  "])),n.name,n.type,(Number(n.size)/1e3).toFixed(0),function(i){return e(n,i,c);});}function l(n,c,r){return i(_templateObject8||(_templateObject8=_taggedTemplateLiteral(["\n    <div class=\"vertical-div vertical-error\">\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=\"error-message\">\n        <p>","</p>\n        <div class=\"error-p\">\n          <p>","</p>\n        </div>\n      </div>\n\n      <nile-icon \n        @click=","\n        name=\"close\" \n        size=\"14\" \n        class=\"corner-icon icon\"\n      ></nile-icon>\n    </div>\n  "])),n.name,c,function(i){return e(n,i,r);});}_export({a:l,b:n,c:o,d:c,e:s,g:r});return{setters:[function(_nileFilePreviewCssCjsJs){},function(_lit){i=_lit.html;},function(_utilsFilePreviewUtilCjsJs){e=_utilsFilePreviewUtilCjsJs.r;},function(_typesFilePreviewEnumsCjsJs){}],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 { RemoveFileDetail } from './types';\nimport { removeFile } from './utils';\n\nexport function getHorizontalPreviewState(\n  url: string,\n  file: File,\n  originalUrl: string\n): TemplateResult {\n  return html`\n    <div class=\"preview horizontal-div\">\n      <div class=\"preview-inner\">\n        <div class=\"preview-image-container\">\n          ${file.type.startsWith('image/')\n            ? html`<img src=\"${url}\" alt=\"Image Preview\" />`\n            : html`<iframe src=\"${url}\" type=\"${file.type}\" width=\"40px\" height=\"40px\" />`\n          }\n        </div>\n        <div class=\"preview-file-info\">\n          <p>${file.name}</p>\n          <p>${(file.type.split('/')[1]).toUpperCase()} &#8226; ${(Number(file.size) / 1000).toFixed(0)}KB</p>\n        </div>\n      </div>\n      <nile-icon \n        @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}\n        name=\"trash\" \n        size=\"14\" \n        class=\"icon\"\n      ></nile-icon>\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\">\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>${file.name}</p>\n          <p>${(file.type.split('/')[1]).toUpperCase()} &#8226; ${(Number(file.size) / 1000).toFixed(0)}KB</p>\n        </div>\n      </div>\n      <div>\n        <nile-icon\n          @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}\n          name=\"trash\"\n          size=\"14\"\n          class=\"icon\"\n        ></nile-icon>\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\">\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>${file.name}</p>\n          <p>${errorMessage}</p>\n        </div>\n      </div>\n      <nile-icon \n        @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} \n        name=\"close\" \n        size=\"14\" \n        class=\"icon\"\n      ></nile-icon>\n    </div>\n  `;\n}\n\n// vertical states\nexport function getVerticalPreviewState(\n  url: string,\n  file: File,\n  originalUrl: string\n): TemplateResult {\n  return html`\n    <div class=\"vertical-div vertical-preview\">\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>${(file.type.split('/')[1]).toUpperCase()} &#8226; ${(Number(file.size) / 1000).toFixed(0)}KB</p>\n      </div>\n\n      <nile-icon \n        @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}\n        name=\"trash\" \n        size=\"14\" \n        class=\"corner-icon icon\"\n      ></nile-icon>\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\">\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>${file.name}</p>\n        <p>${file.type} &#8226; ${(Number(file.size) / 1000).toFixed(0)}KB</p>\n      </div>\n\n      <nile-icon\n        @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}\n        name=\"trash\"\n        size=\"14\"\n        class=\"corner-icon  icon\"\n      ></nile-icon>\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\">\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=\"error-message\">\n        <p>${file.name}</p>\n        <div class=\"error-p\">\n          <p>${errorMessage}</p>\n        </div>\n      </div>\n\n      <nile-icon \n        @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}\n        name=\"close\" \n        size=\"14\" \n        class=\"corner-icon icon\"\n      ></nile-icon>\n    </div>\n  `;\n}"],"names":["getHorizontalPreviewState","url","file","originalUrl","html","_templateObject","_taggedTemplateLiteral","type","startsWith","_templateObject2","_templateObject3","name","split","toUpperCase","Number","size","toFixed","e","removeFile","getHorizontalNoPreviewState","_templateObject4","getHorizontalErrorState","errorMessage","_templateObject5","getVerticalPreviewState","_templateObject6","getVerticalNoPreviewState","_templateObject7","getVerticalErrorState","_templateObject8","_export","a"],"mappings":"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"}

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

@@ -0,0 +1,117 @@
+import"./nile-file-preview.css.esm.js";import{html as i}from"lit";import{r as e}from"./utils/file-preview.util.esm.js";import"./types/file-preview.enums.esm.js";function n(n,c,r){return i`
+    <div class="preview horizontal-div">
+      <div class="preview-inner">
+        <div class="preview-image-container">
+          ${c.type.startsWith("image/")?i`<img src="${n}" alt="Image Preview" />`:i`<iframe src="${n}" type="${c.type}" width="40px" height="40px" />`}
+        </div>
+        <div class="preview-file-info">
+          <p>${c.name}</p>
+          <p>${c.type.split("/")[1].toUpperCase()} &#8226; ${(Number(c.size)/1e3).toFixed(0)}KB</p>
+        </div>
+      </div>
+      <nile-icon 
+        @click=${i=>e(c,i,r)}
+        name="trash" 
+        size="14" 
+        class="icon"
+      ></nile-icon>
+    </div>
+  `}function c(n,c){return i`
+    <div class="no-preview horizontal-div">
+      <div class="no-preview-container">
+        <div class="document-icon">
+          <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
+        </div>
+        <div class="preview-file-info">
+          <p>${n.name}</p>
+          <p>${n.type.split("/")[1].toUpperCase()} &#8226; ${(Number(n.size)/1e3).toFixed(0)}KB</p>
+        </div>
+      </div>
+      <div>
+        <nile-icon
+          @click=${i=>e(n,i,c)}
+          name="trash"
+          size="14"
+          class="icon"
+        ></nile-icon>
+      </div>
+    </div>
+  `}function r(n,c,r){return i`
+    <div class="error horizontal-div">
+      <div class="error-container">
+        <div class="error-icon">
+          <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
+        </div>
+        <div class="file-info">
+          <p>${n.name}</p>
+          <p>${c}</p>
+        </div>
+      </div>
+      <nile-icon 
+        @click=${i=>e(n,i,r)} 
+        name="close" 
+        size="14" 
+        class="icon"
+      ></nile-icon>
+    </div>
+  `}function o(n,c,r){return i`
+    <div class="vertical-div vertical-preview">
+      <div>
+        <img
+          class="image-preview"
+          src=${n}
+          alt=${c.name}
+        />
+      </div>
+
+      <div class="content-container">
+        <p>${c.name}</p>
+         <p>${c.type.split("/")[1].toUpperCase()} &#8226; ${(Number(c.size)/1e3).toFixed(0)}KB</p>
+      </div>
+
+      <nile-icon 
+        @click=${i=>e(c,i,r)}
+        name="trash" 
+        size="14" 
+        class="corner-icon icon"
+      ></nile-icon>
+    </div>
+  `}function s(n,c){return i`
+    <div class="vertical-div vertical-no-preview">
+      <div class="vertical-document-icon">
+        <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
+      </div>
+
+      <div class="content-container">
+        <p>${n.name}</p>
+        <p>${n.type} &#8226; ${(Number(n.size)/1e3).toFixed(0)}KB</p>
+      </div>
+
+      <nile-icon
+        @click=${i=>e(n,i,c)}
+        name="trash"
+        size="14"
+        class="corner-icon  icon"
+      ></nile-icon>
+    </div>
+  `}function l(n,c,r){return i`
+    <div class="vertical-div vertical-error">
+      <div class="vertical-document-icon error-bg">
+        <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
+      </div>
+
+      <div class="error-message">
+        <p>${n.name}</p>
+        <div class="error-p">
+          <p>${c}</p>
+        </div>
+      </div>
+
+      <nile-icon 
+        @click=${i=>e(n,i,r)}
+        name="close" 
+        size="14" 
+        class="corner-icon icon"
+      ></nile-icon>
+    </div>
+  `}export{l as a,n as b,o as c,c as d,s as e,r as g};