@aquera/nile-elements 0.1.60-beta-1.0 → 0.1.61-beta-1.0

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

@@ -2,10 +2,9 @@ import { TemplateResult } from 'lit';
 import './nile-file-upload.css';
 import { DragHandler } from './utils/drag-drop.util';
 import { FileUploadState } from './types/file-upload.enums';
-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 getHorizontalDefaultState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, state: FileUploadState, errorMessage: string, allowedTypes: string[]) => TemplateResult;
+export declare const getHorizontalDisabledState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, state: FileUploadState, errorMessage: string, allowedTypes: string[]) => TemplateResult;
 export declare const getHorizontalDragState: () => 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 getVerticalDefaultState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, errorMessage: string, allowedTypes: string[]) => TemplateResult;
+export declare const getVerticalDisabledState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, errorMessage: string, allowedTypes: string[]) => TemplateResult;
 export declare const getVerticalDragState: () => TemplateResult;

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

@@ -1,76 +1,46 @@
 import { html } from 'lit';
 import './nile-file-upload.css';
 import { classMap } from 'lit-html/directives/class-map.js';
-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">
+import { FileUploadDefaults } from './types/file-upload.enums';
+const baseHorizontalState = (browseFiles, title, subtitle, disabled, dragHandler, state, errorMessage, allowedTypes) => 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">
           <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 part="content" class="content">
+          <div class="title">${title}</div>
+          <div class="subtitle">${subtitle}</div>
         </div>
       </div>
       <input
         type="file"
-        @change=${(e) => dragHandlerInstance.handleFiles(e)}
+        ?disabled=${disabled}
+        @change=${(e) => { dragHandler.handleFiles(e); }}
         multiple
+        accept=${allowedTypes.join(',')}
       />
-      <slot @click=${browseFiles} name="browseFileButton">
-        <nile-button variant="tertiary">
+      <slot @click=${disabled ? undefined : browseFiles} name="browse-file-button">
+        <nile-button variant="tertiary" ?disabled=${disabled}>
           Browse File
         </nile-button>
       </slot>
     </div>
     ${errorMessage ?
     html `<div class="upload-error">
-        <nile-icon name="warning" size="12" color="red"></nile-icon>
-        <span>${errorMessage}</span>
+        <nile-icon name="warning" size="12" color="var(--nile-colors-red-700)"></nile-icon>
+        <nile-tooltip content=${errorMessage}>
+          <span>${errorMessage}</span>
+        </nile-tooltip>
       </div>` :
     html ``}
   </div>
 `;
-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 getHorizontalDefaultState = (browseFiles, title, subtitle, dragHandler, state, errorMessage, allowedTypes) => baseHorizontalState(browseFiles, title, subtitle, false, dragHandler, state, errorMessage, allowedTypes);
+export const getHorizontalDisabledState = (browseFiles, title, subtitle, dragHandler, state, errorMessage, allowedTypes) => baseHorizontalState(browseFiles, title, subtitle, true, dragHandler, state, errorMessage, allowedTypes);
 export const getHorizontalDragState = () => html `
-  <div class="horizontal-div dragging">
+  <div part="horizontal-drag-state" class="horizontal-div dragging">
     <div class="icons-container">
       <nile-icon
         color="var(--nile-colors-blue-500)"
@@ -85,72 +55,47 @@ export const getHorizontalDragState = () => html `
         class="image-icon"
       ></nile-icon>
     </div>
-    <p>Drop files here to upload</p>
+    <p>${FileUploadDefaults.DRAG_STATE_DEFAULT}</p>
   </div>
 `;
 //  Vertical States
-export const getVerticalDefaultState = (browseFiles, title, subtitle, errorMessage, state) => html `
-  <div>
-    <div class=${classMap({ 'hover-border': state === "hover", 'vertical-div': true })}>
-      <slot name="uploadIcon">
+const baseVerticalState = (browseFiles, title, subtitle, disabled, dragHandler, errorMessage, allowedTypes) => html `
+  <div part="vertical-wrapper" class="wrapper">
+    <div part="vertical-default" class="vertical-default vertical-div ${disabled ? 'disable' : ''}">
+      <slot name="upload-icon">
         <nile-icon name="upload" size="24"></nile-icon>
       </slot>
