@aquera/nile-elements 0.1.35 → 0.1.36-beta-1.0

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

@@ -0,0 +1,194 @@
+import { html, TemplateResult } from 'lit';
+import './nile-file-upload.css';
+import { DragHandler } from './utils/drag-drop.util';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { FileUploadState } from './types/file-upload.enums';
+
+let dragHandlerInstance: DragHandler;
+
+export const getDragHandler = (dragHandler: DragHandler): void => {
+  dragHandlerInstance = dragHandler;
+}
+
+export const getHorizontalDefaultState = (
+  browseFiles: Function,
+  title: string,
+  subtitle: string,
+  errorMessage: string,
+  state: FileUploadState
+): TemplateResult => html`
+  <div>
+    <div class=${classMap({ 'hover-border': state === "hover", 'horizontal-div': true })}>
+      <div class="inner-div">
+        <slot name="icon">
+          <nile-icon name="upload" size="24"></nile-icon>
+        </slot>
+        <div class="content">
+          <slot name="title">
+            <h4>${title}</h4>
+          </slot>
+          <slot name="subtitle">
+            <p>${subtitle}</p>
+          </slot>
+        </div>
+      </div>
+      <input
+        type="file"
+        @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}
+        multiple
+      />
+      <nile-button @click=${browseFiles} variant="tertiary">
+        Browse File
+      </nile-button>
+    </div>
+    ${errorMessage ?
+      html`<div class="upload-error">
+        <nile-icon name="warning" size="12" color="red"></nile-icon>
+        <span>${errorMessage}</span>
+      </div>` :
+      html``
+    }
+  </div>
+`;
+
+export const getHorizontalDisabledtState = (
+  browseFiles: Function,
+  title: string,
+  subtitle: string
+): TemplateResult => html`
+  <div
+    class="horizontal-div disabled"
+  >
+     <div class="inner-div">
+      <slot name="icon">
+        <nile-icon name="upload" size="24"></nile-icon>
+      </slot>
+      <div class="content">
+        <slot name="title">
+          <h4>${title}</h4>
+        </slot>
+        <slot name="subtitle">
+          <p>${subtitle}</p>
+        </slot>
+      </div>
+    </div>
+    <input
+      type="file"
+      @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}
+      multiple
+    />
+    <nile-button @click=${browseFiles} variant="tertiary">
+      Browse File
+    </nile-button>
+  </div>
+`;
+
+export const getHorizontalDragState = (): TemplateResult => html`
+  <div class="horizontal-div dragging">
+    <div class="icons-container">
+      <nile-icon
+        color="var(--nile-colors-blue-500)"
+        name="general"
+        size="20"
+        class="general-icon"
+      ></nile-icon>
+      <nile-icon
+        color="var(--nile-colors-blue-500)"
+        name="image"
+        size="24"
+        class="image-icon"
+      ></nile-icon>
+    </div>
+    <p>Drop files here to upload</p>
+  </div>
+`;
+
+//  Vertical States
+export const getVerticalDefaultState = (
+  browseFiles: Function,
+  title: string,
+  subtitle: string,
+  errorMessage: string,
+  state: FileUploadState
+): TemplateResult => html`
+  <div>
+    <div class=${classMap({ 'hover-border': state === "hover", 'vertical-div': true })}>
+      <slot name="icon">
+        <nile-icon name="upload" size="24"></nile-icon>
+      </slot>
+      <div class="content-container">
+        <slot name="title">
+          <h4>${title}</h4>
+        </slot>
+        <slot name="title">
+          <p>${subtitle}</p>
+        </slot>
+      </div>
+      <input
+        type="file"
+        @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}
+        multiple
+      />
+      <nile-button @click=${browseFiles} variant="tertiary">
+        Browse File
+      </nile-button>
+    </div>
+    ${errorMessage ?
+      html`<div class="upload-error">
+        <nile-icon name="warning" size="12" color="red"></nile-icon>
+        <span>${errorMessage}</span>
+      </div>` :
+      html``
+    }
+  </div>
+`;
+
+export const getVerticalDisabledState = (
+  browseFiles: Function,
+  title: string,
+  subtitle: string
+): TemplateResult => html`
+  <div
+    class="vertical-deafult vertical-div disable"
+  >
+    <slot name="icon">
+      <nile-icon name="upload" size="24"></nile-icon>
+    </slot>
+    <div class="content-container">
+      <slot name="title">
+        <h4>${title}</h4>
+      </slot>
+      <slot name="title">
+        <p>${subtitle}o</p>
+      </slot>
+    </div>
+    <input
+      type="file"
+      @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}
+      multiple
+    />
+    <nile-button @click=${browseFiles} variant="tertiary">
+      Browse File
+    </nile-button>
+  </div>
+`;
+
+export const getVerticalDragState = (): TemplateResult => html`
+  <div class="vertical-div vertical-drag">
+    <div class="icons-container">
+      <nile-icon
+        color="var(--nile-colors-blue-500)"
+        name="general"
+        size="20"
+        class="general-icon"
+      ></nile-icon>
+      <nile-icon
+        color="var(--nile-colors-blue-500)"
+        name="image"
+        size="24"
+        class="image-icon"
+      ></nile-icon>
+    </div>
+    <p>Drop files here to upload</p>
+  </div>
+`;

