@aquera/nile-elements 0.1.63-beta-1.2 → 0.1.64-beta-1.0

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

@@ -66,7 +66,7 @@ export function getHorizontalNoPreviewState(file, originalUrl) {
           <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
         </div>
         <div class="preview-file-info">
-          <p>${truncateString(file.name, file?.type)}</p>
+          <p>${file.name}</p>
           <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
         </div>
       </div>
@@ -82,7 +82,8 @@ export function getHorizontalNoPreviewState(file, originalUrl) {
     </div>
   `;
 }
-export function getHorizontalErrorState(file, errorMessage, originalUrl) {
+export function getHorizontalErrorState(file, errorMessage, originalUrl, nileFilePreview) {
+    truncateString(nileFilePreview);
     return html `
     <div class="error horizontal-div" part="horizontal-error-state">
       <div class="error-container">
@@ -91,9 +92,11 @@ export function getHorizontalErrorState(file, errorMessage, originalUrl) {
         </div>
         <div class="file-info">
           <p class="horizontal-file-name">${file.name}</p>
-          <nile-tooltip content=${errorMessage}>
-            <span>${errorMessage}</span>
-          </nile-tooltip>
+          ${nileFilePreview.isStringTruncated
+        ? html `<nile-tooltip content=${errorMessage}>
+                  <span>${errorMessage}</span>
+                </nile-tooltip>`
+        : html `<span>${errorMessage}</span>`}
         </div>
       </div>
       <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancelIcon">
@@ -167,7 +170,7 @@ export function getVerticalNoPreviewState(file, originalUrl) {
       </div>
 
       <div class="content-container">
-        <p>${truncateString(file.name, file?.type)}</p>
+        <p>${file.name}</p>
         <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
       </div>
 
@@ -181,7 +184,8 @@ export function getVerticalNoPreviewState(file, originalUrl) {
     </div>
   `;
 }
-export function getVerticalErrorState(file, errorMessage, originalUrl) {
+export function getVerticalErrorState(file, errorMessage, originalUrl, nileFilePreview) {
+    truncateString(nileFilePreview);
     return html `
     <div class="vertical-div vertical-error" part="vertical-error-state">
       <div class="vertical-document-icon error-bg">
@@ -190,9 +194,11 @@ export function getVerticalErrorState(file, errorMessage, originalUrl) {
 
       <div class="file-info-vertical-state">
         <p class="vertical-file-name">${file.name}</p>
-        <nile-tooltip content=${errorMessage}>
-          <span>${errorMessage}</span>
-        </nile-tooltip>
+        ${nileFilePreview.isStringTruncated
+        ? html `<nile-tooltip content=${errorMessage}>
+                <span>${errorMessage}</span>
+              </nile-tooltip>`
+        : html `<span>${errorMessage}</span>`}
       </div>
 
       <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancelIcon">

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

@@ -1 +1 @@
-{"version":3,"file":"nile-file-preview.template.js","sourceRoot":"","sources":["../../../src/nile-file-preview/nile-file-preview.template.ts"],"names":[],"mappings":"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","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}"]}
+{"version":3,"file":"nile-file-preview.template.js","sourceRoot":"","sources":["../../../src/nile-file-preview/nile-file-preview.template.ts"],"names":[],"mappings":"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","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=\"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>${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}"]}

package/dist/src/nile-file-preview/utils/nile-file-preview.util.d.ts

@@ -5,5 +5,4 @@ export declare const removeFile: (removeFile: File, e: CustomEvent<RemoveFileDet
 export declare const cancelFileUpload: (file: File, e: CustomEvent<RemoveFileDetail>) => void;
 export declare const formatFileSize: (bytes: number) => string;
 export declare const getFileType: (type: string) => string;
-export declare const truncateString: (str: string, type: string) => string;
-export declare const fileUploadServerError: (nileFilePreview: NileFilePreview) => void;
+export declare const truncateString: (nileFilePreview: NileFilePreview) => void;

package/dist/src/nile-file-preview/utils/nile-file-preview.util.js

@@ -50,14 +50,14 @@ export const formatFileSize = (bytes) => {
 export const getFileType = (type) => {
     return type.split('/')[1].toUpperCase();
 };
-export const truncateString = (str, type) => {
-    return str.length > 20 ? (str.slice(0, 10) + '...' + str.slice(str.length - 5, str.length - 1) + '.' + type.split('/')[1]) : str;
-};
-export const fileUploadServerError = (nileFilePreview) => {
-    document.addEventListener('nile-network-error', (e) => {
-        console.log('working file preview');
-        nileFilePreview.errorMessage = FilePreviewErrorMessages.NETWORK_ERROR;
+export const truncateString = (nileFilePreview) => {
+    if (nileFilePreview.variant === 'vertical' && nileFilePreview.errorMessage.length > 34) {
+        nileFilePreview.isStringTruncated = true;
         nileFilePreview.requestUpdate();
-    });
+    }
+    else if (nileFilePreview.variant === 'horizontal' && nileFilePreview.errorMessage.length > 96) {
+        nileFilePreview.isStringTruncated = true;
+        nileFilePreview.requestUpdate();
+    }
 };
 //# sourceMappingURL=nile-file-preview.util.js.map

package/dist/src/nile-file-preview/utils/nile-file-preview.util.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-file-preview.util.js","sourceRoot":"","sources":["../../../../src/nile-file-preview/utils/nile-file-preview.util.ts"],"names":[],"mappings":"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","sourcesContent":["import NileFilePreview from \"../nile-file-preview\";\nimport { RemoveFileDetail, FilePreviewEvent, FilePreviewErrorMessages } from \"../types\";\n\nexport const generatePreviewUrl = (file: File): Promise<string> => {\n  return new Promise((resolve, reject) => {\n    const reader = new FileReader();\n\n    if (file) {\n      reader.readAsDataURL(file);\n    } else {\n      reject(FilePreviewErrorMessages.NO_FILE_SELECTED);\n    }\n\n    reader.onload = () => {\n      const previewUrl = reader.result as string;\n      resolve(previewUrl);\n    };\n\n    reader.onerror = (error) => {\n      reject(FilePreviewErrorMessages.UNABLE_TO_GENEARTE_URL);\n    }\n  });\n}\n\nexport const removeFile = (removeFile: File, e: CustomEvent<RemoveFileDetail>, originalUrl: string): void => {\n  if (e.target) {\n    e.target.dispatchEvent(\n      new CustomEvent(FilePreviewEvent.NILE_REMOVE, {\n        detail: { value: removeFile, url: originalUrl },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n};\n\nexport const cancelFileUpload = (file: File, e: CustomEvent<RemoveFileDetail>) => {\n  if(e.target) {\n    e.target.dispatchEvent(\n      new CustomEvent(FilePreviewEvent.NILE_CANCEL_UPLOAD, {\n        detail: { file: file },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n}\n\nexport const formatFileSize = (bytes: number): string => {\n  const kb = bytes / 1024;\n  const mb = kb / 1024;\n  const gb = mb / 1024;\n\n  if (gb >= 1) return gb.toFixed(2) + ' GB';\n  if (mb >= 1) return mb.toFixed(2) + ' MB';\n  if (kb >= 1) return kb.toFixed(2) + ' KB';\n  return bytes + ' B';\n}\n\nexport const getFileType = (type: string): string => {\n  return type.split('/')[1].toUpperCase();\n}\n\nexport const truncateString = (str: string, type: string): string => {\n  return str.length > 20 ? (str.slice(0, 10) + '...' +  str.slice(str.length - 5, str.length - 1) + '.' + type.split('/')[1]) : str;\n}\n\nexport const fileUploadServerError = (nileFilePreview: NileFilePreview) => {\n  document.addEventListener('nile-network-error', (e: any) => {\n    console.log('working file preview');\n    \n    nileFilePreview.errorMessage = FilePreviewErrorMessages.NETWORK_ERROR;\n    nileFilePreview.requestUpdate();\n  });\n}"]}
+{"version":3,"file":"nile-file-preview.util.js","sourceRoot":"","sources":["../../../../src/nile-file-preview/utils/nile-file-preview.util.ts"],"names":[],"mappings":"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","sourcesContent":["import NileFilePreview from \"../nile-file-preview\";\nimport { RemoveFileDetail, FilePreviewEvent, FilePreviewErrorMessages } from \"../types\";\n\nexport const generatePreviewUrl = (file: File): Promise<string> => {\n  return new Promise((resolve, reject) => {\n    const reader = new FileReader();\n\n    if (file) {\n      reader.readAsDataURL(file);\n    } else {\n      reject(FilePreviewErrorMessages.NO_FILE_SELECTED);\n    }\n\n    reader.onload = () => {\n      const previewUrl = reader.result as string;\n      resolve(previewUrl);\n    };\n\n    reader.onerror = (error) => {\n      reject(FilePreviewErrorMessages.UNABLE_TO_GENEARTE_URL);\n    }\n  });\n}\n\nexport const removeFile = (removeFile: File, e: CustomEvent<RemoveFileDetail>, originalUrl: string): void => {\n  if (e.target) {\n    e.target.dispatchEvent(\n      new CustomEvent(FilePreviewEvent.NILE_REMOVE, {\n        detail: { value: removeFile, url: originalUrl },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n};\n\nexport const cancelFileUpload = (file: File, e: CustomEvent<RemoveFileDetail>) => {\n  if(e.target) {\n    e.target.dispatchEvent(\n      new CustomEvent(FilePreviewEvent.NILE_CANCEL_UPLOAD, {\n        detail: { file: file },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n}\n\nexport const formatFileSize = (bytes: number): string => {\n  const kb = bytes / 1024;\n  const mb = kb / 1024;\n  const gb = mb / 1024;\n\n  if (gb >= 1) return gb.toFixed(2) + ' GB';\n  if (mb >= 1) return mb.toFixed(2) + ' MB';\n  if (kb >= 1) return kb.toFixed(2) + ' KB';\n  return bytes + ' B';\n}\n\nexport const getFileType = (type: string): string => {\n  return type.split('/')[1].toUpperCase();\n}\n\nexport const truncateString = (nileFilePreview: NileFilePreview): void => {\n  if(nileFilePreview.variant === 'vertical' && nileFilePreview.errorMessage.length > 34) {\n    nileFilePreview.isStringTruncated = true;\n    nileFilePreview.requestUpdate();\n  } else if(nileFilePreview.variant === 'horizontal' && nileFilePreview.errorMessage.length > 96) {\n    nileFilePreview.isStringTruncated = true;\n    nileFilePreview.requestUpdate();\n  }\n}"]}

package/dist/src/nile-file-upload/nile-file-upload.css.js

@@ -597,7 +597,7 @@ export const styles = css `
     color: var(--nile-colors-red-700);
     white-space: nowrap;
     text-align: left;
-    max-width: 538px;
+    max-width: 560px;
     overflow: hidden;
     text-overflow: ellipsis;
   }

package/dist/src/nile-file-upload/nile-file-upload.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-file-upload.css.js","sourceRoot":"","sources":["../../../src/nile-file-upload/nile-file-upload.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAimBxB,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: flex-start;\n    width: min-content;\n  }\n\n  input {\n    display: none;\n  }\n\n  .horizontal-div {\n    margin-bottom: 10px;\n    height: 62px;\n    max-width: 648px;\n    width: 648px;\n    min-width: 230px;\n    padding: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 18px;\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-border {\n    border-color: var(--nile-colors-primary-600);\n  }\n\n  .title {\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-dark-900);\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    max-width: 454px;\n    width: 100%;\n  }\n\n  .subtitle {\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-dark-500);\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    max-width: 454px;\n  }\n\n  .vertical-div {\n    min-height: 156px;\n    height: auto;\n    min-width: 240px;\n    width: 240px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\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  }\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  .content {\n    display: flex;  \n    flex-direction: column;\n    justify-content: center;\n    gap: 8px;\n  }\n\n  .content h4 {\n    margin: 0px;\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: center;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: 454px;\n  }\n      \n  .content p {\n    margin: 0px;\n    font-size: var(--nile-type-scale-2);\n    color: var(--nile-colors-neutral-700);\n    text-align: center;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: 454px;\n  }\n\n  ::slotted(img), ::slotted(nile-icon), ::slotted(video) {\n    --nile-svg-height: 24px !important ;\n    --nile-svg-width: 24px !important ;\n    height:42px;\n    width: 42px;\n    object-fit: cover;\n  }\n\n  .browse-file-button {\n    cursor: pointer;\n  }\n\n  /*  DISABLED STATE */\n  .disable {\n    background-color: var(--nile-colors-dark-200);\n    opacity: 0.8;\n    cursor: not-allowed;\n    color: var(--nile-colors-neutral-500);\n    pointer-events: none;\n  }\n\n  /* DRAGGING */\n  .dragging {\n    background-color: var(--nile-colors-blue-100);\n    border-color: var(--nile-colors-primary-600);\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 18px;\n    color: var(--nile-colors-blue-700);\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\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  .uploading {\n    width: 648px;\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  }\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: 0px;\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  }\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    gap: 18px;\n  }\n\n  .preview-image-container {\n    height: 42px;\n    width: 42px;\n  }\n\n  .preview-image-container img {\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-file-info {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    gap: 8px;\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  }\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  }\n\n  .preview nile-icon:hover {\n    cursor: pointer;\n  }\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    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: 8px;\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  }\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  }\n\n  .no-preview > nile-icon:hover {\n    cursor: pointer;\n  }\n\n  /* ERROR STATE */\n  \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: 100%;\n    display: flex;\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: 8px;\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  }\n\n  .file-info p:last-of-type{\n    color: var(--nile-colors-red-700);\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .error > nile-icon:hover {\n    cursor: pointer;\n  }\n\n  /* VARTICAL STATE START */\n  /* Default State */\n\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  }\n\n  .content-container div.title {\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: center;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: 222px;\n  }\n\n  .content-container div.subtitle {\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-dark-500);\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  }\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  .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: start;\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\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  /* for the upload error messages */\n  .upload-error {\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-red-700);\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    gap: var(--nile-spacing-one-half-x);\n  }\n\n  .upload-error > nile-tooltip > span {\n    color: var(--nile-colors-red-700);\n    white-space: nowrap;\n    text-align: left;\n    max-width: 538px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .vertical-upload-error {\n    display: flex;\n    gap: 4px;\n  }\n\n  .vertical-upload-error > nile-tooltip > span  {\n    color: var(--nile-colors-red-700);\n    white-space: nowrap;\n    text-align: left;\n    width: 222px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--nile-type-scale-2);\n    display: inline-block;\n  }\n`;\n\nexport default [styles];"]}
+{"version":3,"file":"nile-file-upload.css.js","sourceRoot":"","sources":["../../../src/nile-file-upload/nile-file-upload.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAimBxB,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: flex-start;\n    width: min-content;\n  }\n\n  input {\n    display: none;\n  }\n\n  .horizontal-div {\n    margin-bottom: 10px;\n    height: 62px;\n    max-width: 648px;\n    width: 648px;\n    min-width: 230px;\n    padding: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 18px;\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-border {\n    border-color: var(--nile-colors-primary-600);\n  }\n\n  .title {\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-dark-900);\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    max-width: 454px;\n    width: 100%;\n  }\n\n  .subtitle {\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-dark-500);\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    max-width: 454px;\n  }\n\n  .vertical-div {\n    min-height: 156px;\n    height: auto;\n    min-width: 240px;\n    width: 240px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\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  }\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  .content {\n    display: flex;  \n    flex-direction: column;\n    justify-content: center;\n    gap: 8px;\n  }\n\n  .content h4 {\n    margin: 0px;\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: center;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: 454px;\n  }\n      \n  .content p {\n    margin: 0px;\n    font-size: var(--nile-type-scale-2);\n    color: var(--nile-colors-neutral-700);\n    text-align: center;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: 454px;\n  }\n\n  ::slotted(img), ::slotted(nile-icon), ::slotted(video) {\n    --nile-svg-height: 24px !important ;\n    --nile-svg-width: 24px !important ;\n    height:42px;\n    width: 42px;\n    object-fit: cover;\n  }\n\n  .browse-file-button {\n    cursor: pointer;\n  }\n\n  /*  DISABLED STATE */\n  .disable {\n    background-color: var(--nile-colors-dark-200);\n    opacity: 0.8;\n    cursor: not-allowed;\n    color: var(--nile-colors-neutral-500);\n    pointer-events: none;\n  }\n\n  /* DRAGGING */\n  .dragging {\n    background-color: var(--nile-colors-blue-100);\n    border-color: var(--nile-colors-primary-600);\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 18px;\n    color: var(--nile-colors-blue-700);\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\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  .uploading {\n    width: 648px;\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  }\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: 0px;\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  }\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    gap: 18px;\n  }\n\n  .preview-image-container {\n    height: 42px;\n    width: 42px;\n  }\n\n  .preview-image-container img {\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-file-info {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    gap: 8px;\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  }\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  }\n\n  .preview nile-icon:hover {\n    cursor: pointer;\n  }\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    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: 8px;\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  }\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  }\n\n  .no-preview > nile-icon:hover {\n    cursor: pointer;\n  }\n\n  /* ERROR STATE */\n  \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: 100%;\n    display: flex;\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: 8px;\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  }\n\n  .file-info p:last-of-type{\n    color: var(--nile-colors-red-700);\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .error > nile-icon:hover {\n    cursor: pointer;\n  }\n\n  /* VARTICAL STATE START */\n  /* Default State */\n\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  }\n\n  .content-container div.title {\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: center;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: 222px;\n  }\n\n  .content-container div.subtitle {\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-dark-500);\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  }\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  .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: start;\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\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  /* for the upload error messages */\n  .upload-error {\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-red-700);\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    gap: var(--nile-spacing-one-half-x);\n  }\n\n  .upload-error > nile-tooltip > span {\n    color: var(--nile-colors-red-700);\n    white-space: nowrap;\n    text-align: left;\n    max-width: 560px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .vertical-upload-error {\n    display: flex;\n    gap: 4px;\n  }\n\n  .vertical-upload-error > nile-tooltip > span  {\n    color: var(--nile-colors-red-700);\n    white-space: nowrap;\n    text-align: left;\n    width: 222px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--nile-type-scale-2);\n    display: inline-block;\n  }\n`;\n\nexport default [styles];"]}

package/dist/src/nile-file-upload/nile-file-upload.d.ts

@@ -36,6 +36,7 @@ export declare class NileFileUpload extends NileElement {
     input: HTMLInputElement;
     uploadRequests: Map<File, XMLHttpRequest>;
     fileSizeExceededFilesNumber: number;
+    isStringTruncated: boolean;
     private dragHandler;
     connectedCallback(): void;
     firstUpdated(changedProps: ChangedPropsInterface): void;

package/dist/src/nile-file-upload/nile-file-upload.js

@@ -39,6 +39,7 @@ let NileFileUpload = class NileFileUpload extends NileElement {
         this.autoUpload = true;
         this.uploadRequests = new Map();
         this.fileSizeExceededFilesNumber = 0;
+        this.isStringTruncated = false;
         this.setState = (newState) => {
             this.state = newState;
         };
@@ -100,25 +101,25 @@ let NileFileUpload = class NileFileUpload extends NileElement {
     getHorizontalState() {
         switch (this.state) {
             case FileUploadState.DEFAULT:
-                return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes);
+                return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);
             case FileUploadState.DISABLED:
-                return getHorizontalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes);
+                return getHorizontalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);
             case FileUploadState.DRAG:
                 return getHorizontalDragState();
             default:
-                return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes);
+                return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);
         }
     }
     getVerticalState() {
         switch (this.state) {
             case FileUploadState.DEFAULT:
-                return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes);
+                return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);
             case FileUploadState.DISABLED:
-                return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes);
+                return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);
             case FileUploadState.DRAG:
                 return getVerticalDragState();
             default:
