@aquera/nile-elements 1.8.9 → 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 (64) hide show
  1. package/README.md +8 -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 +545 -519
  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-grid/nile-grid.css.cjs.js +1 -1
  29. package/dist/nile-grid/nile-grid.css.cjs.js.map +1 -1
  30. package/dist/nile-grid/nile-grid.css.esm.js +1 -1
  31. package/dist/nile-nav-tab/nile-nav-tab.css.cjs.js +1 -1
  32. package/dist/nile-nav-tab/nile-nav-tab.css.cjs.js.map +1 -1
  33. package/dist/nile-nav-tab/nile-nav-tab.css.esm.js +4 -0
  34. package/dist/nile-pagination/nile-pagination.cjs.js +1 -1
  35. package/dist/nile-pagination/nile-pagination.cjs.js.map +1 -1
  36. package/dist/nile-pagination/nile-pagination.esm.js +7 -4
  37. package/dist/src/nile-card/nile-card.css.js +0 -2
  38. package/dist/src/nile-card/nile-card.css.js.map +1 -1
  39. package/dist/src/nile-file-preview/nile-file-preview.css.js +87 -87
  40. package/dist/src/nile-file-preview/nile-file-preview.css.js.map +1 -1
  41. package/dist/src/nile-file-preview/nile-file-preview.template.js +4 -4
  42. package/dist/src/nile-file-preview/nile-file-preview.template.js.map +1 -1
  43. package/dist/src/nile-file-upload/nile-file-upload.css.js +124 -103
  44. package/dist/src/nile-file-upload/nile-file-upload.css.js.map +1 -1
  45. package/dist/src/nile-grid/nile-grid.css.js +1 -1
  46. package/dist/src/nile-grid/nile-grid.css.js.map +1 -1
  47. package/dist/src/nile-nav-tab/nile-nav-tab.css.js +4 -0
  48. package/dist/src/nile-nav-tab/nile-nav-tab.css.js.map +1 -1
  49. package/dist/src/nile-pagination/nile-pagination.d.ts +1 -0
  50. package/dist/src/nile-pagination/nile-pagination.js +9 -2
  51. package/dist/src/nile-pagination/nile-pagination.js.map +1 -1
  52. package/dist/src/version.js +1 -1
  53. package/dist/src/version.js.map +1 -1
  54. package/dist/tsconfig.tsbuildinfo +1 -1
  55. package/package.json +1 -1
  56. package/src/nile-card/nile-card.css.ts +0 -2
  57. package/src/nile-file-preview/nile-file-preview.css.ts +87 -87
  58. package/src/nile-file-preview/nile-file-preview.template.ts +4 -4
  59. package/src/nile-file-upload/nile-file-upload.css.ts +124 -103
  60. package/src/nile-grid/nile-grid.css.ts +1 -1
  61. package/src/nile-nav-tab/nile-nav-tab.css.ts +4 -0
  62. package/src/nile-pagination/nile-pagination.ts +6 -2
  63. package/vscode-html-custom-data.json +6 -1
  64. package/dist/index-6faafdf4.cjs.js.map +0 -1
package/dist/nile-file-preview/nile-file-preview.css.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- import{css as e}from"lit";const r=e`
1
+ import{css as r}from"lit";const e=r`
2
2
  :host {
3
3
  display: inline-block;
4
4
  width: 100%;
@@ -32,14 +32,14 @@ import{css as e}from"lit";const r=e`
32
32
  align-items: center;
33
33
  justify-content: space-between;
34
34
  gap: 6px;
35
- border-radius: var(--nile-radius-radius-xs);
36
- border: 1px dashed var(--nile-colors-neutral-500);
37
- color: var(--nile-colors-dark-900);
38
- background-color: var(--nile-colors-white-base);
35
+ border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
36
+ border: 1px dashed var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
37
+ color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
38
+ background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
39
39
  }
40
40
 
41
41
  .hover-state {
42
- border-color: var(--nile-colors-primary-600);
42
+ border-color: var(--nile-colors-primary-600, var(--ng-colors-border-brand-alt));
43
43
  }
44
44
 
45
45
  .vertical-div {
@@ -53,20 +53,20 @@ import{css as e}from"lit";const r=e`
53
53
  align-items: center;
54
54
  gap: 18px;
55
55
  padding: 12px;
56
- border-radius: var(--nile-radius-radius-xs);
57
- color: var(--nile-colors-dark-900);
58
- border: 1px dashed var(--nile-colors-neutral-500);
59
- background-color: var(--nile-colors-white-base);
56
+ border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
57
+ color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
58
+ border: 1px dashed var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
59
+ background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
60
60
  position: relative;
61
61
  margin-bottom: 10px;
62
62
  }
