@aquera/nile-elements 0.1.55 → 0.1.56-beta-1.1

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

@@ -0,0 +1,243 @@
+/**
+ * Template File for nile-preview component
+ */
+
+import './nile-file-preview.css';
+import { html, TemplateResult } from 'lit';
+import { FilePreviewErrorMessages, RemoveFileDetail } from './types';
+import { removeFile, cancelFileUpload } from './utils';
+import { formatFileSize } from './utils/nile-file-preview.util';
+
+ export function getHorizontalUploadingState(
+  file: File,
+  uploadStatus: number
+ ): TemplateResult {
+    return html`
+      <div class="uploading">
+        <nile-loader width="24" height="24"></nile-loader>
+        <div class="progress-bar-container">
+          <div class="progress-bar-percent">
+            <p>Uploading File...</p>
+            <p>${uploadStatus}%</p>
+          </div>
+          <nile-progress-bar
+            value="${uploadStatus}"
+          ></nile-progress-bar>
+          <p>${file.name}</p>
+        </div>
+        <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name="cancelIcon">
+          <nile-icon
+            name="close"
+            size="14"
+            class="icon"
+          ></nile-icon>
+        </slot>
+      </div>
+    `;
+  }
+
+export function getHorizontalPreviewState(
+  url: string,
+  file: File,
+  originalUrl: string
+): TemplateResult {
+  return html`
+    <div class="preview horizontal-div">
+      <div class="preview-inner">
+        <div class="preview-image-container">
+            <img
+              class="image-preview"
+              src=${url}
+              alt=${file.name}
+            />
+        </div>
+        <div class="preview-file-info">
+          <p>${file.name}</p>
+          <p>${(file.type.split('/')[1]).toUpperCase()} &#8226; ${formatFileSize(Number(file.size))}</p>
+        </div>
+      </div>
+      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancelIcon">
+        <nile-icon
+          name="trash"
+          size="14"
+          class="icon"
+        ></nile-icon>
+      </slot>
+    </div>
+  `;
+}
+
+export function getHorizontalNoPreviewState(
+  file: File,
+  originalUrl: string
+): TemplateResult {
+  return html`
+    <div class="no-preview horizontal-div">
+      <div class="no-preview-container">
+        <div class="document-icon">
+          <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
+        </div>
+        <div class="preview-file-info">
+          <p>${file.name}</p>
+          <p>${(file.type.split('/')[1]).toUpperCase()} &#8226; ${formatFileSize(Number(file.size))}</p>
+        </div>
+      </div>
+      <div>
+        <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancelIcon">
+          <nile-icon
+            name="trash"
+            size="14"
+            class="icon"
+          ></nile-icon>
+        </slot>
+      </div>
+    </div>
+  `;
+}
+
+export function getHorizontalErrorState(
+  file: File,
+  errorMessage: string,
+  originalUrl: string
+): TemplateResult {
+  return html`
+    <div class="error horizontal-div">
+      <div class="error-container">
+        <div class="error-icon">
+          <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
+        </div>
+        <div class="file-info">
+          <p>${file.name}</p>
+          <nile-tooltip content=${errorMessage}>
+            <p>${errorMessage}</p>
+          </nile-tooltip>
+        </div>
+      </div>
+      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancelIcon">
+          <nile-icon
+            name="close"
+            size="14"
+            class="icon"
+          ></nile-icon>
+        </slot>
+    </div>
+  `;
+}
+
+// vertical states
+export function getVerticalUploadingState(
+  file: File,
+  uploadStatus: number
+): TemplateResult {
+  return html`
+    <div class="vertical-div vertical-uploading">
+      <div class="loading">
+        <nile-loader width="24" height="24"></nile-loader>
+      </div>
+
+      <div class="progress-bar-container">
+        <div class="progress-bar-percent">
+          <p>Uploading...</p>
+          <p>${uploadStatus}%</p>
+        </div>
+        <nile-progress-bar value=${uploadStatus}></nile-progress-bar>
+        <p>${file.name}</p>
+      </div>
+
+      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name="cancelIcon">
+        <nile-icon
+          name="close"
+          size="14"
+          class="icon corner-icon"
+        ></nile-icon>
+      </slot>
+    </div>
+  `;
+}
+
+
+export function getVerticalPreviewState(
+  url: string,
+  file: File,
+  originalUrl: string
+): TemplateResult {
+  return html`
+    <div class="vertical-div vertical-preview">
+      <div>
+        <img
+          class="image-preview"
+          src=${url}
+          alt=${file.name}
+        />
+      </div>
+
+      <div class="content-container">
+        <p>${file.name}</p>
+         <p>${(file.type.split('/')[1]).toUpperCase()} &#8226; ${formatFileSize(Number(file.size))}</p>
+      </div>
+
+      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancelIcon">
+        <nile-icon
+          name="trash"
+          size="14"
+          class="icon corner-icon"
+        ></nile-icon>
+      </slot>
+    </div>
+  `;
+}
+
+export function getVerticalNoPreviewState(
+  file: File,
+  originalUrl: string
+): TemplateResult {
+  return html`
+    <div class="vertical-div vertical-no-preview">
+      <div class="vertical-document-icon">
+        <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
+      </div>
+
+      <div class="content-container">
+        <p>${file.name}</p>
+        <p>${file.type} &#8226; ${formatFileSize(Number(file.size))}</p>
+      </div>
+
+      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancelIcon">
+        <nile-icon
+          name="trash"
+          size="14"
+          class="icon corner-icon"
+        ></nile-icon>
+      </slot>
+    </div>
+  `;
+}
+
+export function getVerticalErrorState(
+  file: File,
+  errorMessage: string,
+  originalUrl: string
+): TemplateResult {
+  return html`
+    <div class="vertical-div vertical-error">
+      <div class="vertical-document-icon error-bg">
+        <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
+      </div>
+
+      <div class="file-info-vertical-state">
+        <p>${file.name}</p>
+        <nile-tooltip content=${errorMessage}>
+          <p>${errorMessage}</p>
+        </nile-tooltip>
+      </div>
+
+      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancelIcon">
+        <nile-icon
+          name="close"
+          size="14"
+          class="icon corner-icon"
+        ></nile-icon>
+      </slot>
+    </div>
+  `;
+}

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

