@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-upload/nile-file-upload.css.js CHANGED
@@ -41,10 +41,10 @@ export const styles = css `
41
41
  align-items: center;
42
42
  justify-content: space-between;
43
43
  gap: 18px;
44
- border-radius: var(--nile-radius-radius-xs);
45
- border: 1px dashed var(--nile-colors-neutral-500);
46
- color: var(--nile-colors-dark-900);
47
- background-color: var(--nile-colors-white-base);
44
+ border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
45
+ border: 1px dashed var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));
46
+ color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
47
+ background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
48
48
  }
49
49
 
50
50
  @media (width < 400px) {
@@ -58,13 +58,13 @@ export const styles = css `
58
58
  }
59
59
 
60
60
  .hover-border {
61
- border-color: var(--nile-colors-primary-600);
61
+ border-color: var(--nile-colors-primary-600, var(--ng-colors-border-brand-alt));
62
62
  }
63
63
 
64
64
  .title {
65
- font-size: var(--nile-type-scale-3);
66
- font-weight: var(--nile-font-weight-regular);
67
- color: var(--nile-colors-dark-900);
65
+ font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
66
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
67
+ color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
68
68
  white-space: nowrap;
69
69
  text-overflow: ellipsis;
70
70
  overflow: hidden;
@@ -73,9 +73,9 @@ export const styles = css `
73
73
  }
74
74
 
75
75
  .subtitle {
76
- font-size: var(--nile-type-scale-2);
77
- font-weight: var(--nile-font-weight-regular);
78
- color: var(--nile-colors-dark-500);
76
+ font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
77
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
78
+ color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
79
79
  white-space: nowrap;
80
80
  text-overflow: ellipsis;
81
81
  overflow: hidden;
@@ -92,19 +92,19 @@ export const styles = css `
92
92
  justify-content: space-between;
93
93
  align-items: center;
94
94
  padding: 12px;
95
- border-radius: var(--nile-radius-radius-xs);
96
- color: var(--nile-colors-dark-900);
97
- border: 1px dashed var(--nile-colors-neutral-500);
98
- background-color: var(--nile-colors-white-base);
95
+ border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
96
+ color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
97
+ border: 1px dashed var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));
98
+ background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
99
99
  position: relative;
100
100
  }
101
101
 
102
102
  .vertical-div:hover {
103
- border-color: var(--nile-colors-blue-500);
103
+ border-color: var(--nile-colors-blue-500, var(--ng-colors-border-brand));
104
104
  }
105
105
 
106
106
  .outer-div-border {
107
- border: 1px solid var(--nile-colors-neutral-400);
107
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
108
108
  }
109
109
 
110
110
  .inner-div {
@@ -124,9 +124,9 @@ export const styles = css `
124
124
 
125
125
  .content h4 {
126
126
  margin: 0px;
127
- font-size: var(--nile-type-scale-3);
128
- font-weight: var(--nile-font-weight-regular);
129
- color: var(--nile-colors-dark-900);
127
+ font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
128
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
129
+ color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
130
130
  text-align: center;
131
131
  white-space: nowrap;
132
132
  text-overflow: ellipsis;
@@ -136,8 +136,8 @@ export const styles = css `
136
136
 
137
137
  .content p {
138
138
  margin: 0px;
139
- font-size: var(--nile-type-scale-2);
140
- color: var(--nile-colors-neutral-700);
139
+ font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
140
+ color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
141
141
  text-align: center;
142
142
  white-space: nowrap;
143
143
  text-overflow: ellipsis;
@@ -157,26 +157,38 @@ export const styles = css `
157
157
  cursor: pointer;
158
158
  }
159
159
 
160
+ nile-button::part(base) {
161
+ border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));
162
+ }
163
+
164
+ nile-button:active::part(base) {
165
+ border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-neutral));
166
+ }
167
+
168
+ nile-button[disabled]::part(base) {
169
+ border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
170
+ }
171
+
160
172
  /* DISABLED STATE */
161
173
  .disable {
162
- background-color: var(--nile-colors-dark-200);
174
+ background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled));
163
175
  opacity: 0.8;
164
176
  cursor: not-allowed;
165
- color: var(--nile-colors-neutral-500);
177
+ color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
166
178
  pointer-events: none;
167
179
  }
168
180
 
169
181
  /* DRAGGING */
170
182
  .dragging {
171
- background-color: var(--nile-colors-blue-100);
172
- border-color: var(--nile-colors-primary-600);
183
+ background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));
184
+ border-color: var(--nile-colors-primary-600, var(--ng-colors-border-brand-alt));
173
185
  display: flex;
174
186
  align-items: center;
175
187
  justify-content: flex-start;
176
188
  gap: 18px;
177
- color: var(--nile-colors-blue-700);
178
- font-size: var(--nile-type-scale-3);
179
- font-weight: var(--nile-font-weight-regular);
189
+ color: var(--nile-colors-blue-700, var(--ng-colors-text-brand-secondary-700));
190
+ font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
191
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
180
192
  }
181
193
 
182
194
  .icons-container {
@@ -207,11 +219,11 @@ export const styles = css `
207
219
  align-items: center;
208
220
  gap: 18px;
209
221
  box-sizing: border-box;
210
- border: 1px solid var(--nile-colors-neutral-400)
222
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary))
211
223
  }
