@aquera/nile-elements 1.0.1-beta-1.4 → 1.0.1-beta-1.6

package/src/nile-file-preview/nile-file-preview.template.ts

@@ -6,13 +6,15 @@ import './nile-file-preview.css';
 import { html, TemplateResult } from 'lit';
 import { FilePreviewErrorMessages, RemoveFileDetail } from './types';
 import { removeFile, cancelFileUpload } from './utils';
+import { formatFileSize, truncateString, getFileType } from './utils/nile-file-preview.util';
+import { NileFilePreview } from './nile-file-preview';
 
  export function getHorizontalUploadingState(
   file: File,
   uploadStatus: number
  ): TemplateResult {
     return html`
-      <div class="uploading">
+      <div class="uploading" part="horizontal-uploading-state">
         <nile-loader width="24" height="24"></nile-loader>
         <div class="progress-bar-container">
           <div class="progress-bar-percent">
@@ -20,14 +22,14 @@ import { removeFile, cancelFileUpload } from './utils';
             <p>${uploadStatus}%</p>
           </div>
           <nile-progress-bar
+            part="horizontal-progress-bar"
             value="${uploadStatus}"
           ></nile-progress-bar>
-          <p>${file.name}</p>
+          <p class="horizontal-file-name">${file.name}</p>
         </div>
         <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name="cancelIcon">
           <nile-icon
-            name="var(--nile-icon-close, var(--ng-icon-x-close))"
-            method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+            name="close"
             size="14"
             class="icon"
           ></nile-icon>
@@ -42,7 +44,7 @@ export function getHorizontalPreviewState(
   originalUrl: string
 ): TemplateResult {
   return html`
-    <div class="preview horizontal-div">
+    <div class="preview horizontal-div" part="horizontal-preview-state">
       <div class="preview-inner">
         <div class="preview-image-container">
             <img
@@ -53,18 +55,18 @@ export function getHorizontalPreviewState(
         </div>
         <div class="preview-file-info">
           <p>${file.name}</p>
-          <p>${(file.type.split('/')[1]).toUpperCase()} &#8226; ${(Number(file.size) / 1024).toFixed(0)}KB</p>
+          <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
         </div>
       </div>
-      <slot name="cancelIcon">
-        <nile-icon
-          @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}
-          name="var(--nile-icon-trash, var(--ng-icon-trash-01))"
-          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
-          size="14"
-          class="icon"
-        ></nile-icon>
-      </slot>
+      <div class="preview-actions">
+        <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancel-icon">
+          <nile-icon
+            name="trash"
+            size="14"
+            class="icon"
+          ></nile-icon>
+        </slot>
+      </div>
     </div>
   `;
 }
@@ -74,22 +76,20 @@ export function getHorizontalNoPreviewState(
   originalUrl: string
 ): TemplateResult {
   return html`
-    <div class="no-preview horizontal-div">
+    <div class="no-preview horizontal-div" part="horizontal-no-preview-state">
       <div class="no-preview-container">
         <div class="document-icon">
-          <nile-icon name="var(--nile-icon-general, var(--ng-icon-file-06))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="20" color="var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-600))"></nile-icon>
+          <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
         </div>
         <div class="preview-file-info">
           <p>${file.name}</p>
-          <p>${(file.type.split('/')[1]).toUpperCase()} &#8226; ${(Number(file.size) / 1034).toFixed(0)}KB</p>
+          <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
         </div>
       </div>
       <div>
-        <slot name="cancelIcon">
+        <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancelIcon">
           <nile-icon
-            @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}
-            name="var(--nile-icon-trash, var(--ng-icon-trash-01))"
-            method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+            name="trash"
             size="14"
             class="icon"
           ></nile-icon>