@@ -0,0 +1,38 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+ 
+import { fixture, assert, expect, html } from '@open-wc/testing';
+import './nile-file-preview'; // Just import to register the element
+
+describe('<nile-preview>', () => {
+  let element: HTMLElement;
+
+  beforeEach(async () => {
+    element = await fixture(html`<nile-file-preview></nile-file-preview>`);
+  });
+
+  it('passes accessibility test', async () => {
+    await expect(element).to.be.accessible();
+  });
+
+  it('renders with the correct tag name', () => {
+    expect(element.tagName.toLowerCase()).to.equal('nile-preview');
+  });
+
+  it('renders with slot content when provided', async () => {
+    const testContent = 'Test Content';
+    element = await fixture(html`<nile-file-preview>${testContent}</nile-file-preview>`);
+    
+    const slot = (element.shadowRoot!.querySelector('slot') as HTMLSlotElement);
+    assert.exists(slot, 'Slot should exist');
+
+    const assignedNodes = slot.assignedNodes({ flatten: true });
+    expect(assignedNodes.length).to.be.greaterThan(0);
+    expect(assignedNodes[0].textContent?.trim()).to.equal(testContent);
+  });
+});

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

@@ -0,0 +1,171 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {styles} from './nile-file-preview.css';
+import NileElement from '../internal/nile-element';
+import { customElement, property } from 'lit/decorators.js';
+import { generatePreviewUrl } from './utils';
+import { FilePreviewState, FilePreviewVariant, FilePreviewErrorMessages, FilePreviewEvent } from './types';
+import { LitElement, html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';
+import {
+  getHorizontalErrorState,
+  getHorizontalNoPreviewState,
+  getHorizontalPreviewState,
+  getHorizontalUploadingState,
+  getVerticalErrorState,
+  getVerticalNoPreviewState,
+  getVerticalPreviewState,
+  getVerticalUploadingState
+} from './nile-file-preview.template';
+
+
+/**
+ * Nile preview component.
+ *
+ * @tag nile-preview
+ *
+ */
+@customElement('nile-file-preview')
+export class NileFilePreview extends NileElement {
+  /**
+   * The styles for nile-preview
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  @property({ type: String }) errorMessage: string = "";
+	@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 = "";
+
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.emit(FilePreviewEvent.NILE_INIT);
+  }
+
+  protected updated(changedProperties: PropertyValues): void {
+    if(changedProperties.has('uploadStatus') && this.uploadStatus) {
+      if(this.uploadStatus < 100) {
+        this.createUploadState(this.inputFile, this.uploadStatus);
+      } else {
+        this.createState(this.inputFile);
+      }
+    } else if (changedProperties.has('inputFile') && this.inputFile) {
+      this.createState(this.inputFile); 
+      this.emit(FilePreviewEvent.NILE_RECEIVE);
+
+    } else if (changedProperties.has('fileUrl') && this.fileUrl) {
+      this.handleFileUrl(this.fileUrl);
+      this.emit(FilePreviewEvent.NILE_RECEIVE);
+
+    } else if (changedProperties.has('errorMessage')) {
+      this.createState(this.inputFile);
+    }
+  }
+
+  private createUploadState( file: File, uploadStatus: number): void {
+    const isHorizontal = this.variant === FilePreviewVariant.HORIZONTAL;
+
+    this.inputFileHtml = isHorizontal 
+    ? getHorizontalUploadingState(file, uploadStatus)
+    : getVerticalUploadingState(file, uploadStatus);
+
+    this.requestUpdate();
+  }
+
+  private async handleFileUrl(url: string): Promise<void> {
+    this.originalUrl = url;
+    try {
+      const response = await fetch(url);
+      const blob = await response.blob();
+      const fileName = this.inputFileName || url.split('/').pop() || FilePreviewErrorMessages.UNKNOWN_FILE_NAME;
+      const file = new File([blob], fileName, { type: blob.type });
+
+      this.createState(file);
+    } 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);
+      this.requestUpdate();
+    }
+  }
+
+	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/')) {
+        try {
+          const url = await generatePreviewUrl(file);
+          this.inputFileHtml = isHorizontal
+            ? getHorizontalPreviewState(url, file, this.originalUrl)
+            : getVerticalPreviewState(url, file, this.originalUrl);
+        } catch (error) {
+          this.inputFileHtml = isHorizontal
+            ? getHorizontalNoPreviewState(file, this.originalUrl)
+            : getVerticalNoPreviewState(file, this.originalUrl); 
+        }
+      } else {
+        this.inputFileHtml = isHorizontal
+          ? getHorizontalNoPreviewState(file, this.originalUrl)
+          : 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);
+    }
+    this.requestUpdate();
+  }
+
+  private dummyFile = new File(['sdfjbs ewhf'], "dummy.txt", { type: "text/plain" });
+
+  public render(): TemplateResult {
+    return html`
+			${this.inputFileHtml ?
+				this.inputFileHtml :
+				html``
+			}
+    `;
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.emit(FilePreviewEvent.NILE_DESTROY);
+  }
+
+  /* #endregion */
+}
+
+export default NileFilePreview;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-file-preview': NileFilePreview;
+  }
+}

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