212
-
224
+
213
225
  .uploading:hover {
214
- border-color: var(--nile-colors-neutral-400);
226
+ border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
215
227
  }
216
228
 
217
229
  .progress-bar-container {
@@ -225,8 +237,8 @@ export const styles = css `
225
237
  width: 100%;
226
238
  display: flex;
227
239
  justify-content: space-between;
228
- font-size: var(--nile-type-scale-2);
229
- font-weight: var(--nile-font-weight-regular);
240
+ font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
241
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
230
242
  }
231
243
 
232
244
  .progress-bar-container p {
@@ -234,17 +246,17 @@ export const styles = css `
234
246
  }
235
247
 
236
248
  .progress-bar-container > p {
237
- font-size: var(--nile-type-scale-1);
238
- color: var(--nile-colors-dark-500);
249
+ font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
250
+ color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
239
251
  }
240
252
 
241
253
  /* PREVIEW STATE */
242
254
  .preview {
243
- border: 1px solid var(--nile-colors-neutral-400);
255
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
244
256
  }
245
257
 
246
258
  .preview:hover {
247
- border-color: var(--nile-colors-neutral-400);
259
+ border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
248
260
  }
249
261
 
250
262
  .preview-inner {
@@ -261,8 +273,8 @@ export const styles = css `
261
273
  height: 42px;
262
274
  width: 42px;
263
275
  object-fit: contain;
264
- border-radius: var(--nile-radius-radius-xs);
265
- border: 1px solid var(--nile-colors-neutral-400);
276
+ border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
277
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
266
278
  }
267
279
 
268
280
  .preview-file-info {
@@ -276,14 +288,14 @@ export const styles = css `
276
288
 
277
289
  .preview-file-info p {
278
290
  margin: 0px;
279
- font-size: var(--nile-type-scale-3);
280
- font-weight: var(--nile-font-weight-regular);
291
+ font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
292
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
281
293
  }
282
294
 
283
295
  .preview-file-info p:last-of-type{
284
- color: var(--nile-colors-neutral-700);
285
- font-size: var(--nile-type-scale-2);
286
- font-weight: var(--nile-font-weight-regular);
296
+ color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
297
+ font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
298
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
287
299
  }
288
300
 
289
301
  .preview nile-icon:hover {
@@ -292,11 +304,11 @@ export const styles = css `
292
304
 
293
305
  /* NO PREVIEW STATE */
294
306
  .no-preview {
295
- border: 1px solid var(--nile-colors-neutral-400);
307
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
296
308
  }
297
309
 
298
310
  .no-preview:hover {
299
- border-color: var(--nile-colors-neutral-400);
311
+ border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
300
312
  }
301
313
 
302
314
  .no-preview-container {
@@ -307,13 +319,13 @@ export const styles = css `
307
319
  .document-icon {
308
320
  height: 40px;
309
321
  width: 40px;
310
- border-radius: var(--nile-radius-radius-xs);
322
+ border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
311
323
  padding: 2px 3px 2px 3px;
312
324
  display: flex;
313
325
  justify-content: center;
314
326
  align-items: center;
315
- border: 1px solid var(--nile-colors-blue-400);
316
- background-color: var(--nile-colors-blue-100);
327
+ border: 1px solid var(--nile-colors-blue-400, var(--ng-componentcolors-utility-blue-400));
328
+ background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));
317
329
  }