@@ -102,26 +102,30 @@ export function getHorizontalNoPreviewState(
 export function getHorizontalErrorState(
   file: File,
   errorMessage: string,
-  originalUrl: string
+  originalUrl: string,
+  nileFilePreview: NileFilePreview
 ): TemplateResult {
+  truncateString(nileFilePreview);
   return html`
-    <div class="error horizontal-div">
+    <div class="error horizontal-div" part="horizontal-error-state">
       <div class="error-container">
         <div class="error-icon">
-          <nile-icon name="var(--nile-icon-info, var(--ng-icon-info-circle))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="20" color="var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))"></nile-icon>
+          <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
         </div>
         <div class="file-info">
-          <p>${file.name}</p>
-          <nile-tooltip content=${errorMessage}>
-            <p>${errorMessage}</p>
-          </nile-tooltip>
+          <p class="horizontal-file-name">${file.name}</p>
+          ${
+            nileFilePreview.isStringTruncated
+              ? html`<nile-tooltip content=${errorMessage}>
+                  <span>${errorMessage}</span>
+                </nile-tooltip>`
+              : html`<span>${errorMessage}</span>`
+          }
         </div>
       </div>
-      <slot name="cancelIcon">
+      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancelIcon">
           <nile-icon
-            @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}
-            name="var(--nile-icon-close, var(--ng-icon-x-close))"
-            method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+            name="close"
             size="14"
             class="icon"
           ></nile-icon>
@@ -136,7 +140,7 @@ export function getVerticalUploadingState(
   uploadStatus: number
 ): TemplateResult {
   return html`
-    <div class="vertical-div vertical-uploading">
+    <div class="vertical-div vertical-uploading" part="vertical-uploading-state">
       <div class="loading">
         <nile-loader width="24" height="24"></nile-loader>
       </div>
@@ -147,14 +151,12 @@ export function getVerticalUploadingState(
           <p>${uploadStatus}%</p>
         </div>
         <nile-progress-bar value=${uploadStatus}></nile-progress-bar>
-        <p>${file.name}</p>
+        <p class="vertical-file-name">${file.name}</p>
       </div>
 
-      <slot name="cancelIcon">
+      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name="cancelIcon">
         <nile-icon
-          @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)}
-          name="var(--nile-icon-close, var(--ng-icon-x-close))"
-          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+          name="close"
           size="14"
           class="icon corner-icon"
         ></nile-icon>
@@ -170,7 +172,7 @@ export function getVerticalPreviewState(
   originalUrl: string
 ): TemplateResult {
   return html`
-    <div class="vertical-div vertical-preview">
+    <div class="vertical-div vertical-preview" part="vertical-preview-state">
       <div>
         <img
           class="image-preview"
@@ -181,14 +183,12 @@ export function getVerticalPreviewState(
 
       <div class="content-container">
         <p>${file.name}</p>
-         <p>${(file.type.split('/')[1]).toUpperCase()} &#8226; ${(Number(file.size) / 1024).toFixed(0)}KB</p>
+         <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
       </div>
 
-      <slot name="cancelIcon">
+      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancelIcon">
         <nile-icon
-          @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}
-          name="var(--nile-icon-trash, var(--ng-icon-trash-01))"
-          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+          name="trash"
           size="14"
           class="icon corner-icon"
         ></nile-icon>
@@ -202,21 +202,19 @@ export function getVerticalNoPreviewState(
   originalUrl: string
 ): TemplateResult {
   return html`
-    <div class="vertical-div vertical-no-preview">
+    <div class="vertical-div vertical-no-preview" part="vertical-no-preview-state">
       <div class="vertical-document-icon">
-        <nile-icon name="var(--nile-icon-general, var(--ng-icon-file-06))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="20" color="var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-600))"></nile-icon>
+        <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
       </div>
 
       <div class="content-container">
         <p>${file.name}</p>
-        <p>${file.type} &#8226; ${(Number(file.size) / 1024).toFixed(0)}KB</p>
+        <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
       </div>
 
-      <slot name="cancelIcon">
+      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancelIcon">
         <nile-icon
-          @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}
-          name="var(--nile-icon-trash, var(--ng-icon-trash-01))"
-          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+          name="trash"
           size="14"
           class="icon corner-icon"
         ></nile-icon>
@@ -228,29 +226,34 @@ export function getVerticalNoPreviewState(
 export function getVerticalErrorState(
   file: File,
   errorMessage: string,
-  originalUrl: string
+  originalUrl: string,
+  nileFilePreview: NileFilePreview
 ): TemplateResult {
+  truncateString(nileFilePreview);
   return html`
-    <div class="vertical-div vertical-error">
+    <div class="vertical-div vertical-error" part="vertical-error-state">
       <div class="vertical-document-icon error-bg">
-        <nile-icon name="var(--nile-icon-info, var(--ng-icon-info-circle))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="20" color="var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))"></nile-icon>
+        <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
       </div>
 
       <div class="file-info-vertical-state">
-        <p>${file.name}</p>
-        <nile-tooltip content=${errorMessage}>
-          <p>${errorMessage}</p>
-        </nile-tooltip>
+        <p class="vertical-file-name">${file.name}</p>
+        ${
+          nileFilePreview.isStringTruncated
+            ? html`<nile-tooltip content=${errorMessage}>
+                <span>${errorMessage}</span>
+              </nile-tooltip>`
+            : html`<span>${errorMessage}</span>`
+        }
       </div>
 
-      <slot name="cancelIcon" @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}>
+      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancelIcon">
         <nile-icon
-          name="var(--nile-icon-close, var(--ng-icon-x-close))"
-          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+          name="close"
           size="14"
           class="icon corner-icon"
         ></nile-icon>
       </slot>
     </div>
   `;
-}
+}