-                return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes);
+                return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);
         }
     }
     disconnectedCallback() {

package/dist/src/nile-file-upload/nile-file-upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-file-upload.js","sourceRoot":"","sources":["../../../src/nile-file-upload/nile-file-upload.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2025\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 { styles } from './nile-file-upload.css';\nimport { ChangedPropsInterface } from './types/file-upload.type'\nimport NileElement from '../internal/nile-element';\nimport { DragHandler } from './utils/drag-drop.util';\nimport { getHorizontalDisabledState } from './nile-file-upload.template'\nimport { FileUploadDefaults } from './types/file-upload.enums';\nimport { LitElement, html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { FileUploadState, FileUploadVariant, FileUploadError, FileUploadEvent } from './types/file-upload.enums';\nimport { setUpDragHandler, addGlobalListeners, addInternalListeners, uploadFiles, cancelFileUpload } from './utils/file-validation.util';\nimport {\n  getHorizontalDefaultState,\n  getHorizontalDragState,\n  getVerticalDefaultState,\n  getVerticalDisabledState,\n  getVerticalDragState,\n} from './nile-file-upload.template';\n\n/**\n * Nile file-upload component.\n *\n * @tag nile-file-upload\n *\n */\n@customElement('nile-file-upload')\nexport class NileFileUpload extends NileElement {\n  /**\n   * The styles for nile-file-upload\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @property({ type: String }) size: string = \"10MB\";\n  @property({ type: Boolean}) error: boolean = false;\n  @property({ type: String }) errorMessage: string = \"\";\n  @property({ type: Boolean}) allowMultiple: boolean = false;\n  @property({ type: Boolean}) allowDuplicates: boolean = false;\n  @property({ type: Array  }) allowedTypes: string[] = [];\n  @property({ type: Array  }) uploadedFiles: File[] = [];\n  @property({ type: String }) title: string = FileUploadDefaults.TITLE;\n  @property({ type: String }) subtitle: string = FileUploadDefaults.SUBTITLE;\n  @property({ type: String }) state: FileUploadState = FileUploadState.DEFAULT; \n  @property({ type: String }) variant: FileUploadVariant = FileUploadVariant.HORIZONTAL;\n  @property({ type: String }) fileUploadUrl: string = \"\";\n  @property({ type: Boolean}) autoUpload: boolean = true;\n  @query('input') input!: HTMLInputElement;\n  public uploadRequests = new Map<File, XMLHttpRequest>();\n  public fileSizeExceededFilesNumber: number = 0;\n  \n  private dragHandler!: DragHandler;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.emit(FileUploadEvent.NILE_INIT);\n  }\n\n  firstUpdated(changedProps: ChangedPropsInterface): void {\n    super.firstUpdated(changedProps);\n\n    this.dragHandler = new DragHandler();\n    setUpDragHandler(this, this.dragHandler);\n    addInternalListeners(this, this.dragHandler, this.uploadRequests);\n    addGlobalListeners(this.dragHandler);\n  }\n\n  updated(changedProps: ChangedPropsInterface): void {\n    super.updated(changedProps);\n\n    if (changedProps.has('uploadedFiles')) {\n      // if(this.uploadedFiles.length === 0) {\n      //   this.errorMessage = \"\";\n      // }\n\n      if(this.fileUploadUrl && this.autoUpload) {\n        uploadFiles(this);\n      }\n      this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });\n    } else if (changedProps.has('state')) {\n      this.dragHandler.setValuesInDragHandler(this.state);\n    }\n\n    if(changedProps.has('autoUpload') && this.autoUpload) {\n      if(this.fileUploadUrl && this.autoUpload) {\n        uploadFiles(this);\n      }\n      this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });\n    }\n  }\n\n  private browseFiles(): void {\n    this.emit(FileUploadEvent.NILE_BROWSE);\n    this.errorMessage = \"\";\n    this.input.click();\n  }\n\n  public setState = (newState: FileUploadState): void => {\n    this.state = newState;\n  }\n\n  render(): TemplateResult {\n    return html`\n      ${this.getState()}\n    `;\n  }\n\n  private getState(): TemplateResult {\n    return this.variant === FileUploadVariant.HORIZONTAL\n      ? this.getHorizontalState()\n      : this.getVerticalState();\n  }\n\n  private getHorizontalState(): TemplateResult {\n    switch(this.state) {\n      case FileUploadState.DEFAULT:\n        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes);\n\n      case FileUploadState.DISABLED:\n        return getHorizontalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes);\n\n      case FileUploadState.DRAG:\n        return getHorizontalDragState();\n\n      default:\n        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes);\n    }\n  }\n\n  private getVerticalState(): TemplateResult {\n    switch(this.state) {\n      case FileUploadState.DEFAULT:\n        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes);\n\n      case FileUploadState.DISABLED:\n        return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes);\n\n      case FileUploadState.DRAG:\n        return getVerticalDragState();\n\n      default:\n        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes);\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.emit(FileUploadEvent.NILE_DESTROY);\n  }\n}\n"]}
+{"version":3,"file":"nile-file-upload.js","sourceRoot":"","sources":["../../../src/nile-file-upload/nile-file-upload.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2025\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 { styles } from './nile-file-upload.css';\nimport { ChangedPropsInterface } from './types/file-upload.type'\nimport NileElement from '../internal/nile-element';\nimport { DragHandler } from './utils/drag-drop.util';\nimport { getHorizontalDisabledState } from './nile-file-upload.template'\nimport { FileUploadDefaults } from './types/file-upload.enums';\nimport { LitElement, html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { FileUploadState, FileUploadVariant, FileUploadError, FileUploadEvent } from './types/file-upload.enums';\nimport { setUpDragHandler, addGlobalListeners, addInternalListeners, uploadFiles, cancelFileUpload } from './utils/file-validation.util';\nimport {\n  getHorizontalDefaultState,\n  getHorizontalDragState,\n  getVerticalDefaultState,\n  getVerticalDisabledState,\n  getVerticalDragState,\n} from './nile-file-upload.template';\n\n/**\n * Nile file-upload component.\n *\n * @tag nile-file-upload\n *\n */\n@customElement('nile-file-upload')\nexport class NileFileUpload extends NileElement {\n  /**\n   * The styles for nile-file-upload\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @property({ type: String }) size: string = \"10MB\";\n  @property({ type: Boolean}) error: boolean = false;\n  @property({ type: String }) errorMessage: string = \"\";\n  @property({ type: Boolean}) allowMultiple: boolean = false;\n  @property({ type: Boolean}) allowDuplicates: boolean = false;\n  @property({ type: Array  }) allowedTypes: string[] = [];\n  @property({ type: Array  }) uploadedFiles: File[] = [];\n  @property({ type: String }) title: string = FileUploadDefaults.TITLE;\n  @property({ type: String }) subtitle: string = FileUploadDefaults.SUBTITLE;\n  @property({ type: String }) state: FileUploadState = FileUploadState.DEFAULT; \n  @property({ type: String }) variant: FileUploadVariant = FileUploadVariant.HORIZONTAL;\n  @property({ type: String }) fileUploadUrl: string = \"\";\n  @property({ type: Boolean}) autoUpload: boolean = true;\n  @query('input') input!: HTMLInputElement;\n  public uploadRequests = new Map<File, XMLHttpRequest>();\n  public fileSizeExceededFilesNumber: number = 0;\n  public isStringTruncated: boolean = false;\n  \n  private dragHandler!: DragHandler;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.emit(FileUploadEvent.NILE_INIT);\n  }\n\n  firstUpdated(changedProps: ChangedPropsInterface): void {\n    super.firstUpdated(changedProps);\n\n    this.dragHandler = new DragHandler();\n    setUpDragHandler(this, this.dragHandler);\n    addInternalListeners(this, this.dragHandler, this.uploadRequests);\n    addGlobalListeners(this.dragHandler);\n  }\n\n  updated(changedProps: ChangedPropsInterface): void {\n    super.updated(changedProps);\n\n    if (changedProps.has('uploadedFiles')) {\n      // if(this.uploadedFiles.length === 0) {\n      //   this.errorMessage = \"\";\n      // }\n\n      if(this.fileUploadUrl && this.autoUpload) {\n        uploadFiles(this);\n      }\n      this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });\n    } else if (changedProps.has('state')) {\n      this.dragHandler.setValuesInDragHandler(this.state);\n    }\n\n    if(changedProps.has('autoUpload') && this.autoUpload) {\n      if(this.fileUploadUrl && this.autoUpload) {\n        uploadFiles(this);\n      }\n      this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });\n    }\n  }\n\n  private browseFiles(): void {\n    this.emit(FileUploadEvent.NILE_BROWSE);\n    this.errorMessage = \"\";\n    this.input.click();\n  }\n\n  public setState = (newState: FileUploadState): void => {\n    this.state = newState;\n  }\n\n  render(): TemplateResult {\n    return html`\n      ${this.getState()}\n    `;\n  }\n\n  private getState(): TemplateResult {\n    return this.variant === FileUploadVariant.HORIZONTAL\n      ? this.getHorizontalState()\n      : this.getVerticalState();\n  }\n\n  private getHorizontalState(): TemplateResult {\n    switch(this.state) {\n      case FileUploadState.DEFAULT:\n        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);\n\n      case FileUploadState.DISABLED:\n        return getHorizontalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);\n\n      case FileUploadState.DRAG:\n        return getHorizontalDragState();\n\n      default:\n        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);\n    }\n  }\n\n  private getVerticalState(): TemplateResult {\n    switch(this.state) {\n      case FileUploadState.DEFAULT:\n        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);\n\n      case FileUploadState.DISABLED:\n        return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);\n\n      case FileUploadState.DRAG:\n        return getVerticalDragState();\n\n      default:\n        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.emit(FileUploadEvent.NILE_DESTROY);\n  }\n}\n"]}

package/dist/src/nile-file-upload/nile-file-upload.template.d.ts

@@ -2,9 +2,10 @@ import { TemplateResult } from 'lit';
 import './nile-file-upload.css';
 import { DragHandler } from './utils/drag-drop.util';
 import { FileUploadState } from './types/file-upload.enums';
-export declare const getHorizontalDefaultState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, state: FileUploadState, errorMessage: string, allowedTypes: string[]) => TemplateResult;
-export declare const getHorizontalDisabledState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, state: FileUploadState, errorMessage: string, allowedTypes: string[]) => TemplateResult;
+import { NileFileUpload } from './nile-file-upload';
+export declare const getHorizontalDefaultState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, state: FileUploadState, errorMessage: string, allowedTypes: string[], nileFileUpload: NileFileUpload) => TemplateResult;
+export declare const getHorizontalDisabledState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, state: FileUploadState, errorMessage: string, allowedTypes: string[], nileFileUpload: NileFileUpload) => TemplateResult;
 export declare const getHorizontalDragState: () => TemplateResult;
-export declare const getVerticalDefaultState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, errorMessage: string, allowedTypes: string[]) => TemplateResult;
-export declare const getVerticalDisabledState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, errorMessage: string, allowedTypes: string[]) => TemplateResult;
+export declare const getVerticalDefaultState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, errorMessage: string, allowedTypes: string[], nileFileUpload: NileFileUpload) => TemplateResult;
+export declare const getVerticalDisabledState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, errorMessage: string, allowedTypes: string[], nileFileUpload: NileFileUpload) => TemplateResult;
 export declare const getVerticalDragState: () => TemplateResult;

package/dist/src/nile-file-upload/nile-file-upload.template.js

@@ -2,7 +2,10 @@ import { html } from 'lit';
 import './nile-file-upload.css';
 import { classMap } from 'lit-html/directives/class-map.js';
 import { FileUploadDefaults } from './types/file-upload.enums';
-const baseHorizontalState = (browseFiles, title, subtitle, disabled, dragHandler, state, errorMessage, allowedTypes) => html `
+import { truncateString } from './utils/file-validation.util';
+const baseHorizontalState = (browseFiles, title, subtitle, disabled, dragHandler, state, errorMessage, allowedTypes, nileFileUpload) => {
+    truncateString(nileFileUpload);
+    return html `
   <div class="wrapper" part="horizontal-wrapper">
     <div part="horizontal-div" class=${classMap({ 'hover-border': state === "hover", 'horizontal-div': true, 'disable': disabled })}>
       <div part="inner-div" class="inner-div">
@@ -28,17 +31,20 @@ const baseHorizontalState = (browseFiles, title, subtitle, disabled, dragHandler
       </slot>
     </div>
     ${errorMessage ?
-    html `<div class="upload-error">
+        html `<div class="upload-error">
         <nile-icon name="warning" size="12" color="var(--nile-colors-red-700)"></nile-icon>
-        <nile-tooltip content=${errorMessage}>
-          <span>${errorMessage}</span>
-        </nile-tooltip>
+        ${nileFileUpload.isStringTruncated
+            ? html `<nile-tooltip content=${errorMessage}>
+                <span>${errorMessage}</span>
+              </nile-tooltip>`
+            : html `<span>${errorMessage}</span>`}
       </div>` :
-    html ``}
+        html ``}
   </div>
-`;
-export const getHorizontalDefaultState = (browseFiles, title, subtitle, dragHandler, state, errorMessage, allowedTypes) => baseHorizontalState(browseFiles, title, subtitle, false, dragHandler, state, errorMessage, allowedTypes);
-export const getHorizontalDisabledState = (browseFiles, title, subtitle, dragHandler, state, errorMessage, allowedTypes) => baseHorizontalState(browseFiles, title, subtitle, true, dragHandler, state, errorMessage, allowedTypes);
+  `;
+};
+export const getHorizontalDefaultState = (browseFiles, title, subtitle, dragHandler, state, errorMessage, allowedTypes, nileFileUpload) => baseHorizontalState(browseFiles, title, subtitle, false, dragHandler, state, errorMessage, allowedTypes, nileFileUpload);
+export const getHorizontalDisabledState = (browseFiles, title, subtitle, dragHandler, state, errorMessage, allowedTypes, nileFileUpload) => baseHorizontalState(browseFiles, title, subtitle, true, dragHandler, state, errorMessage, allowedTypes, nileFileUpload);
 export const getHorizontalDragState = () => html `
   <div part="horizontal-drag-state" class="horizontal-div dragging">
     <div class="icons-container">
@@ -59,7 +65,9 @@ export const getHorizontalDragState = () => html `
   </div>
 `;
 //  Vertical States
-const baseVerticalState = (browseFiles, title, subtitle, disabled, dragHandler, errorMessage, allowedTypes) => html `
+const baseVerticalState = (browseFiles, title, subtitle, disabled, dragHandler, errorMessage, allowedTypes, nileFileUpload) => {
+    truncateString(nileFileUpload);
+    return html `
   <div part="vertical-wrapper" class="wrapper">
     <div part="vertical-default" class="vertical-default vertical-div ${disabled ? 'disable' : ''}">
       <slot name="upload-icon">
@@ -83,17 +91,18 @@ const baseVerticalState = (browseFiles, title, subtitle, disabled, dragHandler,
       </slot>
     </div>
     ${errorMessage ?
-    html `<div class="vertical-upload-error">
+        html `<div class="vertical-upload-error">
         <nile-icon name="warning" size="12" color="var(--nile-colors-red-700)"></nile-icon>
         <nile-tooltip content=${errorMessage}>
           <span>${errorMessage}</span>
         </nile-tooltip>
       </div>` :
-    html ``}
+        html ``}
   </div>
-`;
-export const getVerticalDefaultState = (browseFiles, title, subtitle, dragHandler, errorMessage, allowedTypes) => baseVerticalState(browseFiles, title, subtitle, false, dragHandler, errorMessage, allowedTypes);
-export const getVerticalDisabledState = (browseFiles, title, subtitle, dragHandler, errorMessage, allowedTypes) => baseVerticalState(browseFiles, title, subtitle, true, dragHandler, errorMessage, allowedTypes);
+  `;
+};
+export const getVerticalDefaultState = (browseFiles, title, subtitle, dragHandler, errorMessage, allowedTypes, nileFileUpload) => baseVerticalState(browseFiles, title, subtitle, false, dragHandler, errorMessage, allowedTypes, nileFileUpload);
+export const getVerticalDisabledState = (browseFiles, title, subtitle, dragHandler, errorMessage, allowedTypes, nileFileUpload) => baseVerticalState(browseFiles, title, subtitle, true, dragHandler, errorMessage, allowedTypes, nileFileUpload);
 export const getVerticalDragState = () => html `
   <div part="vertical-drag-state" class="vertical-div vertical-drag">
     <div class="icons-container">

package/dist/src/nile-file-upload/nile-file-upload.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-file-upload.template.js","sourceRoot":"","sources":["../../../src/nile-file-upload/nile-file-upload.template.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport './nile-file-upload.css';\nimport { DragHandler } from './utils/drag-drop.util';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { FileUploadDefaults, FileUploadState } from './types/file-upload.enums';\n\nconst baseHorizontalState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  disabled: boolean,\n  dragHandler: DragHandler,\n  state: FileUploadState,\n  errorMessage: string,\n  allowedTypes: string[]\n): TemplateResult => html`\n  <div class=\"wrapper\" part=\"horizontal-wrapper\">\n    <div part=\"horizontal-div\" class=${classMap({ 'hover-border': state === \"hover\", 'horizontal-div': true, 'disable': disabled })}>\n      <div part=\"inner-div\" class=\"inner-div\">\n        <slot class=\"upload-icon-slot\" name=\"upload-icon\">\n          <nile-icon name=\"upload\" size=\"24\"></nile-icon>\n        </slot>\n        <div part=\"content\" class=\"content\">\n          <div class=\"title\">${title}</div>\n          <div class=\"subtitle\">${subtitle}</div>\n        </div>\n      </div>\n      <input\n        type=\"file\"\n        ?disabled=${disabled}\n        @change=${(e: Event | DragEvent) => { dragHandler.handleFiles(e) }}\n        multiple\n        accept=${allowedTypes.join(',')}\n      />\n      <slot class=\"browse-file-button\" @click=${disabled ? undefined : browseFiles} name=\"browse-file-button\">\n        <nile-button variant=\"tertiary\" ?disabled=${disabled}>\n          Browse File\n        </nile-button>\n      </slot>\n    </div>\n    ${errorMessage ?\n      html`<div class=\"upload-error\">\n        <nile-icon name=\"warning\" size=\"12\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n        <nile-tooltip content=${errorMessage}>\n          <span>${errorMessage}</span>\n        </nile-tooltip>\n      </div>` :\n      html``\n    }\n  </div>\n`;\n\nexport const getHorizontalDefaultState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  dragHandler: DragHandler,\n  state: FileUploadState,\n  errorMessage: string,\n  allowedTypes: string[]\n): TemplateResult => baseHorizontalState(browseFiles, title, subtitle, false, dragHandler, state, errorMessage, allowedTypes);\n\nexport const getHorizontalDisabledState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  dragHandler: DragHandler,\n  state: FileUploadState,\n  errorMessage: string,\n  allowedTypes: string[]\n): TemplateResult => baseHorizontalState(browseFiles, title, subtitle, true, dragHandler, state, errorMessage, allowedTypes);\n\nexport const getHorizontalDragState = (): TemplateResult => html`\n  <div part=\"horizontal-drag-state\" class=\"horizontal-div dragging\">\n    <div class=\"icons-container\">\n      <nile-icon\n        color=\"var(--nile-colors-blue-500)\"\n        name=\"general\"\n        size=\"20\"\n        class=\"general-icon\"\n      ></nile-icon>\n      <nile-icon\n        color=\"var(--nile-colors-blue-500)\"\n        name=\"image\"\n        size=\"24\"\n        class=\"image-icon\"\n      ></nile-icon>\n    </div>\n    <p>${FileUploadDefaults.DRAG_STATE_DEFAULT}</p>\n  </div>\n`;\n\n//  Vertical States\nconst baseVerticalState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  disabled: boolean,\n  dragHandler: DragHandler,\n  errorMessage: string,\n  allowedTypes: string[]\n): TemplateResult => html`\n  <div part=\"vertical-wrapper\" class=\"wrapper\">\n    <div part=\"vertical-default\" class=\"vertical-default vertical-div ${disabled ? 'disable' : ''}\">\n      <slot name=\"upload-icon\">\n        <nile-icon name=\"upload\" size=\"24\"></nile-icon>\n      </slot>\n      <div part=\"vertical-content-container\" class=\"content-container\">\n        <div class=\"title\">${title}</div>\n        <div class=\"subtitle\">${subtitle}</div>\n      </div>\n      <input\n        type=\"file\"\n        ?disabled=${disabled}\n        @change=${(e: Event | DragEvent) => dragHandler.handleFiles(e)}\n        multiple\n        accept=${allowedTypes.join(',')}\n      />\n      <slot @click=${disabled ? undefined : browseFiles} name=\"browse-file-button\">\n        <nile-button variant=\"tertiary\" ?disabled=${disabled}>\n          Browse File\n        </nile-button>\n      </slot>\n    </div>\n    ${errorMessage ?\n      html`<div class=\"vertical-upload-error\">\n        <nile-icon name=\"warning\" size=\"12\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n        <nile-tooltip content=${errorMessage}>\n          <span>${errorMessage}</span>\n        </nile-tooltip>\n      </div>` :\n      html``\n    }\n  </div>\n`;\n\nexport const getVerticalDefaultState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  dragHandler: DragHandler,\n  errorMessage: string,\n  allowedTypes: string[]\n): TemplateResult => baseVerticalState(browseFiles, title, subtitle, false, dragHandler, errorMessage, allowedTypes);\n\nexport const getVerticalDisabledState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  dragHandler: DragHandler,\n  errorMessage: string,\n  allowedTypes: string[]\n): TemplateResult => baseVerticalState(browseFiles, title, subtitle, true, dragHandler, errorMessage, allowedTypes);\n\n\nexport const getVerticalDragState = (): TemplateResult => html`\n  <div part=\"vertical-drag-state\" class=\"vertical-div vertical-drag\">\n    <div class=\"icons-container\">\n      <nile-icon\n        color=\"var(--nile-colors-blue-500)\"\n        name=\"general\"\n        size=\"20\"\n        class=\"general-icon\"\n      ></nile-icon>\n      <nile-icon\n        color=\"var(--nile-colors-blue-500)\"\n        name=\"image\"\n        size=\"24\"\n        class=\"image-icon\"\n      ></nile-icon>\n    </div>\n    <p>${FileUploadDefaults.DRAG_STATE_DEFAULT}</p>\n  </div>\n`;"]}
+{"version":3,"file":"nile-file-upload.template.js","sourceRoot":"","sources":["../../../src/nile-file-upload/nile-file-upload.template.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport './nile-file-upload.css';\nimport { DragHandler } from './utils/drag-drop.util';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { FileUploadDefaults, FileUploadState } from './types/file-upload.enums';\nimport { truncateString } from './utils/file-validation.util';\nimport { NileFileUpload } from './nile-file-upload';\n\nconst baseHorizontalState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  disabled: boolean,\n  dragHandler: DragHandler,\n  state: FileUploadState,\n  errorMessage: string,\n  allowedTypes: string[],\n  nileFileUpload: NileFileUpload\n): TemplateResult => {\n  truncateString(nileFileUpload);\n  return html`\n  <div class=\"wrapper\" part=\"horizontal-wrapper\">\n    <div part=\"horizontal-div\" class=${classMap({ 'hover-border': state === \"hover\", 'horizontal-div': true, 'disable': disabled })}>\n      <div part=\"inner-div\" class=\"inner-div\">\n        <slot class=\"upload-icon-slot\" name=\"upload-icon\">\n          <nile-icon name=\"upload\" size=\"24\"></nile-icon>\n        </slot>\n        <div part=\"content\" class=\"content\">\n          <div class=\"title\">${title}</div>\n          <div class=\"subtitle\">${subtitle}</div>\n        </div>\n      </div>\n      <input\n        type=\"file\"\n        ?disabled=${disabled}\n        @change=${(e: Event | DragEvent) => { dragHandler.handleFiles(e) }}\n        multiple\n        accept=${allowedTypes.join(',')}\n      />\n      <slot class=\"browse-file-button\" @click=${disabled ? undefined : browseFiles} name=\"browse-file-button\">\n        <nile-button variant=\"tertiary\" ?disabled=${disabled}>\n          Browse File\n        </nile-button>\n      </slot>\n    </div>\n    ${errorMessage ?\n      html`<div class=\"upload-error\">\n        <nile-icon name=\"warning\" size=\"12\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n        ${\n          nileFileUpload.isStringTruncated\n            ? html`<nile-tooltip content=${errorMessage}>\n                <span>${errorMessage}</span>\n              </nile-tooltip>`\n            : html`<span>${errorMessage}</span>`\n        }\n      </div>` :\n      html``\n    }\n  </div>\n  `;\n}\n\nexport const getHorizontalDefaultState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  dragHandler: DragHandler,\n  state: FileUploadState,\n  errorMessage: string,\n  allowedTypes: string[],\n  nileFileUpload: NileFileUpload\n): TemplateResult => baseHorizontalState(browseFiles, title, subtitle, false, dragHandler, state, errorMessage, allowedTypes, nileFileUpload);\n\nexport const getHorizontalDisabledState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  dragHandler: DragHandler,\n  state: FileUploadState,\n  errorMessage: string,\n  allowedTypes: string[],\n  nileFileUpload: NileFileUpload\n): TemplateResult => baseHorizontalState(browseFiles, title, subtitle, true, dragHandler, state, errorMessage, allowedTypes, nileFileUpload);\n\nexport const getHorizontalDragState = (): TemplateResult => html`\n  <div part=\"horizontal-drag-state\" class=\"horizontal-div dragging\">\n    <div class=\"icons-container\">\n      <nile-icon\n        color=\"var(--nile-colors-blue-500)\"\n        name=\"general\"\n        size=\"20\"\n        class=\"general-icon\"\n      ></nile-icon>\n      <nile-icon\n        color=\"var(--nile-colors-blue-500)\"\n        name=\"image\"\n        size=\"24\"\n        class=\"image-icon\"\n      ></nile-icon>\n    </div>\n    <p>${FileUploadDefaults.DRAG_STATE_DEFAULT}</p>\n  </div>\n`;\n\n//  Vertical States\nconst baseVerticalState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  disabled: boolean,\n  dragHandler: DragHandler,\n  errorMessage: string,\n  allowedTypes: string[],\n  nileFileUpload: NileFileUpload\n): TemplateResult => {\n  truncateString(nileFileUpload);\n  return html`\n  <div part=\"vertical-wrapper\" class=\"wrapper\">\n    <div part=\"vertical-default\" class=\"vertical-default vertical-div ${disabled ? 'disable' : ''}\">\n      <slot name=\"upload-icon\">\n        <nile-icon name=\"upload\" size=\"24\"></nile-icon>\n      </slot>\n      <div part=\"vertical-content-container\" class=\"content-container\">\n        <div class=\"title\">${title}</div>\n        <div class=\"subtitle\">${subtitle}</div>\n      </div>\n      <input\n        type=\"file\"\n        ?disabled=${disabled}\n        @change=${(e: Event | DragEvent) => dragHandler.handleFiles(e)}\n        multiple\n        accept=${allowedTypes.join(',')}\n      />\n      <slot @click=${disabled ? undefined : browseFiles} name=\"browse-file-button\">\n        <nile-button variant=\"tertiary\" ?disabled=${disabled}>\n          Browse File\n        </nile-button>\n      </slot>\n    </div>\n    ${errorMessage ?\n      html`<div class=\"vertical-upload-error\">\n        <nile-icon name=\"warning\" size=\"12\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n        <nile-tooltip content=${errorMessage}>\n          <span>${errorMessage}</span>\n        </nile-tooltip>\n      </div>` :\n      html``\n    }\n  </div>\n  `;\n}\n\nexport const getVerticalDefaultState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  dragHandler: DragHandler,\n  errorMessage: string,\n  allowedTypes: string[],\n  nileFileUpload: NileFileUpload\n): TemplateResult => baseVerticalState(browseFiles, title, subtitle, false, dragHandler, errorMessage, allowedTypes, nileFileUpload);\n\nexport const getVerticalDisabledState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  dragHandler: DragHandler,\n  errorMessage: string,\n  allowedTypes: string[],\n  nileFileUpload: NileFileUpload\n): TemplateResult => baseVerticalState(browseFiles, title, subtitle, true, dragHandler, errorMessage, allowedTypes, nileFileUpload);\n\n\nexport const getVerticalDragState = (): TemplateResult => html`\n  <div part=\"vertical-drag-state\" class=\"vertical-div vertical-drag\">\n    <div class=\"icons-container\">\n      <nile-icon\n        color=\"var(--nile-colors-blue-500)\"\n        name=\"general\"\n        size=\"20\"\n        class=\"general-icon\"\n      ></nile-icon>\n      <nile-icon\n        color=\"var(--nile-colors-blue-500)\"\n        name=\"image\"\n        size=\"24\"\n        class=\"image-icon\"\n      ></nile-icon>\n    </div>\n    <p>${FileUploadDefaults.DRAG_STATE_DEFAULT}</p>\n  </div>\n`;"]}

package/dist/src/nile-file-upload/utils/file-validation.util.d.ts

@@ -10,3 +10,4 @@ export declare function uploadFiles(nileFileUpload: NileFileUpload): void;
 export declare const cancelFileUpload: (nileFileUpload: NileFileUpload, uploadRequests: Map<File, XMLHttpRequest>) => void;
 export declare const preventDefaultAndStopPropagation: (event: Event | DragEvent) => void;
 export declare const removeFile: (uploadedFiles: File[], nileFileUpload: NileFileUpload) => void;
+export declare const truncateString: (nileFileUpload: NileFileUpload) => void;

package/dist/src/nile-file-upload/utils/file-validation.util.js

@@ -157,4 +157,15 @@ export const removeFile = (uploadedFiles, nileFileUpload) => {
         nileFileUpload.requestUpdate();
     });
 };
+export const truncateString = (nileFileUpload) => {
+    if (nileFileUpload.variant === 'vertical' && nileFileUpload.errorMessage.length > 34) {
+        nileFileUpload.isStringTruncated = true;
+        nileFileUpload.requestUpdate();
+    }
+    else if (nileFileUpload.variant === 'horizontal' && nileFileUpload.errorMessage.length > 96) {
+        console.log('working');
+        nileFileUpload.isStringTruncated = true;
+        nileFileUpload.requestUpdate();
+    }
+};
 //# sourceMappingURL=file-validation.util.js.map