318
330
 
319
331
  .document-icon nile-icon {
@@ -332,14 +344,14 @@ export const styles = css `
332
344
 
333
345
  .preview-file-info p {
334
346
  margin: 0px;
335
- font-size: var(--nile-type-scale-3);
336
- font-weight: var(--nile-font-weight-regular);
347
+ font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
348
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
337
349
  }
338
350
 
339
351
  .preview-file-info p:last-of-type{
340
- color: var(--nile-colors-neutral-700);
341
- font-size: var(--nile-type-scale-2);
342
- font-weight: var(--nile-font-weight-regular);
352
+ color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
353
+ font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
354
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
343
355
  }
344
356
 
345
357
  .no-preview > nile-icon:hover {
@@ -349,11 +361,11 @@ export const styles = css `
349
361
  /* ERROR STATE */
350
362
 
351
363
  .error {
352
- border: 1px solid var(--nile-colors-neutral-400);
364
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
353
365
  }
354
366
 
355
367
  .error:hover {
356
- border-color: var(--nile-colors-neutral-400);
368
+ border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
357
369
  }
358
370
 
359
371
  .error-container {
@@ -365,13 +377,13 @@ export const styles = css `
365
377
  .error-icon {
366
378
  height: 40px;
367
379
  width: 40px;
368
- border-radius: var(--nile-radius-radius-xs);
380
+ border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
369
381
  padding: 2px 3px 2px 3px;
370
382
  display: flex;
371
383
  justify-content: center;
372
384
  align-items: center;
373
- border: 1px solid var(--nile-colors-red-400);
374
- background-color: var(--nile-colors-red-100);
385
+ border: 1px solid var(--nile-colors-red-400, var(--ng-colors-border-error-subtle));
386
+ background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-secondary));
375
387
  }
376
388
 
377
389
  .error-icon nile-icon {
@@ -390,14 +402,14 @@ export const styles = css `
390
402
 
391
403
  .file-info p {
392
404
  margin: 0px;
393
- font-size: var(--nile-type-scale-3);
394
- font-weight: var(--nile-font-weight-regular);
405
+ font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
406
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
395
407
  }
396
408
 
397
409
  .file-info p:last-of-type{
398
- color: var(--nile-colors-red-700);
399
- font-size: var(--nile-type-scale-2);
400
- font-weight: var(--nile-font-weight-regular);
410
+ color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
411
+ font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
412
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
401
413
  }
402
414
 
403
415
  .error > nile-icon:hover {
@@ -424,9 +436,9 @@ export const styles = css `
424
436
  }
425
437
 
426
438
  .content-container div.title {
427
- font-size: var(--nile-type-scale-3);
428
- font-weight: var(--nile-font-weight-regular);
429
- color: var(--nile-colors-dark-900);
439
+ font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
440
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
441
+ color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
430
442
  text-align: center;
431
443
  white-space: nowrap;
432
444
  text-overflow: ellipsis;
@@ -435,9 +447,9 @@ export const styles = css `
435
447
  }
436
448
 
437
449
  .content-container div.subtitle {
438
- font-size: var(--nile-type-scale-2);
439
- font-weight: var(--nile-font-weight-regular);
440
- color: var(--nile-colors-dark-500);
450
+ font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
451
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
452
+ color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
441
453
  text-align: center;
442
454
  white-space: nowrap;
443
455
  text-overflow: ellipsis;
@@ -452,10 +464,10 @@ export const styles = css `
452
464
  justify-content: center;
453
465
  align-items: center;
454
466
  gap:18px;
455
- font-size: var(--nile-type-scale-3);
456
- color: var(--nile-colors-blue-700);
457
- background-color: var(--nile-colors-blue-100);
458
- border-color: var(--nile-colors-blue-500);
467
+ font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
468
+ color: var(--nile-colors-blue-700, var(--ng-colors-text-brand-secondary-700));
469
+ background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));
470
+ border-color: var(--nile-colors-blue-500, var(--ng-colors-border-brand));
459
471
  }
460
472
 
461
473
  /* Uploading State */
@@ -464,11 +476,11 @@ export const styles = css `
464
476
  flex-direction: column;
465
477
  justify-content: flex-end;
466
478
  align-items: center;
467
- border: 1px solid var(--nile-colors-neutral-400);
479
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
468
480
  }
469
481
 
470
482
  .vertical-uploading:hover {
471
- border-color: var(--nile-colors-neutral-400);
483
+ border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
472
484
  }
473
485
 
474
486
  .loading {
@@ -485,28 +497,28 @@ export const styles = css `
485
497
 
486
498
  /* Preview State */
487
499
  .vertical-preview {
488
- border: 1px solid var(--nile-colors-neutral-400);
500
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
489
501
  }
490
502
 
491
503
  .vertical-preview:hover {
492
- border-color: var(--nile-colors-neutral-400);
504
+ border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
493
505
  }
494
506
 
495
507
  .image-preview {
496
- border: 1px solid var(--nile-colors-neutral-400);
508
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
497
509
  object-fit: cover;
498
510
  width: 80px;
499
511
  height: 80px;
500
- border-radius: var(--nile-radius-radius-xs);
512
+ border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
501
513
  }
502
514
 
503
515
  /* Vertical No Preview State */
504
516
  .vertical-no-preview {
505
- border: 1px solid var(--nile-colors-neutral-400);
517
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
506
518
  }
507
519
 
508
520
  .vertical-no-preview:hover {
509
- border-color: var(--nile-colors-neutral-400);
521
+ border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
510
522
  }
511
523
 
512
524
  .vertical-document-icon {
@@ -516,23 +528,23 @@ export const styles = css `
516
528
  display: flex;
517
529
  justify-content: center;
518
530
  align-items: center;
519
- border-radius: var(--nile-radius-radius-xs);
520
- border: 1px solid var(--nile-colors-blue-400);
521
- background-color: var(--nile-colors-blue-100);
531
+ border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
532
+ border: 1px solid var(--nile-colors-blue-400, var(--ng-componentcolors-utility-blue-400));
533
+ background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));
522
534
  }
