@aquera/nile-elements 1.3.3-beta-1.3 → 1.3.3-beta-1.5

package/dist/src/nile-file-preview/nile-file-preview.js

@@ -0,0 +1,200 @@
+/**
+ * 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 { __decorate } from "tslib";
+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 { html } from 'lit';
+import { getHorizontalErrorState, getHorizontalNoPreviewState, getHorizontalPreviewState, getHorizontalUploadingState, getVerticalErrorState, getVerticalNoPreviewState, getVerticalPreviewState, getVerticalUploadingState } from './nile-file-preview.template';
+/**
+ * Nile preview component.
+ *
+ * @tag nile-preview
+ *
+ */
+let NileFilePreview = class NileFilePreview extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.errorMessage = "";
+        this.fileUrl = "";
+        this.uploadStatus = 0;
+        this.state = FilePreviewState.DEFAULT;
+        this.variant = FilePreviewVariant.HORIZONTAL;
+        this.inputFileName = "";
+        this.inputFileHtml = null;
+        this.originalUrl = "";
+        this.isStringTruncated = false;
+        this.customFile = new File([], "Harsh", { type: "image/png" });
+        /* #endregion */
+    }
+    /**
+     * The styles for nile-preview
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.emit(FilePreviewEvent.NILE_INIT);
+    }
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('uploadStatus') && this.uploadStatus) {
+            if (this.uploadStatus < 100) {
+                this.createUploadState(this.inputFile, this.uploadStatus);
+            }
+            else {
+                this.createState(this.inputFile);
+            }
+        }
+        else 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);
+        }
+        else if (changedProperties.has('errorMessage')) {
+            this.createState(this.inputFile);
+        }
+    }
+    createUploadState(file, uploadStatus) {
+        const isHorizontal = this.variant === FilePreviewVariant.HORIZONTAL;
+        this.inputFileHtml = isHorizontal
+            ? getHorizontalUploadingState(file, uploadStatus)
+            : getVerticalUploadingState(file, uploadStatus);
+        this.requestUpdate();
+    }
+    async handleFileUrl(url) {
+        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;
+            console.error(this.errorMessage);
+            this.inputFileHtml = this.variant === FilePreviewVariant.HORIZONTAL
+                ? getHorizontalErrorState(dummyFile, this.errorMessage, this.originalUrl, this)
+                : getVerticalErrorState(dummyFile, this.errorMessage, this.originalUrl, this);
+            this.requestUpdate();
+        }
+    }
+    async createState(file) {
+        const isHorizontal = this.variant === FilePreviewVariant.HORIZONTAL;
+        if (!this.errorMessage) {
+            if (file && 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.inputFileHtml = isHorizontal
+                ? getHorizontalErrorState(file, this.errorMessage, this.originalUrl, this)
+                : getVerticalErrorState(file, this.errorMessage, this.originalUrl, this);
+        }
+        this.requestUpdate();
+    }
+    getState() {
+        if (this.variant === "horizontal")
+            return this.getHorizontalStates();
+        return this.getVerticalStates();
+    }
+    getHorizontalStates() {
+        switch (this.state) {
+            case FilePreviewState.UPLOADING:
+                return getHorizontalUploadingState(this.customFile, 2);
+            case FilePreviewState.PREVIEW:
+                return getHorizontalPreviewState("https://s6.imgcdn.dev/YINe6a.jpg", this.customFile, this.originalUrl);
+            case FilePreviewState.NO_PREVIEW:
+                return getHorizontalNoPreviewState(this.customFile, this.originalUrl);
+            case FilePreviewState.ERROR:
+                return getHorizontalErrorState(this.customFile, FilePreviewErrorMessages.CUSTOM_ERROR, this.originalUrl, this);
+            default:
+                return this.inputFileHtml || html ``;
+        }
+    }
+    getVerticalStates() {
+        switch (this.state) {
+            case FilePreviewState.UPLOADING:
+                return getVerticalUploadingState(this.customFile, 2);
+            case FilePreviewState.PREVIEW:
+                return getVerticalPreviewState("https://s6.imgcdn.dev/YINe6a.jpg", this.customFile, this.originalUrl);
+            case FilePreviewState.NO_PREVIEW:
+                return getVerticalNoPreviewState(this.customFile, this.originalUrl);
+            case FilePreviewState.ERROR:
+                return getVerticalErrorState(this.customFile, FilePreviewErrorMessages.CUSTOM_ERROR, this.originalUrl, this);
+            default:
+                return this.inputFileHtml || html ``;
+        }
+    }
+    render() {
+        if (this.state) {
+            return this.getState();
+        }
+        return html `${this.inputFileHtml ?? html ``}`;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.emit(FilePreviewEvent.NILE_DESTROY);
+    }
+};
+__decorate([
+    property({ type: String })
+], NileFilePreview.prototype, "errorMessage", void 0);
+__decorate([
+    property({ type: Object })
+], NileFilePreview.prototype, "inputFile", void 0);
+__decorate([
+    property({ type: String })
+], NileFilePreview.prototype, "fileUrl", void 0);
+__decorate([
+    property({ type: Number })
+], NileFilePreview.prototype, "uploadStatus", void 0);
+__decorate([
+    property({ type: String })
+], NileFilePreview.prototype, "state", void 0);
+__decorate([
+    property({ type: String })
+], NileFilePreview.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], NileFilePreview.prototype, "inputFileName", void 0);
+NileFilePreview = __decorate([
+    customElement('nile-file-preview')
+], NileFilePreview);
+export { NileFilePreview };
+export default NileFilePreview;
+//# sourceMappingURL=nile-file-preview.js.map

package/dist/src/nile-file-preview/nile-file-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-file-preview.js","sourceRoot":"","sources":["../../../src/nile-file-preview/nile-file-preview.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {styles} from './nile-file-preview.css';\nimport NileElement from '../internal/nile-element';\nimport { customElement, property } from 'lit/decorators.js';\nimport { generatePreviewUrl } from './utils';\nimport { FilePreviewState, FilePreviewVariant, FilePreviewErrorMessages, FilePreviewEvent } from './types';\nimport { LitElement, html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';\nimport {\n  getHorizontalErrorState,\n  getHorizontalNoPreviewState,\n  getHorizontalPreviewState,\n  getHorizontalUploadingState,\n  getVerticalErrorState,\n  getVerticalNoPreviewState,\n  getVerticalPreviewState,\n  getVerticalUploadingState\n} from './nile-file-preview.template';\n\n\n/**\n * Nile preview component.\n *\n * @tag nile-preview\n *\n */\n@customElement('nile-file-preview')\nexport class NileFilePreview extends NileElement {\n  /**\n   * The styles for nile-preview\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @property({ type: String }) errorMessage: string = \"\";\n\t@property({ type: Object }) inputFile: File; \n\t@property({ type: String }) fileUrl: string = \"\";\n\t@property({ type: Number }) uploadStatus: number = 0;\n\t@property({ type: String }) state: FilePreviewState = FilePreviewState.DEFAULT;\n\t@property({ type: String }) variant: FilePreviewVariant = FilePreviewVariant.HORIZONTAL;\n  @property({ type: String }) inputFileName: string = \"\";\n\tprivate inputFileHtml: TemplateResult | null = null;\n  private originalUrl: string = \"\";\n  public isStringTruncated: boolean = false;\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.emit(FilePreviewEvent.NILE_INIT);\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    super.firstUpdated(_changedProperties);\n  }\n\n  protected updated(changedProperties: PropertyValues): void {\n    if(changedProperties.has('uploadStatus') && this.uploadStatus) {\n      if(this.uploadStatus < 100) {\n        this.createUploadState(this.inputFile, this.uploadStatus);\n      } else {\n        this.createState(this.inputFile);\n      }\n    } else if (changedProperties.has('inputFile') && this.inputFile) {\n      this.createState(this.inputFile); \n      this.emit(FilePreviewEvent.NILE_RECEIVE);\n\n    } else if (changedProperties.has('fileUrl') && this.fileUrl) {\n      this.handleFileUrl(this.fileUrl);\n      this.emit(FilePreviewEvent.NILE_RECEIVE);\n\n    } else if (changedProperties.has('errorMessage')) {\n      this.createState(this.inputFile);\n    }\n  }\n\n  private createUploadState( file: File, uploadStatus: number): void {\n    const isHorizontal = this.variant === FilePreviewVariant.HORIZONTAL;\n\n    this.inputFileHtml = isHorizontal \n    ? getHorizontalUploadingState(file, uploadStatus)\n    : getVerticalUploadingState(file, uploadStatus);\n\n    this.requestUpdate();\n  }\n\n  private async handleFileUrl(url: string): Promise<void> {\n    this.originalUrl = url;\n    try {\n      const response = await fetch(url);\n      const blob = await response.blob();\n      const fileName = this.inputFileName || url.split('/').pop() || FilePreviewErrorMessages.UNKNOWN_FILE_NAME;\n      const file = new File([blob], fileName, { type: blob.type });\n\n      this.createState(file);\n    } catch (error) {\n      const dummyFile = new File([], this.inputFileName || FilePreviewErrorMessages.UNKNOWN_FILE_NAME, { type: 'application/octet-stream' });\n      this.errorMessage = FilePreviewErrorMessages.FAILED_TO_LOAD;\n      console.error(this.errorMessage);\n\n      this.inputFileHtml = this.variant === FilePreviewVariant.HORIZONTAL\n        ? getHorizontalErrorState(dummyFile, this.errorMessage, this.originalUrl, this)\n        : getVerticalErrorState(dummyFile, this.errorMessage, this.originalUrl, this);\n      this.requestUpdate();\n    }\n  }\n\n\tpublic async createState(file: File): Promise<void> {\n    const isHorizontal = this.variant === FilePreviewVariant.HORIZONTAL;\n\n    if (!this.errorMessage) {  \n      if (file && file.type.startsWith('image/')) {\n        try {\n          const url = await generatePreviewUrl(file);\n          this.inputFileHtml = isHorizontal\n            ? getHorizontalPreviewState(url, file, this.originalUrl)\n            : getVerticalPreviewState(url, file, this.originalUrl);\n        } catch (error) {\n          this.inputFileHtml = isHorizontal\n            ? getHorizontalNoPreviewState(file, this.originalUrl)\n            : getVerticalNoPreviewState(file, this.originalUrl); \n        }\n      } else {\n        this.inputFileHtml = isHorizontal\n          ? getHorizontalNoPreviewState(file, this.originalUrl)\n          : getVerticalNoPreviewState(file, this.originalUrl);\n      }\n    } else {\n      this.inputFileHtml = isHorizontal\n        ? getHorizontalErrorState(file, this.errorMessage, this.originalUrl, this)\n        : getVerticalErrorState(file, this.errorMessage, this.originalUrl, this);\n    }\n    this.requestUpdate();\n  }\n\n  private customFile = new File([], \"Harsh\", { type: \"image/png\" })\n\n  getState(): TemplateResult {\n    if(this.variant === \"horizontal\") return this.getHorizontalStates();\n    return this.getVerticalStates();\n  }\n\n  getHorizontalStates(): TemplateResult {\n    switch(this.state) {\n      case FilePreviewState.UPLOADING:\n        return getHorizontalUploadingState(this.customFile, 2);\n      case FilePreviewState.PREVIEW:\n        return getHorizontalPreviewState(\"https://s6.imgcdn.dev/YINe6a.jpg\", this.customFile, this.originalUrl);\n      case FilePreviewState.NO_PREVIEW:\n        return getHorizontalNoPreviewState(this.customFile, this.originalUrl);\n      case FilePreviewState.ERROR:\n        return getHorizontalErrorState(this.customFile, FilePreviewErrorMessages.CUSTOM_ERROR, this.originalUrl, this);\n      default:\n        return this.inputFileHtml || html``;\n    }\n  }\n\n  getVerticalStates(): TemplateResult {\n    switch(this.state) {\n      case FilePreviewState.UPLOADING:\n        return getVerticalUploadingState(this.customFile, 2);\n      case FilePreviewState.PREVIEW:\n        return getVerticalPreviewState(\"https://s6.imgcdn.dev/YINe6a.jpg\", this.customFile, this.originalUrl);\n      case FilePreviewState.NO_PREVIEW:\n        return getVerticalNoPreviewState(this.customFile, this.originalUrl);\n      case FilePreviewState.ERROR:\n        return getVerticalErrorState(this.customFile, FilePreviewErrorMessages.CUSTOM_ERROR, this.originalUrl, this);\n      default:\n        return this.inputFileHtml || html``;\n    }\n  }\n\n  public render(): TemplateResult {\n    if (this.state) {\n      return this.getState();\n    }\n    return html`${this.inputFileHtml ?? html``}`;\n  }\n  \n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.emit(FilePreviewEvent.NILE_DESTROY);\n  }\n\n  /* #endregion */\n}\n\nexport default NileFilePreview;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-file-preview': NileFilePreview;\n  }\n}"]}