63
63
 
64
64
  .vertical-div:hover {
65
- border-color: var(--nile-colors-blue-500);
65
+ border-color: var(--nile-colors-blue-500, var(--ng-colors-border-brand));
66
66
  }
67
67
 
68
68
  .outer-div-border {
69
- border: 1px solid var(--nile-colors-neutral-400);
69
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
70
70
  }
71
71
 
72
72
  .inner-div {
@@ -111,13 +111,13 @@ import{css as e}from"lit";const r=e`
111
111
  align-items: center;
112
112
  gap: 18px;
113
113
  box-sizing: border-box;
114
- border: 1px solid var(--nile-colors-neutral-400);
114
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
115
115
  border-radius: 4px;
116
- background-color: var(--nile-colors-white-base);
116
+ background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
117
117
  }
118
118
 
119
119
  .uploading:hover {
120
- border-color: var(--nile-colors-neutral-400);
120
+ border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
121
121
  }
122
122
 
123
123
  .progress-bar-container {
@@ -131,8 +131,8 @@ import{css as e}from"lit";const r=e`
131
131
  width: 100%;
132
132
  display: flex;
133
133
  justify-content: space-between;
134
- font-size: var(--nile-type-scale-2);
135
- font-weight: var(--nile-font-weight-regular);
134
+ font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
135
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
136
136
  }
137
137
 
138
138
  .progress-bar-container p {
@@ -140,8 +140,8 @@ import{css as e}from"lit";const r=e`
140
140
  }
141
141
 
142
142
  .progress-bar-container > p {
143
- font-size: var(--nile-type-scale-1);
144
- color: var(--nile-colors-dark-500);
143
+ font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
144
+ color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
145
145
  text-align: left;
146
146
  white-space: nowrap;
147
147
  text-overflow: ellipsis;
@@ -150,9 +150,9 @@ import{css as e}from"lit";const r=e`
150
150
  }
151
151
 
