@memberjunction/ng-file-storage 5.43.0 → 5.44.0

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 (17) hide show
  1. package/dist/lib/file-browser/file-grid.component.js +122 -138
  2. package/dist/lib/file-browser/file-grid.component.js.map +1 -1
  3. package/dist/lib/file-browser/storage-providers-list.component.js +23 -36
  4. package/dist/lib/file-browser/storage-providers-list.component.js.map +1 -1
  5. package/dist/lib/module.d.ts +1 -1
  6. package/dist/lib/module.d.ts.map +1 -1
  7. package/dist/lib/module.js +4 -1
  8. package/dist/lib/module.js.map +1 -1
  9. package/package.json +11 -10
  10. package/dist/__tests__/exports.test.d.ts +0 -2
  11. package/dist/__tests__/exports.test.d.ts.map +0 -1
  12. package/dist/__tests__/exports.test.js +0 -17
  13. package/dist/__tests__/exports.test.js.map +0 -1
  14. package/dist/__tests__/index.test.d.ts +0 -2
  15. package/dist/__tests__/index.test.d.ts.map +0 -1
  16. package/dist/__tests__/index.test.js +0 -7
  17. package/dist/__tests__/index.test.js.map +0 -1
package/dist/lib/file-browser/file-grid.component.js CHANGED
@@ -5,6 +5,7 @@ import { UUIDsEqual } from '@memberjunction/global';
5
5
  import * as i0 from "@angular/core";
6
6
  import * as i1 from "@angular/forms";
7
7
  import * as i2 from "@memberjunction/ng-shared-generic";
8
+ import * as i3 from "@memberjunction/ng-ui-components";
8
9
  function FileGridComponent_Conditional_1_Conditional_12_Template(rf, ctx) { if (rf & 1) {
9
10
  const _r3 = i0.ɵɵgetCurrentView();
10
11
  i0.ɵɵelementStart(0, "button", 29);
@@ -290,38 +291,29 @@ function FileGridComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
290
291
  } }
291
292
  function FileGridComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
292
293
  const _r10 = i0.ɵɵgetCurrentView();
293
- i0.ɵɵelementStart(0, "div", 4)(1, "div", 74);
294
- i0.ɵɵelement(2, "i", 75);
294
+ i0.ɵɵelementStart(0, "mj-empty-state", 74);
295
+ i0.ɵɵlistener("Action", function FileGridComponent_Conditional_4_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refresh()); });
295
296
  i0.ɵɵelementEnd();
296
- i0.ɵɵelementStart(3, "p", 76);
297
- i0.ɵɵtext(4);
298
- i0.ɵɵelementEnd();
299
- i0.ɵɵelementStart(5, "button", 77);
300
- i0.ɵɵlistener("click", function FileGridComponent_Conditional_4_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refresh()); });
301
- i0.ɵɵelement(6, "i", 16);
302
- i0.ɵɵtext(7, " Retry ");
303
- i0.ɵɵelementEnd()();
304
297
  } if (rf & 2) {
305
298
  const ctx_r1 = i0.ɵɵnextContext();
306
- i0.ɵɵadvance(4);
307
- i0.ɵɵtextInterpolate(ctx_r1.errorMessage);
299
+ i0.ɵɵproperty("Message", ctx_r1.errorMessage);
308
300
  } }
309
301
  function FileGridComponent_Conditional_5_For_20_Template(rf, ctx) { if (rf & 1) {
310
302
  const _r12 = i0.ɵɵgetCurrentView();
311
- i0.ɵɵelementStart(0, "tr", 85);
303
+ i0.ɵɵelementStart(0, "tr", 82);
312
304
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_5_For_20_Template_tr_click_0_listener($event) { const item_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onTileClick(item_r13, $event)); })("dblclick", function FileGridComponent_Conditional_5_For_20_Template_tr_dblclick_0_listener() { const item_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onItemDoubleClick(item_r13)); });
313
- i0.ɵɵelementStart(1, "td", 86);
314
- i0.ɵɵelement(2, "i", 87);
315
- i0.ɵɵelementStart(3, "span", 88);
305
+ i0.ɵɵelementStart(1, "td", 83);
306
+ i0.ɵɵelement(2, "i", 84);
307
+ i0.ɵɵelementStart(3, "span", 85);
316
308
  i0.ɵɵtext(4);
317
309
  i0.ɵɵelementEnd()();
318
- i0.ɵɵelementStart(5, "td", 81)(6, "span", 89);
310
+ i0.ɵɵelementStart(5, "td", 78)(6, "span", 86);
319
311
  i0.ɵɵtext(7);
320
312
  i0.ɵɵelementEnd()();
321
- i0.ɵɵelementStart(8, "td", 90)(9, "span", 91);
313
+ i0.ɵɵelementStart(8, "td", 87)(9, "span", 88);
322
314
  i0.ɵɵtext(10);
323
315
  i0.ɵɵelementEnd()();
324
- i0.ɵɵelementStart(11, "td", 92)(12, "span", 93);
316
+ i0.ɵɵelementStart(11, "td", 89)(12, "span", 90);
325
317
  i0.ɵɵtext(13);
326
318
  i0.ɵɵelementEnd()()();
327
319
  } if (rf & 2) {
@@ -341,32 +333,32 @@ function FileGridComponent_Conditional_5_For_20_Template(rf, ctx) { if (rf & 1)
341
333
  } }
342
334
  function FileGridComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
343
335
  const _r11 = i0.ɵɵgetCurrentView();
344
- i0.ɵɵelementStart(0, "div", 5)(1, "table", 78)(2, "thead")(3, "tr")(4, "th", 79);
336
+ i0.ɵɵelementStart(0, "div", 5)(1, "table", 75)(2, "thead")(3, "tr")(4, "th", 76);
345
337
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_5_Template_th_click_4_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSortChange([{ field: "name", dir: ctx_r1.sort[0].field === "name" && ctx_r1.sort[0].dir === "asc" ? "desc" : "asc" }])); });
346
338
  i0.ɵɵelementStart(5, "span");
347
339
  i0.ɵɵtext(6, "Name");
348
340
  i0.ɵɵelementEnd();
349
- i0.ɵɵelement(7, "i", 80);
341
+ i0.ɵɵelement(7, "i", 77);
350
342
  i0.ɵɵelementEnd();
351
- i0.ɵɵelementStart(8, "th", 81);
343
+ i0.ɵɵelementStart(8, "th", 78);
352
344
  i0.ɵɵtext(9, "Type");
353
345
  i0.ɵɵelementEnd();
354
- i0.ɵɵelementStart(10, "th", 82);
346
+ i0.ɵɵelementStart(10, "th", 79);
355
347
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_5_Template_th_click_10_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSortChange([{ field: "size", dir: ctx_r1.sort[0].field === "size" && ctx_r1.sort[0].dir === "asc" ? "desc" : "asc" }])); });
356
348
  i0.ɵɵelementStart(11, "span");
357
349
  i0.ɵɵtext(12, "Size");
358
350
  i0.ɵɵelementEnd();
359
- i0.ɵɵelement(13, "i", 80);
351
+ i0.ɵɵelement(13, "i", 77);
360
352
  i0.ɵɵelementEnd();
361
- i0.ɵɵelementStart(14, "th", 83);
353
+ i0.ɵɵelementStart(14, "th", 80);
362
354
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_5_Template_th_click_14_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSortChange([{ field: "lastModified", dir: ctx_r1.sort[0].field === "lastModified" && ctx_r1.sort[0].dir === "asc" ? "desc" : "asc" }])); });
363
355
  i0.ɵɵelementStart(15, "span");
364
356
  i0.ɵɵtext(16, "Modified");
365
357
  i0.ɵɵelementEnd();
366
- i0.ɵɵelement(17, "i", 80);
358
+ i0.ɵɵelement(17, "i", 77);
367
359
  i0.ɵɵelementEnd()()();
368
360
  i0.ɵɵelementStart(18, "tbody");
369
- i0.ɵɵrepeaterCreate(19, FileGridComponent_Conditional_5_For_20_Template, 14, 8, "tr", 84, i0.ɵɵrepeaterTrackByIdentity);
361
+ i0.ɵɵrepeaterCreate(19, FileGridComponent_Conditional_5_For_20_Template, 14, 8, "tr", 81, i0.ɵɵrepeaterTrackByIdentity);
370
362
  i0.ɵɵelementEnd()()();
371
363
  } if (rf & 2) {
372
364
  const ctx_r1 = i0.ɵɵnextContext();
@@ -380,7 +372,7 @@ function FileGridComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
380
372
  i0.ɵɵrepeater(ctx_r1.filteredItems);
381
373
  } }
382
374
  function FileGridComponent_Conditional_6_For_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
383
- i0.ɵɵelementStart(0, "div", 99);
375
+ i0.ɵɵelementStart(0, "div", 96);
384
376
  i0.ɵɵtext(1);
385
377
  i0.ɵɵelementEnd();
386
378
  } if (rf & 2) {
@@ -390,22 +382,22 @@ function FileGridComponent_Conditional_6_For_3_Conditional_5_Template(rf, ctx) {
390
382
  i0.ɵɵtextInterpolate(ctx_r1.formatFileSize(item_r15.size));
391
383
  } }
392
384
  function FileGridComponent_Conditional_6_For_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
393
- i0.ɵɵelementStart(0, "div", 99);
385
+ i0.ɵɵelementStart(0, "div", 96);
394
386
  i0.ɵɵtext(1, "Folder");
395
387
  i0.ɵɵelementEnd();
396
388
  } }
397
389
  function FileGridComponent_Conditional_6_For_3_Template(rf, ctx) { if (rf & 1) {
398
390
  const _r14 = i0.ɵɵgetCurrentView();
399
- i0.ɵɵelementStart(0, "div", 96);
391
+ i0.ɵɵelementStart(0, "div", 93);
400
392
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_6_For_3_Template_div_click_0_listener($event) { const item_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onTileClick(item_r15, $event)); })("dblclick", function FileGridComponent_Conditional_6_For_3_Template_div_dblclick_0_listener() { const item_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onItemDoubleClick(item_r15)); });
401
- i0.ɵɵelementStart(1, "div", 97);
393
+ i0.ɵɵelementStart(1, "div", 94);
402
394
  i0.ɵɵelement(2, "i");
403
395
  i0.ɵɵelementEnd();
404
- i0.ɵɵelementStart(3, "div", 98);
396
+ i0.ɵɵelementStart(3, "div", 95);
405
397
  i0.ɵɵtext(4);
406
398
  i0.ɵɵelementEnd();
407
- i0.ɵɵconditionalCreate(5, FileGridComponent_Conditional_6_For_3_Conditional_5_Template, 2, 1, "div", 99);
408
- i0.ɵɵconditionalCreate(6, FileGridComponent_Conditional_6_For_3_Conditional_6_Template, 2, 0, "div", 99);
399
+ i0.ɵɵconditionalCreate(5, FileGridComponent_Conditional_6_For_3_Conditional_5_Template, 2, 1, "div", 96);
400
+ i0.ɵɵconditionalCreate(6, FileGridComponent_Conditional_6_For_3_Conditional_6_Template, 2, 0, "div", 96);
409
401
  i0.ɵɵelementEnd();
410
402
  } if (rf & 2) {
411
403
  const item_r15 = ctx.$implicit;
@@ -421,8 +413,8 @@ function FileGridComponent_Conditional_6_For_3_Template(rf, ctx) { if (rf & 1) {
421
413
  i0.ɵɵconditional(item_r15.type === "folder" ? 6 : -1);
422
414
  } }
423
415
  function FileGridComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
424
- i0.ɵɵelementStart(0, "div", 6)(1, "div", 94);
425
- i0.ɵɵrepeaterCreate(2, FileGridComponent_Conditional_6_For_3_Template, 7, 7, "div", 95, i0.ɵɵrepeaterTrackByIdentity);
416
+ i0.ɵɵelementStart(0, "div", 6)(1, "div", 91);
417
+ i0.ɵɵrepeaterCreate(2, FileGridComponent_Conditional_6_For_3_Template, 7, 7, "div", 92, i0.ɵɵrepeaterTrackByIdentity);
426
418
  i0.ɵɵelementEnd()();
427
419
  } if (rf & 2) {
428
420
  const ctx_r1 = i0.ɵɵnextContext();
@@ -431,69 +423,61 @@ function FileGridComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
431
423
  } }
432
424
  function FileGridComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
433
425
  const _r16 = i0.ɵɵgetCurrentView();
434
- i0.ɵɵelementStart(0, "div", 7)(1, "div", 100);
435
- i0.ɵɵelement(2, "i", 101);
426
+ i0.ɵɵelementStart(0, "mj-empty-state", 97);
427
+ i0.ɵɵlistener("Action", function FileGridComponent_Conditional_7_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onUploadClick()); });
436
428
  i0.ɵɵelementEnd();
437
- i0.ɵɵelementStart(3, "p", 102);
438
- i0.ɵɵtext(4, "This folder is empty");
439
- i0.ɵɵelementEnd();
440
- i0.ɵɵelementStart(5, "button", 103);
441
- i0.ɵɵlistener("click", function FileGridComponent_Conditional_7_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onUploadClick()); });
442
- i0.ɵɵelement(6, "i", 104);
443
- i0.ɵɵtext(7, " Upload Files ");
444
- i0.ɵɵelementEnd()();
445
429
  } }
446
430
  function FileGridComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
447
431
  const _r17 = i0.ɵɵgetCurrentView();
448
- i0.ɵɵelementStart(0, "div", 8)(1, "div", 105)(2, "button", 106);
432
+ i0.ɵɵelementStart(0, "div", 8)(1, "div", 98)(2, "button", 99);
449
433
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_8_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onUploadClick()); });
450
- i0.ɵɵelement(3, "i", 104);
434
+ i0.ɵɵelement(3, "i", 100);
451
435
  i0.ɵɵtext(4, " Upload ");
452
436
  i0.ɵɵelementEnd();
453
- i0.ɵɵelementStart(5, "button", 106);
437
+ i0.ɵɵelementStart(5, "button", 99);
454
438
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_8_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onNewFolderClick()); });
455
- i0.ɵɵelement(6, "i", 107);
439
+ i0.ɵɵelement(6, "i", 101);
456
440
  i0.ɵɵtext(7, " New Folder ");
457
441
  i0.ɵɵelementEnd();
458
- i0.ɵɵelementStart(8, "button", 108);
442
+ i0.ɵɵelementStart(8, "button", 102);
459
443
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_8_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDownloadClick()); });
460
- i0.ɵɵelement(9, "i", 109);
444
+ i0.ɵɵelement(9, "i", 103);
461
445
  i0.ɵɵtext(10, " Download ");
462
446
  i0.ɵɵelementEnd();
463
- i0.ɵɵelementStart(11, "button", 108);
447
+ i0.ɵɵelementStart(11, "button", 102);
464
448
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_8_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRenameClick()); });
465
- i0.ɵɵelement(12, "i", 110);
449
+ i0.ɵɵelement(12, "i", 104);
466
450
  i0.ɵɵtext(13, " Rename ");
467
451
  i0.ɵɵelementEnd();
468
- i0.ɵɵelementStart(14, "button", 108);
452
+ i0.ɵɵelementStart(14, "button", 102);
469
453
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_8_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCopyClick()); });
470
- i0.ɵɵelement(15, "i", 111);
454
+ i0.ɵɵelement(15, "i", 105);
471
455
  i0.ɵɵtext(16, " Copy ");
472
456
  i0.ɵɵelementEnd();
473
- i0.ɵɵelementStart(17, "button", 112);
457
+ i0.ɵɵelementStart(17, "button", 106);
474
458
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_8_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCopyToAccountClick()); });
475
- i0.ɵɵelement(18, "i", 113);
459
+ i0.ɵɵelement(18, "i", 107);
476
460
  i0.ɵɵtext(19, " Copy to... ");
477
461
  i0.ɵɵelementEnd();
478
- i0.ɵɵelementStart(20, "button", 108);
462
+ i0.ɵɵelementStart(20, "button", 102);
479
463
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_8_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onMoveClick()); });
480
- i0.ɵɵelement(21, "i", 114);
464
+ i0.ɵɵelement(21, "i", 108);
481
465
  i0.ɵɵtext(22, " Move ");
482
466
  i0.ɵɵelementEnd();
483
- i0.ɵɵelementStart(23, "button", 108);
467
+ i0.ɵɵelementStart(23, "button", 102);
484
468
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_8_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDeleteClick()); });
485
- i0.ɵɵelement(24, "i", 115);
469
+ i0.ɵɵelement(24, "i", 109);
486
470
  i0.ɵɵtext(25, " Delete ");
487
471
  i0.ɵɵelementEnd()();
488
- i0.ɵɵelementStart(26, "div", 116)(27, "div", 117)(28, "button", 118);
472
+ i0.ɵɵelementStart(26, "div", 110)(27, "div", 111)(28, "button", 112);
489
473
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_8_Template_button_click_28_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewMode = "list"); });
490
- i0.ɵɵelement(29, "i", 119);
474
+ i0.ɵɵelement(29, "i", 113);
491
475
  i0.ɵɵelementEnd();
492
- i0.ɵɵelementStart(30, "button", 120);
476
+ i0.ɵɵelementStart(30, "button", 114);
493
477
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_8_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewMode = "grid"); });
494
- i0.ɵɵelement(31, "i", 121);
478
+ i0.ɵɵelement(31, "i", 115);
495
479
  i0.ɵɵelementEnd()();
496
- i0.ɵɵelementStart(32, "span", 122);
480
+ i0.ɵɵelementStart(32, "span", 116);
497
481
  i0.ɵɵtext(33);
498
482
  i0.ɵɵelementEnd()()();
499
483
  } if (rf & 2) {
@@ -519,23 +503,23 @@ function FileGridComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
519
503
  i0.ɵɵtextInterpolate2(" ", ctx_r1.filteredItems.length, " ", ctx_r1.filteredItems.length === 1 ? "item" : "filteredItems", " ");
520
504
  } }
521
505
  function FileGridComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
522
- i0.ɵɵelementStart(0, "div", 9)(1, "div", 123)(2, "div", 124);
523
- i0.ɵɵelement(3, "i", 113);
506
+ i0.ɵɵelementStart(0, "div", 9)(1, "div", 117)(2, "div", 118);
507
+ i0.ɵɵelement(3, "i", 107);
524
508
  i0.ɵɵelementEnd();
525
- i0.ɵɵelementStart(4, "h2", 125);
509
+ i0.ɵɵelementStart(4, "h2", 119);
526
510
  i0.ɵɵtext(5, "Drop files to upload");
527
511
  i0.ɵɵelementEnd()()();
528
512
  } }
529
513
  function FileGridComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
530
- i0.ɵɵelementStart(0, "div", 10)(1, "div", 126)(2, "div", 127);
514
+ i0.ɵɵelementStart(0, "div", 10)(1, "div", 120)(2, "div", 121);
531
515
  i0.ɵɵelement(3, "i", 38);
532
516
  i0.ɵɵelementStart(4, "span");
533
517
  i0.ɵɵtext(5);
534
518
  i0.ɵɵelementEnd()();
535
- i0.ɵɵelementStart(6, "div", 128);
536
- i0.ɵɵelement(7, "div", 129);
519
+ i0.ɵɵelementStart(6, "div", 122);
520
+ i0.ɵɵelement(7, "div", 123);
537
521
  i0.ɵɵelementEnd();
538
- i0.ɵɵelementStart(8, "span", 130);
522
+ i0.ɵɵelementStart(8, "span", 124);
539
523
  i0.ɵɵtext(9);
540
524
  i0.ɵɵelementEnd()()();
541
525
  } if (rf & 2) {
@@ -552,29 +536,29 @@ function FileGridComponent_Conditional_11_Conditional_15_Template(rf, ctx) { if
552
536
  } }
553
537
  function FileGridComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
554
538
  const _r18 = i0.ɵɵgetCurrentView();
555
- i0.ɵɵelementStart(0, "div", 131);
539
+ i0.ɵɵelementStart(0, "div", 125);
556
540
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_11_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelNewFolder()); });
557
- i0.ɵɵelementStart(1, "div", 132);
541
+ i0.ɵɵelementStart(1, "div", 126);
558
542
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_11_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r18); return i0.ɵɵresetView($event.stopPropagation()); });
559
- i0.ɵɵelementStart(2, "div", 133)(3, "h3");
543
+ i0.ɵɵelementStart(2, "div", 127)(3, "h3");
560
544
  i0.ɵɵtext(4, "Create New Folder");
561
545
  i0.ɵɵelementEnd();
562
- i0.ɵɵelementStart(5, "button", 134);
546
+ i0.ɵɵelementStart(5, "button", 128);
563
547
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_11_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelNewFolder()); });
564
548
  i0.ɵɵelement(6, "i", 30);
565
549
  i0.ɵɵelementEnd()();
566
- i0.ɵɵelementStart(7, "div", 135)(8, "label");
550
+ i0.ɵɵelementStart(7, "div", 129)(8, "label");
567
551
  i0.ɵɵtext(9, "Folder name:");
568
552
  i0.ɵɵelementEnd();
569
- i0.ɵɵelementStart(10, "input", 136);
553
+ i0.ɵɵelementStart(10, "input", 130);
570
554
  i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_Conditional_11_Template_input_ngModelChange_10_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.newFolderName, $event) || (ctx_r1.newFolderName = $event); return i0.ɵɵresetView($event); });
571
555
  i0.ɵɵlistener("keydown.enter", function FileGridComponent_Conditional_11_Template_input_keydown_enter_10_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCreateFolder()); });
