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

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

@@ -1,194 +0,0 @@
-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

@@ -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,138 +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 { 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

@@ -1,32 +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 = "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

@@ -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,95 +0,0 @@
-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

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