-      <div class="content-container">
-        <slot name="title">
-          <h4>${title}</h4>
-        </slot>
-        <slot name="subtitle">
-          <p>${subtitle}</p>
-        </slot>
+      <div part="vertical-content-container" class="content-container">
+        <div class="title">${title}</div>
+        <div class="subtitle">${subtitle}</div>
       </div>
       <input
         type="file"
-        @change=${(e) => dragHandlerInstance.handleFiles(e)}
+        ?disabled=${disabled}
+        @change=${(e) => dragHandler.handleFiles(e)}
         multiple
+        accept=${allowedTypes.join(',')}
       />
-      <slot @click=${browseFiles} name="browseFileButton">
-        <nile-button variant="tertiary">
+      <slot @click=${disabled ? undefined : browseFiles} name="browse-file-button">
+        <nile-button variant="tertiary" ?disabled=${disabled}>
           Browse File
         </nile-button>
       </slot>
     </div>
     ${errorMessage ?
     html `<div class="upload-error">
-        <nile-icon name="warning" size="12" color="red"></nile-icon>
-        <span>${errorMessage}</span>
+        <nile-icon name="warning" size="12" color="var(--nile-colors-red-700)"></nile-icon>
+        <nile-tooltip content=${errorMessage}>
+          <span>${errorMessage}</span>
+        </nile-tooltip>
       </div>` :
     html ``}
   </div>
 `;
-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 getVerticalDefaultState = (browseFiles, title, subtitle, dragHandler, errorMessage, allowedTypes) => baseVerticalState(browseFiles, title, subtitle, false, dragHandler, errorMessage, allowedTypes);
+export const getVerticalDisabledState = (browseFiles, title, subtitle, dragHandler, errorMessage, allowedTypes) => baseVerticalState(browseFiles, title, subtitle, true, dragHandler, errorMessage, allowedTypes);
 export const getVerticalDragState = () => html `
-  <div class="vertical-div vertical-drag">
+  <div part="vertical-drag-state" class="vertical-div vertical-drag">
     <div class="icons-container">
       <nile-icon
         color="var(--nile-colors-blue-500)"