572
556
  i0.ɵɵelementEnd()();
573
- i0.ɵɵelementStart(11, "div", 137)(12, "button", 138);
557
+ i0.ɵɵelementStart(11, "div", 131)(12, "button", 132);
574
558
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_11_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelNewFolder()); });
575
559
  i0.ɵɵtext(13, "Cancel");
576
560
  i0.ɵɵelementEnd();
577
- i0.ɵɵelementStart(14, "button", 138);
561
+ i0.ɵɵelementStart(14, "button", 132);
578
562
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_11_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCreateFolder()); });
579
563
  i0.ɵɵconditionalCreate(15, FileGridComponent_Conditional_11_Conditional_15_Template, 1, 0, "i", 38);
580
564
  i0.ɵɵtext(16);
@@ -594,7 +578,7 @@ function FileGridComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
594
578
  i0.ɵɵtextInterpolate1(" ", ctx_r1.isCreatingFolder ? "Creating..." : "Create", " ");
595
579
  } }
596
580
  function FileGridComponent_Conditional_12_Conditional_13_Template(rf, ctx) { if (rf & 1) {
597
- i0.ɵɵelementStart(0, "p", 139);
581
+ i0.ɵɵelementStart(0, "p", 133);
598
582
  i0.ɵɵtext(1, "This will delete the folder and all its contents.");
599
583
  i0.ɵɵelementEnd();
600
584
  } }
@@ -603,31 +587,31 @@ function FileGridComponent_Conditional_12_Conditional_18_Template(rf, ctx) { if
603
587
  } }
604
588
  function FileGridComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
605
589
  const _r19 = i0.ɵɵgetCurrentView();
606
- i0.ɵɵelementStart(0, "div", 131);
590
+ i0.ɵɵelementStart(0, "div", 125);
607
591
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_12_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelDelete()); });
608
- i0.ɵɵelementStart(1, "div", 132);
592
+ i0.ɵɵelementStart(1, "div", 126);
609
593
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_12_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r19); return i0.ɵɵresetView($event.stopPropagation()); });
610
- i0.ɵɵelementStart(2, "div", 133)(3, "h3");
594
+ i0.ɵɵelementStart(2, "div", 127)(3, "h3");
611
595
  i0.ɵɵtext(4);
612
596
  i0.ɵɵelementEnd();
613
- i0.ɵɵelementStart(5, "button", 134);
597
+ i0.ɵɵelementStart(5, "button", 128);
614
598
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_12_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelDelete()); });
615
599
  i0.ɵɵelement(6, "i", 30);
616
600
  i0.ɵɵelementEnd()();
617
- i0.ɵɵelementStart(7, "div", 135)(8, "p");
601
+ i0.ɵɵelementStart(7, "div", 129)(8, "p");
618
602
  i0.ɵɵtext(9, "Are you sure you want to delete ");
619
603
  i0.ɵɵelementStart(10, "strong");
620
604
  i0.ɵɵtext(11);
621
605
  i0.ɵɵelementEnd();
622
606
  i0.ɵɵtext(12, "?");
623
607
  i0.ɵɵelementEnd();
624
- i0.ɵɵconditionalCreate(13, FileGridComponent_Conditional_12_Conditional_13_Template, 2, 0, "p", 139);
608
+ i0.ɵɵconditionalCreate(13, FileGridComponent_Conditional_12_Conditional_13_Template, 2, 0, "p", 133);
625
609
  i0.ɵɵelementEnd();
626
- i0.ɵɵelementStart(14, "div", 137)(15, "button", 138);
610
+ i0.ɵɵelementStart(14, "div", 131)(15, "button", 132);
627
611
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_12_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelDelete()); });
628
612
  i0.ɵɵtext(16, "Cancel");
629
613
  i0.ɵɵelementEnd();
630
- i0.ɵɵelementStart(17, "button", 140);
614
+ i0.ɵɵelementStart(17, "button", 134);
631
615
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_12_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmDelete()); });
632
616
  i0.ɵɵconditionalCreate(18, FileGridComponent_Conditional_12_Conditional_18_Template, 1, 0, "i", 38);
633
617
  i0.ɵɵtext(19);
@@ -654,29 +638,29 @@ function FileGridComponent_Conditional_13_Conditional_15_Template(rf, ctx) { if
654
638
  } }
655
639
  function FileGridComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
656
640
  const _r20 = i0.ɵɵgetCurrentView();
657
- i0.ɵɵelementStart(0, "div", 131);
641
+ i0.ɵɵelementStart(0, "div", 125);
658
642
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_13_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelRename()); });
659
- i0.ɵɵelementStart(1, "div", 132);
643
+ i0.ɵɵelementStart(1, "div", 126);
660
644
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_13_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r20); return i0.ɵɵresetView($event.stopPropagation()); });
661
- i0.ɵɵelementStart(2, "div", 133)(3, "h3");
645
+ i0.ɵɵelementStart(2, "div", 127)(3, "h3");
662
646
  i0.ɵɵtext(4);
663
647
  i0.ɵɵelementEnd();
664
- i0.ɵɵelementStart(5, "button", 134);
648
+ i0.ɵɵelementStart(5, "button", 128);
665
649
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_13_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelRename()); });
666
650
  i0.ɵɵelement(6, "i", 30);
667
651
  i0.ɵɵelementEnd()();
668
- i0.ɵɵelementStart(7, "div", 135)(8, "label");
652
+ i0.ɵɵelementStart(7, "div", 129)(8, "label");
669
653
  i0.ɵɵtext(9, "New name:");
670
654
  i0.ɵɵelementEnd();
671
- i0.ɵɵelementStart(10, "input", 141);
655
+ i0.ɵɵelementStart(10, "input", 135);
672
656
  i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_Conditional_13_Template_input_ngModelChange_10_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.newItemName, $event) || (ctx_r1.newItemName = $event); return i0.ɵɵresetView($event); });
673
657
  i0.ɵɵlistener("keydown.enter", function FileGridComponent_Conditional_13_Template_input_keydown_enter_10_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmRename()); });
674
658
  i0.ɵɵelementEnd()();
675
- i0.ɵɵelementStart(11, "div", 137)(12, "button", 138);
659
+ i0.ɵɵelementStart(11, "div", 131)(12, "button", 132);
676
660
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_13_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelRename()); });
677
661
  i0.ɵɵtext(13, "Cancel");
678
662
  i0.ɵɵelementEnd();
679
- i0.ɵɵelementStart(14, "button", 138);
663
+ i0.ɵɵelementStart(14, "button", 132);
680
664
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_13_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmRename()); });
681
665
  i0.ɵɵconditionalCreate(15, FileGridComponent_Conditional_13_Conditional_15_Template, 1, 0, "i", 38);
682
666
  i0.ɵɵtext(16);
@@ -702,18 +686,18 @@ function FileGridComponent_Conditional_14_Conditional_19_Template(rf, ctx) { if
702
686
  } }
703
687
  function FileGridComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
704
688
  const _r21 = i0.ɵɵgetCurrentView();
705
- i0.ɵɵelementStart(0, "div", 131);
689
+ i0.ɵɵelementStart(0, "div", 125);
706
690
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_14_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelCopy()); });
707
- i0.ɵɵelementStart(1, "div", 132);
691
+ i0.ɵɵelementStart(1, "div", 126);
708
692
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_14_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r21); return i0.ɵɵresetView($event.stopPropagation()); });
709
- i0.ɵɵelementStart(2, "div", 133)(3, "h3");
693
+ i0.ɵɵelementStart(2, "div", 127)(3, "h3");
710
694
  i0.ɵɵtext(4);
711
695
  i0.ɵɵelementEnd();
712
- i0.ɵɵelementStart(5, "button", 134);
696
+ i0.ɵɵelementStart(5, "button", 128);
713
697
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_14_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelCopy()); });
714
698
  i0.ɵɵelement(6, "i", 30);
715
699
  i0.ɵɵelementEnd()();
716
- i0.ɵɵelementStart(7, "div", 135)(8, "p");
700
+ i0.ɵɵelementStart(7, "div", 129)(8, "p");
717
701
  i0.ɵɵtext(9, "Copying: ");
718
702
  i0.ɵɵelementStart(10, "strong");
719
703
  i0.ɵɵtext(11);
@@ -721,15 +705,15 @@ function FileGridComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
721
705
  i0.ɵɵelementStart(12, "label");
722
706
  i0.ɵɵtext(13, "Destination path:");
723
707
  i0.ɵɵelementEnd();
724
- i0.ɵɵelementStart(14, "input", 142);
708
+ i0.ɵɵelementStart(14, "input", 136);
725
709
  i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_Conditional_14_Template_input_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.copyDestinationPath, $event) || (ctx_r1.copyDestinationPath = $event); return i0.ɵɵresetView($event); });
726
710
  i0.ɵɵlistener("keydown.enter", function FileGridComponent_Conditional_14_Template_input_keydown_enter_14_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmCopy()); });
727
711
  i0.ɵɵelementEnd()();
728
- i0.ɵɵelementStart(15, "div", 137)(16, "button", 138);
712
+ i0.ɵɵelementStart(15, "div", 131)(16, "button", 132);
729
713
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_14_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelCopy()); });
730
714
  i0.ɵɵtext(17, "Cancel");
731
715
  i0.ɵɵelementEnd();
732
- i0.ɵɵelementStart(18, "button", 138);
716
+ i0.ɵɵelementStart(18, "button", 132);
733
717
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_14_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmCopy()); });
734
718
  i0.ɵɵconditionalCreate(19, FileGridComponent_Conditional_14_Conditional_19_Template, 1, 0, "i", 38);
735
719
  i0.ɵɵtext(20);
@@ -757,18 +741,18 @@ function FileGridComponent_Conditional_15_Conditional_21_Template(rf, ctx) { if
757
741
  } }
758
742
  function FileGridComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
759
743
  const _r22 = i0.ɵɵgetCurrentView();
760
- i0.ɵɵelementStart(0, "div", 131);
744
+ i0.ɵɵelementStart(0, "div", 125);
761
745
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_15_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelMove()); });
762
- i0.ɵɵelementStart(1, "div", 132);
746
+ i0.ɵɵelementStart(1, "div", 126);
763
747
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_15_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r22); return i0.ɵɵresetView($event.stopPropagation()); });
764
- i0.ɵɵelementStart(2, "div", 133)(3, "h3");
748
+ i0.ɵɵelementStart(2, "div", 127)(3, "h3");
765
749
  i0.ɵɵtext(4);
766
750
  i0.ɵɵelementEnd();
767
- i0.ɵɵelementStart(5, "button", 134);
751
+ i0.ɵɵelementStart(5, "button", 128);
768
752
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_15_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelMove()); });
769
753
  i0.ɵɵelement(6, "i", 30);
770
754
  i0.ɵɵelementEnd()();
771
- i0.ɵɵelementStart(7, "div", 135)(8, "p");
755
+ i0.ɵɵelementStart(7, "div", 129)(8, "p");
772
756
  i0.ɵɵtext(9, "Moving: ");
773
757
  i0.ɵɵelementStart(10, "strong");
774
758
  i0.ɵɵtext(11);
@@ -776,18 +760,18 @@ function FileGridComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
776
760
  i0.ɵɵelementStart(12, "label");
777
761
  i0.ɵɵtext(13, "Destination folder path:");
778
762
  i0.ɵɵelementEnd();
779
- i0.ɵɵelementStart(14, "input", 143);
763
+ i0.ɵɵelementStart(14, "input", 137);
780
764
  i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_Conditional_15_Template_input_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.moveDestinationPath, $event) || (ctx_r1.moveDestinationPath = $event); return i0.ɵɵresetView($event); });
781
765
  i0.ɵɵlistener("keydown.enter", function FileGridComponent_Conditional_15_Template_input_keydown_enter_14_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmMove()); });
782
766
  i0.ɵɵelementEnd();
783
- i0.ɵɵelementStart(15, "p", 144);
767
+ i0.ɵɵelementStart(15, "p", 138);
784
768
  i0.ɵɵtext(16);
785
769
  i0.ɵɵelementEnd()();
786
- i0.ɵɵelementStart(17, "div", 137)(18, "button", 138);
770
+ i0.ɵɵelementStart(17, "div", 131)(18, "button", 132);
787
771
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_15_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelMove()); });
788
772
  i0.ɵɵtext(19, "Cancel");
789
773
  i0.ɵɵelementEnd();
790
- i0.ɵɵelementStart(20, "button", 138);
774
+ i0.ɵɵelementStart(20, "button", 132);
791
775
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_15_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmMove()); });
792
776
  i0.ɵɵconditionalCreate(21, FileGridComponent_Conditional_15_Conditional_21_Template, 1, 0, "i", 38);
793
777
  i0.ɵɵtext(22);
@@ -814,12 +798,12 @@ function FileGridComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
814
798
  } }
815
799
  function FileGridComponent_Conditional_16_For_20_Template(rf, ctx) { if (rf & 1) {
816
800
  const _r24 = i0.ɵɵgetCurrentView();
817
- i0.ɵɵelementStart(0, "div", 147)(1, "input", 151);
801
+ i0.ɵɵelementStart(0, "div", 141)(1, "input", 145);
818
802
  i0.ɵɵlistener("change", function FileGridComponent_Conditional_16_For_20_Template_input_change_1_listener() { const a_r25 = i0.ɵɵrestoreView(_r24).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleDestinationAccount(a_r25.account.ID)); });
819
803
  i0.ɵɵelementEnd();
820
- i0.ɵɵelementStart(2, "label", 152);
804
+ i0.ɵɵelementStart(2, "label", 146);
821
805
  i0.ɵɵtext(3);
822
- i0.ɵɵelementStart(4, "span", 153);
806
+ i0.ɵɵelementStart(4, "span", 147);
823
807
  i0.ɵɵtext(5);
824
808
  i0.ɵɵelementEnd()()();
825
809
  } if (rf & 2) {
@@ -835,7 +819,7 @@ function FileGridComponent_Conditional_16_For_20_Template(rf, ctx) { if (rf & 1)
835
819
  i0.ɵɵtextInterpolate(a_r25.provider.Name);
836
820
  } }
837
821
  function FileGridComponent_Conditional_16_Conditional_24_Template(rf, ctx) { if (rf & 1) {
838
- i0.ɵɵelementStart(0, "div", 150);
822
+ i0.ɵɵelementStart(0, "div", 144);
839
823
  i0.ɵɵelement(1, "i", 38);
840
824
  i0.ɵɵtext(2);
841
825
  i0.ɵɵelementEnd();
@@ -849,23 +833,23 @@ function FileGridComponent_Conditional_16_Conditional_29_Template(rf, ctx) { if
849
833
  } }
850
834
  function FileGridComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
851
835
  const _r23 = i0.ɵɵgetCurrentView();
852
- i0.ɵɵelementStart(0, "div", 131);
836
+ i0.ɵɵelementStart(0, "div", 125);
853
837
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_16_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelCopyToAccount()); });
854
- i0.ɵɵelementStart(1, "div", 132);
838
+ i0.ɵɵelementStart(1, "div", 126);
855
839
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_16_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r23); return i0.ɵɵresetView($event.stopPropagation()); });
856
- i0.ɵɵelementStart(2, "div", 133)(3, "h3");
840
+ i0.ɵɵelementStart(2, "div", 127)(3, "h3");
857
841
  i0.ɵɵtext(4, "Copy to Another Account");
858
842
  i0.ɵɵelementEnd();
859
- i0.ɵɵelementStart(5, "button", 134);
843
+ i0.ɵɵelementStart(5, "button", 128);
860
844
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_16_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelCopyToAccount()); });
861
845
  i0.ɵɵelement(6, "i", 30);
862
846
  i0.ɵɵelementEnd()();
863
- i0.ɵɵelementStart(7, "div", 135)(8, "p");
847
+ i0.ɵɵelementStart(7, "div", 129)(8, "p");
864
848
  i0.ɵɵtext(9, "Copying: ");
865
849
  i0.ɵɵelementStart(10, "strong");
866
850
  i0.ɵɵtext(11);
867
851
  i0.ɵɵelementEnd()();
868
- i0.ɵɵelementStart(12, "p", 145);
852
+ i0.ɵɵelementStart(12, "p", 139);
869
853
  i0.ɵɵtext(13, " From: ");
870
854
  i0.ɵɵelementStart(14, "strong");
871
855
  i0.ɵɵtext(15);
@@ -873,23 +857,23 @@ function FileGridComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
873
857
  i0.ɵɵelementStart(16, "label");
874
858
  i0.ɵɵtext(17, "Select destination account(s):");
875
859
  i0.ɵɵelementEnd();
876
- i0.ɵɵelementStart(18, "div", 146);
877
- i0.ɵɵrepeaterCreate(19, FileGridComponent_Conditional_16_For_20_Template, 6, 6, "div", 147, i0.ɵɵrepeaterTrackByIdentity);
860
+ i0.ɵɵelementStart(18, "div", 140);
861
+ i0.ɵɵrepeaterCreate(19, FileGridComponent_Conditional_16_For_20_Template, 6, 6, "div", 141, i0.ɵɵrepeaterTrackByIdentity);
878
862
  i0.ɵɵelementEnd();
879
- i0.ɵɵelementStart(21, "label", 148);
863
+ i0.ɵɵelementStart(21, "label", 142);
880
864
  i0.ɵɵtext(22, "Destination filename:");
881
865
  i0.ɵɵelementEnd();
882
- i0.ɵɵelementStart(23, "input", 149);
866
+ i0.ɵɵelementStart(23, "input", 143);
883
867
  i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_Conditional_16_Template_input_ngModelChange_23_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.copyToAccountDestinationPath, $event) || (ctx_r1.copyToAccountDestinationPath = $event); return i0.ɵɵresetView($event); });
884
868
  i0.ɵɵlistener("keydown.enter", function FileGridComponent_Conditional_16_Template_input_keydown_enter_23_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmCopyToAccount()); });
885
869
  i0.ɵɵelementEnd();
886
- i0.ɵɵconditionalCreate(24, FileGridComponent_Conditional_16_Conditional_24_Template, 3, 3, "div", 150);
870
+ i0.ɵɵconditionalCreate(24, FileGridComponent_Conditional_16_Conditional_24_Template, 3, 3, "div", 144);
887
871
  i0.ɵɵelementEnd();
888
- i0.ɵɵelementStart(25, "div", 137)(26, "button", 138);
872
+ i0.ɵɵelementStart(25, "div", 131)(26, "button", 132);
889
873
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_16_Template_button_click_26_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelCopyToAccount()); });
890
874
  i0.ɵɵtext(27, "Cancel");
891
875
  i0.ɵɵelementEnd();
892
- i0.ɵɵelementStart(28, "button", 138);
876
+ i0.ɵɵelementStart(28, "button", 132);
893
877
  i0.ɵɵlistener("click", function FileGridComponent_Conditional_16_Template_button_click_28_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmCopyToAccount()); });
894
878
  i0.ɵɵconditionalCreate(29, FileGridComponent_Conditional_16_Conditional_29_Template, 1, 0, "i", 38);
895
879
  i0.ɵɵtext(30);
@@ -2344,16 +2328,16 @@ export class FileGridComponent {
2344
2328
  return new Date(dateStr).toLocaleString();
2345
2329
  }
2346
2330
  static ɵfac = function FileGridComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FileGridComponent)(); };
