npm - @aquera/nile-elements - Versions diffs - 0.1.56-beta-1.1 → 0.1.57-beta-1.0 - Mend

@aquera/nile-elements 0.1.56-beta-1.1 → 0.1.57-beta-1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (568) hide show

package/dist/src/nile-file-upload/nile-file-upload.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-file-upload.css.js","sourceRoot":"","sources":["../../../src/nile-file-upload/nile-file-upload.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyhBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\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 {css} from 'lit';\n\n/\n FileUpload CSS\n /\nexport const styles = css`\n :host {\n display: inline-block;\n }\n\n {\n padding: 0px;\n margin: 0px;\n box-sizing: border-box;\n }\n\n .wrapper {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 18px;\n height: auto;\n }\n\n input {\n display: none;\n }\n\n .horizontal-div {\n margin-bottom: 10px;\n height: 62px;\n max-width: 648px;\n width: max(648px, 100%);\n min-width: 230px;\n padding: 12px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 18px;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px dashed var(--nile-colors-neutral-500);\n color: var(--nile-colors-dark-900);\n background-color: var(--nile-colors-white-base);\n }\n\n .hover-border {\n border-color: var(--nile-colors-primary-600);\n }\n\n .vertical-div {\n min-height: 156px;\n height: auto;\n min-width: 240px;\n width: 240px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n padding: 12px;\n border-radius: var(--nile-radius-radius-xs);\n color: var(--nile-colors-dark-900);\n border: 1px dashed var(--nile-colors-neutral-500);\n background-color: var(--nile-colors-white-base);\n position: relative; \n }\n\n .vertical-div:hover {\n border-color: var(--nile-colors-blue-500);\n }\n\n .outer-div-border {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .inner-div {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 18px;\n box-sizing: border-box;\n }\n\n .content {\n display: flex; \n flex-direction: column;\n justify-content: center;\n gap: 8px;\n }\n\n .content h4 {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-900);\n }\n \n .content p {\n margin: 0px;\n font-size: var(--nile-type-scale-2);\n color: var(--nile-colors-neutral-700);\n }\n\n /* DISABLED STATE /\n .disable {\n background-color: var(--nile-colors-dark-200);\n opacity: 0.8;\n cursor: not-allowed;\n color: var(--nile-colors-neutral-500);\n pointer-events: none;\n }\n\n / DRAGGING /\n .dragging {\n background-color: var(--nile-colors-blue-100);\n border-color: var(--nile-colors-primary-600);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 18px;\n color: var(--nile-colors-blue-700);\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .icons-container {\n display: flex;\n gap: 4px;\n }\n\n .general-icon {\n transform: rotate(-18.11deg);\n position: relative;\n bottom: 3px;\n }\n\n .image-icon {\n transform: rotate(15deg);\n }\n\n .icon:hover {\n cursor: pointer;\n }\n\n / Uploading State /\n .uploading {\n width: 648px;\n min-width: 230px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n box-sizing: border-box;\n border: 1px solid var(--nile-colors-neutral-400)\n }\n \n .uploading:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .progress-bar-container {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 0px;\n }\n\n .progress-bar-percent {\n width: 100%;\n display: flex;\n justify-content: space-between;\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .progress-bar-container p {\n margin: 0px;\n }\n\n .progress-bar-container > p {\n font-size: var(--nile-type-scale-1);\n color: var(--nile-colors-dark-500);\n }\n\n / PREVIEW STATE /\n .preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .preview-inner {\n display: flex;\n gap: 18px;\n }\n\n .preview-image-container {\n height: 42px;\n width: 42px;\n }\n\n .preview-image-container img {\n height: 42px;\n width: 42px;\n object-fit: contain;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px solid var(--nile-colors-neutral-400);\n }\n \n .preview-file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 8px;\n }\n\n .preview-file-info p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .preview nile-icon:hover {\n cursor: pointer;\n }\n\n\n / NO PREVIEW STATE /\n .no-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .no-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .no-preview-container {\n display: flex;\n gap: 18px;\n }\n\n .document-icon {\n height: 40px;\n width: 40px;\n border-radius: var(--nile-radius-radius-xs);\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--nile-colors-blue-400);\n background-color: var(--nile-colors-blue-100);\n }\n\n .document-icon nile-icon {\n height: 40px;\n width: 40px;\n }\n \n .preview-file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 8px;\n }\n\n .preview-file-info p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .no-preview > nile-icon:hover {\n cursor: pointer;\n }\n\n / ERROR STATE /\n \n .error {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .error:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .error-container {\n width: 100%;\n display: flex;\n gap: 18px;\n }\n\n .error-icon {\n height: 40px;\n width: 40px;\n border-radius: var(--nile-radius-radius-xs);\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--nile-colors-red-400);\n background-color: var(--nile-colors-red-100);\n }\n\n .error-icon nile-icon {\n height: 40px;\n width: 40px;\n }\n \n .file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 8px;\n }\n\n .file-info p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .file-info p:last-of-type{\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .error > nile-icon:hover {\n cursor: pointer;\n }\n\n / VARTICAL STATE START /\n / Default State /\n\n .vertical-default {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 18px\n }\n\n .content-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n }\n\n .content-container h4 {\n font-weight: var(--nile-font-weight-regular);\n }\n\n .content-container p:first-child {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .content-container p:last-child {\n margin: 0px;\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-neutral-700);\n }\n\n / Drag State /\n .vertical-drag {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap:18px;\n font-size: var(--nile-type-scale-3);\n color: var(--nile-colors-blue-700);\n background-color: var(--nile-colors-blue-100);\n border-color: var(--nile-colors-blue-500);\n }\n\n / Uploading State /\n .vertical-uploading {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: center;\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-uploading:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .loading {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .corner-icon {\n position: absolute;\n top: 10px;\n right: 10px;\n }\n\n / Preview State /\n .vertical-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .image-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n object-fit: cover;\n width: 80px;\n height: 80px;\n border-radius: var(--nile-radius-radius-xs);\n }\n\n / Vertical No Preview State /\n .vertical-no-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-no-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .vertical-document-icon {\n height: 80px;\n width: 80px;\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px solid var(--nile-colors-blue-400);\n background-color: var(--nile-colors-blue-100);\n }\n\n / Veritcal Error State /\n .vertical-error {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-error:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .error-bg {\n background-color: var(--nile-colors-red-100);\n border: 1px solid var(--nile-colors-red-400);\n }\n\n .error-message {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: start;\n }\n\n .error-p {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n width: 216px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: center;\n }\n\n .error-p p {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 0;\n }\n\n\n / Displaing uploaded files CSS /\n .display-files {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n gap: 8px;\n width: 648px;\n min-width: 230px;\n max-height: 200px;\n overflow-y: auto;\n border: 1px solid var(--nile-colors-neutral-700);\n border-radius: var(--nile-radius-radius-xs);\n scrollbar-width: none;\n padding: 12px;\n }\n\n ul, li {\n width: 100%;\n }\n\n li {\n list-style-type: none;\n }\n\n / for the upload error messages */\n .upload-error {\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-red-500);\n display: flex;\n justify-content: flex-start;\n align-items: center;\n gap: var(--nile-spacing-one-half-x);\n }\n`;\n\nexport default [styles];"]}
1	+ {"version":3,"file":"nile-file-upload.css.js","sourceRoot":"","sources":["../../../src/nile-file-upload/nile-file-upload.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4iBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\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 {css} from 'lit';\n\n/\n FileUpload CSS\n /\nexport const styles = css`\n :host {\n display: inline-block;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n {\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n box-sizing: border-box;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body))\n }\n\n .wrapper {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 18px;\n height: auto;\n }\n\n input {\n display: none;\n }\n\n .horizontal-div {\n height: var(--nile-height-60px, var(--ng-height-60px));\n max-width: 648px;\n min-width: 230px;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 18px;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));\n border:\n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-dashed, var(--ng-border-style-solid))\n var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .hover-border {\n border:\n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-dashed, var(--ng-border-style-solid))\n var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n }\n\n .vertical-div {\n min-height: 156px;\n height: auto;\n min-width: 240px;\n width: 240px;\n display: flex !important;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-xl)) var(--nile-spacing-spacing-lg, var(--ng-spacing-3xl));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n border: var(--nile-border-width-1, var(--ng-border-width-2)) var(--nile-border-style-dashed, var(--ng-border-style-solid)) var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n position: relative;\n }\n\n .vertical-div:hover {\n border: var(--nile-border-width-1, var(--ng-border-width-2)) var(--nile-border-style-dashed, var(--ng-border-style-solid)) var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n }\n\n .outer-div-border {\n border: var(--nile-border-width-1, var(--ng-border-width-2)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .inner-div {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 18px;\n box-sizing: border-box;\n }\n\n .content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 8px;\n }\n\n .content h4 {\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n }\n\n .content p {\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));\n }\n\n /* DISABLED STATE /\n .disable {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));\n opacity: var(--nile-opacity-50, var(--ng-opacity-50));\n pointer-events: none;\n }\n\n / DRAGGING /\n .dragging {\n background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));\n border:\n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-dashed, var(--ng-border-style-solid))\n var(--nile-colors-primary-600, var(--ng-colors-border-primary));\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 18px;\n color: var(--nile-colors-blue-700, var(--ng-colors-fg-primary-900));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular), var(--ng-font-weight-regular);\n }\n\n .icons-container {\n display: flex;\n gap: 4px;\n }\n\n .general-icon {\n transform: rotate(-18.11deg);\n position: relative;\n bottom: 3px;\n }\n\n .image-icon {\n transform: rotate(15deg);\n }\n\n .icon:hover {\n cursor: pointer;\n }\n\n / Uploading State /\n .uploading {\n width: 648px;\n min-width: 230px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n box-sizing: border-box;\n border:\n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid))\n var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n }\n\n .uploading:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .progress-bar-container {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 0px;\n }\n\n .progress-bar-percent {\n width: 100%;\n display: flex;\n justify-content: space-between;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n }\n\n .progress-bar-container p {\n margin: 0px;\n }\n\n .progress-bar-container > p {\n font-size: var(--nile-type-scale-1, var(--ng-font-size-text-sm));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));\n }\n\n / PREVIEW STATE /\n .preview {\n border:\n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid))\n var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .preview:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .preview-inner {\n display: flex;\n gap: 18px;\n }\n\n .preview-image-container {\n height: 42px;\n width: 42px;\n }\n\n .preview-image-container img {\n height: var(--nile-height-42px, var(--ng-height-42px));\n width: var(--nile-width-42px, 42px); // check it once\n object-fit: contain;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));\n border:\n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid))\n var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .preview-file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 8px;\n }\n\n .preview-file-info p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .preview nile-icon:hover {\n cursor: pointer;\n }\n\n\n / NO PREVIEW STATE /\n .no-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .no-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .no-preview-container {\n display: flex;\n gap: 18px;\n }\n\n .document-icon {\n height: 40px;\n width: 40px;\n border-radius: var(--nile-radius-radius-xs);\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--nile-colors-blue-400);\n background-color: var(--nile-colors-blue-100);\n }\n\n .document-icon nile-icon {\n height: 40px;\n width: 40px;\n }\n\n .preview-file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 8px;\n }\n\n .preview-file-info p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .no-preview > nile-icon:hover {\n cursor: pointer;\n }\n\n / ERROR STATE /\n\n .error {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .error:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .error-container {\n width: 100%;\n display: flex;\n gap: 18px;\n }\n\n .error-icon {\n height: 40px;\n width: 40px;\n border-radius: var(--nile-radius-radius-xs);\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--nile-colors-red-400);\n background-color: var(--nile-colors-red-100);\n }\n\n .error-icon nile-icon {\n height: 40px;\n width: 40px;\n }\n\n .file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 8px;\n }\n\n .file-info p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .file-info p:last-of-type{\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .error > nile-icon:hover {\n cursor: pointer;\n }\n\n / VARTICAL STATE START /\n / Default State /\n\n .vertical-default {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 18px\n }\n\n .content-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n }\n\n .content-container h4 {\n font-weight: var(--nile-font-weight-regular);\n }\n\n .content-container p:first-child {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .content-container p:last-child {\n margin: 0px;\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-neutral-700);\n }\n\n / Drag State /\n .vertical-drag {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap:18px;\n font-size: var(--nile-type-scale-3);\n color: var(--nile-colors-blue-700);\n background-color: var(--nile-colors-blue-100);\n border-color: var(--nile-colors-blue-500);\n }\n\n / Uploading State /\n .vertical-uploading {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: center;\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-uploading:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .loading {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .corner-icon {\n position: absolute;\n top: 10px;\n right: 10px;\n }\n\n / Preview State /\n .vertical-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .image-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n object-fit: cover;\n width: 80px;\n height: 80px;\n border-radius: var(--nile-radius-radius-xs);\n }\n\n / Vertical No Preview State /\n .vertical-no-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-no-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .vertical-document-icon {\n height: 80px;\n width: 80px;\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px solid var(--nile-colors-blue-400);\n background-color: var(--nile-colors-blue-100);\n }\n\n / Veritcal Error State /\n .vertical-error {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-error:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .error-bg {\n background-color: var(--nile-colors-red-100);\n border: 1px solid var(--nile-colors-red-400);\n }\n\n .error-message {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: start;\n }\n\n .error-p {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n width: 216px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: center;\n }\n\n .error-p p {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 0;\n }\n\n\n / Displaing uploaded files CSS /\n .display-files {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n gap: 8px;\n width: 648px;\n min-width: 230px;\n max-height: 200px;\n overflow-y: auto;\n border: 1px solid var(--nile-colors-neutral-700);\n border-radius: var(--nile-radius-sm);\n scrollbar-width: none;\n padding: 12px;\n }\n\n ul, li {\n width: 100%;\n }\n\n li {\n list-style-type: none;\n }\n\n / for the upload error messages */\n .upload-error {\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-red-500);\n display: flex;\n justify-content: flex-start;\n align-items: center;\n gap: var(--nile-spacing-one-half-x);\n }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-file-upload/nile-file-upload.d.ts CHANGED Viewed

@@ -20,7 +20,7 @@ export declare class NileFileUpload extends NileElement {
      * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
      */
     static get styles(): CSSResultArray;
-    size: string;
+    size: number;
     error: boolean;
     errorMessage: string;
     allowMultiple: boolean;

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

@@ -8,13 +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 { getHorizontalDisabledState } from './nile-file-upload.template';
+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, } from './nile-file-upload.template';
+import { getHorizontalDefaultState, getHorizontalDisabledtState, getHorizontalDragState, getVerticalDefaultState, getVerticalDisabledState, getVerticalDragState, } from './nile-file-upload.template';
 /**
  * Nile file-upload component.
  *
@@ -24,10 +24,10 @@ 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.uploadedFiles = [];
         this.title = FileUploadDefaults.TITLE;
@@ -55,7 +55,8 @@ let NileFileUpload = class NileFileUpload extends NileElement {
     firstUpdated(changedProps) {
         super.firstUpdated(changedProps);
         this.dragHandler = new DragHandler();
-        setUpDragHandler(this, this.dragHandler, this.allowMultiple, this.uploadedFiles, this.errorMessage, this.size, this.allowDuplicates);
+        getDragHandler(this.dragHandler);
+        setUpDragHandler(this, this.dragHandler);
         addInternalListeners(this, this.dragHandler, this.uploadRequests);
         addGlobalListeners(this.dragHandler);
     }
@@ -64,13 +65,15 @@ let NileFileUpload = class NileFileUpload extends NileElement {
         if (changedProps.has('uploadedFiles')) {
             if (this.uploadedFiles.length === 0)
                 this.errorMessage = "";
-            if (this.fileUploadUrl && this.autoUpload) {
-                uploadFiles(this);
+            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);
+            this.dragHandler.setValuesInDragHandler(this.state, this.size, this.uploadedFiles);
         }
     }
     browseFiles() {
@@ -91,25 +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);
+                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);
+                return getHorizontalDisabledtState(this.browseFiles, this.title, this.subtitle);
             case FileUploadState.DRAG:
                 return getHorizontalDragState();
             default:
-                return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage);
+                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);
+                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);
+                return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle);
             case FileUploadState.DRAG:
                 return getVerticalDragState();
             default:
-                return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage);
+                return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
         }
     }
     disconnectedCallback() {
@@ -117,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 })

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-file-upload.js","sourceRoot":"","sources":["../../../src/nile-file-upload/nile-file-upload.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,0BAA0B,EAAE,MAAM,6BAA6B,CAAA;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAc,IAAI,EAAkC,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAS,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAmB,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACjH,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,WAAW,EAAoB,MAAM,8BAA8B,CAAC;AACzI,OAAO,EACL,yBAAyB,EACzB,sBAAsB,EACtB,uBAAuB,EACvB,wBAAwB,EACxB,oBAAoB,GACrB,MAAM,6BAA6B,CAAC;AAErC;;;;;GAKG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,WAAW;IAAxC;;QASuB,SAAI,GAAW,MAAM,CAAC;QACtB,UAAK,GAAY,KAAK,CAAC;QACvB,iBAAY,GAAW,EAAE,CAAC;QAC1B,kBAAa,GAAY,KAAK,CAAC;QAC/B,oBAAe,GAAY,KAAK,CAAC;QACjC,kBAAa,GAAW,EAAE,CAAC;QAC3B,UAAK,GAAW,kBAAkB,CAAC,KAAK,CAAC;QACzC,aAAQ,GAAW,kBAAkB,CAAC,QAAQ,CAAC;QAC/C,UAAK,GAAoB,eAAe,CAAC,OAAO,CAAC;QACjD,YAAO,GAAsB,iBAAiB,CAAC,UAAU,CAAC;QAC1D,kBAAa,GAAW,EAAE,CAAC;QAC3B,eAAU,GAAY,IAAI,CAAC;QAEhD,mBAAc,GAAG,IAAI,GAAG,EAAwB,CAAC;QAuCjD,aAAQ,GAAG,CAAC,QAAyB,EAAQ,EAAE;YACpD,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QACxB,CAAC,CAAA;IAiDH,CAAC;IA/GC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAmBD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;IACvC,CAAC;IAED,YAAY,CAAC,YAAmC;QAC9C,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;QAEjC,IAAI,CAAC,WAAW,GAAG,IAAI,WAAW,EAAE,CAAC;QACrC,gBAAgB,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QACrI,oBAAoB,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAClE,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACvC,CAAC;IAED,OAAO,CAAC,YAAmC;QACzC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAE5B,IAAI,YAAY,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE,CAAC;YACtC,IAAG,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC;gBAAE,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;YAC3D,IAAG,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACzC,WAAW,CAAC,IAAI,CAAC,CAAC;YACpB,CAAC;YACD,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;QAExE,CAAC;aAAM,IAAI,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACrC,IAAI,CAAC,WAAW,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;QACvC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACvB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,QAAQ,EAAE;KAClB,CAAC;IACJ,CAAC;IAEO,QAAQ;QACd,OAAO,IAAI,CAAC,OAAO,KAAK,iBAAiB,CAAC,UAAU;YAClD,CAAC,CAAC,IAAI,CAAC,kBAAkB,EAAE;YAC3B,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC9B,CAAC;IAEO,kBAAkB;QACxB,QAAO,IAAI,CAAC,KAAK,EAAE,CAAC;YAClB,KAAK,eAAe,CAAC,OAAO;gBAC1B,OAAO,yBAAyB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YAEjI,KAAK,eAAe,CAAC,QAAQ;gBAC3B,OAAO,0BAA0B,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YAElI,KAAK,eAAe,CAAC,IAAI;gBACvB,OAAO,sBAAsB,EAAE,CAAC;YAElC;gBACE,OAAO,yBAAyB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QACnI,CAAC;IACH,CAAC;IAEO,gBAAgB;QACtB,QAAO,IAAI,CAAC,KAAK,EAAE,CAAC;YAClB,KAAK,eAAe,CAAC,OAAO;gBAC1B,OAAO,uBAAuB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YAEnH,KAAK,eAAe,CAAC,QAAQ;gBAC3B,OAAO,wBAAwB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YAEpH,KAAK,eAAe,CAAC,IAAI;gBACvB,OAAO,oBAAoB,EAAE,CAAC;YAEhC;gBACE,OAAO,uBAAuB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QACrH,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;IAC1C,CAAC;CACF,CAAA;AAvG6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAC,CAAC;6CAAwB;AACvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAA2B;AAC1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAC,CAAC;qDAAgC;AAC/B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAC,CAAC;uDAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAG,CAAC;qDAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAA0C;AACzC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAgD;AAC/C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAkD;AACjD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAA2D;AAC1D;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAC,CAAC;kDAA4B;AACvC;IAAf,KAAK,CAAC,OAAO,CAAC;6CAA0B;AArB9B,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAgH1B","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 { getHorizontalDisabledState } 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 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: 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 }) 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 setUpDragHandler(this, this.dragHandler, this.allowMultiple, this.uploadedFiles, this.errorMessage, this.size, this.allowDuplicates);\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 && this.autoUpload) {\n uploadFiles(this);\n }\n this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });\n\n } else if (changedProps.has('state')) {\n this.dragHandler.setValuesInDragHandler(this.state);\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);\n\n case FileUploadState.DISABLED:\n return getHorizontalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage);\n\n case FileUploadState.DRAG:\n return getHorizontalDragState();\n\n default:\n return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage);\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);\n\n case FileUploadState.DISABLED:\n return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage);\n\n case FileUploadState.DRAG:\n return getVerticalDragState();\n\n default:\n return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage);\n }\n }\n\n disconnectedCallback(): void {\n this.emit(FileUploadEvent.NILE_DESTROY);\n }\n}\n"]}
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 { 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 CHANGED Viewed

@@ -2,9 +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';
-export declare const getHorizontalDefaultState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, state: FileUploadState, errorMessage: string) => TemplateResult;
-export declare const getHorizontalDisabledState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, state: FileUploadState, errorMessage: string) => 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) => TemplateResult;
-export declare const getVerticalDisabledState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, errorMessage: string) => 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 CHANGED Viewed

@@ -1,9 +1,13 @@
 import { html } from 'lit';
 import './nile-file-upload.css';
 import { classMap } from 'lit-html/directives/class-map.js';
-const baseHorizontalState = (browseFiles, title, subtitle, disabled, dragHandler, state, errorMessage) => html `
+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, 'disable': disabled })}>
+    <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>
@@ -19,12 +23,11 @@ const baseHorizontalState = (browseFiles, title, subtitle, disabled, dragHandler
       </div>
       <input
         type="file"
-        ?disabled=${disabled}
-        @change=${(e) => { dragHandler.handleFiles(e); }}
+        @change=${(e) => dragHandlerInstance.handleFiles(e)}
         multiple
       />
-      <slot @click=${disabled ? undefined : browseFiles} name="browseFileButton">
-        <nile-button variant="tertiary" ?disabled=${disabled}>
+      <slot @click=${browseFiles} name="browseFileButton">
+        <nile-button variant="tertiary">
           Browse File
         </nile-button>
       </slot>
@@ -37,8 +40,35 @@ const baseHorizontalState = (browseFiles, title, subtitle, disabled, dragHandler
     html ``}
   </div>
 `;
-export const getHorizontalDefaultState = (browseFiles, title, subtitle, dragHandler, state, errorMessage) => baseHorizontalState(browseFiles, title, subtitle, false, dragHandler, state, errorMessage);
-export const getHorizontalDisabledState = (browseFiles, title, subtitle, dragHandler, state, errorMessage) => baseHorizontalState(browseFiles, title, subtitle, true, dragHandler, state, errorMessage);
+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 class="horizontal-div dragging">
     <div class="icons-container">
@@ -59,9 +89,9 @@ export const getHorizontalDragState = () => html `
   </div>
 `;
 //  Vertical States
-const baseVerticalState = (browseFiles, title, subtitle, disabled, dragHandler, errorMessage) => html `
+export const getVerticalDefaultState = (browseFiles, title, subtitle, errorMessage, state) => html `
   <div>
-    <div class="vertical-default vertical-div ${disabled ? 'disable' : ''}">
+    <div class=${classMap({ 'hover-border': state === "hover", 'vertical-div': true })}>
       <slot name="uploadIcon">
         <nile-icon name="upload" size="24"></nile-icon>
       </slot>
@@ -75,12 +105,11 @@ const baseVerticalState = (browseFiles, title, subtitle, disabled, dragHandler,
       </div>
       <input
         type="file"
-        ?disabled=${disabled}
-        @change=${(e) => dragHandler.handleFiles(e)}
+        @change=${(e) => dragHandlerInstance.handleFiles(e)}
         multiple
       />
-      <slot @click=${disabled ? undefined : browseFiles} name="browseFileButton">
-        <nile-button variant="tertiary" ?disabled=${disabled}>
+      <slot @click=${browseFiles} name="browseFileButton">
+        <nile-button variant="tertiary">
           Browse File
         </nile-button>
       </slot>
@@ -93,8 +122,33 @@ const baseVerticalState = (browseFiles, title, subtitle, disabled, dragHandler,
     html ``}
   </div>
 `;
-export const getVerticalDefaultState = (browseFiles, title, subtitle, dragHandler, errorMessage) => baseVerticalState(browseFiles, title, subtitle, false, dragHandler, errorMessage);
-export const getVerticalDisabledState = (browseFiles, title, subtitle, dragHandler, errorMessage) => baseVerticalState(browseFiles, title, subtitle, true, dragHandler, errorMessage);
+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 class="vertical-div vertical-drag">
     <div class="icons-container">

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

	@@ -1 +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,MAAM,mBAAmB,GAAG,~~CAC1B~~,WAAqB,EACrB,KAAa,EACb,QAAgB,EAChB,~~QAAiB~~,~~EACjB~~,~~WAAwB,EACxB,~~KAAsB,~~EACtB~~,~~YAAoB,EACJ,~~EAAE,CAAC,IAAI,CAAA;;iBAER,QAAQ,CAAC,EAAE,cAAc,EAAE,KAAK,KAAK,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,~~SAAS,EAAE,QAAQ,EAAE,~~CAAC;;;;;;;~~kBAO3F~~,KAAK;;;iBAGN,QAAQ;;;;;;~~oBAML~~,~~QAAQ;kBACV,~~CAAC,CAAoB,EAAE,EAAE,~~GAAG~~,~~WAAW~~,CAAC,WAAW,CAAC,CAAC,CAAC~~,CAAA,CAAC,CAAC~~;;;~~qBAGrD~~,~~QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,~~WAAW~~;oDACH~~,~~QAAQ;;;;;MAKtD,~~YAAY,CAAC,CAAC;IACd,IAAI,CAAA;;gBAEM,YAAY;aACf,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,EACJ,~~EAAE,CAAC,~~mBAAmB~~,~~CAAC~~,~~WAAW,EAAE,~~KAAK,~~EAAE,~~QAAQ,~~EAAE~~,~~KAAK~~,EAAE,~~WAAW,~~EAAE,~~KAAK~~,~~EAAE~~,~~YAAY,~~CAAC,~~CAAC;AAEhH~~,~~MAAM,~~CAAC,~~MAAM,0BAA0B,GAAG,CACxC,WAAqB,EACrB,KAAa,EACb,QAAgB,EAChB,WAAwB,EACxB,KAAsB,EACtB,YAAoB,EACJ,EAAE,~~CAAC,~~mBAAmB,~~CAAC,WAAW,~~EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,~~CAAC~~,CAAC~~;~~AAE/G~~,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAmB,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;CAkB/D,CAAC;AAEF,mBAAmB;AACnB,MAAM,~~iBAAiB~~,GAAG,~~CACxB~~,WAAqB,EACrB,KAAa,EACb,QAAgB,EAChB,~~QAAiB~~,~~EACjB~~,~~WAAwB~~,~~EACxB~~,~~YAAoB,EACJ,~~EAAE,CAAC,IAAI,CAAA;;~~gDAEuB~~,QAAQ,CAAC,~~CAAC~~,~~CAAC~~,~~SAAS~~,~~CAAC~~,~~CAAC~~,~~CAAC~~,EAAE;;;;;;~~gBAMzD~~,KAAK;;;eAGN,QAAQ;;;;;~~oBAKH~~,~~QAAQ;kBACV,~~CAAC,CAAoB,EAAE,EAAE,CAAC,~~WAAW~~,CAAC,WAAW,CAAC,CAAC,CAAC;;;~~qBAGjD~~,~~QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,~~WAAW~~;oDACH~~,~~QAAQ;;;;;MAKtD,~~YAAY,CAAC,CAAC;IACd,IAAI,CAAA;;gBAEM,YAAY;aACf,CAAC,CAAC;IACT,IAAI,CAAA,EACN;;CAEH,CAAC;AAEF,MAAM,CAAC,MAAM,~~uBAAuB~~,GAAG,~~CACrC~~,WAAqB,EACrB,KAAa,EACb,QAAgB,~~EAChB~~,~~WAAwB,EACxB,YAAoB,EACJ,~~EAAE,CAAC,~~iBAAiB~~,~~CAAC~~,~~WAAW,EAAE,~~KAAK,~~EAAE,~~QAAQ,~~EAAE~~,~~KAAK~~,EAAE,~~WAAW,~~EAAE,~~YAAY,~~CAAC,CAAC~~;AAEvG~~,~~MAAM~~,CAAC,~~MAAM,wBAAwB,GAAG,CACtC,WAAqB,EACrB,KAAa,EACb,QAAgB,EAChB,WAAwB,EACxB,YAAoB,EACJ,EAAE,~~CAAC,~~iBAAiB,~~CAAC,WAAW,~~EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,~~CAAC~~,CAAC~~;~~AAGtG~~,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\~~nconst~~ ~~baseHorizontalState~~ = (\n browseFiles: Function,\n title: string,\n subtitle: string,\n ~~disabled~~: ~~boolean~~,\n ~~dragHandler: DragHandler,\n~~ state: FileUploadState~~,\n errorMessage: string~~\n): TemplateResult => html`\n <div>\n <div class=${classMap({ 'hover-border': state === \"hover\", 'horizontal-div': true, ~~'disable': disabled~~ })}>\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 ~~?disabled=${disabled}\n~~ @change=${(e: Event \| DragEvent) => ~~{ dragHandler~~.handleFiles(e) }}\n multiple\n />\n <slot @click=${~~disabled ? undefined :~~ browseFiles} name=\"browseFileButton\">\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=\"red\"></nile-icon>\n <span>${errorMessage}</span>\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): ~~TemplateResult~~ => ~~baseHorizontalState(browseFiles, title, subtitle, false, dragHandler, state, errorMessage);\~~n~~\nexport~~ ~~const getHorizontalDisabledState = (~~\n ~~browseFiles:~~ ~~Function,\~~n title: ~~string,\~~n subtitle~~: string,\~~n ~~dragHandler: DragHandler,\~~n ~~state: FileUploadState,\~~n ~~errorMessage: string~~\n): ~~TemplateResult~~ => ~~baseHorizontalState~~(browseFiles, ~~title,~~ ~~subtitle,~~ ~~true, dragHandler, state, errorMessage);\~~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\~~nconst~~ ~~baseVerticalState~~ = (\n browseFiles: Function,\n title: string,\n subtitle: string,\n ~~disabled~~: ~~boolean~~,\n ~~dragHandler~~: ~~DragHandler,\n errorMessage: string~~\n): TemplateResult => html`\n <div>\n <div class~~=\"vertical-default~~ ~~vertical~~-~~div~~ ~~${disabled~~ ? '~~disable~~' : ''}\">\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 ~~?disabled=${disabled}\n~~ @change=${(e: Event \| DragEvent) => ~~dragHandler~~.handleFiles(e)}\n multiple\n />\n <slot @click=${~~disabled ? undefined :~~ browseFiles} name=\"browseFileButton\">\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=\"red\"></nile-icon>\n <span>${errorMessage}</span>\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): TemplateResult => ~~baseVerticalState(browseFiles,~~ ~~title,~~ ~~subtitle,~~ ~~false,~~ ~~dragHandler,~~ ~~errorMessage);\~~n~~\nexport~~ ~~const getVerticalDisabledState = (~~\n ~~browseFiles:~~ ~~Function,\~~n title: ~~string,\~~n subtitle~~: string,\~~n ~~dragHandler: DragHandler,\~~n ~~errorMessage: string~~\n): ~~TemplateResult~~ => ~~baseVerticalState~~(browseFiles, ~~title,~~ ~~subtitle,~~ ~~true, dragHandler, errorMessage);\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`;"]}
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`;"]}

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

@@ -10,7 +10,7 @@ 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!"
@@ -20,7 +20,6 @@ export declare enum FileUploadEvent {
     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,6 +30,6 @@ export declare enum FileUploadEvent {
 }
 export declare enum FileUploadDefaults {
     TITLE = "Drag and drop to upload",
-    SUBTITLE = "Please upload a file",
+    SUBTITLE = "PNG, JPG or SVG (upto 1MB) | 1:1 ratio",
     ERROR_MESSAGE = "Invalid File Format."
 }

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

@@ -13,7 +13,7 @@ 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!";
@@ -24,7 +24,6 @@ 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";
@@ -36,7 +35,7 @@ export var FileUploadEvent;
 export var FileUploadDefaults;
 (function (FileUploadDefaults) {
     FileUploadDefaults["TITLE"] = "Drag and drop to upload";
-    FileUploadDefaults["SUBTITLE"] = "Please upload a file";
+    FileUploadDefaults["SUBTITLE"] = "PNG, JPG or SVG (upto 1MB) | 1:1 ratio";
     FileUploadDefaults["ERROR_MESSAGE"] = "Invalid File Format.";
 })(FileUploadDefaults || (FileUploadDefaults = {}));
 ;

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

	@@ -1 +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,~~wFAAqE~~,CAAA;~~IACrE~~,sEAAmD,CAAA;IACnD,8EAA2D,CAAA;IAC3D,kEAA+C,CAAA;AACjD,CAAC,EANW,eAAe,KAAf,eAAe,QAM1B;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,kBAIX;AAJD,WAAY,kBAAkB;IAC5B,uDAAiC,CAAA;IACjC,~~uDAAiC~~,CAAA;~~IACjC~~,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_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}\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 = '~~Please~~ ~~upload~~ a ~~file~~',\n ERROR_MESSAGE = 'Invalid File Format.',\n};"]}
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};"]}

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

@@ -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;
 }

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

@@ -1,14 +1,17 @@
-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) {
+    setValuesInDragHandler(state, size, uploadedFiles) {
         this.currentState = state;
+        this.size = size;
+        this.uploadedFiles = uploadedFiles;
     }
     onFileDrop(callback) {
         this.fileDropCallback = callback;
@@ -23,60 +26,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;
-        preventDefaultAndStopPropagation(e);
+        e.preventDefault();
+        e.stopPropagation();
         this.setState(FileUploadState.DEFAULT);
     }
     preventDragOver(e) {
-        preventDefaultAndStopPropagation(e);
+        e.preventDefault();
     }
     preventDrop(e) {
-        preventDefaultAndStopPropagation(e);
+        e.preventDefault();
+        e.stopPropagation();
     }
-    handleFiles(e) {
-        preventDefaultAndStopPropagation(e);
+    handleFiles(event) {
         if (this.currentState === FileUploadState.DISABLED)
             return;
+        event.preventDefault?.();
         let files = null;
-        if ('dataTransfer' in e && e.dataTransfer) {
-            files = e.dataTransfer.files;
+        if ('dataTransfer' in event && event.dataTransfer) {
+            files = event.dataTransfer.files;
         }
-        if (!files && e.target instanceof HTMLInputElement) {
-            files = e.target.files;
+        if (!files && event.target instanceof HTMLInputElement) {
+            files = event.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