@aquera/nile-elements 1.0.1-beta-1.4 → 1.0.1-beta-1.6
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.
- package/README.md +31 -0
- package/demo/index.html +8 -15
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.js +689 -620
- package/dist/internal/resizable-table-helper.cjs.js +1 -1
- package/dist/internal/resizable-table-helper.cjs.js.map +1 -1
- package/dist/internal/resizable-table-helper.esm.js +1 -1
- package/dist/nile-code-editor/extensionSetup.cjs.js +5 -5
- package/dist/nile-code-editor/extensionSetup.cjs.js.map +1 -1
- package/dist/nile-code-editor/extensionSetup.esm.js +1 -1
- package/dist/nile-code-editor/nile-code-editor.cjs.js +2 -2
- package/dist/nile-code-editor/nile-code-editor.cjs.js.map +1 -1
- package/dist/nile-code-editor/nile-code-editor.esm.js +3 -3
- package/dist/nile-code-editor/theme.cjs.js +1 -1
- package/dist/nile-code-editor/theme.cjs.js.map +1 -1
- package/dist/nile-code-editor/theme.esm.js +1 -1
- package/dist/nile-file-preview/nile-file-preview.cjs.js +1 -1
- package/dist/nile-file-preview/nile-file-preview.cjs.js.map +1 -1
- package/dist/nile-file-preview/nile-file-preview.css.cjs.js +1 -1
- package/dist/nile-file-preview/nile-file-preview.css.cjs.js.map +1 -1
- package/dist/nile-file-preview/nile-file-preview.css.esm.js +203 -184
- package/dist/nile-file-preview/nile-file-preview.esm.js +1 -3
- package/dist/nile-file-preview/nile-file-preview.template.cjs.js +1 -1
- package/dist/nile-file-preview/nile-file-preview.template.cjs.js.map +1 -1
- package/dist/nile-file-preview/nile-file-preview.template.esm.js +66 -77
- package/dist/nile-file-preview/types/nile-file-preview.enums.cjs.js +1 -1
- package/dist/nile-file-preview/types/nile-file-preview.enums.cjs.js.map +1 -1
- package/dist/nile-file-preview/types/nile-file-preview.enums.esm.js +1 -1
- package/dist/nile-file-preview/utils/index.cjs.js +1 -1
- package/dist/nile-file-preview/utils/index.esm.js +1 -1
- package/dist/nile-file-preview/utils/nile-file-preview.util.cjs.js +1 -1
- package/dist/nile-file-preview/utils/nile-file-preview.util.cjs.js.map +1 -1
- package/dist/nile-file-preview/utils/nile-file-preview.util.esm.js +1 -1
- package/dist/nile-file-upload/index.cjs.js +1 -1
- package/dist/nile-file-upload/index.esm.js +1 -1
- package/dist/nile-file-upload/nile-file-upload.cjs.js +1 -1
- package/dist/nile-file-upload/nile-file-upload.cjs.js.map +1 -1
- package/dist/nile-file-upload/nile-file-upload.css.cjs.js +1 -1
- package/dist/nile-file-upload/nile-file-upload.css.cjs.js.map +1 -1
- package/dist/nile-file-upload/nile-file-upload.css.esm.js +142 -89
- package/dist/nile-file-upload/nile-file-upload.esm.js +2 -2
- package/dist/nile-file-upload/nile-file-upload.template.cjs.js +3 -3
- package/dist/nile-file-upload/nile-file-upload.template.cjs.js.map +1 -1
- package/dist/nile-file-upload/nile-file-upload.template.esm.js +50 -108
- package/dist/nile-file-upload/nile-file-upload.test.cjs.js +1 -1
- package/dist/nile-file-upload/nile-file-upload.test.esm.js +1 -1
- package/dist/nile-file-upload/types/file-upload.enums.cjs.js +1 -1
- package/dist/nile-file-upload/types/file-upload.enums.cjs.js.map +1 -1
- package/dist/nile-file-upload/types/file-upload.enums.esm.js +1 -1
- package/dist/nile-file-upload/utils/drag-drop.util.cjs.js +1 -1
- package/dist/nile-file-upload/utils/drag-drop.util.cjs.js.map +1 -1
- package/dist/nile-file-upload/utils/drag-drop.util.esm.js +1 -1
- package/dist/nile-file-upload/utils/file-validation.util.cjs.js +2 -1
- package/dist/nile-file-upload/utils/file-validation.util.cjs.js.map +1 -1
- package/dist/nile-file-upload/utils/file-validation.util.esm.js +1 -1
- package/dist/nile-input/nile-input.css.cjs.js +1 -1
- package/dist/nile-input/nile-input.css.cjs.js.map +1 -1
- package/dist/nile-input/nile-input.css.esm.js +0 -1
- package/dist/nile-option/nile-option.cjs.js +1 -1
- package/dist/nile-option/nile-option.cjs.js.map +1 -1
- package/dist/nile-option/nile-option.esm.js +3 -3
- package/dist/nile-option-group/index.cjs.js +2 -0
- package/dist/nile-option-group/index.cjs.js.map +1 -0
- package/dist/nile-option-group/index.esm.js +1 -0
- package/dist/nile-option-group/nile-option-group.cjs.js +2 -0
- package/dist/nile-option-group/nile-option-group.cjs.js.map +1 -0
- package/dist/nile-option-group/nile-option-group.css.cjs.js +2 -0
- package/dist/nile-option-group/nile-option-group.css.cjs.js.map +1 -0
- package/dist/nile-option-group/nile-option-group.css.esm.js +46 -0
- package/dist/nile-option-group/nile-option-group.esm.js +14 -0
- package/dist/nile-option-group/nile-option-group.interface.cjs.js +2 -0
- package/dist/nile-option-group/nile-option-group.interface.cjs.js.map +1 -0
- package/dist/nile-option-group/nile-option-group.interface.esm.js +1 -0
- package/dist/nile-pagination/nile-pagination.cjs.js +1 -1
- package/dist/nile-pagination/nile-pagination.cjs.js.map +1 -1
- package/dist/nile-pagination/nile-pagination.css.cjs.js +1 -1
- package/dist/nile-pagination/nile-pagination.css.cjs.js.map +1 -1
- package/dist/nile-pagination/nile-pagination.css.esm.js +9 -2
- package/dist/nile-pagination/nile-pagination.esm.js +3 -1
- package/dist/nile-select/nile-select.cjs.js +1 -1
- package/dist/nile-select/nile-select.cjs.js.map +1 -1
- package/dist/nile-select/nile-select.esm.js +2 -2
- package/dist/nile-select/nile-select.interface.cjs.js +2 -0
- package/dist/nile-select/nile-select.interface.cjs.js.map +1 -0
- package/dist/nile-select/nile-select.interface.esm.js +1 -0
- package/dist/nile-table-body/nile-table-body.cjs.js +1 -1
- package/dist/nile-table-body/nile-table-body.cjs.js.map +1 -1
- package/dist/nile-table-body/nile-table-body.esm.js +2 -1
- package/dist/nile-table-cell-item/nile-table-cell-item.cjs.js +1 -1
- package/dist/nile-table-cell-item/nile-table-cell-item.cjs.js.map +1 -1
- package/dist/nile-table-cell-item/nile-table-cell-item.esm.js +1 -1
- package/dist/nile-table-header-item/nile-table-header-item.cjs.js +1 -1
- package/dist/nile-table-header-item/nile-table-header-item.cjs.js.map +1 -1
- package/dist/nile-table-header-item/nile-table-header-item.esm.js +2 -2
- package/dist/nile-virtual-select/renderer.cjs.js +1 -1
- package/dist/nile-virtual-select/renderer.cjs.js.map +1 -1
- package/dist/nile-virtual-select/renderer.esm.js +13 -12
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.js +1 -0
- package/dist/src/index.js.map +1 -1
- package/dist/src/internal/resizable-table-helper.d.ts +5 -0
- package/dist/src/internal/resizable-table-helper.js +27 -4
- package/dist/src/internal/resizable-table-helper.js.map +1 -1
- package/dist/src/nile-code-editor/nile-code-editor.d.ts +5 -0
- package/dist/src/nile-code-editor/nile-code-editor.js +44 -7
- package/dist/src/nile-code-editor/nile-code-editor.js.map +1 -1
- package/dist/src/nile-code-editor/theme.d.ts +15 -0
- package/dist/src/nile-code-editor/theme.js +17 -2
- package/dist/src/nile-code-editor/theme.js.map +1 -1
- package/dist/src/nile-file-preview/nile-file-preview.css.js +201 -182
- package/dist/src/nile-file-preview/nile-file-preview.css.js.map +1 -1
- package/dist/src/nile-file-preview/nile-file-preview.d.ts +6 -2
- package/dist/src/nile-file-preview/nile-file-preview.js +49 -20
- package/dist/src/nile-file-preview/nile-file-preview.js.map +1 -1
- package/dist/src/nile-file-preview/nile-file-preview.template.d.ts +3 -2
- package/dist/src/nile-file-preview/nile-file-preview.template.js +58 -62
- package/dist/src/nile-file-preview/nile-file-preview.template.js.map +1 -1
- package/dist/src/nile-file-preview/types/nile-file-preview.enums.d.ts +4 -3
- package/dist/src/nile-file-preview/types/nile-file-preview.enums.js +3 -2
- package/dist/src/nile-file-preview/types/nile-file-preview.enums.js.map +1 -1
- package/dist/src/nile-file-preview/utils/nile-file-preview.util.d.ts +4 -0
- package/dist/src/nile-file-preview/utils/nile-file-preview.util.js +25 -0
- package/dist/src/nile-file-preview/utils/nile-file-preview.util.js.map +1 -1
- package/dist/src/nile-file-upload/nile-file-upload.css.js +140 -87
- package/dist/src/nile-file-upload/nile-file-upload.css.js.map +1 -1
- package/dist/src/nile-file-upload/nile-file-upload.d.ts +4 -1
- package/dist/src/nile-file-upload/nile-file-upload.js +30 -20
- package/dist/src/nile-file-upload/nile-file-upload.js.map +1 -1
- package/dist/src/nile-file-upload/nile-file-upload.template.d.ts +7 -5
- package/dist/src/nile-file-upload/nile-file-upload.template.js +69 -115
- package/dist/src/nile-file-upload/nile-file-upload.template.js.map +1 -1
- package/dist/src/nile-file-upload/types/file-upload.enums.d.ts +11 -4
- package/dist/src/nile-file-upload/types/file-upload.enums.js +8 -1
- package/dist/src/nile-file-upload/types/file-upload.enums.js.map +1 -1
- package/dist/src/nile-file-upload/utils/drag-drop.util.d.ts +2 -4
- package/dist/src/nile-file-upload/utils/drag-drop.util.js +18 -21
- package/dist/src/nile-file-upload/utils/drag-drop.util.js.map +1 -1
- package/dist/src/nile-file-upload/utils/file-validation.util.d.ts +3 -1
- package/dist/src/nile-file-upload/utils/file-validation.util.js +82 -32
- package/dist/src/nile-file-upload/utils/file-validation.util.js.map +1 -1
- package/dist/src/nile-input/nile-input.css.js +0 -1
- package/dist/src/nile-input/nile-input.css.js.map +1 -1
- package/dist/src/nile-option/nile-option.d.ts +1 -0
- package/dist/src/nile-option/nile-option.js +6 -1
- package/dist/src/nile-option/nile-option.js.map +1 -1
- package/dist/src/nile-option-group/index.d.ts +1 -0
- package/dist/src/nile-option-group/index.js +2 -0
- package/dist/src/nile-option-group/index.js.map +1 -0
- package/dist/src/nile-option-group/nile-option-group.css.d.ts +12 -0
- package/dist/src/nile-option-group/nile-option-group.css.js +58 -0
- package/dist/src/nile-option-group/nile-option-group.css.js.map +1 -0
- package/dist/src/nile-option-group/nile-option-group.d.ts +23 -0
- package/dist/src/nile-option-group/nile-option-group.interface.d.ts +22 -0
- package/dist/src/nile-option-group/nile-option-group.interface.js +2 -0
- package/dist/src/nile-option-group/nile-option-group.interface.js.map +1 -0
- package/dist/src/nile-option-group/nile-option-group.js +76 -0
- package/dist/src/nile-option-group/nile-option-group.js.map +1 -0
- package/dist/src/nile-pagination/nile-pagination.css.js +7 -0
- package/dist/src/nile-pagination/nile-pagination.css.js.map +1 -1
- package/dist/src/nile-pagination/nile-pagination.js +3 -1
- package/dist/src/nile-pagination/nile-pagination.js.map +1 -1
- package/dist/src/nile-select/nile-select.d.ts +6 -0
- package/dist/src/nile-select/nile-select.interface.d.ts +5 -0
- package/dist/src/nile-select/nile-select.interface.js +2 -0
- package/dist/src/nile-select/nile-select.interface.js.map +1 -0
- package/dist/src/nile-select/nile-select.js +59 -1
- package/dist/src/nile-select/nile-select.js.map +1 -1
- package/dist/src/nile-table-body/nile-table-body.d.ts +1 -0
- package/dist/src/nile-table-body/nile-table-body.js +4 -0
- package/dist/src/nile-table-body/nile-table-body.js.map +1 -1
- package/dist/src/nile-table-cell-item/nile-table-cell-item.d.ts +2 -1
- package/dist/src/nile-table-cell-item/nile-table-cell-item.js +12 -1
- package/dist/src/nile-table-cell-item/nile-table-cell-item.js.map +1 -1
- package/dist/src/nile-table-header-item/nile-table-header-item.d.ts +2 -1
- package/dist/src/nile-table-header-item/nile-table-header-item.js +12 -1
- package/dist/src/nile-table-header-item/nile-table-header-item.js.map +1 -1
- package/dist/src/nile-virtual-select/renderer.js +3 -0
- package/dist/src/nile-virtual-select/renderer.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -2
- package/src/index.ts +1 -1
- package/src/internal/resizable-table-helper.ts +31 -8
- package/src/nile-code-editor/nile-code-editor.ts +49 -9
- package/src/nile-code-editor/theme.ts +19 -3
- package/src/nile-file-preview/nile-file-preview.css.ts +202 -183
- package/src/nile-file-preview/nile-file-preview.template.ts +66 -63
- package/src/nile-file-preview/nile-file-preview.ts +54 -22
- package/src/nile-file-preview/types/nile-file-preview.enums.ts +4 -3
- package/src/nile-file-preview/utils/nile-file-preview.util.ts +25 -0
- package/src/nile-file-upload/nile-file-upload.css.ts +141 -88
- package/src/nile-file-upload/nile-file-upload.template.ts +133 -121
- package/src/nile-file-upload/nile-file-upload.ts +30 -18
- package/src/nile-file-upload/types/file-upload.enums.ts +9 -2
- package/src/nile-file-upload/utils/drag-drop.util.ts +25 -25
- package/src/nile-file-upload/utils/file-validation.util.ts +98 -45
- package/src/nile-input/nile-input.css.ts +0 -1
- package/src/nile-option/nile-option.ts +4 -1
- package/src/nile-option-group/index.ts +1 -0
- package/src/nile-option-group/nile-option-group.css.ts +60 -0
- package/src/nile-option-group/nile-option-group.interface.ts +25 -0
- package/src/nile-option-group/nile-option-group.ts +84 -0
- package/src/nile-pagination/nile-pagination.css.ts +7 -0
- package/src/nile-pagination/nile-pagination.ts +3 -1
- package/src/nile-select/nile-select.interface.ts +5 -0
- package/src/nile-select/nile-select.ts +74 -2
- package/src/nile-table-body/nile-table-body.ts +2 -0
- package/src/nile-table-cell-item/nile-table-cell-item.ts +15 -1
- package/src/nile-table-header-item/nile-table-header-item.ts +15 -1
- package/src/nile-virtual-select/renderer.ts +3 -0
- package/vscode-html-custom-data.json +49 -13
@@ -8,13 +8,12 @@ import { __decorate } from "tslib";
|
|
8
8
|
import { styles } from './nile-file-upload.css';
|
9
9
|
import NileElement from '../internal/nile-element';
|
10
10
|
import { DragHandler } from './utils/drag-drop.util';
|
11
|
-
import { getDragHandler } from './nile-file-upload.template';
|
12
11
|
import { FileUploadDefaults } from './types/file-upload.enums';
|
13
12
|
import { html } from 'lit';
|
14
13
|
import { customElement, property, query } from 'lit/decorators.js';
|
15
|
-
import { FileUploadState, FileUploadVariant,
|
14
|
+
import { FileUploadState, FileUploadVariant, FileUploadEvent } from './types/file-upload.enums';
|
16
15
|
import { setUpDragHandler, addGlobalListeners, addInternalListeners, uploadFiles } from './utils/file-validation.util';
|
17
|
-
import { getHorizontalDefaultState,
|
16
|
+
import { getHorizontalDefaultState, getHorizontalDragState, getVerticalDefaultState, getVerticalDisabledState, getVerticalDragState, getHorizontalErrorState, getVerticalErrorState, getHorizontalDisabledState } from './nile-file-upload.template';
|
18
17
|
/**
|
19
18
|
* Nile file-upload component.
|
20
19
|
*
|
@@ -24,11 +23,12 @@ import { getHorizontalDefaultState, getHorizontalDisabledtState, getHorizontalDr
|
|
24
23
|
let NileFileUpload = class NileFileUpload extends NileElement {
|
25
24
|
constructor() {
|
26
25
|
super(...arguments);
|
27
|
-
this.size =
|
26
|
+
this.size = "10MB";
|
28
27
|
this.error = false;
|
29
28
|
this.errorMessage = "";
|
30
|
-
this.allowMultiple =
|
29
|
+
this.allowMultiple = false;
|
31
30
|
this.allowDuplicates = false;
|
31
|
+
this.allowedTypes = [];
|
32
32
|
this.uploadedFiles = [];
|
33
33
|
this.title = FileUploadDefaults.TITLE;
|
34
34
|
this.subtitle = FileUploadDefaults.SUBTITLE;
|
@@ -37,6 +37,8 @@ let NileFileUpload = class NileFileUpload extends NileElement {
|
|
37
37
|
this.fileUploadUrl = "";
|
38
38
|
this.autoUpload = true;
|
39
39
|
this.uploadRequests = new Map();
|
40
|
+
this.fileSizeExceededFilesNumber = 0;
|
41
|
+
this.isStringTruncated = false;
|
40
42
|
this.setState = (newState) => {
|
41
43
|
this.state = newState;
|
42
44
|
};
|
@@ -55,7 +57,6 @@ let NileFileUpload = class NileFileUpload extends NileElement {
|
|
55
57
|
firstUpdated(changedProps) {
|
56
58
|
super.firstUpdated(changedProps);
|
57
59
|
this.dragHandler = new DragHandler();
|
58
|
-
getDragHandler(this.dragHandler);
|
59
60
|
setUpDragHandler(this, this.dragHandler);
|
60
61
|
addInternalListeners(this, this.dragHandler, this.uploadRequests);
|
61
62
|
addGlobalListeners(this.dragHandler);
|
@@ -63,17 +64,19 @@ let NileFileUpload = class NileFileUpload extends NileElement {
|
|
63
64
|
updated(changedProps) {
|
64
65
|
super.updated(changedProps);
|
65
66
|
if (changedProps.has('uploadedFiles')) {
|
66
|
-
if (this.
|
67
|
-
this
|
68
|
-
if (!this.fileUploadUrl) {
|
69
|
-
this.errorMessage = FileUploadError.UPLOAD_URL_REQUIRED;
|
70
|
-
return;
|
67
|
+
if (this.fileUploadUrl && this.autoUpload) {
|
68
|
+
uploadFiles(this);
|
71
69
|
}
|
72
|
-
uploadFiles(this);
|
73
70
|
this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });
|
74
71
|
}
|
75
72
|
else if (changedProps.has('state')) {
|
76
|
-
this.dragHandler.setValuesInDragHandler(this.state
|
73
|
+
this.dragHandler.setValuesInDragHandler(this.state);
|
74
|
+
}
|
75
|
+
if (changedProps.has('autoUpload') && this.autoUpload) {
|
76
|
+
if (this.fileUploadUrl && this.autoUpload) {
|
77
|
+
uploadFiles(this);
|
78
|
+
}
|
79
|
+
this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });
|
77
80
|
}
|
78
81
|
}
|
79
82
|
browseFiles() {
|
@@ -94,25 +97,29 @@ let NileFileUpload = class NileFileUpload extends NileElement {
|
|
94
97
|
getHorizontalState() {
|
95
98
|
switch (this.state) {
|
96
99
|
case FileUploadState.DEFAULT:
|
97
|
-
return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.
|
100
|
+
return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);
|
98
101
|
case FileUploadState.DISABLED:
|
99
|
-
return
|
102
|
+
return getHorizontalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);
|
100
103
|
case FileUploadState.DRAG:
|
101
104
|
return getHorizontalDragState();
|
105
|
+
case FileUploadState.ERROR:
|
106
|
+
return getHorizontalErrorState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);
|
102
107
|
default:
|
103
|
-
return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.
|
108
|
+
return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);
|
104
109
|
}
|
105
110
|
}
|
106
111
|
getVerticalState() {
|
107
112
|
switch (this.state) {
|
108
113
|
case FileUploadState.DEFAULT:
|
109
|
-
return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.
|
114
|
+
return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);
|
110
115
|
case FileUploadState.DISABLED:
|
111
|
-
return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle);
|
116
|
+
return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);
|
112
117
|
case FileUploadState.DRAG:
|
113
118
|
return getVerticalDragState();
|
119
|
+
case FileUploadState.ERROR:
|
120
|
+
return getVerticalErrorState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);
|
114
121
|
default:
|
115
|
-
return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.
|
122
|
+
return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);
|
116
123
|
}
|
117
124
|
}
|
118
125
|
disconnectedCallback() {
|
@@ -120,7 +127,7 @@ let NileFileUpload = class NileFileUpload extends NileElement {
|
|
120
127
|
}
|
121
128
|
};
|
122
129
|
__decorate([
|
123
|
-
property({ type:
|
130
|
+
property({ type: String })
|
124
131
|
], NileFileUpload.prototype, "size", void 0);
|
125
132
|
__decorate([
|
126
133
|
property({ type: Boolean })
|
@@ -134,6 +141,9 @@ __decorate([
|
|
134
141
|
__decorate([
|
135
142
|
property({ type: Boolean })
|
136
143
|
], NileFileUpload.prototype, "allowDuplicates", void 0);
|
144
|
+
__decorate([
|
145
|
+
property({ type: Array })
|
146
|
+
], NileFileUpload.prototype, "allowedTypes", void 0);
|
137
147
|
__decorate([
|
138
148
|
property({ type: Array })
|
139
149
|
], NileFileUpload.prototype, "uploadedFiles", void 0);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-file-upload.js","sourceRoot":"","sources":["../../../src/nile-file-upload/nile-file-upload.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { styles } from './nile-file-upload.css';\nimport { ChangedPropsInterface } from './types/file-upload.type'\nimport NileElement from '../internal/nile-element';\nimport { DragHandler } from './utils/drag-drop.util';\nimport { 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"]}
|
1
|
+
{"version":3,"file":"nile-file-upload.js","sourceRoot":"","sources":["../../../src/nile-file-upload/nile-file-upload.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { styles } from './nile-file-upload.css';\nimport { ChangedPropsInterface } from './types/file-upload.type'\nimport NileElement from '../internal/nile-element';\nimport { DragHandler } from './utils/drag-drop.util';\nimport { FileUploadDefaults } from './types/file-upload.enums';\nimport { LitElement, html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { FileUploadState, FileUploadVariant, FileUploadError, FileUploadEvent } from './types/file-upload.enums';\nimport { setUpDragHandler, addGlobalListeners, addInternalListeners, uploadFiles, cancelFileUpload } from './utils/file-validation.util';\nimport {\n getHorizontalDefaultState,\n getHorizontalDragState,\n getVerticalDefaultState,\n getVerticalDisabledState,\n getVerticalDragState,\n getHorizontalErrorState,\n getVerticalErrorState,\n getHorizontalDisabledState\n} from './nile-file-upload.template';\n\n/**\n * Nile file-upload component.\n *\n * @tag nile-file-upload\n *\n */\n@customElement('nile-file-upload')\nexport class NileFileUpload extends NileElement {\n /**\n * The styles for nile-file-upload\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: String }) size: string = \"10MB\";\n @property({ type: Boolean}) error: boolean = false;\n @property({ type: String }) errorMessage: string = \"\";\n @property({ type: Boolean}) allowMultiple: boolean = false;\n @property({ type: Boolean}) allowDuplicates: boolean = false;\n @property({ type: Array }) allowedTypes: string[] = [];\n @property({ type: Array }) uploadedFiles: File[] = [];\n @property({ type: String }) title: string = FileUploadDefaults.TITLE;\n @property({ type: String }) subtitle: string = FileUploadDefaults.SUBTITLE;\n @property({ type: String }) state: FileUploadState = FileUploadState.DEFAULT; \n @property({ type: String }) variant: FileUploadVariant = FileUploadVariant.HORIZONTAL;\n @property({ type: String }) fileUploadUrl: string = \"\";\n @property({ type: Boolean}) autoUpload: boolean = true;\n @query('input') input!: HTMLInputElement;\n public uploadRequests = new Map<File, XMLHttpRequest>();\n public fileSizeExceededFilesNumber: number = 0;\n public isStringTruncated: boolean = false;\n \n private dragHandler!: DragHandler;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.emit(FileUploadEvent.NILE_INIT);\n }\n\n firstUpdated(changedProps: ChangedPropsInterface): void {\n super.firstUpdated(changedProps);\n\n this.dragHandler = new DragHandler();\n setUpDragHandler(this, this.dragHandler);\n addInternalListeners(this, this.dragHandler, this.uploadRequests);\n addGlobalListeners(this.dragHandler);\n }\n\n updated(changedProps: ChangedPropsInterface): void {\n super.updated(changedProps);\n\n if (changedProps.has('uploadedFiles')) {\n if(this.fileUploadUrl && this.autoUpload) {\n uploadFiles(this);\n }\n this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });\n } else if (changedProps.has('state')) {\n this.dragHandler.setValuesInDragHandler(this.state);\n }\n\n if(changedProps.has('autoUpload') && this.autoUpload) {\n if(this.fileUploadUrl && this.autoUpload) {\n uploadFiles(this);\n }\n this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });\n }\n }\n\n private browseFiles(): void {\n this.emit(FileUploadEvent.NILE_BROWSE);\n this.errorMessage = \"\";\n this.input.click();\n }\n\n public setState = (newState: FileUploadState): void => {\n this.state = newState;\n }\n\n render(): TemplateResult {\n return html`\n ${this.getState()}\n `;\n }\n\n private getState(): TemplateResult {\n return this.variant === FileUploadVariant.HORIZONTAL\n ? this.getHorizontalState()\n : this.getVerticalState();\n }\n\n private getHorizontalState(): TemplateResult {\n switch(this.state) {\n case FileUploadState.DEFAULT:\n return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);\n\n case FileUploadState.DISABLED:\n return getHorizontalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);\n\n case FileUploadState.DRAG:\n return getHorizontalDragState();\n\n case FileUploadState.ERROR:\n return getHorizontalErrorState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);\n\n default:\n return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);\n }\n }\n\n private getVerticalState(): TemplateResult {\n switch(this.state) {\n case FileUploadState.DEFAULT:\n return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);\n\n case FileUploadState.DISABLED:\n return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);\n\n case FileUploadState.DRAG:\n return getVerticalDragState();\n\n case FileUploadState.ERROR:\n return getVerticalErrorState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);\n\n default:\n return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);\n }\n }\n\n disconnectedCallback(): void {\n this.emit(FileUploadEvent.NILE_DESTROY);\n }\n}\n"]}
|
@@ -2,10 +2,12 @@ import { TemplateResult } from 'lit';
|
|
2
2
|
import './nile-file-upload.css';
|
3
3
|
import { DragHandler } from './utils/drag-drop.util';
|
4
4
|
import { FileUploadState } from './types/file-upload.enums';
|
5
|
-
|
6
|
-
export declare const getHorizontalDefaultState: (browseFiles: Function, title: string, subtitle: string, errorMessage: string,
|
7
|
-
export declare const
|
5
|
+
import { NileFileUpload } from './nile-file-upload';
|
6
|
+
export declare const getHorizontalDefaultState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, state: FileUploadState, errorMessage: string, allowedTypes: string[], nileFileUpload: NileFileUpload) => TemplateResult;
|
7
|
+
export declare const getHorizontalDisabledState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, state: FileUploadState, errorMessage: string, allowedTypes: string[], nileFileUpload: NileFileUpload) => TemplateResult;
|
8
|
+
export declare const getHorizontalErrorState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, state: FileUploadState, errorMessage: string, allowedTypes: string[], nileFileUpload: NileFileUpload) => TemplateResult;
|
8
9
|
export declare const getHorizontalDragState: () => TemplateResult;
|
9
|
-
export declare const getVerticalDefaultState: (browseFiles: Function, title: string, subtitle: string, errorMessage: string,
|
10
|
-
export declare const getVerticalDisabledState: (browseFiles: Function, title: string, subtitle: string) => TemplateResult;
|
10
|
+
export declare const getVerticalDefaultState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, errorMessage: string, allowedTypes: string[], nileFileUpload: NileFileUpload) => TemplateResult;
|
11
|
+
export declare const getVerticalDisabledState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, errorMessage: string, allowedTypes: string[], nileFileUpload: NileFileUpload) => TemplateResult;
|
12
|
+
export declare const getVerticalErrorState: (browseFiles: Function, title: string, subtitle: string, dragHandler: DragHandler, errorMessage: string, allowedTypes: string[], nileFileUpload: NileFileUpload) => TemplateResult;
|
11
13
|
export declare const getVerticalDragState: () => TemplateResult;
|
@@ -1,175 +1,129 @@
|
|
1
1
|
import { html } from 'lit';
|
2
2
|
import './nile-file-upload.css';
|
3
3
|
import { classMap } from 'lit-html/directives/class-map.js';
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
<div>
|
10
|
-
<div class=${classMap({ 'hover-border': state === "hover", 'horizontal-div': true })}>
|
11
|
-
<div class="inner-div">
|
12
|
-
<slot name="
|
13
|
-
<nile-icon name="
|
4
|
+
import { FileUploadDefaults, FileUploadState } from './types/file-upload.enums';
|
5
|
+
import { truncateString } from './utils/file-validation.util';
|
6
|
+
const baseHorizontalState = (browseFiles, title, subtitle, disabled, dragHandler, state, errorMessage, allowedTypes, nileFileUpload) => {
|
7
|
+
truncateString(nileFileUpload);
|
8
|
+
return html `
|
9
|
+
<div class="wrapper" part="horizontal-wrapper">
|
10
|
+
<div part="horizontal-div" class=${classMap({ 'hover-border': state === "hover", 'horizontal-div': true, 'disable': disabled })}>
|
11
|
+
<div part="inner-div" class="inner-div">
|
12
|
+
<slot class="upload-icon-slot" name="upload-icon">
|
13
|
+
<nile-icon name="upload" size="24"></nile-icon>
|
14
14
|
</slot>
|
15
|
-
<div class="content">
|
16
|
-
<
|
17
|
-
|
18
|
-
</slot>
|
19
|
-
<slot name="subtitle">
|
20
|
-
<p>${subtitle}</p>
|
21
|
-
</slot>
|
15
|
+
<div part="content" class="content">
|
16
|
+
<div class="title">${title}</div>
|
17
|
+
<div class="subtitle">${subtitle}</div>
|
22
18
|
</div>
|
23
19
|
</div>
|
24
20
|
<input
|
25
21
|
type="file"
|
26
|
-
|
22
|
+
?disabled=${disabled}
|
23
|
+
@change=${(e) => { dragHandler.handleFiles(e); }}
|
27
24
|
multiple
|
25
|
+
accept=${allowedTypes.join(',')}
|
28
26
|
/>
|
29
|
-
<slot @click=${browseFiles} name="
|
30
|
-
<nile-button variant="tertiary">
|
27
|
+
<slot class="browse-file-button" @click=${disabled ? undefined : browseFiles} name="browse-file-button">
|
28
|
+
<nile-button variant="tertiary" ?disabled=${disabled}>
|
31
29
|
Browse File
|
32
30
|
</nile-button>
|
33
31
|
</slot>
|
34
32
|
</div>
|
35
|
-
${errorMessage ?
|
36
|
-
|
37
|
-
<nile-icon name="
|
38
|
-
|
33
|
+
${errorMessage || nileFileUpload.state === FileUploadState.ERROR ?
|
34
|
+
html `<div class="upload-error">
|
35
|
+
<nile-icon name="warning" size="12" color="var(--nile-colors-red-700)"></nile-icon>
|
36
|
+
${nileFileUpload.isStringTruncated
|
37
|
+
? html `<nile-tooltip content=${errorMessage || FileUploadDefaults.CUSTOM_ERROR}>
|
38
|
+
<span>${errorMessage || FileUploadDefaults.CUSTOM_ERROR}</span>
|
39
|
+
</nile-tooltip>`
|
40
|
+
: html `<span>${errorMessage || FileUploadDefaults.CUSTOM_ERROR}</span>`}
|
39
41
|
</div>` :
|
40
|
-
|
41
|
-
</div>
|
42
|
-
`;
|
43
|
-
export const getHorizontalDisabledtState = (browseFiles, title, subtitle) => html `
|
44
|
-
<div
|
45
|
-
class="horizontal-div disable"
|
46
|
-
>
|
47
|
-
<div class="inner-div">
|
48
|
-
<slot name="uploadIcon">
|
49
|
-
<nile-icon name="var(--nile-icon-upload, var(--ng-icon-upload-01))" size="24" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
|
50
|
-
</slot>
|
51
|
-
<div class="content">
|
52
|
-
<slot name="title">
|
53
|
-
<h4>${title}</h4>
|
54
|
-
</slot>
|
55
|
-
<slot name="subtitle">
|
56
|
-
<p>${subtitle}</p>
|
57
|
-
</slot>
|
58
|
-
</div>
|
59
|
-
</div>
|
60
|
-
<input
|
61
|
-
type="file"
|
62
|
-
@change=${(e) => dragHandlerInstance.handleFiles(e)}
|
63
|
-
multiple
|
64
|
-
/>
|
65
|
-
<slot @click=${browseFiles} name="browseFileButton">
|
66
|
-
<nile-button variant="tertiary">
|
67
|
-
Browse File
|
68
|
-
</nile-button>
|
69
|
-
</slot>
|
42
|
+
html ``}
|
70
43
|
</div>
|
71
|
-
`;
|
44
|
+
`;
|
45
|
+
};
|
46
|
+
export const getHorizontalDefaultState = (browseFiles, title, subtitle, dragHandler, state, errorMessage, allowedTypes, nileFileUpload) => baseHorizontalState(browseFiles, title, subtitle, false, dragHandler, state, errorMessage, allowedTypes, nileFileUpload);
|
47
|
+
export const getHorizontalDisabledState = (browseFiles, title, subtitle, dragHandler, state, errorMessage, allowedTypes, nileFileUpload) => baseHorizontalState(browseFiles, title, subtitle, true, dragHandler, state, errorMessage, allowedTypes, nileFileUpload);
|
48
|
+
export const getHorizontalErrorState = (browseFiles, title, subtitle, dragHandler, state, errorMessage, allowedTypes, nileFileUpload) => baseHorizontalState(browseFiles, title, subtitle, false, dragHandler, state, errorMessage, allowedTypes, nileFileUpload);
|
72
49
|
export const getHorizontalDragState = () => html `
|
73
|
-
<div class="horizontal-div dragging">
|
50
|
+
<div part="horizontal-drag-state" class="horizontal-div dragging">
|
74
51
|
<div class="icons-container">
|
75
52
|
<nile-icon
|
76
53
|
color="var(--nile-colors-blue-500)"
|
77
|
-
name="
|
78
|
-
method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
|
54
|
+
name="general"
|
79
55
|
size="20"
|
80
56
|
class="general-icon"
|
81
57
|
></nile-icon>
|
82
58
|
<nile-icon
|
83
59
|
color="var(--nile-colors-blue-500)"
|
84
|
-
name="
|
85
|
-
method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
|
60
|
+
name="image"
|
86
61
|
size="24"
|
87
62
|
class="image-icon"
|
88
63
|
></nile-icon>
|
89
64
|
</div>
|
90
|
-
<p
|
65
|
+
<p>${FileUploadDefaults.DRAG_STATE_DEFAULT}</p>
|
91
66
|
</div>
|
92
67
|
`;
|
93
68
|
// Vertical States
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
69
|
+
const baseVerticalState = (browseFiles, title, subtitle, disabled, dragHandler, errorMessage, allowedTypes, nileFileUpload) => {
|
70
|
+
truncateString(nileFileUpload);
|
71
|
+
return html `
|
72
|
+
<div part="vertical-wrapper" class="wrapper">
|
73
|
+
<div part="vertical-default" class="vertical-default vertical-div ${disabled ? 'disable' : ''}">
|
74
|
+
<slot name="upload-icon">
|
75
|
+
<nile-icon name="upload" size="24"></nile-icon>
|
99
76
|
</slot>
|
100
|
-
<div class="content-container">
|
101
|
-
<
|
102
|
-
|
103
|
-
</slot>
|
104
|
-
<slot name="subtitle">
|
105
|
-
<p>${subtitle}</p>
|
106
|
-
</slot>
|
77
|
+
<div part="vertical-content-container" class="content-container">
|
78
|
+
<div class="title">${title}</div>
|
79
|
+
<div class="subtitle">${subtitle}</div>
|
107
80
|
</div>
|
108
81
|
<input
|
109
82
|
type="file"
|
110
|
-
|
83
|
+
?disabled=${disabled}
|
84
|
+
@change=${(e) => dragHandler.handleFiles(e)}
|
111
85
|
multiple
|
86
|
+
accept=${allowedTypes.join(',')}
|
112
87
|
/>
|
113
|
-
<slot @click=${browseFiles} name="
|
114
|
-
<nile-button variant="tertiary">
|
88
|
+
<slot @click=${disabled ? undefined : browseFiles} name="browse-file-button">
|
89
|
+
<nile-button variant="tertiary" ?disabled=${disabled}>
|
115
90
|
Browse File
|
116
91
|
</nile-button>
|
117
92
|
</slot>
|
118
93
|
</div>
|
119
|
-
${errorMessage ?
|
120
|
-
|
121
|
-
<nile-icon name="
|
122
|
-
|
94
|
+
${errorMessage || nileFileUpload.state === FileUploadState.ERROR ?
|
95
|
+
html `<div class="vertical-upload-error">
|
96
|
+
<nile-icon name="warning" size="12" color="var(--nile-colors-red-700)"></nile-icon>
|
97
|
+
${nileFileUpload.isStringTruncated
|
98
|
+
? html `<nile-tooltip content=${errorMessage || FileUploadDefaults.CUSTOM_ERROR}>
|
99
|
+
<span>${errorMessage || FileUploadDefaults.CUSTOM_ERROR}</span>
|
100
|
+
</nile-tooltip>`
|
101
|
+
: html `<span>${errorMessage || FileUploadDefaults.CUSTOM_ERROR}</span>`}
|
123
102
|
</div>` :
|
124
|
-
|
103
|
+
html ``}
|
125
104
|
</div>
|
126
|
-
`;
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
<slot name="uploadIcon">
|
132
|
-
<nile-icon name="var(--nile-icon-upload, var(--ng-icon-upload-01))" size="24" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
|
133
|
-
</slot>
|
134
|
-
<div class="content-container">
|
135
|
-
<slot name="title">
|
136
|
-
<h4>${title}</h4>
|
137
|
-
</slot>
|
138
|
-
<slot name="title">
|
139
|
-
<p>${subtitle}</p>
|
140
|
-
</slot>
|
141
|
-
</div>
|
142
|
-
<input
|
143
|
-
type="file"
|
144
|
-
@change=${(e) => dragHandlerInstance.handleFiles(e)}
|
145
|
-
multiple
|
146
|
-
/>
|
147
|
-
<slot @click=${browseFiles} name="browseFileButton">
|
148
|
-
<nile-button variant="tertiary">
|
149
|
-
Browse File
|
150
|
-
</nile-button>
|
151
|
-
</slot>
|
152
|
-
</div>
|
153
|
-
`;
|
105
|
+
`;
|
106
|
+
};
|
107
|
+
export const getVerticalDefaultState = (browseFiles, title, subtitle, dragHandler, errorMessage, allowedTypes, nileFileUpload) => baseVerticalState(browseFiles, title, subtitle, false, dragHandler, errorMessage, allowedTypes, nileFileUpload);
|
108
|
+
export const getVerticalDisabledState = (browseFiles, title, subtitle, dragHandler, errorMessage, allowedTypes, nileFileUpload) => baseVerticalState(browseFiles, title, subtitle, true, dragHandler, errorMessage, allowedTypes, nileFileUpload);
|
109
|
+
export const getVerticalErrorState = (browseFiles, title, subtitle, dragHandler, errorMessage, allowedTypes, nileFileUpload) => baseVerticalState(browseFiles, title, subtitle, false, dragHandler, errorMessage, allowedTypes, nileFileUpload);
|
154
110
|
export const getVerticalDragState = () => html `
|
155
|
-
<div class="vertical-div vertical-drag">
|
111
|
+
<div part="vertical-drag-state" class="vertical-div vertical-drag">
|
156
112
|
<div class="icons-container">
|
157
113
|
<nile-icon
|
158
114
|
color="var(--nile-colors-blue-500)"
|
159
|
-
name="
|
160
|
-
method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
|
115
|
+
name="general"
|
161
116
|
size="20"
|
162
117
|
class="general-icon"
|
163
118
|
></nile-icon>
|
164
119
|
<nile-icon
|
165
120
|
color="var(--nile-colors-blue-500)"
|
166
|
-
name="
|
167
|
-
method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
|
121
|
+
name="image"
|
168
122
|
size="24"
|
169
123
|
class="image-icon"
|
170
124
|
></nile-icon>
|
171
125
|
</div>
|
172
|
-
<p
|
126
|
+
<p>${FileUploadDefaults.DRAG_STATE_DEFAULT}</p>
|
173
127
|
</div>
|
174
128
|
`;
|
175
129
|
//# sourceMappingURL=nile-file-upload.template.js.map
|
@@ -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,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;;;;;;;;;;;;;;;;;;;;CAoB/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;;;;;;;;;;;;;;;;;;;;CAoB7D,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=\"var(--nile-icon-upload, var(--ng-icon-upload-01))\" size=\"24\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"></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=\"var(--nile-icon-warning, var(--ng-icon-alert-circle))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" 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=\"var(--nile-icon-upload, var(--ng-icon-upload-01))\" size=\"24\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"></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=\"var(--nile-icon-general, var(--ng-icon-file-06))\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n size=\"20\"\n class=\"general-icon\"\n ></nile-icon>\n <nile-icon\n color=\"var(--nile-colors-blue-500)\"\n name=\"var(--nile-icon-image, var(--ng-icon-image-03))\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\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=\"var(--nile-icon-upload, var(--ng-icon-upload-01))\" size=\"24\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"></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=\"var(--nile-icon-warning, var(--ng-icon-alert-circle))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" 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=\"var(--nile-icon-upload, var(--ng-icon-upload-01))\" size=\"24\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"></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=\"var(--nile-icon-general, var(--ng-icon-file-06))\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n size=\"20\"\n class=\"general-icon\"\n ></nile-icon>\n <nile-icon\n color=\"var(--nile-colors-blue-500)\"\n name=\"var(--nile-icon-image, var(--ng-icon-image-03))\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\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":"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","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport './nile-file-upload.css';\nimport { DragHandler } from './utils/drag-drop.util';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { FileUploadDefaults, FileUploadState } from './types/file-upload.enums';\nimport { truncateString } from './utils/file-validation.util';\nimport { NileFileUpload } from './nile-file-upload';\n\nconst baseHorizontalState = (\n browseFiles: Function,\n title: string,\n subtitle: string,\n disabled: boolean,\n dragHandler: DragHandler,\n state: FileUploadState,\n errorMessage: string,\n allowedTypes: string[],\n nileFileUpload: NileFileUpload\n): TemplateResult => {\n truncateString(nileFileUpload);\n return html`\n <div class=\"wrapper\" part=\"horizontal-wrapper\">\n <div part=\"horizontal-div\" class=${classMap({ 'hover-border': state === \"hover\", 'horizontal-div': true, 'disable': disabled })}>\n <div part=\"inner-div\" class=\"inner-div\">\n <slot class=\"upload-icon-slot\" name=\"upload-icon\">\n <nile-icon name=\"upload\" size=\"24\"></nile-icon>\n </slot>\n <div part=\"content\" class=\"content\">\n <div class=\"title\">${title}</div>\n <div class=\"subtitle\">${subtitle}</div>\n </div>\n </div>\n <input\n type=\"file\"\n ?disabled=${disabled}\n @change=${(e: Event | DragEvent) => { dragHandler.handleFiles(e) }}\n multiple\n accept=${allowedTypes.join(',')}\n />\n <slot class=\"browse-file-button\" @click=${disabled ? undefined : browseFiles} name=\"browse-file-button\">\n <nile-button variant=\"tertiary\" ?disabled=${disabled}>\n Browse File\n </nile-button>\n </slot>\n </div>\n ${errorMessage || nileFileUpload.state === FileUploadState.ERROR ?\n html`<div class=\"upload-error\">\n <nile-icon name=\"warning\" size=\"12\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n ${\n nileFileUpload.isStringTruncated\n ? html`<nile-tooltip content=${errorMessage || FileUploadDefaults.CUSTOM_ERROR}>\n <span>${errorMessage || FileUploadDefaults.CUSTOM_ERROR}</span>\n </nile-tooltip>`\n : html`<span>${errorMessage || FileUploadDefaults.CUSTOM_ERROR}</span>`\n }\n </div>` :\n html``\n }\n </div>\n `;\n}\n\nexport const getHorizontalDefaultState = (\n browseFiles: Function,\n title: string,\n subtitle: string,\n dragHandler: DragHandler,\n state: FileUploadState,\n errorMessage: string,\n allowedTypes: string[],\n nileFileUpload: NileFileUpload\n): TemplateResult => baseHorizontalState(browseFiles, title, subtitle, false, dragHandler, state, errorMessage, allowedTypes, nileFileUpload);\n\nexport const getHorizontalDisabledState = (\n browseFiles: Function,\n title: string,\n subtitle: string,\n dragHandler: DragHandler,\n state: FileUploadState,\n errorMessage: string,\n allowedTypes: string[],\n nileFileUpload: NileFileUpload\n): TemplateResult => baseHorizontalState(browseFiles, title, subtitle, true, dragHandler, state, errorMessage, allowedTypes, nileFileUpload);\n\nexport const getHorizontalErrorState = (\n browseFiles: Function,\n title: string,\n subtitle: string,\n dragHandler: DragHandler,\n state: FileUploadState,\n errorMessage: string,\n allowedTypes: string[],\n nileFileUpload: NileFileUpload\n): TemplateResult => baseHorizontalState(browseFiles, title, subtitle, false, dragHandler, state, errorMessage, allowedTypes, nileFileUpload);\n\nexport const getHorizontalDragState = (): TemplateResult => html`\n <div part=\"horizontal-drag-state\" class=\"horizontal-div dragging\">\n <div class=\"icons-container\">\n <nile-icon\n color=\"var(--nile-colors-blue-500)\"\n name=\"general\"\n size=\"20\"\n class=\"general-icon\"\n ></nile-icon>\n <nile-icon\n color=\"var(--nile-colors-blue-500)\"\n name=\"image\"\n size=\"24\"\n class=\"image-icon\"\n ></nile-icon>\n </div>\n <p>${FileUploadDefaults.DRAG_STATE_DEFAULT}</p>\n </div>\n`;\n\n// Vertical States\nconst baseVerticalState = (\n browseFiles: Function,\n title: string,\n subtitle: string,\n disabled: boolean,\n dragHandler: DragHandler,\n errorMessage: string,\n allowedTypes: string[],\n nileFileUpload: NileFileUpload\n): TemplateResult => {\n truncateString(nileFileUpload);\n return html`\n <div part=\"vertical-wrapper\" class=\"wrapper\">\n <div part=\"vertical-default\" class=\"vertical-default vertical-div ${disabled ? 'disable' : ''}\">\n <slot name=\"upload-icon\">\n <nile-icon name=\"upload\" size=\"24\"></nile-icon>\n </slot>\n <div part=\"vertical-content-container\" class=\"content-container\">\n <div class=\"title\">${title}</div>\n <div class=\"subtitle\">${subtitle}</div>\n </div>\n <input\n type=\"file\"\n ?disabled=${disabled}\n @change=${(e: Event | DragEvent) => dragHandler.handleFiles(e)}\n multiple\n accept=${allowedTypes.join(',')}\n />\n <slot @click=${disabled ? undefined : browseFiles} name=\"browse-file-button\">\n <nile-button variant=\"tertiary\" ?disabled=${disabled}>\n Browse File\n </nile-button>\n </slot>\n </div>\n ${errorMessage || nileFileUpload.state === FileUploadState.ERROR ?\n html`<div class=\"vertical-upload-error\">\n <nile-icon name=\"warning\" size=\"12\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n ${\n nileFileUpload.isStringTruncated\n ? html`<nile-tooltip content=${errorMessage || FileUploadDefaults.CUSTOM_ERROR}>\n <span>${errorMessage || FileUploadDefaults.CUSTOM_ERROR}</span>\n </nile-tooltip>`\n : html`<span>${errorMessage || FileUploadDefaults.CUSTOM_ERROR}</span>`\n }\n </div>` :\n html``\n }\n </div>\n `;\n}\n\nexport const getVerticalDefaultState = (\n browseFiles: Function,\n title: string,\n subtitle: string,\n dragHandler: DragHandler,\n errorMessage: string,\n allowedTypes: string[],\n nileFileUpload: NileFileUpload\n): TemplateResult => baseVerticalState(browseFiles, title, subtitle, false, dragHandler, errorMessage, allowedTypes, nileFileUpload);\n\nexport const getVerticalDisabledState = (\n browseFiles: Function,\n title: string,\n subtitle: string,\n dragHandler: DragHandler,\n errorMessage: string,\n allowedTypes: string[],\n nileFileUpload: NileFileUpload\n): TemplateResult => baseVerticalState(browseFiles, title, subtitle, true, dragHandler, errorMessage, allowedTypes, nileFileUpload);\n\nexport const getVerticalErrorState = (\n browseFiles: Function,\n title: string,\n subtitle: string,\n dragHandler: DragHandler,\n errorMessage: string,\n allowedTypes: string[],\n nileFileUpload: NileFileUpload\n): TemplateResult => baseVerticalState(browseFiles, title, subtitle, false, dragHandler, errorMessage, allowedTypes, nileFileUpload);\n\n\nexport const getVerticalDragState = (): TemplateResult => html`\n <div part=\"vertical-drag-state\" class=\"vertical-div vertical-drag\">\n <div class=\"icons-container\">\n <nile-icon\n color=\"var(--nile-colors-blue-500)\"\n name=\"general\"\n size=\"20\"\n class=\"general-icon\"\n ></nile-icon>\n <nile-icon\n color=\"var(--nile-colors-blue-500)\"\n name=\"image\"\n size=\"24\"\n class=\"image-icon\"\n ></nile-icon>\n </div>\n <p>${FileUploadDefaults.DRAG_STATE_DEFAULT}</p>\n </div>\n`;"]}
|
@@ -2,7 +2,8 @@ export declare enum FileUploadState {
|
|
2
2
|
DEFAULT = "default",
|
3
3
|
DISABLED = "disabled",
|
4
4
|
HOVER = "hover",
|
5
|
-
DRAG = "drag"
|
5
|
+
DRAG = "drag",
|
6
|
+
ERROR = "error"
|
6
7
|
}
|
7
8
|
export declare enum FileUploadVariant {
|
8
9
|
HORIZONTAL = "horizontal",
|
@@ -10,19 +11,23 @@ export declare enum FileUploadVariant {
|
|
10
11
|
}
|
11
12
|
export declare enum FileUploadError {
|
12
13
|
INVALID_FORMAT = "Invalid file format! Upload valid file.",
|
13
|
-
|
14
|
+
SIZE_LIMIT_EXCEEDED = "File exceeds size limit! Upload smaller file.",
|
14
15
|
MULTIPLE_NOT_ALLOWED = "Please Upload Single File!",
|
15
16
|
DUPLICATES_NOT_ALLOWED = "Duplicate Files Are Not Allowed!",
|
16
|
-
UPLOAD_URL_REQUIRED = "Upload URL is required!"
|
17
|
+
UPLOAD_URL_REQUIRED = "Upload URL is required!",
|
18
|
+
SERVER_SIDE_ERROR = "Error from server! Please try again later.",
|
19
|
+
NETWORK_ERROR = "Network error! Please try again later."
|
17
20
|
}
|
18
21
|
export declare enum FileUploadEvent {
|
19
22
|
NILE_INIT = "nile-init",
|
20
23
|
NILE_BROWSE = "nile-browse",
|
21
24
|
NILE_DRAG = "nile-drag",
|
22
25
|
NILE_CHANGE = "nile-change",
|
26
|
+
NILE_UPLOADING = "nile-uploading",
|
23
27
|
NILE_UPLOAD_PROGRESS = "nile-upload-progress",
|
24
28
|
NILE_UPLOAD_SUCCESS = "nile-upload-success",
|
25
29
|
NILE_UPLOAD_CANCELLED = "nile-upload-cancelled",
|
30
|
+
NILE_SIZE_EXCEED_FILES = "nile-size-exceed-files",
|
26
31
|
NILE_CANCEL_UPLOAD = "nile-cancel-upload",
|
27
32
|
NILE_NETWORK_ERROR = "nile-network-error",
|
28
33
|
SERVER_SIDE_ERROR = "nile-server-error",
|
@@ -31,5 +36,7 @@ export declare enum FileUploadEvent {
|
|
31
36
|
export declare enum FileUploadDefaults {
|
32
37
|
TITLE = "Drag and drop to upload",
|
33
38
|
SUBTITLE = "PNG, JPG or SVG (upto 1MB) | 1:1 ratio",
|
34
|
-
ERROR_MESSAGE = "Invalid File Format."
|
39
|
+
ERROR_MESSAGE = "Invalid File Format.",
|
40
|
+
DRAG_STATE_DEFAULT = "Drop files here to upload",
|
41
|
+
CUSTOM_ERROR = "Error Occured!"
|
35
42
|
}
|
@@ -4,6 +4,7 @@ export var FileUploadState;
|
|
4
4
|
FileUploadState["DISABLED"] = "disabled";
|
5
5
|
FileUploadState["HOVER"] = "hover";
|
6
6
|
FileUploadState["DRAG"] = "drag";
|
7
|
+
FileUploadState["ERROR"] = "error";
|
7
8
|
})(FileUploadState || (FileUploadState = {}));
|
8
9
|
export var FileUploadVariant;
|
9
10
|
(function (FileUploadVariant) {
|
@@ -13,10 +14,12 @@ export var FileUploadVariant;
|
|
13
14
|
export var FileUploadError;
|
14
15
|
(function (FileUploadError) {
|
15
16
|
FileUploadError["INVALID_FORMAT"] = "Invalid file format! Upload valid file.";
|
16
|
-
FileUploadError["
|
17
|
+
FileUploadError["SIZE_LIMIT_EXCEEDED"] = "File exceeds size limit! Upload smaller file.";
|
17
18
|
FileUploadError["MULTIPLE_NOT_ALLOWED"] = "Please Upload Single File!";
|
18
19
|
FileUploadError["DUPLICATES_NOT_ALLOWED"] = "Duplicate Files Are Not Allowed!";
|
19
20
|
FileUploadError["UPLOAD_URL_REQUIRED"] = "Upload URL is required!";
|
21
|
+
FileUploadError["SERVER_SIDE_ERROR"] = "Error from server! Please try again later.";
|
22
|
+
FileUploadError["NETWORK_ERROR"] = "Network error! Please try again later.";
|
20
23
|
})(FileUploadError || (FileUploadError = {}));
|
21
24
|
export var FileUploadEvent;
|
22
25
|
(function (FileUploadEvent) {
|
@@ -24,9 +27,11 @@ export var FileUploadEvent;
|
|
24
27
|
FileUploadEvent["NILE_BROWSE"] = "nile-browse";
|
25
28
|
FileUploadEvent["NILE_DRAG"] = "nile-drag";
|
26
29
|
FileUploadEvent["NILE_CHANGE"] = "nile-change";
|
30
|
+
FileUploadEvent["NILE_UPLOADING"] = "nile-uploading";
|
27
31
|
FileUploadEvent["NILE_UPLOAD_PROGRESS"] = "nile-upload-progress";
|
28
32
|
FileUploadEvent["NILE_UPLOAD_SUCCESS"] = "nile-upload-success";
|
29
33
|
FileUploadEvent["NILE_UPLOAD_CANCELLED"] = "nile-upload-cancelled";
|
34
|
+
FileUploadEvent["NILE_SIZE_EXCEED_FILES"] = "nile-size-exceed-files";
|
30
35
|
FileUploadEvent["NILE_CANCEL_UPLOAD"] = "nile-cancel-upload";
|
31
36
|
FileUploadEvent["NILE_NETWORK_ERROR"] = "nile-network-error";
|
32
37
|
FileUploadEvent["SERVER_SIDE_ERROR"] = "nile-server-error";
|
@@ -37,6 +42,8 @@ export var FileUploadDefaults;
|
|
37
42
|
FileUploadDefaults["TITLE"] = "Drag and drop to upload";
|
38
43
|
FileUploadDefaults["SUBTITLE"] = "PNG, JPG or SVG (upto 1MB) | 1:1 ratio";
|
39
44
|
FileUploadDefaults["ERROR_MESSAGE"] = "Invalid File Format.";
|
45
|
+
FileUploadDefaults["DRAG_STATE_DEFAULT"] = "Drop files here to upload";
|
46
|
+
FileUploadDefaults["CUSTOM_ERROR"] = "Error Occured!";
|
40
47
|
})(FileUploadDefaults || (FileUploadDefaults = {}));
|
41
48
|
;
|
42
49
|
//# sourceMappingURL=file-upload.enums.js.map
|
@@ -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,
|
1
|
+
{"version":3,"file":"file-upload.enums.js","sourceRoot":"","sources":["../../../../src/nile-file-upload/types/file-upload.enums.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,eAMX;AAND,WAAY,eAAe;IACzB,sCAAmB,CAAA;IACnB,wCAAqB,CAAA;IACrB,kCAAe,CAAA;IACf,gCAAa,CAAA;IACb,kCAAe,CAAA;AACjB,CAAC,EANW,eAAe,KAAf,eAAe,QAM1B;AAED,MAAM,CAAN,IAAY,iBAGX;AAHD,WAAY,iBAAiB;IAC3B,8CAAyB,CAAA;IACzB,0CAAqB,CAAA;AACvB,CAAC,EAHW,iBAAiB,KAAjB,iBAAiB,QAG5B;AAED,MAAM,CAAN,IAAY,eAQX;AARD,WAAY,eAAe;IACzB,6EAA0D,CAAA;IAC1D,wFAAqE,CAAA;IACrE,sEAAmD,CAAA;IACnD,8EAA2D,CAAA;IAC3D,kEAA+C,CAAA;IAC/C,mFAAgE,CAAA;IAChE,2EAAwD,CAAA;AAC1D,CAAC,EARW,eAAe,KAAf,eAAe,QAQ1B;AAED,MAAM,CAAN,IAAY,eAcX;AAdD,WAAY,eAAe;IACzB,0CAAuB,CAAA;IACvB,8CAA2B,CAAA;IAC3B,0CAAuB,CAAA;IACvB,8CAA2B,CAAA;IAC3B,oDAAiC,CAAA;IACjC,gEAA6C,CAAA;IAC7C,8DAA2C,CAAA;IAC3C,kEAA+C,CAAA;IAC/C,oEAAiD,CAAA;IACjD,4DAAyC,CAAA;IACzC,4DAAyC,CAAA;IACzC,0DAAuC,CAAA;IACvC,gDAA6B,CAAA;AAC/B,CAAC,EAdW,eAAe,KAAf,eAAe,QAc1B;AAED,MAAM,CAAN,IAAY,kBAMX;AAND,WAAY,kBAAkB;IAC5B,uDAAiC,CAAA;IACjC,yEAAmD,CAAA;IACnD,4DAAsC,CAAA;IACtC,sEAAgD,CAAA;IAChD,qDAA+B,CAAA;AACjC,CAAC,EANW,kBAAkB,KAAlB,kBAAkB,QAM7B;AAAA,CAAC","sourcesContent":["export enum FileUploadState {\n DEFAULT = 'default',\n DISABLED = 'disabled',\n HOVER = 'hover',\n DRAG = 'drag',\n ERROR = 'error'\n}\n\nexport enum FileUploadVariant {\n HORIZONTAL = 'horizontal',\n VERTICAL = 'vertical'\n}\n\nexport enum FileUploadError {\n INVALID_FORMAT = \"Invalid file format! Upload valid file.\",\n SIZE_LIMIT_EXCEEDED = \"File exceeds size limit! Upload smaller file.\",\n MULTIPLE_NOT_ALLOWED = \"Please Upload Single File!\",\n DUPLICATES_NOT_ALLOWED = \"Duplicate Files Are Not Allowed!\",\n UPLOAD_URL_REQUIRED = \"Upload URL is required!\",\n SERVER_SIDE_ERROR = \"Error from server! Please try again later.\",\n NETWORK_ERROR = \"Network error! Please try again later.\"\n}\n\nexport enum FileUploadEvent {\n NILE_INIT = \"nile-init\",\n NILE_BROWSE = \"nile-browse\",\n NILE_DRAG = \"nile-drag\",\n NILE_CHANGE = \"nile-change\",\n NILE_UPLOADING = \"nile-uploading\",\n NILE_UPLOAD_PROGRESS = \"nile-upload-progress\",\n NILE_UPLOAD_SUCCESS = \"nile-upload-success\",\n NILE_UPLOAD_CANCELLED = \"nile-upload-cancelled\",\n NILE_SIZE_EXCEED_FILES = \"nile-size-exceed-files\",\n NILE_CANCEL_UPLOAD = \"nile-cancel-upload\",\n NILE_NETWORK_ERROR = \"nile-network-error\",\n SERVER_SIDE_ERROR = \"nile-server-error\",\n NILE_DESTROY = \"nile-destroy\"\n}\n\nexport enum FileUploadDefaults {\n TITLE = 'Drag and drop to upload',\n SUBTITLE = 'PNG, JPG or SVG (upto 1MB) | 1:1 ratio',\n ERROR_MESSAGE = 'Invalid File Format.',\n DRAG_STATE_DEFAULT = 'Drop files here to upload',\n CUSTOM_ERROR = 'Error Occured!'\n};"]}
|