2347
- static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FileGridComponent, selectors: [["mj-file-grid"]], inputs: { account: "account", folderPath: "folderPath" }, outputs: { folderNavigate: "folderNavigate", folderStructureChanged: "folderStructureChanged" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 17, vars: 16, consts: [[1, "file-grid-container", 3, "dragenter", "dragover", "dragleave", "drop"], [1, "breadcrumb-bar"], [1, "multi-provider-search-panel"], [1, "loading-state"], [1, "error-state"], [1, "file-table-wrapper"], [1, "file-grid-wrapper"], [1, "empty-state"], [1, "bottom-toolbar"], [1, "drag-overlay"], [1, "upload-progress"], [1, "modal-overlay"], [1, "nav-buttons"], ["title", "Go up to parent folder", 1, "nav-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-arrow-up"], ["title", "Refresh", 1, "nav-btn", 3, "click"], [1, "fa-solid", "fa-arrows-rotate"], [1, "breadcrumb-path"], [1, "fa-solid", "fa-folder"], [1, "path-text"], [1, "search-bar"], ["type", "text", "placeholder", "Search files and folders...", 1, "search-input", 3, "ngModelChange", "ngModel", "disabled"], ["title", "Clear search", 1, "search-clear-btn"], [1, "file-type-filter", 3, "ngModelChange", "ngModel", "disabled"], ["value", "all"], ["value", "files"], ["value", "folders"], ["title", "Search across all storage providers", 1, "multi-search-btn", 3, "click"], [1, "fa-solid", "fa-magnifying-glass-plus"], ["title", "Clear search", 1, "search-clear-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "search-panel-header"], [1, "fa-solid", "fa-magnifying-glass"], [1, "close-panel-btn", 3, "click"], [1, "search-panel-body"], [1, "search-input-row"], ["type", "text", "placeholder", "Enter search term...", 1, "multi-search-input", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "search-execute-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-search"], [1, "provider-selection"], [1, "provider-selection-label"], [1, "provider-checkboxes"], [1, "provider-checkbox", 3, "disabled", "title"], [1, "search-results-container"], [1, "searching-state"], [1, "provider-checkbox", 3, "title"], ["type", "checkbox", 3, "change", "checked", "disabled"], [1, "provider-name"], [1, "provider-type"], [1, "no-search-badge"], [1, "search-results-summary"], [1, "result-count"], [1, "provider-stats"], [1, "failed-count"], [1, "clear-results-btn", 3, "click"], [1, "provider-results-list"], [1, "provider-result-group", 3, "failed"], [1, "provider-result-group"], [1, "provider-result-header"], [1, "fa-solid", "fa-cloud"], [1, "error-badge"], [1, "provider-result-files"], [1, "no-results-message"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "search-result-item"], [1, "file-icon"], [1, "file-info"], [1, "file-name"], [1, "file-path"], [1, "file-size"], [1, "file-date"], ["text", "Searching across providers..."], ["text", "Loading files..."], [1, "error-icon"], [1, "fa-solid", "fa-circle-exclamation"], [1, "error-message"], [1, "retry-btn", 3, "click"], [1, "file-table"], [1, "col-name", 3, "click"], [1, "fa-solid", "sort-icon"], [1, "col-type"], [1, "col-size", 3, "click"], [1, "col-modified", 3, "click"], [1, "file-row", 3, "selected"], [1, "file-row", 3, "click", "dblclick"], [1, "col-name"], [1, "item-icon"], [1, "item-name"], [1, "item-type"], [1, "col-size"], [1, "item-size"], [1, "col-modified"], [1, "item-date"], [1, "file-grid"], [1, "grid-item", 3, "selected"], [1, "grid-item", 3, "click", "dblclick"], [1, "grid-icon"], [1, "grid-name"], [1, "grid-meta"], [1, "empty-icon"], [1, "fa-solid", "fa-folder-open"], [1, "empty-message"], [1, "upload-btn", 3, "click"], [1, "fa-solid", "fa-upload"], [1, "toolbar-left"], [1, "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-folder-plus"], [1, "toolbar-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-download"], [1, "fa-solid", "fa-pen"], [1, "fa-solid", "fa-copy"], ["title", "Copy file to another storage account", 1, "toolbar-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-cloud-arrow-up"], [1, "fa-solid", "fa-arrows-up-down-left-right"], [1, "fa-solid", "fa-trash"], [1, "toolbar-right"], [1, "view-toggle"], ["title", "List View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["title", "Grid View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-th"], [1, "item-count"], [1, "drag-content"], [1, "drag-icon"], [1, "drag-title"], [1, "progress-content"], [1, "progress-info"], [1, "progress-bar-wrap"], [1, "progress-bar"], [1, "progress-percent"], [1, "modal-overlay", 3, "click"], [1, "modal-dialog", 3, "click"], [1, "modal-header"], [1, "modal-close", 3, "click"], [1, "modal-body"], ["type", "text", "placeholder", "Enter folder name", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "modal-footer"], [3, "click", "disabled"], [1, "warning"], [1, "danger", 3, "click", "disabled"], ["type", "text", "placeholder", "Enter new name", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], ["type", "text", "placeholder", "Enter destination path", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], ["type", "text", "placeholder", "Enter destination folder (e.g., folder1/folder2/)", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [2, "font-size", "11px", "color", "var(--mj-text-secondary)", "margin-top", "8px"], [2, "font-size", "12px", "color", "var(--mj-text-secondary)", "margin-bottom", "16px"], [1, "account-checkbox-list"], [1, "account-checkbox-item"], [2, "margin-top", "16px"], ["type", "text", "placeholder", "Enter destination filename", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "copy-progress"], ["type", "checkbox", 3, "change", "id", "checked", "disabled"], [3, "for"], [1, "provider-badge"]], template: function FileGridComponent_Template(rf, ctx) { if (rf & 1) {
2331
+ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FileGridComponent, selectors: [["mj-file-grid"]], inputs: { account: "account", folderPath: "folderPath" }, outputs: { folderNavigate: "folderNavigate", folderStructureChanged: "folderStructureChanged" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 17, vars: 16, consts: [[1, "file-grid-container", 3, "dragenter", "dragover", "dragleave", "drop"], [1, "breadcrumb-bar"], [1, "multi-provider-search-panel"], [1, "loading-state"], ["Variant", "error", "Icon", "fa-solid fa-circle-exclamation", "Title", "Couldn't load files", "ActionText", "Retry", "ActionIcon", "fa-solid fa-arrows-rotate", 1, "file-grid-empty-fill", 3, "Message"], [1, "file-table-wrapper"], [1, "file-grid-wrapper"], ["Icon", "fa-solid fa-folder-open", "Title", "This folder is empty", "ActionText", "Upload Files", "ActionIcon", "fa-solid fa-upload", 1, "file-grid-empty-fill"], [1, "bottom-toolbar"], [1, "drag-overlay"], [1, "upload-progress"], [1, "modal-overlay"], [1, "nav-buttons"], ["title", "Go up to parent folder", 1, "nav-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-arrow-up"], ["title", "Refresh", 1, "nav-btn", 3, "click"], [1, "fa-solid", "fa-arrows-rotate"], [1, "breadcrumb-path"], [1, "fa-solid", "fa-folder"], [1, "path-text"], [1, "search-bar"], ["type", "text", "placeholder", "Search files and folders...", 1, "search-input", 3, "ngModelChange", "ngModel", "disabled"], ["title", "Clear search", 1, "search-clear-btn"], [1, "file-type-filter", 3, "ngModelChange", "ngModel", "disabled"], ["value", "all"], ["value", "files"], ["value", "folders"], ["title", "Search across all storage providers", 1, "multi-search-btn", 3, "click"], [1, "fa-solid", "fa-magnifying-glass-plus"], ["title", "Clear search", 1, "search-clear-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "search-panel-header"], [1, "fa-solid", "fa-magnifying-glass"], [1, "close-panel-btn", 3, "click"], [1, "search-panel-body"], [1, "search-input-row"], ["type", "text", "placeholder", "Enter search term...", 1, "multi-search-input", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "search-execute-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-search"], [1, "provider-selection"], [1, "provider-selection-label"], [1, "provider-checkboxes"], [1, "provider-checkbox", 3, "disabled", "title"], [1, "search-results-container"], [1, "searching-state"], [1, "provider-checkbox", 3, "title"], ["type", "checkbox", 3, "change", "checked", "disabled"], [1, "provider-name"], [1, "provider-type"], [1, "no-search-badge"], [1, "search-results-summary"], [1, "result-count"], [1, "provider-stats"], [1, "failed-count"], [1, "clear-results-btn", 3, "click"], [1, "provider-results-list"], [1, "provider-result-group", 3, "failed"], [1, "provider-result-group"], [1, "provider-result-header"], [1, "fa-solid", "fa-cloud"], [1, "error-badge"], [1, "provider-result-files"], [1, "no-results-message"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "search-result-item"], [1, "file-icon"], [1, "file-info"], [1, "file-name"], [1, "file-path"], [1, "file-size"], [1, "file-date"], ["text", "Searching across providers..."], ["text", "Loading files..."], ["Variant", "error", "Icon", "fa-solid fa-circle-exclamation", "Title", "Couldn't load files", "ActionText", "Retry", "ActionIcon", "fa-solid fa-arrows-rotate", 1, "file-grid-empty-fill", 3, "Action", "Message"], [1, "file-table"], [1, "col-name", 3, "click"], [1, "fa-solid", "sort-icon"], [1, "col-type"], [1, "col-size", 3, "click"], [1, "col-modified", 3, "click"], [1, "file-row", 3, "selected"], [1, "file-row", 3, "click", "dblclick"], [1, "col-name"], [1, "item-icon"], [1, "item-name"], [1, "item-type"], [1, "col-size"], [1, "item-size"], [1, "col-modified"], [1, "item-date"], [1, "file-grid"], [1, "grid-item", 3, "selected"], [1, "grid-item", 3, "click", "dblclick"], [1, "grid-icon"], [1, "grid-name"], [1, "grid-meta"], ["Icon", "fa-solid fa-folder-open", "Title", "This folder is empty", "ActionText", "Upload Files", "ActionIcon", "fa-solid fa-upload", 1, "file-grid-empty-fill", 3, "Action"], [1, "toolbar-left"], [1, "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-upload"], [1, "fa-solid", "fa-folder-plus"], [1, "toolbar-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-download"], [1, "fa-solid", "fa-pen"], [1, "fa-solid", "fa-copy"], ["title", "Copy file to another storage account", 1, "toolbar-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-cloud-arrow-up"], [1, "fa-solid", "fa-arrows-up-down-left-right"], [1, "fa-solid", "fa-trash"], [1, "toolbar-right"], [1, "view-toggle"], ["title", "List View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["title", "Grid View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-th"], [1, "item-count"], [1, "drag-content"], [1, "drag-icon"], [1, "drag-title"], [1, "progress-content"], [1, "progress-info"], [1, "progress-bar-wrap"], [1, "progress-bar"], [1, "progress-percent"], [1, "modal-overlay", 3, "click"], [1, "modal-dialog", 3, "click"], [1, "modal-header"], [1, "modal-close", 3, "click"], [1, "modal-body"], ["type", "text", "placeholder", "Enter folder name", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "modal-footer"], [3, "click", "disabled"], [1, "warning"], [1, "danger", 3, "click", "disabled"], ["type", "text", "placeholder", "Enter new name", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], ["type", "text", "placeholder", "Enter destination path", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], ["type", "text", "placeholder", "Enter destination folder (e.g., folder1/folder2/)", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [2, "font-size", "11px", "color", "var(--mj-text-secondary)", "margin-top", "8px"], [2, "font-size", "12px", "color", "var(--mj-text-secondary)", "margin-bottom", "16px"], [1, "account-checkbox-list"], [1, "account-checkbox-item"], [2, "margin-top", "16px"], ["type", "text", "placeholder", "Enter destination filename", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "copy-progress"], ["type", "checkbox", 3, "change", "id", "checked", "disabled"], [3, "for"], [1, "provider-badge"]], template: function FileGridComponent_Template(rf, ctx) { if (rf & 1) {
2348
2332
  i0.ɵɵelementStart(0, "div", 0);
2349
2333
  i0.ɵɵlistener("dragenter", function FileGridComponent_Template_div_dragenter_0_listener($event) { return ctx.onDragEnter($event); })("dragover", function FileGridComponent_Template_div_dragover_0_listener($event) { return ctx.onDragOver($event); })("dragleave", function FileGridComponent_Template_div_dragleave_0_listener($event) { return ctx.onDragLeave($event); })("drop", function FileGridComponent_Template_div_drop_0_listener($event) { return ctx.onDrop($event); });
2350
2334
  i0.ɵɵconditionalCreate(1, FileGridComponent_Conditional_1_Template, 22, 9, "div", 1);
2351
2335
  i0.ɵɵconditionalCreate(2, FileGridComponent_Conditional_2_Template, 22, 8, "div", 2);
2352
2336
  i0.ɵɵconditionalCreate(3, FileGridComponent_Conditional_3_Template, 2, 0, "div", 3);
2353
- i0.ɵɵconditionalCreate(4, FileGridComponent_Conditional_4_Template, 8, 1, "div", 4);
2337
+ i0.ɵɵconditionalCreate(4, FileGridComponent_Conditional_4_Template, 1, 1, "mj-empty-state", 4);
2354
2338
  i0.ɵɵconditionalCreate(5, FileGridComponent_Conditional_5_Template, 21, 18, "div", 5);
2355
2339
  i0.ɵɵconditionalCreate(6, FileGridComponent_Conditional_6_Template, 4, 0, "div", 6);
2356
- i0.ɵɵconditionalCreate(7, FileGridComponent_Conditional_7_Template, 8, 0, "div", 7);
2340
+ i0.ɵɵconditionalCreate(7, FileGridComponent_Conditional_7_Template, 1, 0, "mj-empty-state", 7);
2357
2341
  i0.ɵɵconditionalCreate(8, FileGridComponent_Conditional_8_Template, 34, 12, "div", 8);
2358
2342
  i0.ɵɵconditionalCreate(9, FileGridComponent_Conditional_9_Template, 6, 0, "div", 9);
2359
2343
  i0.ɵɵconditionalCreate(10, FileGridComponent_Conditional_10_Template, 10, 4, "div", 10);
@@ -2397,11 +2381,11 @@ export class FileGridComponent {
2397
2381
  i0.ɵɵconditional(ctx.showMoveDialog && ctx.itemToMove ? 15 : -1);
2398
2382
  i0.ɵɵadvance();
2399
2383
  i0.ɵɵconditional(ctx.showCopyToProviderDialog && ctx.itemToCopyToProvider ? 16 : -1);
2400
- } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.LoadingComponent], styles: ["\n\n\n\n\n[_nghost-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n background-color: var(--mj-bg-surface);\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.file-grid-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n position: relative;\n}\n\n\n\n\n\n\n.breadcrumb-bar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 6px 10px;\n background-color: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-strong);\n gap: 10px;\n flex-wrap: wrap;\n}\n\n.nav-buttons[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n}\n\n.nav-btn[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-strong);\n padding: 4px 8px;\n cursor: pointer;\n border-radius: 3px;\n font-size: 12px;\n color: var(--mj-text-primary);\n transition: background-color 0.15s;\n}\n\n.nav-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.nav-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.breadcrumb-path[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-primary);\n}\n\n.breadcrumb-path[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n}\n\n.path-text[_ngcontent-%COMP%] {\n font-weight: 500;\n}\n\n.search-bar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-left: auto;\n position: relative;\n}\n\n.search-input[_ngcontent-%COMP%] {\n padding: 4px 30px 4px 8px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 3px;\n font-size: 12px;\n font-family: inherit;\n min-width: 200px;\n}\n\n.search-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n}\n\n.search-clear-btn[_ngcontent-%COMP%] {\n position: absolute;\n right: 142px;\n background: none;\n border: none;\n cursor: pointer;\n color: var(--mj-text-disabled);\n padding: 4px;\n font-size: 12px;\n}\n\n.search-clear-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n}\n\n.file-type-filter[_ngcontent-%COMP%] {\n padding: 4px 8px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 3px;\n font-size: 12px;\n font-family: inherit;\n background: var(--mj-bg-surface);\n cursor: pointer;\n}\n\n.file-type-filter[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n.file-table-wrapper[_ngcontent-%COMP%] {\n flex: 1;\n overflow: auto;\n border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.file-table[_ngcontent-%COMP%] {\n width: 100%;\n border-collapse: collapse;\n font-size: 12px;\n}\n\n.file-table[_ngcontent-%COMP%] thead[_ngcontent-%COMP%] {\n position: sticky;\n top: 0;\n background-color: var(--mj-bg-surface-sunken);\n z-index: 10;\n}\n\n.file-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\n text-align: left;\n padding: 6px 10px;\n border-bottom: 1px solid var(--mj-border-strong);\n font-weight: 600;\n color: var(--mj-text-primary);\n cursor: pointer;\n user-select: none;\n}\n\n.file-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.file-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n margin-right: 4px;\n}\n\n.sort-icon[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--mj-text-secondary);\n}\n\n.file-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] {\n border-bottom: 1px solid var(--mj-border-default);\n cursor: pointer;\n transition: background-color 0.1s;\n}\n\n.file-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-bg-surface-card);\n}\n\n.file-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr.selected[_ngcontent-%COMP%] {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.file-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr.selected[_ngcontent-%COMP%]:hover {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.file-table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 6px 10px;\n color: var(--mj-text-primary);\n}\n\n\n\n.col-name[_ngcontent-%COMP%] {\n width: 50%;\n}\n\n.col-type[_ngcontent-%COMP%] {\n width: 15%;\n}\n\n.col-size[_ngcontent-%COMP%] {\n width: 15%;\n}\n\n.col-modified[_ngcontent-%COMP%] {\n width: 20%;\n}\n\n\n\n.col-name[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.item-icon[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-secondary);\n flex-shrink: 0;\n}\n\n.item-name[_ngcontent-%COMP%] {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n\n\n.fa-folder[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n\n\n\n.fa-file-pdf[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.fa-file-word[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.fa-file-excel[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.fa-file-image[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.fa-file-video[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n\n.fa-file-audio[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.fa-file-archive[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n}\n\n.fa-file-code[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n\n\n\n\n\n.file-grid-wrapper[_ngcontent-%COMP%] {\n flex: 1;\n overflow: auto;\n padding: 10px;\n border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.file-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n gap: 12px;\n}\n\n.grid-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 12px 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.15s;\n background: var(--mj-bg-surface);\n}\n\n.grid-item[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-bg-surface-card);\n border-color: var(--mj-border-strong);\n}\n\n.grid-item.selected[_ngcontent-%COMP%] {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-color: var(--mj-brand-primary);\n}\n\n.grid-icon[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 8px;\n color: var(--mj-text-secondary);\n}\n\n.grid-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n display: block;\n}\n\n.grid-name[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-primary);\n text-align: center;\n word-break: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n max-width: 100%;\n}\n\n.grid-meta[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-secondary);\n margin-top: 4px;\n}\n\n\n\n\n\n\n.bottom-toolbar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 6px 10px;\n background-color: var(--mj-bg-surface-card);\n border-top: 1px solid var(--mj-border-strong);\n min-height: 36px;\n}\n\n.toolbar-left[_ngcontent-%COMP%] {\n display: flex;\n gap: 6px;\n}\n\n.toolbar-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-strong);\n padding: 5px 12px;\n cursor: pointer;\n border-radius: 3px;\n font-size: 12px;\n color: var(--mj-text-primary);\n transition: background-color 0.15s;\n}\n\n.toolbar-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.toolbar-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.toolbar-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.toolbar-right[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.view-toggle[_ngcontent-%COMP%] {\n display: flex;\n border: 1px solid var(--mj-border-strong);\n border-radius: 3px;\n overflow: hidden;\n}\n\n.view-btn[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: none;\n border-right: 1px solid var(--mj-border-strong);\n padding: 4px 10px;\n cursor: pointer;\n font-size: 12px;\n color: var(--mj-text-secondary);\n transition: all 0.15s;\n}\n\n.view-btn[_ngcontent-%COMP%]:last-child {\n border-right: none;\n}\n\n.view-btn[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.view-btn.active[_ngcontent-%COMP%] {\n background-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.item-count[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-secondary);\n}\n\n\n\n\n\n\n.loading-state[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%], \n.empty-state[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n}\n\n.error-icon[_ngcontent-%COMP%], \n.empty-icon[_ngcontent-%COMP%] {\n font-size: 48px;\n color: var(--mj-text-disabled);\n margin-bottom: 16px;\n}\n\n.error-message[_ngcontent-%COMP%], \n.empty-message[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-secondary);\n margin-bottom: 16px;\n}\n\n.retry-btn[_ngcontent-%COMP%], \n.upload-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-strong);\n padding: 8px 16px;\n cursor: pointer;\n border-radius: 3px;\n font-size: 13px;\n color: var(--mj-text-primary);\n transition: background-color 0.15s;\n}\n\n.retry-btn[_ngcontent-%COMP%]:hover, \n.upload-btn[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n\n\n\n\n\n.drag-overlay[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: color-mix(in srgb, var(--mj-bg-surface) 95%, transparent);\n z-index: 1000;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 3px dashed var(--mj-brand-primary);\n}\n\n.drag-content[_ngcontent-%COMP%] {\n text-align: center;\n}\n\n.drag-icon[_ngcontent-%COMP%] {\n font-size: 64px;\n color: var(--mj-brand-primary);\n margin-bottom: 16px;\n}\n\n.drag-title[_ngcontent-%COMP%] {\n font-size: 20px;\n font-weight: 600;\n color: var(--mj-brand-primary);\n margin: 0;\n}\n\n\n\n\n\n\n.upload-progress[_ngcontent-%COMP%] {\n position: absolute;\n bottom: 40px;\n right: 20px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-strong);\n border-radius: 4px;\n padding: 12px 16px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n min-width: 300px;\n z-index: 100;\n}\n\n.progress-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.progress-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n\n.progress-bar-wrap[_ngcontent-%COMP%] {\n width: 100%;\n height: 6px;\n background-color: var(--mj-border-default);\n border-radius: 3px;\n overflow: hidden;\n}\n\n.progress-bar[_ngcontent-%COMP%] {\n height: 100%;\n background-color: var(--mj-brand-primary);\n transition: width 0.3s ease;\n}\n\n.progress-percent[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n text-align: right;\n}\n\n\n\n\n\n\n.modal-overlay[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 2000;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.modal-dialog[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-text-disabled);\n border-radius: 4px;\n min-width: 400px;\n max-width: 90%;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);\n}\n\n.modal-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n background-color: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.modal-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.modal-close[_ngcontent-%COMP%] {\n background: none;\n border: none;\n cursor: pointer;\n font-size: 16px;\n color: var(--mj-text-secondary);\n padding: 4px;\n}\n\n.modal-close[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n}\n\n.modal-body[_ngcontent-%COMP%] {\n padding: 16px;\n}\n\n.modal-body[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 6px;\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.modal-body[_ngcontent-%COMP%] input[type=\"text\"][_ngcontent-%COMP%] {\n width: 100%;\n padding: 6px 10px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 3px;\n font-size: 13px;\n font-family: inherit;\n}\n\n.modal-body[_ngcontent-%COMP%] input[type=\"text\"][_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n}\n\n.modal-body[_ngcontent-%COMP%] select[_ngcontent-%COMP%], \n.modal-body[_ngcontent-%COMP%] .provider-select[_ngcontent-%COMP%] {\n width: 100%;\n padding: 6px 10px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 3px;\n font-size: 13px;\n font-family: inherit;\n background-color: var(--mj-bg-surface);\n cursor: pointer;\n}\n\n.modal-body[_ngcontent-%COMP%] select[_ngcontent-%COMP%]:focus, \n.modal-body[_ngcontent-%COMP%] .provider-select[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n}\n\n.modal-body[_ngcontent-%COMP%] select[_ngcontent-%COMP%]:disabled, \n.modal-body[_ngcontent-%COMP%] .provider-select[_ngcontent-%COMP%]:disabled {\n background-color: var(--mj-bg-surface-card);\n cursor: not-allowed;\n}\n\n.modal-body[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n\n.modal-body[_ngcontent-%COMP%] .warning[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n font-size: 12px;\n}\n\n\n\n.account-checkbox-list[_ngcontent-%COMP%] {\n max-height: 200px;\n overflow-y: auto;\n border: 1px solid var(--mj-border-strong);\n border-radius: 4px;\n padding: 8px;\n background: var(--mj-bg-surface-card);\n}\n\n.account-checkbox-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 4px;\n border-radius: 3px;\n cursor: pointer;\n}\n\n.account-checkbox-item[_ngcontent-%COMP%]:hover {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.account-checkbox-item[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n width: 16px;\n height: 16px;\n cursor: pointer;\n accent-color: var(--mj-brand-primary);\n}\n\n.account-checkbox-item[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n font-size: 13px;\n font-weight: normal;\n margin: 0;\n}\n\n.provider-badge[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-secondary);\n background: var(--mj-border-default);\n padding: 2px 6px;\n border-radius: 10px;\n}\n\n.copy-progress[_ngcontent-%COMP%] {\n margin-top: 12px;\n padding: 8px 12px;\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border-radius: 4px;\n font-size: 12px;\n color: var(--mj-brand-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.modal-footer[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n padding: 12px 16px;\n background-color: var(--mj-bg-surface-card);\n border-top: 1px solid var(--mj-border-strong);\n}\n\n.modal-footer[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n padding: 6px 16px;\n border: 1px solid var(--mj-border-strong);\n background: var(--mj-bg-surface);\n cursor: pointer;\n border-radius: 3px;\n font-size: 12px;\n font-weight: 500;\n transition: background-color 0.15s;\n}\n\n.modal-footer[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:hover:not(:disabled) {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.modal-footer[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.modal-footer[_ngcontent-%COMP%] button.danger[_ngcontent-%COMP%] {\n background-color: var(--mj-status-error);\n color: var(--mj-text-inverse);\n border-color: var(--mj-status-error);\n}\n\n.modal-footer[_ngcontent-%COMP%] button.danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n background-color: var(--mj-status-error-hover, color-mix(in srgb, var(--mj-status-error) 80%, black));\n}\n\n\n\n\n\n\n.file-table-wrapper[_ngcontent-%COMP%]::-webkit-scrollbar {\n width: 12px;\n height: 12px;\n}\n\n.file-table-wrapper[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n background: var(--mj-bg-surface-sunken);\n}\n\n.file-table-wrapper[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n background: var(--mj-border-strong);\n border: 2px solid var(--mj-bg-surface-sunken);\n}\n\n.file-table-wrapper[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n background: var(--mj-text-disabled);\n}\n\n\n\n\n\n\n@media screen and (max-width: 768px) {\n .file-table[_ngcontent-%COMP%] {\n font-size: 11px;\n }\n\n .file-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%], \n .file-table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 4px 6px;\n }\n\n .col-type[_ngcontent-%COMP%], \n .col-size[_ngcontent-%COMP%] {\n display: none;\n }\n\n .col-name[_ngcontent-%COMP%] {\n width: 60%;\n }\n\n .col-modified[_ngcontent-%COMP%] {\n width: 40%;\n }\n\n .toolbar-btn[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n display: none;\n }\n\n .modal-dialog[_ngcontent-%COMP%] {\n min-width: 90%;\n }\n}\n\n\n\n\n\n\n.multi-search-btn[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-strong);\n padding: 4px 8px;\n cursor: pointer;\n border-radius: 3px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n transition: all 0.15s;\n}\n\n.multi-search-btn[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.multi-search-btn.active[_ngcontent-%COMP%] {\n background-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.multi-provider-search-panel[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-strong);\n display: flex;\n flex-direction: column;\n max-height: 70vh;\n overflow: hidden;\n}\n\n.search-panel-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 16px;\n background-color: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.search-panel-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-brand-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.close-panel-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n cursor: pointer;\n font-size: 16px;\n color: var(--mj-text-secondary);\n padding: 4px;\n}\n\n.close-panel-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n}\n\n.search-panel-body[_ngcontent-%COMP%] {\n padding: 16px;\n}\n\n.search-input-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n margin-bottom: 16px;\n}\n\n.multi-search-input[_ngcontent-%COMP%] {\n flex: 1;\n padding: 8px 12px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 4px;\n font-size: 13px;\n font-family: inherit;\n}\n\n.multi-search-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n}\n\n.search-execute-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border: none;\n padding: 8px 16px;\n cursor: pointer;\n border-radius: 4px;\n font-size: 13px;\n font-weight: 500;\n transition: background-color 0.15s;\n}\n\n.search-execute-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background-color: var(--mj-brand-primary-hover);\n}\n\n.search-execute-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.provider-selection[_ngcontent-%COMP%] {\n margin-bottom: 8px;\n}\n\n.provider-selection-label[_ngcontent-%COMP%] {\n display: block;\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin-bottom: 8px;\n}\n\n.provider-checkboxes[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n}\n\n.provider-checkbox[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: var(--mj-text-primary);\n cursor: pointer;\n padding: 4px 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n background: var(--mj-bg-surface-card);\n transition: all 0.15s;\n}\n\n.provider-checkbox[_ngcontent-%COMP%]:hover:not(.disabled) {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.provider-checkbox.disabled[_ngcontent-%COMP%] {\n opacity: 0.6;\n cursor: not-allowed;\n background: var(--mj-bg-surface-card);\n}\n\n.provider-checkbox[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\n.provider-checkbox[_ngcontent-%COMP%] .provider-name[_ngcontent-%COMP%] {\n font-weight: 500;\n}\n\n.no-search-badge[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--mj-text-disabled);\n font-style: italic;\n}\n\n\n\n.search-results-container[_ngcontent-%COMP%] {\n flex: 1;\n overflow: auto;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.search-results-summary[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 16px;\n background: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-results-summary[_ngcontent-%COMP%] .result-count[_ngcontent-%COMP%] {\n font-weight: 600;\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n\n.search-results-summary[_ngcontent-%COMP%] .provider-stats[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n.search-results-summary[_ngcontent-%COMP%] .failed-count[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.clear-results-btn[_ngcontent-%COMP%] {\n margin-left: auto;\n background: none;\n border: 1px solid var(--mj-border-strong);\n padding: 4px 10px;\n cursor: pointer;\n border-radius: 3px;\n font-size: 11px;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.clear-results-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.provider-results-list[_ngcontent-%COMP%] {\n padding: 8px 0;\n}\n\n.provider-result-group[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n}\n\n.provider-result-group[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n\n.provider-result-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n background: var(--mj-bg-surface-card);\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.provider-result-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.provider-result-header[_ngcontent-%COMP%] .result-count[_ngcontent-%COMP%] {\n font-weight: normal;\n color: var(--mj-text-secondary);\n}\n\n.provider-result-group.failed[_ngcontent-%COMP%] .provider-result-header[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n}\n\n.provider-result-group.failed[_ngcontent-%COMP%] .provider-result-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.error-badge[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n font-weight: normal;\n font-size: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.provider-result-files[_ngcontent-%COMP%] {\n padding: 0;\n}\n\n.search-result-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 8px 16px 8px 40px;\n border-bottom: 1px solid var(--mj-bg-surface-sunken);\n cursor: pointer;\n transition: background-color 0.1s;\n}\n\n.search-result-item[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-bg-surface-card);\n}\n\n.search-result-item[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.search-result-item[_ngcontent-%COMP%] .file-icon[_ngcontent-%COMP%] {\n font-size: 16px;\n color: var(--mj-text-secondary);\n flex-shrink: 0;\n}\n\n.search-result-item[_ngcontent-%COMP%] .file-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.search-result-item[_ngcontent-%COMP%] .file-name[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.search-result-item[_ngcontent-%COMP%] .file-path[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-disabled);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.search-result-item[_ngcontent-%COMP%] .file-size[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n flex-shrink: 0;\n min-width: 60px;\n text-align: right;\n}\n\n.search-result-item[_ngcontent-%COMP%] .file-date[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n flex-shrink: 0;\n min-width: 140px;\n text-align: right;\n}\n\n.no-results-message[_ngcontent-%COMP%] {\n padding: 16px 40px;\n font-size: 12px;\n color: var(--mj-text-disabled);\n font-style: italic;\n}\n\n.searching-state[_ngcontent-%COMP%] {\n padding: 40px 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n}"] });
2384
+ } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.LoadingComponent, i3.MJEmptyStateComponent], styles: ["\n\n\n\n\n[_nghost-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n background-color: var(--mj-bg-surface);\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.file-grid-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n position: relative;\n}\n\n\n\n\n\n\n.breadcrumb-bar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 6px 10px;\n background-color: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-strong);\n gap: 10px;\n flex-wrap: wrap;\n}\n\n.nav-buttons[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n}\n\n.nav-btn[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-strong);\n padding: 4px 8px;\n cursor: pointer;\n border-radius: 3px;\n font-size: 12px;\n color: var(--mj-text-primary);\n transition: background-color 0.15s;\n}\n\n.nav-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.nav-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.breadcrumb-path[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-primary);\n}\n\n.breadcrumb-path[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n}\n\n.path-text[_ngcontent-%COMP%] {\n font-weight: 500;\n}\n\n.search-bar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-left: auto;\n position: relative;\n}\n\n.search-input[_ngcontent-%COMP%] {\n padding: 4px 30px 4px 8px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 3px;\n font-size: 12px;\n font-family: inherit;\n min-width: 200px;\n}\n\n.search-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n}\n\n.search-clear-btn[_ngcontent-%COMP%] {\n position: absolute;\n right: 142px;\n background: none;\n border: none;\n cursor: pointer;\n color: var(--mj-text-disabled);\n padding: 4px;\n font-size: 12px;\n}\n\n.search-clear-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n}\n\n.file-type-filter[_ngcontent-%COMP%] {\n padding: 4px 8px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 3px;\n font-size: 12px;\n font-family: inherit;\n background: var(--mj-bg-surface);\n cursor: pointer;\n}\n\n.file-type-filter[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n.file-table-wrapper[_ngcontent-%COMP%] {\n flex: 1;\n overflow: auto;\n border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.file-table[_ngcontent-%COMP%] {\n width: 100%;\n border-collapse: collapse;\n font-size: 12px;\n}\n\n.file-table[_ngcontent-%COMP%] thead[_ngcontent-%COMP%] {\n position: sticky;\n top: 0;\n background-color: var(--mj-bg-surface-sunken);\n z-index: 10;\n}\n\n.file-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\n text-align: left;\n padding: 6px 10px;\n border-bottom: 1px solid var(--mj-border-strong);\n font-weight: 600;\n color: var(--mj-text-primary);\n cursor: pointer;\n user-select: none;\n}\n\n.file-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.file-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n margin-right: 4px;\n}\n\n.sort-icon[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--mj-text-secondary);\n}\n\n.file-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] {\n border-bottom: 1px solid var(--mj-border-default);\n cursor: pointer;\n transition: background-color 0.1s;\n}\n\n.file-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-bg-surface-card);\n}\n\n.file-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr.selected[_ngcontent-%COMP%] {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.file-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr.selected[_ngcontent-%COMP%]:hover {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.file-table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 6px 10px;\n color: var(--mj-text-primary);\n}\n\n\n\n.col-name[_ngcontent-%COMP%] {\n width: 50%;\n}\n\n.col-type[_ngcontent-%COMP%] {\n width: 15%;\n}\n\n.col-size[_ngcontent-%COMP%] {\n width: 15%;\n}\n\n.col-modified[_ngcontent-%COMP%] {\n width: 20%;\n}\n\n\n\n.col-name[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.item-icon[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-secondary);\n flex-shrink: 0;\n}\n\n.item-name[_ngcontent-%COMP%] {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n\n\n.fa-folder[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n\n\n\n.fa-file-pdf[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.fa-file-word[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.fa-file-excel[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.fa-file-image[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.fa-file-video[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n\n.fa-file-audio[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.fa-file-archive[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n}\n\n.fa-file-code[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n\n\n\n\n\n.file-grid-wrapper[_ngcontent-%COMP%] {\n flex: 1;\n overflow: auto;\n padding: 10px;\n border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.file-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n gap: 12px;\n}\n\n.grid-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 12px 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.15s;\n background: var(--mj-bg-surface);\n}\n\n.grid-item[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-bg-surface-card);\n border-color: var(--mj-border-strong);\n}\n\n.grid-item.selected[_ngcontent-%COMP%] {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-color: var(--mj-brand-primary);\n}\n\n.grid-icon[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 8px;\n color: var(--mj-text-secondary);\n}\n\n.grid-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n display: block;\n}\n\n.grid-name[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-primary);\n text-align: center;\n word-break: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n max-width: 100%;\n}\n\n.grid-meta[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-secondary);\n margin-top: 4px;\n}\n\n\n\n\n\n\n.bottom-toolbar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 6px 10px;\n background-color: var(--mj-bg-surface-card);\n border-top: 1px solid var(--mj-border-strong);\n min-height: 36px;\n}\n\n.toolbar-left[_ngcontent-%COMP%] {\n display: flex;\n gap: 6px;\n}\n\n.toolbar-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-strong);\n padding: 5px 12px;\n cursor: pointer;\n border-radius: 3px;\n font-size: 12px;\n color: var(--mj-text-primary);\n transition: background-color 0.15s;\n}\n\n.toolbar-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.toolbar-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.toolbar-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.toolbar-right[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.view-toggle[_ngcontent-%COMP%] {\n display: flex;\n border: 1px solid var(--mj-border-strong);\n border-radius: 3px;\n overflow: hidden;\n}\n\n.view-btn[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: none;\n border-right: 1px solid var(--mj-border-strong);\n padding: 4px 10px;\n cursor: pointer;\n font-size: 12px;\n color: var(--mj-text-secondary);\n transition: all 0.15s;\n}\n\n.view-btn[_ngcontent-%COMP%]:last-child {\n border-right: none;\n}\n\n.view-btn[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.view-btn.active[_ngcontent-%COMP%] {\n background-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.item-count[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-secondary);\n}\n\n\n\n\n\n\n.loading-state[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n}\n\n\n\n.file-grid-empty-fill[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n\n\n\n\n\n.drag-overlay[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: color-mix(in srgb, var(--mj-bg-surface) 95%, transparent);\n z-index: 1000;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 3px dashed var(--mj-brand-primary);\n}\n\n.drag-content[_ngcontent-%COMP%] {\n text-align: center;\n}\n\n.drag-icon[_ngcontent-%COMP%] {\n font-size: 64px;\n color: var(--mj-brand-primary);\n margin-bottom: 16px;\n}\n\n.drag-title[_ngcontent-%COMP%] {\n font-size: 20px;\n font-weight: 600;\n color: var(--mj-brand-primary);\n margin: 0;\n}\n\n\n\n\n\n\n.upload-progress[_ngcontent-%COMP%] {\n position: absolute;\n bottom: 40px;\n right: 20px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-strong);\n border-radius: 4px;\n padding: 12px 16px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n min-width: 300px;\n z-index: 100;\n}\n\n.progress-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.progress-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n\n.progress-bar-wrap[_ngcontent-%COMP%] {\n width: 100%;\n height: 6px;\n background-color: var(--mj-border-default);\n border-radius: 3px;\n overflow: hidden;\n}\n\n.progress-bar[_ngcontent-%COMP%] {\n height: 100%;\n background-color: var(--mj-brand-primary);\n transition: width 0.3s ease;\n}\n\n.progress-percent[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n text-align: right;\n}\n\n\n\n\n\n\n.modal-overlay[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 2000;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.modal-dialog[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-text-disabled);\n border-radius: 4px;\n min-width: 400px;\n max-width: 90%;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);\n}\n\n.modal-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n background-color: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.modal-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.modal-close[_ngcontent-%COMP%] {\n background: none;\n border: none;\n cursor: pointer;\n font-size: 16px;\n color: var(--mj-text-secondary);\n padding: 4px;\n}\n\n.modal-close[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n}\n\n.modal-body[_ngcontent-%COMP%] {\n padding: 16px;\n}\n\n.modal-body[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 6px;\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.modal-body[_ngcontent-%COMP%] input[type=\"text\"][_ngcontent-%COMP%] {\n width: 100%;\n padding: 6px 10px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 3px;\n font-size: 13px;\n font-family: inherit;\n}\n\n.modal-body[_ngcontent-%COMP%] input[type=\"text\"][_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n}\n\n.modal-body[_ngcontent-%COMP%] select[_ngcontent-%COMP%], \n.modal-body[_ngcontent-%COMP%] .provider-select[_ngcontent-%COMP%] {\n width: 100%;\n padding: 6px 10px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 3px;\n font-size: 13px;\n font-family: inherit;\n background-color: var(--mj-bg-surface);\n cursor: pointer;\n}\n\n.modal-body[_ngcontent-%COMP%] select[_ngcontent-%COMP%]:focus, \n.modal-body[_ngcontent-%COMP%] .provider-select[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n}\n\n.modal-body[_ngcontent-%COMP%] select[_ngcontent-%COMP%]:disabled, \n.modal-body[_ngcontent-%COMP%] .provider-select[_ngcontent-%COMP%]:disabled {\n background-color: var(--mj-bg-surface-card);\n cursor: not-allowed;\n}\n\n.modal-body[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n\n.modal-body[_ngcontent-%COMP%] .warning[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n font-size: 12px;\n}\n\n\n\n.account-checkbox-list[_ngcontent-%COMP%] {\n max-height: 200px;\n overflow-y: auto;\n border: 1px solid var(--mj-border-strong);\n border-radius: 4px;\n padding: 8px;\n background: var(--mj-bg-surface-card);\n}\n\n.account-checkbox-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 4px;\n border-radius: 3px;\n cursor: pointer;\n}\n\n.account-checkbox-item[_ngcontent-%COMP%]:hover {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.account-checkbox-item[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n width: 16px;\n height: 16px;\n cursor: pointer;\n accent-color: var(--mj-brand-primary);\n}\n\n.account-checkbox-item[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n font-size: 13px;\n font-weight: normal;\n margin: 0;\n}\n\n.provider-badge[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-secondary);\n background: var(--mj-border-default);\n padding: 2px 6px;\n border-radius: 10px;\n}\n\n.copy-progress[_ngcontent-%COMP%] {\n margin-top: 12px;\n padding: 8px 12px;\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border-radius: 4px;\n font-size: 12px;\n color: var(--mj-brand-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.modal-footer[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n padding: 12px 16px;\n background-color: var(--mj-bg-surface-card);\n border-top: 1px solid var(--mj-border-strong);\n}\n\n.modal-footer[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n padding: 6px 16px;\n border: 1px solid var(--mj-border-strong);\n background: var(--mj-bg-surface);\n cursor: pointer;\n border-radius: 3px;\n font-size: 12px;\n font-weight: 500;\n transition: background-color 0.15s;\n}\n\n.modal-footer[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:hover:not(:disabled) {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.modal-footer[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.modal-footer[_ngcontent-%COMP%] button.danger[_ngcontent-%COMP%] {\n background-color: var(--mj-status-error);\n color: var(--mj-text-inverse);\n border-color: var(--mj-status-error);\n}\n\n.modal-footer[_ngcontent-%COMP%] button.danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n background-color: var(--mj-status-error-hover, color-mix(in srgb, var(--mj-status-error) 80%, black));\n}\n\n\n\n\n\n\n.file-table-wrapper[_ngcontent-%COMP%]::-webkit-scrollbar {\n width: 12px;\n height: 12px;\n}\n\n.file-table-wrapper[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n background: var(--mj-bg-surface-sunken);\n}\n\n.file-table-wrapper[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n background: var(--mj-border-strong);\n border: 2px solid var(--mj-bg-surface-sunken);\n}\n\n.file-table-wrapper[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n background: var(--mj-text-disabled);\n}\n\n\n\n\n\n\n@media screen and (max-width: 768px) {\n .file-table[_ngcontent-%COMP%] {\n font-size: 11px;\n }\n\n .file-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%], \n .file-table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 4px 6px;\n }\n\n .col-type[_ngcontent-%COMP%], \n .col-size[_ngcontent-%COMP%] {\n display: none;\n }\n\n .col-name[_ngcontent-%COMP%] {\n width: 60%;\n }\n\n .col-modified[_ngcontent-%COMP%] {\n width: 40%;\n }\n\n .toolbar-btn[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n display: none;\n }\n\n .modal-dialog[_ngcontent-%COMP%] {\n min-width: 90%;\n }\n}\n\n\n\n\n\n\n.multi-search-btn[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-strong);\n padding: 4px 8px;\n cursor: pointer;\n border-radius: 3px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n transition: all 0.15s;\n}\n\n.multi-search-btn[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.multi-search-btn.active[_ngcontent-%COMP%] {\n background-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.multi-provider-search-panel[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-strong);\n display: flex;\n flex-direction: column;\n max-height: 70vh;\n overflow: hidden;\n}\n\n.search-panel-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 16px;\n background-color: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.search-panel-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-brand-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.close-panel-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n cursor: pointer;\n font-size: 16px;\n color: var(--mj-text-secondary);\n padding: 4px;\n}\n\n.close-panel-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n}\n\n.search-panel-body[_ngcontent-%COMP%] {\n padding: 16px;\n}\n\n.search-input-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n margin-bottom: 16px;\n}\n\n.multi-search-input[_ngcontent-%COMP%] {\n flex: 1;\n padding: 8px 12px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 4px;\n font-size: 13px;\n font-family: inherit;\n}\n\n.multi-search-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n}\n\n.search-execute-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border: none;\n padding: 8px 16px;\n cursor: pointer;\n border-radius: 4px;\n font-size: 13px;\n font-weight: 500;\n transition: background-color 0.15s;\n}\n\n.search-execute-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background-color: var(--mj-brand-primary-hover);\n}\n\n.search-execute-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.provider-selection[_ngcontent-%COMP%] {\n margin-bottom: 8px;\n}\n\n.provider-selection-label[_ngcontent-%COMP%] {\n display: block;\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin-bottom: 8px;\n}\n\n.provider-checkboxes[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n}\n\n.provider-checkbox[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: var(--mj-text-primary);\n cursor: pointer;\n padding: 4px 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n background: var(--mj-bg-surface-card);\n transition: all 0.15s;\n}\n\n.provider-checkbox[_ngcontent-%COMP%]:hover:not(.disabled) {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.provider-checkbox.disabled[_ngcontent-%COMP%] {\n opacity: 0.6;\n cursor: not-allowed;\n background: var(--mj-bg-surface-card);\n}\n\n.provider-checkbox[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\n.provider-checkbox[_ngcontent-%COMP%] .provider-name[_ngcontent-%COMP%] {\n font-weight: 500;\n}\n\n.no-search-badge[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--mj-text-disabled);\n font-style: italic;\n}\n\n\n\n.search-results-container[_ngcontent-%COMP%] {\n flex: 1;\n overflow: auto;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.search-results-summary[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 16px;\n background: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-results-summary[_ngcontent-%COMP%] .result-count[_ngcontent-%COMP%] {\n font-weight: 600;\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n\n.search-results-summary[_ngcontent-%COMP%] .provider-stats[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n.search-results-summary[_ngcontent-%COMP%] .failed-count[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.clear-results-btn[_ngcontent-%COMP%] {\n margin-left: auto;\n background: none;\n border: 1px solid var(--mj-border-strong);\n padding: 4px 10px;\n cursor: pointer;\n border-radius: 3px;\n font-size: 11px;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.clear-results-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.provider-results-list[_ngcontent-%COMP%] {\n padding: 8px 0;\n}\n\n.provider-result-group[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n}\n\n.provider-result-group[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n\n.provider-result-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n background: var(--mj-bg-surface-card);\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.provider-result-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.provider-result-header[_ngcontent-%COMP%] .result-count[_ngcontent-%COMP%] {\n font-weight: normal;\n color: var(--mj-text-secondary);\n}\n\n.provider-result-group.failed[_ngcontent-%COMP%] .provider-result-header[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n}\n\n.provider-result-group.failed[_ngcontent-%COMP%] .provider-result-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.error-badge[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n font-weight: normal;\n font-size: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.provider-result-files[_ngcontent-%COMP%] {\n padding: 0;\n}\n\n.search-result-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 8px 16px 8px 40px;\n border-bottom: 1px solid var(--mj-bg-surface-sunken);\n cursor: pointer;\n transition: background-color 0.1s;\n}\n\n.search-result-item[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-bg-surface-card);\n}\n\n.search-result-item[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.search-result-item[_ngcontent-%COMP%] .file-icon[_ngcontent-%COMP%] {\n font-size: 16px;\n color: var(--mj-text-secondary);\n flex-shrink: 0;\n}\n\n.search-result-item[_ngcontent-%COMP%] .file-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.search-result-item[_ngcontent-%COMP%] .file-name[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.search-result-item[_ngcontent-%COMP%] .file-path[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-disabled);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.search-result-item[_ngcontent-%COMP%] .file-size[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n flex-shrink: 0;\n min-width: 60px;\n text-align: right;\n}\n\n.search-result-item[_ngcontent-%COMP%] .file-date[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n flex-shrink: 0;\n min-width: 140px;\n text-align: right;\n}\n\n.no-results-message[_ngcontent-%COMP%] {\n padding: 16px 40px;\n font-size: 12px;\n color: var(--mj-text-disabled);\n font-style: italic;\n}\n\n.searching-state[_ngcontent-%COMP%] {\n padding: 40px 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n}"] });
2401
2385
  }