523
535
 
524
536
  /* Veritcal Error State */
525
537
  .vertical-error {
526
- border: 1px solid var(--nile-colors-neutral-400);
538
+ border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
527
539
  }
528
540
 
529
541
  .vertical-error:hover {
530
- border-color: var(--nile-colors-neutral-400);
542
+ border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
531
543
  }
532
544
 
533
545
  .error-bg {
534
- background-color: var(--nile-colors-red-100);
535
- border: 1px solid var(--nile-colors-red-400);
546
+ background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-secondary));
547
+ border: 1px solid var(--nile-colors-red-400, var(--ng-colors-border-error-subtle));
536
548
  }
537
549
 
538
550
  .error-message {
@@ -542,14 +554,14 @@ export const styles = css `
542
554
  align-items: center;
543
555
  gap: 8px;
544
556
  margin: 0px;
545
- font-size: var(--nile-type-scale-3);
546
- font-weight: var(--nile-font-weight-regular);
557
+ font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
558
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
547
559
  text-align: start;
548
560
  }
549
561
 
550
562
  .error-p {
551
- color: var(--nile-colors-red-700);
552
- font-size: var(--nile-type-scale-2);
563
+ color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
564
+ font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
553
565
  width: 216px;
554
566
  white-space: nowrap;
555
567
  overflow: hidden;
@@ -576,8 +588,8 @@ export const styles = css `
576
588
  min-width: 230px;
577
589
  max-height: 200px;
578
590
  overflow-y: auto;
579
- border: 1px solid var(--nile-colors-neutral-700);
580
- border-radius: var(--nile-radius-radius-xs);
591
+ border: 1px solid var(--nile-colors-neutral-700, var(--ng-colors-border-neutral));
592
+ border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
581
593
  scrollbar-width: none;
582
594
  padding: 12px;
583
595
  }
@@ -592,18 +604,18 @@ export const styles = css `
592
604
 
593
605
  /* for the upload error messages */
594
606
  .upload-error {
595
- font-size: var(--nile-type-scale-2);
596
- font-weight: var(--nile-font-weight-regular);
597
- color: var(--nile-colors-red-700);
607
+ font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
608
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
609
+ color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
598
610
  display: flex;
599
611
  justify-content: flex-start;
600
612
  align-items: center;
601
- gap: var(--nile-spacing-one-half-x);
613
+ gap: var(--nile-spacing-one-half-x, var(--ng-spacing-xxs));
602
614
  margin-top: 10px;
603
615
  }
604
616
 
605
617
  .upload-error > nile-tooltip > span {
606
- color: var(--nile-colors-red-700);
618
+ color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
607
619
  white-space: nowrap;
608
620
  text-align: left;
609
621
  max-width: 560px;
@@ -613,20 +625,29 @@ export const styles = css `
613
625
 
