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

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

@@ -1,192 +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 { FileUploadDefaults, FileUploadState } from './types/file-upload.enums';
-import { truncateString } from './utils/file-validation.util';
-import { NileFileUpload } from './nile-file-upload';
-
-const baseHorizontalState = (
-  browseFiles: Function,
-  title: string,
-  subtitle: string,
-  disabled: boolean,
-  dragHandler: DragHandler,
-  state: FileUploadState,
-  errorMessage: string,
-  allowedTypes: string[],
-  nileFileUpload: NileFileUpload
-): TemplateResult => {
-  truncateString(nileFileUpload);
-  return html`
-  <div class="wrapper" part="horizontal-wrapper">
-    <div part="horizontal-div" class=${classMap({ 'hover-border': state === "hover", 'horizontal-div': true, 'disable': disabled })}>
-      <div part="inner-div" class="inner-div">
-        <slot class="upload-icon-slot" name="upload-icon">
-          <nile-icon name="upload" size="24"></nile-icon>
-        </slot>
-        <div part="content" class="content">
-          <div class="title">${title}</div>
-          <div class="subtitle">${subtitle}</div>
-        </div>
-      </div>
-      <input
-        type="file"
-        ?disabled=${disabled}
-        @change=${(e: Event | DragEvent) => { dragHandler.handleFiles(e) }}
-        multiple
-        accept=${allowedTypes.join(',')}
-      />
-      <slot class="browse-file-button" @click=${disabled ? undefined : browseFiles} name="browse-file-button">
-        <nile-button variant="tertiary" ?disabled=${disabled}>
-          Browse File
-        </nile-button>
-      </slot>
-    </div>
-    ${errorMessage ?
-      html`<div class="upload-error">
-        <nile-icon name="warning" size="12" color="var(--nile-colors-red-700)"></nile-icon>
-        ${
-          nileFileUpload.isStringTruncated
-            ? html`<nile-tooltip content=${errorMessage}>
-                <span>${errorMessage}</span>
-              </nile-tooltip>`
-            : html`<span>${errorMessage}</span>`
-        }
-      </div>` :
-      html``
-    }
-  </div>
-  `;
-}
-
-export const getHorizontalDefaultState = (
-  browseFiles: Function,
-  title: string,
-  subtitle: string,
-  dragHandler: DragHandler,
-  state: FileUploadState,
-  errorMessage: string,
-  allowedTypes: string[],
-  nileFileUpload: NileFileUpload
-): TemplateResult => baseHorizontalState(browseFiles, title, subtitle, false, dragHandler, state, errorMessage, allowedTypes, nileFileUpload);
-
-export const getHorizontalDisabledState = (
-  browseFiles: Function,
-  title: string,
-  subtitle: string,
-  dragHandler: DragHandler,
-  state: FileUploadState,
-  errorMessage: string,
-  allowedTypes: string[],
-  nileFileUpload: NileFileUpload
-): TemplateResult => baseHorizontalState(browseFiles, title, subtitle, true, dragHandler, state, errorMessage, allowedTypes, nileFileUpload);
-
-export const getHorizontalDragState = (): TemplateResult => html`
-  <div part="horizontal-drag-state" 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>${FileUploadDefaults.DRAG_STATE_DEFAULT}</p>
-  </div>
-`;
-
-//  Vertical States
-const baseVerticalState = (
-  browseFiles: Function,
-  title: string,
-  subtitle: string,
-  disabled: boolean,
-  dragHandler: DragHandler,
-  errorMessage: string,
-  allowedTypes: string[],
-  nileFileUpload: NileFileUpload
-): TemplateResult => {
-  truncateString(nileFileUpload);
-  return html`
-  <div part="vertical-wrapper" class="wrapper">
-    <div part="vertical-default" class="vertical-default vertical-div ${disabled ? 'disable' : ''}">
-      <slot name="upload-icon">
-        <nile-icon name="upload" size="24"></nile-icon>
-      </slot>
-      <div part="vertical-content-container" class="content-container">
-        <div class="title">${title}</div>
-        <div class="subtitle">${subtitle}</div>
-      </div>
-      <input
-        type="file"
-        ?disabled=${disabled}
-        @change=${(e: Event | DragEvent) => dragHandler.handleFiles(e)}
-        multiple
-        accept=${allowedTypes.join(',')}
-      />
-      <slot @click=${disabled ? undefined : browseFiles} name="browse-file-button">
-        <nile-button variant="tertiary" ?disabled=${disabled}>
-          Browse File
-        </nile-button>
-      </slot>
-    </div>
-    ${errorMessage ?
-      html`<div class="vertical-upload-error">
-        <nile-icon name="warning" size="12" color="var(--nile-colors-red-700)"></nile-icon>
-        <nile-tooltip content=${errorMessage}>
-          <span>${errorMessage}</span>
-        </nile-tooltip>
-      </div>` :
-      html``
-    }
-  </div>
-  `;
-}
-
-export const getVerticalDefaultState = (
-  browseFiles: Function,
-  title: string,
-  subtitle: string,
-  dragHandler: DragHandler,
-  errorMessage: string,
-  allowedTypes: string[],
-  nileFileUpload: NileFileUpload
-): TemplateResult => baseVerticalState(browseFiles, title, subtitle, false, dragHandler, errorMessage, allowedTypes, nileFileUpload);
-
-export const getVerticalDisabledState = (
-  browseFiles: Function,
-  title: string,
-  subtitle: string,
-  dragHandler: DragHandler,
-  errorMessage: string,
-  allowedTypes: string[],
-  nileFileUpload: NileFileUpload
-): TemplateResult => baseVerticalState(browseFiles, title, subtitle, true, dragHandler, errorMessage, allowedTypes, nileFileUpload);
-
-
-export const getVerticalDragState = (): TemplateResult => html`
-  <div part="vertical-drag-state" 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>${FileUploadDefaults.DRAG_STATE_DEFAULT}</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,157 +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 = "";
-  @property({ type: Boolean}) allowMultiple: boolean = false;
-  @property({ type: Boolean}) allowDuplicates: boolean = false;
-  @property({ type: Array  }) allowedTypes: string[] = [];
-  @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>();
-  public fileSizeExceededFilesNumber: number = 0;
-  public isStringTruncated: boolean = false;
-  
-  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);
-    addInternalListeners(this, this.dragHandler, this.uploadRequests);
-    addGlobalListeners(this.dragHandler);
-  }
-
-  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);
-    }
-
-    if(changedProps.has('autoUpload') && this.autoUpload) {
-      if(this.fileUploadUrl && this.autoUpload) {
-        uploadFiles(this);
-      }
-      this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });
-    }
-  }
-
-  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, this.allowedTypes, this);
-
-      case FileUploadState.DISABLED:
-        return getHorizontalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);
-
-      case FileUploadState.DRAG:
-        return getHorizontalDragState();
-
-      default:
-        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);
-    }
-  }
-
-  private getVerticalState(): TemplateResult {
-    switch(this.state) {
-      case FileUploadState.DEFAULT:
-        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);
-
-      case FileUploadState.DISABLED:
-        return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);
-
-      case FileUploadState.DRAG:
-        return getVerticalDragState();
-
-      default:
-        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);
-    }
-  }
-
-  disconnectedCallback(): void {
-    this.emit(FileUploadEvent.NILE_DESTROY);
-  }
-}

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

@@ -1,44 +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!",
-  SERVER_SIDE_ERROR = "Error from server! Please try again later.",
-  NETWORK_ERROR = "Network error! Please try again later."
-}
-
-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_SIZE_EXCEED_FILES = "nile-size-exceed-files",
-  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.',
-  DRAG_STATE_DEFAULT = 'Drop files here to upload',
-};

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,106 +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);
-    }
-
-    if(e.target instanceof HTMLInputElement) {
-      e.target.value = "";
-    }
-  }
-}