@aquera/nile-elements 1.9.0 → 1.9.1

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 (52) hide show
  1. package/README.md +4 -0
  2. package/dist/{index-6faafdf4.cjs.js → index-2f006498.cjs.js} +2 -2
  3. package/dist/index-2f006498.cjs.js.map +1 -0
  4. package/dist/{index-9931b440.esm.js → index-646474e8.esm.js} +1 -1
  5. package/dist/index.cjs.js +1 -1
  6. package/dist/index.esm.js +1 -1
  7. package/dist/index.js +540 -518
  8. package/dist/nile-card/nile-card.css.cjs.js +1 -1
  9. package/dist/nile-card/nile-card.css.cjs.js.map +1 -1
  10. package/dist/nile-card/nile-card.css.esm.js +2 -4
  11. package/dist/nile-combobox/index.cjs.js +1 -1
  12. package/dist/nile-combobox/index.esm.js +1 -1
  13. package/dist/nile-combobox/nile-combobox.cjs.js +1 -1
  14. package/dist/nile-combobox/nile-combobox.esm.js +1 -1
  15. package/dist/nile-detail/index.cjs.js +1 -1
  16. package/dist/nile-detail/index.esm.js +1 -1
  17. package/dist/nile-detail/nile-detail.cjs.js +1 -1
  18. package/dist/nile-detail/nile-detail.esm.js +1 -1
  19. package/dist/nile-file-preview/nile-file-preview.css.cjs.js +1 -1
  20. package/dist/nile-file-preview/nile-file-preview.css.cjs.js.map +1 -1
  21. package/dist/nile-file-preview/nile-file-preview.css.esm.js +89 -89
  22. package/dist/nile-file-preview/nile-file-preview.template.cjs.js +1 -1
  23. package/dist/nile-file-preview/nile-file-preview.template.cjs.js.map +1 -1
  24. package/dist/nile-file-preview/nile-file-preview.template.esm.js +42 -42
  25. package/dist/nile-file-upload/nile-file-upload.css.cjs.js +1 -1
  26. package/dist/nile-file-upload/nile-file-upload.css.cjs.js.map +1 -1
  27. package/dist/nile-file-upload/nile-file-upload.css.esm.js +126 -105
  28. package/dist/nile-pagination/nile-pagination.cjs.js +1 -1
  29. package/dist/nile-pagination/nile-pagination.cjs.js.map +1 -1
  30. package/dist/nile-pagination/nile-pagination.esm.js +7 -4
  31. package/dist/src/nile-card/nile-card.css.js +0 -2
  32. package/dist/src/nile-card/nile-card.css.js.map +1 -1
  33. package/dist/src/nile-file-preview/nile-file-preview.css.js +87 -87
  34. package/dist/src/nile-file-preview/nile-file-preview.css.js.map +1 -1
  35. package/dist/src/nile-file-preview/nile-file-preview.template.js +4 -4
  36. package/dist/src/nile-file-preview/nile-file-preview.template.js.map +1 -1
  37. package/dist/src/nile-file-upload/nile-file-upload.css.js +124 -103
  38. package/dist/src/nile-file-upload/nile-file-upload.css.js.map +1 -1
  39. package/dist/src/nile-pagination/nile-pagination.d.ts +1 -0
  40. package/dist/src/nile-pagination/nile-pagination.js +9 -2
  41. package/dist/src/nile-pagination/nile-pagination.js.map +1 -1
  42. package/dist/src/version.js +1 -1
  43. package/dist/src/version.js.map +1 -1
  44. package/dist/tsconfig.tsbuildinfo +1 -1
  45. package/package.json +1 -1
  46. package/src/nile-card/nile-card.css.ts +0 -2
  47. package/src/nile-file-preview/nile-file-preview.css.ts +87 -87
  48. package/src/nile-file-preview/nile-file-preview.template.ts +4 -4
  49. package/src/nile-file-upload/nile-file-upload.css.ts +124 -103
  50. package/src/nile-pagination/nile-pagination.ts +6 -2
  51. package/vscode-html-custom-data.json +6 -1
  52. package/dist/index-6faafdf4.cjs.js.map +0 -1
package/dist/src/nile-file-preview/nile-file-preview.css.js CHANGED
@@ -42,14 +42,14 @@ export const styles = css `
42
42
  align-items: center;
43
43
  justify-content: space-between;
44
44
  gap: 6px;
45
- border-radius: var(--nile-radius-radius-xs);
46
- border: 1px dashed var(--nile-colors-neutral-500);
47
- color: var(--nile-colors-dark-900);
48
- background-color: var(--nile-colors-white-base);
45
+ border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
46
+ border: 1px dashed var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
47
+ color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
48
+ background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
49
49
  }
50
50
 
51
51
  .hover-state {
52
- border-color: var(--nile-colors-primary-600);
52
+ border-color: var(--nile-colors-primary-600, var(--ng-colors-border-brand-alt));
53
53
  }
54
54
 
55
55
  .vertical-div {
@@ -63,20 +63,20 @@ export const styles = css `
63
63
  align-items: center;
64
64
  gap: 18px;
65
65
  padding: 12px;
66
- border-radius: var(--nile-radius-radius-xs);
67
- color: var(--nile-colors-dark-900);
68
- border: 1px dashed var(--nile-colors-neutral-500);
69
- background-color: var(--nile-colors-white-base);
66
+ border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
67
+ color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
68
+ border: 1px dashed var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
69
+ background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
70
70
  position: relative;
71
71
  margin-bottom: 10px;
72
72
  }
73
73
 
74
74
  .vertical-div:hover {
75
- border-color: var(--nile-colors-blue-500);
75
+ border-color: var(--nile-colors-blue-500, var(--ng-colors-border-brand));
76
76
  }
77
77
 
78
78
  .outer-div-border {
79
- border: 1px solid var(--nile-colors-neutral-400);
79
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
80
80
  }
81
81
 
82
82
  .inner-div {
@@ -121,13 +121,13 @@ export const styles = css `
121
121
  align-items: center;
122
122
  gap: 18px;
123
123
  box-sizing: border-box;
124
- border: 1px solid var(--nile-colors-neutral-400);
124
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
125
125
  border-radius: 4px;
126
- background-color: var(--nile-colors-white-base);
126
+ background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
127
127
  }
128
128
 
129
129
  .uploading:hover {
130
- border-color: var(--nile-colors-neutral-400);
130
+ border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
131
131
  }
132
132
 
133
133
  .progress-bar-container {
@@ -141,8 +141,8 @@ export const styles = css `
141
141
  width: 100%;
142
142
  display: flex;
143
143
  justify-content: space-between;
144
- font-size: var(--nile-type-scale-2);
145
- font-weight: var(--nile-font-weight-regular);
144
+ font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
145
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
146
146
  }