@@ -165,7 +110,7 @@ export const getVerticalDragState = () => html `
         class="image-icon"
       ></nile-icon>
     </div>
-    <p>Drop files here to upload</p>
+    <p>${FileUploadDefaults.DRAG_STATE_DEFAULT}</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;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`;"]}
+{"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,EAAmB,MAAM,2BAA2B,CAAC;AAEhF,MAAM,mBAAmB,GAAG,CAC1B,WAAqB,EACrB,KAAa,EACb,QAAgB,EAChB,QAAiB,EACjB,WAAwB,EACxB,KAAsB,EACtB,YAAoB,EACpB,YAAsB,EACN,EAAE,CAAC,IAAI,CAAA;;uCAEc,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;;qBAElB,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW;oDACH,QAAQ;;;;;MAKtD,YAAY,CAAC,CAAC;IACd,IAAI,CAAA;;gCAEsB,YAAY;kBAC1B,YAAY;;aAEjB,CAAC,CAAC;IACT,IAAI,CAAA,EACN;;CAEH,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG,CACvC,WAAqB,EACrB,KAAa,EACb,QAAgB,EAChB,WAAwB,EACxB,KAAsB,EACtB,YAAoB,EACpB,YAAsB,EACN,EAAE,CAAC,mBAAmB,CAAC,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC;AAE9H,MAAM,CAAC,MAAM,0BAA0B,GAAG,CACxC,WAAqB,EACrB,KAAa,EACb,QAAgB,EAChB,WAAwB,EACxB,KAAsB,EACtB,YAAoB,EACpB,YAAsB,EACN,EAAE,CAAC,mBAAmB,CAAC,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC;AAE7H,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,EACN,EAAE,CAAC,IAAI,CAAA;;wEAE+C,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,CAAC,CAAC;IACd,IAAI,CAAA;;gCAEsB,YAAY;kBAC1B,YAAY;;aAEjB,CAAC,CAAC;IACT,IAAI,CAAA,EACN;;CAEH,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,WAAqB,EACrB,KAAa,EACb,QAAgB,EAChB,WAAwB,EACxB,YAAoB,EACpB,YAAsB,EACN,EAAE,CAAC,iBAAiB,CAAC,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC;AAErH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CACtC,WAAqB,EACrB,KAAa,EACb,QAAgB,EAChB,WAAwB,EACxB,YAAoB,EACpB,YAAsB,EACN,EAAE,CAAC,iBAAiB,CAAC,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC;AAGpH,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';\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): TemplateResult => 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 @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 ?\n      html`<div class=\"upload-error\">\n        <nile-icon name=\"warning\" size=\"12\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n        <nile-tooltip content=${errorMessage}>\n          <span>${errorMessage}</span>\n        </nile-tooltip>\n      </div>` :\n      html``\n    }\n  </div>\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): TemplateResult => baseHorizontalState(browseFiles, title, subtitle, false, dragHandler, state, errorMessage, allowedTypes);\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): TemplateResult => baseHorizontalState(browseFiles, title, subtitle, true, dragHandler, state, errorMessage, allowedTypes);\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): TemplateResult => 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 ?\n      html`<div class=\"upload-error\">\n        <nile-icon name=\"warning\" size=\"12\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n        <nile-tooltip content=${errorMessage}>\n          <span>${errorMessage}</span>\n        </nile-tooltip>\n      </div>` :\n      html``\n    }\n  </div>\n`;\n\nexport const getVerticalDefaultState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  dragHandler: DragHandler,\n  errorMessage: string,\n  allowedTypes: string[]\n): TemplateResult => baseVerticalState(browseFiles, title, subtitle, false, dragHandler, errorMessage, allowedTypes);\n\nexport const getVerticalDisabledState = (\n  browseFiles: Function,\n  title: string,\n  subtitle: string,\n  dragHandler: DragHandler,\n  errorMessage: string,\n  allowedTypes: string[]\n): TemplateResult => baseVerticalState(browseFiles, title, subtitle, true, dragHandler, errorMessage, allowedTypes);\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`;"]}

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

@@ -10,16 +10,19 @@ export declare enum FileUploadVariant {
 }
 export declare enum FileUploadError {
     INVALID_FORMAT = "Invalid file format! Upload valid file.",
-    SIZE_EXCEEDED = "File exceeds size limit! Upload smaller file.",
+    SIZE_LIMIT_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!"
+    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."
 }
 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",
@@ -31,5 +34,6 @@ 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."
+    ERROR_MESSAGE = "Invalid File Format.",
+    DRAG_STATE_DEFAULT = "Drop files here to upload"
 }

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

