@aquera/nile-elements 1.4.8-beta-1.1 → 1.4.8-beta-1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/demo/index.html +145 -217
  2. package/dist/index.js +54 -41
  3. package/dist/nile-file-preview/nile-file-preview.css.cjs.js +1 -1
  4. package/dist/nile-file-preview/nile-file-preview.css.cjs.js.map +1 -1
  5. package/dist/nile-file-preview/nile-file-preview.css.esm.js +7 -3
  6. package/dist/nile-file-preview/nile-file-preview.template.cjs.js +1 -1
  7. package/dist/nile-file-preview/nile-file-preview.template.cjs.js.map +1 -1
  8. package/dist/nile-file-preview/nile-file-preview.template.esm.js +73 -64
  9. package/dist/src/nile-file-preview/nile-file-preview.css.js +7 -3
  10. package/dist/src/nile-file-preview/nile-file-preview.css.js.map +1 -1
  11. package/dist/src/nile-file-preview/nile-file-preview.template.js +46 -37
  12. package/dist/src/nile-file-preview/nile-file-preview.template.js.map +1 -1
  13. package/dist/src/version.js +1 -1
  14. package/dist/src/version.js.map +1 -1
  15. package/dist/tsconfig.tsbuildinfo +1 -1
  16. package/package.json +1 -1
  17. package/src/nile-file-preview/nile-file-preview.css.ts +7 -3
  18. package/src/nile-file-preview/nile-file-preview.template.ts +46 -37
