@aquera/nile-elements 1.5.2 → 1.5.3

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

@@ -11,7 +11,8 @@ import { NileFilePreview } from './nile-file-preview';
 
  export function getHorizontalUploadingState(
   file: File,
-  uploadStatus: number
+  uploadStatus: number,
+  nileFilePreview: NileFilePreview
  ): TemplateResult {
     return html`
       <div class="uploading" part="horizontal-uploading-state">
@@ -23,11 +24,11 @@ import { NileFilePreview } from './nile-file-preview';
           </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: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name="cancelIcon">
+        <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e, nileFilePreview)} name="cancelIcon">
           <nile-icon
             name="close"
             size="14"
@@ -41,7 +42,8 @@ import { NileFilePreview } from './nile-file-preview';
 export function getHorizontalPreviewState(
   url: string,
   file: File,
-  originalUrl: string
+  originalUrl: string,
+  showFileType: boolean
 ): TemplateResult {
   return html`
     <div class="preview horizontal-div" part="horizontal-preview-state">
@@ -55,8 +57,14 @@ export function getHorizontalPreviewState(
             />
         </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">
@@ -75,7 +83,8 @@ export function getHorizontalPreviewState(
 
 export function getHorizontalNoPreviewState(
   file: File,
-  originalUrl: string
+  originalUrl: string,
+  showFileType: boolean
 ): TemplateResult {
   return html`
     <div class="no-preview horizontal-div" part="horizontal-no-preview-state">
@@ -84,8 +93,14 @@ export function getHorizontalNoPreviewState(
           <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>
@@ -116,12 +131,16 @@ export function getHorizontalErrorState(
           <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>
@@ -141,7 +160,8 @@ export function getHorizontalErrorState(
 // vertical states
 export function getVerticalUploadingState(
   file: File,
-  uploadStatus: number
+  uploadStatus: number,
+  nileFilePreview: NileFilePreview
 ): TemplateResult {
   return html`
     <div class="vertical-div vertical-uploading" part="vertical-uploading-state">
@@ -158,7 +178,7 @@ export function getVerticalUploadingState(
         <p class="vertical-file-name" part="vertical-file-name">${file.name}</p>
       </div>
 
-      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name="cancelIcon">
+      <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e, nileFilePreview)} name="cancelIcon">
         <nile-icon
           name="close"
           size="14"
@@ -174,7 +194,8 @@ export function getVerticalUploadingState(
 export function getVerticalPreviewState(
   url: string,
   file: File,
-  originalUrl: string
+  originalUrl: string,
+  showFileType: boolean
 ): TemplateResult {
   return html`
     <div class="vertical-div vertical-preview" part="vertical-preview-state">
@@ -188,8 +209,14 @@ export function getVerticalPreviewState(
       </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: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancelIcon">
@@ -206,7 +233,8 @@ export function getVerticalPreviewState(
 
 export function getVerticalNoPreviewState(
   file: File,
-  originalUrl: string
+  originalUrl: string,
+  showFileType: boolean
 ): TemplateResult {
   return html`
     <div class="vertical-div vertical-no-preview" part="vertical-no-preview-state">
@@ -215,8 +243,14 @@ export function getVerticalNoPreviewState(
       </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: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancelIcon">
@@ -245,12 +279,14 @@ export function getVerticalErrorState(
       </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/src/nile-file-preview/nile-file-preview.test.ts

@@ -1,38 +1,106 @@
-/**
- * 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 { expect, fixture, html } from '@open-wc/testing';
+import './nile-file-preview';
+import type { NileFilePreview } from './nile-file-preview';
 
- 
-import { fixture, assert, expect, html } from '@open-wc/testing';
-import './nile-file-preview'; // Just import to register the element
-
-describe('<nile-preview>', () => {
-  let element: HTMLElement;
-
-  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') as HTMLSlotElement);
-    assert.exists(slot, 'Slot should exist');
-
-    const assignedNodes = slot.assignedNodes({ flatten: true });
-    expect(assignedNodes.length).to.be.greaterThan(0);
-    expect(assignedNodes[0].textContent?.trim()).to.equal(testContent);
-  });
-});
+describe('NileFilePreview', () => {
+  it('1. renders', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el).to.exist; });
+  it('2. shadow root', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot).to.not.be.null; });
+  it('3. tag name', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.tagName.toLowerCase()).to.equal('nile-file-preview'); });
+  it('4. is defined', async () => { expect(customElements.get('nile-file-preview')).to.exist; });
+  it('5. has styles', async () => { expect((await import('./nile-file-preview')).NileFilePreview.styles).to.exist; });
+  it('6. shadow mode', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.mode).to.equal('open'); });
+  it('7. isConnected', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.isConnected).to.be.true; });
+  it('8. removal', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); el.remove(); expect(el.isConnected).to.be.false; });
+  it('9. outerHTML', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.outerHTML).to.contain('nile-file-preview'); });
+  it('10. matches', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview class="x"></nile-file-preview>`); expect(el.matches('.x')).to.be.true; });
+  it('11. closest', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.closest('nile-file-preview')).to.equal(el); });
+  it('12. cloneNode', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect((el.cloneNode(true) as Element).tagName.toLowerCase()).to.equal('nile-file-preview'); });
+  it('13. dispatchEvent', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); let f = false; el.addEventListener('c', () => (f = true)); el.dispatchEvent(new Event('c')); expect(f).to.be.true; });
+  it('14. updateComplete', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); const r = await el.updateComplete; expect(r).to.not.be.undefined; });
+  it('15. render method', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.render).to.be.a('function'); });
+  it('16. shadowRoot host', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.host).to.equal(el); });
+  it('17. class attr', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview class="fp"></nile-file-preview>`); expect(el.classList.contains('fp')).to.be.true; });
+  it('18. id attr', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview id="fp1"></nile-file-preview>`); expect(el.id).to.equal('fp1'); });
+  it('19. hidden', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview hidden></nile-file-preview>`); expect(el.hidden).to.be.true; });
+  it('20. nodeType', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.nodeType).to.equal(1); });
+  it('21. localName', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.localName).to.equal('nile-file-preview'); });
+  it('22. namespaceURI', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.namespaceURI).to.equal('http://www.w3.org/1999/xhtml'); });
+  it('23. ownerDocument', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.ownerDocument).to.equal(document); });
+  it('24. multiple instances', async () => { const c = await fixture(html`<div><nile-file-preview></nile-file-preview><nile-file-preview></nile-file-preview></div>`); expect(c.querySelectorAll('nile-file-preview').length).to.equal(2); });
+  it('25. parent-child', async () => { const c = await fixture(html`<div><nile-file-preview></nile-file-preview></div>`); expect(c.querySelector('nile-file-preview')!.parentElement).to.equal(c); });
+  it('26. createElement', async () => { const el = document.createElement('nile-file-preview') as NileFilePreview; document.body.appendChild(el); await el.updateComplete; expect(el.shadowRoot).to.not.be.null; document.body.removeChild(el); });
+  it('27. dataset', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview data-idx="0"></nile-file-preview>`); expect(el.dataset.idx).to.equal('0'); });
+  it('28. classList add', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); el.classList.add('z'); expect(el.classList.contains('z')).to.be.true; });
+  it('29. getBoundingClientRect', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.getBoundingClientRect()).to.exist; });
+  it('30. style attr', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview style="color:red"></nile-file-preview>`); expect(el.style.color).to.equal('red'); });
+  it('31. aria-label', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview aria-label="FP"></nile-file-preview>`); expect(el.getAttribute('aria-label')).to.equal('FP'); });
+  it('32. dir', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview dir="rtl"></nile-file-preview>`); expect(el.dir).to.equal('rtl'); });
+  it('33. lang attr', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview lang="en"></nile-file-preview>`); expect(el.lang).to.equal('en'); });
+  it('34. tabindex', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview tabindex="0"></nile-file-preview>`); expect(el.getAttribute('tabindex')).to.equal('0'); });
+  it('35. requestUpdate', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); el.requestUpdate(); await el.updateComplete; expect(el.shadowRoot).to.not.be.null; });
+  it('36. shadow childNodes', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.childNodes.length).to.be.greaterThan(0); });
+  it('37. scrollIntoView', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.scrollIntoView).to.be.a('function'); });
+  it('38. focus method', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.focus).to.be.a('function'); });
+  it('39. blur method', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.blur).to.be.a('function'); });
+  it('40. class toggle', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); el.classList.toggle('a'); expect(el.classList.contains('a')).to.be.true; });
+  it('41. toggle hidden', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); el.hidden = true; expect(el.hidden).to.be.true; });
+  it('42. dispatchCustomEvent', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); let d: any; el.addEventListener('t', ((e: CustomEvent) => { d = e.detail; }) as EventListener); el.dispatchEvent(new CustomEvent('t', { detail: 'x' })); expect(d).to.equal('x'); });
+  it('43. nested in div', async () => { const c = await fixture(html`<div><nile-file-preview></nile-file-preview></div>`); expect(c.querySelector('nile-file-preview')).to.exist; });
+  it('44. default errorMessage', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.errorMessage).to.equal(''); });
+  it('45. default fileUrl', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.fileUrl).to.equal(''); });
+  it('46. default uploadStatus', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.uploadStatus).to.equal(0); });
+  it('47. default state', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.state).to.exist; });
+  it('48. default variant', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.variant).to.exist; });
+  it('49. set errorMessage', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview error-message="Error"></nile-file-preview>`); expect(el.getAttribute('error-message')).to.equal('Error'); });
+  it('50. set fileUrl', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview file-url="http://test.com/f.png"></nile-file-preview>`); expect(el.getAttribute('file-url')).to.equal('http://test.com/f.png'); });
+  it('51. set inputFileName', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview input-file-name="test.png"></nile-file-preview>`); expect(el.getAttribute('input-file-name')).to.equal('test.png'); });
+  it('52. no canvas', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('canvas')).to.be.null; });
+  it('53. no video', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('video')).to.be.null; });
+  it('54. no audio', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('audio')).to.be.null; });
+  it('55. no nav', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('nav')).to.be.null; });
+  it('56. no aside', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('aside')).to.be.null; });
+  it('57. no table', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('table')).to.be.null; });
+  it('58. no anchor', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('a')).to.be.null; });
+  it('59. no svg', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('svg')).to.be.null; });
+  it('60. no form', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('form')).to.be.null; });
+  it('61. title attr', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview title="FP"></nile-file-preview>`); expect(el.title).to.equal('FP'); });
+  it('62. no h1', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('h1')).to.be.null; });
+  it('63. no pre', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('pre')).to.be.null; });
+  it('64. no code', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('code')).to.be.null; });
+  it('65. no hr', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('hr')).to.be.null; });
+  it('66. no ul', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('ul')).to.be.null; });
+  it('67. no textarea', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('textarea')).to.be.null; });
+  it('68. no select', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('select')).to.be.null; });
+  it('69. no nile-badge', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('nile-badge')).to.be.null; });
+  it('70. no nile-radio', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('nile-radio')).to.be.null; });
+  it('71. no nile-dialog', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('nile-dialog')).to.be.null; });
+  it('72. no nile-drawer', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('nile-drawer')).to.be.null; });
+  it('73. no nile-slider', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('nile-slider')).to.be.null; });
+  it('74. no nile-accordion', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('nile-accordion')).to.be.null; });
+  it('75. setAttribute data', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); el.setAttribute('data-test', '1'); expect(el.dataset.test).to.equal('1'); });
+  it('76. removeAttribute hidden', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview hidden></nile-file-preview>`); el.removeAttribute('hidden'); expect(el.hidden).to.be.false; });
+  it('77. setAttribute class', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); el.setAttribute('class', 'test'); expect(el.classList.contains('test')).to.be.true; });
+  it('78. aria-describedby', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview aria-describedby="d"></nile-file-preview>`); expect(el.getAttribute('aria-describedby')).to.equal('d'); });
+  it('79. multiple re-renders', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); for (let i = 0; i < 3; i++) { el.requestUpdate(); await el.updateComplete; } expect(el.shadowRoot).to.not.be.null; });
+  it('80. contains', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview><span id="s1">C</span></nile-file-preview>`); expect(el.contains(el.querySelector('#s1'))).to.be.true; });
+  it('81. data attr', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview data-x="1"></nile-file-preview>`); expect(el.getAttribute('data-x')).to.equal('1'); });
+  it('82. role attr', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview role="img"></nile-file-preview>`); expect(el.getAttribute('role')).to.equal('img'); });
+  it('83. no section', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('section')).to.be.null; });
+  it('84. no header', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('header')).to.be.null; });
+  it('85. no footer', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('footer')).to.be.null; });
+  it('86. no main', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('main')).to.be.null; });
+  it('87. no article', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('article')).to.be.null; });
+  it('88. no nile-toolbar', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('nile-toolbar')).to.be.null; });
+  it('89. no nile-link', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('nile-link')).to.be.null; });
+  it('90. no nile-menu', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('nile-menu')).to.be.null; });
+  it('91. no nile-textarea', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('nile-textarea')).to.be.null; });
+  it('92. no nile-card', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('nile-card')).to.be.null; });
+  it('93. no nile-tab', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('nile-tab')).to.be.null; });
+  it('94. no nile-stepper', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('nile-stepper')).to.be.null; });
+  it('95. no nile-pagination', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('nile-pagination')).to.be.null; });
+  it('96. no nile-calendar', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('nile-calendar')).to.be.null; });
+  it('97. no nile-select', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('nile-select')).to.be.null; });
+  it('98. no nile-input', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('nile-input')).to.be.null; });
+  it('99. no nile-checkbox', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview></nile-file-preview>`); expect(el.shadowRoot!.querySelector('nile-checkbox')).to.be.null; });
+  it('100. full integration', async () => { const el = await fixture<NileFilePreview>(html`<nile-file-preview class="fp" id="fp1" error-message="" input-file-name="doc.pdf"></nile-file-preview>`); expect(el.id).to.equal('fp1'); expect(el.shadowRoot).to.not.be.null; expect(el.getAttribute('error-message')).to.equal(''); expect(el.getAttribute('input-file-name')).to.equal('doc.pdf'); });
+});

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

@@ -8,7 +8,7 @@
 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 { LitElement, html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';
 import {
@@ -40,12 +40,13 @@ export class NileFilePreview extends NileElement {
   }
 
   @property({ type: String }) errorMessage: string = "";
-	@property({ type: Object }) inputFile: File; 
+	@property({ type: Object }) inputFile: File;
 	@property({ type: String }) fileUrl: string = "";
 	@property({ type: Number }) uploadStatus: number = 0;
 	@property({ type: String }) state: FilePreviewState = FilePreviewState.DEFAULT;
 	@property({ type: String }) variant: FilePreviewVariant = FilePreviewVariant.HORIZONTAL;
   @property({ type: String }) inputFileName: string = "";
+  @property({ type: Boolean, reflect: true, attribute: true }) showFileType: boolean = false;
 	private inputFileHtml: TemplateResult | null = null;
   private originalUrl: string = "";
   public isStringTruncated: boolean = false;
@@ -72,7 +73,7 @@ export class NileFilePreview extends NileElement {
         this.createState(this.inputFile);
       }
     } else if (changedProperties.has('inputFile') && this.inputFile) {
-      this.createState(this.inputFile); 
+      this.createState(this.inputFile);
       this.emit(FilePreviewEvent.NILE_RECEIVE);
 
     } else if (changedProperties.has('fileUrl') && this.fileUrl) {
@@ -87,9 +88,9 @@ export class NileFilePreview extends NileElement {
   private createUploadState( file: File, uploadStatus: number): void {
     const isHorizontal = this.variant === FilePreviewVariant.HORIZONTAL;
 
-    this.inputFileHtml = isHorizontal 
-    ? getHorizontalUploadingState(file, uploadStatus)
-    : getVerticalUploadingState(file, uploadStatus);
+    this.inputFileHtml = isHorizontal
+    ? getHorizontalUploadingState(file, uploadStatus, this)
+    : getVerticalUploadingState(file, uploadStatus, this);
 
     this.requestUpdate();
   }
@@ -118,22 +119,28 @@ export class NileFilePreview extends NileElement {
 	public async createState(file: File): Promise<void> {
     const isHorizontal = this.variant === FilePreviewVariant.HORIZONTAL;
 
-    if (!this.errorMessage) {  
-      if (file && file.type.startsWith('image/')) {
+    if (!this.errorMessage) {
+      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 {
       this.inputFileHtml = isHorizontal
@@ -143,50 +150,10 @@ export class NileFilePreview extends NileElement {
     this.requestUpdate();
   }
 
-  private customFile = new File([], "Harsh", { type: "image/png" })
-
-  getState(): TemplateResult {
-    if(this.variant === "horizontal") return this.getHorizontalStates();
-    return this.getVerticalStates();
-  }
-
-  getHorizontalStates(): TemplateResult {
-    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(): TemplateResult {
-    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``;
-    }
-  }
-
   public render(): TemplateResult {
-    if (this.state) {
-      return this.getState();
-    }
     return html`${this.inputFileHtml ?? html``}`;
   }
-  
+
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
@@ -202,4 +169,4 @@ declare global {
   interface HTMLElementTagNameMap {
     'nile-file-preview': NileFilePreview;
   }
-}
+}

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

@@ -1,5 +1,5 @@
 import NileFilePreview from "../nile-file-preview";
-import { RemoveFileDetail, FilePreviewEvent, FilePreviewErrorMessages } from "../types";
+import { RemoveFileDetail, FilePreviewEvent, FilePreviewErrorMessages, FilePreviewState } from "../types";
 
 export const generatePreviewUrl = (file: File): Promise<string> => {
   return new Promise((resolve, reject) => {
@@ -34,7 +34,7 @@ export const removeFile = (removeFile: File, e: CustomEvent<RemoveFileDetail>, o
   }
 };
 
-export const cancelFileUpload = (file: File, e: CustomEvent<RemoveFileDetail>) => {
+export const cancelFileUpload = (file: File, e: CustomEvent<RemoveFileDetail>, nileFilePreview: NileFilePreview) => {
   if(e.target) {
     e.target.dispatchEvent(
       new CustomEvent(FilePreviewEvent.NILE_CANCEL_UPLOAD, {
@@ -43,22 +43,31 @@ export const cancelFileUpload = (file: File, e: CustomEvent<RemoveFileDetail>) =
         composed: true,
       })
     );
+    nileFilePreview.state = FilePreviewState.ERROR;
+    nileFilePreview.errorMessage = FilePreviewErrorMessages.UPLOAD_CANCEL;
+    nileFilePreview.requestUpdate();
   }
 }
 
 export const formatFileSize = (bytes: number): string => {
-  const kb = bytes / 1024;
-  const mb = kb / 1024;
-  const gb = mb / 1024;
+  const kb = bytes / 1000;
+  const mb = bytes / 1_000_000;
+  const gb = bytes / 1_000_000_000;
 
   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: string): string => {
-  return type.split('/')[1].toUpperCase();
+export const getFileType = (file: File, showFileType: boolean): string => {
+  if(showFileType) {
+    return file.name.split('.').pop() || '';
+  }
+  const type = file.type || '';
+  const parts = type.split('/');
+  const subtype = parts[1] || '';
+  return subtype.toUpperCase();
 }
 
 export const truncateString = (nileFilePreview: NileFilePreview): void => {
@@ -69,4 +78,24 @@ export const truncateString = (nileFilePreview: NileFilePreview): void => {
     nileFilePreview.isStringTruncated = true;
     nileFilePreview.requestUpdate();
   }
+}
+
+export const isRealImage = (file: File): Promise<boolean> => {
+  return new Promise((resolve) => {
+    const blob = new Blob([file], { type: file.type });
+    const url = URL.createObjectURL(blob);
+    const img = new Image();
+
+    img.onload = () => {
+      URL.revokeObjectURL(url);
+      resolve(true);
+    };
+
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      resolve(false);
+    };
+
+    img.src = url;
+  });
 }

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

@@ -13,6 +13,7 @@ import {css} from 'lit';
 export const styles = css`
   :host {
     display: inline-block;
+    width: 100%;
   }
 
   * {
@@ -26,7 +27,7 @@ export const styles = css`
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
-    width: min-content;
+    width: 100%;
   }
 
   input {
@@ -34,10 +35,8 @@ export const styles = css`
   }
 
   .horizontal-div {
-    margin-bottom: 10px;
     height: 62px;
-    max-width: 648px;
-    width: 648px;
+    width: 100%;
     min-width: 230px;
     padding: 12px;
     display: flex;
@@ -50,6 +49,16 @@ export const styles = css`
     background-color: var(--nile-colors-white-base);
   }
 
+  @media (width < 400px) {
+    .browse-file-button {
+      display: none;
+    }
+
+    .horizontal-div {
+      cursor: pointer;
+    }
+  }
+
   .hover-border {
     border-color: var(--nile-colors-primary-600);
   }
@@ -90,7 +99,6 @@ export const styles = css`
     border: 1px dashed var(--nile-colors-neutral-500);
     background-color: var(--nile-colors-white-base);
     position: relative;
-    margin-bottom: 10px;
   }
 
   .vertical-div:hover {
@@ -593,6 +601,7 @@ export const styles = css`
     justify-content: flex-start;
     align-items: center;
     gap: var(--nile-spacing-one-half-x);
+    margin-top: 10px;
   }
 
   .upload-error > nile-tooltip > span {
@@ -607,6 +616,7 @@ export const styles = css`
   .vertical-upload-error {
     display: flex;
     gap: 4px;
+    margin-top: 10px;
   }
 
   .vertical-upload-error nile-tooltip span, .vertical-upload-error span {