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

package/{plop-templates/lit/lit.test.ts.hbs → src/nile-file-preview/nile-file-preview.test.ts}

@@ -7,13 +7,13 @@
 
  
 import { fixture, assert, expect, html } from '@open-wc/testing';
-import './nile-{{name}}'; // Just import to register the element
+import './nile-file-preview'; // Just import to register the element
 
-describe('<nile-{{name}}>', () => {
+describe('<nile-preview>', () => {
   let element: HTMLElement;
 
   beforeEach(async () => {
-    element = await fixture(html`<nile-{{name}}></nile-{{name}}>`);
+    element = await fixture(html`<nile-file-preview></nile-file-preview>`);
   });
 
   it('passes accessibility test', async () => {
@@ -21,12 +21,12 @@ describe('<nile-{{name}}>', () => {
   });
 
   it('renders with the correct tag name', () => {
-    expect(element.tagName.toLowerCase()).to.equal('nile-{{name}}');
+    expect(element.tagName.toLowerCase()).to.equal('nile-preview');
   });
 
   it('renders with slot content when provided', async () => {
     const testContent = 'Test Content';
-    element = await fixture(html`<nile-{{name}}>${testContent}</nile-{{name}}>`);
+    element = await fixture(html`<nile-file-preview>${testContent}</nile-file-preview>`);
     
     const slot = (element.shadowRoot!.querySelector('slot') as HTMLSlotElement);
     assert.exists(slot, 'Slot should exist');

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

@@ -0,0 +1,146 @@
+/**
+ * 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

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

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

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

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

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

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

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

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

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