package/dist/src/nile-file-preview/nile-file-preview.template.js

@@ -0,0 +1,214 @@
+/**
+ * Template File for nile-preview component
+ */
+import './nile-file-preview.css';
+import { html } from 'lit';
+import { removeFile, cancelFileUpload } from './utils';
+import { formatFileSize, truncateString, getFileType } from './utils/nile-file-preview.util';
+export function getHorizontalUploadingState(file, uploadStatus) {
+    return html `
+      <div class="uploading" part="horizontal-uploading-state">
+        <nile-loader width="24" height="24"></nile-loader>
+        <div class="progress-bar-container">
+          <div class="progress-bar-percent">
+            <p>Uploading File...</p>
+            <p>${uploadStatus}%</p>
+          </div>
+          <nile-progress-bar
+            part="horizontal-progress-bar"
+            value="${uploadStatus}"
+          ></nile-progress-bar>
+          <p class="horizontal-file-name">${file.name}</p>
+        </div>
+        <slot @click=${(e) => cancelFileUpload(file, e)} name="cancelIcon">
+          <nile-icon
+            name="close"
+            size="14"
+            class="icon"
+          ></nile-icon>
+        </slot>
+      </div>
+    `;
+}
+export function getHorizontalPreviewState(url, file, originalUrl) {
+    return html `
+    <div class="preview horizontal-div" part="horizontal-preview-state">
+      <div class="preview-inner">
+        <div class="preview-image-container">
+            <img
+              class="image-preview"
+              src=${url}
+              alt=${file.name}
+            />
+        </div>
+        <div class="preview-file-info">
+          <p>${file.name}</p>
+          <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
+        </div>
+      </div>
+      <div class="preview-actions">
+        <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancel-icon">
+          <nile-icon
+            name="trash"
+            size="14"
+            class="icon"
+          ></nile-icon>
+        </slot>
+      </div>
+    </div>
+  `;
+}
+export function getHorizontalNoPreviewState(file, originalUrl) {
+    return html `
+    <div class="no-preview horizontal-div" part="horizontal-no-preview-state">
+      <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>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
+        </div>
+      </div>
+      <div>
+        <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancelIcon">
+          <nile-icon
+            name="trash"
+            size="14"
+            class="icon"
+          ></nile-icon>
+        </slot>
+      </div>
+    </div>
+  `;
+}
+export function getHorizontalErrorState(file, errorMessage, originalUrl, nileFilePreview) {
+    truncateString(nileFilePreview);
+    return html `
+    <div class="error horizontal-div" part="horizontal-error-state">
+      <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 class="horizontal-file-name">${file.name}</p>
+          ${nileFilePreview.isStringTruncated
+        ? html `<nile-tooltip content=${errorMessage}>
+                  <span>${errorMessage}</span>
+                </nile-tooltip>`
+        : html `<span>${errorMessage}</span>`}
+        </div>
+      </div>
+      <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancelIcon">
+          <nile-icon
+            name="close"
+            size="14"
+            class="icon"
+          ></nile-icon>
+        </slot>
+    </div>
+  `;
+}
+// vertical states
+export function getVerticalUploadingState(file, uploadStatus) {
+    return html `
+    <div class="vertical-div vertical-uploading" part="vertical-uploading-state">
+      <div class="loading">
+        <nile-loader width="24" height="24"></nile-loader>
+      </div>
+
+      <div class="progress-bar-container">
+        <div class="progress-bar-percent">
+          <p>Uploading...</p>
+          <p>${uploadStatus}%</p>
+        </div>
+        <nile-progress-bar value=${uploadStatus}></nile-progress-bar>
+        <p class="vertical-file-name">${file.name}</p>
+      </div>
+
+      <slot @click=${(e) => cancelFileUpload(file, e)} name="cancelIcon">
+        <nile-icon
+          name="close"
+          size="14"
+          class="icon corner-icon"
+        ></nile-icon>
+      </slot>
+    </div>
+  `;
+}
+export function getVerticalPreviewState(url, file, originalUrl) {
+    return html `
+    <div class="vertical-div vertical-preview" part="vertical-preview-state">
+      <div>
+        <img
+          class="image-preview"
+          src=${url}
+          alt=${file.name}
+        />
+      </div>
+
+      <div class="content-container">
+        <p>${file.name}</p>
+         <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
+      </div>
+
+      <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancelIcon">
+        <nile-icon
+          name="trash"
+          size="14"
+          class="icon corner-icon"
+        ></nile-icon>
+      </slot>
+    </div>
+  `;
+}
+export function getVerticalNoPreviewState(file, originalUrl) {
+    return html `
+    <div class="vertical-div vertical-no-preview" part="vertical-no-preview-state">
+      <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>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
+      </div>
+
+      <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancelIcon">
+        <nile-icon
+          name="trash"
+          size="14"
+          class="icon corner-icon"
+        ></nile-icon>
+      </slot>
+    </div>
+  `;
+}
+export function getVerticalErrorState(file, errorMessage, originalUrl, nileFilePreview) {
+    truncateString(nileFilePreview);
+    return html `
+    <div class="vertical-div vertical-error" part="vertical-error-state">
+      <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="file-info-vertical-state">
+        <p class="vertical-file-name">${file.name}</p>
+        ${nileFilePreview.isStringTruncated
+        ? html `<nile-tooltip content=${errorMessage}>
+                <span>${errorMessage}</span>
+              </nile-tooltip>`
+        : html `<span>${errorMessage}</span>`}
+      </div>
+
+      <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancelIcon">
+        <nile-icon
+          name="close"
+          size="14"
+          class="icon corner-icon"
+        ></nile-icon>
+      </slot>
+    </div>
+  `;
+}
+//# sourceMappingURL=nile-file-preview.template.js.map

