@memberjunction/ng-file-storage 3.1.0 → 3.2.0

package/dist/lib/file-browser/file-grid.component.js

@@ -0,0 +1,2394 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { GraphQLDataProvider, GraphQLFileStorageClient } from '@memberjunction/graphql-dataprovider';
+import { FileStorageEngine } from '@memberjunction/core-entities';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+import * as i3 from "@memberjunction/ng-shared-generic";
+import * as i4 from "@progress/kendo-angular-label";
+function FileGridComponent_div_1_button_12_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 30);
+    i0.ɵɵlistener("click", function FileGridComponent_div_1_button_12_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.clearSearch()); });
+    i0.ɵɵelement(1, "i", 31);
+    i0.ɵɵelementEnd();
+} }
+function FileGridComponent_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 12)(1, "div", 13)(2, "button", 14);
+    i0.ɵɵlistener("click", function FileGridComponent_div_1_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.navigateUp()); });
+    i0.ɵɵelement(3, "i", 15);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 16);
+    i0.ɵɵlistener("click", function FileGridComponent_div_1_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refresh()); });
+    i0.ɵɵelement(5, "i", 17);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 18);
+    i0.ɵɵelement(7, "i", 19);
+    i0.ɵɵelementStart(8, "span", 20);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(10, "div", 21)(11, "input", 22);
+    i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_div_1_Template_input_ngModelChange_11_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.searchQuery, $event) || (ctx_r1.searchQuery = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function FileGridComponent_div_1_Template_input_ngModelChange_11_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchChange($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(12, FileGridComponent_div_1_button_12_Template, 2, 0, "button", 23);
+    i0.ɵɵelementStart(13, "select", 24);
+    i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_div_1_Template_select_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.fileTypeFilter, $event) || (ctx_r1.fileTypeFilter = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function FileGridComponent_div_1_Template_select_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onFileTypeFilterChange($event)); });
+    i0.ɵɵelementStart(14, "option", 25);
+    i0.ɵɵtext(15, "All");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "option", 26);
+    i0.ɵɵtext(17, "Files");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "option", 27);
+    i0.ɵɵtext(19, "Folders");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(20, "button", 28);
+    i0.ɵɵlistener("click", function FileGridComponent_div_1_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleMultiAccountSearchMode()); });
+    i0.ɵɵelement(21, "i", 29);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", !ctx_r1.canNavigateUp());
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate1("", ctx_r1.folderPath || "Root", " /");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.searchQuery);
+    i0.ɵɵproperty("disabled", ctx_r1.isLoading || ctx_r1.isMultiProviderSearchMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.searchQuery && !ctx_r1.isMultiProviderSearchMode);
+    i0.ɵɵadvance();
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.fileTypeFilter);
+    i0.ɵɵproperty("disabled", ctx_r1.isLoading || ctx_r1.isMultiProviderSearchMode);
+    i0.ɵɵadvance(7);
+    i0.ɵɵclassProp("active", ctx_r1.isMultiProviderSearchMode);
+} }
+function FileGridComponent_div_2_i_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 48);
+} }
+function FileGridComponent_div_2_i_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 49);
+} }
+function FileGridComponent_div_2_label_18_span_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 55);
+    i0.ɵɵtext(1, "(no search)");
+    i0.ɵɵelementEnd();
+} }
+function FileGridComponent_div_2_label_18_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "label", 50)(1, "input", 51);
+    i0.ɵɵlistener("change", function FileGridComponent_div_2_label_18_Template_input_change_1_listener() { const a_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleSearchAccount(a_r6.account.ID)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "span", 52);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 53);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, FileGridComponent_div_2_label_18_span_6_Template, 2, 0, "span", 54);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const a_r6 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("disabled", !ctx_r1.accountSupportsSearch(a_r6));
+    i0.ɵɵproperty("title", ctx_r1.accountSupportsSearch(a_r6) ? "" : "This account does not support search");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("checked", ctx_r1.isAccountSelectedForSearch(a_r6.account.ID))("disabled", !ctx_r1.accountSupportsSearch(a_r6));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(a_r6.account.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("(", a_r6.provider.Name, ")");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.accountSupportsSearch(a_r6));
+} }
+function FileGridComponent_div_2_div_19_span_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 64);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" , ", ctx_r1.multiProviderSearchResults.failedAccounts, " failed ");
+} }
+function FileGridComponent_div_2_div_19_div_12_span_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 58);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const accountResult_r8 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" (", accountResult_r8.results.length, " result(s)) ");
+} }
+function FileGridComponent_div_2_div_19_div_12_span_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 72);
+    i0.ɵɵelement(1, "i", 73);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const accountResult_r8 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", accountResult_r8.errorMessage, " ");
+} }
+function FileGridComponent_div_2_div_19_div_12_div_7_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 76);
+    i0.ɵɵelement(1, "i", 77);
+    i0.ɵɵelementStart(2, "div", 78)(3, "span", 79);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 80);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "span", 81);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "span", 82);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const file_r9 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.getSearchResultIcon(file_r9));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(file_r9.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(file_r9.path);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.formatSearchResultSize(file_r9.size));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.formatSearchResultDate(file_r9.lastModified));
+} }
+function FileGridComponent_div_2_div_19_div_12_div_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 74);
+    i0.ɵɵtemplate(1, FileGridComponent_div_2_div_19_div_12_div_7_div_1_Template, 11, 6, "div", 75);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const accountResult_r8 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", accountResult_r8.results);
+} }
+function FileGridComponent_div_2_div_19_div_12_div_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 83);
+    i0.ɵɵtext(1, " No matching files found ");
+    i0.ɵɵelementEnd();
+} }
+function FileGridComponent_div_2_div_19_div_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 65)(1, "div", 66);
+    i0.ɵɵelement(2, "i", 67);
+    i0.ɵɵelementStart(3, "span", 52);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(5, FileGridComponent_div_2_div_19_div_12_span_5_Template, 2, 1, "span", 68)(6, FileGridComponent_div_2_div_19_div_12_span_6_Template, 3, 1, "span", 69);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(7, FileGridComponent_div_2_div_19_div_12_div_7_Template, 2, 1, "div", 70)(8, FileGridComponent_div_2_div_19_div_12_div_8_Template, 2, 0, "div", 71);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const accountResult_r8 = ctx.$implicit;
+    i0.ɵɵclassProp("failed", !accountResult_r8.success);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(accountResult_r8.accountName);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", accountResult_r8.success);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !accountResult_r8.success);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", accountResult_r8.success && accountResult_r8.results.length > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", accountResult_r8.success && accountResult_r8.results.length === 0);
+} }
+function FileGridComponent_div_2_div_19_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 56)(1, "div", 57)(2, "span", 58);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 59);
+    i0.ɵɵtext(5);
+    i0.ɵɵtemplate(6, FileGridComponent_div_2_div_19_span_6_Template, 2, 1, "span", 60);
+    i0.ɵɵtext(7, ") ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "button", 61);
+    i0.ɵɵlistener("click", function FileGridComponent_div_2_div_19_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.clearMultiProviderSearch()); });
+    i0.ɵɵelement(9, "i", 31);
+    i0.ɵɵtext(10, " Clear ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 62);
+    i0.ɵɵtemplate(12, FileGridComponent_div_2_div_19_div_12_Template, 9, 7, "div", 63);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("", ctx_r1.multiProviderSearchResults.totalResultsReturned, " result(s) found");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" (", ctx_r1.multiProviderSearchResults.successfulAccounts, " account(s) searched ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.multiProviderSearchResults.failedAccounts > 0);
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("ngForOf", ctx_r1.multiProviderSearchResults.accountResults);
+} }
+function FileGridComponent_div_2_div_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 84);
+    i0.ɵɵelement(1, "mj-loading", 85);
+    i0.ɵɵelementEnd();
+} }
+function FileGridComponent_div_2_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 32)(1, "div", 33)(2, "h3");
+    i0.ɵɵelement(3, "i", 34);
+    i0.ɵɵtext(4, " Search Across Providers");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 35);
+    i0.ɵɵlistener("click", function FileGridComponent_div_2_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleMultiAccountSearchMode()); });
+    i0.ɵɵelement(6, "i", 31);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 36)(8, "div", 37)(9, "input", 38);
+    i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_div_2_Template_input_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.multiProviderSearchQuery, $event) || (ctx_r1.multiProviderSearchQuery = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keydown.enter", function FileGridComponent_div_2_Template_input_keydown_enter_9_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.executeMultiAccountSearch()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "button", 39);
+    i0.ɵɵlistener("click", function FileGridComponent_div_2_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.executeMultiAccountSearch()); });
+    i0.ɵɵtemplate(11, FileGridComponent_div_2_i_11_Template, 1, 0, "i", 40)(12, FileGridComponent_div_2_i_12_Template, 1, 0, "i", 41);
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(14, "div", 42)(15, "label", 43);
+    i0.ɵɵtext(16, "Select accounts to search:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "div", 44);
+    i0.ɵɵtemplate(18, FileGridComponent_div_2_label_18_Template, 7, 8, "label", 45);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵtemplate(19, FileGridComponent_div_2_div_19_Template, 13, 4, "div", 46)(20, FileGridComponent_div_2_div_20_Template, 2, 0, "div", 47);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(9);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.multiProviderSearchQuery);
+    i0.ɵɵproperty("disabled", ctx_r1.isSearching);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r1.isSearching || !ctx_r1.multiProviderSearchQuery.trim() || ctx_r1.selectedSearchProviders.size === 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.isSearching);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.isSearching);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.isSearching ? "Searching..." : "Search", " ");
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("ngForOf", ctx_r1.availableAccounts);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.multiProviderSearchResults);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.isSearching);
+} }
+function FileGridComponent_div_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 86);
+    i0.ɵɵelement(1, "mj-loading", 87);
+    i0.ɵɵelementEnd();
+} }
+function FileGridComponent_div_4_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 88)(1, "div", 89);
+    i0.ɵɵelement(2, "i", 90);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p", 91);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 92);
+    i0.ɵɵlistener("click", function FileGridComponent_div_4_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refresh()); });
+    i0.ɵɵelement(6, "i", 17);
+    i0.ɵɵtext(7, " Retry ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.errorMessage);
+} }
+function FileGridComponent_div_5_tr_19_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr", 101);
+    i0.ɵɵlistener("click", function FileGridComponent_div_5_tr_19_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_div_5_tr_19_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)); });
+    i0.ɵɵelementStart(1, "td", 102);
+    i0.ɵɵelement(2, "i", 103);
+    i0.ɵɵelementStart(3, "span", 104);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "td", 97)(6, "span", 105);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "td", 106)(9, "span", 107);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "td", 108)(12, "span", 109);
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const item_r13 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("selected", ctx_r1.selectedItems.includes(item_r13.key));
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r1.getItemIcon(item_r13));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(item_r13.name);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.getFileType(item_r13));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(item_r13.type === "folder" ? "\u2014" : ctx_r1.formatFileSize(item_r13.size));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.formatDate(item_r13.lastModified));
+} }
+function FileGridComponent_div_5_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 93)(1, "table", 94)(2, "thead")(3, "tr")(4, "th", 95);
+    i0.ɵɵlistener("click", function FileGridComponent_div_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] == null ? null : ctx_r1.sort[0].field) === "name" && (ctx_r1.sort[0] == null ? null : ctx_r1.sort[0].dir) === "asc" ? "desc" : "asc" }])); });
+    i0.ɵɵelementStart(5, "span");
+    i0.ɵɵtext(6, "Name");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(7, "i", 96);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "th", 97);
+    i0.ɵɵtext(9, "Type");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "th", 98);
+    i0.ɵɵlistener("click", function FileGridComponent_div_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] == null ? null : ctx_r1.sort[0].field) === "size" && (ctx_r1.sort[0] == null ? null : ctx_r1.sort[0].dir) === "asc" ? "desc" : "asc" }])); });
+    i0.ɵɵelementStart(11, "span");
+    i0.ɵɵtext(12, "Size");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(13, "i", 96);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "th", 99);
+    i0.ɵɵlistener("click", function FileGridComponent_div_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] == null ? null : ctx_r1.sort[0].field) === "lastModified" && (ctx_r1.sort[0] == null ? null : ctx_r1.sort[0].dir) === "asc" ? "desc" : "asc" }])); });
+    i0.ɵɵelementStart(15, "span");
+    i0.ɵɵtext(16, "Modified");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(17, "i", 96);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(18, "tbody");
+    i0.ɵɵtemplate(19, FileGridComponent_div_5_tr_19_Template, 14, 8, "tr", 100);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(7);
+    i0.ɵɵclassProp("fa-caret-up", (ctx_r1.sort[0] == null ? null : ctx_r1.sort[0].field) === "name" && (ctx_r1.sort[0] == null ? null : ctx_r1.sort[0].dir) === "asc")("fa-caret-down", (ctx_r1.sort[0] == null ? null : ctx_r1.sort[0].field) === "name" && (ctx_r1.sort[0] == null ? null : ctx_r1.sort[0].dir) === "desc")("fa-sort", (ctx_r1.sort[0] == null ? null : ctx_r1.sort[0].field) !== "name");
+    i0.ɵɵadvance(6);
+    i0.ɵɵclassProp("fa-caret-up", (ctx_r1.sort[0] == null ? null : ctx_r1.sort[0].field) === "size" && (ctx_r1.sort[0] == null ? null : ctx_r1.sort[0].dir) === "asc")("fa-caret-down", (ctx_r1.sort[0] == null ? null : ctx_r1.sort[0].field) === "size" && (ctx_r1.sort[0] == null ? null : ctx_r1.sort[0].dir) === "desc")("fa-sort", (ctx_r1.sort[0] == null ? null : ctx_r1.sort[0].field) !== "size");
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassProp("fa-caret-up", (ctx_r1.sort[0] == null ? null : ctx_r1.sort[0].field) === "lastModified" && (ctx_r1.sort[0] == null ? null : ctx_r1.sort[0].dir) === "asc")("fa-caret-down", (ctx_r1.sort[0] == null ? null : ctx_r1.sort[0].field) === "lastModified" && (ctx_r1.sort[0] == null ? null : ctx_r1.sort[0].dir) === "desc")("fa-sort", (ctx_r1.sort[0] == null ? null : ctx_r1.sort[0].field) !== "lastModified");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", ctx_r1.filteredItems);
+} }
+function FileGridComponent_div_6_div_2_div_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 117);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r15 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.formatFileSize(item_r15.size));
+} }
+function FileGridComponent_div_6_div_2_div_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 117);
+    i0.ɵɵtext(1, "Folder");
+    i0.ɵɵelementEnd();
+} }
+function FileGridComponent_div_6_div_2_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 113);
+    i0.ɵɵlistener("click", function FileGridComponent_div_6_div_2_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_div_6_div_2_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)); });
+    i0.ɵɵelementStart(1, "div", 114);
+    i0.ɵɵelement(2, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 115);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(5, FileGridComponent_div_6_div_2_div_5_Template, 2, 1, "div", 116)(6, FileGridComponent_div_6_div_2_div_6_Template, 2, 0, "div", 116);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r15 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("selected", ctx_r1.selectedItems.includes(item_r15.key));
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r1.getItemIcon(item_r15));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(item_r15.name);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", item_r15.type === "file");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", item_r15.type === "folder");
+} }
+function FileGridComponent_div_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 110)(1, "div", 111);
+    i0.ɵɵtemplate(2, FileGridComponent_div_6_div_2_Template, 7, 7, "div", 112);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", ctx_r1.filteredItems);
+} }
+function FileGridComponent_div_7_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 118)(1, "div", 119);
+    i0.ɵɵelement(2, "i", 120);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p", 121);
+    i0.ɵɵtext(4, "This folder is empty");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 122);
+    i0.ɵɵlistener("click", function FileGridComponent_div_7_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onUploadClick()); });
+    i0.ɵɵelement(6, "i", 123);
+    i0.ɵɵtext(7, " Upload Files ");
+    i0.ɵɵelementEnd()();
+} }
+function FileGridComponent_div_8_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 124)(1, "div", 125)(2, "button", 126);
+    i0.ɵɵlistener("click", function FileGridComponent_div_8_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onUploadClick()); });
+    i0.ɵɵelement(3, "i", 123);
+    i0.ɵɵtext(4, " Upload ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 126);
+    i0.ɵɵlistener("click", function FileGridComponent_div_8_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onNewFolderClick()); });
+    i0.ɵɵelement(6, "i", 127);
+    i0.ɵɵtext(7, " New Folder ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "button", 128);
+    i0.ɵɵlistener("click", function FileGridComponent_div_8_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDownloadClick()); });
+    i0.ɵɵelement(9, "i", 129);
+    i0.ɵɵtext(10, " Download ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "button", 128);
+    i0.ɵɵlistener("click", function FileGridComponent_div_8_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRenameClick()); });
+    i0.ɵɵelement(12, "i", 130);
+    i0.ɵɵtext(13, " Rename ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "button", 128);
+    i0.ɵɵlistener("click", function FileGridComponent_div_8_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCopyClick()); });
+    i0.ɵɵelement(15, "i", 131);
+    i0.ɵɵtext(16, " Copy ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "button", 132);
+    i0.ɵɵlistener("click", function FileGridComponent_div_8_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCopyToAccountClick()); });
+    i0.ɵɵelement(18, "i", 133);
+    i0.ɵɵtext(19, " Copy to... ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "button", 128);
+    i0.ɵɵlistener("click", function FileGridComponent_div_8_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onMoveClick()); });
+    i0.ɵɵelement(21, "i", 134);
+    i0.ɵɵtext(22, " Move ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(23, "button", 128);
+    i0.ɵɵlistener("click", function FileGridComponent_div_8_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDeleteClick()); });
+    i0.ɵɵelement(24, "i", 135);
+    i0.ɵɵtext(25, " Delete ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(26, "div", 136)(27, "div", 137)(28, "button", 138);
+    i0.ɵɵlistener("click", function FileGridComponent_div_8_Template_button_click_28_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewMode = "list"); });
+    i0.ɵɵelement(29, "i", 139);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(30, "button", 140);
+    i0.ɵɵlistener("click", function FileGridComponent_div_8_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewMode = "grid"); });
+    i0.ɵɵelement(31, "i", 141);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(32, "span", 142);
+    i0.ɵɵtext(33);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    let tmp_4_0;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(8);
+    i0.ɵɵproperty("disabled", ctx_r1.selectedItems.length !== 1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("disabled", ctx_r1.selectedItems.length !== 1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("disabled", ctx_r1.selectedItems.length !== 1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("disabled", ctx_r1.selectedItems.length !== 1 || ((tmp_4_0 = ctx_r1.getSelectedItem()) == null ? null : tmp_4_0.type) === "folder");
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("disabled", ctx_r1.selectedItems.length !== 1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("disabled", ctx_r1.selectedItems.length === 0);
+    i0.ɵɵadvance(5);
+    i0.ɵɵclassProp("active", ctx_r1.viewMode === "list");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", ctx_r1.viewMode === "grid");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate2(" ", ctx_r1.filteredItems.length, " ", ctx_r1.filteredItems.length === 1 ? "item" : "filteredItems", " ");
+} }
+function FileGridComponent_div_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 143)(1, "div", 144)(2, "div", 145);
+    i0.ɵɵelement(3, "i", 133);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "h2", 146);
+    i0.ɵɵtext(5, "Drop files to upload");
+    i0.ɵɵelementEnd()()();
+} }
+function FileGridComponent_div_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 147)(1, "div", 148)(2, "div", 149);
+    i0.ɵɵelement(3, "i", 48);
+    i0.ɵɵelementStart(4, "span");
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 150);
+    i0.ɵɵelement(7, "div", 151);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "span", 152);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1("Uploading ", ctx_r1.uploadingFileName, "...");
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("width", ctx_r1.uploadProgress, "%");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", ctx_r1.uploadProgress, "%");
+} }
+function FileGridComponent_div_11_i_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 48);
+} }
+function FileGridComponent_div_11_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 153);
+    i0.ɵɵlistener("click", function FileGridComponent_div_11_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelNewFolder()); });
+    i0.ɵɵelementStart(1, "div", 154);
+    i0.ɵɵlistener("click", function FileGridComponent_div_11_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r18); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 155)(3, "h3");
+    i0.ɵɵtext(4, "Create New Folder");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 156);
+    i0.ɵɵlistener("click", function FileGridComponent_div_11_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelNewFolder()); });
+    i0.ɵɵelement(6, "i", 31);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 157)(8, "label");
+    i0.ɵɵtext(9, "Folder name:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "input", 158);
+    i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_div_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); });
+    i0.ɵɵlistener("keydown.enter", function FileGridComponent_div_11_Template_input_keydown_enter_10_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCreateFolder()); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 159)(12, "button", 160);
+    i0.ɵɵlistener("click", function FileGridComponent_div_11_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelNewFolder()); });
+    i0.ɵɵtext(13, "Cancel");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "button", 160);
+    i0.ɵɵlistener("click", function FileGridComponent_div_11_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCreateFolder()); });
+    i0.ɵɵtemplate(15, FileGridComponent_div_11_i_15_Template, 1, 0, "i", 40);
+    i0.ɵɵtext(16);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(10);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.newFolderName);
+    i0.ɵɵproperty("disabled", ctx_r1.isCreatingFolder);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r1.isCreatingFolder);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", !ctx_r1.newFolderName.trim() || ctx_r1.isCreatingFolder);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.isCreatingFolder);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.isCreatingFolder ? "Creating..." : "Create", " ");
+} }
+function FileGridComponent_div_12_p_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 163);
+    i0.ɵɵtext(1, "This will delete the folder and all its contents.");
+    i0.ɵɵelementEnd();
+} }
+function FileGridComponent_div_12_i_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 48);
+} }
+function FileGridComponent_div_12_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 153);
+    i0.ɵɵlistener("click", function FileGridComponent_div_12_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelDelete()); });
+    i0.ɵɵelementStart(1, "div", 154);
+    i0.ɵɵlistener("click", function FileGridComponent_div_12_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r19); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 155)(3, "h3");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 156);
+    i0.ɵɵlistener("click", function FileGridComponent_div_12_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelDelete()); });
+    i0.ɵɵelement(6, "i", 31);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 157)(8, "p");
+    i0.ɵɵtext(9, "Are you sure you want to delete ");
+    i0.ɵɵelementStart(10, "strong");
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(12, "?");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(13, FileGridComponent_div_12_p_13_Template, 2, 0, "p", 161);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "div", 159)(15, "button", 160);
+    i0.ɵɵlistener("click", function FileGridComponent_div_12_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelDelete()); });
+    i0.ɵɵtext(16, "Cancel");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "button", 162);
+    i0.ɵɵlistener("click", function FileGridComponent_div_12_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmDelete()); });
+    i0.ɵɵtemplate(18, FileGridComponent_div_12_i_18_Template, 1, 0, "i", 40);
+    i0.ɵɵtext(19);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("Delete ", ctx_r1.itemToDelete.type === "folder" ? "Folder" : "File", "?");
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(ctx_r1.itemToDelete.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.itemToDelete.type === "folder");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r1.isDeleting);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r1.isDeleting);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.isDeleting);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.isDeleting ? "Deleting..." : "Delete", " ");
+} }
+function FileGridComponent_div_13_i_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 48);
+} }
+function FileGridComponent_div_13_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 153);
+    i0.ɵɵlistener("click", function FileGridComponent_div_13_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelRename()); });
+    i0.ɵɵelementStart(1, "div", 154);
+    i0.ɵɵlistener("click", function FileGridComponent_div_13_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r20); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 155)(3, "h3");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 156);
+    i0.ɵɵlistener("click", function FileGridComponent_div_13_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelRename()); });
+    i0.ɵɵelement(6, "i", 31);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 157)(8, "label");
+    i0.ɵɵtext(9, "New name:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "input", 164);
+    i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_div_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); });
+    i0.ɵɵlistener("keydown.enter", function FileGridComponent_div_13_Template_input_keydown_enter_10_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmRename()); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 159)(12, "button", 160);
+    i0.ɵɵlistener("click", function FileGridComponent_div_13_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelRename()); });
+    i0.ɵɵtext(13, "Cancel");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "button", 160);
+    i0.ɵɵlistener("click", function FileGridComponent_div_13_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmRename()); });
+    i0.ɵɵtemplate(15, FileGridComponent_div_13_i_15_Template, 1, 0, "i", 40);
+    i0.ɵɵtext(16);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("Rename ", ctx_r1.itemToRename.type === "folder" ? "Folder" : "File", "");
+    i0.ɵɵadvance(6);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.newItemName);
+    i0.ɵɵproperty("disabled", ctx_r1.isRenaming);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r1.isRenaming);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r1.isRenaming || !ctx_r1.newItemName.trim());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.isRenaming);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.isRenaming ? "Renaming..." : "Rename", " ");
+} }
+function FileGridComponent_div_14_i_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 48);
+} }
+function FileGridComponent_div_14_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 153);
+    i0.ɵɵlistener("click", function FileGridComponent_div_14_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelCopy()); });
+    i0.ɵɵelementStart(1, "div", 154);
+    i0.ɵɵlistener("click", function FileGridComponent_div_14_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r21); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 155)(3, "h3");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 156);
+    i0.ɵɵlistener("click", function FileGridComponent_div_14_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelCopy()); });
+    i0.ɵɵelement(6, "i", 31);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 157)(8, "p");
+    i0.ɵɵtext(9, "Copying: ");
+    i0.ɵɵelementStart(10, "strong");
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "label");
+    i0.ɵɵtext(13, "Destination path:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "input", 165);
+    i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_div_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); });
+    i0.ɵɵlistener("keydown.enter", function FileGridComponent_div_14_Template_input_keydown_enter_14_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmCopy()); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(15, "div", 159)(16, "button", 160);
+    i0.ɵɵlistener("click", function FileGridComponent_div_14_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelCopy()); });
+    i0.ɵɵtext(17, "Cancel");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "button", 160);
+    i0.ɵɵlistener("click", function FileGridComponent_div_14_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmCopy()); });
+    i0.ɵɵtemplate(19, FileGridComponent_div_14_i_19_Template, 1, 0, "i", 40);
+    i0.ɵɵtext(20);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("Copy ", ctx_r1.itemToCopy.type === "folder" ? "Folder" : "File", "");
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(ctx_r1.itemToCopy.name);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.copyDestinationPath);
+    i0.ɵɵproperty("disabled", ctx_r1.isCopying);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r1.isCopying);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r1.isCopying || !ctx_r1.copyDestinationPath.trim());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.isCopying);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.isCopying ? "Copying..." : "Copy", " ");
+} }
+function FileGridComponent_div_15_i_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 48);
+} }
+function FileGridComponent_div_15_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 153);
+    i0.ɵɵlistener("click", function FileGridComponent_div_15_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelMove()); });
+    i0.ɵɵelementStart(1, "div", 154);
+    i0.ɵɵlistener("click", function FileGridComponent_div_15_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r22); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 155)(3, "h3");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 156);
+    i0.ɵɵlistener("click", function FileGridComponent_div_15_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelMove()); });
+    i0.ɵɵelement(6, "i", 31);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 157)(8, "p");
+    i0.ɵɵtext(9, "Moving: ");
+    i0.ɵɵelementStart(10, "strong");
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "label");
+    i0.ɵɵtext(13, "Destination folder path:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "input", 166);
+    i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_div_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); });
+    i0.ɵɵlistener("keydown.enter", function FileGridComponent_div_15_Template_input_keydown_enter_14_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmMove()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "p", 167);
+    i0.ɵɵtext(16);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(17, "div", 159)(18, "button", 160);
+    i0.ɵɵlistener("click", function FileGridComponent_div_15_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelMove()); });
+    i0.ɵɵtext(19, "Cancel");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "button", 160);
+    i0.ɵɵlistener("click", function FileGridComponent_div_15_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmMove()); });
+    i0.ɵɵtemplate(21, FileGridComponent_div_15_i_21_Template, 1, 0, "i", 40);
+    i0.ɵɵtext(22);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("Move ", ctx_r1.itemToMove.type === "folder" ? "Folder" : "File", "");
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(ctx_r1.itemToMove.name);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.moveDestinationPath);
+    i0.ɵɵproperty("disabled", ctx_r1.isMoving);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2(" File will be moved to: ", ctx_r1.moveDestinationPath, "", ctx_r1.itemToMove.name, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r1.isMoving);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r1.isMoving || !ctx_r1.moveDestinationPath.trim());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.isMoving);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.isMoving ? "Moving..." : "Move", " ");
+} }
+function FileGridComponent_div_16_div_19_Template(rf, ctx) { if (rf & 1) {
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 174)(1, "input", 175);
+    i0.ɵɵlistener("change", function FileGridComponent_div_16_div_19_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)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "label", 176);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementStart(4, "span", 177);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const a_r25 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("id", "dest-account-" + a_r25.account.ID)("checked", ctx_r1.isDestinationAccountSelected(a_r25.account.ID))("disabled", ctx_r1.isCopyingToAccount);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("for", "dest-account-" + a_r25.account.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", a_r25.account.Name, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(a_r25.provider.Name);
+} }
+function FileGridComponent_div_16_div_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 178);
+    i0.ɵɵelement(1, "i", 48);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate3(" Copying to ", ctx_r1.copyToAccountProgress.currentAccount, " (", ctx_r1.copyToAccountProgress.current, "/", ctx_r1.copyToAccountProgress.total, ")... ");
+} }
+function FileGridComponent_div_16_i_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 48);
+} }
+function FileGridComponent_div_16_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 153);
+    i0.ɵɵlistener("click", function FileGridComponent_div_16_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelCopyToAccount()); });
+    i0.ɵɵelementStart(1, "div", 154);
+    i0.ɵɵlistener("click", function FileGridComponent_div_16_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r23); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 155)(3, "h3");
+    i0.ɵɵtext(4, "Copy to Another Account");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 156);
+    i0.ɵɵlistener("click", function FileGridComponent_div_16_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelCopyToAccount()); });
+    i0.ɵɵelement(6, "i", 31);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 157)(8, "p");
+    i0.ɵɵtext(9, "Copying: ");
+    i0.ɵɵelementStart(10, "strong");
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "p", 168);
+    i0.ɵɵtext(13, " From: ");
+    i0.ɵɵelementStart(14, "strong");
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "label");
+    i0.ɵɵtext(17, "Select destination account(s):");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "div", 169);
+    i0.ɵɵtemplate(19, FileGridComponent_div_16_div_19_Template, 6, 6, "div", 170);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "label", 171);
+    i0.ɵɵtext(21, "Destination filename:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "input", 172);
+    i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_div_16_Template_input_ngModelChange_22_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.copyToAccountDestinationPath, $event) || (ctx_r1.copyToAccountDestinationPath = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keydown.enter", function FileGridComponent_div_16_Template_input_keydown_enter_22_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmCopyToAccount()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(23, FileGridComponent_div_16_div_23_Template, 3, 3, "div", 173);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(24, "div", 159)(25, "button", 160);
+    i0.ɵɵlistener("click", function FileGridComponent_div_16_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelCopyToAccount()); });
+    i0.ɵɵtext(26, "Cancel");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(27, "button", 160);
+    i0.ɵɵlistener("click", function FileGridComponent_div_16_Template_button_click_27_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmCopyToAccount()); });
+    i0.ɵɵtemplate(28, FileGridComponent_div_16_i_28_Template, 1, 0, "i", 40);
+    i0.ɵɵtext(29);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(11);
+    i0.ɵɵtextInterpolate(ctx_r1.itemToCopyToProvider.name);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.account == null ? null : ctx_r1.account.account == null ? null : ctx_r1.account.account.Name);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngForOf", ctx_r1.availableAccounts);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.copyToAccountDestinationPath);
+    i0.ɵɵproperty("disabled", ctx_r1.isCopyingToAccount);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.copyToAccountProgress);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r1.isCopyingToAccount);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r1.isCopyingToAccount || ctx_r1.selectedDestinationAccounts.size === 0 || !ctx_r1.copyToAccountDestinationPath.trim());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.isCopyingToAccount);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.isCopyingToAccount ? "Copying..." : "Copy to " + ctx_r1.selectedDestinationAccounts.size + " account" + (ctx_r1.selectedDestinationAccounts.size !== 1 ? "s" : ""), " ");
+} }
+/**
+ * Displays files and folders in a grid/list view.
+ * Shows file metadata like name, size, type, and last modified date.
+ * Supports file selection and navigation to folders.
+ */
+export class FileGridComponent {
+    /**
+     * The storage account to list files from (includes provider details)
+     */
+    account = null;
+    /**
+     * The current folder path to display
+     */
+    folderPath = '';
+    /**
+     * Emits when a folder is double-clicked for navigation
+     */
+    folderNavigate = new EventEmitter();
+    /**
+     * Emits when the folder structure has changed (e.g., new folder created)
+     * This signals that the folder tree should refresh
+     */
+    folderStructureChanged = new EventEmitter();
+    /**
+     * List of files and folders in the current directory
+     */
+    items = [];
+    /**
+     * Currently selected item keys in the grid (Kendo stores keys, not full objects)
+     */
+    selectedItems = [];
+    /**
+     * Loading state indicator
+     */
+    isLoading = false;
+    /**
+     * Error message if loading fails
+     */
+    errorMessage = null;
+    /**
+     * View mode: 'grid' or 'list'
+     */
+    viewMode = 'list';
+    /**
+     * Sort configuration for the grid
+     */
+    sort = [
+        { field: 'name', dir: 'asc' }
+    ];
+    /**
+     * Search query for filtering files/folders
+     */
+    searchQuery = '';
+    /**
+     * File type filter ('all', 'files', 'folders')
+     */
+    fileTypeFilter = 'all';
+    /**
+     * Filtered list of items based on search and filter criteria
+     */
+    filteredItems = [];
+    /**
+     * Drag-and-drop state
+     */
+    isDragging = false;
+    /**
+     * Upload progress state
+     */
+    isUploading = false;
+    uploadProgress = 0;
+    uploadingFileName = '';
+    /**
+     * New folder dialog state
+     */
+    showNewFolderDialog = false;
+    newFolderName = '';
+    isCreatingFolder = false;
+    /**
+     * Delete confirmation dialog state
+     */
+    showDeleteDialog = false;
+    itemToDelete = null;
+    isDeleting = false;
+    /**
+     * Rename dialog state
+     */
+    showRenameDialog = false;
+    itemToRename = null;
+    newItemName = '';
+    isRenaming = false;
+    /**
+     * Copy dialog state
+     */
+    showCopyDialog = false;
+    itemToCopy = null;
+    copyDestinationPath = '';
+    isCopying = false;
+    /**
+     * Move dialog state
+     */
+    showMoveDialog = false;
+    itemToMove = null;
+    moveDestinationPath = '';
+    isMoving = false;
+    /**
+     * Copy to provider dialog state
+     */
+    showCopyToProviderDialog = false;
+    itemToCopyToProvider = null;
+    availableAccounts = [];
+    selectedDestinationAccounts = new Set();
+    copyToAccountDestinationPath = '';
+    isCopyingToAccount = false;
+    copyToAccountProgress = null;
+    /**
+     * Multi-provider search state
+     */
+    isMultiProviderSearchMode = false;
+    multiProviderSearchQuery = '';
+    selectedSearchProviders = new Set();
+    isSearching = false;
+    multiProviderSearchResults = null;
+    /**
+     * GraphQL client for file storage operations
+     */
+    storageClient;
+    constructor() {
+        this.storageClient = new GraphQLFileStorageClient(GraphQLDataProvider.Instance);
+    }
+    ngOnInit() {
+        // Don't load items here - wait for ngOnChanges when inputs are set
+    }
+    ngOnChanges(changes) {
+        // Reload items when provider or folder path changes
+        if (changes['account'] || changes['folderPath']) {
+            this.loadItems();
+        }
+    }
+    /**
+     * Loads files and folders from the current path
+     */
+    async loadItems() {
+        if (!this.account) {
+            this.items = [];
+            return;
+        }
+        const previousItemCount = this.items.length;
+        const previousItemNames = this.items.map(i => i.name);
+        this.isLoading = true;
+        this.errorMessage = null;
+        try {
+            console.log('[FileGrid] Loading items for account:', this.account.account.ID, 'path:', this.folderPath);
+            console.log('[FileGrid] Previous items:', { count: previousItemCount, names: previousItemNames });
+            const listResult = await this.storageClient.ListObjects(this.account.account.ID, this.folderPath || '', '/');
+            console.log('[FileGrid] ListObjects result:', listResult);
+            this.items = [];
+            // Add folders from prefixes first (so they appear before files)
+            if (listResult.prefixes) {
+                for (const prefix of listResult.prefixes) {
+                    // Extract the folder name from the prefix path
+                    // Prefix comes as "path/to/folder/" so we need to get just "folder"
+                    const folderName = prefix.endsWith('/')
+                        ? prefix.slice(0, -1).split('/').pop()
+                        : prefix.split('/').pop();
+                    if (folderName) {
+                        this.items.push({
+                            key: prefix,
+                            name: folderName,
+                            type: 'folder',
+                            size: 0,
+                            lastModified: new Date(),
+                            contentType: 'application/x-directory'
+                        });
+                    }
+                }
+            }
+            // Add files from objects
+            if (listResult.objects) {
+                for (const obj of listResult.objects) {
+                    // Skip directories from objects - we already added them from prefixes
+                    if (obj.isDirectory) {
+                        continue;
+                    }
+                    this.items.push({
+                        key: obj.fullPath,
+                        name: obj.name,
+                        type: 'file',
+                        size: obj.size,
+                        lastModified: obj.lastModified,
+                        contentType: obj.contentType,
+                        etag: obj.etag
+                    });
+                }
+            }
+        }
+        catch (error) {
+            this.errorMessage = 'Failed to load files';
+            console.error('[FileGrid] Error loading files:', error);
+        }
+        finally {
+            this.isLoading = false;
+        }
+        // Apply filters after loading
+        this.applyFilters();
+    }
+    /**
+     * Applies search and filter criteria to the items list
+     */
+    applyFilters() {
+        let filtered = [...this.items];
+        // Apply file type filter
+        if (this.fileTypeFilter === 'files') {
+            filtered = filtered.filter(item => item.type === 'file');
+        }
+        else if (this.fileTypeFilter === 'folders') {
+            filtered = filtered.filter(item => item.type === 'folder');
+        }
+        // Apply search query
+        if (this.searchQuery.trim()) {
+            const query = this.searchQuery.toLowerCase();
+            filtered = filtered.filter(item => item.name.toLowerCase().includes(query));
+        }
+        this.filteredItems = filtered;
+    }
+    /**
+     * Handles search query changes
+     */
+    onSearchChange(query) {
+        this.searchQuery = query;
+        this.applyFilters();
+    }
+    /**
+     * Clears the search query
+     */
+    clearSearch() {
+        this.searchQuery = '';
+        this.applyFilters();
+    }
+    /**
+     * Handles file type filter changes
+     */
+    onFileTypeFilterChange(filterType) {
+        this.fileTypeFilter = filterType;
+        this.applyFilters();
+    }
+    /**
+     * Formats a file size in bytes to a human-readable string
+     */
+    formatFileSize(bytes) {
+        if (bytes === 0)
+            return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+    }
+    /**
+     * Formats a date to a readable string
+     */
+    formatDate(date) {
+        return date.toLocaleString();
+    }
+    /**
+     * Gets the icon class for a file or folder
+     */
+    getItemIcon(item) {
+        if (!item || !item.name) {
+            return 'fa-solid fa-file';
+        }
+        if (item.type === 'folder') {
+            return 'fa-solid fa-folder';
+        }
+        // Determine file icon based on content type or extension
+        const extension = item.name.split('.').pop()?.toLowerCase() || '';
+        if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg'].includes(extension)) {
+            return 'fa-solid fa-file-image';
+        }
+        else if (['pdf'].includes(extension)) {
+            return 'fa-solid fa-file-pdf';
+        }
+        else if (['doc', 'docx'].includes(extension)) {
+            return 'fa-solid fa-file-word';
+        }
+        else if (['xls', 'xlsx'].includes(extension)) {
+            return 'fa-solid fa-file-excel';
+        }
+        else if (['ppt', 'pptx'].includes(extension)) {
+            return 'fa-solid fa-file-powerpoint';
+        }
+        else if (['zip', 'rar', '7z', 'tar', 'gz'].includes(extension)) {
+            return 'fa-solid fa-file-zipper';
+        }
+        else if (['mp4', 'avi', 'mov', 'wmv'].includes(extension)) {
+            return 'fa-solid fa-file-video';
+        }
+        else if (['mp3', 'wav', 'ogg', 'flac'].includes(extension)) {
+            return 'fa-solid fa-file-audio';
+        }
+        else if (['txt', 'log'].includes(extension)) {
+            return 'fa-solid fa-file-lines';
+        }
+        else if (['js', 'ts', 'html', 'css', 'json', 'xml', 'py', 'java', 'cpp'].includes(extension)) {
+            return 'fa-solid fa-file-code';
+        }
+        else {
+            return 'fa-solid fa-file';
+        }
+    }
+    /**
+     * Handles item selection change (not used - Kendo handles selection internally)
+     */
+    onSelectionChange(selectedKeys) {
+        this.selectedItems = selectedKeys;
+    }
+    /**
+     * Handles tile click in grid view for selection
+     */
+    onTileClick(item, event) {
+        if (event.ctrlKey || event.metaKey) {
+            // Multi-select: toggle item key
+            const index = this.selectedItems.indexOf(item.key);
+            if (index >= 0) {
+                this.selectedItems.splice(index, 1);
+            }
+            else {
+                this.selectedItems.push(item.key);
+            }
+        }
+        else if (event.shiftKey && this.selectedItems.length > 0) {
+            // Range select: select from last selected to current
+            const lastSelectedKey = this.selectedItems[this.selectedItems.length - 1];
+            const lastSelected = this.items.find(i => i.key === lastSelectedKey);
+            if (lastSelected) {
+                const lastIndex = this.items.indexOf(lastSelected);
+                const currentIndex = this.items.indexOf(item);
+                const start = Math.min(lastIndex, currentIndex);
+                const end = Math.max(lastIndex, currentIndex);
+                this.selectedItems = this.items.slice(start, end + 1).map(i => i.key);
+            }
+        }
+        else {
+            // Single select: replace selection
+            this.selectedItems = [item.key];
+        }
+    }
+    /**
+     * Handles double-click on an item
+     * For folders, navigate into them. For files, open/download them.
+     */
+    onItemDoubleClick(item) {
+        if (item.type === 'folder') {
+            // Navigate into folder by emitting the folder path
+            console.log('[FileGrid] Navigating to folder:', item.key);
+            this.folderNavigate.emit(item.key);
+        }
+        else {
+            // Download file
+            this.downloadFile(item);
+        }
+    }
+    /**
+     * Downloads a file by creating a pre-authenticated download URL
+     */
+    async downloadFile(item) {
+        if (!this.account) {
+            return;
+        }
+        try {
+            console.log('[FileGrid] Downloading file:', item.key);
+            const downloadUrl = await this.storageClient.CreatePreAuthDownloadUrl(this.account.account.ID, item.key);
+            console.log('[FileGrid] Download URL created:', downloadUrl ? 'success' : 'failed');
+            if (downloadUrl) {
+                // Trigger browser download
+                const link = document.createElement('a');
+                link.href = downloadUrl;
+                link.download = item.name;
+                link.target = '_blank'; // Open in new tab as fallback
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+                console.log('[FileGrid] File download initiated:', item.name);
+            }
+            else {
+                console.error('[FileGrid] Failed to get download URL');
+                this.errorMessage = 'Failed to generate download URL';
+            }
+        }
+        catch (error) {
+            console.error('[FileGrid] Error downloading file:', error);
+            const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+            this.errorMessage = `Failed to download file: ${errorMessage}`;
+            // Clear error after 5 seconds
+            setTimeout(() => {
+                if (this.errorMessage?.startsWith('Failed to download')) {
+                    this.errorMessage = null;
+                }
+            }, 5000);
+        }
+    }
+    /**
+     * Toggles between grid and list view
+     */
+    toggleViewMode() {
+        this.viewMode = this.viewMode === 'grid' ? 'list' : 'grid';
+    }
+    /**
+     * Refreshes the current directory
+     */
+    refresh() {
+        this.loadItems();
+    }
+    /**
+     * Navigates up to the parent directory
+     */
+    navigateUp() {
+        if (!this.folderPath) {
+            // Already at root
+            return;
+        }
+        // Remove trailing slash if present
+        const cleanPath = this.folderPath.endsWith('/')
+            ? this.folderPath.slice(0, -1)
+            : this.folderPath;
+        // Get parent path by removing last segment
+        const segments = cleanPath.split('/').filter(s => s.length > 0);
+        segments.pop(); // Remove last segment
+        const parentPath = segments.length > 0 ? segments.join('/') + '/' : '';
+        // Emit navigation event to update the folder tree and path
+        this.folderNavigate.emit(parentPath);
+    }
+    /**
+     * Checks if we can navigate up (not at root)
+     */
+    canNavigateUp() {
+        return this.folderPath !== '' && this.folderPath !== '/';
+    }
+    /**
+     * Handles sort change event from the grid
+     */
+    onSortChange(sort) {
+        this.sort = sort;
+    }
+    /**
+     * Gets a human-readable file type based on extension
+     */
+    getFileType(item) {
+        if (item.type === 'folder') {
+            return 'Folder';
+        }
+        const extension = item.name.split('.').pop()?.toLowerCase() || '';
+        const typeMap = {
+            // Documents
+            pdf: 'PDF Document',
+            doc: 'Word Document',
+            docx: 'Word Document',
+            xls: 'Excel Spreadsheet',
+            xlsx: 'Excel Spreadsheet',
+            ppt: 'PowerPoint',
+            pptx: 'PowerPoint',
+            txt: 'Text File',
+            // Images
+            jpg: 'JPEG Image',
+            jpeg: 'JPEG Image',
+            png: 'PNG Image',
+            gif: 'GIF Image',
+            bmp: 'Bitmap Image',
+            svg: 'SVG Image',
+            // Archives
+            zip: 'ZIP Archive',
+            rar: 'RAR Archive',
+            '7z': '7-Zip Archive',
+            tar: 'TAR Archive',
+            gz: 'GZIP Archive',
+            // Media
+            mp4: 'MP4 Video',
+            avi: 'AVI Video',
+            mov: 'QuickTime Video',
+            mp3: 'MP3 Audio',
+            wav: 'WAV Audio',
+            // Code
+            js: 'JavaScript',
+            ts: 'TypeScript',
+            html: 'HTML',
+            css: 'CSS',
+            json: 'JSON',
+            xml: 'XML',
+            py: 'Python',
+            java: 'Java',
+            cpp: 'C++'
+        };
+        return typeMap[extension] || `${extension.toUpperCase()} File`;
+    }
+    /**
+     * Handles upload button click - triggers file input
+     */
+    onUploadClick() {
+        const fileInput = document.createElement('input');
+        fileInput.type = 'file';
+        fileInput.multiple = true;
+        fileInput.onchange = (event) => {
+            const target = event.target;
+            if (target.files && target.files.length > 0) {
+                this.uploadFiles(Array.from(target.files));
+            }
+        };
+        fileInput.click();
+    }
+    /**
+     * Handles drag enter event
+     */
+    onDragEnter(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragging = true;
+    }
+    /**
+     * Handles drag over event
+     */
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    /**
+     * Handles drag leave event
+     */
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        // Only hide if leaving the container itself, not child elements
+        if (event.currentTarget === event.target) {
+            this.isDragging = false;
+        }
+    }
+    /**
+     * Handles drop event
+     */
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragging = false;
+        const files = event.dataTransfer?.files;
+        if (files && files.length > 0) {
+            this.uploadFiles(Array.from(files));
+        }
+    }
+    /**
+     * Uploads multiple files to the current folder
+     */
+    async uploadFiles(files) {
+        if (!this.account) {
+            return;
+        }
+        console.log('[FileGrid] Uploading files:', files.map(f => f.name));
+        for (let i = 0; i < files.length; i++) {
+            const file = files[i];
+            await this.uploadSingleFile(file, i + 1, files.length);
+        }
+        // Refresh the file list after all uploads complete
+        this.loadItems();
+    }
+    /**
+     * Uploads a single file
+     */
+    async uploadSingleFile(file, current, total) {
+        if (!this.account) {
+            return;
+        }
+        this.isUploading = true;
+        this.uploadingFileName = `${file.name} (${current}/${total})`;
+        this.uploadProgress = 0;
+        try {
+            // Construct the full object name with folder path
+            // Remove trailing slash from folderPath to avoid double slashes
+            let objectName;
+            if (this.folderPath) {
+                const cleanPath = this.folderPath.endsWith('/')
+                    ? this.folderPath.slice(0, -1)
+                    : this.folderPath;
+                objectName = `${cleanPath}/${file.name}`;
+            }
+            else {
+                objectName = file.name;
+            }
+            console.log('[FileGrid] Getting upload URL for:', objectName);
+            // Get pre-authenticated upload URL
+            const uploadData = await this.storageClient.CreatePreAuthUploadUrl(this.account.account.ID, objectName, file.type || 'application/octet-stream');
+            console.log('[FileGrid] Got upload URL:', uploadData.uploadUrl);
+            // Upload the file using XMLHttpRequest to track progress
+            await this.uploadFileToUrl(file, uploadData.uploadUrl);
+            console.log('[FileGrid] File uploaded successfully:', file.name);
+        }
+        catch (error) {
+            console.error('[FileGrid] Error uploading file:', error);
+            const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+            // Check if this is an unsupported operation error (e.g., Google Drive doesn't support pre-auth uploads)
+            if (errorMessage.includes('not supported')) {
+                this.errorMessage = `Upload not supported for ${this.account?.account.Name || 'this account'}. Try using a different storage account.`;
+            }
+            else {
+                this.errorMessage = `Failed to upload ${file.name}: ${errorMessage}`;
+            }
+            // Clear error after 5 seconds
+            setTimeout(() => {
+                if (this.errorMessage?.startsWith('Failed to upload') || this.errorMessage?.startsWith('Upload not supported')) {
+                    this.errorMessage = null;
+                }
+            }, 5000);
+        }
+        finally {
+            this.isUploading = false;
+            this.uploadProgress = 0;
+            this.uploadingFileName = '';
+        }
+    }
+    /**
+     * Uploads file to the pre-authenticated URL with progress tracking
+     */
+    uploadFileToUrl(file, url) {
+        return new Promise((resolve, reject) => {
+            const xhr = new XMLHttpRequest();
+            xhr.upload.addEventListener('progress', (event) => {
+                if (event.lengthComputable) {
+                    this.uploadProgress = Math.round((event.loaded / event.total) * 100);
+                }
+            });
+            xhr.addEventListener('load', () => {
+                if (xhr.status >= 200 && xhr.status < 300) {
+                    resolve();
+                }
+                else {
+                    reject(new Error(`Upload failed with status ${xhr.status}`));
+                }
+            });
+            xhr.addEventListener('error', () => {
+                reject(new Error('Network error during upload'));
+            });
+            xhr.addEventListener('abort', () => {
+                reject(new Error('Upload cancelled'));
+            });
+            // Use POST for Dropbox temporary upload links (required by Dropbox API)
+            // Use PUT for other providers like S3
+            // Dropbox requires POST with application/octet-stream
+            xhr.open('POST', url, true);
+            xhr.setRequestHeader('Content-Type', 'application/octet-stream');
+            xhr.send(file);
+        });
+    }
+    /**
+     * Opens the new folder dialog
+     */
+    onNewFolderClick() {
+        this.newFolderName = '';
+        this.showNewFolderDialog = true;
+    }
+    /**
+     * Closes the new folder dialog
+     */
+    onCancelNewFolder() {
+        this.showNewFolderDialog = false;
+        this.newFolderName = '';
+    }
+    /**
+     * Creates a new folder in the current directory
+     */
+    async onCreateFolder() {
+        if (!this.account || !this.newFolderName.trim()) {
+            return;
+        }
+        this.isCreatingFolder = true;
+        try {
+            // Construct the full folder path
+            // Remove trailing slash from folderPath to avoid double slashes
+            let folderPath;
+            if (this.folderPath) {
+                const cleanPath = this.folderPath.endsWith('/')
+                    ? this.folderPath.slice(0, -1)
+                    : this.folderPath;
+                folderPath = `${cleanPath}/${this.newFolderName.trim()}`;
+            }
+            else {
+                folderPath = this.newFolderName.trim();
+            }
+            console.log('[FileGrid] Creating folder:', folderPath);
+            const success = await this.storageClient.CreateDirectory(this.account.account.ID, folderPath);
+            if (success) {
+                console.log('[FileGrid] Folder created successfully:', folderPath);
+                // Close dialog and refresh
+                this.showNewFolderDialog = false;
+                this.newFolderName = '';
+                // Notify parent that folder structure changed
+                this.folderStructureChanged.emit();
+                // Refresh the file grid
+                this.loadItems();
+            }
+            else {
+                this.errorMessage = 'Failed to create folder';
+            }
+        }
+        catch (error) {
+            console.error('[FileGrid] Error creating folder:', error);
+            const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+            this.errorMessage = `Failed to create folder: ${errorMessage}`;
+            // Clear error after 5 seconds
+            setTimeout(() => {
+                if (this.errorMessage?.startsWith('Failed to create')) {
+                    this.errorMessage = null;
+                }
+            }, 5000);
+        }
+        finally {
+            this.isCreatingFolder = false;
+        }
+    }
+    /**
+     * Opens the delete confirmation dialog for the selected items
+     */
+    onDeleteClick() {
+        if (this.selectedItems.length === 0) {
+            return;
+        }
+        // selectedItems contains keys (strings), not full objects
+        // Find the actual item object from the items array
+        const selectedKey = this.selectedItems[0];
+        const item = this.items.find(i => i.key === selectedKey);
+        if (!item) {
+            console.error('[FileGrid] Could not find selected item with key:', selectedKey);
+            return;
+        }
+        this.itemToDelete = item;
+        this.showDeleteDialog = true;
+    }
+    /**
+     * Closes the delete confirmation dialog
+     */
+    onCancelDelete() {
+        this.showDeleteDialog = false;
+        this.itemToDelete = null;
+    }
+    /**
+     * Deletes the selected item after confirmation
+     */
+    async onConfirmDelete() {
+        if (!this.account || !this.itemToDelete) {
+            return;
+        }
+        this.isDeleting = true;
+        try {
+            // Construct the full path to the item
+            const itemPath = this.constructItemPath(this.itemToDelete);
+            console.log('[FileGrid] Deleting item:', itemPath);
+            const success = await this.storageClient.DeleteObject(this.account.account.ID, itemPath);
+            console.log('[FileGrid] Delete result:', { success });
+            if (success) {
+                console.log('[FileGrid] Item deleted successfully:', itemPath);
+                // Check if we deleted a folder (before clearing itemToDelete)
+                const wasFolder = this.itemToDelete.type === 'folder';
+                console.log('[FileGrid] Item details:', {
+                    type: this.itemToDelete.type,
+                    name: this.itemToDelete.name,
+                    key: this.itemToDelete.key,
+                    wasFolder
+                });
+                // Close dialog
+                this.showDeleteDialog = false;
+                this.itemToDelete = null;
+                // Clear selection
+                this.selectedItems = [];
+                // If we deleted a folder, notify parent that folder structure changed
+                if (wasFolder) {
+                    console.log('[FileGrid] Emitting folderStructureChanged event');
+                    this.folderStructureChanged.emit();
+                }
+                // Refresh the file grid
+                console.log('[FileGrid] Calling loadItems() to refresh grid');
+                this.loadItems();
+            }
+            else {
+                console.error('[FileGrid] Delete operation returned false');
+                this.errorMessage = `Failed to delete ${this.itemToDelete.type}`;
+            }
+        }
+        catch (error) {
+            console.error('[FileGrid] Error deleting item:', error);
+            const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+            this.errorMessage = `Failed to delete: ${errorMessage}`;
+            // Clear error after 5 seconds
+            setTimeout(() => {
+                if (this.errorMessage?.startsWith('Failed to delete')) {
+                    this.errorMessage = null;
+                }
+            }, 5000);
+        }
+        finally {
+            this.isDeleting = false;
+        }
+    }
+    /**
+     * Opens the rename dialog for the selected item
+     */
+    onRenameClick() {
+        if (this.selectedItems.length !== 1) {
+            return;
+        }
+        // selectedItems contains keys (strings), not full objects
+        // Find the actual item object from the items array
+        const selectedKey = this.selectedItems[0];
+        const item = this.items.find(i => i.key === selectedKey);
+        if (!item) {
+            console.error('[FileGrid] Could not find selected item with key:', selectedKey);
+            return;
+        }
+        this.itemToRename = item;
+        this.newItemName = item.name;
+        this.showRenameDialog = true;
+    }
+    /**
+     * Closes the rename dialog
+     */
+    onCancelRename() {
+        this.showRenameDialog = false;
+        this.itemToRename = null;
+        this.newItemName = '';
+    }
+    /**
+     * Renames the selected item after confirmation
+     */
+    async onConfirmRename() {
+        if (!this.account || !this.itemToRename || !this.newItemName.trim()) {
+            return;
+        }
+        // Check if name actually changed
+        if (this.newItemName.trim() === this.itemToRename.name) {
+            this.onCancelRename();
+            return;
+        }
+        this.isRenaming = true;
+        try {
+            // Construct the old and new paths
+            const oldPath = this.constructItemPath(this.itemToRename);
+            // Build the new path by replacing the old name with the new name
+            const pathParts = oldPath.split('/');
+            pathParts[pathParts.length - 1] = this.newItemName.trim();
+            const newPath = pathParts.join('/');
+            console.log('[FileGrid] Renaming item:', { oldPath, newPath });
+            const success = await this.storageClient.MoveObject(this.account.account.ID, oldPath, newPath);
+            console.log('[FileGrid] Rename result:', { success });
+            if (success) {
+                console.log('[FileGrid] Item renamed successfully:', { oldPath, newPath });
+                // Check if we renamed a folder (before clearing itemToRename)
+                const wasFolder = this.itemToRename.type === 'folder';
+                // Close dialog
+                this.showRenameDialog = false;
+                this.itemToRename = null;
+                this.newItemName = '';
+                // Clear selection
+                this.selectedItems = [];
+                // If we renamed a folder, notify parent that folder structure changed
+                if (wasFolder) {
+                    console.log('[FileGrid] Emitting folderStructureChanged event');
+                    this.folderStructureChanged.emit();
+                }
+                // Refresh the file grid
+                console.log('[FileGrid] Calling loadItems() to refresh grid');
+                this.loadItems();
+            }
+            else {
+                console.error('[FileGrid] Rename operation returned false');
+                this.errorMessage = `Failed to rename ${this.itemToRename.type}`;
+            }
+        }
+        catch (error) {
+            console.error('[FileGrid] Error renaming item:', error);
+            const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+            this.errorMessage = `Failed to rename: ${errorMessage}`;
+            // Clear error after 5 seconds
+            setTimeout(() => {
+                if (this.errorMessage?.startsWith('Failed to rename')) {
+                    this.errorMessage = null;
+                }
+            }, 5000);
+        }
+        finally {
+            this.isRenaming = false;
+        }
+    }
+    /**
+     * Downloads the selected file
+     */
+    async onDownloadClick() {
+        if (this.selectedItems.length !== 1) {
+            return;
+        }
+        // Find the selected item
+        const selectedKey = this.selectedItems[0];
+        const item = this.items.find(i => i.key === selectedKey);
+        if (!item) {
+            console.error('[FileGrid] Could not find selected item with key:', selectedKey);
+            return;
+        }
+        // Can only download files, not folders
+        if (item.type === 'folder') {
+            this.errorMessage = 'Cannot download folders. Please select a file.';
+            setTimeout(() => {
+                if (this.errorMessage?.includes('Cannot download folders')) {
+                    this.errorMessage = null;
+                }
+            }, 3000);
+            return;
+        }
+        if (!this.account) {
+            return;
+        }
+        try {
+            const itemPath = this.constructItemPath(item);
+            console.log('[FileGrid] Creating download URL for:', itemPath);
+            const downloadUrl = await this.storageClient.CreatePreAuthDownloadUrl(this.account.account.ID, itemPath);
+            if (downloadUrl) {
+                console.log('[FileGrid] Download URL created, initiating download');
+                // Create a temporary anchor element to trigger download
+                const link = document.createElement('a');
+                link.href = downloadUrl;
+                link.download = item.name;
+                link.style.display = 'none';
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            }
+            else {
+                this.errorMessage = 'Failed to create download URL';
+            }
+        }
+        catch (error) {
+            console.error('[FileGrid] Error downloading file:', error);
+            const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+            this.errorMessage = `Failed to download: ${errorMessage}`;
+            // Clear error after 5 seconds
+            setTimeout(() => {
+                if (this.errorMessage?.startsWith('Failed to download')) {
+                    this.errorMessage = null;
+                }
+            }, 5000);
+        }
+    }
+    /**
+     * Opens the copy dialog for the selected item
+     */
+    onCopyClick() {
+        if (this.selectedItems.length !== 1) {
+            return;
+        }
+        const selectedKey = this.selectedItems[0];
+        const item = this.items.find(i => i.key === selectedKey);
+        if (!item) {
+            console.error('[FileGrid] Could not find selected item with key:', selectedKey);
+            return;
+        }
+        this.itemToCopy = item;
+        this.copyDestinationPath = this.folderPath + item.name + '-copy';
+        this.showCopyDialog = true;
+    }
+    /**
+     * Cancels the copy operation
+     */
+    onCancelCopy() {
+        this.showCopyDialog = false;
+        this.itemToCopy = null;
+        this.copyDestinationPath = '';
+    }
+    /**
+     * Confirms and executes the copy operation
+     */
+    async onConfirmCopy() {
+        if (!this.account || !this.itemToCopy || !this.copyDestinationPath.trim()) {
+            return;
+        }
+        this.isCopying = true;
+        try {
+            const sourcePath = this.constructItemPath(this.itemToCopy);
+            const success = await this.storageClient.CopyObject(this.account.account.ID, sourcePath, this.copyDestinationPath.trim());
+            if (success) {
+                // Close dialog
+                this.showCopyDialog = false;
+                this.itemToCopy = null;
+                this.copyDestinationPath = '';
+                // Clear selection
+                this.selectedItems = [];
+                // Refresh the file grid
+                this.loadItems();
+            }
+            else {
+                this.errorMessage = 'Failed to copy item';
+            }
+        }
+        catch (error) {
+            console.error('[FileGrid] Error copying item:', error);
+            const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+            this.errorMessage = `Failed to copy: ${errorMessage}`;
+            setTimeout(() => {
+                if (this.errorMessage?.startsWith('Failed to copy')) {
+                    this.errorMessage = null;
+                }
+            }, 5000);
+        }
+        finally {
+            this.isCopying = false;
+        }
+    }
+    /**
+     * Opens the move dialog for the selected item
+     */
+    onMoveClick() {
+        if (this.selectedItems.length !== 1) {
+            return;
+        }
+        const selectedKey = this.selectedItems[0];
+        const item = this.items.find(i => i.key === selectedKey);
+        if (!item) {
+            console.error('[FileGrid] Could not find selected item with key:', selectedKey);
+            return;
+        }
+        this.itemToMove = item;
+        // Suggest a different folder path
+        this.moveDestinationPath = this.folderPath;
+        this.showMoveDialog = true;
+    }
+    /**
+     * Cancels the move operation
+     */
+    onCancelMove() {
+        this.showMoveDialog = false;
+        this.itemToMove = null;
+        this.moveDestinationPath = '';
+    }
+    /**
+     * Confirms and executes the move operation
+     */
+    async onConfirmMove() {
+        if (!this.account || !this.itemToMove || !this.moveDestinationPath.trim()) {
+            return;
+        }
+        this.isMoving = true;
+        try {
+            const sourcePath = this.constructItemPath(this.itemToMove);
+            const destPath = this.moveDestinationPath.trim().endsWith('/')
+                ? this.moveDestinationPath.trim() + this.itemToMove.name
+                : this.moveDestinationPath.trim();
+            const success = await this.storageClient.MoveObject(this.account.account.ID, sourcePath, destPath);
+            if (success) {
+                const wasFolder = this.itemToMove.type === 'folder';
+                // Close dialog
+                this.showMoveDialog = false;
+                this.itemToMove = null;
+                this.moveDestinationPath = '';
+                // Clear selection
+                this.selectedItems = [];
+                // If we moved a folder, notify parent that folder structure changed
+                if (wasFolder) {
+                    this.folderStructureChanged.emit();
+                }
+                // Refresh the file grid
+                this.loadItems();
+            }
+            else {
+                this.errorMessage = 'Failed to move item';
+            }
+        }
+        catch (error) {
+            console.error('[FileGrid] Error moving item:', error);
+            const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+            this.errorMessage = `Failed to move: ${errorMessage}`;
+            setTimeout(() => {
+                if (this.errorMessage?.startsWith('Failed to move')) {
+                    this.errorMessage = null;
+                }
+            }, 5000);
+        }
+        finally {
+            this.isMoving = false;
+        }
+    }
+    /**
+     * Constructs the full path for an item
+     */
+    constructItemPath(item) {
+        // Validate that we have either key or name
+        if (!item.key && !item.name) {
+            console.error('[FileGrid] Cannot construct path - item has no key or name:', item);
+            throw new Error('Cannot construct path for item without key or name');
+        }
+        // If item.key exists and is at root level, use it directly
+        if (!this.folderPath || this.folderPath === '/') {
+            return item.key || item.name;
+        }
+        // If the item key already includes the folder path, use it as is
+        if (item.key && item.key.startsWith(this.folderPath)) {
+            return item.key;
+        }
+        // Otherwise, combine folder path with item name
+        const normalizedFolderPath = this.folderPath.endsWith('/')
+            ? this.folderPath.slice(0, -1)
+            : this.folderPath;
+        // Make sure we have a name to use
+        const itemName = item.name || item.key;
+        if (!itemName) {
+            console.error('[FileGrid] Cannot construct path - item has no usable name:', item);
+            throw new Error('Cannot construct path for item without name');
+        }
+        return `${normalizedFolderPath}/${itemName}`;
+    }
+    /**
+     * Gets the currently selected item (if exactly one is selected)
+     */
+    getSelectedItem() {
+        if (this.selectedItems.length !== 1) {
+            return null;
+        }
+        return this.items.find(item => item.key === this.selectedItems[0]) || null;
+    }
+    /**
+     * Opens the copy to account dialog
+     */
+    async onCopyToAccountClick() {
+        const item = this.getSelectedItem();
+        if (!item || item.type === 'folder') {
+            return;
+        }
+        try {
+            const engine = FileStorageEngine.Instance;
+            await engine.Config(false); // Use cached data if available
+            // Build available accounts (excluding current account)
+            this.availableAccounts = engine.AccountsWithProviders
+                .filter(a => a.account.ID !== this.account?.account.ID);
+            if (this.availableAccounts.length === 0) {
+                this.errorMessage = 'No other storage accounts available';
+                setTimeout(() => {
+                    if (this.errorMessage?.includes('No other storage accounts')) {
+                        this.errorMessage = null;
+                    }
+                }, 3000);
+                return;
+            }
+            this.itemToCopyToProvider = item;
+            this.copyToAccountDestinationPath = item.name; // Default to same filename
+            this.selectedDestinationAccounts.clear();
+            this.copyToAccountProgress = null;
+            this.showCopyToProviderDialog = true;
+        }
+        catch (error) {
+            console.error('[FileGrid] Error loading accounts:', error);
+            this.errorMessage = 'Failed to load storage accounts';
+        }
+    }
+    /**
+     * Cancels the copy to account dialog
+     */
+    onCancelCopyToAccount() {
+        this.showCopyToProviderDialog = false;
+        this.itemToCopyToProvider = null;
+        this.selectedDestinationAccounts.clear();
+        this.copyToAccountDestinationPath = '';
+        this.copyToAccountProgress = null;
+    }
+    /**
+     * Toggles selection of a destination account for copying
+     */
+    toggleDestinationAccount(accountId) {
+        if (this.selectedDestinationAccounts.has(accountId)) {
+            this.selectedDestinationAccounts.delete(accountId);
+        }
+        else {
+            this.selectedDestinationAccounts.add(accountId);
+        }
+    }
+    /**
+     * Checks if an account is selected as a destination
+     */
+    isDestinationAccountSelected(accountId) {
+        return this.selectedDestinationAccounts.has(accountId);
+    }
+    /**
+     * Executes the cross-account copy to multiple selected accounts
+     */
+    async onConfirmCopyToAccount() {
+        if (!this.itemToCopyToProvider || this.selectedDestinationAccounts.size === 0 || !this.account) {
+            return;
+        }
+        this.isCopyingToAccount = true;
+        // Get selected accounts
+        const selectedAccounts = this.availableAccounts.filter(a => this.selectedDestinationAccounts.has(a.account.ID));
+        const successfulCopies = [];
+        const failedCopies = [];
+        try {
+            // Construct source path and normalize it
+            const rawSourcePath = this.constructItemPath(this.itemToCopyToProvider);
+            const sourcePath = rawSourcePath.replace(/^\/+|\/+$/g, '').replace(/\/+/g, '/');
+            console.log('[FileGrid] Cross-account copy sourcePath:', { raw: rawSourcePath, normalized: sourcePath });
+            // Copy to each selected account
+            for (let i = 0; i < selectedAccounts.length; i++) {
+                const destAccount = selectedAccounts[i];
+                this.copyToAccountProgress = {
+                    current: i + 1,
+                    total: selectedAccounts.length,
+                    currentAccount: destAccount.account.Name
+                };
+                try {
+                    console.log('[FileGrid] Copying to account:', destAccount.account.Name);
+                    const copyResult = await this.storageClient.CopyObjectBetweenAccounts(this.account.account.ID, destAccount.account.ID, sourcePath, this.copyToAccountDestinationPath);
+                    if (copyResult.success) {
+                        successfulCopies.push(destAccount.account.Name);
+                    }
+                    else {
+                        failedCopies.push({ account: destAccount.account.Name, error: copyResult.message });
+                    }
+                }
+                catch (error) {
+                    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+                    failedCopies.push({ account: destAccount.account.Name, error: errorMessage });
+                }
+            }
+            // Show results
+            if (failedCopies.length === 0) {
+                this.errorMessage = `Successfully copied to ${successfulCopies.length} account${successfulCopies.length > 1 ? 's' : ''}: ${successfulCopies.join(', ')}`;
+            }
+            else if (successfulCopies.length === 0) {
+                this.errorMessage = `Copy failed for all accounts: ${failedCopies.map(f => `${f.account} (${f.error})`).join(', ')}`;
+            }
+            else {
+                this.errorMessage = `Copied to ${successfulCopies.length} account(s). Failed: ${failedCopies.map(f => f.account).join(', ')}`;
+            }
+            setTimeout(() => {
+                if (this.errorMessage?.includes('copied') || this.errorMessage?.includes('Copy failed')) {
+                    this.errorMessage = null;
+                }
+            }, 5000);
+            // Close dialog
+            this.showCopyToProviderDialog = false;
+            this.itemToCopyToProvider = null;
+            this.selectedDestinationAccounts.clear();
+            this.copyToAccountDestinationPath = '';
+            this.copyToAccountProgress = null;
+        }
+        catch (error) {
+            console.error('[FileGrid] Error copying to accounts:', error);
+            const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+            this.errorMessage = `Copy failed: ${errorMessage}`;
+            setTimeout(() => {
+                if (this.errorMessage?.startsWith('Copy failed')) {
+                    this.errorMessage = null;
+                }
+            }, 5000);
+        }
+        finally {
+            this.isCopyingToAccount = false;
+            this.copyToAccountProgress = null;
+        }
+    }
+    // ==========================================
+    // Multi-Account Search Methods
+    // ==========================================
+    /**
+     * Toggles multi-account search mode
+     */
+    toggleMultiAccountSearchMode() {
+        this.isMultiProviderSearchMode = !this.isMultiProviderSearchMode;
+        if (this.isMultiProviderSearchMode) {
+            // Load available accounts if not already loaded
+            if (this.availableAccounts.length === 0) {
+                this.loadAvailableAccountsForSearch();
+            }
+            // Pre-select current account if available
+            if (this.account) {
+                this.selectedSearchProviders.add(this.account.account.ID);
+            }
+        }
+        else {
+            // Clear search results when exiting search mode
+            this.multiProviderSearchResults = null;
+            this.multiProviderSearchQuery = '';
+        }
+    }
+    /**
+     * Loads available accounts for search selection
+     */
+    async loadAvailableAccountsForSearch() {
+        try {
+            const engine = FileStorageEngine.Instance;
+            await engine.Config(false); // Use cached data if available
+            this.availableAccounts = engine.AccountsWithProviders;
+        }
+        catch (error) {
+            console.error('[FileGrid] Error loading accounts for search:', error);
+        }
+    }
+    /**
+     * Toggles account selection for search
+     */
+    toggleSearchAccount(accountID) {
+        if (this.selectedSearchProviders.has(accountID)) {
+            this.selectedSearchProviders.delete(accountID);
+        }
+        else {
+            this.selectedSearchProviders.add(accountID);
+        }
+    }
+    /**
+     * Checks if an account is selected for search
+     */
+    isAccountSelectedForSearch(accountID) {
+        return this.selectedSearchProviders.has(accountID);
+    }
+    /**
+     * Checks if an account's provider supports search
+     */
+    accountSupportsSearch(accountWithProvider) {
+        return accountWithProvider.provider.SupportsSearch === true;
+    }
+    /**
+     * Executes multi-account search
+     */
+    async executeMultiAccountSearch() {
+        if (!this.multiProviderSearchQuery.trim() || this.selectedSearchProviders.size === 0) {
+            return;
+        }
+        this.isSearching = true;
+        this.multiProviderSearchResults = null;
+        try {
+            console.log('[FileGrid] Executing multi-account search:', {
+                accountIds: Array.from(this.selectedSearchProviders),
+                query: this.multiProviderSearchQuery
+            });
+            const searchResult = await this.storageClient.SearchFiles(Array.from(this.selectedSearchProviders), this.multiProviderSearchQuery, { maxResultsPerAccount: 50 });
+            console.log('[FileGrid] Multi-account search result:', searchResult);
+            // Map the client result to the component's expected format
+            this.multiProviderSearchResults = {
+                accountResults: searchResult.accountResults.map((ar) => ({
+                    accountID: ar.accountId,
+                    accountName: ar.accountName,
+                    success: ar.success,
+                    errorMessage: ar.errorMessage,
+                    results: ar.results.map((r) => ({
+                        path: r.path,
+                        name: r.name,
+                        size: r.size,
+                        contentType: r.contentType,
+                        lastModified: r.lastModified.toISOString(),
+                        relevance: r.relevance,
+                        excerpt: r.excerpt,
+                        matchInFilename: r.matchInFilename,
+                        objectId: r.objectId
+                    })),
+                    totalMatches: ar.totalMatches,
+                    hasMore: ar.hasMore,
+                    nextPageToken: ar.nextPageToken
+                })),
+                totalResultsReturned: searchResult.totalResultsReturned,
+                successfulAccounts: searchResult.successfulAccounts,
+                failedAccounts: searchResult.failedAccounts
+            };
+        }
+        catch (error) {
+            console.error('[FileGrid] Error executing multi-provider search:', error);
+            this.errorMessage = 'Search failed. Please try again.';
+            setTimeout(() => {
+                if (this.errorMessage === 'Search failed. Please try again.') {
+                    this.errorMessage = null;
+                }
+            }, 5000);
+        }
+        finally {
+            this.isSearching = false;
+        }
+    }
+    /**
+     * Clears multi-provider search results
+     */
+    clearMultiProviderSearch() {
+        this.multiProviderSearchQuery = '';
+        this.multiProviderSearchResults = null;
+    }
+    /**
+     * Gets icon for a search result based on content type
+     */
+    getSearchResultIcon(result) {
+        const extension = result.name.split('.').pop()?.toLowerCase() || '';
+        if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg'].includes(extension)) {
+            return 'fa-solid fa-file-image';
+        }
+        else if (['pdf'].includes(extension)) {
+            return 'fa-solid fa-file-pdf';
+        }
+        else if (['doc', 'docx'].includes(extension)) {
+            return 'fa-solid fa-file-word';
+        }
+        else if (['xls', 'xlsx'].includes(extension)) {
+            return 'fa-solid fa-file-excel';
+        }
+        else if (['ppt', 'pptx'].includes(extension)) {
+            return 'fa-solid fa-file-powerpoint';
+        }
+        else if (['zip', 'rar', '7z', 'tar', 'gz'].includes(extension)) {
+            return 'fa-solid fa-file-zipper';
+        }
+        else if (['mp4', 'avi', 'mov', 'wmv'].includes(extension)) {
+            return 'fa-solid fa-file-video';
+        }
+        else if (['mp3', 'wav', 'ogg', 'flac'].includes(extension)) {
+            return 'fa-solid fa-file-audio';
+        }
+        else {
+            return 'fa-solid fa-file';
+        }
+    }
+    /**
+     * Formats file size for search results
+     */
+    formatSearchResultSize(bytes) {
+        return this.formatFileSize(bytes);
+    }
+    /**
+     * Formats date for search results
+     */
+    formatSearchResultDate(dateStr) {
+        return new Date(dateStr).toLocaleString();
+    }
+    static ɵfac = function FileGridComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FileGridComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FileGridComponent, selectors: [["mj-file-grid"]], inputs: { account: "account", folderPath: "folderPath" }, outputs: { folderNavigate: "folderNavigate", folderStructureChanged: "folderStructureChanged" }, features: [i0.ɵɵNgOnChangesFeature], decls: 17, vars: 16, consts: [[1, "file-grid-container", 3, "dragenter", "dragover", "dragleave", "drop"], ["class", "breadcrumb-bar", 4, "ngIf"], ["class", "multi-provider-search-panel", 4, "ngIf"], ["class", "loading-state", 4, "ngIf"], ["class", "error-state", 4, "ngIf"], ["class", "file-table-wrapper", 4, "ngIf"], ["class", "file-grid-wrapper", 4, "ngIf"], ["class", "empty-state", 4, "ngIf"], ["class", "bottom-toolbar", 4, "ngIf"], ["class", "drag-overlay", 4, "ngIf"], ["class", "upload-progress", 4, "ngIf"], ["class", "modal-overlay", 3, "click", 4, "ngIf"], [1, "breadcrumb-bar"], [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"], ["class", "search-clear-btn", "title", "Clear search", 3, "click", 4, "ngIf"], [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, "multi-provider-search-panel"], [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"], ["class", "fa-solid fa-spinner fa-spin", 4, "ngIf"], ["class", "fa-solid fa-search", 4, "ngIf"], [1, "provider-selection"], [1, "provider-selection-label"], [1, "provider-checkboxes"], ["class", "provider-checkbox", 3, "disabled", "title", 4, "ngFor", "ngForOf"], ["class", "search-results-container", 4, "ngIf"], ["class", "searching-state", 4, "ngIf"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-search"], [1, "provider-checkbox", 3, "title"], ["type", "checkbox", 3, "change", "checked", "disabled"], [1, "provider-name"], [1, "provider-type"], ["class", "no-search-badge", 4, "ngIf"], [1, "no-search-badge"], [1, "search-results-container"], [1, "search-results-summary"], [1, "result-count"], [1, "provider-stats"], ["class", "failed-count", 4, "ngIf"], [1, "clear-results-btn", 3, "click"], [1, "provider-results-list"], ["class", "provider-result-group", 3, "failed", 4, "ngFor", "ngForOf"], [1, "failed-count"], [1, "provider-result-group"], [1, "provider-result-header"], [1, "fa-solid", "fa-cloud"], ["class", "result-count", 4, "ngIf"], ["class", "error-badge", 4, "ngIf"], ["class", "provider-result-files", 4, "ngIf"], ["class", "no-results-message", 4, "ngIf"], [1, "error-badge"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "provider-result-files"], ["class", "search-result-item", 4, "ngFor", "ngForOf"], [1, "search-result-item"], [1, "file-icon"], [1, "file-info"], [1, "file-name"], [1, "file-path"], [1, "file-size"], [1, "file-date"], [1, "no-results-message"], [1, "searching-state"], ["text", "Searching across providers..."], [1, "loading-state"], ["text", "Loading files..."], [1, "error-state"], [1, "error-icon"], [1, "fa-solid", "fa-circle-exclamation"], [1, "error-message"], [1, "retry-btn", 3, "click"], [1, "file-table-wrapper"], [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"], ["class", "file-row", 3, "selected", "click", "dblclick", 4, "ngFor", "ngForOf"], [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-wrapper"], [1, "file-grid"], ["class", "grid-item", 3, "selected", "click", "dblclick", 4, "ngFor", "ngForOf"], [1, "grid-item", 3, "click", "dblclick"], [1, "grid-icon"], [1, "grid-name"], ["class", "grid-meta", 4, "ngIf"], [1, "grid-meta"], [1, "empty-state"], [1, "empty-icon"], [1, "fa-solid", "fa-folder-open"], [1, "empty-message"], [1, "upload-btn", 3, "click"], [1, "fa-solid", "fa-upload"], [1, "bottom-toolbar"], [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-overlay"], [1, "drag-content"], [1, "drag-icon"], [1, "drag-title"], [1, "upload-progress"], [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"], ["class", "warning", 4, "ngIf"], [1, "danger", 3, "click", "disabled"], [1, "warning"], ["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", "#666", "margin-top", "8px"], [2, "font-size", "12px", "color", "#666", "margin-bottom", "16px"], [1, "account-checkbox-list"], ["class", "account-checkbox-item", 4, "ngFor", "ngForOf"], [2, "margin-top", "16px"], ["type", "text", "placeholder", "Enter destination filename", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], ["class", "copy-progress", 4, "ngIf"], [1, "account-checkbox-item"], ["type", "checkbox", 3, "change", "id", "checked", "disabled"], [3, "for"], [1, "provider-badge"], [1, "copy-progress"]], template: function FileGridComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            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); });
+            i0.ɵɵtemplate(1, FileGridComponent_div_1_Template, 22, 9, "div", 1)(2, FileGridComponent_div_2_Template, 21, 9, "div", 2)(3, FileGridComponent_div_3_Template, 2, 0, "div", 3)(4, FileGridComponent_div_4_Template, 8, 1, "div", 4)(5, FileGridComponent_div_5_Template, 20, 19, "div", 5)(6, FileGridComponent_div_6_Template, 3, 1, "div", 6)(7, FileGridComponent_div_7_Template, 8, 0, "div", 7)(8, FileGridComponent_div_8_Template, 34, 12, "div", 8)(9, FileGridComponent_div_9_Template, 6, 0, "div", 9)(10, FileGridComponent_div_10_Template, 10, 4, "div", 10);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(11, FileGridComponent_div_11_Template, 17, 6, "div", 11)(12, FileGridComponent_div_12_Template, 20, 7, "div", 11)(13, FileGridComponent_div_13_Template, 17, 7, "div", 11)(14, FileGridComponent_div_14_Template, 21, 8, "div", 11)(15, FileGridComponent_div_15_Template, 23, 10, "div", 11)(16, FileGridComponent_div_16_Template, 30, 10, "div", 11);
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", !ctx.isLoading && !ctx.errorMessage);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.isMultiProviderSearchMode);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.isLoading && !ctx.isMultiProviderSearchMode);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.errorMessage && !ctx.isLoading);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", !ctx.isLoading && !ctx.errorMessage && ctx.filteredItems.length > 0 && ctx.viewMode === "list");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", !ctx.isLoading && !ctx.errorMessage && ctx.filteredItems.length > 0 && ctx.viewMode === "grid");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", !ctx.isLoading && !ctx.errorMessage && ctx.filteredItems.length === 0);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", !ctx.isLoading && !ctx.errorMessage);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.isDragging);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.isUploading);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.showNewFolderDialog);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.showDeleteDialog && ctx.itemToDelete);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.showRenameDialog && ctx.itemToRename);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.showCopyDialog && ctx.itemToCopy);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.showMoveDialog && ctx.itemToMove);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.showCopyToProviderDialog && ctx.itemToCopyToProvider);
+        } }, dependencies: [i1.NgForOf, i1.NgIf, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.LoadingComponent, i4.LabelDirective], styles: ["\n\n\n\n\n[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background-color: #fff;\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: #f8f8f8;\n  border-bottom: 1px solid #ccc;\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: #fff;\n  border: 1px solid #ccc;\n  padding: 4px 8px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  color: #333;\n  transition: background-color 0.15s;\n}\n\n.nav-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: #e8e8e8;\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: #333;\n}\n\n.breadcrumb-path[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #666;\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 #ccc;\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: #007AFF;\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: #999;\n  padding: 4px;\n  font-size: 12px;\n}\n\n.search-clear-btn[_ngcontent-%COMP%]:hover {\n  color: #333;\n}\n\n.file-type-filter[_ngcontent-%COMP%] {\n  padding: 4px 8px;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 12px;\n  font-family: inherit;\n  background: #fff;\n  cursor: pointer;\n}\n\n.file-type-filter[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #007AFF;\n}\n\n\n\n\n\n\n.file-table-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  border-bottom: 1px solid #ccc;\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: #f0f0f0;\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 #ccc;\n  font-weight: 600;\n  color: #333;\n  cursor: pointer;\n  user-select: none;\n}\n\n.file-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:hover {\n  background-color: #e8e8e8;\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: #666;\n}\n\n.file-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n  border-bottom: 1px solid #e8e8e8;\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: #f8f8f8;\n}\n\n.file-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.selected[_ngcontent-%COMP%] {\n  background-color: #cce8ff;\n}\n\n.file-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.selected[_ngcontent-%COMP%]:hover {\n  background-color: #b3d9ff;\n}\n\n.file-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 6px 10px;\n  color: #333;\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: #666;\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: #FFB84D;\n}\n\n\n\n.fa-file-pdf[_ngcontent-%COMP%] {\n  color: #D32F2F;\n}\n\n.fa-file-word[_ngcontent-%COMP%] {\n  color: #2B579A;\n}\n\n.fa-file-excel[_ngcontent-%COMP%] {\n  color: #217346;\n}\n\n.fa-file-image[_ngcontent-%COMP%] {\n  color: #673AB7;\n}\n\n.fa-file-video[_ngcontent-%COMP%] {\n  color: #F57C00;\n}\n\n.fa-file-audio[_ngcontent-%COMP%] {\n  color: #D32F2F;\n}\n\n.fa-file-archive[_ngcontent-%COMP%] {\n  color: #795548;\n}\n\n.fa-file-code[_ngcontent-%COMP%] {\n  color: #388E3C;\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 #ccc;\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 #e8e8e8;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.15s;\n  background: #fff;\n}\n\n.grid-item[_ngcontent-%COMP%]:hover {\n  background-color: #f8f8f8;\n  border-color: #ccc;\n}\n\n.grid-item.selected[_ngcontent-%COMP%] {\n  background-color: #cce8ff;\n  border-color: #007AFF;\n}\n\n.grid-icon[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 8px;\n  color: #666;\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: #333;\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: #666;\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: #f8f8f8;\n  border-top: 1px solid #ccc;\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: #fff;\n  border: 1px solid #ccc;\n  padding: 5px 12px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  color: #333;\n  transition: background-color 0.15s;\n}\n\n.toolbar-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: #e8e8e8;\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 #ccc;\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.view-btn[_ngcontent-%COMP%] {\n  background: #fff;\n  border: none;\n  border-right: 1px solid #ccc;\n  padding: 4px 10px;\n  cursor: pointer;\n  font-size: 12px;\n  color: #666;\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: #f0f0f0;\n  color: #333;\n}\n\n.view-btn.active[_ngcontent-%COMP%] {\n  background-color: #007AFF;\n  color: #fff;\n}\n\n.item-count[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: #666;\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: #999;\n  margin-bottom: 16px;\n}\n\n.error-message[_ngcontent-%COMP%], \n.empty-message[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #666;\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: #fff;\n  border: 1px solid #ccc;\n  padding: 8px 16px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 13px;\n  color: #333;\n  transition: background-color 0.15s;\n}\n\n.retry-btn[_ngcontent-%COMP%]:hover, \n.upload-btn[_ngcontent-%COMP%]:hover {\n  background-color: #f0f0f0;\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: rgba(255, 255, 255, 0.95);\n  z-index: 1000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 3px dashed #007AFF;\n}\n\n.drag-content[_ngcontent-%COMP%] {\n  text-align: center;\n}\n\n.drag-icon[_ngcontent-%COMP%] {\n  font-size: 64px;\n  color: #007AFF;\n  margin-bottom: 16px;\n}\n\n.drag-title[_ngcontent-%COMP%] {\n  font-size: 20px;\n  font-weight: 600;\n  color: #007AFF;\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: #fff;\n  border: 1px solid #ccc;\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: #333;\n}\n\n.progress-bar-wrap[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 6px;\n  background-color: #e0e0e0;\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.progress-bar[_ngcontent-%COMP%] {\n  height: 100%;\n  background-color: #007AFF;\n  transition: width 0.3s ease;\n}\n\n.progress-percent[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #666;\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: #fff;\n  border: 1px solid #999;\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: #f8f8f8;\n  border-bottom: 1px solid #ccc;\n}\n\n.modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n}\n\n.modal-close[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 16px;\n  color: #666;\n  padding: 4px;\n}\n\n.modal-close[_ngcontent-%COMP%]:hover {\n  color: #333;\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: #333;\n}\n\n.modal-body[_ngcontent-%COMP%]   input[type=\"text\"][_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 6px 10px;\n  border: 1px solid #ccc;\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: #007AFF;\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 #ccc;\n  border-radius: 3px;\n  font-size: 13px;\n  font-family: inherit;\n  background-color: #fff;\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: #007AFF;\n}\n\n.modal-body[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:disabled, \n.modal-body[_ngcontent-%COMP%]   .provider-select[_ngcontent-%COMP%]:disabled {\n  background-color: #f5f5f5;\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: #333;\n}\n\n.modal-body[_ngcontent-%COMP%]   .warning[_ngcontent-%COMP%] {\n  color: #D32F2F;\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 #ccc;\n  border-radius: 4px;\n  padding: 8px;\n  background: #fafafa;\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: #e8f4fd;\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: #007AFF;\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: #666;\n  background: #e0e0e0;\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: #e8f4fd;\n  border-radius: 4px;\n  font-size: 12px;\n  color: #0066cc;\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: #f8f8f8;\n  border-top: 1px solid #ccc;\n}\n\n.modal-footer[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 6px 16px;\n  border: 1px solid #ccc;\n  background: #fff;\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: #f0f0f0;\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: #D32F2F;\n  color: #fff;\n  border-color: #D32F2F;\n}\n\n.modal-footer[_ngcontent-%COMP%]   button.danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: #B71C1C;\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: #f0f0f0;\n}\n\n.file-table-wrapper[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: #c0c0c0;\n  border: 2px solid #f0f0f0;\n}\n\n.file-table-wrapper[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: #a0a0a0;\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: #fff;\n  border: 1px solid #ccc;\n  padding: 4px 8px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  color: #666;\n  transition: all 0.15s;\n}\n\n.multi-search-btn[_ngcontent-%COMP%]:hover {\n  background-color: #e8e8e8;\n  color: #333;\n}\n\n.multi-search-btn.active[_ngcontent-%COMP%] {\n  background-color: #007AFF;\n  color: #fff;\n  border-color: #007AFF;\n}\n\n.multi-provider-search-panel[_ngcontent-%COMP%] {\n  background: #fff;\n  border-bottom: 1px solid #ccc;\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: #f0f7ff;\n  border-bottom: 1px solid #cce8ff;\n}\n\n.search-panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #007AFF;\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: #666;\n  padding: 4px;\n}\n\n.close-panel-btn[_ngcontent-%COMP%]:hover {\n  color: #333;\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 #ccc;\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: #007AFF;\n}\n\n.search-execute-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: #007AFF;\n  color: #fff;\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: #0056b3;\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: #333;\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: #333;\n  cursor: pointer;\n  padding: 4px 8px;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  background: #fafafa;\n  transition: all 0.15s;\n}\n\n.provider-checkbox[_ngcontent-%COMP%]:hover:not(.disabled) {\n  border-color: #007AFF;\n  background: #f0f7ff;\n}\n\n.provider-checkbox.disabled[_ngcontent-%COMP%] {\n  opacity: 0.6;\n  cursor: not-allowed;\n  background: #f5f5f5;\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: #999;\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 #e0e0e0;\n}\n\n.search-results-summary[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 16px;\n  background: #f8f8f8;\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.search-results-summary[_ngcontent-%COMP%]   .result-count[_ngcontent-%COMP%] {\n  font-weight: 600;\n  font-size: 13px;\n  color: #333;\n}\n\n.search-results-summary[_ngcontent-%COMP%]   .provider-stats[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #666;\n}\n\n.search-results-summary[_ngcontent-%COMP%]   .failed-count[_ngcontent-%COMP%] {\n  color: #D32F2F;\n}\n\n.clear-results-btn[_ngcontent-%COMP%] {\n  margin-left: auto;\n  background: none;\n  border: 1px solid #ccc;\n  padding: 4px 10px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 11px;\n  color: #666;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.clear-results-btn[_ngcontent-%COMP%]:hover {\n  background: #f0f0f0;\n  color: #333;\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: #f5f5f5;\n  font-size: 13px;\n  font-weight: 600;\n  color: #333;\n}\n\n.provider-result-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #007AFF;\n}\n\n.provider-result-header[_ngcontent-%COMP%]   .result-count[_ngcontent-%COMP%] {\n  font-weight: normal;\n  color: #666;\n}\n\n.provider-result-group.failed[_ngcontent-%COMP%]   .provider-result-header[_ngcontent-%COMP%] {\n  background: #fff5f5;\n}\n\n.provider-result-group.failed[_ngcontent-%COMP%]   .provider-result-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #D32F2F;\n}\n\n.error-badge[_ngcontent-%COMP%] {\n  color: #D32F2F;\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 #f0f0f0;\n  cursor: pointer;\n  transition: background-color 0.1s;\n}\n\n.search-result-item[_ngcontent-%COMP%]:hover {\n  background-color: #f8f8f8;\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: #666;\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: #333;\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: #999;\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: #666;\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: #666;\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: #999;\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}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FileGridComponent, [{
+        type: Component,
+        args: [{ 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  <div class=\"breadcrumb-bar\" *ngIf=\"!isLoading && !errorMessage\">\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      <button class=\"search-clear-btn\"\n              *ngIf=\"searchQuery && !isMultiProviderSearchMode\"\n              (click)=\"clearSearch()\"\n              title=\"Clear search\">\n        <i class=\"fa-solid fa-xmark\"></i>\n      </button>\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  <!-- Multi-Provider Search Panel -->\n  <div class=\"multi-provider-search-panel\" *ngIf=\"isMultiProviderSearchMode\">\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\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          <i class=\"fa-solid fa-spinner fa-spin\" *ngIf=\"isSearching\"></i>\n          <i class=\"fa-solid fa-search\" *ngIf=\"!isSearching\"></i>\n          {{ isSearching ? 'Searching...' : 'Search' }}\n        </button>\n      </div>\n\n      <div class=\"provider-selection\">\n        <label class=\"provider-selection-label\">Select accounts to search:</label>\n        <div class=\"provider-checkboxes\">\n          <label *ngFor=\"let a of availableAccounts\"\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            <span class=\"no-search-badge\" *ngIf=\"!accountSupportsSearch(a)\">(no search)</span>\n          </label>\n        </div>\n      </div>\n    </div>\n\n    <!-- Search Results -->\n    <div class=\"search-results-container\" *ngIf=\"multiProviderSearchResults\">\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          <span *ngIf=\"multiProviderSearchResults.failedAccounts > 0\" class=\"failed-count\">\n            , {{ multiProviderSearchResults.failedAccounts }} failed\n          </span>)\n        </span>\n        <button class=\"clear-results-btn\" (click)=\"clearMultiProviderSearch()\">\n          <i class=\"fa-solid fa-xmark\"></i> Clear\n        </button>\n      </div>\n\n      <div class=\"provider-results-list\">\n        <div *ngFor=\"let accountResult of multiProviderSearchResults.accountResults\"\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            <span class=\"result-count\" *ngIf=\"accountResult.success\">\n              ({{ accountResult.results.length }} result(s))\n            </span>\n            <span class=\"error-badge\" *ngIf=\"!accountResult.success\">\n              <i class=\"fa-solid fa-exclamation-triangle\"></i>\n              {{ accountResult.errorMessage }}\n            </span>\n          </div>\n\n          <div class=\"provider-result-files\" *ngIf=\"accountResult.success && accountResult.results.length > 0\">\n            <div *ngFor=\"let file of accountResult.results\" 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          </div>\n\n          <div class=\"no-results-message\" *ngIf=\"accountResult.success && accountResult.results.length === 0\">\n            No matching files found\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Searching State -->\n    <div class=\"searching-state\" *ngIf=\"isSearching\">\n      <mj-loading text=\"Searching across providers...\"></mj-loading>\n    </div>\n  </div>\n\n  <!-- Loading State -->\n  <div class=\"loading-state\" *ngIf=\"isLoading && !isMultiProviderSearchMode\">\n    <mj-loading text=\"Loading files...\"></mj-loading>\n  </div>\n\n  <!-- Error State -->\n  <div class=\"error-state\" *ngIf=\"errorMessage && !isLoading\">\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  <!-- List View -->\n  <div class=\"file-table-wrapper\" *ngIf=\"!isLoading && !errorMessage && filteredItems.length > 0 && viewMode === 'list'\">\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        <tr *ngFor=\"let item of filteredItems\"\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      </tbody>\n    </table>\n  </div>\n\n  <!-- Grid View -->\n  <div class=\"file-grid-wrapper\" *ngIf=\"!isLoading && !errorMessage && filteredItems.length > 0 && viewMode === 'grid'\">\n    <div class=\"file-grid\">\n      <div *ngFor=\"let item of filteredItems\"\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        <div class=\"grid-meta\" *ngIf=\"item.type === 'file'\">{{ formatFileSize(item.size) }}</div>\n        <div class=\"grid-meta\" *ngIf=\"item.type === 'folder'\">Folder</div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Empty State -->\n  <div class=\"empty-state\" *ngIf=\"!isLoading && !errorMessage && filteredItems.length === 0\">\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  <!-- Bottom Toolbar -->\n  <div class=\"bottom-toolbar\" *ngIf=\"!isLoading && !errorMessage\">\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  <!-- Drag & Drop Overlay -->\n  <div class=\"drag-overlay\" *ngIf=\"isDragging\">\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  <!-- Upload Progress -->\n  <div class=\"upload-progress\" *ngIf=\"isUploading\">\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</div>\n\n<!-- New Folder Modal -->\n<div class=\"modal-overlay\" *ngIf=\"showNewFolderDialog\" (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        <i class=\"fa-solid fa-spinner fa-spin\" *ngIf=\"isCreatingFolder\"></i>\n        {{ isCreatingFolder ? 'Creating...' : 'Create' }}\n      </button>\n    </div>\n  </div>\n</div>\n\n<!-- Delete Confirmation Modal -->\n<div class=\"modal-overlay\" *ngIf=\"showDeleteDialog && itemToDelete\" (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      <p *ngIf=\"itemToDelete.type === 'folder'\" class=\"warning\">This will delete the folder and all its contents.</p>\n    </div>\n    <div class=\"modal-footer\">\n      <button (click)=\"onCancelDelete()\" [disabled]=\"isDeleting\">Cancel</button>\n      <button (click)=\"onConfirmDelete()\" [disabled]=\"isDeleting\" class=\"danger\">\n        <i class=\"fa-solid fa-spinner fa-spin\" *ngIf=\"isDeleting\"></i>\n        {{ isDeleting ? 'Deleting...' : 'Delete' }}\n      </button>\n    </div>\n  </div>\n</div>\n\n<!-- Rename Modal -->\n<div class=\"modal-overlay\" *ngIf=\"showRenameDialog && itemToRename\" (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        <i class=\"fa-solid fa-spinner fa-spin\" *ngIf=\"isRenaming\"></i>\n        {{ isRenaming ? 'Renaming...' : 'Rename' }}\n      </button>\n    </div>\n  </div>\n</div>\n\n<!-- Copy Modal -->\n<div class=\"modal-overlay\" *ngIf=\"showCopyDialog && itemToCopy\" (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        <i class=\"fa-solid fa-spinner fa-spin\" *ngIf=\"isCopying\"></i>\n        {{ isCopying ? 'Copying...' : 'Copy' }}\n      </button>\n    </div>\n  </div>\n</div>\n\n<!-- Move Modal -->\n<div class=\"modal-overlay\" *ngIf=\"showMoveDialog && itemToMove\" (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: #666; 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        <i class=\"fa-solid fa-spinner fa-spin\" *ngIf=\"isMoving\"></i>\n        {{ isMoving ? 'Moving...' : 'Move' }}\n      </button>\n    </div>\n  </div>\n</div>\n\n<!-- Copy to Account Modal -->\n<div class=\"modal-overlay\" *ngIf=\"showCopyToProviderDialog && itemToCopyToProvider\" (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: #666; margin-bottom: 16px;\">\n        From: <strong>{{ account?.account?.Name }}</strong>\n      </p>\n\n      <label>Select destination account(s):</label>\n      <div class=\"account-checkbox-list\">\n        <div *ngFor=\"let a of availableAccounts\" 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      </div>\n\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      <div *ngIf=\"copyToAccountProgress\" 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    </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        <i class=\"fa-solid fa-spinner fa-spin\" *ngIf=\"isCopyingToAccount\"></i>\n        {{ isCopyingToAccount ? 'Copying...' : 'Copy to ' + selectedDestinationAccounts.size + ' account' + (selectedDestinationAccounts.size !== 1 ? 's' : '') }}\n      </button>\n    </div>\n  </div>\n</div>\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: #fff;\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: #f8f8f8;\n  border-bottom: 1px solid #ccc;\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: #fff;\n  border: 1px solid #ccc;\n  padding: 4px 8px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  color: #333;\n  transition: background-color 0.15s;\n}\n\n.nav-btn:hover:not(:disabled) {\n  background-color: #e8e8e8;\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: #333;\n}\n\n.breadcrumb-path i {\n  color: #666;\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 #ccc;\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: #007AFF;\n}\n\n.search-clear-btn {\n  position: absolute;\n  right: 142px;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #999;\n  padding: 4px;\n  font-size: 12px;\n}\n\n.search-clear-btn:hover {\n  color: #333;\n}\n\n.file-type-filter {\n  padding: 4px 8px;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 12px;\n  font-family: inherit;\n  background: #fff;\n  cursor: pointer;\n}\n\n.file-type-filter:focus {\n  outline: none;\n  border-color: #007AFF;\n}\n\n/* ===========================\n   File Table\n   =========================== */\n\n.file-table-wrapper {\n  flex: 1;\n  overflow: auto;\n  border-bottom: 1px solid #ccc;\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: #f0f0f0;\n  z-index: 10;\n}\n\n.file-table th {\n  text-align: left;\n  padding: 6px 10px;\n  border-bottom: 1px solid #ccc;\n  font-weight: 600;\n  color: #333;\n  cursor: pointer;\n  user-select: none;\n}\n\n.file-table th:hover {\n  background-color: #e8e8e8;\n}\n\n.file-table th span {\n  margin-right: 4px;\n}\n\n.sort-icon {\n  font-size: 10px;\n  color: #666;\n}\n\n.file-table tbody tr {\n  border-bottom: 1px solid #e8e8e8;\n  cursor: pointer;\n  transition: background-color 0.1s;\n}\n\n.file-table tbody tr:hover {\n  background-color: #f8f8f8;\n}\n\n.file-table tbody tr.selected {\n  background-color: #cce8ff;\n}\n\n.file-table tbody tr.selected:hover {\n  background-color: #b3d9ff;\n}\n\n.file-table td {\n  padding: 6px 10px;\n  color: #333;\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: #666;\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: #FFB84D;\n}\n\n/* File Type Icons */\n.fa-file-pdf {\n  color: #D32F2F;\n}\n\n.fa-file-word {\n  color: #2B579A;\n}\n\n.fa-file-excel {\n  color: #217346;\n}\n\n.fa-file-image {\n  color: #673AB7;\n}\n\n.fa-file-video {\n  color: #F57C00;\n}\n\n.fa-file-audio {\n  color: #D32F2F;\n}\n\n.fa-file-archive {\n  color: #795548;\n}\n\n.fa-file-code {\n  color: #388E3C;\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 #ccc;\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 #e8e8e8;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.15s;\n  background: #fff;\n}\n\n.grid-item:hover {\n  background-color: #f8f8f8;\n  border-color: #ccc;\n}\n\n.grid-item.selected {\n  background-color: #cce8ff;\n  border-color: #007AFF;\n}\n\n.grid-icon {\n  font-size: 48px;\n  margin-bottom: 8px;\n  color: #666;\n}\n\n.grid-icon i {\n  display: block;\n}\n\n.grid-name {\n  font-size: 12px;\n  color: #333;\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: #666;\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: #f8f8f8;\n  border-top: 1px solid #ccc;\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: #fff;\n  border: 1px solid #ccc;\n  padding: 5px 12px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  color: #333;\n  transition: background-color 0.15s;\n}\n\n.toolbar-btn:hover:not(:disabled) {\n  background-color: #e8e8e8;\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 #ccc;\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.view-btn {\n  background: #fff;\n  border: none;\n  border-right: 1px solid #ccc;\n  padding: 4px 10px;\n  cursor: pointer;\n  font-size: 12px;\n  color: #666;\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: #f0f0f0;\n  color: #333;\n}\n\n.view-btn.active {\n  background-color: #007AFF;\n  color: #fff;\n}\n\n.item-count {\n  font-size: 11px;\n  color: #666;\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: #999;\n  margin-bottom: 16px;\n}\n\n.error-message,\n.empty-message {\n  font-size: 14px;\n  color: #666;\n  margin-bottom: 16px;\n}\n\n.retry-btn,\n.upload-btn {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  background: #fff;\n  border: 1px solid #ccc;\n  padding: 8px 16px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 13px;\n  color: #333;\n  transition: background-color 0.15s;\n}\n\n.retry-btn:hover,\n.upload-btn:hover {\n  background-color: #f0f0f0;\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: rgba(255, 255, 255, 0.95);\n  z-index: 1000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 3px dashed #007AFF;\n}\n\n.drag-content {\n  text-align: center;\n}\n\n.drag-icon {\n  font-size: 64px;\n  color: #007AFF;\n  margin-bottom: 16px;\n}\n\n.drag-title {\n  font-size: 20px;\n  font-weight: 600;\n  color: #007AFF;\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: #fff;\n  border: 1px solid #ccc;\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: #333;\n}\n\n.progress-bar-wrap {\n  width: 100%;\n  height: 6px;\n  background-color: #e0e0e0;\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.progress-bar {\n  height: 100%;\n  background-color: #007AFF;\n  transition: width 0.3s ease;\n}\n\n.progress-percent {\n  font-size: 12px;\n  color: #666;\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: #fff;\n  border: 1px solid #999;\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: #f8f8f8;\n  border-bottom: 1px solid #ccc;\n}\n\n.modal-header h3 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n}\n\n.modal-close {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 16px;\n  color: #666;\n  padding: 4px;\n}\n\n.modal-close:hover {\n  color: #333;\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: #333;\n}\n\n.modal-body input[type=\"text\"] {\n  width: 100%;\n  padding: 6px 10px;\n  border: 1px solid #ccc;\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: #007AFF;\n}\n\n.modal-body select,\n.modal-body .provider-select {\n  width: 100%;\n  padding: 6px 10px;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 13px;\n  font-family: inherit;\n  background-color: #fff;\n  cursor: pointer;\n}\n\n.modal-body select:focus,\n.modal-body .provider-select:focus {\n  outline: none;\n  border-color: #007AFF;\n}\n\n.modal-body select:disabled,\n.modal-body .provider-select:disabled {\n  background-color: #f5f5f5;\n  cursor: not-allowed;\n}\n\n.modal-body p {\n  margin: 0 0 12px 0;\n  font-size: 13px;\n  color: #333;\n}\n\n.modal-body .warning {\n  color: #D32F2F;\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 #ccc;\n  border-radius: 4px;\n  padding: 8px;\n  background: #fafafa;\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: #e8f4fd;\n}\n\n.account-checkbox-item input[type=\"checkbox\"] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  accent-color: #007AFF;\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: #666;\n  background: #e0e0e0;\n  padding: 2px 6px;\n  border-radius: 10px;\n}\n\n.copy-progress {\n  margin-top: 12px;\n  padding: 8px 12px;\n  background: #e8f4fd;\n  border-radius: 4px;\n  font-size: 12px;\n  color: #0066cc;\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: #f8f8f8;\n  border-top: 1px solid #ccc;\n}\n\n.modal-footer button {\n  padding: 6px 16px;\n  border: 1px solid #ccc;\n  background: #fff;\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: #f0f0f0;\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: #D32F2F;\n  color: #fff;\n  border-color: #D32F2F;\n}\n\n.modal-footer button.danger:hover:not(:disabled) {\n  background-color: #B71C1C;\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: #f0f0f0;\n}\n\n.file-table-wrapper::-webkit-scrollbar-thumb {\n  background: #c0c0c0;\n  border: 2px solid #f0f0f0;\n}\n\n.file-table-wrapper::-webkit-scrollbar-thumb:hover {\n  background: #a0a0a0;\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: #fff;\n  border: 1px solid #ccc;\n  padding: 4px 8px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  color: #666;\n  transition: all 0.15s;\n}\n\n.multi-search-btn:hover {\n  background-color: #e8e8e8;\n  color: #333;\n}\n\n.multi-search-btn.active {\n  background-color: #007AFF;\n  color: #fff;\n  border-color: #007AFF;\n}\n\n.multi-provider-search-panel {\n  background: #fff;\n  border-bottom: 1px solid #ccc;\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: #f0f7ff;\n  border-bottom: 1px solid #cce8ff;\n}\n\n.search-panel-header h3 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #007AFF;\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: #666;\n  padding: 4px;\n}\n\n.close-panel-btn:hover {\n  color: #333;\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 #ccc;\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: #007AFF;\n}\n\n.search-execute-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: #007AFF;\n  color: #fff;\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: #0056b3;\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: #333;\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: #333;\n  cursor: pointer;\n  padding: 4px 8px;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  background: #fafafa;\n  transition: all 0.15s;\n}\n\n.provider-checkbox:hover:not(.disabled) {\n  border-color: #007AFF;\n  background: #f0f7ff;\n}\n\n.provider-checkbox.disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  background: #f5f5f5;\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: #999;\n  font-style: italic;\n}\n\n/* Search Results */\n.search-results-container {\n  flex: 1;\n  overflow: auto;\n  border-top: 1px solid #e0e0e0;\n}\n\n.search-results-summary {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 16px;\n  background: #f8f8f8;\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.search-results-summary .result-count {\n  font-weight: 600;\n  font-size: 13px;\n  color: #333;\n}\n\n.search-results-summary .provider-stats {\n  font-size: 12px;\n  color: #666;\n}\n\n.search-results-summary .failed-count {\n  color: #D32F2F;\n}\n\n.clear-results-btn {\n  margin-left: auto;\n  background: none;\n  border: 1px solid #ccc;\n  padding: 4px 10px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 11px;\n  color: #666;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.clear-results-btn:hover {\n  background: #f0f0f0;\n  color: #333;\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: #f5f5f5;\n  font-size: 13px;\n  font-weight: 600;\n  color: #333;\n}\n\n.provider-result-header i {\n  color: #007AFF;\n}\n\n.provider-result-header .result-count {\n  font-weight: normal;\n  color: #666;\n}\n\n.provider-result-group.failed .provider-result-header {\n  background: #fff5f5;\n}\n\n.provider-result-group.failed .provider-result-header i {\n  color: #D32F2F;\n}\n\n.error-badge {\n  color: #D32F2F;\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 #f0f0f0;\n  cursor: pointer;\n  transition: background-color 0.1s;\n}\n\n.search-result-item:hover {\n  background-color: #f8f8f8;\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: #666;\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: #333;\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: #999;\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: #666;\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: #666;\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: #999;\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"] }]
+    }], () => [], { account: [{
+            type: Input
+        }], folderPath: [{
+            type: Input
+        }], folderNavigate: [{
+            type: Output
+        }], folderStructureChanged: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FileGridComponent, { className: "FileGridComponent", filePath: "src/lib/file-browser/file-grid.component.ts", lineNumber: 67 }); })();
+//# sourceMappingURL=file-grid.component.js.map