@memberjunction/ng-file-storage 6.1.4 → 6.2.0-edge.1

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

@@ -22,44 +22,88 @@ export class FileBrowserComponent {
     /**
      * Reference to the folder tree component for programmatic navigation
      */
-    folderTree;
+    FolderTree;
+    /** @deprecated Use {@link FolderTree}. */
+    get folderTree() {
+        return this.FolderTree;
+    }
+    /** @deprecated Use {@link FolderTree}. */
+    set folderTree(value) {
+        this.FolderTree = value;
+    }
     /**
      * Controls manual collapse of the sidebar (toggle button on mobile).
      * CSS media queries handle the responsive layout automatically.
      */
-    isSidebarCollapsed = false;
+    IsSidebarCollapsed = false;
+    /** @deprecated Use {@link IsSidebarCollapsed}. */
+    get isSidebarCollapsed() {
+        return this.IsSidebarCollapsed;
+    }
+    /** @deprecated Use {@link IsSidebarCollapsed}. */
+    set isSidebarCollapsed(value) {
+        this.IsSidebarCollapsed = value;
+    }
     /**
      * Currently selected storage account with its provider details.
      */
-    selectedAccount = null;
+    SelectedAccount = null;
+    /** @deprecated Use {@link SelectedAccount}. */
+    get selectedAccount() {
+        return this.SelectedAccount;
+    }
+    /** @deprecated Use {@link SelectedAccount}. */
+    set selectedAccount(value) {
+        this.SelectedAccount = value;
+    }
     /**
      * Currently selected folder path in the tree.
      */
-    selectedFolderPath = '/';
+    SelectedFolderPath = '/';
+    /** @deprecated Use {@link SelectedFolderPath}. */
+    get selectedFolderPath() {
+        return this.SelectedFolderPath;
+    }
+    /** @deprecated Use {@link SelectedFolderPath}. */
+    set selectedFolderPath(value) {
+        this.SelectedFolderPath = value;
+    }
     constructor() { }
     /**
      * Toggles the visibility of the accounts sidebar.
      * Used for manual toggle on mobile devices.
      */
+    ToggleSidebar() {
+        this.IsSidebarCollapsed = !this.IsSidebarCollapsed;
+    }
+    /** @deprecated Use {@link ToggleSidebar}. */
     toggleSidebar() {
-        this.isSidebarCollapsed = !this.isSidebarCollapsed;
+        return this.ToggleSidebar();
     }
     /**
      * Handles storage account selection from the sidebar.
      *
      * @param accountWithProvider - The selected storage account with provider details, or null if no accounts available
      */
+    OnAccountSelected(accountWithProvider) {
+        this.SelectedAccount = accountWithProvider;
+        this.SelectedFolderPath = '/'; // Reset to root when switching accounts
+    }
+    /** @deprecated Use {@link OnAccountSelected}. */
     onAccountSelected(accountWithProvider) {
-        this.selectedAccount = accountWithProvider;
-        this.selectedFolderPath = '/'; // Reset to root when switching accounts
+        return this.OnAccountSelected(accountWithProvider);
     }
     /**
      * Handles folder selection from the tree navigation.
      *
      * @param folderPath - The full path of the selected folder
      */
+    OnFolderSelected(folderPath) {
+        this.SelectedFolderPath = folderPath;
+    }
+    /** @deprecated Use {@link OnFolderSelected}. */
     onFolderSelected(folderPath) {
-        this.selectedFolderPath = folderPath;
+        return this.OnFolderSelected(folderPath);
     }
     /**
      * Handles folder navigation from the file grid (double-click on folder).
@@ -67,28 +111,36 @@ export class FileBrowserComponent {
      *
      * @param folderPath - The full path of the folder to navigate to
      */
-    onFolderNavigate(folderPath) {
-        if (this.folderTree) {
-            this.folderTree.navigateToPath(folderPath);
+    OnFolderNavigate(folderPath) {
+        if (this.FolderTree) {
+            this.FolderTree.navigateToPath(folderPath);
         }
     }
+    /** @deprecated Use {@link OnFolderNavigate}. */
+    onFolderNavigate(folderPath) {
+        return this.OnFolderNavigate(folderPath);
+    }
     /**
      * Handles folder structure changes (e.g., new folder created, folder deleted).
      * Refreshes the folder tree to show the new structure.
      */
-    onFolderStructureChanged() {
-        if (this.folderTree) {
+    OnFolderStructureChanged() {
+        if (this.FolderTree) {
             // Trigger a refresh of the folder tree without changing navigation
             // This will reload the folders at the current location
-            this.folderTree.refresh();
+            this.FolderTree.refresh();
         }
     }
+    /** @deprecated Use {@link OnFolderStructureChanged}. */
+    onFolderStructureChanged() {
+        return this.OnFolderStructureChanged();
+    }
     static ɵfac = function FileBrowserComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FileBrowserComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FileBrowserComponent, selectors: [["mj-file-browser"]], viewQuery: function FileBrowserComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(FolderTreeComponent, 5);
         } if (rf & 2) {
             let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.folderTree = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.FolderTree = _t.first);
         } }, standalone: false, decls: 22, vars: 5, consts: [[1, "file-browser"], [1, "mobile-header"], [1, "sidebar-toggle", 3, "click"], [1, "fa-solid", "fa-bars"], [1, "browser-title"], [1, "browser-container"], [1, "sidebar"], [1, "sidebar-section"], [1, "section-header"], [1, "section-content"], [3, "accountSelected"], [3, "folderSelected", "account"], [1, "main-panel"], [3, "folderNavigate", "folderStructureChanged", "account", "folderPath"]], template: function FileBrowserComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "button", 2);
             i0.ɵɵlistener("click", function FileBrowserComponent_Template_button_click_2_listener() { return ctx.toggleSidebar(); });
@@ -124,7 +176,7 @@ export class FileBrowserComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FileBrowserComponent, [{
         type: Component,
         args: [{ standalone: false, selector: 'mj-file-browser', template: "<div class=\"file-browser\">\n  <!-- Mobile header with sidebar toggle -->\n  <div class=\"mobile-header\">\n    <button (click)=\"toggleSidebar()\" class=\"sidebar-toggle\">\n      <i class=\"fa-solid fa-bars\"></i>\n    </button>\n    <h2 class=\"browser-title\">File Browser</h2>\n  </div>\n\n  <!-- Main two-panel layout -->\n  <div class=\"browser-container\">\n    <!-- Left Sidebar: Accounts + Categories -->\n    <div class=\"sidebar\" [class.collapsed]=\"isSidebarCollapsed\">\n      <!-- Accounts Section -->\n      <div class=\"sidebar-section\">\n        <div class=\"section-header\">\n          <h3>ACCOUNTS</h3>\n        </div>\n        <div class=\"section-content\">\n          <mj-storage-providers-list\n            (accountSelected)=\"onAccountSelected($event)\"\n          ></mj-storage-providers-list>\n        </div>\n      </div>\n\n      <!-- Categories Section -->\n      <div class=\"sidebar-section\">\n        <div class=\"section-header\">\n          <h3>FOLDERS</h3>\n        </div>\n        <div class=\"section-content\">\n          <mj-folder-tree\n            [account]=\"selectedAccount\"\n            (folderSelected)=\"onFolderSelected($event)\"\n          ></mj-folder-tree>\n        </div>\n      </div>\n    </div>\n\n    <!-- Right Panel: File Grid -->\n    <div class=\"main-panel\">\n      <mj-file-grid\n        [account]=\"selectedAccount\"\n        [folderPath]=\"selectedFolderPath\"\n        (folderNavigate)=\"onFolderNavigate($event)\"\n        (folderStructureChanged)=\"onFolderStructureChanged()\"\n      ></mj-file-grid>\n    </div>\n  </div>\n</div>\n", styles: ["/* ==========================================================================\n   File Browser Shell Component\n   Modern macOS Finder / Cloud Storage multi-panel layout\n   ========================================================================== */\n\n:host {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.file-browser {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background-color: var(--mj-bg-surface);\n  border: none;\n  border-radius: 0;\n  overflow: hidden;\n  box-shadow: none;\n}\n\n/* Mobile Header */\n.mobile-header {\n  display: none;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 16px;\n  background-color: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.mobile-header .browser-title {\n  margin: 0;\n  font-size: 0.95rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.sidebar-toggle {\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n  padding: 6px 10px;\n  cursor: pointer;\n  border-radius: var(--mj-radius-sm, 6px);\n  font-size: 0.85rem;\n  transition: all 0.15s ease;\n}\n\n.sidebar-toggle:hover {\n  background-color: color-mix(in srgb, var(--mj-text-primary) 6%, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n}\n\n/* Main Container - Two Panel Layout */\n.browser-container {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n}\n\n/* Left Sidebar: Accounts & Folders */\n.sidebar {\n  display: flex;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface-sunken, color-mix(in srgb, var(--mj-text-primary) 2%, var(--mj-bg-surface)));\n  border-right: 1px solid var(--mj-border-default);\n  width: 250px;\n  min-width: 250px;\n  max-width: 250px;\n  overflow: hidden;\n  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s ease, opacity 0.2s ease;\n  z-index: 10;\n}\n\n.sidebar.collapsed {\n  width: 0;\n  min-width: 0;\n  border-right: none;\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* Sidebar Sections */\n.sidebar-section {\n  display: flex;\n  flex-direction: column;\n  min-height: 180px;\n  max-height: 48%;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.sidebar-section:last-child {\n  flex: 1;\n  max-height: none;\n  border-bottom: none;\n}\n\n.section-header {\n  padding: 8px 14px;\n  background-color: transparent;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.section-header h3 {\n  margin: 0;\n  font-size: 0.7rem;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n}\n\n.section-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n/* Right Main Panel: File Grid & Command Bar */\n.main-panel {\n  flex: 1;\n  background-color: var(--mj-bg-surface);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-width: 0;\n}\n\n/* Custom Scrollbar Styling */\n.section-content::-webkit-scrollbar {\n  width: 5px;\n}\n\n.section-content::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.section-content::-webkit-scrollbar-thumb {\n  background: var(--mj-border-default);\n  border-radius: 4px;\n}\n\n.section-content::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-muted);\n}\n\n/* ==========================================================================\n   Responsive Design\n   ========================================================================== */\n\n/* Tablet (768px - 1024px) */\n@media screen and (max-width: 1024px) {\n  .sidebar {\n    width: 220px;\n    min-width: 220px;\n    max-width: 220px;\n  }\n}\n\n/* Mobile (below 768px) */\n@media screen and (max-width: 768px) {\n  .mobile-header {\n    display: flex;\n  }\n\n  .browser-container {\n    flex-direction: column;\n  }\n\n  .sidebar {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: 270px;\n    min-width: 270px;\n    max-width: 270px;\n    z-index: 1000;\n    box-shadow: var(--mj-shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.2));\n    background-color: var(--mj-bg-surface);\n  }\n\n  .sidebar.collapsed {\n    transform: translateX(-100%);\n  }\n\n  .main-panel {\n    flex: 1;\n  }\n}\n"] }]
-    }], () => [], { folderTree: [{
+    }], () => [], { FolderTree: [{
             type: ViewChild,
             args: [FolderTreeComponent]
         }] }); })();

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