152
152
  .progress-bar-container .horizontal-file-name {
153
- font-size: var(--nile-type-scale-1);
154
- font-weight: var(--nile-font-weight-regular);
155
- color: var(--nile-colors-dark-500);
153
+ font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
154
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
155
+ color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
156
156
  text-align: left;
157
157
  white-space: nowrap;
158
158
  overflow: hidden;
@@ -161,9 +161,9 @@ import{css as e}from"lit";const r=e`
161
161
  }
162
162
 
163
163
  .progress-bar-container .vertical-file-name {
164
- font-size: var(--nile-type-scale-1);
165
- font-weight: var(--nile-font-weight-regular);
166
- color: var(--nile-colors-dark-500);
164
+ font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
165
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
166
+ color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
167
167
  text-align: left;
168
168
  white-space: nowrap;
169
169
  overflow: hidden;
@@ -173,11 +173,11 @@ import{css as e}from"lit";const r=e`
173
173
 
174
174
  /* PREVIEW STATE */
175
175
  .preview {
176
- border: 1px solid var(--nile-colors-neutral-400);
176
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
177
177
  }
178
178
 
179
179
  .preview:hover {
180
- border-color: var(--nile-colors-neutral-400);
180
+ border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
181
181
  }
182
182
 
183
183
  .preview-inner {
@@ -195,8 +195,8 @@ import{css as e}from"lit";const r=e`
195
195
  height: 42px;
196
196
  width: 42px;
197
197
  object-fit: contain;
198
- border-radius: var(--nile-radius-radius-xs);
199
- border: 1px solid var(--nile-colors-neutral-400);
198
+ border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
199
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
200
200
  }
201
201
 
202
202
  .preview nile-icon:hover {
@@ -205,11 +205,11 @@ import{css as e}from"lit";const r=e`
205
205
 
206
206
  /* NO PREVIEW STATE */
207
207
  .no-preview {
208
- border: 1px solid var(--nile-colors-neutral-400);
208
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
209
209
  }
210
210
 
211
211
  .no-preview:hover {
212
- border-color: var(--nile-colors-neutral-400);
212
+ border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
213
213
  }
214
214
 
215
215
  .no-preview-container {
@@ -221,13 +221,13 @@ import{css as e}from"lit";const r=e`
221
221
  .document-icon {
222
222
  height: 40px;
223
223
  width: 40px;
224
- border-radius: var(--nile-radius-radius-xs);
224
+ border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
225
225
  padding: 2px 3px 2px 3px;
226
226
  display: flex;
227
227
  justify-content: center;
228
228
  align-items: center;
229
- border: 1px solid var(--nile-colors-blue-400);
230
- background-color: var(--nile-colors-blue-100);
229
+ border: 1px solid var(--nile-colors-blue-400, var(--ng-componentcolors-utility-blue-400));
230
+ background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));
231
231
  }
232
232
 
233
233
  .document-icon nile-icon {
@@ -246,8 +246,8 @@ import{css as e}from"lit";const r=e`
246
246
 
247
247
  .preview-file-info p {
248
248
  margin: 0px;
249
- font-size: var(--nile-type-scale-3);
250
- font-weight: var(--nile-font-weight-regular);
249
+ font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
250
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
251
251
  text-align: left;
252
252
  white-space: nowrap;
253
253
  text-overflow: ellipsis;
@@ -256,9 +256,9 @@ import{css as e}from"lit";const r=e`
256
256
  }
257
257
 
258
258
  .preview-file-info p:last-of-type{
259
- color: var(--nile-colors-neutral-700);
260
- font-size: var(--nile-type-scale-2);
261
- font-weight: var(--nile-font-weight-regular);
259
+ color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
260
+ font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
261
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
262
262
  text-align: left;
263
263
  white-space: nowrap;
264
264
  text-overflow: ellipsis;
@@ -272,11 +272,11 @@ import{css as e}from"lit";const r=e`
272
272
 
273
273
  /* ERROR STATE */
274
274
  .error {
275
- border: 1px solid var(--nile-colors-neutral-400);
275
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
276
276
  }
277
277
 
278
278
  .error:hover {
279
- border-color: var(--nile-colors-neutral-400);
279
+ border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
280
280
  }
281
281
 
282
282
  .error-container {
@@ -289,13 +289,13 @@ import{css as e}from"lit";const r=e`
289
289
  .error-icon {
290
290
  height: 40px;
291
291
  width: 40px;
292
- border-radius: var(--nile-radius-radius-xs);
292
+ border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
293
293
  padding: 2px 3px 2px 3px;
294
294
  display: flex;
295
295
  justify-content: center;
296
296
  align-items: center;
297
- border: 1px solid var(--nile-colors-red-400);
298
- background-color: var(--nile-colors-red-100);
297
+ border: 1px solid var(--nile-colors-red-400, var(--ng-colors-border-error-subtle));
298
+ background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-secondary));
299
299
  }
300
300
 
301
301
  .error-icon nile-icon {
@@ -314,8 +314,8 @@ import{css as e}from"lit";const r=e`
314
314
 
315
315
  .file-info p {
316
316
  margin: 0px;
317
- font-size: var(--nile-type-scale-3);
318
- font-weight: var(--nile-font-weight-regular);
317
+ font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
318
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
319
319
  text-align: left;
320
320
  white-space: nowrap;
321
321
  overflow: hidden;
@@ -324,9 +324,9 @@ import{css as e}from"lit";const r=e`
324
324
  }
325
325
 
326
326
  .file-info nile-tooltip span, .file-info span {
327
- color: var(--nile-colors-red-700);
328
- font-size: var(--nile-type-scale-2);
329
- font-weight: var(--nile-font-weight-regular);
327
+ color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
328
+ font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
329
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
330
330
  max-width: 90%;
331
331
  white-space: nowrap;
332
332
  text-overflow: ellipsis;
@@ -339,9 +339,9 @@ import{css as e}from"lit";const r=e`
339
339
  }
340
340
 
341
341
  .file-info .horizontal-file-name {
342
- font-size: var(--nile-type-scale-3);
343
- font-weight: var(--nile-font-weight-regular);
344
- color: var(--nile-colors-dark-900);
342
+ font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
343
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
344
+ color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
345
345
  text-align: left;
346
346
  white-space: nowrap;
347
347
  overflow: hidden;
@@ -369,7 +369,7 @@ import{css as e}from"lit";const r=e`
369
369
  }
370
370
 
371
371
  .content-container h4 {
372
- font-weight: var(--nile-font-weight-regular);
372
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
373
373
  text-align: center;
374
374
  white-space: nowrap;
375
375
  text-overflow: ellipsis;
@@ -379,8 +379,8 @@ import{css as e}from"lit";const r=e`
379
379
 
380
380
  .content-container p:first-child {
381
381
  margin: 0px;
382
- font-size: var(--nile-type-scale-3);
383
- font-weight: var(--nile-font-weight-regular);
382
+ font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
383
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
384
384
  text-align: center;
385
385
  white-space: nowrap;
386
386
  text-overflow: ellipsis;
@@ -390,9 +390,9 @@ import{css as e}from"lit";const r=e`
390
390
 
391
391
  .content-container p:last-child {
392
392
  margin: 0px;
393
- font-size: var(--nile-type-scale-2);
394
- font-weight: var(--nile-font-weight-regular);
395
- color: var(--nile-colors-neutral-700);
393
+ font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
394
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
395
+ color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
396
396
  text-align: center;
397
397
  white-space: nowrap;
398
398
  text-overflow: ellipsis;
@@ -407,10 +407,10 @@ import{css as e}from"lit";const r=e`
407
407
  justify-content: center;
408
408
  align-items: center;
409
409
  gap:18px;
410
- font-size: var(--nile-type-scale-3);
411
- color: var(--nile-colors-blue-700);
412
- background-color: var(--nile-colors-blue-100);
413
- border-color: var(--nile-colors-blue-500);
410
+ font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
411
+ color: var(--nile-colors-blue-700, var(--ng-colors-text-brand-secondary-700));
412
+ background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));
413
+ border-color: var(--nile-colors-blue-500, var(--ng-colors-border-brand));
414
414
  }
415
415
 
416
416
  /* Uploading State */
@@ -419,11 +419,11 @@ import{css as e}from"lit";const r=e`
419
419
  flex-direction: column;
420
420
  justify-content: flex-end;
421
421
  align-items: center;
422
- border: 1px solid var(--nile-colors-neutral-400);
422
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
423
423
  }
424
424
 
425
425
  .vertical-uploading:hover {
426
- border-color: var(--nile-colors-neutral-400);
426
+ border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
427
427
  }
428
428
 
429
429
  .loading {
@@ -441,28 +441,28 @@ import{css as e}from"lit";const r=e`
441
441
 
442
442
  /* Preview State */
443
443
  .vertical-preview {
444
- border: 1px solid var(--nile-colors-neutral-400);
444
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
445
445
  }
446
446
 
447
447
  .vertical-preview:hover {
448
- border-color: var(--nile-colors-neutral-400);
448
+ border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
449
449
  }
450
450
 
451
451
  .image-preview {
452
- border: 1px solid var(--nile-colors-neutral-400);
452
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
453
453
  object-fit: cover;
454
454
  width: 80px;
455
455
  height: 80px;
456
- border-radius: var(--nile-radius-radius-xs);
456
+ border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
457
457
  }
458
458
 
459
459
  /* Vertical No Preview State */
460
460
  .vertical-no-preview {
461
- border: 1px solid var(--nile-colors-neutral-400);
461
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
462
462
  }
463
463
 
464
464
  .vertical-no-preview:hover {
465
- border-color: var(--nile-colors-neutral-400);
465
+ border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
466
466
  }
467
467
 
468
468
  .vertical-document-icon {
@@ -472,23 +472,23 @@ import{css as e}from"lit";const r=e`
472
472
  display: flex;
473
473
  justify-content: center;
474
474
  align-items: center;
475
- border-radius: var(--nile-radius-radius-xs);
476
- border: 1px solid var(--nile-colors-blue-400);
477
- background-color: var(--nile-colors-blue-100);
475
+ border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
476
+ border: 1px solid var(--nile-colors-blue-400, var(--ng-componentcolors-utility-blue-400));
477
+ background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));
478
478
  }
479
479
 
480
480
  /* Veritcal Error State */
481
481
  .vertical-error {
482
- border: 1px solid var(--nile-colors-neutral-400);
482
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
483
483
  }
484
484
 
485
485
  .vertical-error:hover {
486
- border-color: var(--nile-colors-neutral-400);
486
+ border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
487
487
  }
488
488
 
489
489
  .error-bg {
490
- background-color: var(--nile-colors-red-100);
491
- border: 1px solid var(--nile-colors-red-400);
490
+ background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-secondary));
491
+ border: 1px solid var(--nile-colors-red-400, var(--ng-colors-border-error-subtle));
492
492
  }
493
493
 
494
494
  .file-info-vertical-state {
@@ -498,8 +498,8 @@ import{css as e}from"lit";const r=e`
498
498
 
499
499
  .file-info-vertical-state p {
500
500
  margin: 0px;
501
- font-size: var(--nile-type-scale-3);
502
- font-weight: var(--nile-font-weight-regular);
501
+ font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
502
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
503
503
  padding-bottom: 6px;
504
504
  text-align: center;
505
505
  white-space: nowrap;
@@ -509,9 +509,9 @@ import{css as e}from"lit";const r=e`
509
509
  }
510
510
 
511
511
  .file-info-vertical-state nile-tooltip span, .file-info-vertical-state span {
512
- color: var(--nile-colors-red-700);
513
- font-size: var(--nile-type-scale-2);
514
- font-weight: var(--nile-font-weight-regular);
512
+ color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
513
+ font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
514
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
515
515
  text-align: center;
516
516
  white-space: nowrap;
517
517
  text-overflow: ellipsis;
@@ -527,14 +527,14 @@ import{css as e}from"lit";const r=e`
527
527
  align-items: center;
528
528
  gap: 8px;
529
529
  margin: 0px;
530
- font-size: var(--nile-type-scale-3);
531
- font-weight: var(--nile-font-weight-regular);
530
+ font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
531
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
532
532
  text-align: center
533
533
  }
534
534
 
535
535
  .error-p {
536
- color: var(--nile-colors-red-700);
537
- font-size: var(--nile-type-scale-2);
536
+ color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
537
+ font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
538
538
  width: 216px;
539
539
  white-space: nowrap;
540
540
  overflow: hidden;
@@ -560,8 +560,8 @@ import{css as e}from"lit";const r=e`
560
560
  min-width: 230px;
561
561
  max-height: 200px;
562
562
  overflow-y: auto;
563
- border: 1px solid var(--nile-colors-neutral-700);
564
- border-radius: var(--nile-radius-radius-xs);
563
+ border: 1px solid var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
564
+ border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
565
565
  scrollbar-width: none;
566
566
  padding: 12px;
567
567
  }
@@ -576,4 +576,4 @@ import{css as e}from"lit";const r=e`
576
576
  .preview-file-info p {
577
577
  width: 100%;
578
578
  }
579
- `;export{r as s};
579
+ `;export{e as s};
package/dist/nile-file-preview/nile-file-preview.template.cjs.js CHANGED
@@ -1,2 +1,2 @@
1
- System.register(["./nile-file-preview.css.cjs.js","lit","./utils/nile-file-preview.util.cjs.js","./types/nile-file-preview.enums.cjs.js"],function(_export,_context){"use strict";var i,e,r,n,a,o,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,_templateObject8,_templateObject9,_templateObject10,_templateObject11,_templateObject12;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function l(r,n,a){return i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\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\">","%</p>\n </div>\n <nile-progress-bar\n part=\"horizontal-progress-bar\"\n .value=\"","\"\n ></nile-progress-bar>\n <p class=\"horizontal-file-name\" part=\"horizontal-file-name\">","</p>\n </div>\n <slot @click="," name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon\"\n ></nile-icon>\n </slot>\n </div>\n "])),n,n,r.name,function(i){return e(r,i,a);});}function t(e,o,l,t){return i(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\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=","\n alt=","\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\">","</slot>\n </p>\n <p part=\"horizontal-preview-file-info-type\">\n <slot name=\"file-type\">","</slot>\n &#8226;\n <slot name=\"file-size\">","</slot>\n </p>\n </div>\n </div>\n <div class=\"preview-actions\" part=\"horizontal-preview-actions\">\n <slot @click="," 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 "])),e,o.name,o.name,r(o,t),n(Number(o.size)),function(i){return a(o,i,l);});}function c(e,o,l){return i(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\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\">","</slot>\n </p>\n <p part=\"horizontal-no-preview-file-info-type\">\n <slot name=\"file-type\">","</slot>\n &#8226;\n <slot name=\"file-size\">","</slot>\n </p>\n </div>\n </div>\n <div>\n <slot @click="," 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 "])),e.name,r(e,l),n(Number(e.size)),function(i){return a(e,i,o);});}function s(e,r,n,l){return o(l),i(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\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 ","\n </slot>\n </p>\n ","\n </div>\n </div>\n <slot @click="," 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 "])),e.name,l.isStringTruncated?i(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["<nile-lite-tooltip .content=",">\n <span>","</span>\n </nile-lite-tooltip>"])),r,r):i(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["<span>","</span>"])),r),function(i){return a(e,i,n);});}function p(r,n,a){return i(_templateObject7||(_templateObject7=_taggedTemplateLiteral(["\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\">","%</p>\n </div>\n <nile-progress-bar value=","></nile-progress-bar>\n <p class=\"vertical-file-name\" part=\"vertical-file-name\">","</p>\n </div>\n\n <slot @click="," 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,r.name,function(i){return e(r,i,a);});}function v(e,o,l,t){return i(_templateObject8||(_templateObject8=_taggedTemplateLiteral(["\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=","\n alt=","\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\">","</slot>\n </p>\n <p part=\"vertical-preview-file-info-type\">\n <slot name=\"file-type\">","</slot>\n &#8226;\n <slot name=\"file-size\">","</slot>\n </p>\n </div>\n\n <slot @click="," 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 "])),e,o.name,o.name,r(o,t),n(Number(o.size)),function(i){return a(o,i,l);});}function d(e,o,l){return i(_templateObject9||(_templateObject9=_taggedTemplateLiteral(["\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\">","</slot>\n </p>\n <p part=\"vertical-no-preview-file-info-type\">\n <slot name=\"file-type\">","</slot>\n &#8226;\n <slot name=\"file-size\">","</slot>\n </p>\n </div>\n\n <slot @click="," 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 "])),e.name,r(e,l),n(Number(e.size)),function(i){return a(e,i,o);});}function m(e,r,n,l){return o(l),i(_templateObject10||(_templateObject10=_taggedTemplateLiteral(["\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\">","</slot>\n </p>\n ","\n </div>\n\n <slot @click="," 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 "])),e.name,l.isStringTruncated?i(_templateObject11||(_templateObject11=_taggedTemplateLiteral(["<nile-lite-tooltip .content=",">\n <span>","</span>\n </nile-lite-tooltip>"])),r,r):i(_templateObject12||(_templateObject12=_taggedTemplateLiteral(["<span>","</span>"])),r),function(i){return a(e,i,n);});}_export({a:p,b:s,c:m,d:t,e:v,f:c,g:l,h:d});return{setters:[function(_nileFilePreviewCssCjsJs){},function(_lit){i=_lit.html;},function(_utilsNileFilePreviewUtilCjsJs){e=_utilsNileFilePreviewUtilCjsJs.c;r=_utilsNileFilePreviewUtilCjsJs.g;n=_utilsNileFilePreviewUtilCjsJs.f;a=_utilsNileFilePreviewUtilCjsJs.r;o=_utilsNileFilePreviewUtilCjsJs.t;},function(_typesNileFilePreviewEnumsCjsJs){}],execute:function execute(){}};});
1
+ System.register(["./nile-file-preview.css.cjs.js","lit","./utils/nile-file-preview.util.cjs.js","./types/nile-file-preview.enums.cjs.js"],function(_export,_context){"use strict";var e,i,r,n,o,a,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,_templateObject8,_templateObject9,_templateObject10,_templateObject11,_templateObject12;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function l(r,n,o){return e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\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\">","%</p>\n </div>\n <nile-progress-bar\n part=\"horizontal-progress-bar\"\n .value=\"","\"\n ></nile-progress-bar>\n <p class=\"horizontal-file-name\" part=\"horizontal-file-name\">","</p>\n </div>\n <slot @click="," name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon\"\n ></nile-icon>\n </slot>\n </div>\n "])),n,n,r.name,function(e){return i(r,e,o);});}function t(i,a,l,t){return e(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\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=","\n alt=","\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\">","</slot>\n </p>\n <p part=\"horizontal-preview-file-info-type\">\n <slot name=\"file-type\">","</slot>\n &#8226;\n <slot name=\"file-size\">","</slot>\n </p>\n </div>\n </div>\n <div class=\"preview-actions\" part=\"horizontal-preview-actions\">\n <slot @click="," 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 "])),i,a.name,a.name,r(a,t),n(Number(a.size)),function(e){return o(a,e,l);});}function c(i,a,l){return e(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\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\">","</slot>\n </p>\n <p part=\"horizontal-no-preview-file-info-type\">\n <slot name=\"file-type\">","</slot>\n &#8226;\n <slot name=\"file-size\">","</slot>\n </p>\n </div>\n </div>\n <div>\n <slot @click="," 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 "])),i.name,r(i,l),n(Number(i.size)),function(e){return o(i,e,a);});}function s(i,r,n,l){return a(l),e(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\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 ","\n </slot>\n </p>\n ","\n </div>\n </div>\n <slot @click="," 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 "])),i.name,l.isStringTruncated?e(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["<nile-lite-tooltip .content=",">\n <span>","</span>\n </nile-lite-tooltip>"])),r,r):e(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["<span>","</span>"])),r),function(e){return o(i,e,n);});}function p(r,n,o){return e(_templateObject7||(_templateObject7=_taggedTemplateLiteral(["\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\">","%</p>\n </div>\n <nile-progress-bar value=","></nile-progress-bar>\n <p class=\"vertical-file-name\" part=\"vertical-file-name\">","</p>\n </div>\n\n <slot @click="," 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,r.name,function(e){return i(r,e,o);});}function v(i,a,l,t){return e(_templateObject8||(_templateObject8=_taggedTemplateLiteral(["\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=","\n alt=","\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\">","</slot>\n </p>\n <p part=\"vertical-preview-file-info-type\">\n <slot name=\"file-type\">","</slot>\n &#8226;\n <slot name=\"file-size\">","</slot>\n </p>\n </div>\n\n <slot @click="," 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 "])),i,a.name,a.name,r(a,t),n(Number(a.size)),function(e){return o(a,e,l);});}function d(i,a,l){return e(_templateObject9||(_templateObject9=_taggedTemplateLiteral(["\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\">","</slot>\n </p>\n <p part=\"vertical-no-preview-file-info-type\">\n <slot name=\"file-type\">","</slot>\n &#8226;\n <slot name=\"file-size\">","</slot>\n </p>\n </div>\n\n <slot @click="," 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 "])),i.name,r(i,l),n(Number(i.size)),function(e){return o(i,e,a);});}function m(i,r,n,l){return a(l),e(_templateObject10||(_templateObject10=_taggedTemplateLiteral(["\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\">","</slot>\n </p>\n ","\n </div>\n\n <slot @click="," 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 "])),i.name,l.isStringTruncated?e(_templateObject11||(_templateObject11=_taggedTemplateLiteral(["<nile-lite-tooltip .content=",">\n <span>","</span>\n </nile-lite-tooltip>"])),r,r):e(_templateObject12||(_templateObject12=_taggedTemplateLiteral(["<span>","</span>"])),r),function(e){return o(i,e,n);});}_export({a:p,b:s,c:m,d:t,e:v,f:c,g:l,h:d});return{setters:[function(_nileFilePreviewCssCjsJs){},function(_lit){e=_lit.html;},function(_utilsNileFilePreviewUtilCjsJs){i=_utilsNileFilePreviewUtilCjsJs.c;r=_utilsNileFilePreviewUtilCjsJs.g;n=_utilsNileFilePreviewUtilCjsJs.f;o=_utilsNileFilePreviewUtilCjsJs.r;a=_utilsNileFilePreviewUtilCjsJs.t;},function(_typesNileFilePreviewEnumsCjsJs){}],execute:function execute(){}};});
2
2
  //# sourceMappingURL=nile-file-preview.template.cjs.js.map