package/dist/src/nile-file-preview/nile-file-preview.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-file-preview.template.js","sourceRoot":"","sources":["../../../src/nile-file-preview/nile-file-preview.template.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Template File for nile-preview component\n */\n\nimport './nile-file-preview.css';\nimport { html, TemplateResult } from 'lit';\nimport { FilePreviewErrorMessages, RemoveFileDetail } from './types';\nimport { removeFile, cancelFileUpload } from './utils';\nimport { formatFileSize, truncateString, getFileType } from './utils/nile-file-preview.util';\nimport { NileFilePreview } from './nile-file-preview';\n\n export function getHorizontalUploadingState(\n  file: File,\n  uploadStatus: number\n ): TemplateResult {\n    return html`\n      <div class=\"uploading\" part=\"horizontal-uploading-state\">\n        <nile-loader width=\"24\" height=\"24\"></nile-loader>\n        <div class=\"progress-bar-container\">\n          <div class=\"progress-bar-percent\">\n            <p>Uploading File...</p>\n            <p>${uploadStatus}%</p>\n          </div>\n          <nile-progress-bar\n            part=\"horizontal-progress-bar\"\n            value=\"${uploadStatus}\"\n          ></nile-progress-bar>\n          <p class=\"horizontal-file-name\">${file.name}</p>\n        </div>\n        <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name=\"cancelIcon\">\n          <nile-icon\n            name=\"close\"\n            size=\"14\"\n            class=\"icon\"\n          ></nile-icon>\n        </slot>\n      </div>\n    `;\n  }\n\nexport function getHorizontalPreviewState(\n  url: string,\n  file: File,\n  originalUrl: string\n): TemplateResult {\n  return html`\n    <div class=\"preview horizontal-div\" part=\"horizontal-preview-state\">\n      <div class=\"preview-inner\">\n        <div class=\"preview-image-container\">\n            <img\n              class=\"image-preview\"\n              src=${url}\n              alt=${file.name}\n            />\n        </div>\n        <div class=\"preview-file-info\">\n          <p>${file.name}</p>\n          <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>\n        </div>\n      </div>\n      <div class=\"preview-actions\">\n        <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancel-icon\">\n          <nile-icon\n            name=\"trash\"\n            size=\"14\"\n            class=\"icon\"\n          ></nile-icon>\n        </slot>\n      </div>\n    </div>\n  `;\n}\n\nexport function getHorizontalNoPreviewState(\n  file: File,\n  originalUrl: string\n): TemplateResult {\n  return html`\n    <div class=\"no-preview horizontal-div\" part=\"horizontal-no-preview-state\">\n      <div class=\"no-preview-container\">\n        <div class=\"document-icon\">\n          <nile-icon name=\"general\" size=\"20\" color=\"var(--nile-colors-blue-500)\"></nile-icon>\n        </div>\n        <div class=\"preview-file-info\">\n          <p>${file.name}</p>\n          <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>\n        </div>\n      </div>\n      <div>\n        <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n          <nile-icon\n            name=\"trash\"\n            size=\"14\"\n            class=\"icon\"\n          ></nile-icon>\n        </slot>\n      </div>\n    </div>\n  `;\n}\n\nexport function getHorizontalErrorState(\n  file: File,\n  errorMessage: string,\n  originalUrl: string,\n  nileFilePreview: NileFilePreview\n): TemplateResult {\n  truncateString(nileFilePreview);\n  return html`\n    <div class=\"error horizontal-div\" part=\"horizontal-error-state\">\n      <div class=\"error-container\">\n        <div class=\"error-icon\">\n          <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n        </div>\n        <div class=\"file-info\">\n          <p class=\"horizontal-file-name\">${file.name}</p>\n          ${\n            nileFilePreview.isStringTruncated\n              ? html`<nile-tooltip content=${errorMessage}>\n                  <span>${errorMessage}</span>\n                </nile-tooltip>`\n              : html`<span>${errorMessage}</span>`\n          }\n        </div>\n      </div>\n      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n          <nile-icon\n            name=\"close\"\n            size=\"14\"\n            class=\"icon\"\n          ></nile-icon>\n        </slot>\n    </div>\n  `;\n}\n\n// vertical states\nexport function getVerticalUploadingState(\n  file: File,\n  uploadStatus: number\n): TemplateResult {\n  return html`\n    <div class=\"vertical-div vertical-uploading\" part=\"vertical-uploading-state\">\n      <div class=\"loading\">\n        <nile-loader width=\"24\" height=\"24\"></nile-loader>\n      </div>\n\n      <div class=\"progress-bar-container\">\n        <div class=\"progress-bar-percent\">\n          <p>Uploading...</p>\n          <p>${uploadStatus}%</p>\n        </div>\n        <nile-progress-bar value=${uploadStatus}></nile-progress-bar>\n        <p class=\"vertical-file-name\">${file.name}</p>\n      </div>\n\n      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name=\"cancelIcon\">\n        <nile-icon\n          name=\"close\"\n          size=\"14\"\n          class=\"icon corner-icon\"\n        ></nile-icon>\n      </slot>\n    </div>\n  `;\n}\n\n\nexport function getVerticalPreviewState(\n  url: string,\n  file: File,\n  originalUrl: string\n): TemplateResult {\n  return html`\n    <div class=\"vertical-div vertical-preview\" part=\"vertical-preview-state\">\n      <div>\n        <img\n          class=\"image-preview\"\n          src=${url}\n          alt=${file.name}\n        />\n      </div>\n\n      <div class=\"content-container\">\n        <p>${file.name}</p>\n         <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>\n      </div>\n\n      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n        <nile-icon\n          name=\"trash\"\n          size=\"14\"\n          class=\"icon corner-icon\"\n        ></nile-icon>\n      </slot>\n    </div>\n  `;\n}\n\nexport function getVerticalNoPreviewState(\n  file: File,\n  originalUrl: string\n): TemplateResult {\n  return html`\n    <div class=\"vertical-div vertical-no-preview\" part=\"vertical-no-preview-state\">\n      <div class=\"vertical-document-icon\">\n        <nile-icon name=\"general\" size=\"20\" color=\"var(--nile-colors-blue-500)\"></nile-icon>\n      </div>\n\n      <div class=\"content-container\">\n        <p>${file.name}</p>\n        <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>\n      </div>\n\n      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n        <nile-icon\n          name=\"trash\"\n          size=\"14\"\n          class=\"icon corner-icon\"\n        ></nile-icon>\n      </slot>\n    </div>\n  `;\n}\n\nexport function getVerticalErrorState(\n  file: File,\n  errorMessage: string,\n  originalUrl: string,\n  nileFilePreview: NileFilePreview\n): TemplateResult {\n  truncateString(nileFilePreview);\n  return html`\n    <div class=\"vertical-div vertical-error\" part=\"vertical-error-state\">\n      <div class=\"vertical-document-icon error-bg\">\n        <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n      </div>\n\n      <div class=\"file-info-vertical-state\">\n        <p class=\"vertical-file-name\">${file.name}</p>\n        ${\n          nileFilePreview.isStringTruncated\n            ? html`<nile-tooltip content=${errorMessage}>\n                <span>${errorMessage}</span>\n              </nile-tooltip>`\n            : html`<span>${errorMessage}</span>`\n        }\n      </div>\n\n      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n        <nile-icon\n          name=\"close\"\n          size=\"14\"\n          class=\"icon corner-icon\"\n        ></nile-icon>\n      </slot>\n    </div>\n  `;\n}\n"]}