package/src/nile-file-upload/nile-file-upload.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-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

@@ -0,0 +1,138 @@
+/**
+ * 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 { getDragHandler } 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 } from './utils/file-validation.util';
+import {
+  getHorizontalDefaultState,
+  getHorizontalDisabledtState,
+  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: Number }) size: number = 0;
+  @property({ type: Boolean}) error: boolean = false;
+  @property({ type: String }) errorMessage: string = "";
+  @property({ type: Boolean}) allowMultiple: boolean = true;
+  @property({ type: Boolean}) allowDuplicates: boolean = true;
+  @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;
+  @query('input') input!: HTMLInputElement;
+  
+  private dragHandler!: DragHandler;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.emit(FileUploadEvent.NILE_INIT);
+  }
+
+  firstUpdated(changedProps: ChangedPropsInterface): void {
+    super.firstUpdated(changedProps);
+
+    this.dragHandler = new DragHandler();
+    getDragHandler(this.dragHandler);
+    setUpDragHandler(this, this.dragHandler);
+    addInternalListeners(this, this.dragHandler);
+    addGlobalListeners(this.dragHandler);
+  }
+
+  updated(changedProps: ChangedPropsInterface): void {
+    super.updated(changedProps);
+
+    if (changedProps.has('uploadedFiles')) {
+      this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });
+    } else if (changedProps.has('state')) {
+      this.dragHandler.updateState(this.state);
+    }
+  }
+
+  private browseFiles(): void {
+    this.emit(FileUploadEvent.NILE_BROWSE);
+    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.errorMessage, this.state);
+
+      case FileUploadState.DISABLED:
+        return getHorizontalDisabledtState(this.browseFiles, this.title, this.subtitle);
+
+      case FileUploadState.DRAG:
+        return getHorizontalDragState();
+
+      default:
+        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
+    }
+  }
+
+  private getVerticalState(): TemplateResult {
+    switch(this.state) {
+      case FileUploadState.DEFAULT:
+        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
+
+      case FileUploadState.DISABLED:
+        return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle);
+
+      case FileUploadState.DRAG:
+        return getVerticalDragState();
+
+      default:
+        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
+    }
+  }
+
+  disconnectedCallback(): void {
+    this.emit(FileUploadEvent.NILE_DESTROY);
+  }
+}

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

@@ -0,0 +1,32 @@
+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 = "File exceeds size limit! Upload smaller size.",
+  MULTIPLE_NOT_ALLOWED = "Please Upload Single File!",
+  DUPLICATES_NOT_ALLOWED = "Duplicate Files Are Not Allowed!"
+}
+
+export enum FileUploadEvent {
+  NILE_INIT = "nile-init",
+  NILE_BROWSE = "nile-browse",
+  NILE_DRAG = "nile-drag",
+  NILE_CHANGE = "nile-change",
+  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

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

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

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

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

@@ -0,0 +1,95 @@
+import { FileUploadState } from "../types";
+
+export class DragHandler {
+  private currentState: FileUploadState = FileUploadState.DEFAULT;
+
+  private stateChangeCallback?: (state: FileUploadState) => void;
+  private fileDropCallback?: (files: File[]) => void;
+
+  constructor() {}
+
+  public updateState(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 {
+    if (this.currentState === FileUploadState.DISABLED) return;
+
+    e.preventDefault();
+    this.setState(FileUploadState.DRAG);
+  }
+
+  public dragLeave(e: DragEvent): void {
+    if (this.currentState === FileUploadState.DISABLED) return;
+
+    e.preventDefault();
+    this.setState(FileUploadState.DEFAULT);
+  }
+
+  public dragOver(e: DragEvent): void {
+    if (this.currentState === FileUploadState.DISABLED) return;
+
+    e.preventDefault();
+  }
+
+  public drop(e: DragEvent): void {
+    if (this.currentState === FileUploadState.DISABLED) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+    this.setState(FileUploadState.DEFAULT);
+    this.handleFiles(e);
+  }
+
+  public handleDocumentDrop(e: DragEvent): void {
+    if (this.currentState === FileUploadState.DISABLED) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+    this.setState(FileUploadState.DEFAULT);
+  }
+
+  public preventDragOver(e: DragEvent): void {
+    e.preventDefault();
+  }
+
+  public preventDrop(e: DragEvent): void {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  public handleFiles(event: Event | DragEvent): void {
+    if (this.currentState === FileUploadState.DISABLED) return;
+
+    event.preventDefault?.();
+    let files: FileList | null = null;
+
+    if ('dataTransfer' in event && event.dataTransfer) {
+      files = event.dataTransfer.files;
+    }
+
+    if (!files && event.target instanceof HTMLInputElement) {
+      files = event.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

@@ -0,0 +1,80 @@
+import { DragHandler } from "./drag-drop.util";
+import { FileUploadState, FileUploadError } from "../types";
+import { NileFileUpload } from "../nile-file-upload";
+
+// to check the duplicate files
+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
+    )
+  );
+};
+
+// set up the drag handler
+export const setUpDragHandler = (
+  nileFileUpload: NileFileUpload,
+  dragHandler: DragHandler
+): void => {
+  dragHandler.onStateChange((newState: FileUploadState) => {
+    nileFileUpload.state = newState;
+  });
+
+  dragHandler.onFileDrop((files: File[]) => {
+    if (!nileFileUpload.allowMultiple) {
+      const total = nileFileUpload.uploadedFiles.length + files.length;
+      if (total > 1) {
+        nileFileUpload.errorMessage = FileUploadError.MULTIPLE_NOT_ALLOWED;
+        nileFileUpload.requestUpdate();
+        return;
+      }
+    }
+
+    if (!nileFileUpload.allowDuplicates) {
+      const duplicates = areDuplicates(files, nileFileUpload.uploadedFiles);
+      if (duplicates) {
+        nileFileUpload.errorMessage = FileUploadError.DUPLICATES_NOT_ALLOWED;
+        nileFileUpload.requestUpdate();
+        return;
+      }
+    }
+    nileFileUpload.uploadedFiles = [...nileFileUpload.uploadedFiles, ...files];
+    nileFileUpload.requestUpdate();
+  });
+};
+
+// global listenrers
+export const addGlobalListeners = (dragHandler: DragHandler): void => {
+  document.addEventListener('dragover', dragHandler.preventDragOver, { passive: false });
+  document.addEventListener('drop', dragHandler.preventDrop, { passive: false });
+}
+
+// for hover & dragging functionality
+export const addInternalListeners = (nileFileUpload: NileFileUpload, dragHandler: DragHandler): 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));
+}
+
+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);
+  }
+}