2402
2386
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FileGridComponent, [{
2403
2387
  type: Component,
2404
- args: [{ standalone: false, selector: 'mj-file-grid', template: "<div class=\"file-grid-container\"\n (dragenter)=\"onDragEnter($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n <!-- Breadcrumb Navigation Bar -->\n @if (!isLoading && !errorMessage) {\n <div class=\"breadcrumb-bar\">\n <div class=\"nav-buttons\">\n <button class=\"nav-btn\"\n [disabled]=\"!canNavigateUp()\"\n (click)=\"navigateUp()\"\n title=\"Go up to parent folder\">\n <i class=\"fa-solid fa-arrow-up\"></i>\n </button>\n <button class=\"nav-btn\" (click)=\"refresh()\" title=\"Refresh\">\n <i class=\"fa-solid fa-arrows-rotate\"></i>\n </button>\n </div>\n <div class=\"breadcrumb-path\">\n <i class=\"fa-solid fa-folder\"></i>\n <span class=\"path-text\">{{ folderPath || 'Root' }} /</span>\n </div>\n <div class=\"search-bar\">\n <input type=\"text\"\n class=\"search-input\"\n [(ngModel)]=\"searchQuery\"\n (ngModelChange)=\"onSearchChange($event)\"\n placeholder=\"Search files and folders...\"\n [disabled]=\"isLoading || isMultiProviderSearchMode\">\n @if (searchQuery && !isMultiProviderSearchMode) {\n <button class=\"search-clear-btn\"\n (click)=\"clearSearch()\"\n title=\"Clear search\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n }\n <select class=\"file-type-filter\"\n [(ngModel)]=\"fileTypeFilter\"\n (ngModelChange)=\"onFileTypeFilterChange($event)\"\n [disabled]=\"isLoading || isMultiProviderSearchMode\">\n <option value=\"all\">All</option>\n <option value=\"files\">Files</option>\n <option value=\"folders\">Folders</option>\n </select>\n <button class=\"multi-search-btn\"\n [class.active]=\"isMultiProviderSearchMode\"\n (click)=\"toggleMultiAccountSearchMode()\"\n title=\"Search across all storage providers\">\n <i class=\"fa-solid fa-magnifying-glass-plus\"></i>\n </button>\n </div>\n </div>\n }\n\n <!-- Multi-Provider Search Panel -->\n @if (isMultiProviderSearchMode) {\n <div class=\"multi-provider-search-panel\">\n <div class=\"search-panel-header\">\n <h3><i class=\"fa-solid fa-magnifying-glass\"></i> Search Across Providers</h3>\n <button class=\"close-panel-btn\" (click)=\"toggleMultiAccountSearchMode()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"search-panel-body\">\n <div class=\"search-input-row\">\n <input type=\"text\"\n class=\"multi-search-input\"\n [(ngModel)]=\"multiProviderSearchQuery\"\n placeholder=\"Enter search term...\"\n (keydown.enter)=\"executeMultiAccountSearch()\"\n [disabled]=\"isSearching\">\n <button class=\"search-execute-btn\"\n (click)=\"executeMultiAccountSearch()\"\n [disabled]=\"isSearching || !multiProviderSearchQuery.trim() || selectedSearchProviders.size === 0\">\n @if (isSearching) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n }\n @if (!isSearching) {\n <i class=\"fa-solid fa-search\"></i>\n }\n {{ isSearching ? 'Searching...' : 'Search' }}\n </button>\n </div>\n <div class=\"provider-selection\">\n <label class=\"provider-selection-label\">Select accounts to search:</label>\n <div class=\"provider-checkboxes\">\n @for (a of availableAccounts; track a) {\n <label\n class=\"provider-checkbox\"\n [class.disabled]=\"!accountSupportsSearch(a)\"\n [title]=\"accountSupportsSearch(a) ? '' : 'This account does not support search'\">\n <input type=\"checkbox\"\n [checked]=\"isAccountSelectedForSearch(a.account.ID)\"\n (change)=\"toggleSearchAccount(a.account.ID)\"\n [disabled]=\"!accountSupportsSearch(a)\">\n <span class=\"provider-name\">{{ a.account.Name }}</span>\n <span class=\"provider-type\">({{ a.provider.Name }})</span>\n @if (!accountSupportsSearch(a)) {\n <span class=\"no-search-badge\">(no search)</span>\n }\n </label>\n }\n </div>\n </div>\n </div>\n <!-- Search Results -->\n @if (multiProviderSearchResults) {\n <div class=\"search-results-container\">\n <div class=\"search-results-summary\">\n <span class=\"result-count\">{{ multiProviderSearchResults.totalResultsReturned }} result(s) found</span>\n <span class=\"provider-stats\">\n ({{ multiProviderSearchResults.successfulAccounts }} account(s) searched\n @if (multiProviderSearchResults.failedAccounts > 0) {\n <span class=\"failed-count\">\n , {{ multiProviderSearchResults.failedAccounts }} failed\n </span>\n })\n </span>\n <button class=\"clear-results-btn\" (click)=\"clearMultiProviderSearch()\">\n <i class=\"fa-solid fa-xmark\"></i> Clear\n </button>\n </div>\n <div class=\"provider-results-list\">\n @for (accountResult of multiProviderSearchResults.accountResults; track accountResult) {\n <div\n class=\"provider-result-group\"\n [class.failed]=\"!accountResult.success\">\n <div class=\"provider-result-header\">\n <i class=\"fa-solid fa-cloud\"></i>\n <span class=\"provider-name\">{{ accountResult.accountName }}</span>\n @if (accountResult.success) {\n <span class=\"result-count\">\n ({{ accountResult.results.length }} result(s))\n </span>\n }\n @if (!accountResult.success) {\n <span class=\"error-badge\">\n <i class=\"fa-solid fa-exclamation-triangle\"></i>\n {{ accountResult.errorMessage }}\n </span>\n }\n </div>\n @if (accountResult.success && accountResult.results.length > 0) {\n <div class=\"provider-result-files\">\n @for (file of accountResult.results; track file) {\n <div class=\"search-result-item\">\n <i [class]=\"getSearchResultIcon(file)\" class=\"file-icon\"></i>\n <div class=\"file-info\">\n <span class=\"file-name\">{{ file.name }}</span>\n <span class=\"file-path\">{{ file.path }}</span>\n </div>\n <span class=\"file-size\">{{ formatSearchResultSize(file.size) }}</span>\n <span class=\"file-date\">{{ formatSearchResultDate(file.lastModified) }}</span>\n </div>\n }\n </div>\n }\n @if (accountResult.success && accountResult.results.length === 0) {\n <div class=\"no-results-message\">\n No matching files found\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n <!-- Searching State -->\n @if (isSearching) {\n <div class=\"searching-state\">\n <mj-loading text=\"Searching across providers...\"></mj-loading>\n </div>\n }\n </div>\n }\n\n <!-- Loading State -->\n @if (isLoading && !isMultiProviderSearchMode) {\n <div class=\"loading-state\">\n <mj-loading text=\"Loading files...\"></mj-loading>\n </div>\n }\n\n <!-- Error State -->\n @if (errorMessage && !isLoading) {\n <div class=\"error-state\">\n <div class=\"error-icon\">\n <i class=\"fa-solid fa-circle-exclamation\"></i>\n </div>\n <p class=\"error-message\">{{ errorMessage }}</p>\n <button class=\"retry-btn\" (click)=\"refresh()\">\n <i class=\"fa-solid fa-arrows-rotate\"></i>\n Retry\n </button>\n </div>\n }\n\n <!-- List View -->\n @if (!isLoading && !errorMessage && filteredItems.length > 0 && viewMode === 'list') {\n <div class=\"file-table-wrapper\">\n <table class=\"file-table\">\n <thead>\n <tr>\n <th class=\"col-name\" (click)=\"onSortChange([{ field: 'name', dir: sort[0].field === 'name' && sort[0].dir === 'asc' ? 'desc' : 'asc' }])\">\n <span>Name</span>\n <i class=\"fa-solid sort-icon\"\n [class.fa-caret-up]=\"sort[0].field === 'name' && sort[0].dir === 'asc'\"\n [class.fa-caret-down]=\"sort[0].field === 'name' && sort[0].dir === 'desc'\"\n [class.fa-sort]=\"sort[0].field !== 'name'\"></i>\n </th>\n <th class=\"col-type\">Type</th>\n <th class=\"col-size\" (click)=\"onSortChange([{ field: 'size', dir: sort[0].field === 'size' && sort[0].dir === 'asc' ? 'desc' : 'asc' }])\">\n <span>Size</span>\n <i class=\"fa-solid sort-icon\"\n [class.fa-caret-up]=\"sort[0].field === 'size' && sort[0].dir === 'asc'\"\n [class.fa-caret-down]=\"sort[0].field === 'size' && sort[0].dir === 'desc'\"\n [class.fa-sort]=\"sort[0].field !== 'size'\"></i>\n </th>\n <th class=\"col-modified\" (click)=\"onSortChange([{ field: 'lastModified', dir: sort[0].field === 'lastModified' && sort[0].dir === 'asc' ? 'desc' : 'asc' }])\">\n <span>Modified</span>\n <i class=\"fa-solid sort-icon\"\n [class.fa-caret-up]=\"sort[0].field === 'lastModified' && sort[0].dir === 'asc'\"\n [class.fa-caret-down]=\"sort[0].field === 'lastModified' && sort[0].dir === 'desc'\"\n [class.fa-sort]=\"sort[0].field !== 'lastModified'\"></i>\n </th>\n </tr>\n </thead>\n <tbody>\n @for (item of filteredItems; track item) {\n <tr\n class=\"file-row\"\n [class.selected]=\"selectedItems.includes(item.key)\"\n (click)=\"onTileClick(item, $event)\"\n (dblclick)=\"onItemDoubleClick(item)\">\n <td class=\"col-name\">\n <i [class]=\"getItemIcon(item)\" class=\"item-icon\"></i>\n <span class=\"item-name\">{{ item.name }}</span>\n </td>\n <td class=\"col-type\">\n <span class=\"item-type\">{{ getFileType(item) }}</span>\n </td>\n <td class=\"col-size\">\n <span class=\"item-size\">{{ item.type === 'folder' ? '\u2014' : formatFileSize(item.size) }}</span>\n </td>\n <td class=\"col-modified\">\n <span class=\"item-date\">{{ formatDate(item.lastModified) }}</span>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n\n <!-- Grid View -->\n @if (!isLoading && !errorMessage && filteredItems.length > 0 && viewMode === 'grid') {\n <div class=\"file-grid-wrapper\">\n <div class=\"file-grid\">\n @for (item of filteredItems; track item) {\n <div\n class=\"grid-item\"\n [class.selected]=\"selectedItems.includes(item.key)\"\n (click)=\"onTileClick(item, $event)\"\n (dblclick)=\"onItemDoubleClick(item)\">\n <div class=\"grid-icon\">\n <i [class]=\"getItemIcon(item)\"></i>\n </div>\n <div class=\"grid-name\">{{ item.name }}</div>\n @if (item.type === 'file') {\n <div class=\"grid-meta\">{{ formatFileSize(item.size) }}</div>\n }\n @if (item.type === 'folder') {\n <div class=\"grid-meta\">Folder</div>\n }\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Empty State -->\n @if (!isLoading && !errorMessage && filteredItems.length === 0) {\n <div class=\"empty-state\">\n <div class=\"empty-icon\">\n <i class=\"fa-solid fa-folder-open\"></i>\n </div>\n <p class=\"empty-message\">This folder is empty</p>\n <button class=\"upload-btn\" (click)=\"onUploadClick()\">\n <i class=\"fa-solid fa-upload\"></i>\n Upload Files\n </button>\n </div>\n }\n\n <!-- Bottom Toolbar -->\n @if (!isLoading && !errorMessage) {\n <div class=\"bottom-toolbar\">\n <div class=\"toolbar-left\">\n <button class=\"toolbar-btn\" (click)=\"onUploadClick()\">\n <i class=\"fa-solid fa-upload\"></i>\n Upload\n </button>\n <button class=\"toolbar-btn\" (click)=\"onNewFolderClick()\">\n <i class=\"fa-solid fa-folder-plus\"></i>\n New Folder\n </button>\n <button class=\"toolbar-btn\"\n [disabled]=\"selectedItems.length !== 1\"\n (click)=\"onDownloadClick()\">\n <i class=\"fa-solid fa-download\"></i>\n Download\n </button>\n <button class=\"toolbar-btn\"\n [disabled]=\"selectedItems.length !== 1\"\n (click)=\"onRenameClick()\">\n <i class=\"fa-solid fa-pen\"></i>\n Rename\n </button>\n <button class=\"toolbar-btn\"\n [disabled]=\"selectedItems.length !== 1\"\n (click)=\"onCopyClick()\">\n <i class=\"fa-solid fa-copy\"></i>\n Copy\n </button>\n <button class=\"toolbar-btn\"\n [disabled]=\"selectedItems.length !== 1 || getSelectedItem()?.type === 'folder'\"\n (click)=\"onCopyToAccountClick()\"\n title=\"Copy file to another storage account\">\n <i class=\"fa-solid fa-cloud-arrow-up\"></i>\n Copy to...\n </button>\n <button class=\"toolbar-btn\"\n [disabled]=\"selectedItems.length !== 1\"\n (click)=\"onMoveClick()\">\n <i class=\"fa-solid fa-arrows-up-down-left-right\"></i>\n Move\n </button>\n <button class=\"toolbar-btn\"\n [disabled]=\"selectedItems.length === 0\"\n (click)=\"onDeleteClick()\">\n <i class=\"fa-solid fa-trash\"></i>\n Delete\n </button>\n </div>\n <div class=\"toolbar-right\">\n <!-- View Toggle -->\n <div class=\"view-toggle\">\n <button class=\"view-btn\"\n [class.active]=\"viewMode === 'list'\"\n (click)=\"viewMode = 'list'\"\n title=\"List View\">\n <i class=\"fa-solid fa-list\"></i>\n </button>\n <button class=\"view-btn\"\n [class.active]=\"viewMode === 'grid'\"\n (click)=\"viewMode = 'grid'\"\n title=\"Grid View\">\n <i class=\"fa-solid fa-th\"></i>\n </button>\n </div>\n <span class=\"item-count\">\n {{ filteredItems.length }} {{ filteredItems.length === 1 ? 'item' : 'filteredItems' }}\n </span>\n </div>\n </div>\n }\n\n <!-- Drag & Drop Overlay -->\n @if (isDragging) {\n <div class=\"drag-overlay\">\n <div class=\"drag-content\">\n <div class=\"drag-icon\">\n <i class=\"fa-solid fa-cloud-arrow-up\"></i>\n </div>\n <h2 class=\"drag-title\">Drop files to upload</h2>\n </div>\n </div>\n }\n\n <!-- Upload Progress -->\n @if (isUploading) {\n <div class=\"upload-progress\">\n <div class=\"progress-content\">\n <div class=\"progress-info\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n <span>Uploading {{ uploadingFileName }}...</span>\n </div>\n <div class=\"progress-bar-wrap\">\n <div class=\"progress-bar\" [style.width.%]=\"uploadProgress\"></div>\n </div>\n <span class=\"progress-percent\">{{ uploadProgress }}%</span>\n </div>\n </div>\n }\n </div>\n\n <!-- New Folder Modal -->\n @if (showNewFolderDialog) {\n <div class=\"modal-overlay\" (click)=\"onCancelNewFolder()\">\n <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"modal-header\">\n <h3>Create New Folder</h3>\n <button class=\"modal-close\" (click)=\"onCancelNewFolder()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"modal-body\">\n <label>Folder name:</label>\n <input type=\"text\"\n [(ngModel)]=\"newFolderName\"\n [disabled]=\"isCreatingFolder\"\n placeholder=\"Enter folder name\"\n (keydown.enter)=\"onCreateFolder()\">\n </div>\n <div class=\"modal-footer\">\n <button (click)=\"onCancelNewFolder()\" [disabled]=\"isCreatingFolder\">Cancel</button>\n <button (click)=\"onCreateFolder()\" [disabled]=\"!newFolderName.trim() || isCreatingFolder\">\n @if (isCreatingFolder) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n }\n {{ isCreatingFolder ? 'Creating...' : 'Create' }}\n </button>\n </div>\n </div>\n </div>\n }\n\n <!-- Delete Confirmation Modal -->\n @if (showDeleteDialog && itemToDelete) {\n <div class=\"modal-overlay\" (click)=\"onCancelDelete()\">\n <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"modal-header\">\n <h3>Delete {{ itemToDelete.type === 'folder' ? 'Folder' : 'File' }}?</h3>\n <button class=\"modal-close\" (click)=\"onCancelDelete()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"modal-body\">\n <p>Are you sure you want to delete <strong>{{ itemToDelete.name }}</strong>?</p>\n @if (itemToDelete.type === 'folder') {\n <p class=\"warning\">This will delete the folder and all its contents.</p>\n }\n </div>\n <div class=\"modal-footer\">\n <button (click)=\"onCancelDelete()\" [disabled]=\"isDeleting\">Cancel</button>\n <button (click)=\"onConfirmDelete()\" [disabled]=\"isDeleting\" class=\"danger\">\n @if (isDeleting) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n }\n {{ isDeleting ? 'Deleting...' : 'Delete' }}\n </button>\n </div>\n </div>\n </div>\n }\n\n <!-- Rename Modal -->\n @if (showRenameDialog && itemToRename) {\n <div class=\"modal-overlay\" (click)=\"onCancelRename()\">\n <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"modal-header\">\n <h3>Rename {{ itemToRename.type === 'folder' ? 'Folder' : 'File' }}</h3>\n <button class=\"modal-close\" (click)=\"onCancelRename()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"modal-body\">\n <label>New name:</label>\n <input type=\"text\"\n [(ngModel)]=\"newItemName\"\n [disabled]=\"isRenaming\"\n placeholder=\"Enter new name\"\n (keydown.enter)=\"onConfirmRename()\">\n </div>\n <div class=\"modal-footer\">\n <button (click)=\"onCancelRename()\" [disabled]=\"isRenaming\">Cancel</button>\n <button (click)=\"onConfirmRename()\" [disabled]=\"isRenaming || !newItemName.trim()\">\n @if (isRenaming) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n }\n {{ isRenaming ? 'Renaming...' : 'Rename' }}\n </button>\n </div>\n </div>\n </div>\n }\n\n <!-- Copy Modal -->\n @if (showCopyDialog && itemToCopy) {\n <div class=\"modal-overlay\" (click)=\"onCancelCopy()\">\n <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"modal-header\">\n <h3>Copy {{ itemToCopy.type === 'folder' ? 'Folder' : 'File' }}</h3>\n <button class=\"modal-close\" (click)=\"onCancelCopy()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"modal-body\">\n <p>Copying: <strong>{{ itemToCopy.name }}</strong></p>\n <label>Destination path:</label>\n <input type=\"text\"\n [(ngModel)]=\"copyDestinationPath\"\n [disabled]=\"isCopying\"\n placeholder=\"Enter destination path\"\n (keydown.enter)=\"onConfirmCopy()\">\n </div>\n <div class=\"modal-footer\">\n <button (click)=\"onCancelCopy()\" [disabled]=\"isCopying\">Cancel</button>\n <button (click)=\"onConfirmCopy()\" [disabled]=\"isCopying || !copyDestinationPath.trim()\">\n @if (isCopying) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n }\n {{ isCopying ? 'Copying...' : 'Copy' }}\n </button>\n </div>\n </div>\n </div>\n }\n\n <!-- Move Modal -->\n @if (showMoveDialog && itemToMove) {\n <div class=\"modal-overlay\" (click)=\"onCancelMove()\">\n <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"modal-header\">\n <h3>Move {{ itemToMove.type === 'folder' ? 'Folder' : 'File' }}</h3>\n <button class=\"modal-close\" (click)=\"onCancelMove()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"modal-body\">\n <p>Moving: <strong>{{ itemToMove.name }}</strong></p>\n <label>Destination folder path:</label>\n <input type=\"text\"\n [(ngModel)]=\"moveDestinationPath\"\n [disabled]=\"isMoving\"\n placeholder=\"Enter destination folder (e.g., folder1/folder2/)\"\n (keydown.enter)=\"onConfirmMove()\">\n <p style=\"font-size: 11px; color: var(--mj-text-secondary); margin-top: 8px;\">\n File will be moved to: {{ moveDestinationPath }}{{ itemToMove.name }}\n </p>\n </div>\n <div class=\"modal-footer\">\n <button (click)=\"onCancelMove()\" [disabled]=\"isMoving\">Cancel</button>\n <button (click)=\"onConfirmMove()\" [disabled]=\"isMoving || !moveDestinationPath.trim()\">\n @if (isMoving) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n }\n {{ isMoving ? 'Moving...' : 'Move' }}\n </button>\n </div>\n </div>\n </div>\n }\n\n <!-- Copy to Account Modal -->\n @if (showCopyToProviderDialog && itemToCopyToProvider) {\n <div class=\"modal-overlay\" (click)=\"onCancelCopyToAccount()\">\n <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"modal-header\">\n <h3>Copy to Another Account</h3>\n <button class=\"modal-close\" (click)=\"onCancelCopyToAccount()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"modal-body\">\n <p>Copying: <strong>{{ itemToCopyToProvider.name }}</strong></p>\n <p style=\"font-size: 12px; color: var(--mj-text-secondary); margin-bottom: 16px;\">\n From: <strong>{{ account?.account?.Name }}</strong>\n </p>\n <label>Select destination account(s):</label>\n <div class=\"account-checkbox-list\">\n @for (a of availableAccounts; track a) {\n <div class=\"account-checkbox-item\">\n <input type=\"checkbox\"\n [id]=\"'dest-account-' + a.account.ID\"\n [checked]=\"isDestinationAccountSelected(a.account.ID)\"\n [disabled]=\"isCopyingToAccount\"\n (change)=\"toggleDestinationAccount(a.account.ID)\">\n <label [for]=\"'dest-account-' + a.account.ID\">\n {{ a.account.Name }} <span class=\"provider-badge\">{{ a.provider.Name }}</span>\n </label>\n </div>\n }\n </div>\n <label style=\"margin-top: 16px;\">Destination filename:</label>\n <input type=\"text\"\n [(ngModel)]=\"copyToAccountDestinationPath\"\n [disabled]=\"isCopyingToAccount\"\n placeholder=\"Enter destination filename\"\n (keydown.enter)=\"onConfirmCopyToAccount()\">\n @if (copyToAccountProgress) {\n <div class=\"copy-progress\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n Copying to {{ copyToAccountProgress.currentAccount }} ({{ copyToAccountProgress.current }}/{{ copyToAccountProgress.total }})...\n </div>\n }\n </div>\n <div class=\"modal-footer\">\n <button (click)=\"onCancelCopyToAccount()\" [disabled]=\"isCopyingToAccount\">Cancel</button>\n <button (click)=\"onConfirmCopyToAccount()\"\n [disabled]=\"isCopyingToAccount || selectedDestinationAccounts.size === 0 || !copyToAccountDestinationPath.trim()\">\n @if (isCopyingToAccount) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n }\n {{ isCopyingToAccount ? 'Copying...' : 'Copy to ' + selectedDestinationAccounts.size + ' account' + (selectedDestinationAccounts.size !== 1 ? 's' : '') }}\n </button>\n </div>\n </div>\n </div>\n }\n", styles: ["/* ===========================\n File Grid - Traditional File Manager Style\n =========================== */\n\n:host {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n background-color: var(--mj-bg-surface);\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.file-grid-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n position: relative;\n}\n\n/* ===========================\n Breadcrumb Navigation Bar\n =========================== */\n\n.breadcrumb-bar {\n display: flex;\n align-items: center;\n padding: 6px 10px;\n background-color: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-strong);\n gap: 10px;\n flex-wrap: wrap;\n}\n\n.nav-buttons {\n display: flex;\n gap: 4px;\n}\n\n.nav-btn {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-strong);\n padding: 4px 8px;\n cursor: pointer;\n border-radius: 3px;\n font-size: 12px;\n color: var(--mj-text-primary);\n transition: background-color 0.15s;\n}\n\n.nav-btn:hover:not(:disabled) {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.nav-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.breadcrumb-path {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-primary);\n}\n\n.breadcrumb-path i {\n color: var(--mj-text-secondary);\n}\n\n.path-text {\n font-weight: 500;\n}\n\n.search-bar {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-left: auto;\n position: relative;\n}\n\n.search-input {\n padding: 4px 30px 4px 8px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 3px;\n font-size: 12px;\n font-family: inherit;\n min-width: 200px;\n}\n\n.search-input:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n}\n\n.search-clear-btn {\n position: absolute;\n right: 142px;\n background: none;\n border: none;\n cursor: pointer;\n color: var(--mj-text-disabled);\n padding: 4px;\n font-size: 12px;\n}\n\n.search-clear-btn:hover {\n color: var(--mj-text-primary);\n}\n\n.file-type-filter {\n padding: 4px 8px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 3px;\n font-size: 12px;\n font-family: inherit;\n background: var(--mj-bg-surface);\n cursor: pointer;\n}\n\n.file-type-filter:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n}\n\n/* ===========================\n File Table\n =========================== */\n\n.file-table-wrapper {\n flex: 1;\n overflow: auto;\n border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.file-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 12px;\n}\n\n.file-table thead {\n position: sticky;\n top: 0;\n background-color: var(--mj-bg-surface-sunken);\n z-index: 10;\n}\n\n.file-table th {\n text-align: left;\n padding: 6px 10px;\n border-bottom: 1px solid var(--mj-border-strong);\n font-weight: 600;\n color: var(--mj-text-primary);\n cursor: pointer;\n user-select: none;\n}\n\n.file-table th:hover {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.file-table th span {\n margin-right: 4px;\n}\n\n.sort-icon {\n font-size: 10px;\n color: var(--mj-text-secondary);\n}\n\n.file-table tbody tr {\n border-bottom: 1px solid var(--mj-border-default);\n cursor: pointer;\n transition: background-color 0.1s;\n}\n\n.file-table tbody tr:hover {\n background-color: var(--mj-bg-surface-card);\n}\n\n.file-table tbody tr.selected {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.file-table tbody tr.selected:hover {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.file-table td {\n padding: 6px 10px;\n color: var(--mj-text-primary);\n}\n\n/* Column Widths */\n.col-name {\n width: 50%;\n}\n\n.col-type {\n width: 15%;\n}\n\n.col-size {\n width: 15%;\n}\n\n.col-modified {\n width: 20%;\n}\n\n/* Name Column with Icon */\n.col-name {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.item-icon {\n font-size: 14px;\n color: var(--mj-text-secondary);\n flex-shrink: 0;\n}\n\n.item-name {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Folder Icons */\n.fa-folder {\n color: var(--mj-status-warning);\n}\n\n/* File Type Icons */\n.fa-file-pdf {\n color: var(--mj-status-error);\n}\n\n.fa-file-word {\n color: var(--mj-brand-primary);\n}\n\n.fa-file-excel {\n color: var(--mj-status-success);\n}\n\n.fa-file-image {\n color: var(--mj-brand-primary);\n}\n\n.fa-file-video {\n color: var(--mj-status-warning);\n}\n\n.fa-file-audio {\n color: var(--mj-status-error);\n}\n\n.fa-file-archive {\n color: var(--mj-text-secondary);\n}\n\n.fa-file-code {\n color: var(--mj-status-success);\n}\n\n/* ===========================\n Grid View\n =========================== */\n\n.file-grid-wrapper {\n flex: 1;\n overflow: auto;\n padding: 10px;\n border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.file-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n gap: 12px;\n}\n\n.grid-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 12px 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.15s;\n background: var(--mj-bg-surface);\n}\n\n.grid-item:hover {\n background-color: var(--mj-bg-surface-card);\n border-color: var(--mj-border-strong);\n}\n\n.grid-item.selected {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-color: var(--mj-brand-primary);\n}\n\n.grid-icon {\n font-size: 48px;\n margin-bottom: 8px;\n color: var(--mj-text-secondary);\n}\n\n.grid-icon i {\n display: block;\n}\n\n.grid-name {\n font-size: 12px;\n color: var(--mj-text-primary);\n text-align: center;\n word-break: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n max-width: 100%;\n}\n\n.grid-meta {\n font-size: 11px;\n color: var(--mj-text-secondary);\n margin-top: 4px;\n}\n\n/* ===========================\n Bottom Toolbar\n =========================== */\n\n.bottom-toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 6px 10px;\n background-color: var(--mj-bg-surface-card);\n border-top: 1px solid var(--mj-border-strong);\n min-height: 36px;\n}\n\n.toolbar-left {\n display: flex;\n gap: 6px;\n}\n\n.toolbar-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-strong);\n padding: 5px 12px;\n cursor: pointer;\n border-radius: 3px;\n font-size: 12px;\n color: var(--mj-text-primary);\n transition: background-color 0.15s;\n}\n\n.toolbar-btn:hover:not(:disabled) {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.toolbar-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.toolbar-btn i {\n font-size: 12px;\n}\n\n.toolbar-right {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.view-toggle {\n display: flex;\n border: 1px solid var(--mj-border-strong);\n border-radius: 3px;\n overflow: hidden;\n}\n\n.view-btn {\n background: var(--mj-bg-surface);\n border: none;\n border-right: 1px solid var(--mj-border-strong);\n padding: 4px 10px;\n cursor: pointer;\n font-size: 12px;\n color: var(--mj-text-secondary);\n transition: all 0.15s;\n}\n\n.view-btn:last-child {\n border-right: none;\n}\n\n.view-btn:hover {\n background-color: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.view-btn.active {\n background-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.item-count {\n font-size: 11px;\n color: var(--mj-text-secondary);\n}\n\n/* ===========================\n Loading / Error / Empty States\n =========================== */\n\n.loading-state,\n.error-state,\n.empty-state {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n}\n\n.error-icon,\n.empty-icon {\n font-size: 48px;\n color: var(--mj-text-disabled);\n margin-bottom: 16px;\n}\n\n.error-message,\n.empty-message {\n font-size: 14px;\n color: var(--mj-text-secondary);\n margin-bottom: 16px;\n}\n\n.retry-btn,\n.upload-btn {\n display: flex;\n align-items: center;\n gap: 8px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-strong);\n padding: 8px 16px;\n cursor: pointer;\n border-radius: 3px;\n font-size: 13px;\n color: var(--mj-text-primary);\n transition: background-color 0.15s;\n}\n\n.retry-btn:hover,\n.upload-btn:hover {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n/* ===========================\n Drag & Drop Overlay\n =========================== */\n\n.drag-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: color-mix(in srgb, var(--mj-bg-surface) 95%, transparent);\n z-index: 1000;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 3px dashed var(--mj-brand-primary);\n}\n\n.drag-content {\n text-align: center;\n}\n\n.drag-icon {\n font-size: 64px;\n color: var(--mj-brand-primary);\n margin-bottom: 16px;\n}\n\n.drag-title {\n font-size: 20px;\n font-weight: 600;\n color: var(--mj-brand-primary);\n margin: 0;\n}\n\n/* ===========================\n Upload Progress\n =========================== */\n\n.upload-progress {\n position: absolute;\n bottom: 40px;\n right: 20px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-strong);\n border-radius: 4px;\n padding: 12px 16px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n min-width: 300px;\n z-index: 100;\n}\n\n.progress-content {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.progress-info {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n\n.progress-bar-wrap {\n width: 100%;\n height: 6px;\n background-color: var(--mj-border-default);\n border-radius: 3px;\n overflow: hidden;\n}\n\n.progress-bar {\n height: 100%;\n background-color: var(--mj-brand-primary);\n transition: width 0.3s ease;\n}\n\n.progress-percent {\n font-size: 12px;\n color: var(--mj-text-secondary);\n text-align: right;\n}\n\n/* ===========================\n Modal Dialogs\n =========================== */\n\n.modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 2000;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.modal-dialog {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-text-disabled);\n border-radius: 4px;\n min-width: 400px;\n max-width: 90%;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);\n}\n\n.modal-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n background-color: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.modal-header h3 {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.modal-close {\n background: none;\n border: none;\n cursor: pointer;\n font-size: 16px;\n color: var(--mj-text-secondary);\n padding: 4px;\n}\n\n.modal-close:hover {\n color: var(--mj-text-primary);\n}\n\n.modal-body {\n padding: 16px;\n}\n\n.modal-body label {\n display: block;\n margin-bottom: 6px;\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.modal-body input[type=\"text\"] {\n width: 100%;\n padding: 6px 10px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 3px;\n font-size: 13px;\n font-family: inherit;\n}\n\n.modal-body input[type=\"text\"]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n}\n\n.modal-body select,\n.modal-body .provider-select {\n width: 100%;\n padding: 6px 10px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 3px;\n font-size: 13px;\n font-family: inherit;\n background-color: var(--mj-bg-surface);\n cursor: pointer;\n}\n\n.modal-body select:focus,\n.modal-body .provider-select:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n}\n\n.modal-body select:disabled,\n.modal-body .provider-select:disabled {\n background-color: var(--mj-bg-surface-card);\n cursor: not-allowed;\n}\n\n.modal-body p {\n margin: 0 0 12px 0;\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n\n.modal-body .warning {\n color: var(--mj-status-error);\n font-size: 12px;\n}\n\n/* Checkbox list for multi-account selection */\n.account-checkbox-list {\n max-height: 200px;\n overflow-y: auto;\n border: 1px solid var(--mj-border-strong);\n border-radius: 4px;\n padding: 8px;\n background: var(--mj-bg-surface-card);\n}\n\n.account-checkbox-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 4px;\n border-radius: 3px;\n cursor: pointer;\n}\n\n.account-checkbox-item:hover {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.account-checkbox-item input[type=\"checkbox\"] {\n width: 16px;\n height: 16px;\n cursor: pointer;\n accent-color: var(--mj-brand-primary);\n}\n\n.account-checkbox-item label {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n font-size: 13px;\n font-weight: normal;\n margin: 0;\n}\n\n.provider-badge {\n font-size: 11px;\n color: var(--mj-text-secondary);\n background: var(--mj-border-default);\n padding: 2px 6px;\n border-radius: 10px;\n}\n\n.copy-progress {\n margin-top: 12px;\n padding: 8px 12px;\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border-radius: 4px;\n font-size: 12px;\n color: var(--mj-brand-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.modal-footer {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n padding: 12px 16px;\n background-color: var(--mj-bg-surface-card);\n border-top: 1px solid var(--mj-border-strong);\n}\n\n.modal-footer button {\n padding: 6px 16px;\n border: 1px solid var(--mj-border-strong);\n background: var(--mj-bg-surface);\n cursor: pointer;\n border-radius: 3px;\n font-size: 12px;\n font-weight: 500;\n transition: background-color 0.15s;\n}\n\n.modal-footer button:hover:not(:disabled) {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.modal-footer button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.modal-footer button.danger {\n background-color: var(--mj-status-error);\n color: var(--mj-text-inverse);\n border-color: var(--mj-status-error);\n}\n\n.modal-footer button.danger:hover:not(:disabled) {\n background-color: var(--mj-status-error-hover, color-mix(in srgb, var(--mj-status-error) 80%, black));\n}\n\n/* ===========================\n Scrollbars\n =========================== */\n\n.file-table-wrapper::-webkit-scrollbar {\n width: 12px;\n height: 12px;\n}\n\n.file-table-wrapper::-webkit-scrollbar-track {\n background: var(--mj-bg-surface-sunken);\n}\n\n.file-table-wrapper::-webkit-scrollbar-thumb {\n background: var(--mj-border-strong);\n border: 2px solid var(--mj-bg-surface-sunken);\n}\n\n.file-table-wrapper::-webkit-scrollbar-thumb:hover {\n background: var(--mj-text-disabled);\n}\n\n/* ===========================\n Responsive Design\n =========================== */\n\n@media screen and (max-width: 768px) {\n .file-table {\n font-size: 11px;\n }\n\n .file-table th,\n .file-table td {\n padding: 4px 6px;\n }\n\n .col-type,\n .col-size {\n display: none;\n }\n\n .col-name {\n width: 60%;\n }\n\n .col-modified {\n width: 40%;\n }\n\n .toolbar-btn span {\n display: none;\n }\n\n .modal-dialog {\n min-width: 90%;\n }\n}\n\n/* ===========================\n Multi-Provider Search\n =========================== */\n\n.multi-search-btn {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-strong);\n padding: 4px 8px;\n cursor: pointer;\n border-radius: 3px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n transition: all 0.15s;\n}\n\n.multi-search-btn:hover {\n background-color: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.multi-search-btn.active {\n background-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.multi-provider-search-panel {\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-strong);\n display: flex;\n flex-direction: column;\n max-height: 70vh;\n overflow: hidden;\n}\n\n.search-panel-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 16px;\n background-color: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.search-panel-header h3 {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-brand-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.close-panel-btn {\n background: none;\n border: none;\n cursor: pointer;\n font-size: 16px;\n color: var(--mj-text-secondary);\n padding: 4px;\n}\n\n.close-panel-btn:hover {\n color: var(--mj-text-primary);\n}\n\n.search-panel-body {\n padding: 16px;\n}\n\n.search-input-row {\n display: flex;\n gap: 8px;\n margin-bottom: 16px;\n}\n\n.multi-search-input {\n flex: 1;\n padding: 8px 12px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 4px;\n font-size: 13px;\n font-family: inherit;\n}\n\n.multi-search-input:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n}\n\n.search-execute-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border: none;\n padding: 8px 16px;\n cursor: pointer;\n border-radius: 4px;\n font-size: 13px;\n font-weight: 500;\n transition: background-color 0.15s;\n}\n\n.search-execute-btn:hover:not(:disabled) {\n background-color: var(--mj-brand-primary-hover);\n}\n\n.search-execute-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.provider-selection {\n margin-bottom: 8px;\n}\n\n.provider-selection-label {\n display: block;\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin-bottom: 8px;\n}\n\n.provider-checkboxes {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n}\n\n.provider-checkbox {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: var(--mj-text-primary);\n cursor: pointer;\n padding: 4px 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n background: var(--mj-bg-surface-card);\n transition: all 0.15s;\n}\n\n.provider-checkbox:hover:not(.disabled) {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.provider-checkbox.disabled {\n opacity: 0.6;\n cursor: not-allowed;\n background: var(--mj-bg-surface-card);\n}\n\n.provider-checkbox input[type=\"checkbox\"] {\n cursor: pointer;\n}\n\n.provider-checkbox .provider-name {\n font-weight: 500;\n}\n\n.no-search-badge {\n font-size: 10px;\n color: var(--mj-text-disabled);\n font-style: italic;\n}\n\n/* Search Results */\n.search-results-container {\n flex: 1;\n overflow: auto;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.search-results-summary {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 16px;\n background: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-results-summary .result-count {\n font-weight: 600;\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n\n.search-results-summary .provider-stats {\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n.search-results-summary .failed-count {\n color: var(--mj-status-error);\n}\n\n.clear-results-btn {\n margin-left: auto;\n background: none;\n border: 1px solid var(--mj-border-strong);\n padding: 4px 10px;\n cursor: pointer;\n border-radius: 3px;\n font-size: 11px;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.clear-results-btn:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.provider-results-list {\n padding: 8px 0;\n}\n\n.provider-result-group {\n margin-bottom: 16px;\n}\n\n.provider-result-group:last-child {\n margin-bottom: 0;\n}\n\n.provider-result-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n background: var(--mj-bg-surface-card);\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.provider-result-header i {\n color: var(--mj-brand-primary);\n}\n\n.provider-result-header .result-count {\n font-weight: normal;\n color: var(--mj-text-secondary);\n}\n\n.provider-result-group.failed .provider-result-header {\n background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n}\n\n.provider-result-group.failed .provider-result-header i {\n color: var(--mj-status-error);\n}\n\n.error-badge {\n color: var(--mj-status-error);\n font-weight: normal;\n font-size: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.provider-result-files {\n padding: 0;\n}\n\n.search-result-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 8px 16px 8px 40px;\n border-bottom: 1px solid var(--mj-bg-surface-sunken);\n cursor: pointer;\n transition: background-color 0.1s;\n}\n\n.search-result-item:hover {\n background-color: var(--mj-bg-surface-card);\n}\n\n.search-result-item:last-child {\n border-bottom: none;\n}\n\n.search-result-item .file-icon {\n font-size: 16px;\n color: var(--mj-text-secondary);\n flex-shrink: 0;\n}\n\n.search-result-item .file-info {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.search-result-item .file-name {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.search-result-item .file-path {\n font-size: 11px;\n color: var(--mj-text-disabled);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.search-result-item .file-size {\n font-size: 12px;\n color: var(--mj-text-secondary);\n flex-shrink: 0;\n min-width: 60px;\n text-align: right;\n}\n\n.search-result-item .file-date {\n font-size: 12px;\n color: var(--mj-text-secondary);\n flex-shrink: 0;\n min-width: 140px;\n text-align: right;\n}\n\n.no-results-message {\n padding: 16px 40px;\n font-size: 12px;\n color: var(--mj-text-disabled);\n font-style: italic;\n}\n\n.searching-state {\n padding: 40px 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n"] }]
2388
+ args: [{ standalone: false, selector: 'mj-file-grid', template: "<div class=\"file-grid-container\"\n (dragenter)=\"onDragEnter($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n <!-- Breadcrumb Navigation Bar -->\n @if (!isLoading && !errorMessage) {\n <div class=\"breadcrumb-bar\">\n <div class=\"nav-buttons\">\n <button class=\"nav-btn\"\n [disabled]=\"!canNavigateUp()\"\n (click)=\"navigateUp()\"\n title=\"Go up to parent folder\">\n <i class=\"fa-solid fa-arrow-up\"></i>\n </button>\n <button class=\"nav-btn\" (click)=\"refresh()\" title=\"Refresh\">\n <i class=\"fa-solid fa-arrows-rotate\"></i>\n </button>\n </div>\n <div class=\"breadcrumb-path\">\n <i class=\"fa-solid fa-folder\"></i>\n <span class=\"path-text\">{{ folderPath || 'Root' }} /</span>\n </div>\n <div class=\"search-bar\">\n <input type=\"text\"\n class=\"search-input\"\n [(ngModel)]=\"searchQuery\"\n (ngModelChange)=\"onSearchChange($event)\"\n placeholder=\"Search files and folders...\"\n [disabled]=\"isLoading || isMultiProviderSearchMode\">\n @if (searchQuery && !isMultiProviderSearchMode) {\n <button class=\"search-clear-btn\"\n (click)=\"clearSearch()\"\n title=\"Clear search\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n }\n <select class=\"file-type-filter\"\n [(ngModel)]=\"fileTypeFilter\"\n (ngModelChange)=\"onFileTypeFilterChange($event)\"\n [disabled]=\"isLoading || isMultiProviderSearchMode\">\n <option value=\"all\">All</option>\n <option value=\"files\">Files</option>\n <option value=\"folders\">Folders</option>\n </select>\n <button class=\"multi-search-btn\"\n [class.active]=\"isMultiProviderSearchMode\"\n (click)=\"toggleMultiAccountSearchMode()\"\n title=\"Search across all storage providers\">\n <i class=\"fa-solid fa-magnifying-glass-plus\"></i>\n </button>\n </div>\n </div>\n }\n\n <!-- Multi-Provider Search Panel -->\n @if (isMultiProviderSearchMode) {\n <div class=\"multi-provider-search-panel\">\n <div class=\"search-panel-header\">\n <h3><i class=\"fa-solid fa-magnifying-glass\"></i> Search Across Providers</h3>\n <button class=\"close-panel-btn\" (click)=\"toggleMultiAccountSearchMode()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"search-panel-body\">\n <div class=\"search-input-row\">\n <input type=\"text\"\n class=\"multi-search-input\"\n [(ngModel)]=\"multiProviderSearchQuery\"\n placeholder=\"Enter search term...\"\n (keydown.enter)=\"executeMultiAccountSearch()\"\n [disabled]=\"isSearching\">\n <button class=\"search-execute-btn\"\n (click)=\"executeMultiAccountSearch()\"\n [disabled]=\"isSearching || !multiProviderSearchQuery.trim() || selectedSearchProviders.size === 0\">\n @if (isSearching) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n }\n @if (!isSearching) {\n <i class=\"fa-solid fa-search\"></i>\n }\n {{ isSearching ? 'Searching...' : 'Search' }}\n </button>\n </div>\n <div class=\"provider-selection\">\n <label class=\"provider-selection-label\">Select accounts to search:</label>\n <div class=\"provider-checkboxes\">\n @for (a of availableAccounts; track a) {\n <label\n class=\"provider-checkbox\"\n [class.disabled]=\"!accountSupportsSearch(a)\"\n [title]=\"accountSupportsSearch(a) ? '' : 'This account does not support search'\">\n <input type=\"checkbox\"\n [checked]=\"isAccountSelectedForSearch(a.account.ID)\"\n (change)=\"toggleSearchAccount(a.account.ID)\"\n [disabled]=\"!accountSupportsSearch(a)\">\n <span class=\"provider-name\">{{ a.account.Name }}</span>\n <span class=\"provider-type\">({{ a.provider.Name }})</span>\n @if (!accountSupportsSearch(a)) {\n <span class=\"no-search-badge\">(no search)</span>\n }\n </label>\n }\n </div>\n </div>\n </div>\n <!-- Search Results -->\n @if (multiProviderSearchResults) {\n <div class=\"search-results-container\">\n <div class=\"search-results-summary\">\n <span class=\"result-count\">{{ multiProviderSearchResults.totalResultsReturned }} result(s) found</span>\n <span class=\"provider-stats\">\n ({{ multiProviderSearchResults.successfulAccounts }} account(s) searched\n @if (multiProviderSearchResults.failedAccounts > 0) {\n <span class=\"failed-count\">\n , {{ multiProviderSearchResults.failedAccounts }} failed\n </span>\n })\n </span>\n <button class=\"clear-results-btn\" (click)=\"clearMultiProviderSearch()\">\n <i class=\"fa-solid fa-xmark\"></i> Clear\n </button>\n </div>\n <div class=\"provider-results-list\">\n @for (accountResult of multiProviderSearchResults.accountResults; track accountResult) {\n <div\n class=\"provider-result-group\"\n [class.failed]=\"!accountResult.success\">\n <div class=\"provider-result-header\">\n <i class=\"fa-solid fa-cloud\"></i>\n <span class=\"provider-name\">{{ accountResult.accountName }}</span>\n @if (accountResult.success) {\n <span class=\"result-count\">\n ({{ accountResult.results.length }} result(s))\n </span>\n }\n @if (!accountResult.success) {\n <span class=\"error-badge\">\n <i class=\"fa-solid fa-exclamation-triangle\"></i>\n {{ accountResult.errorMessage }}\n </span>\n }\n </div>\n @if (accountResult.success && accountResult.results.length > 0) {\n <div class=\"provider-result-files\">\n @for (file of accountResult.results; track file) {\n <div class=\"search-result-item\">\n <i [class]=\"getSearchResultIcon(file)\" class=\"file-icon\"></i>\n <div class=\"file-info\">\n <span class=\"file-name\">{{ file.name }}</span>\n <span class=\"file-path\">{{ file.path }}</span>\n </div>\n <span class=\"file-size\">{{ formatSearchResultSize(file.size) }}</span>\n <span class=\"file-date\">{{ formatSearchResultDate(file.lastModified) }}</span>\n </div>\n }\n </div>\n }\n @if (accountResult.success && accountResult.results.length === 0) {\n <div class=\"no-results-message\">\n No matching files found\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n <!-- Searching State -->\n @if (isSearching) {\n <div class=\"searching-state\">\n <mj-loading text=\"Searching across providers...\"></mj-loading>\n </div>\n }\n </div>\n }\n\n <!-- Loading State -->\n @if (isLoading && !isMultiProviderSearchMode) {\n <div class=\"loading-state\">\n <mj-loading text=\"Loading files...\"></mj-loading>\n </div>\n }\n\n <!-- Error State -->\n @if (errorMessage && !isLoading) {\n <mj-empty-state\n class=\"file-grid-empty-fill\"\n Variant=\"error\"\n Icon=\"fa-solid fa-circle-exclamation\"\n Title=\"Couldn't load files\"\n [Message]=\"errorMessage\"\n ActionText=\"Retry\"\n ActionIcon=\"fa-solid fa-arrows-rotate\"\n (Action)=\"refresh()\" />\n }\n\n <!-- List View -->\n @if (!isLoading && !errorMessage && filteredItems.length > 0 && viewMode === 'list') {\n <div class=\"file-table-wrapper\">\n <table class=\"file-table\">\n <thead>\n <tr>\n <th class=\"col-name\" (click)=\"onSortChange([{ field: 'name', dir: sort[0].field === 'name' && sort[0].dir === 'asc' ? 'desc' : 'asc' }])\">\n <span>Name</span>\n <i class=\"fa-solid sort-icon\"\n [class.fa-caret-up]=\"sort[0].field === 'name' && sort[0].dir === 'asc'\"\n [class.fa-caret-down]=\"sort[0].field === 'name' && sort[0].dir === 'desc'\"\n [class.fa-sort]=\"sort[0].field !== 'name'\"></i>\n </th>\n <th class=\"col-type\">Type</th>\n <th class=\"col-size\" (click)=\"onSortChange([{ field: 'size', dir: sort[0].field === 'size' && sort[0].dir === 'asc' ? 'desc' : 'asc' }])\">\n <span>Size</span>\n <i class=\"fa-solid sort-icon\"\n [class.fa-caret-up]=\"sort[0].field === 'size' && sort[0].dir === 'asc'\"\n [class.fa-caret-down]=\"sort[0].field === 'size' && sort[0].dir === 'desc'\"\n [class.fa-sort]=\"sort[0].field !== 'size'\"></i>\n </th>\n <th class=\"col-modified\" (click)=\"onSortChange([{ field: 'lastModified', dir: sort[0].field === 'lastModified' && sort[0].dir === 'asc' ? 'desc' : 'asc' }])\">\n <span>Modified</span>\n <i class=\"fa-solid sort-icon\"\n [class.fa-caret-up]=\"sort[0].field === 'lastModified' && sort[0].dir === 'asc'\"\n [class.fa-caret-down]=\"sort[0].field === 'lastModified' && sort[0].dir === 'desc'\"\n [class.fa-sort]=\"sort[0].field !== 'lastModified'\"></i>\n </th>\n </tr>\n </thead>\n <tbody>\n @for (item of filteredItems; track item) {\n <tr\n class=\"file-row\"\n [class.selected]=\"selectedItems.includes(item.key)\"\n (click)=\"onTileClick(item, $event)\"\n (dblclick)=\"onItemDoubleClick(item)\">\n <td class=\"col-name\">\n <i [class]=\"getItemIcon(item)\" class=\"item-icon\"></i>\n <span class=\"item-name\">{{ item.name }}</span>\n </td>\n <td class=\"col-type\">\n <span class=\"item-type\">{{ getFileType(item) }}</span>\n </td>\n <td class=\"col-size\">\n <span class=\"item-size\">{{ item.type === 'folder' ? '\u2014' : formatFileSize(item.size) }}</span>\n </td>\n <td class=\"col-modified\">\n <span class=\"item-date\">{{ formatDate(item.lastModified) }}</span>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n\n <!-- Grid View -->\n @if (!isLoading && !errorMessage && filteredItems.length > 0 && viewMode === 'grid') {\n <div class=\"file-grid-wrapper\">\n <div class=\"file-grid\">\n @for (item of filteredItems; track item) {\n <div\n class=\"grid-item\"\n [class.selected]=\"selectedItems.includes(item.key)\"\n (click)=\"onTileClick(item, $event)\"\n (dblclick)=\"onItemDoubleClick(item)\">\n <div class=\"grid-icon\">\n <i [class]=\"getItemIcon(item)\"></i>\n </div>\n <div class=\"grid-name\">{{ item.name }}</div>\n @if (item.type === 'file') {\n <div class=\"grid-meta\">{{ formatFileSize(item.size) }}</div>\n }\n @if (item.type === 'folder') {\n <div class=\"grid-meta\">Folder</div>\n }\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Empty State -->\n @if (!isLoading && !errorMessage && filteredItems.length === 0) {\n <mj-empty-state\n class=\"file-grid-empty-fill\"\n Icon=\"fa-solid fa-folder-open\"\n Title=\"This folder is empty\"\n ActionText=\"Upload Files\"\n ActionIcon=\"fa-solid fa-upload\"\n (Action)=\"onUploadClick()\" />\n }\n\n <!-- Bottom Toolbar -->\n @if (!isLoading && !errorMessage) {\n <div class=\"bottom-toolbar\">\n <div class=\"toolbar-left\">\n <button class=\"toolbar-btn\" (click)=\"onUploadClick()\">\n <i class=\"fa-solid fa-upload\"></i>\n Upload\n </button>\n <button class=\"toolbar-btn\" (click)=\"onNewFolderClick()\">\n <i class=\"fa-solid fa-folder-plus\"></i>\n New Folder\n </button>\n <button class=\"toolbar-btn\"\n [disabled]=\"selectedItems.length !== 1\"\n (click)=\"onDownloadClick()\">\n <i class=\"fa-solid fa-download\"></i>\n Download\n </button>\n <button class=\"toolbar-btn\"\n [disabled]=\"selectedItems.length !== 1\"\n (click)=\"onRenameClick()\">\n <i class=\"fa-solid fa-pen\"></i>\n Rename\n </button>\n <button class=\"toolbar-btn\"\n [disabled]=\"selectedItems.length !== 1\"\n (click)=\"onCopyClick()\">\n <i class=\"fa-solid fa-copy\"></i>\n Copy\n </button>\n <button class=\"toolbar-btn\"\n [disabled]=\"selectedItems.length !== 1 || getSelectedItem()?.type === 'folder'\"\n (click)=\"onCopyToAccountClick()\"\n title=\"Copy file to another storage account\">\n <i class=\"fa-solid fa-cloud-arrow-up\"></i>\n Copy to...\n </button>\n <button class=\"toolbar-btn\"\n [disabled]=\"selectedItems.length !== 1\"\n (click)=\"onMoveClick()\">\n <i class=\"fa-solid fa-arrows-up-down-left-right\"></i>\n Move\n </button>\n <button class=\"toolbar-btn\"\n [disabled]=\"selectedItems.length === 0\"\n (click)=\"onDeleteClick()\">\n <i class=\"fa-solid fa-trash\"></i>\n Delete\n </button>\n </div>\n <div class=\"toolbar-right\">\n <!-- View Toggle -->\n <div class=\"view-toggle\">\n <button class=\"view-btn\"\n [class.active]=\"viewMode === 'list'\"\n (click)=\"viewMode = 'list'\"\n title=\"List View\">\n <i class=\"fa-solid fa-list\"></i>\n </button>\n <button class=\"view-btn\"\n [class.active]=\"viewMode === 'grid'\"\n (click)=\"viewMode = 'grid'\"\n title=\"Grid View\">\n <i class=\"fa-solid fa-th\"></i>\n </button>\n </div>\n <span class=\"item-count\">\n {{ filteredItems.length }} {{ filteredItems.length === 1 ? 'item' : 'filteredItems' }}\n </span>\n </div>\n </div>\n }\n\n <!-- Drag & Drop Overlay -->\n @if (isDragging) {\n <div class=\"drag-overlay\">\n <div class=\"drag-content\">\n <div class=\"drag-icon\">\n <i class=\"fa-solid fa-cloud-arrow-up\"></i>\n </div>\n <h2 class=\"drag-title\">Drop files to upload</h2>\n </div>\n </div>\n }\n\n <!-- Upload Progress -->\n @if (isUploading) {\n <div class=\"upload-progress\">\n <div class=\"progress-content\">\n <div class=\"progress-info\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n <span>Uploading {{ uploadingFileName }}...</span>\n </div>\n <div class=\"progress-bar-wrap\">\n <div class=\"progress-bar\" [style.width.%]=\"uploadProgress\"></div>\n </div>\n <span class=\"progress-percent\">{{ uploadProgress }}%</span>\n </div>\n </div>\n }\n </div>\n\n <!-- New Folder Modal -->\n @if (showNewFolderDialog) {\n <div class=\"modal-overlay\" (click)=\"onCancelNewFolder()\">\n <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"modal-header\">\n <h3>Create New Folder</h3>\n <button class=\"modal-close\" (click)=\"onCancelNewFolder()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"modal-body\">\n <label>Folder name:</label>\n <input type=\"text\"\n [(ngModel)]=\"newFolderName\"\n [disabled]=\"isCreatingFolder\"\n placeholder=\"Enter folder name\"\n (keydown.enter)=\"onCreateFolder()\">\n </div>\n <div class=\"modal-footer\">\n <button (click)=\"onCancelNewFolder()\" [disabled]=\"isCreatingFolder\">Cancel</button>\n <button (click)=\"onCreateFolder()\" [disabled]=\"!newFolderName.trim() || isCreatingFolder\">\n @if (isCreatingFolder) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n }\n {{ isCreatingFolder ? 'Creating...' : 'Create' }}\n </button>\n </div>\n </div>\n </div>\n }\n\n <!-- Delete Confirmation Modal -->\n @if (showDeleteDialog && itemToDelete) {\n <div class=\"modal-overlay\" (click)=\"onCancelDelete()\">\n <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"modal-header\">\n <h3>Delete {{ itemToDelete.type === 'folder' ? 'Folder' : 'File' }}?</h3>\n <button class=\"modal-close\" (click)=\"onCancelDelete()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"modal-body\">\n <p>Are you sure you want to delete <strong>{{ itemToDelete.name }}</strong>?</p>\n @if (itemToDelete.type === 'folder') {\n <p class=\"warning\">This will delete the folder and all its contents.</p>\n }\n </div>\n <div class=\"modal-footer\">\n <button (click)=\"onCancelDelete()\" [disabled]=\"isDeleting\">Cancel</button>\n <button (click)=\"onConfirmDelete()\" [disabled]=\"isDeleting\" class=\"danger\">\n @if (isDeleting) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n }\n {{ isDeleting ? 'Deleting...' : 'Delete' }}\n </button>\n </div>\n </div>\n </div>\n }\n\n <!-- Rename Modal -->\n @if (showRenameDialog && itemToRename) {\n <div class=\"modal-overlay\" (click)=\"onCancelRename()\">\n <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"modal-header\">\n <h3>Rename {{ itemToRename.type === 'folder' ? 'Folder' : 'File' }}</h3>\n <button class=\"modal-close\" (click)=\"onCancelRename()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"modal-body\">\n <label>New name:</label>\n <input type=\"text\"\n [(ngModel)]=\"newItemName\"\n [disabled]=\"isRenaming\"\n placeholder=\"Enter new name\"\n (keydown.enter)=\"onConfirmRename()\">\n </div>\n <div class=\"modal-footer\">\n <button (click)=\"onCancelRename()\" [disabled]=\"isRenaming\">Cancel</button>\n <button (click)=\"onConfirmRename()\" [disabled]=\"isRenaming || !newItemName.trim()\">\n @if (isRenaming) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n }\n {{ isRenaming ? 'Renaming...' : 'Rename' }}\n </button>\n </div>\n </div>\n </div>\n }\n\n <!-- Copy Modal -->\n @if (showCopyDialog && itemToCopy) {\n <div class=\"modal-overlay\" (click)=\"onCancelCopy()\">\n <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"modal-header\">\n <h3>Copy {{ itemToCopy.type === 'folder' ? 'Folder' : 'File' }}</h3>\n <button class=\"modal-close\" (click)=\"onCancelCopy()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"modal-body\">\n <p>Copying: <strong>{{ itemToCopy.name }}</strong></p>\n <label>Destination path:</label>\n <input type=\"text\"\n [(ngModel)]=\"copyDestinationPath\"\n [disabled]=\"isCopying\"\n placeholder=\"Enter destination path\"\n (keydown.enter)=\"onConfirmCopy()\">\n </div>\n <div class=\"modal-footer\">\n <button (click)=\"onCancelCopy()\" [disabled]=\"isCopying\">Cancel</button>\n <button (click)=\"onConfirmCopy()\" [disabled]=\"isCopying || !copyDestinationPath.trim()\">\n @if (isCopying) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n }\n {{ isCopying ? 'Copying...' : 'Copy' }}\n </button>\n </div>\n </div>\n </div>\n }\n\n <!-- Move Modal -->\n @if (showMoveDialog && itemToMove) {\n <div class=\"modal-overlay\" (click)=\"onCancelMove()\">\n <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"modal-header\">\n <h3>Move {{ itemToMove.type === 'folder' ? 'Folder' : 'File' }}</h3>\n <button class=\"modal-close\" (click)=\"onCancelMove()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"modal-body\">\n <p>Moving: <strong>{{ itemToMove.name }}</strong></p>\n <label>Destination folder path:</label>\n <input type=\"text\"\n [(ngModel)]=\"moveDestinationPath\"\n [disabled]=\"isMoving\"\n placeholder=\"Enter destination folder (e.g., folder1/folder2/)\"\n (keydown.enter)=\"onConfirmMove()\">\n <p style=\"font-size: 11px; color: var(--mj-text-secondary); margin-top: 8px;\">\n File will be moved to: {{ moveDestinationPath }}{{ itemToMove.name }}\n </p>\n </div>\n <div class=\"modal-footer\">\n <button (click)=\"onCancelMove()\" [disabled]=\"isMoving\">Cancel</button>\n <button (click)=\"onConfirmMove()\" [disabled]=\"isMoving || !moveDestinationPath.trim()\">\n @if (isMoving) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n }\n {{ isMoving ? 'Moving...' : 'Move' }}\n </button>\n </div>\n </div>\n </div>\n }\n\n <!-- Copy to Account Modal -->\n @if (showCopyToProviderDialog && itemToCopyToProvider) {\n <div class=\"modal-overlay\" (click)=\"onCancelCopyToAccount()\">\n <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"modal-header\">\n <h3>Copy to Another Account</h3>\n <button class=\"modal-close\" (click)=\"onCancelCopyToAccount()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"modal-body\">\n <p>Copying: <strong>{{ itemToCopyToProvider.name }}</strong></p>\n <p style=\"font-size: 12px; color: var(--mj-text-secondary); margin-bottom: 16px;\">\n From: <strong>{{ account?.account?.Name }}</strong>\n </p>\n <label>Select destination account(s):</label>\n <div class=\"account-checkbox-list\">\n @for (a of availableAccounts; track a) {\n <div class=\"account-checkbox-item\">\n <input type=\"checkbox\"\n [id]=\"'dest-account-' + a.account.ID\"\n [checked]=\"isDestinationAccountSelected(a.account.ID)\"\n [disabled]=\"isCopyingToAccount\"\n (change)=\"toggleDestinationAccount(a.account.ID)\">\n <label [for]=\"'dest-account-' + a.account.ID\">\n {{ a.account.Name }} <span class=\"provider-badge\">{{ a.provider.Name }}</span>\n </label>\n </div>\n }\n </div>\n <label style=\"margin-top: 16px;\">Destination filename:</label>\n <input type=\"text\"\n [(ngModel)]=\"copyToAccountDestinationPath\"\n [disabled]=\"isCopyingToAccount\"\n placeholder=\"Enter destination filename\"\n (keydown.enter)=\"onConfirmCopyToAccount()\">\n @if (copyToAccountProgress) {\n <div class=\"copy-progress\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n Copying to {{ copyToAccountProgress.currentAccount }} ({{ copyToAccountProgress.current }}/{{ copyToAccountProgress.total }})...\n </div>\n }\n </div>\n <div class=\"modal-footer\">\n <button (click)=\"onCancelCopyToAccount()\" [disabled]=\"isCopyingToAccount\">Cancel</button>\n <button (click)=\"onConfirmCopyToAccount()\"\n [disabled]=\"isCopyingToAccount || selectedDestinationAccounts.size === 0 || !copyToAccountDestinationPath.trim()\">\n @if (isCopyingToAccount) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n }\n {{ isCopyingToAccount ? 'Copying...' : 'Copy to ' + selectedDestinationAccounts.size + ' account' + (selectedDestinationAccounts.size !== 1 ? 's' : '') }}\n </button>\n </div>\n </div>\n </div>\n }\n", styles: ["/* ===========================\n File Grid - Traditional File Manager Style\n =========================== */\n\n:host {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n background-color: var(--mj-bg-surface);\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.file-grid-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n position: relative;\n}\n\n/* ===========================\n Breadcrumb Navigation Bar\n =========================== */\n\n.breadcrumb-bar {\n display: flex;\n align-items: center;\n padding: 6px 10px;\n background-color: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-strong);\n gap: 10px;\n flex-wrap: wrap;\n}\n\n.nav-buttons {\n display: flex;\n gap: 4px;\n}\n\n.nav-btn {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-strong);\n padding: 4px 8px;\n cursor: pointer;\n border-radius: 3px;\n font-size: 12px;\n color: var(--mj-text-primary);\n transition: background-color 0.15s;\n}\n\n.nav-btn:hover:not(:disabled) {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.nav-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.breadcrumb-path {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-primary);\n}\n\n.breadcrumb-path i {\n color: var(--mj-text-secondary);\n}\n\n.path-text {\n font-weight: 500;\n}\n\n.search-bar {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-left: auto;\n position: relative;\n}\n\n.search-input {\n padding: 4px 30px 4px 8px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 3px;\n font-size: 12px;\n font-family: inherit;\n min-width: 200px;\n}\n\n.search-input:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n}\n\n.search-clear-btn {\n position: absolute;\n right: 142px;\n background: none;\n border: none;\n cursor: pointer;\n color: var(--mj-text-disabled);\n padding: 4px;\n font-size: 12px;\n}\n\n.search-clear-btn:hover {\n color: var(--mj-text-primary);\n}\n\n.file-type-filter {\n padding: 4px 8px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 3px;\n font-size: 12px;\n font-family: inherit;\n background: var(--mj-bg-surface);\n cursor: pointer;\n}\n\n.file-type-filter:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n}\n\n/* ===========================\n File Table\n =========================== */\n\n.file-table-wrapper {\n flex: 1;\n overflow: auto;\n border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.file-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 12px;\n}\n\n.file-table thead {\n position: sticky;\n top: 0;\n background-color: var(--mj-bg-surface-sunken);\n z-index: 10;\n}\n\n.file-table th {\n text-align: left;\n padding: 6px 10px;\n border-bottom: 1px solid var(--mj-border-strong);\n font-weight: 600;\n color: var(--mj-text-primary);\n cursor: pointer;\n user-select: none;\n}\n\n.file-table th:hover {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.file-table th span {\n margin-right: 4px;\n}\n\n.sort-icon {\n font-size: 10px;\n color: var(--mj-text-secondary);\n}\n\n.file-table tbody tr {\n border-bottom: 1px solid var(--mj-border-default);\n cursor: pointer;\n transition: background-color 0.1s;\n}\n\n.file-table tbody tr:hover {\n background-color: var(--mj-bg-surface-card);\n}\n\n.file-table tbody tr.selected {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.file-table tbody tr.selected:hover {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.file-table td {\n padding: 6px 10px;\n color: var(--mj-text-primary);\n}\n\n/* Column Widths */\n.col-name {\n width: 50%;\n}\n\n.col-type {\n width: 15%;\n}\n\n.col-size {\n width: 15%;\n}\n\n.col-modified {\n width: 20%;\n}\n\n/* Name Column with Icon */\n.col-name {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.item-icon {\n font-size: 14px;\n color: var(--mj-text-secondary);\n flex-shrink: 0;\n}\n\n.item-name {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Folder Icons */\n.fa-folder {\n color: var(--mj-status-warning);\n}\n\n/* File Type Icons */\n.fa-file-pdf {\n color: var(--mj-status-error);\n}\n\n.fa-file-word {\n color: var(--mj-brand-primary);\n}\n\n.fa-file-excel {\n color: var(--mj-status-success);\n}\n\n.fa-file-image {\n color: var(--mj-brand-primary);\n}\n\n.fa-file-video {\n color: var(--mj-status-warning);\n}\n\n.fa-file-audio {\n color: var(--mj-status-error);\n}\n\n.fa-file-archive {\n color: var(--mj-text-secondary);\n}\n\n.fa-file-code {\n color: var(--mj-status-success);\n}\n\n/* ===========================\n Grid View\n =========================== */\n\n.file-grid-wrapper {\n flex: 1;\n overflow: auto;\n padding: 10px;\n border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.file-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n gap: 12px;\n}\n\n.grid-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 12px 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.15s;\n background: var(--mj-bg-surface);\n}\n\n.grid-item:hover {\n background-color: var(--mj-bg-surface-card);\n border-color: var(--mj-border-strong);\n}\n\n.grid-item.selected {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-color: var(--mj-brand-primary);\n}\n\n.grid-icon {\n font-size: 48px;\n margin-bottom: 8px;\n color: var(--mj-text-secondary);\n}\n\n.grid-icon i {\n display: block;\n}\n\n.grid-name {\n font-size: 12px;\n color: var(--mj-text-primary);\n text-align: center;\n word-break: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n max-width: 100%;\n}\n\n.grid-meta {\n font-size: 11px;\n color: var(--mj-text-secondary);\n margin-top: 4px;\n}\n\n/* ===========================\n Bottom Toolbar\n =========================== */\n\n.bottom-toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 6px 10px;\n background-color: var(--mj-bg-surface-card);\n border-top: 1px solid var(--mj-border-strong);\n min-height: 36px;\n}\n\n.toolbar-left {\n display: flex;\n gap: 6px;\n}\n\n.toolbar-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-strong);\n padding: 5px 12px;\n cursor: pointer;\n border-radius: 3px;\n font-size: 12px;\n color: var(--mj-text-primary);\n transition: background-color 0.15s;\n}\n\n.toolbar-btn:hover:not(:disabled) {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.toolbar-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.toolbar-btn i {\n font-size: 12px;\n}\n\n.toolbar-right {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.view-toggle {\n display: flex;\n border: 1px solid var(--mj-border-strong);\n border-radius: 3px;\n overflow: hidden;\n}\n\n.view-btn {\n background: var(--mj-bg-surface);\n border: none;\n border-right: 1px solid var(--mj-border-strong);\n padding: 4px 10px;\n cursor: pointer;\n font-size: 12px;\n color: var(--mj-text-secondary);\n transition: all 0.15s;\n}\n\n.view-btn:last-child {\n border-right: none;\n}\n\n.view-btn:hover {\n background-color: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.view-btn.active {\n background-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.item-count {\n font-size: 11px;\n color: var(--mj-text-secondary);\n}\n\n/* ===========================\n Loading / Error / Empty States\n =========================== */\n\n.loading-state {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n}\n\n/* Empty/error states fill the file pane vertically (flex-parent gotcha) */\n.file-grid-empty-fill {\n flex: 1;\n}\n\n/* ===========================\n Drag & Drop Overlay\n =========================== */\n\n.drag-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: color-mix(in srgb, var(--mj-bg-surface) 95%, transparent);\n z-index: 1000;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 3px dashed var(--mj-brand-primary);\n}\n\n.drag-content {\n text-align: center;\n}\n\n.drag-icon {\n font-size: 64px;\n color: var(--mj-brand-primary);\n margin-bottom: 16px;\n}\n\n.drag-title {\n font-size: 20px;\n font-weight: 600;\n color: var(--mj-brand-primary);\n margin: 0;\n}\n\n/* ===========================\n Upload Progress\n =========================== */\n\n.upload-progress {\n position: absolute;\n bottom: 40px;\n right: 20px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-strong);\n border-radius: 4px;\n padding: 12px 16px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n min-width: 300px;\n z-index: 100;\n}\n\n.progress-content {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.progress-info {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n\n.progress-bar-wrap {\n width: 100%;\n height: 6px;\n background-color: var(--mj-border-default);\n border-radius: 3px;\n overflow: hidden;\n}\n\n.progress-bar {\n height: 100%;\n background-color: var(--mj-brand-primary);\n transition: width 0.3s ease;\n}\n\n.progress-percent {\n font-size: 12px;\n color: var(--mj-text-secondary);\n text-align: right;\n}\n\n/* ===========================\n Modal Dialogs\n =========================== */\n\n.modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 2000;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.modal-dialog {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-text-disabled);\n border-radius: 4px;\n min-width: 400px;\n max-width: 90%;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);\n}\n\n.modal-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n background-color: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.modal-header h3 {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.modal-close {\n background: none;\n border: none;\n cursor: pointer;\n font-size: 16px;\n color: var(--mj-text-secondary);\n padding: 4px;\n}\n\n.modal-close:hover {\n color: var(--mj-text-primary);\n}\n\n.modal-body {\n padding: 16px;\n}\n\n.modal-body label {\n display: block;\n margin-bottom: 6px;\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.modal-body input[type=\"text\"] {\n width: 100%;\n padding: 6px 10px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 3px;\n font-size: 13px;\n font-family: inherit;\n}\n\n.modal-body input[type=\"text\"]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n}\n\n.modal-body select,\n.modal-body .provider-select {\n width: 100%;\n padding: 6px 10px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 3px;\n font-size: 13px;\n font-family: inherit;\n background-color: var(--mj-bg-surface);\n cursor: pointer;\n}\n\n.modal-body select:focus,\n.modal-body .provider-select:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n}\n\n.modal-body select:disabled,\n.modal-body .provider-select:disabled {\n background-color: var(--mj-bg-surface-card);\n cursor: not-allowed;\n}\n\n.modal-body p {\n margin: 0 0 12px 0;\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n\n.modal-body .warning {\n color: var(--mj-status-error);\n font-size: 12px;\n}\n\n/* Checkbox list for multi-account selection */\n.account-checkbox-list {\n max-height: 200px;\n overflow-y: auto;\n border: 1px solid var(--mj-border-strong);\n border-radius: 4px;\n padding: 8px;\n background: var(--mj-bg-surface-card);\n}\n\n.account-checkbox-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 4px;\n border-radius: 3px;\n cursor: pointer;\n}\n\n.account-checkbox-item:hover {\n background-color: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.account-checkbox-item input[type=\"checkbox\"] {\n width: 16px;\n height: 16px;\n cursor: pointer;\n accent-color: var(--mj-brand-primary);\n}\n\n.account-checkbox-item label {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n font-size: 13px;\n font-weight: normal;\n margin: 0;\n}\n\n.provider-badge {\n font-size: 11px;\n color: var(--mj-text-secondary);\n background: var(--mj-border-default);\n padding: 2px 6px;\n border-radius: 10px;\n}\n\n.copy-progress {\n margin-top: 12px;\n padding: 8px 12px;\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border-radius: 4px;\n font-size: 12px;\n color: var(--mj-brand-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.modal-footer {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n padding: 12px 16px;\n background-color: var(--mj-bg-surface-card);\n border-top: 1px solid var(--mj-border-strong);\n}\n\n.modal-footer button {\n padding: 6px 16px;\n border: 1px solid var(--mj-border-strong);\n background: var(--mj-bg-surface);\n cursor: pointer;\n border-radius: 3px;\n font-size: 12px;\n font-weight: 500;\n transition: background-color 0.15s;\n}\n\n.modal-footer button:hover:not(:disabled) {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.modal-footer button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.modal-footer button.danger {\n background-color: var(--mj-status-error);\n color: var(--mj-text-inverse);\n border-color: var(--mj-status-error);\n}\n\n.modal-footer button.danger:hover:not(:disabled) {\n background-color: var(--mj-status-error-hover, color-mix(in srgb, var(--mj-status-error) 80%, black));\n}\n\n/* ===========================\n Scrollbars\n =========================== */\n\n.file-table-wrapper::-webkit-scrollbar {\n width: 12px;\n height: 12px;\n}\n\n.file-table-wrapper::-webkit-scrollbar-track {\n background: var(--mj-bg-surface-sunken);\n}\n\n.file-table-wrapper::-webkit-scrollbar-thumb {\n background: var(--mj-border-strong);\n border: 2px solid var(--mj-bg-surface-sunken);\n}\n\n.file-table-wrapper::-webkit-scrollbar-thumb:hover {\n background: var(--mj-text-disabled);\n}\n\n/* ===========================\n Responsive Design\n =========================== */\n\n@media screen and (max-width: 768px) {\n .file-table {\n font-size: 11px;\n }\n\n .file-table th,\n .file-table td {\n padding: 4px 6px;\n }\n\n .col-type,\n .col-size {\n display: none;\n }\n\n .col-name {\n width: 60%;\n }\n\n .col-modified {\n width: 40%;\n }\n\n .toolbar-btn span {\n display: none;\n }\n\n .modal-dialog {\n min-width: 90%;\n }\n}\n\n/* ===========================\n Multi-Provider Search\n =========================== */\n\n.multi-search-btn {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-strong);\n padding: 4px 8px;\n cursor: pointer;\n border-radius: 3px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n transition: all 0.15s;\n}\n\n.multi-search-btn:hover {\n background-color: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.multi-search-btn.active {\n background-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.multi-provider-search-panel {\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-strong);\n display: flex;\n flex-direction: column;\n max-height: 70vh;\n overflow: hidden;\n}\n\n.search-panel-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 16px;\n background-color: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.search-panel-header h3 {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-brand-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.close-panel-btn {\n background: none;\n border: none;\n cursor: pointer;\n font-size: 16px;\n color: var(--mj-text-secondary);\n padding: 4px;\n}\n\n.close-panel-btn:hover {\n color: var(--mj-text-primary);\n}\n\n.search-panel-body {\n padding: 16px;\n}\n\n.search-input-row {\n display: flex;\n gap: 8px;\n margin-bottom: 16px;\n}\n\n.multi-search-input {\n flex: 1;\n padding: 8px 12px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 4px;\n font-size: 13px;\n font-family: inherit;\n}\n\n.multi-search-input:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n}\n\n.search-execute-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border: none;\n padding: 8px 16px;\n cursor: pointer;\n border-radius: 4px;\n font-size: 13px;\n font-weight: 500;\n transition: background-color 0.15s;\n}\n\n.search-execute-btn:hover:not(:disabled) {\n background-color: var(--mj-brand-primary-hover);\n}\n\n.search-execute-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.provider-selection {\n margin-bottom: 8px;\n}\n\n.provider-selection-label {\n display: block;\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin-bottom: 8px;\n}\n\n.provider-checkboxes {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n}\n\n.provider-checkbox {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: var(--mj-text-primary);\n cursor: pointer;\n padding: 4px 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n background: var(--mj-bg-surface-card);\n transition: all 0.15s;\n}\n\n.provider-checkbox:hover:not(.disabled) {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.provider-checkbox.disabled {\n opacity: 0.6;\n cursor: not-allowed;\n background: var(--mj-bg-surface-card);\n}\n\n.provider-checkbox input[type=\"checkbox\"] {\n cursor: pointer;\n}\n\n.provider-checkbox .provider-name {\n font-weight: 500;\n}\n\n.no-search-badge {\n font-size: 10px;\n color: var(--mj-text-disabled);\n font-style: italic;\n}\n\n/* Search Results */\n.search-results-container {\n flex: 1;\n overflow: auto;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.search-results-summary {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 16px;\n background: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-results-summary .result-count {\n font-weight: 600;\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n\n.search-results-summary .provider-stats {\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n.search-results-summary .failed-count {\n color: var(--mj-status-error);\n}\n\n.clear-results-btn {\n margin-left: auto;\n background: none;\n border: 1px solid var(--mj-border-strong);\n padding: 4px 10px;\n cursor: pointer;\n border-radius: 3px;\n font-size: 11px;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.clear-results-btn:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.provider-results-list {\n padding: 8px 0;\n}\n\n.provider-result-group {\n margin-bottom: 16px;\n}\n\n.provider-result-group:last-child {\n margin-bottom: 0;\n}\n\n.provider-result-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n background: var(--mj-bg-surface-card);\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.provider-result-header i {\n color: var(--mj-brand-primary);\n}\n\n.provider-result-header .result-count {\n font-weight: normal;\n color: var(--mj-text-secondary);\n}\n\n.provider-result-group.failed .provider-result-header {\n background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n}\n\n.provider-result-group.failed .provider-result-header i {\n color: var(--mj-status-error);\n}\n\n.error-badge {\n color: var(--mj-status-error);\n font-weight: normal;\n font-size: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.provider-result-files {\n padding: 0;\n}\n\n.search-result-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 8px 16px 8px 40px;\n border-bottom: 1px solid var(--mj-bg-surface-sunken);\n cursor: pointer;\n transition: background-color 0.1s;\n}\n\n.search-result-item:hover {\n background-color: var(--mj-bg-surface-card);\n}\n\n.search-result-item:last-child {\n border-bottom: none;\n}\n\n.search-result-item .file-icon {\n font-size: 16px;\n color: var(--mj-text-secondary);\n flex-shrink: 0;\n}\n\n.search-result-item .file-info {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.search-result-item .file-name {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.search-result-item .file-path {\n font-size: 11px;\n color: var(--mj-text-disabled);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.search-result-item .file-size {\n font-size: 12px;\n color: var(--mj-text-secondary);\n flex-shrink: 0;\n min-width: 60px;\n text-align: right;\n}\n\n.search-result-item .file-date {\n font-size: 12px;\n color: var(--mj-text-secondary);\n flex-shrink: 0;\n min-width: 140px;\n text-align: right;\n}\n\n.no-results-message {\n padding: 16px 40px;\n font-size: 12px;\n color: var(--mj-text-disabled);\n font-style: italic;\n}\n\n.searching-state {\n padding: 40px 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n"] }]
2405
2389
  }], () => [], { account: [{
2406
2390
  type: Input
2407
2391
  }], folderPath: [{