package/dist/nile-file-preview/nile-file-preview.template.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nile-file-preview.template.cjs.js","sources":["../../../src/nile-file-preview/nile-file-preview.template.ts"],"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"],"names":["getHorizontalUploadingState","file","uploadStatus","nileFilePreview","html","_templateObject","_taggedTemplateLiteral","name","e","cancelFileUpload","getHorizontalPreviewState","url","originalUrl","showFileType","_templateObject2","getFileType","formatFileSize","Number","size","removeFile","getHorizontalNoPreviewState","_templateObject3","getHorizontalErrorState","errorMessage","truncateString","_templateObject4","isStringTruncated","_templateObject5","_templateObject6","getVerticalUploadingState","_templateObject7","getVerticalPreviewState","_templateObject8","getVerticalNoPreviewState","_templateObject9","getVerticalErrorState","_templateObject10","_templateObject11","_templateObject12","_export","a"],"mappings":"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"}
1
+ {"version":3,"file":"nile-file-preview.template.cjs.js","sources":["../../../src/nile-file-preview/nile-file-preview.template.ts"],"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"],"names":["getHorizontalUploadingState","file","uploadStatus","nileFilePreview","html","_templateObject","_taggedTemplateLiteral","name","e","cancelFileUpload","getHorizontalPreviewState","url","originalUrl","showFileType","_templateObject2","getFileType","formatFileSize","Number","size","removeFile","getHorizontalNoPreviewState","_templateObject3","getHorizontalErrorState","errorMessage","truncateString","_templateObject4","isStringTruncated","_templateObject5","_templateObject6","getVerticalUploadingState","_templateObject7","getVerticalPreviewState","_templateObject8","getVerticalNoPreviewState","_templateObject9","getVerticalErrorState","_templateObject10","_templateObject11","_templateObject12","_export","a"],"mappings":"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"}