147
147
 
148
148
  .progress-bar-container p {
@@ -150,8 +150,8 @@ export const styles = css `
150
150
  }
151
151
 
152
152
  .progress-bar-container > p {
153
- font-size: var(--nile-type-scale-1);
154
- color: var(--nile-colors-dark-500);
153
+ font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
154
+ color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
155
155
  text-align: left;
156
156
  white-space: nowrap;
157
157
  text-overflow: ellipsis;
@@ -160,9 +160,9 @@ export const styles = css `
160
160
  }
161
161
 
162
162
  .progress-bar-container .horizontal-file-name {
163
- font-size: var(--nile-type-scale-1);
164
- font-weight: var(--nile-font-weight-regular);
165
- color: var(--nile-colors-dark-500);
163
+ font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
164
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
165
+ color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
166
166
  text-align: left;
167
167
  white-space: nowrap;
168
168
  overflow: hidden;
@@ -171,9 +171,9 @@ export const styles = css `
171
171
  }
172
172
 
173
173
  .progress-bar-container .vertical-file-name {
174
- font-size: var(--nile-type-scale-1);
175
- font-weight: var(--nile-font-weight-regular);
176
- color: var(--nile-colors-dark-500);
174
+ font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
175
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
176
+ color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
177
177
  text-align: left;
178
178
  white-space: nowrap;
179
179
  overflow: hidden;
@@ -183,11 +183,11 @@ export const styles = css `
183
183
 
184
184
  /* PREVIEW STATE */
185
185
  .preview {
186
- border: 1px solid var(--nile-colors-neutral-400);
186
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
187
187
  }
188
188
 
189
189
  .preview:hover {
190
- border-color: var(--nile-colors-neutral-400);
190
+ border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
191
191
  }
192
192
 
193
193
  .preview-inner {
@@ -205,8 +205,8 @@ export const styles = css `
205
205
  height: 42px;
206
206
  width: 42px;
207
207
  object-fit: contain;
208
- border-radius: var(--nile-radius-radius-xs);
209
- border: 1px solid var(--nile-colors-neutral-400);
208
+ border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
209
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
210
210
  }
211
211
 
212
212
  .preview nile-icon:hover {
@@ -215,11 +215,11 @@ export const styles = css `
215
215
 
216
216
  /* NO PREVIEW STATE */
217
217
  .no-preview {
218
- border: 1px solid var(--nile-colors-neutral-400);
218
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
219
219
  }
220
220
 
221
221
  .no-preview:hover {
222
- border-color: var(--nile-colors-neutral-400);
222
+ border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
223
223
  }
224
224
 
225
225
  .no-preview-container {
@@ -231,13 +231,13 @@ export const styles = css `
231
231
  .document-icon {
232
232
  height: 40px;
233
233
  width: 40px;
234
- border-radius: var(--nile-radius-radius-xs);
234
+ border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
235
235
  padding: 2px 3px 2px 3px;
236
236
  display: flex;
237
237
  justify-content: center;
238
238
  align-items: center;
239
- border: 1px solid var(--nile-colors-blue-400);
240
- background-color: var(--nile-colors-blue-100);
239
+ border: 1px solid var(--nile-colors-blue-400, var(--ng-componentcolors-utility-blue-400));
240
+ background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));
241
241
  }
242
242
 
243
243
  .document-icon nile-icon {
@@ -256,8 +256,8 @@ export const styles = css `
256
256
 
257
257
  .preview-file-info p {
258
258
  margin: 0px;
259
- font-size: var(--nile-type-scale-3);
260
- font-weight: var(--nile-font-weight-regular);
259
+ font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
260
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
261
261
  text-align: left;
262
262
  white-space: nowrap;
263
263
  text-overflow: ellipsis;
@@ -266,9 +266,9 @@ export const styles = css `
266
266
  }
267
267
 
268
268
  .preview-file-info p:last-of-type{
269
- color: var(--nile-colors-neutral-700);
270
- font-size: var(--nile-type-scale-2);
271
- font-weight: var(--nile-font-weight-regular);
269
+ color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
270
+ font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
271
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
272
272
  text-align: left;
273
273
  white-space: nowrap;
274
274
  text-overflow: ellipsis;
@@ -282,11 +282,11 @@ export const styles = css `
282
282
 
283
283
  /* ERROR STATE */
284
284
  .error {
285
- border: 1px solid var(--nile-colors-neutral-400);
285
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
286
286
  }
287
287
 
288
288
  .error:hover {
289
- border-color: var(--nile-colors-neutral-400);
289
+ border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
290
290
  }
291
291
 
292
292
  .error-container {
@@ -299,13 +299,13 @@ export const styles = css `
299
299
  .error-icon {
300
300
  height: 40px;
301
301
  width: 40px;
302
- border-radius: var(--nile-radius-radius-xs);
302
+ border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
303
303
  padding: 2px 3px 2px 3px;
304
304
  display: flex;
305
305
  justify-content: center;
306
306
  align-items: center;
307
- border: 1px solid var(--nile-colors-red-400);
308
- background-color: var(--nile-colors-red-100);
307
+ border: 1px solid var(--nile-colors-red-400, var(--ng-colors-border-error-subtle));
308
+ background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-secondary));
309
309
  }
310
310
 
311
311
  .error-icon nile-icon {
@@ -324,8 +324,8 @@ export const styles = css `
324
324
 
325
325
  .file-info p {
326
326
  margin: 0px;
327
- font-size: var(--nile-type-scale-3);
328
- font-weight: var(--nile-font-weight-regular);
327
+ font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
328
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
329
329
  text-align: left;
330
330
  white-space: nowrap;
331
331
  overflow: hidden;
@@ -334,9 +334,9 @@ export const styles = css `
334
334
  }
335
335
 
336
336
  .file-info nile-tooltip span, .file-info span {
337
- color: var(--nile-colors-red-700);
338
- font-size: var(--nile-type-scale-2);
339
- font-weight: var(--nile-font-weight-regular);
337
+ color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
338
+ font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
339
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
340
340
  max-width: 90%;
341
341
  white-space: nowrap;
342
342
  text-overflow: ellipsis;
@@ -349,9 +349,9 @@ export const styles = css `
349
349
  }
350
350
 
351
351
  .file-info .horizontal-file-name {
352
- font-size: var(--nile-type-scale-3);
353
- font-weight: var(--nile-font-weight-regular);
354
- color: var(--nile-colors-dark-900);
352
+ font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
353
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
354
+ color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
355
355
  text-align: left;
356
356
  white-space: nowrap;
357
357
  overflow: hidden;
@@ -379,7 +379,7 @@ export const styles = css `
379
379
  }
380
380
 
381
381
  .content-container h4 {
382
- font-weight: var(--nile-font-weight-regular);
382
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
383
383
  text-align: center;
384
384
  white-space: nowrap;
385
385
  text-overflow: ellipsis;
@@ -389,8 +389,8 @@ export const styles = css `
389
389
 
390
390
  .content-container p:first-child {
391
391
  margin: 0px;
392
- font-size: var(--nile-type-scale-3);
393
- font-weight: var(--nile-font-weight-regular);
392
+ font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
393
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
394
394
  text-align: center;
395
395
  white-space: nowrap;
396
396
  text-overflow: ellipsis;
@@ -400,9 +400,9 @@ export const styles = css `
400
400
 
401
401
  .content-container p:last-child {
402
402
  margin: 0px;
403
- font-size: var(--nile-type-scale-2);
404
- font-weight: var(--nile-font-weight-regular);
405
- color: var(--nile-colors-neutral-700);
403
+ font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
404
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
405
+ color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
406
406
  text-align: center;
407
407
  white-space: nowrap;
408
408
  text-overflow: ellipsis;
@@ -417,10 +417,10 @@ export const styles = css `
417
417
  justify-content: center;
418
418
  align-items: center;
419
419
  gap:18px;
420
- font-size: var(--nile-type-scale-3);
421
- color: var(--nile-colors-blue-700);
422
- background-color: var(--nile-colors-blue-100);
423
- border-color: var(--nile-colors-blue-500);
420
+ font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
421
+ color: var(--nile-colors-blue-700, var(--ng-colors-text-brand-secondary-700));
422
+ background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));
423
+ border-color: var(--nile-colors-blue-500, var(--ng-colors-border-brand));
424
424
  }
425
425
 
426
426
  /* Uploading State */
@@ -429,11 +429,11 @@ export const styles = css `
429
429
  flex-direction: column;
430
430
  justify-content: flex-end;
431
431
  align-items: center;
432
- border: 1px solid var(--nile-colors-neutral-400);
432
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
433
433
  }
434
434
 
435
435
  .vertical-uploading:hover {
436
- border-color: var(--nile-colors-neutral-400);
436
+ border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
437
437
  }
438
438
 
439
439
  .loading {
@@ -451,28 +451,28 @@ export const styles = css `
451
451
 
452
452
  /* Preview State */
453
453
  .vertical-preview {
454
- border: 1px solid var(--nile-colors-neutral-400);
454
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
455
455
  }
456
456
 
457
457
  .vertical-preview:hover {
458
- border-color: var(--nile-colors-neutral-400);
458
+ border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
459
459
  }
460
460
 
461
461
  .image-preview {
462
- border: 1px solid var(--nile-colors-neutral-400);
462
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
463
463
  object-fit: cover;
464
464
  width: 80px;
465
465
  height: 80px;
466
- border-radius: var(--nile-radius-radius-xs);
466
+ border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
467
467
  }
468
468
 
469
469
  /* Vertical No Preview State */
470
470
  .vertical-no-preview {
471
- border: 1px solid var(--nile-colors-neutral-400);
471
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
472
472
  }
473
473
 
474
474
  .vertical-no-preview:hover {
475
- border-color: var(--nile-colors-neutral-400);
475
+ border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
476
476
  }
477
477
 
478
478
  .vertical-document-icon {
@@ -482,23 +482,23 @@ export const styles = css `
482
482
  display: flex;
483
483
  justify-content: center;
484
484
  align-items: center;
485
- border-radius: var(--nile-radius-radius-xs);
486
- border: 1px solid var(--nile-colors-blue-400);
487
- background-color: var(--nile-colors-blue-100);
485
+ border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
486
+ border: 1px solid var(--nile-colors-blue-400, var(--ng-componentcolors-utility-blue-400));
487
+ background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));
488
488
  }
489
489
 
490
490
  /* Veritcal Error State */
491
491
  .vertical-error {
492
- border: 1px solid var(--nile-colors-neutral-400);
492
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
493
493
  }
494
494
 
495
495
  .vertical-error:hover {
496
- border-color: var(--nile-colors-neutral-400);
496
+ border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
497
497
  }
498
498
 
499
499
  .error-bg {
500
- background-color: var(--nile-colors-red-100);
501
- border: 1px solid var(--nile-colors-red-400);
500
+ background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-secondary));
501
+ border: 1px solid var(--nile-colors-red-400, var(--ng-colors-border-error-subtle));
502
502
  }
503
503
 
504
504
  .file-info-vertical-state {
@@ -508,8 +508,8 @@ export const styles = css `
508
508
 
509
509
  .file-info-vertical-state p {
510
510
  margin: 0px;
511
- font-size: var(--nile-type-scale-3);
512
- font-weight: var(--nile-font-weight-regular);
511
+ font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
512
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
513
513
  padding-bottom: 6px;
514
514
  text-align: center;
515
515
  white-space: nowrap;
@@ -519,9 +519,9 @@ export const styles = css `
519
519
  }
520
520
 
521
521
  .file-info-vertical-state nile-tooltip span, .file-info-vertical-state span {
522
- color: var(--nile-colors-red-700);
523
- font-size: var(--nile-type-scale-2);
524
- font-weight: var(--nile-font-weight-regular);
522
+ color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
523
+ font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
524
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
525
525
  text-align: center;
526
526
  white-space: nowrap;
527
527
  text-overflow: ellipsis;
@@ -537,14 +537,14 @@ export const styles = css `
537
537
  align-items: center;
538
538
  gap: 8px;
539
539
  margin: 0px;
540
- font-size: var(--nile-type-scale-3);
541
- font-weight: var(--nile-font-weight-regular);
540
+ font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
541
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
542
542
  text-align: center
543
543
  }
544
544
 
545
545
  .error-p {
546
- color: var(--nile-colors-red-700);
547
- font-size: var(--nile-type-scale-2);
546
+ color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
547
+ font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
548
548
  width: 216px;
549
549
  white-space: nowrap;
550
550
  overflow: hidden;
@@ -570,8 +570,8 @@ export const styles = css `
570
570
  min-width: 230px;
571
571
  max-height: 200px;
572
572
  overflow-y: auto;
573
- border: 1px solid var(--nile-colors-neutral-700);
574
- border-radius: var(--nile-radius-radius-xs);
573
+ border: 1px solid var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
574
+ border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
575
575
  scrollbar-width: none;
576
576
  padding: 12px;
577
577
  }
package/dist/src/nile-file-preview/nile-file-preview.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nile-file-preview.css.js","sourceRoot":"","sources":["../../../src/nile-file-preview/nile-file-preview.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkkBxB,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 width: 100%;\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 max-height: 62px;\n width: 100%;\n min-width: 230px;\n padding: 12px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 6px;\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-state {\n border-color: var(--nile-colors-primary-600);\n }\n\n .vertical-div {\n height: auto;\n min-height: 156px;\n min-width: 240px;\n width: 240px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\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 margin-bottom: 10px;\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 .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 nile-loader {\n line-height: 0;\n }\n\n .uploading {\n height: 62px;\n width: 100%;\n padding: 12px;\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 border-radius: 4px;\n background-color: var(--nile-colors-white-base);\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: 6px;\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 text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .progress-bar-container .horizontal-file-name {\n font-size: var(--nile-type-scale-1);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-500);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n }\n \n .progress-bar-container .vertical-file-name {\n font-size: var(--nile-type-scale-1);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-500);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 212px;\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 align-items: center;\n gap: 18px;\n }\n\n .preview-image-container {\n height: 42px;\n width: 42px;\n }\n\n .preview-image-container img, iframe {\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 nile-icon:hover {\n cursor: pointer;\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 align-items: center;\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: 4px;\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 text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 100%;\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 text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 100%;\n }\n\n .no-preview > nile-icon:hover {\n cursor: pointer;\n }\n\n /* ERROR STATE */\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: 95%;\n display: flex;\n align-items: center;\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: 4px;\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 text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 538px;\n }\n \n .file-info nile-tooltip span, .file-info span {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n max-width: 90%;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-align: left;\n }\n\n .error > nile-icon:hover {\n cursor: pointer;\n }\n\n .file-info .horizontal-file-name {\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-900);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 538px;\n }\n\n /* VERTICAL STATE START */\n /* Default State */\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 text-align: center;\n }\n\n .content-container h4 {\n font-weight: var(--nile-font-weight-regular);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\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 text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\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 text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\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 padding-top: 40px;\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 .file-info-vertical-state {\n width: 100%;\n text-align: center;\n }\n\n .file-info-vertical-state p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n padding-bottom: 6px;\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 222px;\n }\n \n .file-info-vertical-state nile-tooltip span, .file-info-vertical-state span {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n display: block;\n max-width: 212px;\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: center\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 /* 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 .preview-file-info p {\n width: 100%;\n }\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-file-preview.css.js","sourceRoot":"","sources":["../../../src/nile-file-preview/nile-file-preview.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkkBxB,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 width: 100%;\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 max-height: 62px;\n width: 100%;\n min-width: 230px;\n padding: 12px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 6px;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n border: 1px dashed var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n \n .hover-state {\n border-color: var(--nile-colors-primary-600, var(--ng-colors-border-brand-alt));\n }\n\n .vertical-div {\n height: auto;\n min-height: 156px;\n min-width: 240px;\n width: 240px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n padding: 12px;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n border: 1px dashed var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n position: relative; \n margin-bottom: 10px;\n }\n\n .vertical-div:hover {\n border-color: var(--nile-colors-blue-500, var(--ng-colors-border-brand));\n }\n\n .outer-div-border {\n border: 1px 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 .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 nile-loader {\n line-height: 0;\n }\n\n .uploading {\n height: 62px;\n width: 100%;\n padding: 12px;\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, var(--ng-colors-border-primary));\n border-radius: 4px;\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n \n .uploading:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .progress-bar-container {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 6px;\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-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-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, var(--ng-font-size-text-xs));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .progress-bar-container .horizontal-file-name {\n font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n }\n \n .progress-bar-container .vertical-file-name {\n font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 212px;\n }\n\n /* PREVIEW STATE */\n .preview {\n border: 1px solid 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 align-items: center;\n gap: 18px;\n }\n\n .preview-image-container {\n height: 42px;\n width: 42px;\n }\n\n .preview-image-container img, iframe {\n height: 42px;\n width: 42px;\n object-fit: contain;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .preview nile-icon:hover {\n cursor: pointer;\n }\n\n /* NO PREVIEW STATE */\n .no-preview {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .no-preview:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .no-preview-container {\n display: flex;\n align-items: center;\n gap: 18px;\n }\n\n .document-icon {\n height: 40px;\n width: 40px;\n border-radius: var(--nile-radius-radius-xs, var(--ng-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, var(--ng-componentcolors-utility-blue-400));\n background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));\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: 4px;\n }\n\n .preview-file-info p {\n margin: 0px;\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 text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 100%;\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 100%;\n }\n\n .no-preview > nile-icon:hover {\n cursor: pointer;\n }\n\n /* ERROR STATE */\n .error {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .error:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .error-container {\n width: 95%;\n display: flex;\n align-items: center;\n gap: 18px;\n }\n\n .error-icon {\n height: 40px;\n width: 40px;\n border-radius: var(--nile-radius-radius-xs, var(--ng-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, var(--ng-colors-border-error-subtle));\n background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-secondary));\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: 4px;\n }\n\n .file-info p {\n margin: 0px;\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 text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 538px;\n }\n \n .file-info nile-tooltip span, .file-info span {\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n max-width: 90%;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-align: left;\n }\n\n .error > nile-icon:hover {\n cursor: pointer;\n }\n\n .file-info .horizontal-file-name {\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-primary-900));\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 538px;\n }\n\n /* VERTICAL STATE START */\n /* Default State */\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 text-align: center;\n }\n\n .content-container h4 {\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .content-container p:first-child {\n margin: 0px;\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 text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .content-container p:last-child {\n margin: 0px;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\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, var(--ng-font-size-text-sm));\n color: var(--nile-colors-blue-700, var(--ng-colors-text-brand-secondary-700));\n background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));\n border-color: var(--nile-colors-blue-500, var(--ng-colors-border-brand));\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, var(--ng-colors-border-primary));\n }\n\n .vertical-uploading:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .loading {\n display: flex;\n justify-content: center;\n align-items: center;\n padding-top: 40px;\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, var(--ng-colors-border-primary));\n }\n\n .vertical-preview:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .image-preview {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n object-fit: cover;\n width: 80px;\n height: 80px;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n }\n\n /* Vertical No Preview State */\n .vertical-no-preview {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .vertical-no-preview:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\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, var(--ng-radius-xs));\n border: 1px solid var(--nile-colors-blue-400, var(--ng-componentcolors-utility-blue-400));\n background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));\n }\n\n /* Veritcal Error State */\n .vertical-error {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .vertical-error:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .error-bg {\n background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-secondary));\n border: 1px solid var(--nile-colors-red-400, var(--ng-colors-border-error-subtle));\n }\n\n .file-info-vertical-state {\n width: 100%;\n text-align: center;\n }\n\n .file-info-vertical-state p {\n margin: 0px;\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 padding-bottom: 6px;\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 222px;\n }\n \n .file-info-vertical-state nile-tooltip span, .file-info-vertical-state span {\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n display: block;\n max-width: 212px;\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, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n text-align: center\n }\n\n .error-p {\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\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 /* 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, var(--ng-colors-text-secondary-700));\n border-radius: var(--nile-radius-radius-xs, var(--ng-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 .preview-file-info p {\n width: 100%;\n }\n`;\n\nexport default [styles];\n"]}
package/dist/src/nile-file-preview/nile-file-preview.template.js CHANGED
@@ -71,7 +71,7 @@ export function getHorizontalNoPreviewState(file, originalUrl, showFileType) {
71
71
  <div class="no-preview horizontal-div" part="horizontal-no-preview-state">
72
72
  <div class="no-preview-container" part="horizontal-no-preview-container">
73
73
  <div class="document-icon" part="horizontal-no-preview-document-icon">
74
- <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
74
+ <nile-icon name="general" size="20" color="var(--nile-colors-blue-500, var(--ng-colors-fg-brand-secondary-500))"></nile-icon>
75
75
  </div>
76
76
  <div class="preview-file-info" part="horizontal-no-preview-file-info">
77
77
  <p part="horizontal-no-preview-file-info-name">
@@ -103,7 +103,7 @@ export function getHorizontalErrorState(file, errorMessage, originalUrl, nileFil
103
103
  <div class="error horizontal-div" part="horizontal-error-state">
104
104
  <div class="error-container" part="horizontal-error-container">
105
105
  <div class="error-icon" part="horizontal-error-icon">
106
- <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
106
+ <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))"></nile-icon>
107
107
  </div>
108
108
  <div class="file-info" part="horizontal-error-file-info">
109
109
  <p class="horizontal-file-name" part="horizontal-error-file-info-name">
@@ -195,7 +195,7 @@ export function getVerticalNoPreviewState(file, originalUrl, showFileType) {
195
195
  return html `
196
196
  <div class="vertical-div vertical-no-preview" part="vertical-no-preview-state">
197
197
  <div class="vertical-document-icon" part="vertical-no-preview-document-icon">
198
- <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
198
+ <nile-icon name="general" size="20" color="var(--nile-colors-blue-500, var(--ng-colors-fg-brand-secondary-500))"></nile-icon>
199
199
  </div>
200
200
 
201
201
  <div class="content-container" part="vertical-no-preview-file-info">
@@ -225,7 +225,7 @@ export function getVerticalErrorState(file, errorMessage, originalUrl, nileFileP
225
225
  return html `
226
226
  <div class="vertical-div vertical-error" part="vertical-error-state">
227
227
  <div class="vertical-document-icon error-bg" part="vertical-error-document-icon">
228
- <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
228
+ <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))"></nile-icon>
229
229
  </div>
230
230
 
231
231
  <div class="file-info-vertical-state" part="vertical-error-file-info">
package/dist/src/nile-file-preview/nile-file-preview.template.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nile-file-preview.template.js","sourceRoot":"","sources":["../../../src/nile-file-preview/nile-file-preview.template.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,yBAAyB,CAAC;AACjC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAG5F,MAAM,UAAU,2BAA2B,CAC1C,IAAU,EACV,YAAoB,EACpB,eAAgC;IAE9B,OAAO,IAAI,CAAA;;;;;;8DAM+C,YAAY;;;;sBAIpD,YAAY;;wEAEsC,IAAI,CAAC,IAAI;;uBAE1D,CAAC,CAAgC,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC,EAAE,eAAe,CAAC;;;;;;;;KAQlG,CAAC;AACJ,CAAC;AAEH,MAAM,UAAU,yBAAyB,CACvC,GAAW,EACX,IAAU,EACV,WAAmB,EACnB,YAAqB;IAErB,OAAO,IAAI,CAAA;;;;;;oBAMO,GAAG;oBACH,IAAI,CAAC,IAAI;;;;;;qCAMQ,IAAI,CAAC,IAAI;;;qCAGT,WAAW,CAAC,IAAI,EAAE,YAAY,CAAC;;qCAE/B,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;;;;uBAK/C,CAAC,CAAgC,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,WAAW,CAAC;;;;;;;;;;GAU1F,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,2BAA2B,CACzC,IAAU,EACV,WAAmB,EACnB,YAAqB;IAErB,OAAO,IAAI,CAAA;;;;;;;;qCAQwB,IAAI,CAAC,IAAI;;;qCAGT,WAAW,CAAC,IAAI,EAAE,YAAY,CAAC;;qCAE/B,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;;;;uBAK/C,CAAC,CAAgC,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,WAAW,CAAC;;;;;;;;;;GAU1F,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,uBAAuB,CACrC,IAAU,EACV,YAAoB,EACpB,WAAmB,EACnB,eAAgC;IAEhC,cAAc,CAAC,eAAe,CAAC,CAAC;IAChC,OAAO,IAAI,CAAA;;;;;;;;;gBASG,IAAI,CAAC,IAAI;;;YAIb,eAAe,CAAC,iBAAiB;QAC/B,CAAC,CAAC,IAAI,CAAA,+BAA+B,YAAY;0BACrC,YAAY;qCACD;QACvB,CAAC,CAAC,IAAI,CAAA,SAAS,YAAY,SAC/B;;;qBAGW,CAAC,CAAgC,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,WAAW,CAAC;;;;;;;;;GASxF,CAAC;AACJ,CAAC;AAED,kBAAkB;AAClB,MAAM,UAAU,yBAAyB,CACvC,IAAU,EACV,YAAoB,EACpB,eAAgC;IAEhC,OAAO,IAAI,CAAA;;;;;;;;;0DAS6C,YAAY;;mCAEnC,YAAY;kEACmB,IAAI,CAAC,IAAI;;;qBAGtD,CAAC,CAAgC,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC,EAAE,eAAe,CAAC;;;;;;;;;GASlG,CAAC;AACJ,CAAC;AAGD,MAAM,UAAU,uBAAuB,CACrC,GAAW,EACX,IAAU,EACV,WAAmB,EACnB,YAAqB;IAErB,OAAO,IAAI,CAAA;;;;;;gBAMG,GAAG;gBACH,IAAI,CAAC,IAAI;;;;;;mCAMU,IAAI,CAAC,IAAI;;;mCAGT,WAAW,CAAC,IAAI,EAAE,YAAY,CAAC;;mCAE/B,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;;;qBAI/C,CAAC,CAAgC,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,WAAW,CAAC;;;;;;;;;GASxF,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,yBAAyB,CACvC,IAAU,EACV,WAAmB,EACnB,YAAqB;IAErB,OAAO,IAAI,CAAA;;;;;;;;mCAQsB,IAAI,CAAC,IAAI;;;mCAGT,WAAW,CAAC,IAAI,EAAE,YAAY,CAAC;;mCAE/B,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;;;qBAI/C,CAAC,CAAgC,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,WAAW,CAAC;;;;;;;;;GASxF,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,qBAAqB,CACnC,IAAU,EACV,YAAoB,EACpB,WAAmB,EACnB,eAAgC;IAEhC,cAAc,CAAC,eAAe,CAAC,CAAC;IAChC,OAAO,IAAI,CAAA;;;;;;;;iCAQoB,IAAI,CAAC,IAAI;;UAGhC,eAAe,CAAC,iBAAiB;QAC/B,CAAC,CAAC,IAAI,CAAA,+BAA+B,YAAY;wBACrC,YAAY;mCACD;QACvB,CAAC,CAAC,IAAI,CAAA,SAAS,YAAY,SAC/B;;;qBAGa,CAAC,CAAgC,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,WAAW,CAAC;;;;;;;;;GASxF,CAAC;AACJ,CAAC","sourcesContent":["/**\n * Template File for nile-preview component\n */\n\nimport './nile-file-preview.css';\nimport { html, TemplateResult } from 'lit';\nimport { FilePreviewErrorMessages, RemoveFileDetail } from './types';\nimport { removeFile, cancelFileUpload } from './utils';\nimport { formatFileSize, truncateString, getFileType } from './utils/nile-file-preview.util';\nimport { NileFilePreview } from './nile-file-preview';\n\n export function getHorizontalUploadingState(\n file: File,\n uploadStatus: number,\n nileFilePreview: NileFilePreview\n ): TemplateResult {\n return html`\n <div class=\"uploading\" part=\"horizontal-uploading-state\">\n <nile-loader width=\"24\" height=\"24\"></nile-loader>\n <div class=\"progress-bar-container\" part=\"horizontal-progress-bar-container\">\n <div class=\"progress-bar-percent\" part=\"horizontal-progress-bar-percent\">\n <p part=\"horizontal-progress-bar-percent-text\">Uploading File...</p>\n <p part=\"horizontal-progress-bar-percent-value\">${uploadStatus}%</p>\n </div>\n <nile-progress-bar\n part=\"horizontal-progress-bar\"\n .value=\"${uploadStatus}\"\n ></nile-progress-bar>\n <p class=\"horizontal-file-name\" part=\"horizontal-file-name\">${file.name}</p>\n </div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e, nileFilePreview)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n }\n\nexport function getHorizontalPreviewState(\n url: string,\n file: File,\n originalUrl: string,\n showFileType: boolean\n): TemplateResult {\n return html`\n <div class=\"preview horizontal-div\" part=\"horizontal-preview-state\">\n <div class=\"preview-inner\" part=\"horizontal-preview-inner\">\n <div class=\"preview-image-container\" part=\"horizontal-preview-image-container\">\n <img\n class=\"image-preview\"\n src=${url}\n alt=${file.name}\n part=\"horizontal-preview-image\"\n />\n </div>\n <div class=\"preview-file-info\" part=\"horizontal-preview-file-info\">\n <p part=\"horizontal-preview-file-info-name\">\n <slot name=\"file-name\">${file.name}</slot>\n </p>\n <p part=\"horizontal-preview-file-info-type\">\n <slot name=\"file-type\">${getFileType(file, showFileType)}</slot>\n &#8226;\n <slot name=\"file-size\">${formatFileSize(Number(file.size))}</slot>\n </p>\n </div>\n </div>\n <div class=\"preview-actions\" part=\"horizontal-preview-actions\">\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancel-icon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon\"\n part=\"horizontal-preview-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n </div>\n `;\n}\n\nexport function getHorizontalNoPreviewState(\n file: File,\n originalUrl: string,\n showFileType: boolean\n): TemplateResult {\n return html`\n <div class=\"no-preview horizontal-div\" part=\"horizontal-no-preview-state\">\n <div class=\"no-preview-container\" part=\"horizontal-no-preview-container\">\n <div class=\"document-icon\" part=\"horizontal-no-preview-document-icon\">\n <nile-icon name=\"general\" size=\"20\" color=\"var(--nile-colors-blue-500)\"></nile-icon>\n </div>\n <div class=\"preview-file-info\" part=\"horizontal-no-preview-file-info\">\n <p part=\"horizontal-no-preview-file-info-name\">\n <slot name=\"file-name\">${file.name}</slot>\n </p>\n <p part=\"horizontal-no-preview-file-info-type\">\n <slot name=\"file-type\">${getFileType(file, showFileType)}</slot>\n &#8226;\n <slot name=\"file-size\">${formatFileSize(Number(file.size))}</slot>\n </p>\n </div>\n </div>\n <div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon\"\n part=\"horizontal-no-preview-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n </div>\n `;\n}\n\nexport function getHorizontalErrorState(\n file: File,\n errorMessage: string,\n originalUrl: string,\n nileFilePreview: NileFilePreview\n): TemplateResult {\n truncateString(nileFilePreview);\n return html`\n <div class=\"error horizontal-div\" part=\"horizontal-error-state\">\n <div class=\"error-container\" part=\"horizontal-error-container\">\n <div class=\"error-icon\" part=\"horizontal-error-icon\">\n <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n </div>\n <div class=\"file-info\" part=\"horizontal-error-file-info\">\n <p class=\"horizontal-file-name\" part=\"horizontal-error-file-info-name\">\n <slot name=\"file-name\">\n ${file.name}\n </slot>\n </p>\n ${\n nileFilePreview.isStringTruncated\n ? html`<nile-lite-tooltip .content=${errorMessage}>\n <span>${errorMessage}</span>\n </nile-lite-tooltip>`\n : html`<span>${errorMessage}</span>`\n }\n </div>\n </div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon\"\n part=\"horizontal-error-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\n// vertical states\nexport function getVerticalUploadingState(\n file: File,\n uploadStatus: number,\n nileFilePreview: NileFilePreview\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-uploading\" part=\"vertical-uploading-state\">\n <div class=\"loading\" part=\"vertical-loading\">\n <nile-loader width=\"24\" height=\"24\"></nile-loader>\n </div>\n\n <div class=\"progress-bar-container\" part=\"vertical-progress-bar-container\">\n <div class=\"progress-bar-percent\" part=\"vertical-progress-bar-percent\">\n <p part=\"vertical-progress-bar-percent-text\">Uploading...</p>\n <p part=\"vertical-progress-bar-percent-value\">${uploadStatus}%</p>\n </div>\n <nile-progress-bar value=${uploadStatus}></nile-progress-bar>\n <p class=\"vertical-file-name\" part=\"vertical-file-name\">${file.name}</p>\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e, nileFilePreview)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon corner-icon\"\n part=\"vertical-uploading-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\n\nexport function getVerticalPreviewState(\n url: string,\n file: File,\n originalUrl: string,\n showFileType: boolean\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-preview\" part=\"vertical-preview-state\">\n <div part=\"vertical-preview-image-container\">\n <img\n class=\"image-preview\"\n part=\"vertical-preview-image\"\n src=${url}\n alt=${file.name}\n />\n </div>\n\n <div class=\"content-container\" part=\"vertical-preview-file-info\">\n <p part=\"vertical-preview-file-info-name\">\n <slot name=\"file-name\">${file.name}</slot>\n </p>\n <p part=\"vertical-preview-file-info-type\">\n <slot name=\"file-type\">${getFileType(file, showFileType)}</slot>\n &#8226;\n <slot name=\"file-size\">${formatFileSize(Number(file.size))}</slot>\n </p>\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon corner-icon\"\n part=\"vertical-preview-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\nexport function getVerticalNoPreviewState(\n file: File,\n originalUrl: string,\n showFileType: boolean\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-no-preview\" part=\"vertical-no-preview-state\">\n <div class=\"vertical-document-icon\" part=\"vertical-no-preview-document-icon\">\n <nile-icon name=\"general\" size=\"20\" color=\"var(--nile-colors-blue-500)\"></nile-icon>\n </div>\n\n <div class=\"content-container\" part=\"vertical-no-preview-file-info\">\n <p part=\"vertical-no-preview-file-info-name\">\n <slot name=\"file-name\">${file.name}</slot>\n </p>\n <p part=\"vertical-no-preview-file-info-type\">\n <slot name=\"file-type\">${getFileType(file, showFileType)}</slot>\n &#8226;\n <slot name=\"file-size\">${formatFileSize(Number(file.size))}</slot>\n </p>\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon corner-icon\"\n part=\"vertical-no-preview-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\nexport function getVerticalErrorState(\n file: File,\n errorMessage: string,\n originalUrl: string,\n nileFilePreview: NileFilePreview\n): TemplateResult {\n truncateString(nileFilePreview);\n return html`\n <div class=\"vertical-div vertical-error\" part=\"vertical-error-state\">\n <div class=\"vertical-document-icon error-bg\" part=\"vertical-error-document-icon\">\n <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n </div>\n\n <div class=\"file-info-vertical-state\" part=\"vertical-error-file-info\">\n <p class=\"vertical-file-name\" part=\"vertical-error-file-info-name\">\n <slot name=\"file-name\">${file.name}</slot>\n </p>\n ${\n nileFilePreview.isStringTruncated\n ? html`<nile-lite-tooltip .content=${errorMessage}>\n <span>${errorMessage}</span>\n </nile-lite-tooltip>`\n : html`<span>${errorMessage}</span>`\n }\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon corner-icon\"\n part=\"vertical-error-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n"]}
1
+ {"version":3,"file":"nile-file-preview.template.js","sourceRoot":"","sources":["../../../src/nile-file-preview/nile-file-preview.template.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Template File for nile-preview component\n */\n\nimport './nile-file-preview.css';\nimport { html, TemplateResult } from 'lit';\nimport { FilePreviewErrorMessages, RemoveFileDetail } from './types';\nimport { removeFile, cancelFileUpload } from './utils';\nimport { formatFileSize, truncateString, getFileType } from './utils/nile-file-preview.util';\nimport { NileFilePreview } from './nile-file-preview';\n\n export function getHorizontalUploadingState(\n file: File,\n uploadStatus: number,\n nileFilePreview: NileFilePreview\n ): TemplateResult {\n return html`\n <div class=\"uploading\" part=\"horizontal-uploading-state\">\n <nile-loader width=\"24\" height=\"24\"></nile-loader>\n <div class=\"progress-bar-container\" part=\"horizontal-progress-bar-container\">\n <div class=\"progress-bar-percent\" part=\"horizontal-progress-bar-percent\">\n <p part=\"horizontal-progress-bar-percent-text\">Uploading File...</p>\n <p part=\"horizontal-progress-bar-percent-value\">${uploadStatus}%</p>\n </div>\n <nile-progress-bar\n part=\"horizontal-progress-bar\"\n .value=\"${uploadStatus}\"\n ></nile-progress-bar>\n <p class=\"horizontal-file-name\" part=\"horizontal-file-name\">${file.name}</p>\n </div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e, nileFilePreview)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n }\n\nexport function getHorizontalPreviewState(\n url: string,\n file: File,\n originalUrl: string,\n showFileType: boolean\n): TemplateResult {\n return html`\n <div class=\"preview horizontal-div\" part=\"horizontal-preview-state\">\n <div class=\"preview-inner\" part=\"horizontal-preview-inner\">\n <div class=\"preview-image-container\" part=\"horizontal-preview-image-container\">\n <img\n class=\"image-preview\"\n src=${url}\n alt=${file.name}\n part=\"horizontal-preview-image\"\n />\n </div>\n <div class=\"preview-file-info\" part=\"horizontal-preview-file-info\">\n <p part=\"horizontal-preview-file-info-name\">\n <slot name=\"file-name\">${file.name}</slot>\n </p>\n <p part=\"horizontal-preview-file-info-type\">\n <slot name=\"file-type\">${getFileType(file, showFileType)}</slot>\n &#8226;\n <slot name=\"file-size\">${formatFileSize(Number(file.size))}</slot>\n </p>\n </div>\n </div>\n <div class=\"preview-actions\" part=\"horizontal-preview-actions\">\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancel-icon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon\"\n part=\"horizontal-preview-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n </div>\n `;\n}\n\nexport function getHorizontalNoPreviewState(\n file: File,\n originalUrl: string,\n showFileType: boolean\n): TemplateResult {\n return html`\n <div class=\"no-preview horizontal-div\" part=\"horizontal-no-preview-state\">\n <div class=\"no-preview-container\" part=\"horizontal-no-preview-container\">\n <div class=\"document-icon\" part=\"horizontal-no-preview-document-icon\">\n <nile-icon name=\"general\" size=\"20\" color=\"var(--nile-colors-blue-500, var(--ng-colors-fg-brand-secondary-500))\"></nile-icon>\n </div>\n <div class=\"preview-file-info\" part=\"horizontal-no-preview-file-info\">\n <p part=\"horizontal-no-preview-file-info-name\">\n <slot name=\"file-name\">${file.name}</slot>\n </p>\n <p part=\"horizontal-no-preview-file-info-type\">\n <slot name=\"file-type\">${getFileType(file, showFileType)}</slot>\n &#8226;\n <slot name=\"file-size\">${formatFileSize(Number(file.size))}</slot>\n </p>\n </div>\n </div>\n <div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon\"\n part=\"horizontal-no-preview-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n </div>\n `;\n}\n\nexport function getHorizontalErrorState(\n file: File,\n errorMessage: string,\n originalUrl: string,\n nileFilePreview: NileFilePreview\n): TemplateResult {\n truncateString(nileFilePreview);\n return html`\n <div class=\"error horizontal-div\" part=\"horizontal-error-state\">\n <div class=\"error-container\" part=\"horizontal-error-container\">\n <div class=\"error-icon\" part=\"horizontal-error-icon\">\n <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))\"></nile-icon>\n </div>\n <div class=\"file-info\" part=\"horizontal-error-file-info\">\n <p class=\"horizontal-file-name\" part=\"horizontal-error-file-info-name\">\n <slot name=\"file-name\">\n ${file.name}\n </slot>\n </p>\n ${\n nileFilePreview.isStringTruncated\n ? html`<nile-lite-tooltip .content=${errorMessage}>\n <span>${errorMessage}</span>\n </nile-lite-tooltip>`\n : html`<span>${errorMessage}</span>`\n }\n </div>\n </div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon\"\n part=\"horizontal-error-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\n// vertical states\nexport function getVerticalUploadingState(\n file: File,\n uploadStatus: number,\n nileFilePreview: NileFilePreview\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-uploading\" part=\"vertical-uploading-state\">\n <div class=\"loading\" part=\"vertical-loading\">\n <nile-loader width=\"24\" height=\"24\"></nile-loader>\n </div>\n\n <div class=\"progress-bar-container\" part=\"vertical-progress-bar-container\">\n <div class=\"progress-bar-percent\" part=\"vertical-progress-bar-percent\">\n <p part=\"vertical-progress-bar-percent-text\">Uploading...</p>\n <p part=\"vertical-progress-bar-percent-value\">${uploadStatus}%</p>\n </div>\n <nile-progress-bar value=${uploadStatus}></nile-progress-bar>\n <p class=\"vertical-file-name\" part=\"vertical-file-name\">${file.name}</p>\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e, nileFilePreview)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon corner-icon\"\n part=\"vertical-uploading-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\n\nexport function getVerticalPreviewState(\n url: string,\n file: File,\n originalUrl: string,\n showFileType: boolean\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-preview\" part=\"vertical-preview-state\">\n <div part=\"vertical-preview-image-container\">\n <img\n class=\"image-preview\"\n part=\"vertical-preview-image\"\n src=${url}\n alt=${file.name}\n />\n </div>\n\n <div class=\"content-container\" part=\"vertical-preview-file-info\">\n <p part=\"vertical-preview-file-info-name\">\n <slot name=\"file-name\">${file.name}</slot>\n </p>\n <p part=\"vertical-preview-file-info-type\">\n <slot name=\"file-type\">${getFileType(file, showFileType)}</slot>\n &#8226;\n <slot name=\"file-size\">${formatFileSize(Number(file.size))}</slot>\n </p>\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon corner-icon\"\n part=\"vertical-preview-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\nexport function getVerticalNoPreviewState(\n file: File,\n originalUrl: string,\n showFileType: boolean\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-no-preview\" part=\"vertical-no-preview-state\">\n <div class=\"vertical-document-icon\" part=\"vertical-no-preview-document-icon\">\n <nile-icon name=\"general\" size=\"20\" color=\"var(--nile-colors-blue-500, var(--ng-colors-fg-brand-secondary-500))\"></nile-icon>\n </div>\n\n <div class=\"content-container\" part=\"vertical-no-preview-file-info\">\n <p part=\"vertical-no-preview-file-info-name\">\n <slot name=\"file-name\">${file.name}</slot>\n </p>\n <p part=\"vertical-no-preview-file-info-type\">\n <slot name=\"file-type\">${getFileType(file, showFileType)}</slot>\n &#8226;\n <slot name=\"file-size\">${formatFileSize(Number(file.size))}</slot>\n </p>\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon corner-icon\"\n part=\"vertical-no-preview-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\nexport function getVerticalErrorState(\n file: File,\n errorMessage: string,\n originalUrl: string,\n nileFilePreview: NileFilePreview\n): TemplateResult {\n truncateString(nileFilePreview);\n return html`\n <div class=\"vertical-div vertical-error\" part=\"vertical-error-state\">\n <div class=\"vertical-document-icon error-bg\" part=\"vertical-error-document-icon\">\n <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))\"></nile-icon>\n </div>\n\n <div class=\"file-info-vertical-state\" part=\"vertical-error-file-info\">\n <p class=\"vertical-file-name\" part=\"vertical-error-file-info-name\">\n <slot name=\"file-name\">${file.name}</slot>\n </p>\n ${\n nileFilePreview.isStringTruncated\n ? html`<nile-lite-tooltip .content=${errorMessage}>\n <span>${errorMessage}</span>\n </nile-lite-tooltip>`\n : html`<span>${errorMessage}</span>`\n }\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon corner-icon\"\n part=\"vertical-error-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n"]}