package/src/nile-file-preview/nile-file-preview.ts

@@ -43,12 +43,12 @@ export class NileFilePreview extends NileElement {
 	@property({ type: Object }) inputFile: File; 
 	@property({ type: String }) fileUrl: string = "";
 	@property({ type: Number }) uploadStatus: number = 0;
-  @property({ type: Array  }) allowedTypes: string[] = [];
 	@property({ type: String }) state: FilePreviewState = FilePreviewState.DEFAULT;
 	@property({ type: String }) variant: FilePreviewVariant = FilePreviewVariant.HORIZONTAL;
   @property({ type: String }) inputFileName: string = "";
 	private inputFileHtml: TemplateResult | null = null;
   private originalUrl: string = "";
+  public isStringTruncated: boolean = false;
 
   /**
    * Render method
@@ -60,18 +60,19 @@ export class NileFilePreview extends NileElement {
     this.emit(FilePreviewEvent.NILE_INIT);
   }
 
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    super.firstUpdated(_changedProperties);
+  }
+
   protected updated(changedProperties: PropertyValues): void {
     if(changedProperties.has('uploadStatus') && this.uploadStatus) {
       if(this.uploadStatus < 100) {
         this.createUploadState(this.inputFile, this.uploadStatus);
-        this.emit(FilePreviewEvent.NILE_UPLOADING);
-
       } else {
         this.createState(this.inputFile);
       }
-
     } else if (changedProperties.has('inputFile') && this.inputFile) {
-      this.createState(this.inputFile);
+      this.createState(this.inputFile); 
       this.emit(FilePreviewEvent.NILE_RECEIVE);
 
     } else if (changedProperties.has('fileUrl') && this.fileUrl) {
@@ -105,10 +106,11 @@ export class NileFilePreview extends NileElement {
     } catch (error) {
       const dummyFile = new File([], this.inputFileName || FilePreviewErrorMessages.UNKNOWN_FILE_NAME, { type: 'application/octet-stream' });
       this.errorMessage = FilePreviewErrorMessages.FAILED_TO_LOAD;
+      console.error(this.errorMessage);
 
       this.inputFileHtml = this.variant === FilePreviewVariant.HORIZONTAL
-        ? getHorizontalErrorState(dummyFile, this.errorMessage, this.originalUrl)
-        : getVerticalErrorState(dummyFile, this.errorMessage, this.originalUrl);
+        ? getHorizontalErrorState(dummyFile, this.errorMessage, this.originalUrl, this)
+        : getVerticalErrorState(dummyFile, this.errorMessage, this.originalUrl, this);
       this.requestUpdate();
     }
   }
@@ -116,8 +118,8 @@ export class NileFilePreview extends NileElement {
 	public async createState(file: File): Promise<void> {
     const isHorizontal = this.variant === FilePreviewVariant.HORIZONTAL;
 
-    if (this.allowedTypes.includes(file.type) && !this.errorMessage) {  
-      if (file.type.startsWith('image/')) {
+    if (!this.errorMessage) {  
+      if (file && file.type.startsWith('image/')) {
         try {
           const url = await generatePreviewUrl(file);
           this.inputFileHtml = isHorizontal
@@ -134,27 +136,57 @@ export class NileFilePreview extends NileElement {
           : getVerticalNoPreviewState(file, this.originalUrl);
       }
     } else {
-      this.errorMessage = !this.errorMessage
-        ? FilePreviewErrorMessages.INVALID_FORMAT
-        : FilePreviewErrorMessages.UPLOAD_CANCEL;
-
       this.inputFileHtml = isHorizontal
-        ? getHorizontalErrorState(file, this.errorMessage, this.originalUrl)
-        : getVerticalErrorState(file, this.errorMessage, this.originalUrl);
+        ? getHorizontalErrorState(file, this.errorMessage, this.originalUrl, this)
+        : getVerticalErrorState(file, this.errorMessage, this.originalUrl, this);
     }
     this.requestUpdate();
   }
 
-  private dummyFile = new File(['sdfjbs ewhf'], "dummy.txt", { type: "text/plain" });
+  private customFile = new File([], "Harsh", { type: "image/png" })
+
+  getState(): TemplateResult {
+    if(this.variant === "horizontal") return this.getHorizontalStates();
+    return this.getVerticalStates();
+  }
+
+  getHorizontalStates(): TemplateResult {
+    switch(this.state) {
+      case FilePreviewState.UPLOADING:
+        return getHorizontalUploadingState(this.customFile, 2);
+      case FilePreviewState.PREVIEW:
+        return getHorizontalPreviewState("https://s6.imgcdn.dev/YINe6a.jpg", this.customFile, this.originalUrl);
+      case FilePreviewState.NO_PREVIEW:
+        return getHorizontalNoPreviewState(this.customFile, this.originalUrl);
+      case FilePreviewState.ERROR:
+        return getHorizontalErrorState(this.customFile, FilePreviewErrorMessages.CUSTOM_ERROR, this.originalUrl, this);
+      default:
+        return this.inputFileHtml || html``;
+    }
+  }
+
+  getVerticalStates(): TemplateResult {
+    switch(this.state) {
+      case FilePreviewState.UPLOADING:
+        return getVerticalUploadingState(this.customFile, 2);
+      case FilePreviewState.PREVIEW:
+        return getVerticalPreviewState("https://s6.imgcdn.dev/YINe6a.jpg", this.customFile, this.originalUrl);
+      case FilePreviewState.NO_PREVIEW:
+        return getVerticalNoPreviewState(this.customFile, this.originalUrl);
+      case FilePreviewState.ERROR:
+        return getVerticalErrorState(this.customFile, FilePreviewErrorMessages.CUSTOM_ERROR, this.originalUrl, this);
+      default:
+        return this.inputFileHtml || html``;
+    }
+  }
 
   public render(): TemplateResult {
-    return html`
-			${this.inputFileHtml ?
-				this.inputFileHtml :
-				html``
-			}
-    `;
+    if (this.state) {
+      return this.getState();
+    }
+    return html`${this.inputFileHtml ?? html``}`;
   }
+  
 
   disconnectedCallback(): void {
     super.disconnectedCallback();

package/src/nile-file-preview/types/nile-file-preview.enums.ts

@@ -13,18 +13,19 @@ export enum FilePreviewVariant {
 
 export enum FilePreviewErrorMessages {
   INVALID_FORMAT = "Invalid File Format. Please try again.",
-  SIZE_LIMIT = "Size limit exceeded",
+  SIZE_LIMIT = "File exceeds size limit.",
   FAILED_TO_LOAD = "Failed to load file from URL",
   UNKNOWN_FILE_NAME = 'unknown-file',
   UPLOAD_CANCEL = "File upload cancelled.",
   NO_FILE_SELECTED = "No file selected.",
-  UNABLE_TO_GENEARTE_URL = "Unable to generate the url."
+  UNABLE_TO_GENEARTE_URL = "Unable to generate the url.",
+  NETWORK_ERROR = "Network error! Please try again later.",
+  CUSTOM_ERROR = "Error Occured!"
 }
 
 export enum FilePreviewEvent {
   NILE_INIT = "nile-init",
   NILE_RECEIVE = "nile-receive",
-  NILE_UPLOADING = "nile-uploding",
   NILE_REMOVE = "nile-remove",
   NILE_CANCEL_UPLOAD = "nile-cancel-upload",
   NILE_DESTROY = "nile-destroy"

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

@@ -44,4 +44,29 @@ export const cancelFileUpload = (file: File, e: CustomEvent<RemoveFileDetail>) =
       })
     );
   }
+}
+
+export const formatFileSize = (bytes: number): string => {
+  const kb = bytes / 1024;
+  const mb = kb / 1024;
+  const gb = mb / 1024;
+
+  if (gb >= 1) return gb.toFixed(2) + ' GB';
+  if (mb >= 1) return mb.toFixed(2) + ' MB';
+  if (kb >= 1) return kb.toFixed(2) + ' KB';
+  return bytes + ' B';
+}
+
+export const getFileType = (type: string): string => {
+  return type.split('/')[1].toUpperCase();
+}
+
+export const truncateString = (nileFilePreview: NileFilePreview): void => {
+  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();
+  }
 }