614
626
  .vertical-upload-error {
615
627
  display: flex;
628
+ align-items: center;
616
629
  gap: 4px;
617
630
  margin-top: 10px;
618
631
  }
619
632
 
620
633
  .vertical-upload-error nile-tooltip span, .vertical-upload-error span {
621
- color: var(--nile-colors-red-700);
634
+ color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
622
635
  white-space: nowrap;
623
636
  text-align: left;
624
637
  width: 222px;
625
638
  overflow: hidden;
626
639
  text-overflow: ellipsis;
627
- font-size: var(--nile-type-scale-2);
640
+ font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
628
641
  display: inline-block;
629
642
  }
643
+
644
+ .upload-error nile-lite-tooltip,
645
+ .vertical-upload-error nile-lite-tooltip {
646
+ display: flex;
647
+ align-items: center;
648
+ font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
649
+ line-height: 1;
650
+ }
630
651
  `;
631
652
  export default [styles];
632
653
  //# sourceMappingURL=nile-file-upload.css.js.map
package/dist/src/nile-file-upload/nile-file-upload.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nile-file-upload.css.js","sourceRoot":"","sources":["../../../src/nile-file-upload/nile-file-upload.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2mBxB,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: flex-start;\n width: 100%;\n }\n\n input {\n display: none;\n }\n\n .horizontal-div {\n 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: 18px;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px dashed var(--nile-colors-neutral-500);\n color: var(--nile-colors-dark-900);\n background-color: var(--nile-colors-white-base);\n }\n\n @media (width < 400px) {\n .browse-file-button {\n display: none;\n }\n\n .horizontal-div {\n cursor: pointer;\n }\n }\n\n .hover-border {\n border-color: var(--nile-colors-primary-600);\n }\n\n .title {\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-900);\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 454px;\n width: 100%;\n }\n\n .subtitle {\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-500);\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 454px;\n }\n\n .vertical-div {\n min-height: 156px;\n height: auto;\n min-width: 240px;\n width: 240px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n padding: 12px;\n border-radius: var(--nile-radius-radius-xs);\n color: var(--nile-colors-dark-900);\n border: 1px dashed var(--nile-colors-neutral-500);\n background-color: var(--nile-colors-white-base);\n position: relative;\n }\n\n .vertical-div:hover {\n border-color: var(--nile-colors-blue-500);\n }\n\n .outer-div-border {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .inner-div {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 18px;\n box-sizing: border-box;\n }\n\n .content {\n display: flex; \n flex-direction: column;\n justify-content: center;\n gap: 8px;\n }\n\n .content h4 {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-900);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 454px;\n }\n \n .content p {\n margin: 0px;\n font-size: var(--nile-type-scale-2);\n color: var(--nile-colors-neutral-700);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 454px;\n }\n\n ::slotted(img), ::slotted(nile-icon), ::slotted(video) {\n --nile-svg-height: 24px !important ;\n --nile-svg-width: 24px !important ;\n height:42px;\n width: 42px;\n object-fit: cover;\n }\n\n .browse-file-button {\n cursor: pointer;\n }\n\n /* DISABLED STATE */\n .disable {\n background-color: var(--nile-colors-dark-200);\n opacity: 0.8;\n cursor: not-allowed;\n color: var(--nile-colors-neutral-500);\n pointer-events: none;\n }\n\n /* DRAGGING */\n .dragging {\n background-color: var(--nile-colors-blue-100);\n border-color: var(--nile-colors-primary-600);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 18px;\n color: var(--nile-colors-blue-700);\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .icons-container {\n display: flex;\n gap: 4px;\n }\n\n .general-icon {\n transform: rotate(-18.11deg);\n position: relative;\n bottom: 3px;\n }\n\n .image-icon {\n transform: rotate(15deg);\n }\n\n .icon:hover {\n cursor: pointer;\n }\n\n /* Uploading State */\n .uploading {\n width: 648px;\n min-width: 230px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n box-sizing: border-box;\n border: 1px solid var(--nile-colors-neutral-400)\n }\n \n .uploading:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .progress-bar-container {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 0px;\n }\n\n .progress-bar-percent {\n width: 100%;\n display: flex;\n justify-content: space-between;\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .progress-bar-container p {\n margin: 0px;\n }\n\n .progress-bar-container > p {\n font-size: var(--nile-type-scale-1);\n color: var(--nile-colors-dark-500);\n }\n\n /* PREVIEW STATE */\n .preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .preview-inner {\n display: flex;\n gap: 18px;\n }\n\n .preview-image-container {\n height: 42px;\n width: 42px;\n }\n\n .preview-image-container img {\n height: 42px;\n width: 42px;\n object-fit: contain;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px solid var(--nile-colors-neutral-400);\n }\n \n .preview-file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 8px;\n }\n\n .preview-file-info p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .preview nile-icon:hover {\n cursor: pointer;\n }\n\n /* NO PREVIEW STATE */\n .no-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .no-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .no-preview-container {\n display: flex;\n gap: 18px;\n }\n\n .document-icon {\n height: 40px;\n width: 40px;\n border-radius: var(--nile-radius-radius-xs);\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--nile-colors-blue-400);\n background-color: var(--nile-colors-blue-100);\n }\n\n .document-icon nile-icon {\n height: 40px;\n width: 40px;\n }\n \n .preview-file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 8px;\n }\n\n .preview-file-info p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .no-preview > nile-icon:hover {\n cursor: pointer;\n }\n\n /* ERROR STATE */\n \n .error {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .error:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .error-container {\n width: 100%;\n display: flex;\n gap: 18px;\n }\n\n .error-icon {\n height: 40px;\n width: 40px;\n border-radius: var(--nile-radius-radius-xs);\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--nile-colors-red-400);\n background-color: var(--nile-colors-red-100);\n }\n\n .error-icon nile-icon {\n height: 40px;\n width: 40px;\n }\n \n .file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 8px;\n }\n\n .file-info p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .file-info p:last-of-type{\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .error > nile-icon:hover {\n cursor: pointer;\n }\n\n /* VARTICAL STATE START */\n /* Default State */\n\n .vertical-default {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 18px\n }\n\n .content-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n }\n\n .content-container div.title {\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: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .content-container div.subtitle {\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-500);\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 }\n\n .corner-icon {\n position: absolute;\n top: 10px;\n right: 10px;\n }\n\n /* Preview State */\n .vertical-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .image-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n object-fit: cover;\n width: 80px;\n height: 80px;\n border-radius: var(--nile-radius-radius-xs);\n }\n\n /* Vertical No Preview State */\n .vertical-no-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-no-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .vertical-document-icon {\n height: 80px;\n width: 80px;\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px solid var(--nile-colors-blue-400);\n background-color: var(--nile-colors-blue-100);\n }\n\n /* Veritcal Error State */\n .vertical-error {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-error:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .error-bg {\n background-color: var(--nile-colors-red-100);\n border: 1px solid var(--nile-colors-red-400);\n }\n\n .error-message {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: start;\n }\n\n .error-p {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n width: 216px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: center;\n }\n\n .error-p p {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 0;\n }\n\n\n /* Displaing uploaded files CSS */\n .display-files {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n gap: 8px;\n width: 648px;\n min-width: 230px;\n max-height: 200px;\n overflow-y: auto;\n border: 1px solid var(--nile-colors-neutral-700);\n border-radius: var(--nile-radius-radius-xs);\n scrollbar-width: none;\n padding: 12px;\n }\n\n ul, li {\n width: 100%;\n }\n\n li {\n list-style-type: none;\n }\n\n /* for the upload error messages */\n .upload-error {\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-red-700);\n display: flex;\n justify-content: flex-start;\n align-items: center;\n gap: var(--nile-spacing-one-half-x);\n margin-top: 10px;\n }\n\n .upload-error > nile-tooltip > span {\n color: var(--nile-colors-red-700);\n white-space: nowrap;\n text-align: left;\n max-width: 560px;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .vertical-upload-error {\n display: flex;\n gap: 4px;\n margin-top: 10px;\n }\n\n .vertical-upload-error nile-tooltip span, .vertical-upload-error span {\n color: var(--nile-colors-red-700);\n white-space: nowrap;\n text-align: left;\n width: 222px;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: var(--nile-type-scale-2);\n display: inline-block;\n }\n`;\n\nexport default [styles];"]}
1
+ {"version":3,"file":"nile-file-upload.css.js","sourceRoot":"","sources":["../../../src/nile-file-upload/nile-file-upload.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgoBxB,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: flex-start;\n width: 100%;\n }\n\n input {\n display: none;\n }\n\n .horizontal-div {\n 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: 18px;\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-neutral));\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 @media (width < 400px) {\n .browse-file-button {\n display: none;\n }\n\n .horizontal-div {\n cursor: pointer;\n }\n }\n\n .hover-border {\n border-color: var(--nile-colors-primary-600, var(--ng-colors-border-brand-alt));\n }\n\n .title {\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 white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 454px;\n width: 100%;\n }\n\n .subtitle {\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-dark-500, var(--ng-colors-text-tertiary-600));\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 454px;\n }\n\n .vertical-div {\n min-height: 156px;\n height: auto;\n min-width: 240px;\n width: 240px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n padding: 12px;\n border-radius: var(--nile-radius-radius-xs, 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-neutral));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n position: relative;\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 .content {\n display: flex; \n flex-direction: column;\n justify-content: center;\n gap: 8px;\n }\n\n .content h4 {\n margin: 0px;\n font-size: var(--nile-type-scale-3, 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: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 454px;\n }\n \n .content p {\n margin: 0px;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 454px;\n }\n\n ::slotted(img), ::slotted(nile-icon), ::slotted(video) {\n --nile-svg-height: 24px !important ;\n --nile-svg-width: 24px !important ;\n height:42px;\n width: 42px;\n object-fit: cover;\n }\n\n .browse-file-button {\n cursor: pointer;\n }\n\n nile-button::part(base) {\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));\n }\n\n nile-button:active::part(base) {\n border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-neutral));\n }\n\n nile-button[disabled]::part(base) {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n /* DISABLED STATE */\n .disable {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled));\n opacity: 0.8;\n cursor: not-allowed;\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));\n pointer-events: none;\n }\n\n /* DRAGGING */\n .dragging {\n background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));\n border-color: var(--nile-colors-primary-600, var(--ng-colors-border-brand-alt));\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 18px;\n color: var(--nile-colors-blue-700, var(--ng-colors-text-brand-secondary-700));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n }\n\n .icons-container {\n display: flex;\n gap: 4px;\n }\n\n .general-icon {\n transform: rotate(-18.11deg);\n position: relative;\n bottom: 3px;\n }\n\n .image-icon {\n transform: rotate(15deg);\n }\n\n .icon:hover {\n cursor: pointer;\n }\n\n /* Uploading State */\n .uploading {\n width: 648px;\n min-width: 230px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n box-sizing: border-box;\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-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: 0px;\n }\n\n .progress-bar-percent {\n width: 100%;\n display: flex;\n justify-content: space-between;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-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 }\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 gap: 18px;\n }\n\n .preview-image-container {\n height: 42px;\n width: 42px;\n }\n\n .preview-image-container img {\n height: 42px;\n width: 42px;\n object-fit: contain;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n \n .preview-file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 8px;\n }\n\n .preview-file-info p {\n margin: 0px;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\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 }\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 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: 8px;\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 }\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 }\n\n .no-preview > nile-icon:hover {\n cursor: pointer;\n }\n\n /* ERROR STATE */\n \n .error {\n border: 1px solid var(--nile-colors-neutral-400, 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: 100%;\n display: flex;\n gap: 18px;\n }\n\n .error-icon {\n height: 40px;\n width: 40px;\n border-radius: var(--nile-radius-radius-xs, 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: 8px;\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 }\n\n .file-info p:last-of-type{\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 }\n\n .error > nile-icon:hover {\n cursor: pointer;\n }\n\n /* VARTICAL STATE START */\n /* Default State */\n\n .vertical-default {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 18px\n }\n\n .content-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n }\n\n .content-container div.title {\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: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .content-container div.subtitle {\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-dark-500, var(--ng-colors-text-tertiary-600));\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 }\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 .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: start;\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\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-border-neutral));\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\n /* for the upload error messages */\n .upload-error {\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-red-700, var(--ng-colors-text-error-primary-600));\n display: flex;\n justify-content: flex-start;\n align-items: center;\n gap: var(--nile-spacing-one-half-x, var(--ng-spacing-xxs));\n margin-top: 10px;\n }\n\n .upload-error > nile-tooltip > span {\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n white-space: nowrap;\n text-align: left;\n max-width: 560px;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .vertical-upload-error {\n display: flex;\n align-items: center;\n gap: 4px;\n margin-top: 10px;\n }\n\n .vertical-upload-error nile-tooltip span, .vertical-upload-error span {\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n white-space: nowrap;\n text-align: left;\n width: 222px;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n display: inline-block;\n }\n\n .upload-error nile-lite-tooltip,\n .vertical-upload-error nile-lite-tooltip {\n display: flex;\n align-items: center;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n line-height: 1;\n }\n`;\n\nexport default [styles];"]}
package/dist/src/nile-pagination/nile-pagination.d.ts CHANGED
@@ -15,6 +15,7 @@ export declare class NilePagination extends NileElement {
15
15
  variant: 'fluid' | 'compact' | 'mini';
16
16
  disabled: boolean;
17
17
  showTitle: boolean;
18
+ portal: boolean;
18
19
  private _pageSizeOpen;
19
20
  private _pageOpen;
20
21
  private _miniPageOpen;
package/dist/src/nile-pagination/nile-pagination.js CHANGED
@@ -20,6 +20,7 @@ let NilePagination = class NilePagination extends NileElement {
20
20
  this.variant = 'fluid';
21
21
  this.disabled = false;
22
22
  this.showTitle = true;
23
+ this.portal = false;
23
24
  this._pageSizeOpen = false;
24
25
  this._pageOpen = false;
25
26
  this._miniPageOpen = false;
@@ -79,7 +80,7 @@ let NilePagination = class NilePagination extends NileElement {
79
80
  return null;
80
81
  return html `
81
82
  <div class="page-size-select">
82
- <nile-dropdown class="page-size-dropdown" ?disabled=${this.disabled}>
83
+ <nile-dropdown class="page-size-dropdown" ?portal=${this.portal} ?disabled=${this.disabled}>
83
84
  <nile-button
84
85
  slot="trigger"
85
86
  variant="tertiary"
@@ -115,6 +116,7 @@ let NilePagination = class NilePagination extends NileElement {
115
116
  return html `
116
117
  <nile-dropdown
117
118
  class="compact-dropdown"
119
+ ?portal=${this.portal}
118
120
  ?disabled=${this.disabled}
119
121
  @nile-show=${() => (this._pageSizeOpen = true)}
120
122
  @nile-after-hide=${() => (this._pageSizeOpen = false)}
@@ -180,7 +182,7 @@ let NilePagination = class NilePagination extends NileElement {
180
182
  if (item === '…') {
181
183
  return html `
182
184
  <li>
183
- <nile-dropdown class="ellipsis-dropdown" ?disabled=${this.disabled}>
185
+ <nile-dropdown class="ellipsis-dropdown" ?portal=${this.portal} ?disabled=${this.disabled}>
184
186
  <nile-button slot="trigger" variant="ghost" ?disabled=${this.disabled}>
185
187
  …
186
188
  </nile-button>
@@ -247,6 +249,7 @@ let NilePagination = class NilePagination extends NileElement {
247
249
  <nile-dropdown
248
250
  part="mini-page-dropdown"
249
251
  class="mini-page-dropdown"
252
+ ?portal=${this.portal}
250
253
  ?disabled=${this.disabled}
251
254
  @nile-show=${() => (this._miniPageOpen = true)}
252
255
  @nile-after-hide=${() => (this._miniPageOpen = false)}
@@ -297,6 +300,7 @@ let NilePagination = class NilePagination extends NileElement {
297
300
  <li>
298
301
  <nile-dropdown
299
302
  class="compact-dropdown1"
303
+ ?portal=${this.portal}
300
304
  ?disabled=${this.disabled}
301
305
  @nile-show=${() => (this._pageOpen = true)}
302
306
  @nile-after-hide=${() => (this._pageOpen = false)}
@@ -414,6 +418,9 @@ __decorate([
414
418
  __decorate([
415
419
  property({ type: Boolean })
416
420
  ], NilePagination.prototype, "showTitle", void 0);
421
+ __decorate([
422
+ property({ type: Boolean, reflect: true })
423
+ ], NilePagination.prototype, "portal", void 0);
417
424
  __decorate([
418
425
  state()
419
426
  ], NilePagination.prototype, "_pageSizeOpen", void 0);