@@ -1 +1 @@
-{"version":3,"file":"file-browser.component.js","sourceRoot":"","sources":["../../../src/lib/file-browser/file-browser.component.ts","../../../src/lib/file-browser/file-browser.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;;;;;AAG9D;;;;;;;;;;;;;GAaG;AAOH,MAAM,OAAO,oBAAoB;IAC/B;;OAEG;IAC6B,UAAU,CAAuB;IAEjE;;;OAGG;IACI,kBAAkB,GAAY,KAAK,CAAC;IAE3C;;OAEG;IACI,eAAe,GAAsC,IAAI,CAAC;IAEjE;;OAEG;IACI,kBAAkB,GAAW,GAAG,CAAC;IAExC,gBAAe,CAAC;IAEhB;;;OAGG;IACI,aAAa;QAClB,IAAI,CAAC,kBAAkB,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC;IACrD,CAAC;IAED;;;;OAIG;IACI,iBAAiB,CAAC,mBAAsD;QAC7E,IAAI,CAAC,eAAe,GAAG,mBAAmB,CAAC;QAC3C,IAAI,CAAC,kBAAkB,GAAG,GAAG,CAAC,CAAC,wCAAwC;IACzE,CAAC;IAED;;;;OAIG;IACI,gBAAgB,CAAC,UAAkB;QACxC,IAAI,CAAC,kBAAkB,GAAG,UAAU,CAAC;IACvC,CAAC;IAED;;;;;OAKG;IACI,gBAAgB,CAAC,UAAkB;QACxC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC;IAED;;;OAGG;IACI,wBAAwB;QAC7B,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,mEAAmE;YACnE,uDAAuD;YACvD,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;8GAzEU,oBAAoB;6DAApB,oBAAoB;2BAIpB,mBAAmB;;;;;YCzB5B,AADF,AAFF,8BAA0B,aAEG,gBACgC;YAAjD,iGAAS,mBAAe,IAAC;YAC/B,uBAAgC;YAClC,iBAAS;YACT,6BAA0B;YAAA,4BAAY;YACxC,AADwC,iBAAK,EACvC;YASE,AADF,AADF,AAFF,AAFF,8BAA+B,aAE+B,aAE7B,aACC,UACtB;YAAA,yBAAQ;YACd,AADc,iBAAK,EACb;YAEJ,AADF,+BAA6B,qCAG1B;YADC,+IAAmB,6BAAyB,IAAC;YAGnD,AADE,AADG,iBAA4B,EACzB,EACF;YAKF,AADF,AADF,+BAA6B,cACC,UACtB;YAAA,wBAAO;YACb,AADa,iBAAK,EACZ;YAEJ,AADF,+BAA6B,0BAI1B;YADC,kIAAkB,4BAAwB,IAAC;YAInD,AADE,AADE,AADG,iBAAiB,EACd,EACF,EACF;YAIJ,AADF,gCAAwB,wBAMrB;YADC,AADA,gIAAkB,4BAAwB,IAAC,6HACjB,8BAA0B,IAAC;YAI7D,AADE,AADE,AADG,iBAAe,EACZ,EACF,EACF;;YArCmB,eAAsC;YAAtC,mDAAsC;YAoBnD,gBAA2B;YAA3B,6CAA2B;YAU/B,eAA2B;YAC3B,AADA,6CAA2B,sCACM;;;iFDnB5B,oBAAoB;cANhC,SAAS;6BACI,KAAK,YACP,iBAAiB;;kBAQ1B,SAAS;mBAAC,mBAAmB;;kFAJnB,oBAAoB","sourcesContent":["import { Component, ViewChild } from '@angular/core';\nimport { FolderTreeComponent } from './folder-tree.component';\nimport { StorageAccountWithProvider } from '@memberjunction/core-entities';\n\n/**\n * Mac Finder-style file browser component with three-panel layout.\n *\n * Layout:\n * - Left sidebar: Storage account selection\n * - Middle panel: Folder tree navigation\n * - Right panel: File grid with current folder contents\n *\n * In the enterprise model, users select from organizational storage accounts\n * rather than connecting their own OAuth credentials.\n *\n * Features responsive design with collapsible sidebar for mobile devices.\n * Responsive layout is handled via CSS media queries.\n */\n@Component({\n  standalone: false,\n  selector: 'mj-file-browser',\n  templateUrl: './file-browser.component.html',\n  styleUrls: ['./file-browser.component.css'],\n})\nexport class FileBrowserComponent {\n  /**\n   * Reference to the folder tree component for programmatic navigation\n   */\n  @ViewChild(FolderTreeComponent) folderTree!: FolderTreeComponent;\n\n  /**\n   * Controls manual collapse of the sidebar (toggle button on mobile).\n   * CSS media queries handle the responsive layout automatically.\n   */\n  public isSidebarCollapsed: boolean = false;\n\n  /**\n   * Currently selected storage account with its provider details.\n   */\n  public selectedAccount: StorageAccountWithProvider | null = null;\n\n  /**\n   * Currently selected folder path in the tree.\n   */\n  public selectedFolderPath: string = '/';\n\n  constructor() {}\n\n  /**\n   * Toggles the visibility of the accounts sidebar.\n   * Used for manual toggle on mobile devices.\n   */\n  public toggleSidebar(): void {\n    this.isSidebarCollapsed = !this.isSidebarCollapsed;\n  }\n\n  /**\n   * Handles storage account selection from the sidebar.\n   *\n   * @param accountWithProvider - The selected storage account with provider details, or null if no accounts available\n   */\n  public onAccountSelected(accountWithProvider: StorageAccountWithProvider | null): void {\n    this.selectedAccount = accountWithProvider;\n    this.selectedFolderPath = '/'; // Reset to root when switching accounts\n  }\n\n  /**\n   * Handles folder selection from the tree navigation.\n   *\n   * @param folderPath - The full path of the selected folder\n   */\n  public onFolderSelected(folderPath: string): void {\n    this.selectedFolderPath = folderPath;\n  }\n\n  /**\n   * Handles folder navigation from the file grid (double-click on folder).\n   * Updates the folder tree to navigate to the selected folder.\n   *\n   * @param folderPath - The full path of the folder to navigate to\n   */\n  public onFolderNavigate(folderPath: string): void {\n    if (this.folderTree) {\n      this.folderTree.navigateToPath(folderPath);\n    }\n  }\n\n  /**\n   * Handles folder structure changes (e.g., new folder created, folder deleted).\n   * Refreshes the folder tree to show the new structure.\n   */\n  public onFolderStructureChanged(): void {\n    if (this.folderTree) {\n      // Trigger a refresh of the folder tree without changing navigation\n      // This will reload the folders at the current location\n      this.folderTree.refresh();\n    }\n  }\n}\n","<div class=\"file-browser\">\n  <!-- Mobile header with sidebar toggle -->\n  <div class=\"mobile-header\">\n    <button (click)=\"toggleSidebar()\" class=\"sidebar-toggle\">\n      <i class=\"fa-solid fa-bars\"></i>\n    </button>\n    <h2 class=\"browser-title\">File Browser</h2>\n  </div>\n\n  <!-- Main two-panel layout -->\n  <div class=\"browser-container\">\n    <!-- Left Sidebar: Accounts + Categories -->\n    <div class=\"sidebar\" [class.collapsed]=\"isSidebarCollapsed\">\n      <!-- Accounts Section -->\n      <div class=\"sidebar-section\">\n        <div class=\"section-header\">\n          <h3>ACCOUNTS</h3>\n        </div>\n        <div class=\"section-content\">\n          <mj-storage-providers-list\n            (accountSelected)=\"onAccountSelected($event)\"\n          ></mj-storage-providers-list>\n        </div>\n      </div>\n\n      <!-- Categories Section -->\n      <div class=\"sidebar-section\">\n        <div class=\"section-header\">\n          <h3>FOLDERS</h3>\n        </div>\n        <div class=\"section-content\">\n          <mj-folder-tree\n            [account]=\"selectedAccount\"\n            (folderSelected)=\"onFolderSelected($event)\"\n          ></mj-folder-tree>\n        </div>\n      </div>\n    </div>\n\n    <!-- Right Panel: File Grid -->\n    <div class=\"main-panel\">\n      <mj-file-grid\n        [account]=\"selectedAccount\"\n        [folderPath]=\"selectedFolderPath\"\n        (folderNavigate)=\"onFolderNavigate($event)\"\n        (folderStructureChanged)=\"onFolderStructureChanged()\"\n      ></mj-file-grid>\n    </div>\n  </div>\n</div>\n"]}
+{"version":3,"file":"file-browser.component.js","sourceRoot":"","sources":["../../../src/lib/file-browser/file-browser.component.ts","../../../src/lib/file-browser/file-browser.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, ViewChild } from '@angular/core';\nimport { FolderTreeComponent } from './folder-tree.component';\nimport { StorageAccountWithProvider } from '@memberjunction/core-entities';\n\n/**\n * Mac Finder-style file browser component with three-panel layout.\n *\n * Layout:\n * - Left sidebar: Storage account selection\n * - Middle panel: Folder tree navigation\n * - Right panel: File grid with current folder contents\n *\n * In the enterprise model, users select from organizational storage accounts\n * rather than connecting their own OAuth credentials.\n *\n * Features responsive design with collapsible sidebar for mobile devices.\n * Responsive layout is handled via CSS media queries.\n */\n@Component({\n  standalone: false,\n  selector: 'mj-file-browser',\n  templateUrl: './file-browser.component.html',\n  styleUrls: ['./file-browser.component.css'],\n})\nexport class FileBrowserComponent {\n  /**\n   * Reference to the folder tree component for programmatic navigation\n   */\n  @ViewChild(FolderTreeComponent) FolderTree!: FolderTreeComponent;\n\n  /** @deprecated Use {@link FolderTree}. */\n  get folderTree(): FolderTreeComponent {\n    return this.FolderTree;\n  }\n  /** @deprecated Use {@link FolderTree}. */\n  set folderTree(value: FolderTreeComponent) {\n    this.FolderTree = value;\n  }\n\n  /**\n   * Controls manual collapse of the sidebar (toggle button on mobile).\n   * CSS media queries handle the responsive layout automatically.\n   */\n  public IsSidebarCollapsed: boolean = false;\n\n  /** @deprecated Use {@link IsSidebarCollapsed}. */\n  public get isSidebarCollapsed(): boolean {\n    return this.IsSidebarCollapsed;\n  }\n  /** @deprecated Use {@link IsSidebarCollapsed}. */\n  public set isSidebarCollapsed(value: boolean) {\n    this.IsSidebarCollapsed = value;\n  }\n\n  /**\n   * Currently selected storage account with its provider details.\n   */\n  public SelectedAccount: StorageAccountWithProvider | null = null;\n\n  /** @deprecated Use {@link SelectedAccount}. */\n  public get selectedAccount(): StorageAccountWithProvider | null {\n    return this.SelectedAccount;\n  }\n  /** @deprecated Use {@link SelectedAccount}. */\n  public set selectedAccount(value: StorageAccountWithProvider | null) {\n    this.SelectedAccount = value;\n  }\n\n  /**\n   * Currently selected folder path in the tree.\n   */\n  public SelectedFolderPath: string = '/';\n\n  /** @deprecated Use {@link SelectedFolderPath}. */\n  public get selectedFolderPath(): string {\n    return this.SelectedFolderPath;\n  }\n  /** @deprecated Use {@link SelectedFolderPath}. */\n  public set selectedFolderPath(value: string) {\n    this.SelectedFolderPath = value;\n  }\n\n  constructor() {}\n\n  /**\n   * Toggles the visibility of the accounts sidebar.\n   * Used for manual toggle on mobile devices.\n   */\n  public ToggleSidebar(): void {\n    this.IsSidebarCollapsed = !this.IsSidebarCollapsed;\n  }\n\n  /** @deprecated Use {@link ToggleSidebar}. */\n  public toggleSidebar(): void {\n    return this.ToggleSidebar();\n  }\n\n  /**\n   * Handles storage account selection from the sidebar.\n   *\n   * @param accountWithProvider - The selected storage account with provider details, or null if no accounts available\n   */\n  public OnAccountSelected(accountWithProvider: StorageAccountWithProvider | null): void {\n    this.SelectedAccount = accountWithProvider;\n    this.SelectedFolderPath = '/'; // Reset to root when switching accounts\n  }\n\n  /** @deprecated Use {@link OnAccountSelected}. */\n  public onAccountSelected(accountWithProvider: StorageAccountWithProvider | null): void {\n    return this.OnAccountSelected(accountWithProvider);\n  }\n\n  /**\n   * Handles folder selection from the tree navigation.\n   *\n   * @param folderPath - The full path of the selected folder\n   */\n  public OnFolderSelected(folderPath: string): void {\n    this.SelectedFolderPath = folderPath;\n  }\n\n  /** @deprecated Use {@link OnFolderSelected}. */\n  public onFolderSelected(folderPath: string): void {\n    return this.OnFolderSelected(folderPath);\n  }\n\n  /**\n   * Handles folder navigation from the file grid (double-click on folder).\n   * Updates the folder tree to navigate to the selected folder.\n   *\n   * @param folderPath - The full path of the folder to navigate to\n   */\n  public OnFolderNavigate(folderPath: string): void {\n    if (this.FolderTree) {\n      this.FolderTree.navigateToPath(folderPath);\n    }\n  }\n\n  /** @deprecated Use {@link OnFolderNavigate}. */\n  public onFolderNavigate(folderPath: string): void {\n    return this.OnFolderNavigate(folderPath);\n  }\n\n  /**\n   * Handles folder structure changes (e.g., new folder created, folder deleted).\n   * Refreshes the folder tree to show the new structure.\n   */\n  public OnFolderStructureChanged(): void {\n    if (this.FolderTree) {\n      // Trigger a refresh of the folder tree without changing navigation\n      // This will reload the folders at the current location\n      this.FolderTree.refresh();\n    }\n  }\n\n  /** @deprecated Use {@link OnFolderStructureChanged}. */\n  public onFolderStructureChanged(): void {\n    return this.OnFolderStructureChanged();\n  }\n}\n","<div class=\"file-browser\">\n  <!-- Mobile header with sidebar toggle -->\n  <div class=\"mobile-header\">\n    <button (click)=\"toggleSidebar()\" class=\"sidebar-toggle\">\n      <i class=\"fa-solid fa-bars\"></i>\n    </button>\n    <h2 class=\"browser-title\">File Browser</h2>\n  </div>\n\n  <!-- Main two-panel layout -->\n  <div class=\"browser-container\">\n    <!-- Left Sidebar: Accounts + Categories -->\n    <div class=\"sidebar\" [class.collapsed]=\"isSidebarCollapsed\">\n      <!-- Accounts Section -->\n      <div class=\"sidebar-section\">\n        <div class=\"section-header\">\n          <h3>ACCOUNTS</h3>\n        </div>\n        <div class=\"section-content\">\n          <mj-storage-providers-list\n            (accountSelected)=\"onAccountSelected($event)\"\n          ></mj-storage-providers-list>\n        </div>\n      </div>\n\n      <!-- Categories Section -->\n      <div class=\"sidebar-section\">\n        <div class=\"section-header\">\n          <h3>FOLDERS</h3>\n        </div>\n        <div class=\"section-content\">\n          <mj-folder-tree\n            [account]=\"selectedAccount\"\n            (folderSelected)=\"onFolderSelected($event)\"\n          ></mj-folder-tree>\n        </div>\n      </div>\n    </div>\n\n    <!-- Right Panel: File Grid -->\n    <div class=\"main-panel\">\n      <mj-file-grid\n        [account]=\"selectedAccount\"\n        [folderPath]=\"selectedFolderPath\"\n        (folderNavigate)=\"onFolderNavigate($event)\"\n        (folderStructureChanged)=\"onFolderStructureChanged()\"\n      ></mj-file-grid>\n    </div>\n  </div>\n</div>\n"]}