package/dist/src/nile-file-preview/nile-file-preview.test.js

@@ -0,0 +1,30 @@
+/**
+ * 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-preview'; // Just import to register the element
+describe('<nile-preview>', () => {
+    let element;
+    beforeEach(async () => {
+        element = await fixture(html `<nile-file-preview></nile-file-preview>`);
+    });
+    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-preview');
+    });
+    it('renders with slot content when provided', async () => {
+        const testContent = 'Test Content';
+        element = await fixture(html `<nile-file-preview>${testContent}</nile-file-preview>`);
+        const slot = element.shadowRoot.querySelector('slot');
+        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);
+    });
+});
+//# sourceMappingURL=nile-file-preview.test.js.map

package/dist/src/nile-file-preview/nile-file-preview.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-file-preview.test.js","sourceRoot":"","sources":["../../../src/nile-file-preview/nile-file-preview.test.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,qBAAqB,CAAC,CAAC,sCAAsC;AAEpE,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,IAAI,OAAoB,CAAC;IAEzB,UAAU,CAAC,KAAK,IAAI,EAAE;QACpB,OAAO,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA,yCAAyC,CAAC,CAAC;IACzE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;QACzC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;IAC3C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,GAAG,EAAE;QAC3C,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;QACvD,MAAM,WAAW,GAAG,cAAc,CAAC;QACnC,OAAO,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA,sBAAsB,WAAW,sBAAsB,CAAC,CAAC;QAErF,MAAM,IAAI,GAAI,OAAO,CAAC,UAAW,CAAC,aAAa,CAAC,MAAM,CAAqB,CAAC;QAC5E,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,mBAAmB,CAAC,CAAC;QAEzC,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC5D,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QAClD,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IACrE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n \nimport { fixture, assert, expect, html } from '@open-wc/testing';\nimport './nile-file-preview'; // Just import to register the element\n\ndescribe('<nile-preview>', () => {\n  let element: HTMLElement;\n\n  beforeEach(async () => {\n    element = await fixture(html`<nile-file-preview></nile-file-preview>`);\n  });\n\n  it('passes accessibility test', async () => {\n    await expect(element).to.be.accessible();\n  });\n\n  it('renders with the correct tag name', () => {\n    expect(element.tagName.toLowerCase()).to.equal('nile-preview');\n  });\n\n  it('renders with slot content when provided', async () => {\n    const testContent = 'Test Content';\n    element = await fixture(html`<nile-file-preview>${testContent}</nile-file-preview>`);\n    \n    const slot = (element.shadowRoot!.querySelector('slot') as HTMLSlotElement);\n    assert.exists(slot, 'Slot should exist');\n\n    const assignedNodes = slot.assignedNodes({ flatten: true });\n    expect(assignedNodes.length).to.be.greaterThan(0);\n    expect(assignedNodes[0].textContent?.trim()).to.equal(testContent);\n  });\n});"]}

package/dist/src/nile-file-preview/types/index.js

@@ -0,0 +1,3 @@
+export * from './nile-file-preview.enums';
+export * from './nile-file-preview.interface';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-file-preview/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/nile-file-preview/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './nile-file-preview.enums';\nexport * from './nile-file-preview.interface';"]}

package/dist/src/nile-file-preview/types/nile-file-preview.enums.js

@@ -0,0 +1,34 @@
+export var FilePreviewState;
+(function (FilePreviewState) {
+    FilePreviewState["DEFAULT"] = "default";
+    FilePreviewState["UPLOADING"] = "uploading";
+    FilePreviewState["PREVIEW"] = "preview";
+    FilePreviewState["NO_PREVIEW"] = "no-preview";
+    FilePreviewState["ERROR"] = "error";
+})(FilePreviewState || (FilePreviewState = {}));
+export var FilePreviewVariant;
+(function (FilePreviewVariant) {
+    FilePreviewVariant["HORIZONTAL"] = "horizontal";
+    FilePreviewVariant["VERTICAL"] = "vertical";
+})(FilePreviewVariant || (FilePreviewVariant = {}));
+export var FilePreviewErrorMessages;
+(function (FilePreviewErrorMessages) {
+    FilePreviewErrorMessages["INVALID_FORMAT"] = "Invalid File Format. Please try again.";
+    FilePreviewErrorMessages["SIZE_LIMIT"] = "File exceeds size limit.";
+    FilePreviewErrorMessages["FAILED_TO_LOAD"] = "Failed to load file from URL";
+    FilePreviewErrorMessages["UNKNOWN_FILE_NAME"] = "unknown-file";
+    FilePreviewErrorMessages["UPLOAD_CANCEL"] = "File upload cancelled.";
+    FilePreviewErrorMessages["NO_FILE_SELECTED"] = "No file selected.";
+    FilePreviewErrorMessages["UNABLE_TO_GENEARTE_URL"] = "Unable to generate the url.";
+    FilePreviewErrorMessages["NETWORK_ERROR"] = "Network error! Please try again later.";
+    FilePreviewErrorMessages["CUSTOM_ERROR"] = "Error Occured!";
+})(FilePreviewErrorMessages || (FilePreviewErrorMessages = {}));
+export var FilePreviewEvent;
+(function (FilePreviewEvent) {
+    FilePreviewEvent["NILE_INIT"] = "nile-init";
+    FilePreviewEvent["NILE_RECEIVE"] = "nile-receive";
+    FilePreviewEvent["NILE_REMOVE"] = "nile-remove";
+    FilePreviewEvent["NILE_CANCEL_UPLOAD"] = "nile-cancel-upload";
+    FilePreviewEvent["NILE_DESTROY"] = "nile-destroy";
+})(FilePreviewEvent || (FilePreviewEvent = {}));
+//# sourceMappingURL=nile-file-preview.enums.js.map

package/dist/src/nile-file-preview/types/nile-file-preview.enums.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-file-preview.enums.js","sourceRoot":"","sources":["../../../../src/nile-file-preview/types/nile-file-preview.enums.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,gBAMX;AAND,WAAY,gBAAgB;IAC1B,uCAAmB,CAAA;IACnB,2CAAuB,CAAA;IACvB,uCAAmB,CAAA;IACnB,6CAAyB,CAAA;IACzB,mCAAe,CAAA;AACjB,CAAC,EANW,gBAAgB,KAAhB,gBAAgB,QAM3B;AAED,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,+CAAyB,CAAA;IACzB,2CAAqB,CAAA;AACvB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B;AAED,MAAM,CAAN,IAAY,wBAUX;AAVD,WAAY,wBAAwB;IAClC,qFAAyD,CAAA;IACzD,mEAAuC,CAAA;IACvC,2EAA+C,CAAA;IAC/C,8DAAkC,CAAA;IAClC,oEAAwC,CAAA;IACxC,kEAAsC,CAAA;IACtC,kFAAsD,CAAA;IACtD,oFAAwD,CAAA;IACxD,2DAA+B,CAAA;AACjC,CAAC,EAVW,wBAAwB,KAAxB,wBAAwB,QAUnC;AAED,MAAM,CAAN,IAAY,gBAMX;AAND,WAAY,gBAAgB;IAC1B,2CAAuB,CAAA;IACvB,iDAA6B,CAAA;IAC7B,+CAA2B,CAAA;IAC3B,6DAAyC,CAAA;IACzC,iDAA6B,CAAA;AAC/B,CAAC,EANW,gBAAgB,KAAhB,gBAAgB,QAM3B","sourcesContent":["export enum FilePreviewState {\n  DEFAULT = 'default',\n  UPLOADING = 'uploading',\n  PREVIEW = 'preview',\n  NO_PREVIEW = 'no-preview',\n  ERROR = 'error'\n}\n\nexport enum FilePreviewVariant {\n  HORIZONTAL = 'horizontal',\n  VERTICAL = 'vertical'\n}\n\nexport enum FilePreviewErrorMessages {\n  INVALID_FORMAT = \"Invalid File Format. Please try again.\",\n  SIZE_LIMIT = \"File exceeds size limit.\",\n  FAILED_TO_LOAD = \"Failed to load file from URL\",\n  UNKNOWN_FILE_NAME = 'unknown-file',\n  UPLOAD_CANCEL = \"File upload cancelled.\",\n  NO_FILE_SELECTED = \"No file selected.\",\n  UNABLE_TO_GENEARTE_URL = \"Unable to generate the url.\",\n  NETWORK_ERROR = \"Network error! Please try again later.\",\n  CUSTOM_ERROR = \"Error Occured!\"\n}\n\nexport enum FilePreviewEvent {\n  NILE_INIT = \"nile-init\",\n  NILE_RECEIVE = \"nile-receive\",\n  NILE_REMOVE = \"nile-remove\",\n  NILE_CANCEL_UPLOAD = \"nile-cancel-upload\",\n  NILE_DESTROY = \"nile-destroy\"\n}"]}

package/dist/src/nile-file-preview/types/nile-file-preview.interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=nile-file-preview.interface.js.map

package/dist/src/nile-file-preview/types/nile-file-preview.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-file-preview.interface.js","sourceRoot":"","sources":["../../../../src/nile-file-preview/types/nile-file-preview.interface.ts"],"names":[],"mappings":"","sourcesContent":["export type RemoveFileDetail = {\n  value: File;\n  url: string;\n};\n"]}

package/dist/src/nile-file-preview/utils/index.js

@@ -0,0 +1,2 @@
+export * from './nile-file-preview.util';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-file-preview/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/nile-file-preview/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAA","sourcesContent":["export * from './nile-file-preview.util'"]}

package/dist/src/nile-file-preview/utils/nile-file-preview.util.js

@@ -0,0 +1,63 @@
+import { FilePreviewEvent, FilePreviewErrorMessages } from "../types";
+export const generatePreviewUrl = (file) => {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        if (file) {
+            reader.readAsDataURL(file);
+        }
+        else {
+            reject(FilePreviewErrorMessages.NO_FILE_SELECTED);
+        }
+        reader.onload = () => {
+            const previewUrl = reader.result;
+            resolve(previewUrl);
+        };
+        reader.onerror = (error) => {
+            reject(FilePreviewErrorMessages.UNABLE_TO_GENEARTE_URL);
+        };
+    });
+};
+export const removeFile = (removeFile, e, originalUrl) => {
+    if (e.target) {
+        e.target.dispatchEvent(new CustomEvent(FilePreviewEvent.NILE_REMOVE, {
+            detail: { value: removeFile, url: originalUrl },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+};
+export const cancelFileUpload = (file, e) => {
+    if (e.target) {
+        e.target.dispatchEvent(new CustomEvent(FilePreviewEvent.NILE_CANCEL_UPLOAD, {
+            detail: { file: file },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+};
+export const formatFileSize = (bytes) => {
+    const kb = bytes / 1024;
+    const mb = kb / 1024;
+    const gb = mb / 1024;
+    if (gb >= 1)
+        return gb.toFixed(2) + ' GB';
+    if (mb >= 1)
+        return mb.toFixed(2) + ' MB';
+    if (kb >= 1)
+        return kb.toFixed(2) + ' KB';
+    return bytes + ' B';
+};
+export const getFileType = (type) => {
+    return type.split('/')[1].toUpperCase();
+};
+export const truncateString = (nileFilePreview) => {
+    if (nileFilePreview.variant === 'vertical' && nileFilePreview.errorMessage.length > 34) {
+        nileFilePreview.isStringTruncated = true;
+        nileFilePreview.requestUpdate();
+    }
+    else if (nileFilePreview.variant === 'horizontal' && nileFilePreview.errorMessage.length > 96) {
+        nileFilePreview.isStringTruncated = true;
+        nileFilePreview.requestUpdate();
+    }
+};
+//# sourceMappingURL=nile-file-preview.util.js.map