@aquera/nile-elements 1.5.2 → 1.5.3

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

@@ -8,7 +8,7 @@ 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 { generatePreviewUrl, isRealImage } 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';
@@ -27,10 +27,10 @@ let NileFilePreview = class NileFilePreview extends NileElement {
         this.state = FilePreviewState.DEFAULT;
         this.variant = FilePreviewVariant.HORIZONTAL;
         this.inputFileName = "";
+        this.showFileType = false;
         this.inputFileHtml = null;
         this.originalUrl = "";
         this.isStringTruncated = false;
-        this.customFile = new File([], "Harsh", { type: "image/png" });
         /* #endregion */
     }
     /**
@@ -75,8 +75,8 @@ let NileFilePreview = class NileFilePreview extends NileElement {
     createUploadState(file, uploadStatus) {
         const isHorizontal = this.variant === FilePreviewVariant.HORIZONTAL;
         this.inputFileHtml = isHorizontal
-            ? getHorizontalUploadingState(file, uploadStatus)
-            : getVerticalUploadingState(file, uploadStatus);
+            ? getHorizontalUploadingState(file, uploadStatus, this)
+            : getVerticalUploadingState(file, uploadStatus, this);
         this.requestUpdate();
     }
     async handleFileUrl(url) {
@@ -101,23 +101,30 @@ let NileFilePreview = class NileFilePreview extends NileElement {
     async createState(file) {
         const isHorizontal = this.variant === FilePreviewVariant.HORIZONTAL;
         if (!this.errorMessage) {
-            if (file && file.type.startsWith('image/')) {
+            let isImage = false;
+            try {
+                isImage = file && await isRealImage(file);
+            }
+            catch (error) {
+                isImage = false;
+            }
+            if (isImage) {
                 try {
                     const url = await generatePreviewUrl(file);
                     this.inputFileHtml = isHorizontal
-                        ? getHorizontalPreviewState(url, file, this.originalUrl)
-                        : getVerticalPreviewState(url, file, this.originalUrl);
+                        ? getHorizontalPreviewState(url, file, this.originalUrl, this.showFileType)
+                        : getVerticalPreviewState(url, file, this.originalUrl, this.showFileType);
                 }
                 catch (error) {
                     this.inputFileHtml = isHorizontal
-                        ? getHorizontalNoPreviewState(file, this.originalUrl)
-                        : getVerticalNoPreviewState(file, this.originalUrl);
+                        ? getHorizontalNoPreviewState(file, this.originalUrl, this.showFileType)
+                        : getVerticalNoPreviewState(file, this.originalUrl, this.showFileType);
                 }
             }
             else {
                 this.inputFileHtml = isHorizontal
-                    ? getHorizontalNoPreviewState(file, this.originalUrl)
-                    : getVerticalNoPreviewState(file, this.originalUrl);
+                    ? getHorizontalNoPreviewState(file, this.originalUrl, this.showFileType)
+                    : getVerticalNoPreviewState(file, this.originalUrl, this.showFileType);
             }
         }
         else {
@@ -127,43 +134,7 @@ let NileFilePreview = class NileFilePreview extends NileElement {
         }
         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() {
@@ -192,6 +163,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NileFilePreview.prototype, "inputFileName", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], NileFilePreview.prototype, "showFileType", void 0);
 NileFilePreview = __decorate([
     customElement('nile-file-preview')
 ], NileFilePreview);

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

@@ -1 +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}"]}
+{"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, isRealImage } 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  @property({ type: Boolean, reflect: true, attribute: true }) showFileType: boolean = false;\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, this)\n    : getVerticalUploadingState(file, uploadStatus, this);\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      let isImage = false;\n      try {\n        isImage = file && await isRealImage(file);\n      } catch (error) {\n        isImage = false;\n      }\n      if (isImage) {\n        try {\n          const url = await generatePreviewUrl(file);\n          this.inputFileHtml = isHorizontal\n            ? getHorizontalPreviewState(url, file, this.originalUrl, this.showFileType)\n            : getVerticalPreviewState(url, file, this.originalUrl, this.showFileType);\n        } catch (error) {\n          this.inputFileHtml = isHorizontal\n            ? getHorizontalNoPreviewState(file, this.originalUrl, this.showFileType)\n            : getVerticalNoPreviewState(file, this.originalUrl, this.showFileType);\n        }\n      } else {\n        this.inputFileHtml = isHorizontal\n          ? getHorizontalNoPreviewState(file, this.originalUrl, this.showFileType)\n          : getVerticalNoPreviewState(file, this.originalUrl, this.showFileType);\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  public render(): TemplateResult {\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}\n"]}

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

@@ -4,11 +4,11 @@
 import './nile-file-preview.css';
 import { TemplateResult } from 'lit';
 import { NileFilePreview } from './nile-file-preview';
-export declare function getHorizontalUploadingState(file: File, uploadStatus: number): TemplateResult;
-export declare function getHorizontalPreviewState(url: string, file: File, originalUrl: string): TemplateResult;
-export declare function getHorizontalNoPreviewState(file: File, originalUrl: string): TemplateResult;
+export declare function getHorizontalUploadingState(file: File, uploadStatus: number, nileFilePreview: NileFilePreview): TemplateResult;
+export declare function getHorizontalPreviewState(url: string, file: File, originalUrl: string, showFileType: boolean): TemplateResult;
+export declare function getHorizontalNoPreviewState(file: File, originalUrl: string, showFileType: boolean): TemplateResult;
 export declare function getHorizontalErrorState(file: File, errorMessage: string, originalUrl: string, nileFilePreview: NileFilePreview): TemplateResult;
-export declare function getVerticalUploadingState(file: File, uploadStatus: number): TemplateResult;
-export declare function getVerticalPreviewState(url: string, file: File, originalUrl: string): TemplateResult;
-export declare function getVerticalNoPreviewState(file: File, originalUrl: string): TemplateResult;
+export declare function getVerticalUploadingState(file: File, uploadStatus: number, nileFilePreview: NileFilePreview): TemplateResult;
+export declare function getVerticalPreviewState(url: string, file: File, originalUrl: string, showFileType: boolean): TemplateResult;
+export declare function getVerticalNoPreviewState(file: File, originalUrl: string, showFileType: boolean): TemplateResult;
 export declare function getVerticalErrorState(file: File, errorMessage: string, originalUrl: string, nileFilePreview: NileFilePreview): TemplateResult;

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

@@ -5,7 +5,7 @@ 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) {
+export function getHorizontalUploadingState(file, uploadStatus, nileFilePreview) {
     return html `
       <div class="uploading" part="horizontal-uploading-state">
         <nile-loader width="24" height="24"></nile-loader>
@@ -16,11 +16,11 @@ export function getHorizontalUploadingState(file, uploadStatus) {
           </div>
           <nile-progress-bar
             part="horizontal-progress-bar"
-            value="${uploadStatus}"
+            .value="${uploadStatus}"
           ></nile-progress-bar>
           <p class="horizontal-file-name" part="horizontal-file-name">${file.name}</p>
         </div>
-        <slot @click=${(e) => cancelFileUpload(file, e)} name="cancelIcon">
+        <slot @click=${(e) => cancelFileUpload(file, e, nileFilePreview)} name="cancelIcon">
           <nile-icon
             name="close"
             size="14"
@@ -30,7 +30,7 @@ export function getHorizontalUploadingState(file, uploadStatus) {
       </div>
     `;
 }
-export function getHorizontalPreviewState(url, file, originalUrl) {
+export function getHorizontalPreviewState(url, file, originalUrl, showFileType) {
     return html `
     <div class="preview horizontal-div" part="horizontal-preview-state">
       <div class="preview-inner" part="horizontal-preview-inner">
@@ -43,8 +43,14 @@ export function getHorizontalPreviewState(url, file, originalUrl) {
             />
         </div>
         <div class="preview-file-info" part="horizontal-preview-file-info">
-          <p part="horizontal-preview-file-info-name">${file.name}</p>
-          <p part="horizontal-preview-file-info-type">${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
+          <p part="horizontal-preview-file-info-name">
+            <slot name="file-name">${file.name}</slot>
+          </p>
+          <p part="horizontal-preview-file-info-type">
+            <slot name="file-type">${getFileType(file, showFileType)}</slot>
+            &#8226;
+            <slot name="file-size">${formatFileSize(Number(file.size))}</slot>
+          </p>
         </div>
       </div>
       <div class="preview-actions" part="horizontal-preview-actions">
@@ -60,7 +66,7 @@ export function getHorizontalPreviewState(url, file, originalUrl) {
     </div>
   `;
 }
-export function getHorizontalNoPreviewState(file, originalUrl) {
+export function getHorizontalNoPreviewState(file, originalUrl, showFileType) {
     return html `
     <div class="no-preview horizontal-div" part="horizontal-no-preview-state">
       <div class="no-preview-container" part="horizontal-no-preview-container">
@@ -68,8 +74,14 @@ export function getHorizontalNoPreviewState(file, originalUrl) {
           <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
         </div>
         <div class="preview-file-info" part="horizontal-no-preview-file-info">
-          <p part="horizontal-no-preview-file-info-name">${file.name}</p>
-          <p part="horizontal-no-preview-file-info-type">${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
+          <p part="horizontal-no-preview-file-info-name">
+            <slot name="file-name">${file.name}</slot>
+          </p>
+          <p part="horizontal-no-preview-file-info-type">
+            <slot name="file-type">${getFileType(file, showFileType)}</slot>
+            &#8226;
+            <slot name="file-size">${formatFileSize(Number(file.size))}</slot>
+          </p>
         </div>
       </div>
       <div>
@@ -94,11 +106,15 @@ export function getHorizontalErrorState(file, errorMessage, originalUrl, nileFil
           <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
         </div>
         <div class="file-info" part="horizontal-error-file-info">
-          <p class="horizontal-file-name" part="horizontal-error-file-info-name">${file.name}</p>
+          <p class="horizontal-file-name" part="horizontal-error-file-info-name">
+            <slot name="file-name">
+              ${file.name}
+            </slot>
+          </p>
           ${nileFilePreview.isStringTruncated
-        ? html `<nile-tooltip content=${errorMessage}>
+        ? html `<nile-lite-tooltip .content=${errorMessage}>
                   <span>${errorMessage}</span>
-                </nile-tooltip>`
+                </nile-lite-tooltip>`
         : html `<span>${errorMessage}</span>`}
         </div>
       </div>
@@ -114,7 +130,7 @@ export function getHorizontalErrorState(file, errorMessage, originalUrl, nileFil
   `;
 }
 // vertical states
-export function getVerticalUploadingState(file, uploadStatus) {
+export function getVerticalUploadingState(file, uploadStatus, nileFilePreview) {
     return html `
     <div class="vertical-div vertical-uploading" part="vertical-uploading-state">
       <div class="loading" part="vertical-loading">
@@ -130,7 +146,7 @@ export function getVerticalUploadingState(file, uploadStatus) {
         <p class="vertical-file-name" part="vertical-file-name">${file.name}</p>
       </div>
 
-      <slot @click=${(e) => cancelFileUpload(file, e)} name="cancelIcon">
+      <slot @click=${(e) => cancelFileUpload(file, e, nileFilePreview)} name="cancelIcon">
         <nile-icon
           name="close"
           size="14"
@@ -141,7 +157,7 @@ export function getVerticalUploadingState(file, uploadStatus) {
     </div>
   `;
 }
-export function getVerticalPreviewState(url, file, originalUrl) {
+export function getVerticalPreviewState(url, file, originalUrl, showFileType) {
     return html `
     <div class="vertical-div vertical-preview" part="vertical-preview-state">
       <div part="vertical-preview-image-container">
@@ -154,8 +170,14 @@ export function getVerticalPreviewState(url, file, originalUrl) {
       </div>
 
       <div class="content-container" part="vertical-preview-file-info">
-        <p part="vertical-preview-file-info-name">${file.name}</p>
-         <p part="vertical-preview-file-info-type">${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
+        <p part="vertical-preview-file-info-name">
+          <slot name="file-name">${file.name}</slot>
+        </p>
+        <p part="vertical-preview-file-info-type">
+          <slot name="file-type">${getFileType(file, showFileType)}</slot>
+          &#8226;
+          <slot name="file-size">${formatFileSize(Number(file.size))}</slot>
+        </p>
       </div>
 
       <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancelIcon">
@@ -169,7 +191,7 @@ export function getVerticalPreviewState(url, file, originalUrl) {
     </div>
   `;
 }
-export function getVerticalNoPreviewState(file, originalUrl) {
+export function getVerticalNoPreviewState(file, originalUrl, showFileType) {
     return html `
     <div class="vertical-div vertical-no-preview" part="vertical-no-preview-state">
       <div class="vertical-document-icon" part="vertical-no-preview-document-icon">
@@ -177,8 +199,14 @@ export function getVerticalNoPreviewState(file, originalUrl) {
       </div>
 
       <div class="content-container" part="vertical-no-preview-file-info">
-        <p part="vertical-no-preview-file-info-name">${file.name}</p>
-        <p part="vertical-no-preview-file-info-type">${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
+        <p part="vertical-no-preview-file-info-name">
+          <slot name="file-name">${file.name}</slot>
+        </p>
+        <p part="vertical-no-preview-file-info-type">
+          <slot name="file-type">${getFileType(file, showFileType)}</slot>
+          &#8226;
+          <slot name="file-size">${formatFileSize(Number(file.size))}</slot>
+        </p>
       </div>
 
       <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancelIcon">
@@ -201,11 +229,13 @@ export function getVerticalErrorState(file, errorMessage, originalUrl, nileFileP
       </div>
 
       <div class="file-info-vertical-state" part="vertical-error-file-info">
-        <p class="vertical-file-name" part="vertical-error-file-info-name">${file.name}</p>
+      <p class="vertical-file-name" part="vertical-error-file-info-name">
+        <slot name="file-name">${file.name}</slot>
+      </p>
         ${nileFilePreview.isStringTruncated
-        ? html `<nile-tooltip content=${errorMessage}>
+        ? html `<nile-lite-tooltip .content=${errorMessage}>
                 <span>${errorMessage}</span>
-              </nile-tooltip>`
+              </nile-lite-tooltip>`
         : html `<span>${errorMessage}</span>`}
       </div>
 

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

@@ -1 +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\" part=\"horizontal-progress-bar-container\">\n          <div class=\"progress-bar-percent\" part=\"horizontal-progress-bar-percent\">\n            <p part=\"horizontal-progress-bar-percent-text\">Uploading File...</p>\n            <p part=\"horizontal-progress-bar-percent-value\">${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\" part=\"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\" part=\"horizontal-preview-inner\">\n        <div class=\"preview-image-container\" part=\"horizontal-preview-image-container\">\n            <img\n              class=\"image-preview\"\n              src=${url}\n              alt=${file.name}\n              part=\"horizontal-preview-image\"\n            />\n        </div>\n        <div class=\"preview-file-info\" part=\"horizontal-preview-file-info\">\n          <p part=\"horizontal-preview-file-info-name\">${file.name}</p>\n          <p part=\"horizontal-preview-file-info-type\">${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>\n        </div>\n      </div>\n      <div class=\"preview-actions\" part=\"horizontal-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            part=\"horizontal-preview-actions-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\" part=\"horizontal-no-preview-container\">\n        <div class=\"document-icon\" part=\"horizontal-no-preview-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\" part=\"horizontal-no-preview-file-info\">\n          <p part=\"horizontal-no-preview-file-info-name\">${file.name}</p>\n          <p part=\"horizontal-no-preview-file-info-type\">${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            part=\"horizontal-no-preview-actions-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\" part=\"horizontal-error-container\">\n        <div class=\"error-icon\" part=\"horizontal-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\" part=\"horizontal-error-file-info\">\n          <p class=\"horizontal-file-name\" part=\"horizontal-error-file-info-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            part=\"horizontal-error-actions-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\" part=\"vertical-loading\">\n        <nile-loader width=\"24\" height=\"24\"></nile-loader>\n      </div>\n\n      <div class=\"progress-bar-container\" part=\"vertical-progress-bar-container\">\n        <div class=\"progress-bar-percent\" part=\"vertical-progress-bar-percent\">\n          <p part=\"vertical-progress-bar-percent-text\">Uploading...</p>\n          <p part=\"vertical-progress-bar-percent-value\">${uploadStatus}%</p>\n        </div>\n        <nile-progress-bar value=${uploadStatus}></nile-progress-bar>\n        <p class=\"vertical-file-name\" part=\"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          part=\"vertical-uploading-actions-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 part=\"vertical-preview-image-container\">\n        <img\n          class=\"image-preview\"\n          part=\"vertical-preview-image\"\n          src=${url}\n          alt=${file.name}\n        />\n      </div>\n\n      <div class=\"content-container\" part=\"vertical-preview-file-info\">\n        <p part=\"vertical-preview-file-info-name\">${file.name}</p>\n         <p part=\"vertical-preview-file-info-type\">${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          part=\"vertical-preview-actions-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\" part=\"vertical-no-preview-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\" part=\"vertical-no-preview-file-info\">\n        <p part=\"vertical-no-preview-file-info-name\">${file.name}</p>\n        <p part=\"vertical-no-preview-file-info-type\">${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          part=\"vertical-no-preview-actions-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\" part=\"vertical-error-document-icon\">\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\" part=\"vertical-error-file-info\">\n        <p class=\"vertical-file-name\" part=\"vertical-error-file-info-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          part=\"vertical-error-actions-icon\"\n        ></nile-icon>\n      </slot>\n    </div>\n  `;\n}\n"]}
+{"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  nileFilePreview: NileFilePreview\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\" part=\"horizontal-progress-bar-container\">\n          <div class=\"progress-bar-percent\" part=\"horizontal-progress-bar-percent\">\n            <p part=\"horizontal-progress-bar-percent-text\">Uploading File...</p>\n            <p part=\"horizontal-progress-bar-percent-value\">${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\" part=\"horizontal-file-name\">${file.name}</p>\n        </div>\n        <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e, nileFilePreview)} 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  showFileType: boolean\n): TemplateResult {\n  return html`\n    <div class=\"preview horizontal-div\" part=\"horizontal-preview-state\">\n      <div class=\"preview-inner\" part=\"horizontal-preview-inner\">\n        <div class=\"preview-image-container\" part=\"horizontal-preview-image-container\">\n            <img\n              class=\"image-preview\"\n              src=${url}\n              alt=${file.name}\n              part=\"horizontal-preview-image\"\n            />\n        </div>\n        <div class=\"preview-file-info\" part=\"horizontal-preview-file-info\">\n          <p part=\"horizontal-preview-file-info-name\">\n            <slot name=\"file-name\">${file.name}</slot>\n          </p>\n          <p part=\"horizontal-preview-file-info-type\">\n            <slot name=\"file-type\">${getFileType(file, showFileType)}</slot>\n            &#8226;\n            <slot name=\"file-size\">${formatFileSize(Number(file.size))}</slot>\n          </p>\n        </div>\n      </div>\n      <div class=\"preview-actions\" part=\"horizontal-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            part=\"horizontal-preview-actions-icon\"\n          ></nile-icon>\n        </slot>\n      </div>\n    </div>\n  `;\n}\n\nexport function getHorizontalNoPreviewState(\n  file: File,\n  originalUrl: string,\n  showFileType: boolean\n): TemplateResult {\n  return html`\n    <div class=\"no-preview horizontal-div\" part=\"horizontal-no-preview-state\">\n      <div class=\"no-preview-container\" part=\"horizontal-no-preview-container\">\n        <div class=\"document-icon\" part=\"horizontal-no-preview-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\" part=\"horizontal-no-preview-file-info\">\n          <p part=\"horizontal-no-preview-file-info-name\">\n            <slot name=\"file-name\">${file.name}</slot>\n          </p>\n          <p part=\"horizontal-no-preview-file-info-type\">\n            <slot name=\"file-type\">${getFileType(file, showFileType)}</slot>\n            &#8226;\n            <slot name=\"file-size\">${formatFileSize(Number(file.size))}</slot>\n          </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            part=\"horizontal-no-preview-actions-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\" part=\"horizontal-error-container\">\n        <div class=\"error-icon\" part=\"horizontal-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\" part=\"horizontal-error-file-info\">\n          <p class=\"horizontal-file-name\" part=\"horizontal-error-file-info-name\">\n            <slot name=\"file-name\">\n              ${file.name}\n            </slot>\n          </p>\n          ${\n            nileFilePreview.isStringTruncated\n              ? html`<nile-lite-tooltip .content=${errorMessage}>\n                  <span>${errorMessage}</span>\n                </nile-lite-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            part=\"horizontal-error-actions-icon\"\n          ></nile-icon>\n        </slot>\n    </div>\n  `;\n}\n\n// vertical states\nexport function getVerticalUploadingState(\n  file: File,\n  uploadStatus: number,\n  nileFilePreview: NileFilePreview\n): TemplateResult {\n  return html`\n    <div class=\"vertical-div vertical-uploading\" part=\"vertical-uploading-state\">\n      <div class=\"loading\" part=\"vertical-loading\">\n        <nile-loader width=\"24\" height=\"24\"></nile-loader>\n      </div>\n\n      <div class=\"progress-bar-container\" part=\"vertical-progress-bar-container\">\n        <div class=\"progress-bar-percent\" part=\"vertical-progress-bar-percent\">\n          <p part=\"vertical-progress-bar-percent-text\">Uploading...</p>\n          <p part=\"vertical-progress-bar-percent-value\">${uploadStatus}%</p>\n        </div>\n        <nile-progress-bar value=${uploadStatus}></nile-progress-bar>\n        <p class=\"vertical-file-name\" part=\"vertical-file-name\">${file.name}</p>\n      </div>\n\n      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e, nileFilePreview)} name=\"cancelIcon\">\n        <nile-icon\n          name=\"close\"\n          size=\"14\"\n          class=\"icon corner-icon\"\n          part=\"vertical-uploading-actions-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  showFileType: boolean\n): TemplateResult {\n  return html`\n    <div class=\"vertical-div vertical-preview\" part=\"vertical-preview-state\">\n      <div part=\"vertical-preview-image-container\">\n        <img\n          class=\"image-preview\"\n          part=\"vertical-preview-image\"\n          src=${url}\n          alt=${file.name}\n        />\n      </div>\n\n      <div class=\"content-container\" part=\"vertical-preview-file-info\">\n        <p part=\"vertical-preview-file-info-name\">\n          <slot name=\"file-name\">${file.name}</slot>\n        </p>\n        <p part=\"vertical-preview-file-info-type\">\n          <slot name=\"file-type\">${getFileType(file, showFileType)}</slot>\n          &#8226;\n          <slot name=\"file-size\">${formatFileSize(Number(file.size))}</slot>\n        </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          part=\"vertical-preview-actions-icon\"\n        ></nile-icon>\n      </slot>\n    </div>\n  `;\n}\n\nexport function getVerticalNoPreviewState(\n  file: File,\n  originalUrl: string,\n  showFileType: boolean\n): TemplateResult {\n  return html`\n    <div class=\"vertical-div vertical-no-preview\" part=\"vertical-no-preview-state\">\n      <div class=\"vertical-document-icon\" part=\"vertical-no-preview-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\" part=\"vertical-no-preview-file-info\">\n        <p part=\"vertical-no-preview-file-info-name\">\n          <slot name=\"file-name\">${file.name}</slot>\n        </p>\n        <p part=\"vertical-no-preview-file-info-type\">\n          <slot name=\"file-type\">${getFileType(file, showFileType)}</slot>\n          &#8226;\n          <slot name=\"file-size\">${formatFileSize(Number(file.size))}</slot>\n        </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          part=\"vertical-no-preview-actions-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\" part=\"vertical-error-document-icon\">\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\" part=\"vertical-error-file-info\">\n      <p class=\"vertical-file-name\" part=\"vertical-error-file-info-name\">\n        <slot name=\"file-name\">${file.name}</slot>\n      </p>\n        ${\n          nileFilePreview.isStringTruncated\n            ? html`<nile-lite-tooltip .content=${errorMessage}>\n                <span>${errorMessage}</span>\n              </nile-lite-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          part=\"vertical-error-actions-icon\"\n        ></nile-icon>\n      </slot>\n    </div>\n  `;\n}\n"]}

package/dist/src/nile-file-preview/nile-file-preview.test.d.ts

@@ -1,7 +1 @@
-/**
- * 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 './nile-file-preview';