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

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 (18) hide show
  1. package/demo/index.html +145 -217
  2. package/dist/index.js +54 -41
  3. package/dist/nile-file-preview/nile-file-preview.css.cjs.js +1 -1
  4. package/dist/nile-file-preview/nile-file-preview.css.cjs.js.map +1 -1
  5. package/dist/nile-file-preview/nile-file-preview.css.esm.js +7 -3
  6. package/dist/nile-file-preview/nile-file-preview.template.cjs.js +1 -1
  7. package/dist/nile-file-preview/nile-file-preview.template.cjs.js.map +1 -1
  8. package/dist/nile-file-preview/nile-file-preview.template.esm.js +73 -64
  9. package/dist/src/nile-file-preview/nile-file-preview.css.js +7 -3
  10. package/dist/src/nile-file-preview/nile-file-preview.css.js.map +1 -1
  11. package/dist/src/nile-file-preview/nile-file-preview.template.js +46 -37
  12. package/dist/src/nile-file-preview/nile-file-preview.template.js.map +1 -1
  13. package/dist/src/version.js +1 -1
  14. package/dist/src/version.js.map +1 -1
  15. package/dist/tsconfig.tsbuildinfo +1 -1
  16. package/package.json +1 -1
  17. package/src/nile-file-preview/nile-file-preview.css.ts +7 -3
  18. package/src/nile-file-preview/nile-file-preview.template.ts +46 -37
package/demo/index.html CHANGED
@@ -1,222 +1,150 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <link rel="stylesheet" href="" id="stylesheet" />
3
+
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <!-- <link rel="stylesheet" href="./theme/nxt/nxtgen.css" id="stylesheet" /> -->
7
+ <link rel="stylesheet" href="variables.css" id="stylesheet" />
8
+ <link rel="stylesheet" href="index.css" />
9
+ <script type="module" src="index.js"></script>
10
+
11
+ <style>
12
+ * {
13
+ padding: 0;
14
+ margin: 0;
15
+ }
16
+
17
+ html,
18
+ body {
19
+ height: 100%;
20
+ width: 100%;
21
+ display: flex;
22
+ align-items: center;
23
+ justify-content: center;
24
+ }
25
+
26
+ .container {
27
+ display: flex;
28
+ flex-direction: column;
29
+ justify-content: center;
30
+ gap: 10px;
31
+ width: 648px;
32
+ }
33
+
34
+ #previews {
35
+ display: flex;
36
+ flex-direction: column;
37
+ justify-content: flex-start;
38
+ align-items: flex-start;
39
+ gap: 10px;
40
+ width: 248px;
41
+ height: 500px;
42
+ overflow-y: auto;
43
+ }
44
+ </style>
45
+ </head>
46
+
47
+ <body>
48
+ <!-- <div style="background-color: var(--ng-color-base-black);">Demo Page</div> -->
49
+
50
+ <body>
51
+ <div class="container">
52
+
53
+ <nile-file-upload state="default" variant="horizontal"
54
+ fileUploadUrl="https://api.escuelajs.co/api/v1/files/upload"></nile-file-upload>
55
+
56
+ <div id="previews"></div>
57
+
58
+ </div>
59
+
6
60
  <script>