@@ -13,10 +13,12 @@ export var FileUploadVariant;
 export var FileUploadError;
 (function (FileUploadError) {
     FileUploadError["INVALID_FORMAT"] = "Invalid file format! Upload valid file.";
-    FileUploadError["SIZE_EXCEEDED"] = "File exceeds size limit! Upload smaller file.";
+    FileUploadError["SIZE_LIMIT_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) {
@@ -24,6 +26,7 @@ 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";
@@ -37,6 +40,7 @@ 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 || (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,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};"]}
+{"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,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,eAaX;AAbD,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,4DAAyC,CAAA;IACzC,4DAAyC,CAAA;IACzC,0DAAuC,CAAA;IACvC,gDAA6B,CAAA;AAC/B,CAAC,EAbW,eAAe,KAAf,eAAe,QAa1B;AAED,MAAM,CAAN,IAAY,kBAKX;AALD,WAAY,kBAAkB;IAC5B,uDAAiC,CAAA;IACjC,yEAAmD,CAAA;IACnD,4DAAsC,CAAA;IACtC,sEAAgD,CAAA;AAClD,CAAC,EALW,kBAAkB,KAAlB,kBAAkB,QAK7B;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_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_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};"]}

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

@@ -1,14 +1,12 @@
 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, size: number, uploadedFiles: File[]): void;
+    setValuesInDragHandler(state: FileUploadState): void;
     onFileDrop(callback: (files: File[]) => void): void;
     onStateChange(callback: (state: FileUploadState) => void): void;
     private setState;
@@ -19,5 +17,5 @@ export declare class DragHandler {
     handleDocumentDrop(e: DragEvent): void;
     preventDragOver(e: DragEvent): void;
     preventDrop(e: DragEvent): void;
-    handleFiles(event: Event | DragEvent): void;
+    handleFiles(e: Event | DragEvent): void;
 }

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

@@ -1,17 +1,14 @@
+import { preventDefaultAndStopPropagation } from "./file-validation.util";
 import { FileUploadState } from "../types";
 export class DragHandler {
     constructor() {
         this.currentState = FileUploadState.DEFAULT;
-        this.size = 0;
-        this.uploadedFiles = [];
     }
     setErrorMessage(callback) {
         this.errorMessageCallback = callback;
     }
-    setValuesInDragHandler(state, size, uploadedFiles) {
+    setValuesInDragHandler(state) {
         this.currentState = state;
-        this.size = size;
-        this.uploadedFiles = uploadedFiles;
     }
     onFileDrop(callback) {
         this.fileDropCallback = callback;
@@ -26,60 +23,60 @@ export class DragHandler {
         this.stateChangeCallback?.(state);
     }
     dragEnter(e) {
+        preventDefaultAndStopPropagation(e);
         if (this.currentState === FileUploadState.DISABLED)
             return;
-        e.preventDefault();
         this.errorMessageCallback?.("");
         this.setState(FileUploadState.DRAG);
     }
     dragLeave(e) {
+        preventDefaultAndStopPropagation(e);
         if (this.currentState === FileUploadState.DISABLED)
             return;
-        e.preventDefault();
         this.setState(FileUploadState.DEFAULT);
     }
     dragOver(e) {
+        preventDefaultAndStopPropagation(e);
         if (this.currentState === FileUploadState.DISABLED)
             return;
-        e.preventDefault();
     }
     drop(e) {
+        preventDefaultAndStopPropagation(e);
         if (this.currentState === FileUploadState.DISABLED)
             return;
-        e.preventDefault();
-        e.stopPropagation();
         this.setState(FileUploadState.DEFAULT);
         this.handleFiles(e);
     }
     handleDocumentDrop(e) {
         if (this.currentState === FileUploadState.DISABLED)
             return;
-        e.preventDefault();
-        e.stopPropagation();
+        preventDefaultAndStopPropagation(e);
         this.setState(FileUploadState.DEFAULT);
     }
     preventDragOver(e) {
-        e.preventDefault();
+        preventDefaultAndStopPropagation(e);
     }
     preventDrop(e) {
-        e.preventDefault();
-        e.stopPropagation();
+        preventDefaultAndStopPropagation(e);
     }
-    handleFiles(event) {
+    handleFiles(e) {
+        preventDefaultAndStopPropagation(e);
         if (this.currentState === FileUploadState.DISABLED)
             return;
-        event.preventDefault?.();
         let files = null;
-        if ('dataTransfer' in event && event.dataTransfer) {
-            files = event.dataTransfer.files;
+        if ('dataTransfer' in e && e.dataTransfer) {
+            files = e.dataTransfer.files;
         }
-        if (!files && event.target instanceof HTMLInputElement) {
-            files = event.target.files;
+        if (!files && e.target instanceof HTMLInputElement) {
+            files = e.target.files;
         }
         if (files && files.length > 0) {
             const newFiles = Array.from(files);
             this.fileDropCallback?.(newFiles);
         }
+        if (e.target instanceof HTMLInputElement) {
+            e.target.value = "";
+        }
     }
 }
 //# sourceMappingURL=drag-drop.util.js.map

package/dist/src/nile-file-upload/utils/drag-drop.util.js.map

@@ -1 +1 @@
-{"version":3,"file":"drag-drop.util.js","sourceRoot":"","sources":["../../../../src/nile-file-upload/utils/drag-drop.util.ts"],"names":[],"mappings":"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","sourcesContent":["import { FileUploadError, FileUploadState } from \"../types\";\n\nexport class DragHandler {\n  private currentState: FileUploadState = FileUploadState.DEFAULT;\n  private size: number = 0;\n  private uploadedFiles: File[] = [];\n\n  private stateChangeCallback?: (state: FileUploadState) => void;\n  private fileDropCallback?: (files: File[]) => void;\n  private errorMessageCallback?: (errorMessage: string) => void;\n\n  constructor() {}\n\n  public setErrorMessage(callback: (errorMessage: string) => void): void {\n    this.errorMessageCallback = callback;\n  }\n\n  public setValuesInDragHandler(state: FileUploadState, size: number, uploadedFiles: File[]): void {\n    this.currentState = state;\n    this.size = size;\n    this.uploadedFiles = uploadedFiles;\n  }\n\n  public onFileDrop(callback: (files: File[]) => void): void {\n    this.fileDropCallback = callback;\n  }\n\n  public onStateChange(callback: (state: FileUploadState) => void): void {\n    this.stateChangeCallback = callback;\n  }\n\n  private setState(state: FileUploadState): void {\n    if (this.currentState === FileUploadState.DISABLED) return;\n\n    this.currentState = state;\n    this.stateChangeCallback?.(state);\n  }\n\n  public dragEnter(e: DragEvent): void {\n    if (this.currentState === FileUploadState.DISABLED) return;\n\n    e.preventDefault();\n    this.errorMessageCallback?.(\"\");\n    this.setState(FileUploadState.DRAG);\n  }\n\n  public dragLeave(e: DragEvent): void {\n    if (this.currentState === FileUploadState.DISABLED) return;\n\n    e.preventDefault();\n    this.setState(FileUploadState.DEFAULT);\n  }\n\n  public dragOver(e: DragEvent): void {\n    if (this.currentState === FileUploadState.DISABLED) return;\n\n    e.preventDefault();\n  }\n\n  public drop(e: DragEvent): void {\n    if (this.currentState === FileUploadState.DISABLED) return;\n\n    e.preventDefault();\n    e.stopPropagation();\n    this.setState(FileUploadState.DEFAULT);\n    this.handleFiles(e);\n  }\n\n  public handleDocumentDrop(e: DragEvent): void {\n    if (this.currentState === FileUploadState.DISABLED) return;\n\n    e.preventDefault();\n    e.stopPropagation();\n    this.setState(FileUploadState.DEFAULT);\n  }\n\n  public preventDragOver(e: DragEvent): void {\n    e.preventDefault();\n  }\n\n  public preventDrop(e: DragEvent): void {\n    e.preventDefault();\n    e.stopPropagation();\n  }\n\n  public handleFiles(event: Event | DragEvent): void {\n    if (this.currentState === FileUploadState.DISABLED) return;\n\n    event.preventDefault?.();\n    let files: FileList | null = null;\n\n    if ('dataTransfer' in event && event.dataTransfer) {\n      files = event.dataTransfer.files;\n    }\n\n    if (!files && event.target instanceof HTMLInputElement) {\n      files = event.target.files;\n    }\n\n    if (files && files.length > 0) {\n      const newFiles = Array.from(files);\n\n      this.fileDropCallback?.(newFiles);\n    }\n  }\n}\n"]}
+{"version":3,"file":"drag-drop.util.js","sourceRoot":"","sources":["../../../../src/nile-file-upload/utils/drag-drop.util.ts"],"names":[],"mappings":"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","sourcesContent":["import { preventDefaultAndStopPropagation } from \"./file-validation.util\";\nimport { FileUploadState } from \"../types\";\n\nexport class DragHandler {\n  private currentState: FileUploadState = FileUploadState.DEFAULT;\n\n  private stateChangeCallback?: (state: FileUploadState) => void;\n  private fileDropCallback?: (files: File[]) => void;\n  private errorMessageCallback?: (errorMessage: string) => void;\n\n  constructor() {}\n\n  public setErrorMessage(callback: (errorMessage: string) => void): void {\n    this.errorMessageCallback = callback;\n  }\n\n  public setValuesInDragHandler(state: FileUploadState): void {\n    this.currentState = state;\n  }\n\n  public onFileDrop(callback: (files: File[]) => void): void {\n    this.fileDropCallback = callback;\n  }\n\n  public onStateChange(callback: (state: FileUploadState) => void): void {\n    this.stateChangeCallback = callback;\n  }\n\n  private setState(state: FileUploadState): void {\n    if (this.currentState === FileUploadState.DISABLED) return;\n\n    this.currentState = state;\n    this.stateChangeCallback?.(state);\n  }\n\n  public dragEnter(e: DragEvent): void {\n    preventDefaultAndStopPropagation(e);\n\n    if (this.currentState === FileUploadState.DISABLED) return;\n    this.errorMessageCallback?.(\"\");\n    this.setState(FileUploadState.DRAG);\n  }\n\n  public dragLeave(e: DragEvent): void {\n    preventDefaultAndStopPropagation(e);\n    \n    if (this.currentState === FileUploadState.DISABLED) return;\n\n    this.setState(FileUploadState.DEFAULT);\n  }\n\n  public dragOver(e: DragEvent): void {\n    preventDefaultAndStopPropagation(e);\n    \n    if (this.currentState === FileUploadState.DISABLED) return;\n  }\n\n  public drop(e: DragEvent): void {\n    preventDefaultAndStopPropagation(e);\n    \n    if (this.currentState === FileUploadState.DISABLED) return;\n    this.setState(FileUploadState.DEFAULT);\n    this.handleFiles(e);\n  }\n\n  public handleDocumentDrop(e: DragEvent): void {\n    if (this.currentState === FileUploadState.DISABLED) return;\n\n    preventDefaultAndStopPropagation(e);\n    \n    this.setState(FileUploadState.DEFAULT);\n  }\n\n  public preventDragOver(e: DragEvent): void {\n    preventDefaultAndStopPropagation(e); \n  }\n\n  public preventDrop(e: DragEvent): void {\n    preventDefaultAndStopPropagation(e); \n  }\n\n  public handleFiles(e: Event | DragEvent): void {\n    preventDefaultAndStopPropagation(e);\n    if (this.currentState === FileUploadState.DISABLED) return;\n\n    let files: FileList | null = null;\n\n    if ('dataTransfer' in e && e.dataTransfer) {\n      files = e.dataTransfer.files;\n    }\n\n    if (!files && e.target instanceof HTMLInputElement) {\n      files = e.target.files;\n    }\n\n    if (files && files.length > 0) {\n      const newFiles = Array.from(files);\n\n      this.fileDropCallback?.(newFiles);\n    }\n\n    if(e.target instanceof HTMLInputElement) {\n      e.target.value = \"\";\n    }\n  }\n}\n"]}

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

@@ -1,7 +1,6 @@
 import { DragHandler } from "./drag-drop.util";
 import { FileUploadState } from "../types";
 import { NileFileUpload } from "../nile-file-upload";
-export declare const areDuplicates: (files: File[], uploadedFiles: File[]) => boolean;
 export declare const setUpDragHandler: (nileFileUpload: NileFileUpload, dragHandler: DragHandler) => void;
 export declare const addGlobalListeners: (dragHandler: DragHandler) => void;
 export declare const addInternalListeners: (nileFileUpload: NileFileUpload, dragHandler: DragHandler, uploadRequests: any) => void;
@@ -9,3 +8,5 @@ export declare function handleHoverIn(setState: (state: FileUploadState) => void
 export declare function handleHoverOut(setState: (state: FileUploadState) => void, currentState: FileUploadState): void;
 export declare function uploadFiles(nileFileUpload: NileFileUpload): void;
 export declare const cancelFileUpload: (nileFileUpload: NileFileUpload, uploadRequests: Map<File, XMLHttpRequest>) => void;
+export declare const preventDefaultAndStopPropagation: (event: Event | DragEvent) => void;
+export declare const removeFile: (uploadedFiles: File[], nileFileUpload: NileFileUpload) => void;