package/dist/nile-file-preview/nile-file-preview.template.cjs.js.map CHANGED
@@ -1 +1 @@
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';\nimport { NileFilePreview } from './nile-file-preview';\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=\"cancel-icon\">\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>${file.name}</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 nileFilePreview: NileFilePreview\n): TemplateResult {\n truncateString(nileFilePreview);\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 ${\n nileFilePreview.isStringTruncated\n ? html`<nile-tooltip content=${errorMessage}>\n <span>${errorMessage}</span>\n </nile-tooltip>`\n : html`<span>${errorMessage}</span>`\n }\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>${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 getVerticalErrorState(\n file: File,\n errorMessage: string,\n originalUrl: string,\n nileFilePreview: NileFilePreview\n): TemplateResult {\n truncateString(nileFilePreview);\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 ${\n nileFilePreview.isStringTruncated\n ? html`<nile-tooltip content=${errorMessage}>\n <span>${errorMessage}</span>\n </nile-tooltip>`\n : html`<span>${errorMessage}</span>`\n }\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}\n"],"names":["getHorizontalUploadingState","file","uploadStatus","html","_templateObject","_taggedTemplateLiteral","name","e","cancelFileUpload","getHorizontalPreviewState","url","originalUrl","_templateObject2","getFileType","type","formatFileSize","Number","size","removeFile","getHorizontalNoPreviewState","_templateObject3","getHorizontalErrorState","errorMessage","nileFilePreview","truncateString","_templateObject4","isStringTruncated","_templateObject5","_templateObject6","getVerticalUploadingState","_templateObject7","getVerticalPreviewState","_templateObject8","getVerticalNoPreviewState","_templateObject9","getVerticalErrorState","_templateObject10","_templateObject11","_templateObject12","_export","a"],"mappings":"whBAWiB,QAAAA,CAAAA,CAAAA,CACfC,CACAC,CAAAA,CAAAA,CAAAA,CAEE,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,+tBAMEH,CAAAA,CAIIA,CAAAA,CAEuBD,CAAKK,CAAAA,IAAAA,CAEzBC,SAAAA,CAAAA,QAAqCC,CAAAA,EAAiBP,CAAMM,CAAAA,CAAAA,CAAAA,IASlF,SAEcE,CAAAA,CACdC,CAAAA,CAAAA,CACAT,CACAU,CAAAA,CAAAA,CAAAA,CAEA,MAAOR,CAAAA,CAAI,CAAAS,gBAAA,GAAAA,gBAAA,CAAAP,sBAAA,0rBAMOK,CAAAA,CACAT,CAAKK,CAAAA,IAAAA,CAIVL,CAAKK,CAAAA,IAAAA,CACLO,CAAAA,CAAYZ,CAAKa,CAAAA,IAAAA,CAAAA,CAAiBC,CAAeC,CAAAA,MAAAA,CAAOf,CAAKgB,CAAAA,IAAAA,CAAAA,CAAAA,CAIpDV,SAAAA,CAAqCW,QAAAA,CAAAA,CAAAA,CAAWjB,EAAMM,CAAGI,CAAAA,CAAAA,CAAAA,IAUjF,CAEgB,QAAAQ,CAAAA,CAAAA,CACdlB,CACAU,CAAAA,CAAAA,CAAAA,CAEA,MAAOR,CAAAA,CAAI,CAAAiB,gBAAA,GAAAA,gBAAA,CAAAf,sBAAA,ipBAOEJ,CAAKK,CAAAA,IAAAA,CACLO,CAAAA,CAAYZ,CAAKa,CAAAA,IAAAA,CAAAA,CAAiBC,CAAeC,CAAAA,MAAAA,CAAOf,CAAKgB,CAAAA,IAAAA,CAAAA,CAAAA,CAIpDV,SAAAA,CAAqCW,QAAAA,CAAAA,CAAAA,CAAWjB,EAAMM,CAAGI,CAAAA,CAAAA,CAAAA,IAUjF,CAEM,QAAUU,CAAAA,EACdpB,CACAqB,CAAAA,CAAAA,CACAX,EACAY,CAGA,CAAA,CAAA,MADAC,CAAAA,CAAeD,CAAAA,CAAAA,CAAAA,CACRpB,CAAI,CAAAsB,gBAAA,GAAAA,gBAAA,CAAApB,sBAAA,umBAO+BJ,CAAKK,CAAAA,IAAAA,CAErCiB,CAAgBG,CAAAA,iBAAAA,CACZvB,CAAI,CAAAwB,gBAAA,GAAAA,gBAAA,CAAAtB,sBAAA,uGAAyBiB,CAAAA,CACnBA,CAAAA,EAEVnB,CAAI,CAAAyB,gBAAA,GAAAA,gBAAA,CAAAvB,sBAAA,wBAASiB,CAAAA,CAAAA,CAIPf,SAAAA,CAAqCW,QAAAA,CAAAA,CAAAA,CAAWjB,EAAMM,CAAGI,CAAAA,CAAAA,CAAAA,GAS/E,EAGgB,QAAAkB,CAAAA,CAAAA,CACd5B,CACAC,CAAAA,CAAAA,CAAAA,CAEA,MAAOC,CAAAA,CAAI,CAAA2B,gBAAA,GAAAA,gBAAA,CAAAzB,sBAAA,0rBASEH,CAAAA,CAEoBA,CAAAA,CACKD,CAAKK,CAAAA,IAAAA,CAGvBC,SAAAA,CAAAA,QAAqCC,CAAAA,EAAiBP,CAAMM,CAAAA,CAAAA,CAAAA,IASlF,SAGgBwB,CAAAA,CACdrB,CAAAA,CAAAA,CACAT,CACAU,CAAAA,CAAAA,CAAAA,CAEA,MAAOR,CAAAA,CAAI,CAAA6B,gBAAA,GAAAA,gBAAA,CAAA3B,sBAAA,uhBAKGK,CAAAA,CACAT,CAAKK,CAAAA,IAAAA,CAKRL,CAAKK,CAAAA,IAAAA,CACJO,CAAAA,CAAYZ,CAAKa,CAAAA,IAAAA,CAAAA,CAAiBC,CAAeC,CAAAA,MAAAA,CAAOf,CAAKgB,CAAAA,IAAAA,CAAAA,CAAAA,CAGrDV,SAAAA,CAAqCW,QAAAA,CAAAA,CAAAA,CAAWjB,EAAMM,CAAGI,CAAAA,CAAAA,CAAAA,IAS/E,CAEgB,QAAAsB,CAAAA,CAAAA,CACdhC,CACAU,CAAAA,CAAAA,CAAAA,CAEA,MAAOR,CAAAA,CAAI,CAAA+B,gBAAA,GAAAA,gBAAA,CAAA7B,sBAAA,8jBAOAJ,CAAKK,CAAAA,IAAAA,CACLO,CAAAA,CAAYZ,CAAKa,CAAAA,IAAAA,CAAAA,CAAiBC,CAAeC,CAAAA,MAAAA,CAAOf,CAAKgB,CAAAA,IAAAA,CAAAA,CAAAA,CAGpDV,SAAAA,CAAqCW,QAAAA,CAAAA,CAAAA,CAAWjB,EAAMM,CAAGI,CAAAA,CAAAA,CAAAA,IAS/E,CAEM,QAAUwB,CAAAA,EACdlC,CACAqB,CAAAA,CAAAA,CACAX,EACAY,CAGA,CAAA,CAAA,MADAC,CAAAA,CAAeD,CAAAA,CAAAA,CAAAA,CACRpB,CAAI,CAAAiC,iBAAA,GAAAA,iBAAA,CAAA/B,sBAAA,+kBAO2BJ,CAAKK,CAAAA,IAAAA,CAEnCiB,CAAgBG,CAAAA,iBAAAA,CACZvB,CAAI,CAAAkC,iBAAA,GAAAA,iBAAA,CAAAhC,sBAAA,mGAAyBiB,CAAAA,CACnBA,CAAAA,EAEVnB,CAAI,CAAAmC,iBAAA,GAAAA,iBAAA,CAAAjC,sBAAA,wBAASiB,CAAAA,CAAAA,CAILf,SAAAA,CAAqCW,QAAAA,CAAAA,CAAAA,CAAWjB,EAAMM,CAAGI,CAAAA,CAAAA,CAAAA,GAS/E,EAAA4B,OAAA,EAAAC,CAAA"}
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';\nimport { NileFilePreview } from './nile-file-preview';\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\" part=\"horizontal-progress-bar-container\">\n <div class=\"progress-bar-percent\" part=\"horizontal-progress-bar-percent\">\n <p part=\"horizontal-progress-bar-percent-text\">Uploading File...</p>\n <p part=\"horizontal-progress-bar-percent-value\">${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\" part=\"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\" part=\"horizontal-preview-inner\">\n <div class=\"preview-image-container\" part=\"horizontal-preview-image-container\">\n <img\n class=\"image-preview\"\n src=${url}\n alt=${file.name}\n part=\"horizontal-preview-image\"\n />\n </div>\n <div class=\"preview-file-info\" part=\"horizontal-preview-file-info\">\n <p part=\"horizontal-preview-file-info-name\">${file.name}</p>\n <p part=\"horizontal-preview-file-info-type\">${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>\n </div>\n </div>\n <div class=\"preview-actions\" part=\"horizontal-preview-actions\">\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancel-icon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon\"\n part=\"horizontal-preview-actions-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\" part=\"horizontal-no-preview-container\">\n <div class=\"document-icon\" part=\"horizontal-no-preview-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\" part=\"horizontal-no-preview-file-info\">\n <p part=\"horizontal-no-preview-file-info-name\">${file.name}</p>\n <p part=\"horizontal-no-preview-file-info-type\">${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 part=\"horizontal-no-preview-actions-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 nileFilePreview: NileFilePreview\n): TemplateResult {\n truncateString(nileFilePreview);\n return html`\n <div class=\"error horizontal-div\" part=\"horizontal-error-state\">\n <div class=\"error-container\" part=\"horizontal-error-container\">\n <div class=\"error-icon\" part=\"horizontal-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\" part=\"horizontal-error-file-info\">\n <p class=\"horizontal-file-name\" part=\"horizontal-error-file-info-name\">${file.name}</p>\n ${\n nileFilePreview.isStringTruncated\n ? html`<nile-tooltip content=${errorMessage}>\n <span>${errorMessage}</span>\n </nile-tooltip>`\n : html`<span>${errorMessage}</span>`\n }\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 part=\"horizontal-error-actions-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\" part=\"vertical-loading\">\n <nile-loader width=\"24\" height=\"24\"></nile-loader>\n </div>\n\n <div class=\"progress-bar-container\" part=\"vertical-progress-bar-container\">\n <div class=\"progress-bar-percent\" part=\"vertical-progress-bar-percent\">\n <p part=\"vertical-progress-bar-percent-text\">Uploading...</p>\n <p part=\"vertical-progress-bar-percent-value\">${uploadStatus}%</p>\n </div>\n <nile-progress-bar value=${uploadStatus}></nile-progress-bar>\n <p class=\"vertical-file-name\" part=\"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 part=\"vertical-uploading-actions-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 part=\"vertical-preview-image-container\">\n <img\n class=\"image-preview\"\n part=\"vertical-preview-image\"\n src=${url}\n alt=${file.name}\n />\n </div>\n\n <div class=\"content-container\" part=\"vertical-preview-file-info\">\n <p part=\"vertical-preview-file-info-name\">${file.name}</p>\n <p part=\"vertical-preview-file-info-type\">${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 part=\"vertical-preview-actions-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\" part=\"vertical-no-preview-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\" part=\"vertical-no-preview-file-info\">\n <p part=\"vertical-no-preview-file-info-name\">${file.name}</p>\n <p part=\"vertical-no-preview-file-info-type\">${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 part=\"vertical-no-preview-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\nexport function getVerticalErrorState(\n file: File,\n errorMessage: string,\n originalUrl: string,\n nileFilePreview: NileFilePreview\n): TemplateResult {\n truncateString(nileFilePreview);\n return html`\n <div class=\"vertical-div vertical-error\" part=\"vertical-error-state\">\n <div class=\"vertical-document-icon error-bg\" part=\"vertical-error-document-icon\">\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\" part=\"vertical-error-file-info\">\n <p class=\"vertical-file-name\" part=\"vertical-error-file-info-name\">${file.name}</p>\n ${\n nileFilePreview.isStringTruncated\n ? html`<nile-tooltip content=${errorMessage}>\n <span>${errorMessage}</span>\n </nile-tooltip>`\n : html`<span>${errorMessage}</span>`\n }\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 part=\"vertical-error-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n"],"names":["getHorizontalUploadingState","file","uploadStatus","html","_templateObject","_taggedTemplateLiteral","name","e","cancelFileUpload","getHorizontalPreviewState","url","originalUrl","_templateObject2","getFileType","type","formatFileSize","Number","size","removeFile","getHorizontalNoPreviewState","_templateObject3","getHorizontalErrorState","errorMessage","nileFilePreview","truncateString","_templateObject4","isStringTruncated","_templateObject5","_templateObject6","getVerticalUploadingState","_templateObject7","getVerticalPreviewState","_templateObject8","getVerticalNoPreviewState","_templateObject9","getVerticalErrorState","_templateObject10","_templateObject11","_templateObject12","_export","a"],"mappings":"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"}
package/dist/nile-file-preview/nile-file-preview.template.esm.js CHANGED
@@ -1,18 +1,18 @@
1
- import"./nile-file-preview.css.esm.js";import{html as i}from"lit";import{c as e,g as n,f as l,r as c,t as a}from"./utils/nile-file-preview.util.esm.js";import"./types/nile-file-preview.enums.esm.js";function o(n,l){return i`
1
+ import"./nile-file-preview.css.esm.js";import{html as i}from"lit";import{c as e,g as r,f as n,r as a,t as o}from"./utils/nile-file-preview.util.esm.js";import"./types/nile-file-preview.enums.esm.js";function l(r,n){return i`
2
2
  <div class="uploading" part="horizontal-uploading-state">
3
3
  <nile-loader width="24" height="24"></nile-loader>
4
- <div class="progress-bar-container">
5
- <div class="progress-bar-percent">
6
- <p>Uploading File...</p>
7
- <p>${l}%</p>
4
+ <div class="progress-bar-container" part="horizontal-progress-bar-container">
5
+ <div class="progress-bar-percent" part="horizontal-progress-bar-percent">
6
+ <p part="horizontal-progress-bar-percent-text">Uploading File...</p>
7
+ <p part="horizontal-progress-bar-percent-value">${n}%</p>
8
8
  </div>
9
9
  <nile-progress-bar
10
10
  part="horizontal-progress-bar"
11
- value="${l}"
11
+ value="${n}"
12
12
  ></nile-progress-bar>
13
- <p class="horizontal-file-name">${n.name}</p>
13
+ <p class="horizontal-file-name" part="horizontal-file-name">${r.name}</p>
14
14
  </div>
15
- <slot @click=${i=>e(n,i)} name="cancelIcon">
15
+ <slot @click=${i=>e(r,i)} name="cancelIcon">
16
16
  <nile-icon
17
17
  name="close"
18
18
  size="14"
@@ -20,157 +20,166 @@ import"./nile-file-preview.css.esm.js";import{html as i}from"lit";import{c as e,
20
20
  ></nile-icon>
21
21
  </slot>
22
22
  </div>
23
- `}function s(e,a,o){return i`
23
+ `}function t(e,o,l){return i`
24
24
  <div class="preview horizontal-div" part="horizontal-preview-state">
25
- <div class="preview-inner">
26
- <div class="preview-image-container">
25
+ <div class="preview-inner" part="horizontal-preview-inner">
26
+ <div class="preview-image-container" part="horizontal-preview-image-container">
27
27
  <img
28
28
  class="image-preview"
29
29
  src=${e}
30
- alt=${a.name}
30
+ alt=${o.name}
31
+ part="horizontal-preview-image"
31
32
  />
32
33
  </div>
33
- <div class="preview-file-info">
34
- <p>${a.name}</p>
35
- <p>${n(a.type)} &#8226; ${l(Number(a.size))}</p>
34
+ <div class="preview-file-info" part="horizontal-preview-file-info">
35
+ <p part="horizontal-preview-file-info-name">${o.name}</p>
36
+ <p part="horizontal-preview-file-info-type">${r(o.type)} &#8226; ${n(Number(o.size))}</p>
36
37
  </div>
37
38
  </div>
38
- <div class="preview-actions">
39
- <slot @click=${i=>c(a,i,o)} name="cancel-icon">
39
+ <div class="preview-actions" part="horizontal-preview-actions">
40
+ <slot @click=${i=>a(o,i,l)} name="cancel-icon">
40
41
  <nile-icon
41
42
  name="trash"
42
43
  size="14"
43
44
  class="icon"
45
+ part="horizontal-preview-actions-icon"
44
46
  ></nile-icon>
45
47
  </slot>
46
48
  </div>
47
49
  </div>
48
- `}function r(e,a){return i`
50
+ `}function c(e,o){return i`
49
51
  <div class="no-preview horizontal-div" part="horizontal-no-preview-state">
50
- <div class="no-preview-container">
51
- <div class="document-icon">
52
+ <div class="no-preview-container" part="horizontal-no-preview-container">
53
+ <div class="document-icon" part="horizontal-no-preview-document-icon">
52
54
  <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
53
55
  </div>
54
- <div class="preview-file-info">
55
- <p>${e.name}</p>
56
- <p>${n(e.type)} &#8226; ${l(Number(e.size))}</p>
56
+ <div class="preview-file-info" part="horizontal-no-preview-file-info">
57
+ <p part="horizontal-no-preview-file-info-name">${e.name}</p>
58
+ <p part="horizontal-no-preview-file-info-type">${r(e.type)} &#8226; ${n(Number(e.size))}</p>
57
59
  </div>
58
60
  </div>
59
61
  <div>
60
- <slot @click=${i=>c(e,i,a)} name="cancelIcon">
62
+ <slot @click=${i=>a(e,i,o)} name="cancelIcon">
61
63
  <nile-icon
62
64
  name="trash"
63
65
  size="14"
64
66
  class="icon"
67
+ part="horizontal-no-preview-actions-icon"
65
68
  ></nile-icon>
66
69
  </slot>
67
70
  </div>
68
71
  </div>
69
- `}function t(e,n,l,o){return a(o),i`
72
+ `}function s(e,r,n,l){return o(l),i`
70
73
  <div class="error horizontal-div" part="horizontal-error-state">
71
- <div class="error-container">
72
- <div class="error-icon">
74
+ <div class="error-container" part="horizontal-error-container">
75
+ <div class="error-icon" part="horizontal-error-icon">
73
76
  <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
74
77
  </div>
75
- <div class="file-info">
76
- <p class="horizontal-file-name">${e.name}</p>
77
- ${o.isStringTruncated?i`<nile-tooltip content=${n}>
78
- <span>${n}</span>
79
- </nile-tooltip>`:i`<span>${n}</span>`}
78
+ <div class="file-info" part="horizontal-error-file-info">
79
+ <p class="horizontal-file-name" part="horizontal-error-file-info-name">${e.name}</p>
80
+ ${l.isStringTruncated?i`<nile-tooltip content=${r}>
81
+ <span>${r}</span>
82
+ </nile-tooltip>`:i`<span>${r}</span>`}
80
83
  </div>
81
84
  </div>
82
- <slot @click=${i=>c(e,i,l)} name="cancelIcon">
85
+ <slot @click=${i=>a(e,i,n)} name="cancelIcon">
83
86
  <nile-icon
84
87
  name="close"
85
88
  size="14"
86
89
  class="icon"
90
+ part="horizontal-error-actions-icon"
87
91
  ></nile-icon>
88
92
  </slot>
89
93
  </div>
90
- `}function v(n,l){return i`
94
+ `}function p(r,n){return i`
91
95
  <div class="vertical-div vertical-uploading" part="vertical-uploading-state">
92
- <div class="loading">
96
+ <div class="loading" part="vertical-loading">
93
97
  <nile-loader width="24" height="24"></nile-loader>
94
98
  </div>
95
99
 
96
- <div class="progress-bar-container">
97
- <div class="progress-bar-percent">
98
- <p>Uploading...</p>
99
- <p>${l}%</p>
100
+ <div class="progress-bar-container" part="vertical-progress-bar-container">
101
+ <div class="progress-bar-percent" part="vertical-progress-bar-percent">
102
+ <p part="vertical-progress-bar-percent-text">Uploading...</p>
103
+ <p part="vertical-progress-bar-percent-value">${n}%</p>
100
104
  </div>
101
- <nile-progress-bar value=${l}></nile-progress-bar>
102
- <p class="vertical-file-name">${n.name}</p>
105
+ <nile-progress-bar value=${n}></nile-progress-bar>
106
+ <p class="vertical-file-name" part="vertical-file-name">${r.name}</p>
103
107
  </div>
104
108
 
105
- <slot @click=${i=>e(n,i)} name="cancelIcon">
109
+ <slot @click=${i=>e(r,i)} name="cancelIcon">
106
110
  <nile-icon
107
111
  name="close"
108
112
  size="14"
109
113
  class="icon corner-icon"
114
+ part="vertical-uploading-actions-icon"
110
115
  ></nile-icon>
111
116
  </slot>
112
117
  </div>
113
- `}function p(e,a,o){return i`
118
+ `}function v(e,o,l){return i`
114
119
  <div class="vertical-div vertical-preview" part="vertical-preview-state">
115
- <div>
120
+ <div part="vertical-preview-image-container">
116
121
  <img
117
122
  class="image-preview"
123
+ part="vertical-preview-image"
118
124
  src=${e}
119
- alt=${a.name}
125
+ alt=${o.name}
120
126
  />
121
127
  </div>
122
128
 
123
- <div class="content-container">
124
- <p>${a.name}</p>
125
- <p>${n(a.type)} &#8226; ${l(Number(a.size))}</p>
129
+ <div class="content-container" part="vertical-preview-file-info">
130
+ <p part="vertical-preview-file-info-name">${o.name}</p>
131
+ <p part="vertical-preview-file-info-type">${r(o.type)} &#8226; ${n(Number(o.size))}</p>
126
132
  </div>
127
133
 
128
- <slot @click=${i=>c(a,i,o)} name="cancelIcon">
134
+ <slot @click=${i=>a(o,i,l)} name="cancelIcon">
129
135
  <nile-icon
130
136
  name="trash"
131
137
  size="14"
132
138
  class="icon corner-icon"
139
+ part="vertical-preview-actions-icon"
133
140
  ></nile-icon>
134
141
  </slot>
135
142
  </div>
136
- `}function d(e,a){return i`
143
+ `}function d(e,o){return i`
137
144
  <div class="vertical-div vertical-no-preview" part="vertical-no-preview-state">
138
- <div class="vertical-document-icon">
145
+ <div class="vertical-document-icon" part="vertical-no-preview-document-icon">
139
146
  <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
140
147
  </div>
141
148
 
142
- <div class="content-container">
143
- <p>${e.name}</p>
144
- <p>${n(e.type)} &#8226; ${l(Number(e.size))}</p>
149
+ <div class="content-container" part="vertical-no-preview-file-info">
150
+ <p part="vertical-no-preview-file-info-name">${e.name}</p>
151
+ <p part="vertical-no-preview-file-info-type">${r(e.type)} &#8226; ${n(Number(e.size))}</p>
145
152
  </div>
146
153
 
147
- <slot @click=${i=>c(e,i,a)} name="cancelIcon">
154
+ <slot @click=${i=>a(e,i,o)} name="cancelIcon">
148
155
  <nile-icon
149
156
  name="trash"
150
157
  size="14"
151
158
  class="icon corner-icon"
159
+ part="vertical-no-preview-actions-icon"
152
160
  ></nile-icon>
153
161
  </slot>
154
162
  </div>
155
- `}function m(e,n,l,o){return a(o),i`
163
+ `}function f(e,r,n,l){return o(l),i`
156
164
  <div class="vertical-div vertical-error" part="vertical-error-state">
157
- <div class="vertical-document-icon error-bg">
165
+ <div class="vertical-document-icon error-bg" part="vertical-error-document-icon">
158
166
  <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
159
167
  </div>
160
168
 
161
- <div class="file-info-vertical-state">
162
- <p class="vertical-file-name">${e.name}</p>
163
- ${o.isStringTruncated?i`<nile-tooltip content=${n}>
164
- <span>${n}</span>
165
- </nile-tooltip>`:i`<span>${n}</span>`}
169
+ <div class="file-info-vertical-state" part="vertical-error-file-info">
170
+ <p class="vertical-file-name" part="vertical-error-file-info-name">${e.name}</p>
171
+ ${l.isStringTruncated?i`<nile-tooltip content=${r}>
172
+ <span>${r}</span>
173
+ </nile-tooltip>`:i`<span>${r}</span>`}
166
174
  </div>
167
175
 
168
- <slot @click=${i=>c(e,i,l)} name="cancelIcon">
176
+ <slot @click=${i=>a(e,i,n)} name="cancelIcon">
169
177
  <nile-icon
170
178
  name="close"
171
179
  size="14"
172
180
  class="icon corner-icon"
181
+ part="vertical-error-actions-icon"
173
182
  ></nile-icon>
174
183
  </slot>
175
184
  </div>
176
- `}export{v as a,t as b,m as c,s as d,p as e,r as f,o as g,d as h};
185
+ `}export{p as a,s as b,f as c,t as d,v as e,c as f,l as g,d as h};
package/dist/src/nile-file-preview/nile-file-preview.css.js CHANGED
@@ -11,6 +11,7 @@ import { css } from 'lit';
11
11
  export const styles = css `
12
12
  :host {
13
13
  display: inline-block;
14
+ width: 100%;
14
15
  }
15
16
 
16
17
  * {
@@ -34,7 +35,7 @@ export const styles = css `
34
35
 
35
36
  .horizontal-div {
36
37
  max-height: 62px;
37
- width: 648px;
38
+ width: 100%;
38
39
  min-width: 230px;
39
40
  padding: 12px;
40
41
  display: flex;
@@ -261,7 +262,7 @@ export const styles = css `
261
262
  white-space: nowrap;
262
263
  text-overflow: ellipsis;
263
264
  overflow: hidden;
264
- width: 500px;
265
+ width: 100%;
265
266
  }
266
267
 
267
268
  .preview-file-info p:last-of-type{
@@ -272,7 +273,7 @@ export const styles = css `
272
273
  white-space: nowrap;
273
274
  text-overflow: ellipsis;
274
275
  overflow: hidden;
275
- width: 500px;
276
+ width: 100%;
276
277
  }
277
278
 
278
279
  .no-preview > nile-icon:hover {
@@ -582,6 +583,9 @@ export const styles = css `
582
583
  li {
583
584
  list-style-type: none;
584
585
  }
586
+ .preview-file-info p {
587
+ width: 100%;
588
+ }
585
589
  `;
586
590
  export default [styles];
587
591
  //# sourceMappingURL=nile-file-preview.css.js.map
package/dist/src/nile-file-preview/nile-file-preview.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nile-file-preview.css.js","sourceRoot":"","sources":["../../../src/nile-file-preview/nile-file-preview.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8jBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * FileUpload CSS\n */\nexport const styles = css`\n :host {\n display: inline-block;\n }\n\n * {\n padding: 0px;\n margin: 0px;\n box-sizing: border-box;\n }\n\n .wrapper {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 18px;\n height: auto;\n }\n\n input {\n display: none;\n }\n\n .horizontal-div {\n max-height: 62px;\n width: 648px;\n min-width: 230px;\n padding: 12px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 6px;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px dashed var(--nile-colors-neutral-500);\n color: var(--nile-colors-dark-900);\n background-color: var(--nile-colors-white-base);\n }\n \n .hover-state {\n border-color: var(--nile-colors-primary-600);\n }\n\n .vertical-div {\n height: auto;\n min-height: 156px;\n min-width: 240px;\n width: 240px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n padding: 12px;\n border-radius: var(--nile-radius-radius-xs);\n color: var(--nile-colors-dark-900);\n border: 1px dashed var(--nile-colors-neutral-500);\n background-color: var(--nile-colors-white-base);\n position: relative; \n margin-bottom: 10px;\n }\n\n .vertical-div:hover {\n border-color: var(--nile-colors-blue-500);\n }\n\n .outer-div-border {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .inner-div {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 18px;\n box-sizing: border-box;\n }\n\n .icons-container {\n display: flex;\n gap: 4px;\n }\n\n .general-icon {\n transform: rotate(-18.11deg);\n position: relative;\n bottom: 3px;\n }\n\n .image-icon {\n transform: rotate(15deg);\n }\n\n .icon:hover {\n cursor: pointer;\n }\n\n /* Uploading State */\n nile-loader {\n line-height: 0;\n }\n\n .uploading {\n height: 62px;\n width: 648px;\n padding: 12px;\n min-width: 230px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n box-sizing: border-box;\n border: 1px solid var(--nile-colors-neutral-400);\n border-radius: 4px;\n background-color: var(--nile-colors-white-base);\n }\n \n .uploading:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .progress-bar-container {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .progress-bar-percent {\n width: 100%;\n display: flex;\n justify-content: space-between;\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .progress-bar-container p {\n margin: 0px;\n }\n\n .progress-bar-container > p {\n font-size: var(--nile-type-scale-1);\n color: var(--nile-colors-dark-500);\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .progress-bar-container .horizontal-file-name {\n font-size: var(--nile-type-scale-1);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-500);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 538px;\n }\n \n .progress-bar-container .vertical-file-name {\n font-size: var(--nile-type-scale-1);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-500);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 212px;\n }\n\n /* PREVIEW STATE */\n .preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .preview-inner {\n display: flex;\n align-items: center;\n gap: 18px;\n }\n\n .preview-image-container {\n height: 42px;\n width: 42px;\n }\n\n .preview-image-container img, iframe {\n height: 42px;\n width: 42px;\n object-fit: contain;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .preview nile-icon:hover {\n cursor: pointer;\n }\n\n /* NO PREVIEW STATE */\n .no-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .no-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .no-preview-container {\n display: flex;\n align-items: center;\n gap: 18px;\n }\n\n .document-icon {\n height: 40px;\n width: 40px;\n border-radius: var(--nile-radius-radius-xs);\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--nile-colors-blue-400);\n background-color: var(--nile-colors-blue-100);\n }\n\n .document-icon nile-icon {\n height: 40px;\n width: 40px;\n }\n \n .preview-file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 4px;\n }\n\n .preview-file-info p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 500px;\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 500px;\n }\n\n .no-preview > nile-icon:hover {\n cursor: pointer;\n }\n\n /* ERROR STATE */\n .error {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .error:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .error-container {\n width: 95%;\n display: flex;\n align-items: center;\n gap: 18px;\n }\n\n .error-icon {\n height: 40px;\n width: 40px;\n border-radius: var(--nile-radius-radius-xs);\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--nile-colors-red-400);\n background-color: var(--nile-colors-red-100);\n }\n\n .error-icon nile-icon {\n height: 40px;\n width: 40px;\n }\n \n .file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 4px;\n }\n\n .file-info p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 538px;\n }\n \n .file-info nile-tooltip span, .file-info span {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n max-width: 90%;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-align: left;\n }\n\n .error > nile-icon:hover {\n cursor: pointer;\n }\n\n .file-info .horizontal-file-name {\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-900);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 538px;\n }\n\n /* VERTICAL STATE START */\n /* Default State */\n .vertical-default {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 18px\n }\n\n .content-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n text-align: center;\n }\n\n .content-container h4 {\n font-weight: var(--nile-font-weight-regular);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .content-container p:first-child {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .content-container p:last-child {\n margin: 0px;\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-neutral-700);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n /* Drag State */\n .vertical-drag {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap:18px;\n font-size: var(--nile-type-scale-3);\n color: var(--nile-colors-blue-700);\n background-color: var(--nile-colors-blue-100);\n border-color: var(--nile-colors-blue-500);\n }\n\n /* Uploading State */\n .vertical-uploading {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: center;\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-uploading:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .loading {\n display: flex;\n justify-content: center;\n align-items: center;\n padding-top: 40px;\n }\n\n .corner-icon {\n position: absolute;\n top: 10px;\n right: 10px;\n }\n\n /* Preview State */\n .vertical-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .image-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n object-fit: cover;\n width: 80px;\n height: 80px;\n border-radius: var(--nile-radius-radius-xs);\n }\n\n /* Vertical No Preview State */\n .vertical-no-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-no-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .vertical-document-icon {\n height: 80px;\n width: 80px;\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px solid var(--nile-colors-blue-400);\n background-color: var(--nile-colors-blue-100);\n }\n\n /* Veritcal Error State */\n .vertical-error {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-error:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .error-bg {\n background-color: var(--nile-colors-red-100);\n border: 1px solid var(--nile-colors-red-400);\n }\n\n .file-info-vertical-state {\n width: 100%;\n text-align: center;\n }\n\n .file-info-vertical-state p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n padding-bottom: 6px;\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 222px;\n }\n \n .file-info-vertical-state nile-tooltip span, .file-info-vertical-state span {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n display: block;\n max-width: 212px;\n }\n\n .error-message {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: center\n }\n\n .error-p {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n width: 216px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: center;\n }\n\n .error-p p {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 0;\n }\n\n /* Displaing uploaded files CSS */\n .display-files {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n gap: 8px;\n width: 648px;\n min-width: 230px;\n max-height: 200px;\n overflow-y: auto;\n border: 1px solid var(--nile-colors-neutral-700);\n border-radius: var(--nile-radius-radius-xs);\n scrollbar-width: none;\n padding: 12px;\n }\n\n ul, li {\n width: 100%;\n }\n\n li {\n list-style-type: none;\n }\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-file-preview.css.js","sourceRoot":"","sources":["../../../src/nile-file-preview/nile-file-preview.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkkBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * FileUpload CSS\n */\nexport const styles = css`\n :host {\n display: inline-block;\n width: 100%;\n }\n\n * {\n padding: 0px;\n margin: 0px;\n box-sizing: border-box;\n }\n\n .wrapper {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 18px;\n height: auto;\n }\n\n input {\n display: none;\n }\n\n .horizontal-div {\n max-height: 62px;\n width: 100%;\n min-width: 230px;\n padding: 12px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 6px;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px dashed var(--nile-colors-neutral-500);\n color: var(--nile-colors-dark-900);\n background-color: var(--nile-colors-white-base);\n }\n \n .hover-state {\n border-color: var(--nile-colors-primary-600);\n }\n\n .vertical-div {\n height: auto;\n min-height: 156px;\n min-width: 240px;\n width: 240px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n padding: 12px;\n border-radius: var(--nile-radius-radius-xs);\n color: var(--nile-colors-dark-900);\n border: 1px dashed var(--nile-colors-neutral-500);\n background-color: var(--nile-colors-white-base);\n position: relative; \n margin-bottom: 10px;\n }\n\n .vertical-div:hover {\n border-color: var(--nile-colors-blue-500);\n }\n\n .outer-div-border {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .inner-div {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 18px;\n box-sizing: border-box;\n }\n\n .icons-container {\n display: flex;\n gap: 4px;\n }\n\n .general-icon {\n transform: rotate(-18.11deg);\n position: relative;\n bottom: 3px;\n }\n\n .image-icon {\n transform: rotate(15deg);\n }\n\n .icon:hover {\n cursor: pointer;\n }\n\n /* Uploading State */\n nile-loader {\n line-height: 0;\n }\n\n .uploading {\n height: 62px;\n width: 648px;\n padding: 12px;\n min-width: 230px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n box-sizing: border-box;\n border: 1px solid var(--nile-colors-neutral-400);\n border-radius: 4px;\n background-color: var(--nile-colors-white-base);\n }\n \n .uploading:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .progress-bar-container {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .progress-bar-percent {\n width: 100%;\n display: flex;\n justify-content: space-between;\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .progress-bar-container p {\n margin: 0px;\n }\n\n .progress-bar-container > p {\n font-size: var(--nile-type-scale-1);\n color: var(--nile-colors-dark-500);\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .progress-bar-container .horizontal-file-name {\n font-size: var(--nile-type-scale-1);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-500);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 538px;\n }\n \n .progress-bar-container .vertical-file-name {\n font-size: var(--nile-type-scale-1);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-500);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 212px;\n }\n\n /* PREVIEW STATE */\n .preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .preview-inner {\n display: flex;\n align-items: center;\n gap: 18px;\n }\n\n .preview-image-container {\n height: 42px;\n width: 42px;\n }\n\n .preview-image-container img, iframe {\n height: 42px;\n width: 42px;\n object-fit: contain;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .preview nile-icon:hover {\n cursor: pointer;\n }\n\n /* NO PREVIEW STATE */\n .no-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .no-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .no-preview-container {\n display: flex;\n align-items: center;\n gap: 18px;\n }\n\n .document-icon {\n height: 40px;\n width: 40px;\n border-radius: var(--nile-radius-radius-xs);\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--nile-colors-blue-400);\n background-color: var(--nile-colors-blue-100);\n }\n\n .document-icon nile-icon {\n height: 40px;\n width: 40px;\n }\n \n .preview-file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 4px;\n }\n\n .preview-file-info p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 100%;\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 100%;\n }\n\n .no-preview > nile-icon:hover {\n cursor: pointer;\n }\n\n /* ERROR STATE */\n .error {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .error:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .error-container {\n width: 95%;\n display: flex;\n align-items: center;\n gap: 18px;\n }\n\n .error-icon {\n height: 40px;\n width: 40px;\n border-radius: var(--nile-radius-radius-xs);\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--nile-colors-red-400);\n background-color: var(--nile-colors-red-100);\n }\n\n .error-icon nile-icon {\n height: 40px;\n width: 40px;\n }\n \n .file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 4px;\n }\n\n .file-info p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 538px;\n }\n \n .file-info nile-tooltip span, .file-info span {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n max-width: 90%;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-align: left;\n }\n\n .error > nile-icon:hover {\n cursor: pointer;\n }\n\n .file-info .horizontal-file-name {\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-900);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 538px;\n }\n\n /* VERTICAL STATE START */\n /* Default State */\n .vertical-default {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 18px\n }\n\n .content-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n text-align: center;\n }\n\n .content-container h4 {\n font-weight: var(--nile-font-weight-regular);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .content-container p:first-child {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .content-container p:last-child {\n margin: 0px;\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-neutral-700);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n /* Drag State */\n .vertical-drag {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap:18px;\n font-size: var(--nile-type-scale-3);\n color: var(--nile-colors-blue-700);\n background-color: var(--nile-colors-blue-100);\n border-color: var(--nile-colors-blue-500);\n }\n\n /* Uploading State */\n .vertical-uploading {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: center;\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-uploading:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .loading {\n display: flex;\n justify-content: center;\n align-items: center;\n padding-top: 40px;\n }\n\n .corner-icon {\n position: absolute;\n top: 10px;\n right: 10px;\n }\n\n /* Preview State */\n .vertical-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .image-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n object-fit: cover;\n width: 80px;\n height: 80px;\n border-radius: var(--nile-radius-radius-xs);\n }\n\n /* Vertical No Preview State */\n .vertical-no-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-no-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .vertical-document-icon {\n height: 80px;\n width: 80px;\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px solid var(--nile-colors-blue-400);\n background-color: var(--nile-colors-blue-100);\n }\n\n /* Veritcal Error State */\n .vertical-error {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-error:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .error-bg {\n background-color: var(--nile-colors-red-100);\n border: 1px solid var(--nile-colors-red-400);\n }\n\n .file-info-vertical-state {\n width: 100%;\n text-align: center;\n }\n\n .file-info-vertical-state p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n padding-bottom: 6px;\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 222px;\n }\n \n .file-info-vertical-state nile-tooltip span, .file-info-vertical-state span {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n display: block;\n max-width: 212px;\n }\n\n .error-message {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: center\n }\n\n .error-p {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n width: 216px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: center;\n }\n\n .error-p p {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 0;\n }\n\n /* Displaing uploaded files CSS */\n .display-files {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n gap: 8px;\n width: 648px;\n min-width: 230px;\n max-height: 200px;\n overflow-y: auto;\n border: 1px solid var(--nile-colors-neutral-700);\n border-radius: var(--nile-radius-radius-xs);\n scrollbar-width: none;\n padding: 12px;\n }\n\n ul, li {\n width: 100%;\n }\n\n li {\n list-style-type: none;\n }\n .preview-file-info p {\n width: 100%;\n }\n`;\n\nexport default [styles];\n"]}