@@ -0,0 +1,2 @@
+export * from './nile-file-preview.enums';
+export * from './nile-file-preview.interface';

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

@@ -0,0 +1,30 @@
+export enum FilePreviewState {
+  DEFAULT = 'default',
+  UPLOADING = 'uploading',
+  PREVIEW = 'preview',
+  NO_PREVIEW = 'no-preview',
+  ERROR = 'error'
+}
+
+export enum FilePreviewVariant {
+  HORIZONTAL = 'horizontal',
+  VERTICAL = 'vertical'
+}
+
+export enum FilePreviewErrorMessages {
+  INVALID_FORMAT = "Invalid File Format. Please try again.",
+  SIZE_LIMIT = "Size limit exceeded",
+  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."
+}
+
+export enum FilePreviewEvent {
+  NILE_INIT = "nile-init",
+  NILE_RECEIVE = "nile-receive",
+  NILE_REMOVE = "nile-remove",
+  NILE_CANCEL_UPLOAD = "nile-cancel-upload",
+  NILE_DESTROY = "nile-destroy"
+}

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

@@ -0,0 +1,4 @@
+export type RemoveFileDetail = {
+  value: File;
+  url: string;
+};

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

@@ -0,0 +1 @@
+export * from './nile-file-preview.util'

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

@@ -0,0 +1,58 @@
+import NileFilePreview from "../nile-file-preview";
+import { RemoveFileDetail, FilePreviewEvent, FilePreviewErrorMessages } from "../types";
+
+export const generatePreviewUrl = (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    if (file) {
+      reader.readAsDataURL(file);
+    } else {
+      reject(FilePreviewErrorMessages.NO_FILE_SELECTED);
+    }
+
+    reader.onload = () => {
+      const previewUrl = reader.result as string;
+      resolve(previewUrl);
+    };
+
+    reader.onerror = (error) => {
+      reject(FilePreviewErrorMessages.UNABLE_TO_GENEARTE_URL);
+    }
+  });
+}
+
+export const removeFile = (removeFile: File, e: CustomEvent<RemoveFileDetail>, originalUrl: string): void => {
+  if (e.target) {
+    e.target.dispatchEvent(
+      new CustomEvent(FilePreviewEvent.NILE_REMOVE, {
+        detail: { value: removeFile, url: originalUrl },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+};
+
+export const cancelFileUpload = (file: File, e: CustomEvent<RemoveFileDetail>) => {
+  if(e.target) {
+    e.target.dispatchEvent(
+      new CustomEvent(FilePreviewEvent.NILE_CANCEL_UPLOAD, {
+        detail: { file: file },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+}
+
+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';
+}

package/src/nile-file-upload/index.ts

@@ -0,0 +1 @@
+export { NileFileUpload } from './nile-file-upload';