@aquera/nile-elements 0.1.67-beta-1.1 → 0.1.67-beta-1.2

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

@@ -8,12 +8,13 @@ import { __decorate } from "tslib";
 import { styles } from './nile-file-upload.css';
 import NileElement from '../internal/nile-element';
 import { DragHandler } from './utils/drag-drop.util';
+import { getDragHandler } from './nile-file-upload.template';
 import { FileUploadDefaults } from './types/file-upload.enums';
 import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { FileUploadState, FileUploadVariant, FileUploadEvent } from './types/file-upload.enums';
+import { FileUploadState, FileUploadVariant, FileUploadError, FileUploadEvent } from './types/file-upload.enums';
 import { setUpDragHandler, addGlobalListeners, addInternalListeners, uploadFiles } from './utils/file-validation.util';
-import { getHorizontalDefaultState, getHorizontalDragState, getVerticalDefaultState, getVerticalDisabledState, getVerticalDragState, getHorizontalErrorState, getVerticalErrorState, getHorizontalDisabledState } from './nile-file-upload.template';
+import { getHorizontalDefaultState, getHorizontalDisabledtState, getHorizontalDragState, getVerticalDefaultState, getVerticalDisabledState, getVerticalDragState, } from './nile-file-upload.template';
 /**
  * Nile file-upload component.
  *
@@ -23,12 +24,11 @@ import { getHorizontalDefaultState, getHorizontalDragState, getVerticalDefaultSt
 let NileFileUpload = class NileFileUpload extends NileElement {
     constructor() {
         super(...arguments);
-        this.size = "10MB";
+        this.size = 0;
         this.error = false;
         this.errorMessage = "";
-        this.allowMultiple = false;
+        this.allowMultiple = true;
         this.allowDuplicates = false;
-        this.allowedTypes = [];
         this.uploadedFiles = [];
         this.title = FileUploadDefaults.TITLE;
         this.subtitle = FileUploadDefaults.SUBTITLE;
@@ -37,8 +37,6 @@ let NileFileUpload = class NileFileUpload extends NileElement {
         this.fileUploadUrl = "";
         this.autoUpload = true;
         this.uploadRequests = new Map();
-        this.fileSizeExceededFilesNumber = 0;
-        this.isStringTruncated = false;
         this.setState = (newState) => {
             this.state = newState;
         };
@@ -57,6 +55,7 @@ let NileFileUpload = class NileFileUpload extends NileElement {
     firstUpdated(changedProps) {
         super.firstUpdated(changedProps);
         this.dragHandler = new DragHandler();
+        getDragHandler(this.dragHandler);
         setUpDragHandler(this, this.dragHandler);
         addInternalListeners(this, this.dragHandler, this.uploadRequests);
         addGlobalListeners(this.dragHandler);
@@ -64,19 +63,17 @@ let NileFileUpload = class NileFileUpload extends NileElement {
     updated(changedProps) {
         super.updated(changedProps);
         if (changedProps.has('uploadedFiles')) {
-            if (this.fileUploadUrl && this.autoUpload) {
-                uploadFiles(this);
+            if (this.uploadedFiles.length === 0)
+                this.errorMessage = "";
+            if (!this.fileUploadUrl) {
+                this.errorMessage = FileUploadError.UPLOAD_URL_REQUIRED;
+                return;
             }
+            uploadFiles(this);
             this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });
         }
         else if (changedProps.has('state')) {
-            this.dragHandler.setValuesInDragHandler(this.state);
-        }
-        if (changedProps.has('autoUpload') && this.autoUpload) {
-            if (this.fileUploadUrl && this.autoUpload) {
-                uploadFiles(this);
-            }
-            this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });
+            this.dragHandler.setValuesInDragHandler(this.state, this.size, this.uploadedFiles);
         }
     }
     browseFiles() {
@@ -97,29 +94,25 @@ let NileFileUpload = class NileFileUpload extends NileElement {
     getHorizontalState() {
         switch (this.state) {
             case FileUploadState.DEFAULT:
-                return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);
+                return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
             case FileUploadState.DISABLED:
-                return getHorizontalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);
+                return getHorizontalDisabledtState(this.browseFiles, this.title, this.subtitle);
             case FileUploadState.DRAG:
                 return getHorizontalDragState();
-            case FileUploadState.ERROR:
-                return getHorizontalErrorState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);
             default:
-                return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);
+                return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
         }
     }
     getVerticalState() {
         switch (this.state) {
             case FileUploadState.DEFAULT:
-                return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);
+                return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
             case FileUploadState.DISABLED:
-                return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);
+                return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle);
             case FileUploadState.DRAG:
                 return getVerticalDragState();
-            case FileUploadState.ERROR:
-                return getVerticalErrorState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);
             default:
-                return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);
+                return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
         }
     }
     disconnectedCallback() {
@@ -127,7 +120,7 @@ let NileFileUpload = class NileFileUpload extends NileElement {
     }
 };
 __decorate([
-    property({ type: String })
+    property({ type: Number })
 ], NileFileUpload.prototype, "size", void 0);
 __decorate([
     property({ type: Boolean })
@@ -141,9 +134,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], NileFileUpload.prototype, "allowDuplicates", void 0);
-__decorate([
-    property({ type: Array })
-], NileFileUpload.prototype, "allowedTypes", void 0);
 __decorate([
     property({ type: Array })
 ], NileFileUpload.prototype, "uploadedFiles", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"nile-file-upload.js","sourceRoot":"","sources":["../../../src/nile-file-upload/nile-file-upload.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-upload.css';\nimport { ChangedPropsInterface } from './types/file-upload.type'\nimport NileElement from '../internal/nile-element';\nimport { DragHandler } from './utils/drag-drop.util';\nimport { FileUploadDefaults } from './types/file-upload.enums';\nimport { LitElement, html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { FileUploadState, FileUploadVariant, FileUploadError, FileUploadEvent } from './types/file-upload.enums';\nimport { setUpDragHandler, addGlobalListeners, addInternalListeners, uploadFiles, cancelFileUpload } from './utils/file-validation.util';\nimport {\n  getHorizontalDefaultState,\n  getHorizontalDragState,\n  getVerticalDefaultState,\n  getVerticalDisabledState,\n  getVerticalDragState,\n  getHorizontalErrorState,\n  getVerticalErrorState,\n  getHorizontalDisabledState\n} from './nile-file-upload.template';\n\n/**\n * Nile file-upload component.\n *\n * @tag nile-file-upload\n *\n */\n@customElement('nile-file-upload')\nexport class NileFileUpload extends NileElement {\n  /**\n   * The styles for nile-file-upload\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 }) size: string = \"10MB\";\n  @property({ type: Boolean}) error: boolean = false;\n  @property({ type: String }) errorMessage: string = \"\";\n  @property({ type: Boolean}) allowMultiple: boolean = false;\n  @property({ type: Boolean}) allowDuplicates: boolean = false;\n  @property({ type: Array  }) allowedTypes: string[] = [];\n  @property({ type: Array  }) uploadedFiles: File[] = [];\n  @property({ type: String }) title: string = FileUploadDefaults.TITLE;\n  @property({ type: String }) subtitle: string = FileUploadDefaults.SUBTITLE;\n  @property({ type: String }) state: FileUploadState = FileUploadState.DEFAULT; \n  @property({ type: String }) variant: FileUploadVariant = FileUploadVariant.HORIZONTAL;\n  @property({ type: String }) fileUploadUrl: string = \"\";\n  @property({ type: Boolean}) autoUpload: boolean = true;\n  @query('input') input!: HTMLInputElement;\n  public uploadRequests = new Map<File, XMLHttpRequest>();\n  public fileSizeExceededFilesNumber: number = 0;\n  public isStringTruncated: boolean = false;\n  \n  private dragHandler!: DragHandler;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.emit(FileUploadEvent.NILE_INIT);\n  }\n\n  firstUpdated(changedProps: ChangedPropsInterface): void {\n    super.firstUpdated(changedProps);\n\n    this.dragHandler = new DragHandler();\n    setUpDragHandler(this, this.dragHandler);\n    addInternalListeners(this, this.dragHandler, this.uploadRequests);\n    addGlobalListeners(this.dragHandler);\n  }\n\n  updated(changedProps: ChangedPropsInterface): void {\n    super.updated(changedProps);\n\n    if (changedProps.has('uploadedFiles')) {\n      if(this.fileUploadUrl && this.autoUpload) {\n        uploadFiles(this);\n      }\n      this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });\n    } else if (changedProps.has('state')) {\n      this.dragHandler.setValuesInDragHandler(this.state);\n    }\n\n    if(changedProps.has('autoUpload') && this.autoUpload) {\n      if(this.fileUploadUrl && this.autoUpload) {\n        uploadFiles(this);\n      }\n      this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });\n    }\n  }\n\n  private browseFiles(): void {\n    this.emit(FileUploadEvent.NILE_BROWSE);\n    this.errorMessage = \"\";\n    this.input.click();\n  }\n\n  public setState = (newState: FileUploadState): void => {\n    this.state = newState;\n  }\n\n  render(): TemplateResult {\n    return html`\n      ${this.getState()}\n    `;\n  }\n\n  private getState(): TemplateResult {\n    return this.variant === FileUploadVariant.HORIZONTAL\n      ? this.getHorizontalState()\n      : this.getVerticalState();\n  }\n\n  private getHorizontalState(): TemplateResult {\n    switch(this.state) {\n      case FileUploadState.DEFAULT:\n        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);\n\n      case FileUploadState.DISABLED:\n        return getHorizontalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);\n\n      case FileUploadState.DRAG:\n        return getHorizontalDragState();\n\n      case FileUploadState.ERROR:\n        return getHorizontalErrorState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);\n\n      default:\n        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);\n    }\n  }\n\n  private getVerticalState(): TemplateResult {\n    switch(this.state) {\n      case FileUploadState.DEFAULT:\n        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);\n\n      case FileUploadState.DISABLED:\n        return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);\n\n      case FileUploadState.DRAG:\n        return getVerticalDragState();\n\n      case FileUploadState.ERROR:\n        return getVerticalErrorState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);\n\n      default:\n        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.emit(FileUploadEvent.NILE_DESTROY);\n  }\n}\n"]}
+{"version":3,"file":"nile-file-upload.js","sourceRoot":"","sources":["../../../src/nile-file-upload/nile-file-upload.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-upload.css';\nimport { ChangedPropsInterface } from './types/file-upload.type'\nimport NileElement from '../internal/nile-element';\nimport { DragHandler } from './utils/drag-drop.util';\nimport { getDragHandler } from './nile-file-upload.template'\nimport { FileUploadDefaults } from './types/file-upload.enums';\nimport { LitElement, html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { FileUploadState, FileUploadVariant, FileUploadError, FileUploadEvent } from './types/file-upload.enums';\nimport { setUpDragHandler, addGlobalListeners, addInternalListeners, uploadFiles, cancelFileUpload } from './utils/file-validation.util';\nimport {\n  getHorizontalDefaultState,\n  getHorizontalDisabledtState,\n  getHorizontalDragState,\n  getVerticalDefaultState,\n  getVerticalDisabledState,\n  getVerticalDragState,\n} from './nile-file-upload.template';\n\n/**\n * Nile file-upload component.\n *\n * @tag nile-file-upload\n *\n */\n@customElement('nile-file-upload')\nexport class NileFileUpload extends NileElement {\n  /**\n   * The styles for nile-file-upload\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: Number }) size: number = 0;\n  @property({ type: Boolean}) error: boolean = false;\n  @property({ type: String }) errorMessage: string = \"\";\n  @property({ type: Boolean}) allowMultiple: boolean = true;\n  @property({ type: Boolean}) allowDuplicates: boolean = false;\n  @property({ type: Array  }) uploadedFiles: File[] = [];\n  @property({ type: String }) title: string = FileUploadDefaults.TITLE;\n  @property({ type: String }) subtitle: string = FileUploadDefaults.SUBTITLE;\n  @property({ type: String }) state: FileUploadState = FileUploadState.DEFAULT; \n  @property({ type: String }) variant: FileUploadVariant = FileUploadVariant.HORIZONTAL;\n  @property({ type: String }) fileUploadUrl: string = \"\";\n  @property({ type: Boolean}) autoUpload: boolean = true;\n  @query('input') input!: HTMLInputElement;\n  public uploadRequests = new Map<File, XMLHttpRequest>();\n  \n  private dragHandler!: DragHandler;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.emit(FileUploadEvent.NILE_INIT);\n  }\n\n  firstUpdated(changedProps: ChangedPropsInterface): void {\n    super.firstUpdated(changedProps);\n\n    this.dragHandler = new DragHandler();\n    getDragHandler(this.dragHandler);\n    setUpDragHandler(this, this.dragHandler);\n    addInternalListeners(this, this.dragHandler, this.uploadRequests);\n    addGlobalListeners(this.dragHandler);\n  }\n\n  updated(changedProps: ChangedPropsInterface): void {\n    super.updated(changedProps);\n\n    if (changedProps.has('uploadedFiles')) {\n      if(this.uploadedFiles.length === 0) this.errorMessage = \"\";\n      if(!this.fileUploadUrl) {\n        this.errorMessage = FileUploadError.UPLOAD_URL_REQUIRED;\n        return;\n      }\n      uploadFiles(this);\n      this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });\n\n    } else if (changedProps.has('state')) {\n      this.dragHandler.setValuesInDragHandler(this.state, this.size, this.uploadedFiles);\n    }\n  }\n\n  private browseFiles(): void {\n    this.emit(FileUploadEvent.NILE_BROWSE);\n    this.errorMessage = \"\";\n    this.input.click();\n  }\n\n  public setState = (newState: FileUploadState): void => {\n    this.state = newState;\n  }\n\n  render(): TemplateResult {\n    return html`\n      ${this.getState()}\n    `;\n  }\n\n  private getState(): TemplateResult {\n    return this.variant === FileUploadVariant.HORIZONTAL\n      ? this.getHorizontalState()\n      : this.getVerticalState();\n  }\n\n  private getHorizontalState(): TemplateResult {\n    switch(this.state) {\n      case FileUploadState.DEFAULT:\n        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);\n\n      case FileUploadState.DISABLED:\n        return getHorizontalDisabledtState(this.browseFiles, this.title, this.subtitle);\n\n      case FileUploadState.DRAG:\n        return getHorizontalDragState();\n\n      default:\n        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);\n    }\n  }\n\n  private getVerticalState(): TemplateResult {\n    switch(this.state) {\n      case FileUploadState.DEFAULT:\n        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);\n\n      case FileUploadState.DISABLED:\n        return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle);\n\n      case FileUploadState.DRAG:\n        return getVerticalDragState();\n\n      default:\n        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.emit(FileUploadEvent.NILE_DESTROY);\n  }\n}\n"]}

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

@@ -2,12 +2,10 @@ import { TemplateResult } from 'lit';
 import './nile-file-upload.css';
 import { DragHandler } from './utils/drag-drop.util';
 import { FileUploadState } from './types/file-upload.enums';
-import { NileFileUpload } from './nile-file-upload';
-export declare const getHorizontalDefaultState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, state: FileUploadState, errorMessage: string, allowedTypes: string[], nileFileUpload: NileFileUpload) => TemplateResult;
-export declare const getHorizontalDisabledState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, state: FileUploadState, errorMessage: string, allowedTypes: string[], nileFileUpload: NileFileUpload) => TemplateResult;
-export declare const getHorizontalErrorState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, state: FileUploadState, errorMessage: string, allowedTypes: string[], nileFileUpload: NileFileUpload) => TemplateResult;
+export declare const getDragHandler: (dragHandler: DragHandler) => void;
+export declare const getHorizontalDefaultState: (browseFiles: Function, title: string, subtitle: string, errorMessage: string, state: FileUploadState) => TemplateResult;
+export declare const getHorizontalDisabledtState: (browseFiles: Function, title: string, subtitle: string) => TemplateResult;
 export declare const getHorizontalDragState: () => TemplateResult;
-export declare const getVerticalDefaultState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, errorMessage: string, allowedTypes: string[], nileFileUpload: NileFileUpload) => TemplateResult;
-export declare const getVerticalDisabledState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, errorMessage: string, allowedTypes: string[], nileFileUpload: NileFileUpload) => TemplateResult;
-export declare const getVerticalErrorState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, errorMessage: string, allowedTypes: string[], nileFileUpload: NileFileUpload) => TemplateResult;
+export declare const getVerticalDefaultState: (browseFiles: Function, title: string, subtitle: string, errorMessage: string, state: FileUploadState) => TemplateResult;
+export declare const getVerticalDisabledState: (browseFiles: Function, title: string, subtitle: string) => TemplateResult;
 export declare const getVerticalDragState: () => TemplateResult;

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

@@ -1,53 +1,76 @@
 import { html } from 'lit';
 import './nile-file-upload.css';
 import { classMap } from 'lit-html/directives/class-map.js';
-import { FileUploadDefaults, FileUploadState } from './types/file-upload.enums';
-import { truncateString } from './utils/file-validation.util';
-const baseHorizontalState = (browseFiles, title, subtitle, disabled, dragHandler, state, errorMessage, allowedTypes, nileFileUpload) => {
-    truncateString(nileFileUpload);
-    return html `
-  <div class="wrapper" part="horizontal-wrapper">
-    <div part="horizontal-div" class=${classMap({ 'hover-border': state === "hover", 'horizontal-div': true, 'disable': disabled })}>
-      <div part="inner-div" class="inner-div">
-        <slot class="upload-icon-slot" name="upload-icon">
+let dragHandlerInstance;
+export const getDragHandler = (dragHandler) => {
+    dragHandlerInstance = dragHandler;
+};
+export const getHorizontalDefaultState = (browseFiles, title, subtitle, errorMessage, state) => html `
+  <div>
+    <div class=${classMap({ 'hover-border': state === "hover", 'horizontal-div': true })}>
+      <div class="inner-div">
+        <slot name="uploadIcon">
           <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 class="content">
+          <slot name="title">
+            <h4>${title}</h4>
+          </slot>
+          <slot name="subtitle">
+            <p>${subtitle}</p>
+          </slot>
         </div>
       </div>
       <input
         type="file"
-        ?disabled=${disabled}
-        @change=${(e) => { dragHandler.handleFiles(e); }}
+        @change=${(e) => dragHandlerInstance.handleFiles(e)}
         multiple
-        accept=${allowedTypes.join(',')}
       />
-      <slot class="browse-file-button" @click=${disabled ? undefined : browseFiles} name="browse-file-button">
-        <nile-button variant="tertiary" ?disabled=${disabled}>
+      <slot @click=${browseFiles} name="browseFileButton">
+        <nile-button variant="tertiary">
           Browse File
         </nile-button>
       </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>`}
+    ${errorMessage ?
+    html `<div class="upload-error">
+        <nile-icon name="warning" size="12" color="red"></nile-icon>
+        <span>${errorMessage}</span>
       </div>` :
-        html ``}
+    html ``}
   </div>
-  `;
-};
-export const getHorizontalDefaultState = (browseFiles, title, subtitle, dragHandler, state, errorMessage, allowedTypes, nileFileUpload) => baseHorizontalState(browseFiles, title, subtitle, false, dragHandler, state, errorMessage, allowedTypes, nileFileUpload);
-export const getHorizontalDisabledState = (browseFiles, title, subtitle, dragHandler, state, errorMessage, allowedTypes, nileFileUpload) => baseHorizontalState(browseFiles, title, subtitle, true, dragHandler, state, errorMessage, allowedTypes, nileFileUpload);
-export const getHorizontalErrorState = (browseFiles, title, subtitle, dragHandler, state, errorMessage, allowedTypes, nileFileUpload) => baseHorizontalState(browseFiles, title, subtitle, false, dragHandler, state, errorMessage, allowedTypes, nileFileUpload);
+`;
+export const getHorizontalDisabledtState = (browseFiles, title, subtitle) => html `
+  <div
+    class="horizontal-div disable"
+  >
+     <div class="inner-div">
+      <slot name="uploadIcon">
+        <nile-icon name="upload" size="24"></nile-icon>
+      </slot>
+      <div class="content">
+        <slot name="title">
+          <h4>${title}</h4>
+        </slot>
+        <slot name="subtitle">
+          <p>${subtitle}</p>
+        </slot>
+      </div>
+    </div>
+    <input
+      type="file"
+      @change=${(e) => dragHandlerInstance.handleFiles(e)}
+      multiple
+    />
+    <slot @click=${browseFiles} name="browseFileButton">
+      <nile-button variant="tertiary">
+        Browse File
+      </nile-button>
+    </slot>
+  </div>
+`;
 export const getHorizontalDragState = () => html `
-  <div part="horizontal-drag-state" class="horizontal-div dragging">
+  <div class="horizontal-div dragging">
     <div class="icons-container">
       <nile-icon
         color="var(--nile-colors-blue-500)"
@@ -62,53 +85,72 @@ export const getHorizontalDragState = () => html `
         class="image-icon"
       ></nile-icon>
     </div>
-    <p>${FileUploadDefaults.DRAG_STATE_DEFAULT}</p>
+    <p>Drop files here to upload</p>
   </div>
 `;
 //  Vertical States
-const baseVerticalState = (browseFiles, title, subtitle, disabled, dragHandler, errorMessage, allowedTypes, nileFileUpload) => {
-    truncateString(nileFileUpload);
-    return html `
-  <div part="vertical-wrapper" class="wrapper">
-    <div part="vertical-default" class="vertical-default vertical-div ${disabled ? 'disable' : ''}">
-      <slot name="upload-icon">
+export const getVerticalDefaultState = (browseFiles, title, subtitle, errorMessage, state) => html `
+  <div>
+    <div class=${classMap({ 'hover-border': state === "hover", 'vertical-div': true })}>
+      <slot name="uploadIcon">
         <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 class="content-container">
+        <slot name="title">
+          <h4>${title}</h4>
+        </slot>
+        <slot name="subtitle">
+          <p>${subtitle}</p>
+        </slot>
       </div>
       <input
         type="file"
-        ?disabled=${disabled}
-        @change=${(e) => dragHandler.handleFiles(e)}
+        @change=${(e) => dragHandlerInstance.handleFiles(e)}
         multiple
-        accept=${allowedTypes.join(',')}
       />
-      <slot @click=${disabled ? undefined : browseFiles} name="browse-file-button">
-        <nile-button variant="tertiary" ?disabled=${disabled}>
+      <slot @click=${browseFiles} name="browseFileButton">
+        <nile-button variant="tertiary">
           Browse File
         </nile-button>
       </slot>
     </div>
-    ${errorMessage || nileFileUpload.state === FileUploadState.ERROR ?
-        html `<div class="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}>
-                <span>${errorMessage || FileUploadDefaults.CUSTOM_ERROR}</span>
-              </nile-tooltip>`
-            : html `<span>${errorMessage || FileUploadDefaults.CUSTOM_ERROR}</span>`}
+    ${errorMessage ?
+    html `<div class="upload-error">
+        <nile-icon name="warning" size="12" color="red"></nile-icon>
+        <span>${errorMessage}</span>
       </div>` :
-        html ``}
+    html ``}
   </div>
-  `;
-};
-export const getVerticalDefaultState = (browseFiles, title, subtitle, dragHandler, errorMessage, allowedTypes, nileFileUpload) => baseVerticalState(browseFiles, title, subtitle, false, dragHandler, errorMessage, allowedTypes, nileFileUpload);
-export const getVerticalDisabledState = (browseFiles, title, subtitle, dragHandler, errorMessage, allowedTypes, nileFileUpload) => baseVerticalState(browseFiles, title, subtitle, true, dragHandler, errorMessage, allowedTypes, nileFileUpload);
-export const getVerticalErrorState = (browseFiles, title, subtitle, dragHandler, errorMessage, allowedTypes, nileFileUpload) => baseVerticalState(browseFiles, title, subtitle, false, dragHandler, errorMessage, allowedTypes, nileFileUpload);
+`;
+export const getVerticalDisabledState = (browseFiles, title, subtitle) => html `
+  <div
+    class="vertical-deafult vertical-div disable"
+  >
+    <slot name="uploadIcon">
+      <nile-icon name="upload" size="24"></nile-icon>
+    </slot>
+    <div class="content-container">
+      <slot name="title">
+        <h4>${title}</h4>
+      </slot>
+      <slot name="title">
+        <p>${subtitle}</p>
+      </slot>
+    </div>
+    <input
+      type="file"
+      @change=${(e) => dragHandlerInstance.handleFiles(e)}
+      multiple
+    />
+    <slot @click=${browseFiles} name="browseFileButton">
+      <nile-button variant="tertiary">
+        Browse File
+      </nile-button>
+    </slot>
+  </div>
+`;
 export const getVerticalDragState = () => html `
-  <div part="vertical-drag-state" class="vertical-div vertical-drag">
+  <div class="vertical-div vertical-drag">
     <div class="icons-container">
       <nile-icon
         color="var(--nile-colors-blue-500)"
@@ -123,7 +165,7 @@ export const getVerticalDragState = () => html `
         class="image-icon"
       ></nile-icon>
     </div>
-    <p>${FileUploadDefaults.DRAG_STATE_DEFAULT}</p>
+    <p>Drop files here to upload</p>
   </div>
 `;
 //# sourceMappingURL=nile-file-upload.template.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-file-upload.template.js","sourceRoot":"","sources":["../../../src/nile-file-upload/nile-file-upload.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAG9D,MAAM,mBAAmB,GAAG,CAC1B,WAAqB,EACrB,KAAa,EACb,QAAgB,EAChB,QAAiB,EACjB,WAAwB,EACxB,KAAsB,EACtB,YAAoB,EACpB,YAAsB,EACtB,cAA8B,EACd,EAAE;IAClB,cAAc,CAAC,cAAc,CAAC,CAAC;IAC/B,OAAO,IAAI,CAAA;;uCAE0B,QAAQ,CAAC,EAAE,cAAc,EAAE,KAAK,KAAK,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC;;;;;;+BAMpG,KAAK;kCACF,QAAQ;;;;;oBAKtB,QAAQ;kBACV,CAAC,CAAoB,EAAE,EAAE,GAAG,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,CAAA,CAAC,CAAC;;iBAEzD,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC;;gDAES,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW;oDAC9B,QAAQ;;;;;MAKtD,YAAY,IAAI,cAAc,CAAC,KAAK,KAAK,eAAe,CAAC,KAAK,CAAC,CAAC;QAChE,IAAI,CAAA;;UAGA,cAAc,CAAC,iBAAiB;YAC9B,CAAC,CAAC,IAAI,CAAA,yBAAyB,YAAY,IAAI,kBAAkB,CAAC,YAAY;wBAClE,YAAY,IAAI,kBAAkB,CAAC,YAAY;8BACzC;YAClB,CAAC,CAAC,IAAI,CAAA,SAAS,YAAY,IAAI,kBAAkB,CAAC,YAAY,SAClE;aACK,CAAC,CAAC;QACT,IAAI,CAAA,EACN;;GAED,CAAC;AACJ,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,yBAAyB,GAAG,CACvC,WAAqB,EACrB,KAAa,EACb,QAAgB,EAChB,WAAwB,EACxB,KAAsB,EACtB,YAAoB,EACpB,YAAsB,EACtB,cAA8B,EACd,EAAE,CAAC,mBAAmB,CAAC,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,CAAC,CAAC;AAE9I,MAAM,CAAC,MAAM,0BAA0B,GAAG,CACxC,WAAqB,EACrB,KAAa,EACb,QAAgB,EAChB,WAAwB,EACxB,KAAsB,EACtB,YAAoB,EACpB,YAAsB,EACtB,cAA8B,EACd,EAAE,CAAC,mBAAmB,CAAC,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,CAAC,CAAC;AAE7I,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,WAAqB,EACrB,KAAa,EACb,QAAgB,EAChB,WAAwB,EACxB,KAAsB,EACtB,YAAoB,EACpB,YAAsB,EACtB,cAA8B,EACd,EAAE,CAAC,mBAAmB,CAAC,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,CAAC,CAAC;AAE9I,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAmB,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;SAgBvD,kBAAkB,CAAC,kBAAkB;;CAE7C,CAAC;AAEF,mBAAmB;AACnB,MAAM,iBAAiB,GAAG,CACxB,WAAqB,EACrB,KAAa,EACb,QAAgB,EAChB,QAAiB,EACjB,WAAwB,EACxB,YAAoB,EACpB,YAAsB,EACtB,cAA8B,EACd,EAAE;IAClB,cAAc,CAAC,cAAc,CAAC,CAAC;IAC/B,OAAO,IAAI,CAAA;;wEAE2D,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;;;;;6BAKpE,KAAK;gCACF,QAAQ;;;;oBAIpB,QAAQ;kBACV,CAAC,CAAoB,EAAE,EAAE,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC;;iBAErD,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC;;qBAElB,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW;oDACH,QAAQ;;;;;MAKtD,YAAY,IAAI,cAAc,CAAC,KAAK,KAAK,eAAe,CAAC,KAAK,CAAC,CAAC;QAChE,IAAI,CAAA;;UAGA,cAAc,CAAC,iBAAiB;YAC9B,CAAC,CAAC,IAAI,CAAA,yBAAyB,YAAY,IAAI,kBAAkB,CAAC,YAAY;wBAClE,YAAY,IAAI,kBAAkB,CAAC,YAAY;8BACzC;YAClB,CAAC,CAAC,IAAI,CAAA,SAAS,YAAY,IAAI,kBAAkB,CAAC,YAAY,SAClE;aACK,CAAC,CAAC;QACT,IAAI,CAAA,EACN;;GAED,CAAC;AACJ,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,WAAqB,EACrB,KAAa,EACb,QAAgB,EAChB,WAAwB,EACxB,YAAoB,EACpB,YAAsB,EACtB,cAA8B,EACd,EAAE,CAAC,iBAAiB,CAAC,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,CAAC,CAAC;AAErI,MAAM,CAAC,MAAM,wBAAwB,GAAG,CACtC,WAAqB,EACrB,KAAa,EACb,QAAgB,EAChB,WAAwB,EACxB,YAAoB,EACpB,YAAsB,EACtB,cAA8B,EACd,EAAE,CAAC,iBAAiB,CAAC,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,CAAC,CAAC;AAEpI,MAAM,CAAC,MAAM,qBAAqB,GAAG,CACnC,WAAqB,EACrB,KAAa,EACb,QAAgB,EAChB,WAAwB,EACxB,YAAoB,EACpB,YAAsB,EACtB,cAA8B,EACd,EAAE,CAAC,iBAAiB,CAAC,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,CAAC,CAAC;AAGrI,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAmB,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;SAgBrD,kBAAkB,CAAC,kBAAkB;;CAE7C,CAAC","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport './nile-file-upload.css';\nimport { DragHandler } from './utils/drag-drop.util';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { FileUploadDefaults, FileUploadState } from './types/file-upload.enums';\nimport { truncateString } from './utils/file-validation.util';\nimport { NileFileUpload } from './nile-file-upload';\n\nconst baseHorizontalState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  disabled: boolean,\n  dragHandler: DragHandler,\n  state: FileUploadState,\n  errorMessage: string,\n  allowedTypes: string[],\n  nileFileUpload: NileFileUpload\n): TemplateResult => {\n  truncateString(nileFileUpload);\n  return html`\n  <div class=\"wrapper\" part=\"horizontal-wrapper\">\n    <div part=\"horizontal-div\" class=${classMap({ 'hover-border': state === \"hover\", 'horizontal-div': true, 'disable': disabled })}>\n      <div part=\"inner-div\" class=\"inner-div\">\n        <slot class=\"upload-icon-slot\" name=\"upload-icon\">\n          <nile-icon name=\"upload\" size=\"24\"></nile-icon>\n        </slot>\n        <div part=\"content\" class=\"content\">\n          <div class=\"title\">${title}</div>\n          <div class=\"subtitle\">${subtitle}</div>\n        </div>\n      </div>\n      <input\n        type=\"file\"\n        ?disabled=${disabled}\n        @change=${(e: Event | DragEvent) => { dragHandler.handleFiles(e) }}\n        multiple\n        accept=${allowedTypes.join(',')}\n      />\n      <slot class=\"browse-file-button\" @click=${disabled ? undefined : browseFiles} name=\"browse-file-button\">\n        <nile-button variant=\"tertiary\" ?disabled=${disabled}>\n          Browse File\n        </nile-button>\n      </slot>\n    </div>\n    ${errorMessage || nileFileUpload.state === FileUploadState.ERROR ?\n      html`<div class=\"upload-error\">\n        <nile-icon name=\"warning\" size=\"12\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n        ${\n          nileFileUpload.isStringTruncated\n            ? html`<nile-tooltip content=${errorMessage || FileUploadDefaults.CUSTOM_ERROR}>\n                <span>${errorMessage || FileUploadDefaults.CUSTOM_ERROR}</span>\n              </nile-tooltip>`\n            : html`<span>${errorMessage || FileUploadDefaults.CUSTOM_ERROR}</span>`\n        }\n      </div>` :\n      html``\n    }\n  </div>\n  `;\n}\n\nexport const getHorizontalDefaultState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  dragHandler: DragHandler,\n  state: FileUploadState,\n  errorMessage: string,\n  allowedTypes: string[],\n  nileFileUpload: NileFileUpload\n): TemplateResult => baseHorizontalState(browseFiles, title, subtitle, false, dragHandler, state, errorMessage, allowedTypes, nileFileUpload);\n\nexport const getHorizontalDisabledState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  dragHandler: DragHandler,\n  state: FileUploadState,\n  errorMessage: string,\n  allowedTypes: string[],\n  nileFileUpload: NileFileUpload\n): TemplateResult => baseHorizontalState(browseFiles, title, subtitle, true, dragHandler, state, errorMessage, allowedTypes, nileFileUpload);\n\nexport const getHorizontalErrorState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  dragHandler: DragHandler,\n  state: FileUploadState,\n  errorMessage: string,\n  allowedTypes: string[],\n  nileFileUpload: NileFileUpload\n): TemplateResult => baseHorizontalState(browseFiles, title, subtitle, false, dragHandler, state, errorMessage, allowedTypes, nileFileUpload);\n\nexport const getHorizontalDragState = (): TemplateResult => html`\n  <div part=\"horizontal-drag-state\" class=\"horizontal-div dragging\">\n    <div class=\"icons-container\">\n      <nile-icon\n        color=\"var(--nile-colors-blue-500)\"\n        name=\"general\"\n        size=\"20\"\n        class=\"general-icon\"\n      ></nile-icon>\n      <nile-icon\n        color=\"var(--nile-colors-blue-500)\"\n        name=\"image\"\n        size=\"24\"\n        class=\"image-icon\"\n      ></nile-icon>\n    </div>\n    <p>${FileUploadDefaults.DRAG_STATE_DEFAULT}</p>\n  </div>\n`;\n\n//  Vertical States\nconst baseVerticalState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  disabled: boolean,\n  dragHandler: DragHandler,\n  errorMessage: string,\n  allowedTypes: string[],\n  nileFileUpload: NileFileUpload\n): TemplateResult => {\n  truncateString(nileFileUpload);\n  return html`\n  <div part=\"vertical-wrapper\" class=\"wrapper\">\n    <div part=\"vertical-default\" class=\"vertical-default vertical-div ${disabled ? 'disable' : ''}\">\n      <slot name=\"upload-icon\">\n        <nile-icon name=\"upload\" size=\"24\"></nile-icon>\n      </slot>\n      <div part=\"vertical-content-container\" class=\"content-container\">\n        <div class=\"title\">${title}</div>\n        <div class=\"subtitle\">${subtitle}</div>\n      </div>\n      <input\n        type=\"file\"\n        ?disabled=${disabled}\n        @change=${(e: Event | DragEvent) => dragHandler.handleFiles(e)}\n        multiple\n        accept=${allowedTypes.join(',')}\n      />\n      <slot @click=${disabled ? undefined : browseFiles} name=\"browse-file-button\">\n        <nile-button variant=\"tertiary\" ?disabled=${disabled}>\n          Browse File\n        </nile-button>\n      </slot>\n    </div>\n    ${errorMessage || nileFileUpload.state === FileUploadState.ERROR ?\n      html`<div class=\"vertical-upload-error\">\n        <nile-icon name=\"warning\" size=\"12\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n        ${\n          nileFileUpload.isStringTruncated\n            ? html`<nile-tooltip content=${errorMessage || FileUploadDefaults.CUSTOM_ERROR}>\n                <span>${errorMessage || FileUploadDefaults.CUSTOM_ERROR}</span>\n              </nile-tooltip>`\n            : html`<span>${errorMessage || FileUploadDefaults.CUSTOM_ERROR}</span>`\n        }\n      </div>` :\n      html``\n    }\n  </div>\n  `;\n}\n\nexport const getVerticalDefaultState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  dragHandler: DragHandler,\n  errorMessage: string,\n  allowedTypes: string[],\n  nileFileUpload: NileFileUpload\n): TemplateResult => baseVerticalState(browseFiles, title, subtitle, false, dragHandler, errorMessage, allowedTypes, nileFileUpload);\n\nexport const getVerticalDisabledState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  dragHandler: DragHandler,\n  errorMessage: string,\n  allowedTypes: string[],\n  nileFileUpload: NileFileUpload\n): TemplateResult => baseVerticalState(browseFiles, title, subtitle, true, dragHandler, errorMessage, allowedTypes, nileFileUpload);\n\nexport const getVerticalErrorState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  dragHandler: DragHandler,\n  errorMessage: string,\n  allowedTypes: string[],\n  nileFileUpload: NileFileUpload\n): TemplateResult => baseVerticalState(browseFiles, title, subtitle, false, dragHandler, errorMessage, allowedTypes, nileFileUpload);\n\n\nexport const getVerticalDragState = (): TemplateResult => html`\n  <div part=\"vertical-drag-state\" class=\"vertical-div vertical-drag\">\n    <div class=\"icons-container\">\n      <nile-icon\n        color=\"var(--nile-colors-blue-500)\"\n        name=\"general\"\n        size=\"20\"\n        class=\"general-icon\"\n      ></nile-icon>\n      <nile-icon\n        color=\"var(--nile-colors-blue-500)\"\n        name=\"image\"\n        size=\"24\"\n        class=\"image-icon\"\n      ></nile-icon>\n    </div>\n    <p>${FileUploadDefaults.DRAG_STATE_DEFAULT}</p>\n  </div>\n`;"]}
+{"version":3,"file":"nile-file-upload.template.js","sourceRoot":"","sources":["../../../src/nile-file-upload/nile-file-upload.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAG5D,IAAI,mBAAgC,CAAC;AACrC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,WAAwB,EAAQ,EAAE;IAC/D,mBAAmB,GAAG,WAAW,CAAC;AACpC,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,yBAAyB,GAAG,CACvC,WAAqB,EACrB,KAAa,EACb,QAAgB,EAChB,YAAoB,EACpB,KAAsB,EACN,EAAE,CAAC,IAAI,CAAA;;iBAER,QAAQ,CAAC,EAAE,cAAc,EAAE,KAAK,KAAK,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC;;;;;;;kBAOtE,KAAK;;;iBAGN,QAAQ;;;;;;kBAMP,CAAC,CAAoB,EAAE,EAAE,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC;;;qBAGzD,WAAW;;;;;;MAM1B,YAAY,CAAC,CAAC;IACd,IAAI,CAAA;;gBAEM,YAAY;aACf,CAAC,CAAC;IACT,IAAI,CAAA,EACN;;CAEH,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,CACzC,WAAqB,EACrB,KAAa,EACb,QAAgB,EACA,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;gBAUT,KAAK;;;eAGN,QAAQ;;;;;;gBAMP,CAAC,CAAoB,EAAE,EAAE,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC;;;mBAGzD,WAAW;;;;;;CAM7B,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAmB,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;CAkB/D,CAAC;AAEF,mBAAmB;AACnB,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,WAAqB,EACrB,KAAa,EACb,QAAgB,EAChB,YAAoB,EACpB,KAAsB,EACN,EAAE,CAAC,IAAI,CAAA;;iBAER,QAAQ,CAAC,EAAE,cAAc,EAAE,KAAK,KAAK,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;;;;;;gBAMtE,KAAK;;;eAGN,QAAQ;;;;;kBAKL,CAAC,CAAoB,EAAE,EAAE,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC;;;qBAGzD,WAAW;;;;;;MAM1B,YAAY,CAAC,CAAC;IACd,IAAI,CAAA;;gBAEM,YAAY;aACf,CAAC,CAAC;IACT,IAAI,CAAA,EACN;;CAEH,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CACtC,WAAqB,EACrB,KAAa,EACb,QAAgB,EACA,EAAE,CAAC,IAAI,CAAA;;;;;;;;;cASX,KAAK;;;aAGN,QAAQ;;;;;gBAKL,CAAC,CAAoB,EAAE,EAAE,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC;;;mBAGzD,WAAW;;;;;;CAM7B,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAmB,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;CAkB7D,CAAC","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport './nile-file-upload.css';\nimport { DragHandler } from './utils/drag-drop.util';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { FileUploadState } from './types/file-upload.enums';\n\nlet dragHandlerInstance: DragHandler;\nexport const getDragHandler = (dragHandler: DragHandler): void => {\n  dragHandlerInstance = dragHandler;\n}\n\nexport const getHorizontalDefaultState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  errorMessage: string,\n  state: FileUploadState\n): TemplateResult => html`\n  <div>\n    <div class=${classMap({ 'hover-border': state === \"hover\", 'horizontal-div': true })}>\n      <div class=\"inner-div\">\n        <slot name=\"uploadIcon\">\n          <nile-icon name=\"upload\" size=\"24\"></nile-icon>\n        </slot>\n        <div class=\"content\">\n          <slot name=\"title\">\n            <h4>${title}</h4>\n          </slot>\n          <slot name=\"subtitle\">\n            <p>${subtitle}</p>\n          </slot>\n        </div>\n      </div>\n      <input\n        type=\"file\"\n        @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}\n        multiple\n      />\n      <slot @click=${browseFiles} name=\"browseFileButton\">\n        <nile-button variant=\"tertiary\">\n          Browse File\n        </nile-button>\n      </slot>\n    </div>\n    ${errorMessage ?\n      html`<div class=\"upload-error\">\n        <nile-icon name=\"warning\" size=\"12\" color=\"red\"></nile-icon>\n        <span>${errorMessage}</span>\n      </div>` :\n      html``\n    }\n  </div>\n`;\n\nexport const getHorizontalDisabledtState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string\n): TemplateResult => html`\n  <div\n    class=\"horizontal-div disable\"\n  >\n     <div class=\"inner-div\">\n      <slot name=\"uploadIcon\">\n        <nile-icon name=\"upload\" size=\"24\"></nile-icon>\n      </slot>\n      <div class=\"content\">\n        <slot name=\"title\">\n          <h4>${title}</h4>\n        </slot>\n        <slot name=\"subtitle\">\n          <p>${subtitle}</p>\n        </slot>\n      </div>\n    </div>\n    <input\n      type=\"file\"\n      @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}\n      multiple\n    />\n    <slot @click=${browseFiles} name=\"browseFileButton\">\n      <nile-button variant=\"tertiary\">\n        Browse File\n      </nile-button>\n    </slot>\n  </div>\n`;\n\nexport const getHorizontalDragState = (): TemplateResult => html`\n  <div class=\"horizontal-div dragging\">\n    <div class=\"icons-container\">\n      <nile-icon\n        color=\"var(--nile-colors-blue-500)\"\n        name=\"general\"\n        size=\"20\"\n        class=\"general-icon\"\n      ></nile-icon>\n      <nile-icon\n        color=\"var(--nile-colors-blue-500)\"\n        name=\"image\"\n        size=\"24\"\n        class=\"image-icon\"\n      ></nile-icon>\n    </div>\n    <p>Drop files here to upload</p>\n  </div>\n`;\n\n//  Vertical States\nexport const getVerticalDefaultState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  errorMessage: string,\n  state: FileUploadState\n): TemplateResult => html`\n  <div>\n    <div class=${classMap({ 'hover-border': state === \"hover\", 'vertical-div': true })}>\n      <slot name=\"uploadIcon\">\n        <nile-icon name=\"upload\" size=\"24\"></nile-icon>\n      </slot>\n      <div class=\"content-container\">\n        <slot name=\"title\">\n          <h4>${title}</h4>\n        </slot>\n        <slot name=\"subtitle\">\n          <p>${subtitle}</p>\n        </slot>\n      </div>\n      <input\n        type=\"file\"\n        @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}\n        multiple\n      />\n      <slot @click=${browseFiles} name=\"browseFileButton\">\n        <nile-button variant=\"tertiary\">\n          Browse File\n        </nile-button>\n      </slot>\n    </div>\n    ${errorMessage ?\n      html`<div class=\"upload-error\">\n        <nile-icon name=\"warning\" size=\"12\" color=\"red\"></nile-icon>\n        <span>${errorMessage}</span>\n      </div>` :\n      html``\n    }\n  </div>\n`;\n\nexport const getVerticalDisabledState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string\n): TemplateResult => html`\n  <div\n    class=\"vertical-deafult vertical-div disable\"\n  >\n    <slot name=\"uploadIcon\">\n      <nile-icon name=\"upload\" size=\"24\"></nile-icon>\n    </slot>\n    <div class=\"content-container\">\n      <slot name=\"title\">\n        <h4>${title}</h4>\n      </slot>\n      <slot name=\"title\">\n        <p>${subtitle}</p>\n      </slot>\n    </div>\n    <input\n      type=\"file\"\n      @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}\n      multiple\n    />\n    <slot @click=${browseFiles} name=\"browseFileButton\">\n      <nile-button variant=\"tertiary\">\n        Browse File\n      </nile-button>\n    </slot>\n  </div>\n`;\n\nexport const getVerticalDragState = (): TemplateResult => html`\n  <div class=\"vertical-div vertical-drag\">\n    <div class=\"icons-container\">\n      <nile-icon\n        color=\"var(--nile-colors-blue-500)\"\n        name=\"general\"\n        size=\"20\"\n        class=\"general-icon\"\n      ></nile-icon>\n      <nile-icon\n        color=\"var(--nile-colors-blue-500)\"\n        name=\"image\"\n        size=\"24\"\n        class=\"image-icon\"\n      ></nile-icon>\n    </div>\n    <p>Drop files here to upload</p>\n  </div>\n`;"]}

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

@@ -2,8 +2,7 @@ export declare enum FileUploadState {
     DEFAULT = "default",
     DISABLED = "disabled",
     HOVER = "hover",
-    DRAG = "drag",
-    ERROR = "error"
+    DRAG = "drag"
 }
 export declare enum FileUploadVariant {
     HORIZONTAL = "horizontal",
@@ -11,23 +10,19 @@ export declare enum FileUploadVariant {
 }
 export declare enum FileUploadError {
     INVALID_FORMAT = "Invalid file format! Upload valid file.",
-    SIZE_LIMIT_EXCEEDED = "File exceeds size limit! Upload smaller file.",
+    SIZE_EXCEEDED = "File exceeds size limit! Upload smaller file.",
     MULTIPLE_NOT_ALLOWED = "Please Upload Single File!",
     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."
+    UPLOAD_URL_REQUIRED = "Upload URL is required!"
 }
 export declare 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",
     NILE_UPLOAD_SUCCESS = "nile-upload-success",
     NILE_UPLOAD_CANCELLED = "nile-upload-cancelled",
-    NILE_SIZE_EXCEED_FILES = "nile-size-exceed-files",
     NILE_CANCEL_UPLOAD = "nile-cancel-upload",
     NILE_NETWORK_ERROR = "nile-network-error",
     SERVER_SIDE_ERROR = "nile-server-error",
@@ -36,7 +31,5 @@ export declare enum FileUploadEvent {
 export declare enum FileUploadDefaults {
     TITLE = "Drag and drop to upload",
     SUBTITLE = "PNG, JPG or SVG (upto 1MB) | 1:1 ratio",
-    ERROR_MESSAGE = "Invalid File Format.",
-    DRAG_STATE_DEFAULT = "Drop files here to upload",
-    CUSTOM_ERROR = "Error Occured!"
+    ERROR_MESSAGE = "Invalid File Format."
 }

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

@@ -4,7 +4,6 @@ export var FileUploadState;
     FileUploadState["DISABLED"] = "disabled";
     FileUploadState["HOVER"] = "hover";
     FileUploadState["DRAG"] = "drag";
-    FileUploadState["ERROR"] = "error";
 })(FileUploadState || (FileUploadState = {}));
 export var FileUploadVariant;
 (function (FileUploadVariant) {
@@ -14,12 +13,10 @@ export var FileUploadVariant;
 export var FileUploadError;
 (function (FileUploadError) {
     FileUploadError["INVALID_FORMAT"] = "Invalid file format! Upload valid file.";
-    FileUploadError["SIZE_LIMIT_EXCEEDED"] = "File exceeds size limit! Upload smaller file.";
+    FileUploadError["SIZE_EXCEEDED"] = "File exceeds size limit! Upload smaller file.";
     FileUploadError["MULTIPLE_NOT_ALLOWED"] = "Please Upload Single File!";
     FileUploadError["DUPLICATES_NOT_ALLOWED"] = "Duplicate Files Are Not Allowed!";
     FileUploadError["UPLOAD_URL_REQUIRED"] = "Upload URL is required!";
-    FileUploadError["SERVER_SIDE_ERROR"] = "Error from server! Please try again later.";
-    FileUploadError["NETWORK_ERROR"] = "Network error! Please try again later.";
 })(FileUploadError || (FileUploadError = {}));
 export var FileUploadEvent;
 (function (FileUploadEvent) {
@@ -27,11 +24,9 @@ export var FileUploadEvent;
     FileUploadEvent["NILE_BROWSE"] = "nile-browse";
     FileUploadEvent["NILE_DRAG"] = "nile-drag";
     FileUploadEvent["NILE_CHANGE"] = "nile-change";
-    FileUploadEvent["NILE_UPLOADING"] = "nile-uploading";
     FileUploadEvent["NILE_UPLOAD_PROGRESS"] = "nile-upload-progress";
     FileUploadEvent["NILE_UPLOAD_SUCCESS"] = "nile-upload-success";
     FileUploadEvent["NILE_UPLOAD_CANCELLED"] = "nile-upload-cancelled";
-    FileUploadEvent["NILE_SIZE_EXCEED_FILES"] = "nile-size-exceed-files";
     FileUploadEvent["NILE_CANCEL_UPLOAD"] = "nile-cancel-upload";
     FileUploadEvent["NILE_NETWORK_ERROR"] = "nile-network-error";
     FileUploadEvent["SERVER_SIDE_ERROR"] = "nile-server-error";
@@ -42,8 +37,6 @@ export var FileUploadDefaults;
     FileUploadDefaults["TITLE"] = "Drag and drop to upload";
     FileUploadDefaults["SUBTITLE"] = "PNG, JPG or SVG (upto 1MB) | 1:1 ratio";
     FileUploadDefaults["ERROR_MESSAGE"] = "Invalid File Format.";
-    FileUploadDefaults["DRAG_STATE_DEFAULT"] = "Drop files here to upload";
-    FileUploadDefaults["CUSTOM_ERROR"] = "Error Occured!";
 })(FileUploadDefaults || (FileUploadDefaults = {}));
 ;
 //# sourceMappingURL=file-upload.enums.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"file-upload.enums.js","sourceRoot":"","sources":["../../../../src/nile-file-upload/types/file-upload.enums.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,eAMX;AAND,WAAY,eAAe;IACzB,sCAAmB,CAAA;IACnB,wCAAqB,CAAA;IACrB,kCAAe,CAAA;IACf,gCAAa,CAAA;IACb,kCAAe,CAAA;AACjB,CAAC,EANW,eAAe,KAAf,eAAe,QAM1B;AAED,MAAM,CAAN,IAAY,iBAGX;AAHD,WAAY,iBAAiB;IAC3B,8CAAyB,CAAA;IACzB,0CAAqB,CAAA;AACvB,CAAC,EAHW,iBAAiB,KAAjB,iBAAiB,QAG5B;AAED,MAAM,CAAN,IAAY,eAQX;AARD,WAAY,eAAe;IACzB,6EAA0D,CAAA;IAC1D,wFAAqE,CAAA;IACrE,sEAAmD,CAAA;IACnD,8EAA2D,CAAA;IAC3D,kEAA+C,CAAA;IAC/C,mFAAgE,CAAA;IAChE,2EAAwD,CAAA;AAC1D,CAAC,EARW,eAAe,KAAf,eAAe,QAQ1B;AAED,MAAM,CAAN,IAAY,eAcX;AAdD,WAAY,eAAe;IACzB,0CAAuB,CAAA;IACvB,8CAA2B,CAAA;IAC3B,0CAAuB,CAAA;IACvB,8CAA2B,CAAA;IAC3B,oDAAiC,CAAA;IACjC,gEAA6C,CAAA;IAC7C,8DAA2C,CAAA;IAC3C,kEAA+C,CAAA;IAC/C,oEAAiD,CAAA;IACjD,4DAAyC,CAAA;IACzC,4DAAyC,CAAA;IACzC,0DAAuC,CAAA;IACvC,gDAA6B,CAAA;AAC/B,CAAC,EAdW,eAAe,KAAf,eAAe,QAc1B;AAED,MAAM,CAAN,IAAY,kBAMX;AAND,WAAY,kBAAkB;IAC5B,uDAAiC,CAAA;IACjC,yEAAmD,CAAA;IACnD,4DAAsC,CAAA;IACtC,sEAAgD,CAAA;IAChD,qDAA+B,CAAA;AACjC,CAAC,EANW,kBAAkB,KAAlB,kBAAkB,QAM7B;AAAA,CAAC","sourcesContent":["export enum FileUploadState {\n  DEFAULT = 'default',\n  DISABLED = 'disabled',\n  HOVER = 'hover',\n  DRAG = 'drag',\n  ERROR = 'error'\n}\n\nexport enum FileUploadVariant {\n  HORIZONTAL = 'horizontal',\n  VERTICAL = 'vertical'\n}\n\nexport enum FileUploadError {\n  INVALID_FORMAT = \"Invalid file format! Upload valid file.\",\n  SIZE_LIMIT_EXCEEDED = \"File exceeds size limit! Upload smaller file.\",\n  MULTIPLE_NOT_ALLOWED = \"Please Upload Single File!\",\n  DUPLICATES_NOT_ALLOWED = \"Duplicate Files Are Not Allowed!\",\n  UPLOAD_URL_REQUIRED = \"Upload URL is required!\",\n  SERVER_SIDE_ERROR = \"Error from server! Please try again later.\",\n  NETWORK_ERROR = \"Network error! Please try again later.\"\n}\n\nexport enum FileUploadEvent {\n  NILE_INIT = \"nile-init\",\n  NILE_BROWSE = \"nile-browse\",\n  NILE_DRAG = \"nile-drag\",\n  NILE_CHANGE = \"nile-change\",\n  NILE_UPLOADING = \"nile-uploading\",\n  NILE_UPLOAD_PROGRESS = \"nile-upload-progress\",\n  NILE_UPLOAD_SUCCESS = \"nile-upload-success\",\n  NILE_UPLOAD_CANCELLED = \"nile-upload-cancelled\",\n  NILE_SIZE_EXCEED_FILES = \"nile-size-exceed-files\",\n  NILE_CANCEL_UPLOAD = \"nile-cancel-upload\",\n  NILE_NETWORK_ERROR = \"nile-network-error\",\n  SERVER_SIDE_ERROR = \"nile-server-error\",\n  NILE_DESTROY = \"nile-destroy\"\n}\n\nexport enum FileUploadDefaults {\n  TITLE = 'Drag and drop to upload',\n  SUBTITLE = 'PNG, JPG or SVG (upto 1MB) | 1:1 ratio',\n  ERROR_MESSAGE = 'Invalid File Format.',\n  DRAG_STATE_DEFAULT = 'Drop files here to upload',\n  CUSTOM_ERROR = 'Error Occured!'\n};"]}
+{"version":3,"file":"file-upload.enums.js","sourceRoot":"","sources":["../../../../src/nile-file-upload/types/file-upload.enums.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,eAKX;AALD,WAAY,eAAe;IACzB,sCAAmB,CAAA;IACnB,wCAAqB,CAAA;IACrB,kCAAe,CAAA;IACf,gCAAa,CAAA;AACf,CAAC,EALW,eAAe,KAAf,eAAe,QAK1B;AAED,MAAM,CAAN,IAAY,iBAGX;AAHD,WAAY,iBAAiB;IAC3B,8CAAyB,CAAA;IACzB,0CAAqB,CAAA;AACvB,CAAC,EAHW,iBAAiB,KAAjB,iBAAiB,QAG5B;AAED,MAAM,CAAN,IAAY,eAMX;AAND,WAAY,eAAe;IACzB,6EAA0D,CAAA;IAC1D,kFAA+D,CAAA;IAC/D,sEAAmD,CAAA;IACnD,8EAA2D,CAAA;IAC3D,kEAA+C,CAAA;AACjD,CAAC,EANW,eAAe,KAAf,eAAe,QAM1B;AAED,MAAM,CAAN,IAAY,eAYX;AAZD,WAAY,eAAe;IACzB,0CAAuB,CAAA;IACvB,8CAA2B,CAAA;IAC3B,0CAAuB,CAAA;IACvB,8CAA2B,CAAA;IAC3B,gEAA6C,CAAA;IAC7C,8DAA2C,CAAA;IAC3C,kEAA+C,CAAA;IAC/C,4DAAyC,CAAA;IACzC,4DAAyC,CAAA;IACzC,0DAAuC,CAAA;IACvC,gDAA6B,CAAA;AAC/B,CAAC,EAZW,eAAe,KAAf,eAAe,QAY1B;AAED,MAAM,CAAN,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC5B,uDAAiC,CAAA;IACjC,yEAAmD,CAAA;IACnD,4DAAsC,CAAA;AACxC,CAAC,EAJW,kBAAkB,KAAlB,kBAAkB,QAI7B;AAAA,CAAC","sourcesContent":["export enum FileUploadState {\n  DEFAULT = 'default',\n  DISABLED = 'disabled',\n  HOVER = 'hover',\n  DRAG = 'drag'\n}\n\nexport enum FileUploadVariant {\n  HORIZONTAL = 'horizontal',\n  VERTICAL = 'vertical'\n}\n\nexport enum FileUploadError {\n  INVALID_FORMAT = \"Invalid file format! Upload valid file.\",\n  SIZE_EXCEEDED = \"File exceeds size limit! Upload smaller file.\",\n  MULTIPLE_NOT_ALLOWED = \"Please Upload Single File!\",\n  DUPLICATES_NOT_ALLOWED = \"Duplicate Files Are Not Allowed!\",\n  UPLOAD_URL_REQUIRED = \"Upload URL is required!\",\n}\n\nexport enum FileUploadEvent {\n  NILE_INIT = \"nile-init\",\n  NILE_BROWSE = \"nile-browse\",\n  NILE_DRAG = \"nile-drag\",\n  NILE_CHANGE = \"nile-change\",\n  NILE_UPLOAD_PROGRESS = \"nile-upload-progress\",\n  NILE_UPLOAD_SUCCESS = \"nile-upload-success\",\n  NILE_UPLOAD_CANCELLED = \"nile-upload-cancelled\",\n  NILE_CANCEL_UPLOAD = \"nile-cancel-upload\",\n  NILE_NETWORK_ERROR = \"nile-network-error\",\n  SERVER_SIDE_ERROR = \"nile-server-error\",\n  NILE_DESTROY = \"nile-destroy\"\n}\n\nexport enum FileUploadDefaults {\n  TITLE = 'Drag and drop to upload',\n  SUBTITLE = 'PNG, JPG or SVG (upto 1MB) | 1:1 ratio',\n  ERROR_MESSAGE = 'Invalid File Format.',\n};"]}

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

@@ -1,12 +1,14 @@
 import { FileUploadState } from "../types";
 export declare class DragHandler {
     private currentState;
+    private size;
+    private uploadedFiles;
     private stateChangeCallback?;
     private fileDropCallback?;
     private errorMessageCallback?;
     constructor();
     setErrorMessage(callback: (errorMessage: string) => void): void;
-    setValuesInDragHandler(state: FileUploadState): void;
+    setValuesInDragHandler(state: FileUploadState, size: number, uploadedFiles: File[]): void;
     onFileDrop(callback: (files: File[]) => void): void;
     onStateChange(callback: (state: FileUploadState) => void): void;
     private setState;
@@ -17,5 +19,5 @@ export declare class DragHandler {
     handleDocumentDrop(e: DragEvent): void;
     preventDragOver(e: DragEvent): void;
     preventDrop(e: DragEvent): void;
-    handleFiles(e: Event | DragEvent): void;
+    handleFiles(event: Event | DragEvent): void;
 }