@aquera/nile-elements 1.5.2 → 1.5.4

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

@@ -26,15 +26,15 @@ const baseHorizontalState = (
           <nile-icon name="upload" size="24"></nile-icon>
         </slot>
         <div part="content" class="content">
-          <div class="title">${title}</div>
-          <div class="subtitle">${subtitle}</div>
+          <div part="horizontal-title" class="title">${title}</div>
+          <div part="horizontal-subtitle" class="subtitle">${subtitle}</div>
         </div>
       </div>
       <input
         type="file"
         ?disabled=${disabled}
         @change=${(e: Event | DragEvent) => { dragHandler.handleFiles(e) }}
-        multiple
+        ?multiple=${nileFileUpload.allowMultiple}
         accept=${allowedTypes.join(',')}
       />
       <slot class="browse-file-button" @click=${disabled ? undefined : browseFiles} name="browse-file-button">
@@ -44,16 +44,20 @@ const baseHorizontalState = (
       </slot>
     </div>
     ${errorMessage || nileFileUpload.state === FileUploadState.ERROR ?
-      html`<div class="upload-error">
-        <nile-icon name="warning" size="12" color="var(--nile-colors-red-700)"></nile-icon>
-        ${
-          nileFileUpload.isStringTruncated
-            ? html`<nile-tooltip content=${errorMessage || FileUploadDefaults.CUSTOM_ERROR}>
-                <span>${errorMessage || FileUploadDefaults.CUSTOM_ERROR}</span>
-              </nile-tooltip>`
-            : html`<span>${errorMessage || FileUploadDefaults.CUSTOM_ERROR}</span>`
-        }
-      </div>` :
+      html`
+      <slot name="error-message">
+        <div class="upload-error" part="horizontal-upload-error">
+      <nile-icon name="warning" size="12" color="var(--nile-colors-red-700)"></nile-icon>
+      ${
+        nileFileUpload.isStringTruncated
+          ? html`<nile-lite-tooltip .content=${errorMessage || FileUploadDefaults.CUSTOM_ERROR}>
+              <span>${errorMessage || FileUploadDefaults.CUSTOM_ERROR}</span>
+            </nile-lite-tooltip>`
+          : html`<span>${errorMessage || FileUploadDefaults.CUSTOM_ERROR}</span>`
+      }
+    </div>
+      </slot>
+    `:
       html``
     }
   </div>
@@ -132,8 +136,8 @@ const baseVerticalState = (
         <nile-icon name="upload" size="24"></nile-icon>
       </slot>
       <div part="vertical-content-container" class="content-container">
-        <div class="title">${title}</div>
-        <div class="subtitle">${subtitle}</div>
+        <div part="vertical-title" class="title">${title}</div>
+        <div part="vertical-subtitle" class="subtitle">${subtitle}</div>
       </div>
       <input
         type="file"
@@ -149,13 +153,13 @@ const baseVerticalState = (
       </slot>
     </div>
     ${errorMessage || nileFileUpload.state === FileUploadState.ERROR ?
-      html`<div class="vertical-upload-error">
+      html`<div class="vertical-upload-error" part="vertical-upload-error">
         <nile-icon name="warning" size="12" color="var(--nile-colors-red-700)"></nile-icon>
         ${
           nileFileUpload.isStringTruncated
-            ? html`<nile-tooltip content=${errorMessage || FileUploadDefaults.CUSTOM_ERROR}>
+            ? html`<nile-lite-tooltip .content=${errorMessage || FileUploadDefaults.CUSTOM_ERROR}>
                 <span>${errorMessage || FileUploadDefaults.CUSTOM_ERROR}</span>
-              </nile-tooltip>`
+              </nile-lite-tooltip>`
             : html`<span>${errorMessage || FileUploadDefaults.CUSTOM_ERROR}</span>`
         }
       </div>` :

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

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

@@ -50,15 +50,17 @@ export class NileFileUpload extends NileElement {
   @property({ type: Array  }) uploadedFiles: File[] = [];
   @property({ type: String }) title: string = FileUploadDefaults.TITLE;
   @property({ type: String }) subtitle: string = FileUploadDefaults.SUBTITLE;
-  @property({ type: String }) state: FileUploadState = FileUploadState.DEFAULT; 
+  @property({ type: String }) state: FileUploadState = FileUploadState.DEFAULT;
   @property({ type: String }) variant: FileUploadVariant = FileUploadVariant.HORIZONTAL;
   @property({ type: String }) fileUploadUrl: string = "";
   @property({ type: Boolean}) autoUpload: boolean = true;
+  @state() public doNotUpload: File[] = [];
   @query('input') input!: HTMLInputElement;
+  @query('.horizontal-div') horizontalDiv!: HTMLDivElement;
   public uploadRequests = new Map<File, XMLHttpRequest>();
   public fileSizeExceededFilesNumber: number = 0;
   public isStringTruncated: boolean = false;
-  
+
   private dragHandler!: DragHandler;
 
   connectedCallback(): void {
@@ -95,7 +97,7 @@ export class NileFileUpload extends NileElement {
     }
   }
 
-  private browseFiles(): void {
+  public browseFiles(): void {
     this.emit(FileUploadEvent.NILE_BROWSE);
     this.errorMessage = "";
     this.input.click();
@@ -111,6 +113,12 @@ export class NileFileUpload extends NileElement {
     `;
   }
 
+  public clearAllUploadedFiles(): void {
+    this.uploadedFiles = [];
+    this.state = FileUploadState.DEFAULT;
+    this.errorMessage = "";
+  }
+
   private getState(): TemplateResult {
     return this.variant === FileUploadVariant.HORIZONTAL
       ? this.getHorizontalState()

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

@@ -18,13 +18,13 @@ export enum FileUploadError {
   DUPLICATES_NOT_ALLOWED = "Duplicate Files Are Not Allowed!",
   UPLOAD_URL_REQUIRED = "Upload URL is required!",
   SERVER_SIDE_ERROR = "Error from server! Please try again later.",
-  NETWORK_ERROR = "Network error! Please try again later."
+  NETWORK_ERROR = "Network error! Please try again later.",
+  UPLOAD_CANCELLED = "File upload cancelled."
 }
 
 export enum FileUploadEvent {
   NILE_INIT = "nile-init",
   NILE_BROWSE = "nile-browse",
-  NILE_DRAG = "nile-drag",
   NILE_CHANGE = "nile-change",
   NILE_UPLOADING = "nile-uploading",
   NILE_UPLOAD_PROGRESS = "nile-upload-progress",
@@ -34,7 +34,8 @@ export enum FileUploadEvent {
   NILE_CANCEL_UPLOAD = "nile-cancel-upload",
   NILE_NETWORK_ERROR = "nile-network-error",
   SERVER_SIDE_ERROR = "nile-server-error",
-  NILE_DESTROY = "nile-destroy"
+  NILE_DESTROY = "nile-destroy",
+  NILE_ERROR = "nile-error",
 }
 
 export enum FileUploadDefaults {
@@ -43,4 +44,19 @@ export enum FileUploadDefaults {
   ERROR_MESSAGE = 'Invalid File Format.',
   DRAG_STATE_DEFAULT = 'Drop files here to upload',
   CUSTOM_ERROR = 'Error Occured!'
-};
+};
+
+export enum FileUploadErrorReason {
+  INVALID_FORMAT = "Invalid Format",
+  SIZE_LIMIT_EXCEEDED = "Size Limit Exceeded",
+  SERVER_SIDE_ERROR = "Server Side Error",
+  NETWORK_ERROR = "Network Error",
+  UPLOAD_CANCELLED = "Upload Cancelled"
+}
+
+export enum ErrorType {
+  SERVER = "SERVER",
+  NETWORK = "NETWORK",
+  UPLOAD_CANCELLED = "UPLOAD_CANCELLED",
+  VALIDATION = "VALIDATION",
+}

package/src/nile-file-upload/utils/drag-drop.util.ts

@@ -3,6 +3,7 @@ import { FileUploadState } from "../types";
 
 export class DragHandler {
   private currentState: FileUploadState = FileUploadState.DEFAULT;
+  private isDisabledCallback?: () => boolean;
 
   private stateChangeCallback?: (state: FileUploadState) => void;
   private fileDropCallback?: (files: File[]) => void;
@@ -14,6 +15,10 @@ export class DragHandler {
     this.errorMessageCallback = callback;
   }
 
+  public setIsDisabled(callback: () => boolean): void {
+    this.isDisabledCallback = callback;
+  }
+
   public setValuesInDragHandler(state: FileUploadState): void {
     this.currentState = state;
   }
@@ -27,7 +32,7 @@ export class DragHandler {
   }
 
   private setState(state: FileUploadState): void {
-    if (this.currentState === FileUploadState.DISABLED) return;
+    if (this.currentState === FileUploadState.DISABLED || this.isDisabledCallback?.()) return;
 
     this.currentState = state;
     this.stateChangeCallback?.(state);
@@ -35,39 +40,43 @@ export class DragHandler {
 
   public dragEnter(e: DragEvent): void {
     preventDefaultAndStopPropagation(e);
+    if (this.currentState === FileUploadState.DISABLED || this.isDisabledCallback?.()) {
+      return;
+    }
 
-    if (this.currentState === FileUploadState.DISABLED) return;
-    this.errorMessageCallback?.("");
     this.setState(FileUploadState.DRAG);
   }
 
   public dragLeave(e: DragEvent): void {
     preventDefaultAndStopPropagation(e);
+    if (this.currentState === FileUploadState.DISABLED || this.isDisabledCallback?.()) {
+      return;
+    }
     
-    if (this.currentState === FileUploadState.DISABLED) return;
-
     this.setState(FileUploadState.DEFAULT);
   }
 
   public dragOver(e: DragEvent): void {
     preventDefaultAndStopPropagation(e);
-    
-    if (this.currentState === FileUploadState.DISABLED) return;
+    if (this.currentState === FileUploadState.DISABLED || this.isDisabledCallback?.()) {
+      return;
+    }
   }
 
   public drop(e: DragEvent): void {
     preventDefaultAndStopPropagation(e);
+    if (this.currentState === FileUploadState.DISABLED || this.isDisabledCallback?.()) {
+      return;
+    }
     
-    if (this.currentState === FileUploadState.DISABLED) return;
     this.setState(FileUploadState.DEFAULT);
     this.handleFiles(e);
   }
 
   public handleDocumentDrop(e: DragEvent): void {
+    preventDefaultAndStopPropagation(e);
     if (this.currentState === FileUploadState.DISABLED) return;
 
-    preventDefaultAndStopPropagation(e);
-    
     this.setState(FileUploadState.DEFAULT);
   }
 
@@ -81,7 +90,7 @@ export class DragHandler {
 
   public handleFiles(e: Event | DragEvent): void {
     preventDefaultAndStopPropagation(e);
-    if (this.currentState === FileUploadState.DISABLED) return;
+    if (this.currentState === FileUploadState.DISABLED || this.isDisabledCallback?.()) return;
 
     let files: FileList | null = null;