7
- const params = new URLSearchParams(window.location.search);
8
- const style = params.get('style') || 'variables.css';
9
- document.getElementById('stylesheet').href = style;
10
- </script>
11
-
12
- <!-- <link rel="stylesheet" href="variables.css" id="stylesheet" /> -->
13
- <link rel="stylesheet" href="index.css" />
14
-
15
- <style>
16
- .profile {
17
- display: flex;
18
- align-items: center;
19
- gap: 0.75rem;
20
- padding: 0.75rem 1rem;
21
- border-bottom: 1px solid var(--nile-color-border, #e5e7eb);
22
- }
23
-
24
- .profile-info {
25
- flex: 1;
26
- display: flex;
27
- flex-direction: column;
28
- line-height: 1.2;
29
- }
30
-
31
- .profile-info .name {
32
- font-weight: 600;
33
- font-size: 0.95rem;
34
- }
35
-
36
- .profile-info .org {
37
- font-size: 0.85rem;
38
- color: #555;
39
- }
40
-
41
- .profile-info .email {
42
- font-size: 0.8rem;
43
- color: #777;
44
- }
45
-
46
- nile-side-bar-action-menu-item::part(suffix) {
47
- left: 71px;
48
- position: relative;
49
- }
50
-
51
- nile-side-bar-action-menu::part(menu__footer) {
52
- border-top: 1px solid #d1d5db;
53
- padding: 5px;
54
- border-radius: 0;
55
- }
56
-
57
- .sign-out {
58
- position: relative;
59
- left: 158px;
60
- }
61
-
62
- nile-button.settings-button::part(base) {
63
- height: 30px;
64
- width: 30px;
65
- }
66
-
67
- nile-avatar::part(avatar__content) {
68
- border: none;
69
- }
70
- </style>
71
- <script type="module" src="index.js"></script>
72
- </head>
73
- <body>
74
-
75
-
76
-
77
-
78
-
79
-
80
- <!-- <nile-input
81
- type="password"
82
- canSavePassword>
83
- </nile-input>
84
- -->
85
-
86
- <nile-side-bar #sidebar>
87
- <nile-side-bar-header>
88
- <nile-side-bar-logo slot="logo" collapsedSrc=""></nile-side-bar-logo>
89
- <nile-side-bar-expand slot="expand"></nile-side-bar-expand>
90
- </nile-side-bar-header>
91
- <nile-side-bar-panel>
92
- <nile-side-bar-group >
93
- <nile-side-bar-group-item>
94
- <nile-side-bar-group-item-icon icon="dashboard" slot="icon"></nile-side-bar-group-item-icon>
95
- <nile-side-bar-group-item-text >Dashboard </nile-side-bar-group-item-text>
96
- </nile-side-bar-group-item>
97
- <nile-side-bar-group-item >
98
- <nile-side-bar-group-item-icon icon="application" slot="icon"></nile-side-bar-group-item-icon>
99
- <nile-side-bar-group-item-text >Applications </nile-side-bar-group-item-text>
100
- </nile-side-bar-group-item>
101
- <nile-side-bar-group-item >
102
- <nile-side-bar-group-item-icon icon="logs" slot="icon"></nile-side-bar-group-item-icon>
103
- <nile-side-bar-group-item-text >Logs</nile-side-bar-group-item-text>
104
- </nile-side-bar-group-item>
105
- <nile-side-bar-group-item >
106
- <nile-side-bar-group-item-icon icon="agent" slot="icon"></nile-side-bar-group-item-icon>
107
- <nile-side-bar-group-item-text >Agent</nile-side-bar-group-item-text>
108
- </nile-side-bar-group-item>
109
- <nile-side-bar-group-item >
110
- <nile-side-bar-group-item-icon icon="user" slot="icon"></nile-side-bar-group-item-icon>
111
- <nile-side-bar-group-item-text >Users</nile-side-bar-group-item-text>
112
- </nile-side-bar-group-item>
113
-
114
-
115
- </nile-side-bar-group>
116
-
117
- <nile-side-bar-group divider>
118
- <nile-side-bar-group-item >
119
- <nile-side-bar-group-item-icon icon="flowmap-orchestration" slot="icon"></nile-side-bar-group-item-icon>
120
- <nile-side-bar-group-item-text >Integrations</nile-side-bar-group-item-text>
121
- </nile-side-bar-group-item>
122
- <nile-side-bar-group-item >
123
- <nile-side-bar-group-item-icon icon="persistentdata" slot="icon"></nile-side-bar-group-item-icon>
124
- <nile-side-bar-group-item-text >Data Loader</nile-side-bar-group-item-text>
125
- </nile-side-bar-group-item>
126
- <nile-side-bar-group-item >
127
- <nile-side-bar-group-item-icon icon="data-insight" slot="icon"></nile-side-bar-group-item-icon>
128
- <nile-side-bar-group-item-text >Data Insights</nile-side-bar-group-item-text>
129
- </nile-side-bar-group-item>
130
-
131
- </nile-side-bar-group>
132
- </nile-side-bar-panel>
133
-
134
- <nile-side-bar-footer>
135
- <nile-side-bar-footer-item (click)="toggleHelpSupportMenu($event)" type="support">
136
- <span slot="icon"><nile-icon name="helpandsupport"> </nile-icon></span>
137
- <nile-side-bar-footer-text
138
- text="Help and Support"
139
- slot="text">
140
- </nile-side-bar-footer-text>
141
- <nile-dropdown portal [open]="enableHelpSupportMenu"(nile-hide)="closeHelpSupportMenu()" slot="action" placement="right" >
142
- <nile-icon name="arrowright" slot="trigger"></nile-icon>
143
-
144
- <nile-menu>
145
- <nile-menu-item class="menu2">Help Center</nile-menu-item>
146
- <nile-menu-item class="menu2">API Documentation</nile-menu-item>
147
- </nile-menu>
148
- </nile-dropdown>
149
- </nile-side-bar-footer-item>
150
-
151
- <nile-side-bar-footer-item (click)="toggleProfileMenu($event)" type="avatar">
152
- <span slot="icon">
153
-
154
- <nile-avatar
155
- name="James Albert"
156
- variant="text"
157
- size="lg"
158
- bg-color="#005EA6"
159
- text-color="white">
160
- </nile-avatar>
161
-
162
- </span>
163
- <nile-side-bar-footer-text
164
- text="James Albert"
165
- subtext="Aquera Internals"
166
- slot="text">
167
- </nile-side-bar-footer-text>
168
-
169
- <nile-side-bar-action portal [open]="enableProfileMenu"(nile-hide)="closeProfileMenu()" slot="action" placement="left" hoist>
170
- <nile-icon name="arrowright" slot="trigger"></nile-icon>
171
-
172
- <nile-side-bar-action-menu searchEnabled>
173
-
174
- <!-- PRE-HEADER (Profile Section) -->
175
- <div slot="menu__pre-header" class="profile">
176
- <nile-avatar
177
- name="James Albert"
178
- variant="text"
179
- size="xl"
180
- bg-color="#005EA6"
181
- text-color="white">
182
- </nile-avatar>
183
- <div class="profile-info">
184
- <div class="name">James Albert</div>
185
- <div class="org">Aquera Internals</div>
186
- <div class="email">jamesalbertgmail.com</div>
187
- </div>
188
- <nile-button variant="tertiary" class="settings-button" > <nile-icon name="settings" class="settings-icon"></nile-icon> </nile-button>
189
-
190
- </div>
191
-
192
- <!-- HEADER (Tenant Accounts label) -->
193
- <!-- <div slot="menu__header" class="tenant-header">Tenant Accounts</div> -->
194
-
195
- <!-- MENU ITEMS -->
196
- <nile-side-bar-action-menu-item>Acme</nile-side-bar-action-menu-item>
197
- <nile-side-bar-action-menu-item class="active-item" active>
198
- Aquera Internals
199
-
200
-
201
- <nile-icon name="tick" slot="suffix"></nile-icon>
202
- </nile-side-bar-action-menu-item>
203
- <nile-side-bar-action-menu-item>Dayforce to Okta Saas</nile-side-bar-action-menu-item>
204
- <nile-side-bar-action-menu-item>Andrew Wells</nile-side-bar-action-menu-item>
205
- <nile-side-bar-action-menu-item>Villa Groups</nile-side-bar-action-menu-item>
206
-
207
- <!-- FOOTER -->
208
- <div slot="menu__footer" class="footer">
209
- <nile-button variant="tertiary" class="sign-out">Sign Out</nile-button>
210
- </div>
211
-
212
- </nile-side-bar-action-menu>
213
- </nile-side-bar-action>
214
-
215
- </nile-side-bar-footer-item>
216
- </nile-side-bar-footer>
217
-
218
-
219
- </nile-side-bar>
220
-
61
+ const upload = document.querySelector('nile-file-upload');
62
+ const previewContainer = document.querySelector('#previews');
63
+ const uploadBtn = document.getElementById('uploadBtn');
64
+
65
+ let allFiles = [];
66
+ let deletedFiles = [];
67
+ let validTypes = ['image/svg+xml', 'image/png', 'image/webp', 'application/pdf', 'application/zip', 'image/jpeg'];
68
+ let imageUrls = [
69
+ 'https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg',
70
+ 'https://cdn.pixabay.com/photo/2017/08/05/11/16/logo-2582748_1280.png',
71
+ 'https://miro.medium.com/v2/resize:fit:4800/format:webp/1*xMuIOwjliGUPjkzukeWKfw.jpeg',
72
+ 'https://upload.wikimedia.org/wikipedia/commons/9/96/Nature_celebrating_India.png',
73
+ 'https://upload.wikimedia.org/wikipedia/commons/2/22/1_Nature_1.png',
74
+ 'https://www.un.org/sites/un2.un.org/files/field/image/making-peace-with-nature.png',
75
+ ];
76
+
77
+ upload.addEventListener('nile-change', (event) => {
78
+ let updatedFiles = event.detail.files
79
+ .filter(file => !deletedFiles.includes(file) && !allFiles.some(f => f.file === file))
80
+ .map(file => ({ file, progress: 0 }));
81
+
82
+ allFiles = [...allFiles, ...updatedFiles];
83
+ callFilePreview(allFiles);
84
+ });
85
+
86
+
87
+ previewContainer.addEventListener('nile-remove', (event) => {
88
+ let { value, url } = event.detail;
89
+ // for image url's
90
+ // imageUrls = removeFile(url, imageUrls);
91
+ // callFilePreview(imageUrls);
92
+ // for files
93
+ allFiles = removeFile(value, allFiles);
94
+ callFilePreview(allFiles);
95
+ });
96
+
97
+ upload.addEventListener('nile-upload-progress', (e) => {
98
+ const { file, progress } = e.detail;
99
+
100
+ allFiles = allFiles.map(item =>
101
+ item.file === file ? { ...item, progress } : item
102
+ );
103
+
104
+ callFilePreview(allFiles);
105
+ });
106
+
107
+
108
+ previewContainer.addEventListener('nile-uploading', () => {
109
+ console.log('nile-uploading');
110
+ });
111
+
112
+ upload.addEventListener('nile-upload-cancelled', (e) => {
113
+ const cancelledFile = e.detail.file;
114
+
115
+ allFiles = allFiles.map(item =>
116
+ item.file === cancelledFile
117
+ ? { file: cancelledFile, status: 'cancelled', errorMessage: 'File upload cancelled' }
118
+ : item
119
+ );
120
+ callFilePreview(allFiles);
121
+ });
122
+
123
+ const callFilePreview = (fileObjs) => {
124
+ previewContainer.innerHTML = "";
125
+
126
+ fileObjs.forEach(({ file, progress, status, errorMessage }) => {
127
+ const filePreview = document.createElement('nile-file-preview');
128
+ filePreview.inputFile = file;
129
+ filePreview.variant = "horizontal";
130
+ filePreview.allowedTypes = validTypes;
131
+ if (progress != null) filePreview.uploadStatus = progress;
132
+ if (status) filePreview.errorMessage = errorMessage;
133
+ previewContainer.appendChild(filePreview);
134
+ });
135
+ };
136
+
137
+ // callFilePreview(imageUrls);
138
+
139
+ const removeFile = (removeFile, files) => {
140
+ return files.filter(file => {
141
+ if (file !== removeFile) return true;
142
+ deletedFiles.push(file);
143
+ return false;
144
+ });
145
+ };
146
+ </script>
221
147
  </body>
148
+ </body>
149
+
222
150
  </html>