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

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

@@ -1,259 +0,0 @@
-/**
- * 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, 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" part="horizontal-uploading-state">
-        <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
-            part="horizontal-progress-bar"
-            value="${uploadStatus}"
-          ></nile-progress-bar>
-          <p class="horizontal-file-name">${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" part="horizontal-preview-state">
-      <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>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
-        </div>
-      </div>
-      <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>
-  `;
-}
-
-export function getHorizontalNoPreviewState(
-  file: File,
-  originalUrl: string
-): TemplateResult {
-  return html`
-    <div class="no-preview horizontal-div" part="horizontal-no-preview-state">
-      <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>${getFileType(file.type)} &#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,
-  nileFilePreview: NileFilePreview
-): TemplateResult {
-  truncateString(nileFilePreview);
-  return html`
-    <div class="error horizontal-div" part="horizontal-error-state">
-      <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 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 @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" part="vertical-uploading-state">
-      <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 class="vertical-file-name">${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" part="vertical-preview-state">
-      <div>
-        <img
-          class="image-preview"
-          src=${url}
-          alt=${file.name}
-        />
-      </div>
-
-      <div class="content-container">
-        <p>${file.name}</p>
-         <p>${getFileType(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 getVerticalNoPreviewState(
-  file: File,
-  originalUrl: string
-): TemplateResult {
-  return html`
-    <div class="vertical-div vertical-no-preview" part="vertical-no-preview-state">
-      <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>${getFileType(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,
-  nileFilePreview: NileFilePreview
-): TemplateResult {
-  truncateString(nileFilePreview);
-  return html`
-    <div class="vertical-div vertical-error" part="vertical-error-state">
-      <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 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 @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

@@ -1,38 +0,0 @@
-/**
- * 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

@@ -1,205 +0,0 @@
-/**
- * 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: 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
-   * @slot This is a slot test
-   */
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    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);
-      } 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, this)
-        : getVerticalErrorState(dummyFile, this.errorMessage, this.originalUrl, this);
-      this.requestUpdate();
-    }
-  }
-
-	public async createState(file: File): Promise<void> {
-    const isHorizontal = this.variant === FilePreviewVariant.HORIZONTAL;
-
-    if (!this.errorMessage) {  
-      if (file && 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.inputFileHtml = isHorizontal
-        ? getHorizontalErrorState(file, this.errorMessage, this.originalUrl, this)
-        : getVerticalErrorState(file, this.errorMessage, this.originalUrl, this);
-    }
-    this.requestUpdate();
-  }
-
-  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 {
-    if (this.state) {
-      return this.getState();
-    }
-    return html`${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

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

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

@@ -1,32 +0,0 @@
-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 = "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.",
-  NETWORK_ERROR = "Network error! Please try again later.",
-  CUSTOM_ERROR = "Error Occured!"
-}
-
-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

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

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

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

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

@@ -1,72 +0,0 @@
-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';
-}
-
-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();
-  }
-}