@aquera/nile-elements 0.1.46-beta-2.1 → 0.1.46-beta-2.3

package/src/nile-file-upload/nile-file-upload.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-upload'; // Just import to register the element
-
-describe('<nile-file-upload>', () => {
-  let element: HTMLElement;
-
-  beforeEach(async () => {
-    element = await fixture(html`<nile-file-upload></nile-file-upload>`);
-  });
-
-  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-file-upload');
-  });
-
-  it('renders with slot content when provided', async () => {
-    const testContent = 'Test Content';
-    element = await fixture(html`<nile-file-upload>${testContent}</nile-file-upload>`);
-    
-    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-upload/nile-file-upload.ts

@@ -1,147 +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-upload.css';
-import { ChangedPropsInterface } from './types/file-upload.type'
-import NileElement from '../internal/nile-element';
-import { DragHandler } from './utils/drag-drop.util';
-import { getHorizontalDisabledState } from './nile-file-upload.template'
-import { FileUploadDefaults } from './types/file-upload.enums';
-import { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { FileUploadState, FileUploadVariant, FileUploadError, FileUploadEvent } from './types/file-upload.enums';
-import { setUpDragHandler, addGlobalListeners, addInternalListeners, uploadFiles, cancelFileUpload } from './utils/file-validation.util';
-import {
-  getHorizontalDefaultState,
-  getHorizontalDragState,
-  getVerticalDefaultState,
-  getVerticalDisabledState,
-  getVerticalDragState,
-} from './nile-file-upload.template';
-
-/**
- * Nile file-upload component.
- *
- * @tag nile-file-upload
- *
- */
-@customElement('nile-file-upload')
-export class NileFileUpload extends NileElement {
-  /**
-   * The styles for nile-file-upload
-   * @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 }) size: string = "10MB";
-  @property({ type: Boolean}) error: boolean = false;
-  @property({ type: String }) errorMessage: string = "efqwe";
-  @property({ type: Boolean}) allowMultiple: boolean = false;
-  @property({ type: Boolean}) allowDuplicates: boolean = false;
-  @property({ type: Array  }) uploadedFiles: File[] = [];
-  @property({ type: String }) title: string = FileUploadDefaults.TITLE;
-  @property({ type: String }) subtitle: string = FileUploadDefaults.SUBTITLE;
-  @property({ type: String }) state: FileUploadState = FileUploadState.DEFAULT; 
-  @property({ type: String }) variant: FileUploadVariant = FileUploadVariant.HORIZONTAL;
-  @property({ type: String }) fileUploadUrl: string = "";
-  @property({ type: Boolean}) autoUpload: boolean = true;
-  @query('input') input!: HTMLInputElement;
-  public uploadRequests = new Map<File, XMLHttpRequest>();
-  
-  private dragHandler!: DragHandler;
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    this.emit(FileUploadEvent.NILE_INIT);
-  }
-
-  firstUpdated(changedProps: ChangedPropsInterface): void {
-    super.firstUpdated(changedProps);
-
-    this.dragHandler = new DragHandler();
-    setUpDragHandler(this, this.dragHandler, this.allowMultiple, this.uploadedFiles, this.errorMessage, this.size, this.allowDuplicates);
-    addInternalListeners(this, this.dragHandler, this.uploadRequests);
-    addGlobalListeners(this.dragHandler);
-  }
-
-  cnt: any = 0;
-
-  updated(changedProps: ChangedPropsInterface): void {
-    super.updated(changedProps);
-
-    if (changedProps.has('uploadedFiles')) {
-      if(this.uploadedFiles.length === 0) this.errorMessage = "";
-      if(this.fileUploadUrl && this.autoUpload) {
-        uploadFiles(this);
-      }
-      this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });
-
-    } else if (changedProps.has('state')) {
-      this.dragHandler.setValuesInDragHandler(this.state);
-    }
-  }
-
-  private browseFiles(): void {
-    this.emit(FileUploadEvent.NILE_BROWSE);
-    this.errorMessage = "";
-    this.input.click();
-  }
-
-  public setState = (newState: FileUploadState): void => {
-    this.state = newState;
-  }
-
-  render(): TemplateResult {
-    return html`
-      ${this.getState()}
-    `;
-  }
-
-  private getState(): TemplateResult {
-    return this.variant === FileUploadVariant.HORIZONTAL
-      ? this.getHorizontalState()
-      : this.getVerticalState();
-  }
-
-  private getHorizontalState(): TemplateResult {
-    switch(this.state) {
-      case FileUploadState.DEFAULT:
-        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage);
-
-      case FileUploadState.DISABLED:
-        return getHorizontalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage);
-
-      case FileUploadState.DRAG:
-        return getHorizontalDragState();
-
-      default:
-        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage);
-    }
-  }
-
-  private getVerticalState(): TemplateResult {
-    switch(this.state) {
-      case FileUploadState.DEFAULT:
-        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage);
-
-      case FileUploadState.DISABLED:
-        return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage);
-
-      case FileUploadState.DRAG:
-        return getVerticalDragState();
-
-      default:
-        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage);
-    }
-  }
-
-  disconnectedCallback(): void {
-    this.emit(FileUploadEvent.NILE_DESTROY);
-  }
-}

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

@@ -1,40 +0,0 @@
-export enum FileUploadState {
-  DEFAULT = 'default',
-  DISABLED = 'disabled',
-  HOVER = 'hover',
-  DRAG = 'drag'
-}
-
-export enum FileUploadVariant {
-  HORIZONTAL = 'horizontal',
-  VERTICAL = 'vertical'
-}
-
-export enum FileUploadError {
-  INVALID_FORMAT = "Invalid file format! Upload valid file.",
-  SIZE_LIMIT_EXCEEDED = "File exceeds size limit! Upload smaller file.",
-  MULTIPLE_NOT_ALLOWED = "Please Upload Single File!",
-  DUPLICATES_NOT_ALLOWED = "Duplicate Files Are Not Allowed!",
-  UPLOAD_URL_REQUIRED = "Upload URL is required!",
-}
-
-export enum FileUploadEvent {
-  NILE_INIT = "nile-init",
-  NILE_BROWSE = "nile-browse",
-  NILE_DRAG = "nile-drag",
-  NILE_CHANGE = "nile-change",
-  NILE_UPLOADING = "nile-uploading",
-  NILE_UPLOAD_PROGRESS = "nile-upload-progress",
-  NILE_UPLOAD_SUCCESS = "nile-upload-success",
-  NILE_UPLOAD_CANCELLED = "nile-upload-cancelled",
-  NILE_CANCEL_UPLOAD = "nile-cancel-upload",
-  NILE_NETWORK_ERROR = "nile-network-error",
-  SERVER_SIDE_ERROR = "nile-server-error",
-  NILE_DESTROY = "nile-destroy"
-}
-
-export enum FileUploadDefaults {
-  TITLE = 'Drag and drop to upload',
-  SUBTITLE = 'PNG, JPG or SVG (upto 1MB) | 1:1 ratio',
-  ERROR_MESSAGE = 'Invalid File Format.',
-};

package/src/nile-file-upload/types/file-upload.type.ts

@@ -1,5 +0,0 @@
-import { PropertyValueMap } from 'lit';
-
-export interface ChangedPropsInterface extends PropertyValueMap<any> {
-  [key: string]: unknown;
-}

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

@@ -1,2 +0,0 @@
-export * from './file-upload.enums';
-export * from './file-upload.type'

package/src/nile-file-upload/utils/drag-drop.util.ts

@@ -1,102 +0,0 @@
-import { preventDefaultAndStopPropagation } from "./file-validation.util";
-import { FileUploadState } from "../types";
-
-export class DragHandler {
-  private currentState: FileUploadState = FileUploadState.DEFAULT;
-
-  private stateChangeCallback?: (state: FileUploadState) => void;
-  private fileDropCallback?: (files: File[]) => void;
-  private errorMessageCallback?: (errorMessage: string) => void;
-
-  constructor() {}
-
-  public setErrorMessage(callback: (errorMessage: string) => void): void {
-    this.errorMessageCallback = callback;
-  }
-
-  public setValuesInDragHandler(state: FileUploadState): void {
-    this.currentState = state;
-  }
-
-  public onFileDrop(callback: (files: File[]) => void): void {
-    this.fileDropCallback = callback;
-  }
-
-  public onStateChange(callback: (state: FileUploadState) => void): void {
-    this.stateChangeCallback = callback;
-  }
-
-  private setState(state: FileUploadState): void {
-    if (this.currentState === FileUploadState.DISABLED) return;
-
-    this.currentState = state;
-    this.stateChangeCallback?.(state);
-  }
-
-  public dragEnter(e: DragEvent): void {
-    preventDefaultAndStopPropagation(e);
-
-    if (this.currentState === FileUploadState.DISABLED) return;
-    this.errorMessageCallback?.("");
-    this.setState(FileUploadState.DRAG);
-  }
-
-  public dragLeave(e: DragEvent): void {
-    preventDefaultAndStopPropagation(e);
-    
-    if (this.currentState === FileUploadState.DISABLED) return;
-
-    this.setState(FileUploadState.DEFAULT);
-  }
-
-  public dragOver(e: DragEvent): void {
-    preventDefaultAndStopPropagation(e);
-    
-    if (this.currentState === FileUploadState.DISABLED) return;
-  }
-
-  public drop(e: DragEvent): void {
-    preventDefaultAndStopPropagation(e);
-    
-    if (this.currentState === FileUploadState.DISABLED) return;
-    this.setState(FileUploadState.DEFAULT);
-    this.handleFiles(e);
-  }
-
-  public handleDocumentDrop(e: DragEvent): void {
-    if (this.currentState === FileUploadState.DISABLED) return;
-
-    preventDefaultAndStopPropagation(e);
-    
-    this.setState(FileUploadState.DEFAULT);
-  }
-
-  public preventDragOver(e: DragEvent): void {
-    preventDefaultAndStopPropagation(e); 
-  }
-
-  public preventDrop(e: DragEvent): void {
-    preventDefaultAndStopPropagation(e); 
-  }
-
-  public handleFiles(e: Event | DragEvent): void {
-    preventDefaultAndStopPropagation(e);
-    if (this.currentState === FileUploadState.DISABLED) return;
-
-    let files: FileList | null = null;
-
-    if ('dataTransfer' in e && e.dataTransfer) {
-      files = e.dataTransfer.files;
-    }
-
-    if (!files && e.target instanceof HTMLInputElement) {
-      files = e.target.files;
-    }
-
-    if (files && files.length > 0) {
-      const newFiles = Array.from(files);
-
-      this.fileDropCallback?.(newFiles);
-    }
-  }
-}

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

@@ -1,205 +0,0 @@
-import { DragHandler } from "./drag-drop.util";
-import { FileUploadState, FileUploadError, FileUploadEvent } from "../types";
-import { NileFileUpload } from "../nile-file-upload";
-import { RemoveFileDetail } from "../../nile-file-preview/types";
-
-// optimise this function
-export const areDuplicates = (files: File[], uploadedFiles: File[]): boolean => {
-  return files.some(file =>
-    uploadedFiles.some(existing =>
-      file.name === existing.name &&
-      file.size === existing.size &&
-      file.lastModified === existing.lastModified
-    )
-  );
-};
-
-export const setUpDragHandler = (
-  nileFileUpload: NileFileUpload,
-  dragHandler: DragHandler,
-  allowMultiple: boolean,
-  uploadedFiles: File[],
-  errorMessage: string,
-  size: string,
-  allowDuplicates: boolean
-): void => {
-  dragHandler.onStateChange((newState: FileUploadState) => {
-    nileFileUpload.state = newState;
-  });
-
-  dragHandler.onFileDrop((files: File[]) => {
-    let maxSize = parseSize(size);
-    if (!allowMultiple) {
-      const total = nileFileUpload.uploadedFiles.length + files.length;
-      if (total > 1) {
-        nileFileUpload.errorMessage = FileUploadError.MULTIPLE_NOT_ALLOWED;
-        nileFileUpload.requestUpdate();
-        return;
-      }
-    }
-
-    for (const file of files) {
-      if (file.size > maxSize) {
-        nileFileUpload.errorMessage = FileUploadError.SIZE_LIMIT_EXCEEDED;
-        nileFileUpload.requestUpdate();
-        return;
-      }
-    }
-
-    let newFiles = files;
-    if (!allowDuplicates) {
-      newFiles = files.filter(file =>
-        !uploadedFiles.some(
-          uploaded =>
-            uploaded.name === file.name &&
-            uploaded.size === file.size &&
-            uploaded.type === file.type
-        )
-      );
-  
-      if (newFiles.length === 0) {
-        errorMessage = FileUploadError.DUPLICATES_NOT_ALLOWED;
-        nileFileUpload.requestUpdate();
-        return;
-      }
-    }
-
-    nileFileUpload.uploadedFiles = [...nileFileUpload.uploadedFiles, ...newFiles];
-    nileFileUpload.requestUpdate();
-  });  
-
-  dragHandler.setErrorMessage((errorMessage: string) => {
-    nileFileUpload.errorMessage = errorMessage;
-  });
-};
-
-export const addGlobalListeners = (dragHandler: DragHandler): void => {
-  document.addEventListener('dragover', dragHandler.preventDragOver, { passive: false });
-  document.addEventListener('drop', dragHandler.preventDrop, { passive: false });
-}
-
-export const addInternalListeners = (nileFileUpload: NileFileUpload, dragHandler: DragHandler, uploadRequests: any): void => {
-  nileFileUpload.addEventListener('mouseenter', (e) => handleHoverIn(nileFileUpload.setState, nileFileUpload.state));
-  nileFileUpload.addEventListener('mouseleave', (e) => handleHoverOut(nileFileUpload.setState, nileFileUpload.state));
-  nileFileUpload.addEventListener('dragenter', (e) => dragHandler.dragEnter(e));
-  nileFileUpload.addEventListener('dragleave', (e) => dragHandler.dragLeave(e));
-  nileFileUpload.addEventListener('dragover', (e) => dragHandler.dragOver(e));
-  nileFileUpload.addEventListener('drop', (e) => dragHandler.drop(e));  
-
-  cancelFileUpload(nileFileUpload, uploadRequests);
-  removeFile(nileFileUpload.uploadedFiles, nileFileUpload);
-}
-
-export function handleHoverIn(
-  setState: (state: FileUploadState) => void,
-  currentState: FileUploadState
-): void {
-  if (currentState === FileUploadState.DEFAULT) {
-    setState(FileUploadState.HOVER);
-  }
-}
-
-export function handleHoverOut(
-  setState: (state: FileUploadState) => void,
-  currentState: FileUploadState
-): void {
-  if (currentState === FileUploadState.HOVER) {
-    setState(FileUploadState.DEFAULT);
-  }
-}
-
-export function uploadFiles(nileFileUpload: NileFileUpload) {
-  const { uploadedFiles, fileUploadUrl, uploadRequests } = nileFileUpload;
-  if (!fileUploadUrl || !uploadedFiles?.length) return;
-  // fileUploadUrl = 'http://localhost:3000/upload';
-  // let url = 'http://localhost:3000/upload';
-
-  for (const file of uploadedFiles) {
-    if (uploadRequests.has(file)) continue;
-    const formData = new FormData();
-    formData.append('file', file);
-    // console.log(uploadRequests);
-    
-
-    const xhr = new XMLHttpRequest();
-    uploadRequests.set(file, xhr);
-
-    nileFileUpload.emit(FileUploadEvent.NILE_UPLOADING);
-
-    xhr.upload.onprogress = (e) => {
-        // console.log(e.lengthComputable);
-      const percent = Math.floor((e.loaded / e.total) * 100);
-      // console.log(percent);
-      
-      nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_UPLOAD_PROGRESS, {
-        detail: { file, progress: percent }
-      }));
-    };
-
-    xhr.onload = (e) => {
-      // uploadRequests.delete(file); // deleting from the list of the uplaoding files, not based on the user request
-      if (xhr.status === 201) {
-        // Remove the successfully uploaded file
-        // nileFileUpload.uploadedFiles = nileFileUpload.uploadedFiles.filter(f => f !== file);
-
-        nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_UPLOAD_SUCCESS, {
-          detail: { file, response: xhr.response }
-        }));
-      } else {
-        nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.SERVER_SIDE_ERROR, {
-          detail: { file, status: xhr.status, response: xhr.response }
-        }));
-      }
-    };
-
-    xhr.onerror = () => {
-      uploadRequests.delete(file);
-      nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_NETWORK_ERROR, {
-        detail: { file, status: xhr.status, response: xhr.response }
-      }));
-    };
-
-    xhr.open('POST', fileUploadUrl);
-    // xhr.setRequestHeader('Content-Type', 'multipart/form-data');
-    xhr.send(formData);
-  }
-}
-
-export const cancelFileUpload = (nileFileUpload: NileFileUpload, uploadRequests: Map<File, XMLHttpRequest>) => {
-  document.addEventListener(FileUploadEvent.NILE_CANCEL_UPLOAD, (e: CustomEvent) => {
-    const fileToCancel = e.detail.file;
-    const xhr = uploadRequests.get(fileToCancel);
-
-    if (xhr) {
-      xhr.abort();
-    }
-    uploadRequests.delete(fileToCancel);
-    nileFileUpload.uploadedFiles = nileFileUpload.uploadedFiles.filter(file => file !== fileToCancel);
-
-    nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_UPLOAD_CANCELLED, {
-      detail: { file: fileToCancel }
-    }));
-  });
-};
-
-function parseSize(sizeStr: string): number {
-  const units = { B: 1, KB: 1024, MB: 1024 ** 2, GB: 1024 ** 3 };
-  const num = parseFloat(sizeStr);
-  const unit = sizeStr.replace(/[0-9.\s]/g, '').toUpperCase();
-  const multiplier = units[unit as keyof typeof units] || 1;
-  return num * multiplier;
-}
-
-export const preventDefaultAndStopPropagation = (event: Event | DragEvent): void => {
-  event.preventDefault?.();
-  event.stopPropagation();
-}
-
-export const removeFile = (uploadedFiles: File[], nileFileUpload: NileFileUpload) => {
-  document.addEventListener('nile-remove', (e: CustomEvent<RemoveFileDetail>) => {
-    const { value } = e.detail;
-    uploadedFiles = uploadedFiles.filter(file => file !== value);
-    nileFileUpload.uploadedFiles = uploadedFiles;
-    nileFileUpload.requestUpdate();
-  });
-}