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

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

@@ -1,174 +0,0 @@
-/**
- * Template File for nile-preview component
- */
-
-import './nile-file-preview.css';
-import { html, TemplateResult } from 'lit';
-import { RemoveFileDetail } from './types';
-import { removeFile } from './utils';
-
-export function getHorizontalPreviewState(
-  url: string,
-  file: File,
-  originalUrl: string
-): TemplateResult {
-  return html`
-    <div class="preview horizontal-div">
-      <div class="preview-inner">
-        <div class="preview-image-container">
-          ${file.type.startsWith('image/')
-            ? html`<img src="${url}" alt="Image Preview" />`
-            : html`<iframe src="${url}" type="${file.type}" width="40px" height="40px" />`
-          }
-        </div>
-        <div class="preview-file-info">
-          <p>${file.name}</p>
-          <p>${(file.type.split('/')[1]).toUpperCase()} &#8226; ${(Number(file.size) / 1000).toFixed(0)}KB</p>
-        </div>
-      </div>
-      <nile-icon 
-        @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}
-        name="trash" 
-        size="14" 
-        class="icon"
-      ></nile-icon>
-    </div>
-  `;
-}
-
-export function getHorizontalNoPreviewState(
-  file: File,
-  originalUrl: string
-): TemplateResult {
-  return html`
-    <div class="no-preview horizontal-div">
-      <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>${(file.type.split('/')[1]).toUpperCase()} &#8226; ${(Number(file.size) / 1000).toFixed(0)}KB</p>
-        </div>
-      </div>
-      <div>
-        <nile-icon
-          @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}
-          name="trash"
-          size="14"
-          class="icon"
-        ></nile-icon>
-      </div>
-    </div>
-  `;
-}
-
-export function getHorizontalErrorState(
-  file: File,
-  errorMessage: string,
-  originalUrl: string
-): TemplateResult {
-  return html`
-    <div class="error horizontal-div">
-      <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>${file.name}</p>
-          <p>${errorMessage}</p>
-        </div>
-      </div>
-      <nile-icon 
-        @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} 
-        name="close" 
-        size="14" 
-        class="icon"
-      ></nile-icon>
-    </div>
-  `;
-}
-
-// vertical states
-export function getVerticalPreviewState(
-  url: string,
-  file: File,
-  originalUrl: string
-): TemplateResult {
-  return html`
-    <div class="vertical-div vertical-preview">
-      <div>
-        <img
-          class="image-preview"
-          src=${url}
-          alt=${file.name}
-        />
-      </div>
-
-      <div class="content-container">
-        <p>${file.name}</p>
-         <p>${(file.type.split('/')[1]).toUpperCase()} &#8226; ${(Number(file.size) / 1000).toFixed(0)}KB</p>
-      </div>
-
-      <nile-icon 
-        @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}
-        name="trash" 
-        size="14" 
-        class="corner-icon icon"
-      ></nile-icon>
-    </div>
-  `;
-}
-
-export function getVerticalNoPreviewState(
-  file: File,
-  originalUrl: string
-): TemplateResult {
-  return html`
-    <div class="vertical-div vertical-no-preview">
-      <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>${file.type} &#8226; ${(Number(file.size) / 1000).toFixed(0)}KB</p>
-      </div>
-
-      <nile-icon
-        @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}
-        name="trash"
-        size="14"
-        class="corner-icon  icon"
-      ></nile-icon>
-    </div>
-  `;
-}
-
-export function getVerticalErrorState(
-  file: File,
-  errorMessage: string,
-  originalUrl: string
-): TemplateResult {
-  return html`
-    <div class="vertical-div vertical-error">
-      <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="error-message">
-        <p>${file.name}</p>
-        <div class="error-p">
-          <p>${errorMessage}</p>
-        </div>
-      </div>
-
-      <nile-icon 
-        @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}
-        name="close" 
-        size="14" 
-        class="corner-icon icon"
-      ></nile-icon>
-    </div>
-  `;
-}

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

@@ -1,146 +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,
-  getVerticalErrorState,
-  getVerticalNoPreviewState,
-  getVerticalPreviewState
-} from './nile-file-preview.template';
-
-
-/**
- * Nile preview component.
- *
- * @tag nile-preview
- *
- */
-@customElement('nile-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: Array }) allowedTypes: string[] = [];
-	@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 = "";
-
-  /**
-   * Render method
-   * @slot This is a slot test
-   */
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    this.emit(FilePreviewEvent.NILE_INIT);
-  }
-
-  protected updated(changedProperties: PropertyValues): void {
-
-    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);
-    }
-  }
-
-  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;
-
-      this.inputFileHtml = this.variant === FilePreviewVariant.HORIZONTAL
-        ? getHorizontalErrorState(dummyFile, this.errorMessage, this.originalUrl)
-        : getVerticalErrorState(dummyFile, this.errorMessage, this.originalUrl);
-      this.requestUpdate();
-    }
-  }
-
-	public async createState(file: File): Promise<void> {
-    const isHorizontal = this.variant === FilePreviewVariant.HORIZONTAL;
-
-    if (this.allowedTypes.includes(file.type)) {  
-      if (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.errorMessage = FilePreviewErrorMessages.INVALID_FORMAT;
-
-      this.inputFileHtml = isHorizontal
-        ? getHorizontalErrorState(file, this.errorMessage, this.originalUrl)
-        : getVerticalErrorState(file, this.errorMessage, this.originalUrl);
-    }
-    this.requestUpdate();
-  }
-
-  public render(): TemplateResult {
-    return html`
-			${this.inputFileHtml ?
-				this.inputFileHtml :
-				html``
-			}
-    `;
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this.emit(FilePreviewEvent.NILE_DESTROY);
-  }
-
-  /* #endregion */
-}
-
-export default NileFilePreview;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-preview': NileFilePreview;
-  }
-}

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

@@ -1,26 +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 = "Size limit exceeded",
-  FAILED_TO_LOAD = "Failed to load file from URL",
-  UNKNOWN_FILE_NAME = 'unknown-file'
-}
-
-export enum FilePreviewEvent {
-  NILE_INIT = "nile-init",
-  NILE_RECEIVE = "nile-receive",
-  NILE_REMOVE = "nile-remove",
-  NILE_DESTROY = "nile-destroy"
-}

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

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

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

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

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

@@ -1,34 +0,0 @@
-import { RemoveFileDetail, FilePreviewEvent } 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('No file selected');
-    }
-
-    reader.onload = () => {
-      const previewUrl = reader.result as string;
-      resolve(previewUrl);
-    };
-
-    reader.onerror = (error) => {
-      reject("Unable to generate the 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,
-      })
-    );
-  }
-};

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

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

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

@@ -1 +0,0 @@
-export { NileFileUpload } from './nile-file-upload';