@cqa-lib/cqa-ui 1.1.556 → 1.1.557

package/fesm2020/cqa-lib-cqa-ui.mjs

@@ -7051,6 +7051,15 @@ class TableTemplateComponent {
         this.viewMode = 'list';
         this.viewModeLabels = { list: 'List', modular: 'Modular' };
         this.viewModeChange = new EventEmitter();
+        // Stable reference fed to <cqa-segment-control [segments]>. A getter here
+        // allocates a new array each CD tick, which the segment control then sees as
+        // a changed Input — its updateIndicator runs inside a queueMicrotask, the
+        // zone re-ticks via onMicrotaskEmpty, and the loop pegs CPU at 100% with
+        // HTTP requests starved. Rebuilt only when viewModeLabels actually changes.
+        this.viewModeSegments = [
+            { label: 'List', value: 'list', icon: 'view_list' },
+            { label: 'Modular', value: 'modular', icon: 'folder' },
+        ];
         // Data input
         this.data = [];
         // Empty state inputs
@@ -7156,12 +7165,6 @@ class TableTemplateComponent {
         // Export modal state
         this.isExportModalOpen = false;
     }
-    get viewModeSegments() {
-        return [
-            { label: this.viewModeLabels.list, value: 'list', icon: 'view_list' },
-            { label: this.viewModeLabels.modular, value: 'modular', icon: 'folder' },
-        ];
-    }
     onViewModeChange(value) {
         const next = value === 'modular' ? 'modular' : 'list';
         if (next !== this.viewMode) {
@@ -7214,6 +7217,12 @@ class TableTemplateComponent {
         if (changes['selectedItems'] || changes['data']) {
             this.restoreSelectionState();
         }
+        if (changes['viewModeLabels']) {
+            this.viewModeSegments = [
+                { label: this.viewModeLabels.list, value: 'list', icon: 'view_list' },
+                { label: this.viewModeLabels.modular, value: 'modular', icon: 'folder' },
+            ];
+        }
     }
     initializeComponent() {
         if (this.isEmptyState) {
@@ -7831,6 +7840,7 @@ const DEFAULT_MODULAR_LABELS = {
     folderColumnLabel: 'Folder',
     unorganizedRowLabel: 'Unorganized',
     noFoldersFound: 'No Folders Found',
+    noFoldersEmptyDescription: 'Click the + icon above to create your first folder.',
     folderTooltipTotalSingular: '1 total test case including subfolders',
     folderTooltipTotalPlural: '{n} total test cases including subfolders',
 };
@@ -9608,10 +9618,10 @@ FolderSidebarComponent.RENAME_LIMIT_FLASH_MS = 600;
  *  position is within this many px of the end. */
 FolderSidebarComponent.SCROLL_LOAD_THRESHOLD_PX = 64;
 FolderSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FolderSidebarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FolderSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FolderSidebarComponent, selector: "cqa-folder-sidebar", inputs: { folders: "folders", selectedFolderId: "selectedFolderId", expandedFolderIds: "expandedFolderIds", unorganizedCount: "unorganizedCount", allowCreate: "allowCreate", allowRename: "allowRename", allowDelete: "allowDelete", allowMove: "allowMove", allowDuplicate: "allowDuplicate", allowDrop: "allowDrop", showCounts: "showCounts", collapsed: "collapsed", foldersAccordionExpanded: "foldersAccordionExpanded", labels: "labels", serverSideSearch: "serverSideSearch", rootTotal: "rootTotal", folderSearchLoading: "folderSearchLoading", rootFoldersLoading: "rootFoldersLoading", savingFolderIds: "savingFolderIds", searchValue: "searchValue" }, outputs: { folderSelected: "folderSelected", folderExpansionToggled: "folderExpansionToggled", folderChildrenRequested: "folderChildrenRequested", folderLoadMoreRequested: "folderLoadMoreRequested", searchChange: "searchChange", rootLoadMoreRequested: "rootLoadMoreRequested", folderCreated: "folderCreated", folderCreateRequested: "folderCreateRequested", folderRenamed: "folderRenamed", folderDeleted: "folderDeleted", folderMoveRequested: "folderMoveRequested", folderDuplicateRequested: "folderDuplicateRequested", testsDropped: "testsDropped", folderDropped: "folderDropped", collapsedChange: "collapsedChange", foldersAccordionExpandedChange: "foldersAccordionExpandedChange" }, host: { listeners: { "document:click": "onDocumentClick()", "document:keydown.escape": "onEscape()", "document:dragend": "onDocumentDragEnd()" }, classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<!-- Reusable indeterminate loading spinner. Render via\n     <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>. -->\n<ng-template #loadingSpinner let-size=\"size\">\n  <svg [attr.width]=\"size || 16\" [attr.height]=\"size || 16\" viewBox=\"0 0 50 50\" aria-label=\"loading\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"></circle>\n    <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n      <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"></animateTransform>\n    </path>\n  </svg>\n</ng-template>\n\n<!-- Reusable folder icon. Render via <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: node.color }\"></ng-container>. -->\n<ng-template #folderIcon let-color=\"color\">\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-flex-shrink-0\">\n    <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" [attr.stroke]=\"color || '#99999E'\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<aside\n  class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-h-full cqa-min-h-0\"\n  [class.cqa-border]=\"!collapsed\"\n  [class.cqa-border-neutral-200]=\"!collapsed\"\n  [class.cqa-rounded-lg]=\"!collapsed\"\n  [style.width.px]=\"collapsed ? 22 : 240\"\n  style=\"overflow: hidden; transition: width 260ms cubic-bezier(0.4, 0, 0.2, 1);\"\n>\n  <!-- Collapsed rail: the entire sidebar becomes a single click target so the\n       slim strip reads as an obvious \"expand me\" handle. -->\n  <button\n    *ngIf=\"collapsed\"\n    type=\"button\"\n    style=\"width: 22px;\"\n    class=\"cqa-group cqa-flex cqa-flex-col cqa-items-center cqa-flex-shrink-0 cqa-h-full cqa-py-2 cqa-gap-3 cqa-bg-neutral-50 cqa-border cqa-border-neutral-200 cqa-text-neutral-500 hover:cqa-bg-indigo-50 hover:cqa-border-indigo-200 hover:cqa-text-indigo-600 focus:cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-indigo-200 cqa-cursor-pointer\"\n    (click)=\"togglePanel()\"\n    [attr.aria-label]=\"'Expand folders panel'\"\n    [title]=\"'Expand folders panel'\"\n  >\n    <mat-icon style=\"font-size:16px;width:16px;height:16px\">chevron_right</mat-icon>\n    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center\" aria-hidden=\"true\">\n      <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" stroke=\"currentColor\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </span>\n  </button>\n\n  <div *ngIf=\"!collapsed\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-h-0 cqa-pb-2\" style=\"width: 240px;\">\n  <!-- Header (expanded) -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-justify-between cqa-py-1 cqa-px-3\"\n    style=\"border-bottom: 1px solid #E2E2E3; margin-bottom: 8px;\"\n  >\n    <span class=\"cqa-text-sm cqa-font-semibold cqa-text-neutral-900 cqa-py-0.5\">{{ labels.folders }}</span>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <button\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"togglePanel()\"\n        [attr.aria-label]=\"'Collapse folders panel'\"\n        [title]=\"'Collapse folders panel'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">keyboard_double_arrow_left</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100\"\n        [class.cqa-text-neutral-500]=\"!searchVisible\"\n        [class.cqa-text-indigo-600]=\"searchVisible\"\n        [class.cqa-bg-neutral-100]=\"searchVisible\"\n        (click)=\"toggleSearchVisible()\"\n        [attr.aria-label]=\"searchVisible ? 'Hide folder search' : 'Search folders'\"\n        [attr.aria-pressed]=\"searchVisible\"\n        [title]=\"searchVisible ? 'Hide folder search' : 'Search folders'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">search</mat-icon>\n      </button>\n      <button\n        *ngIf=\"allowCreate\"\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"requestCreate(null)\"\n        [attr.aria-label]=\"labels.newFolder\"\n        [title]=\"labels.newFolder\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container>\n    <!-- Search (toggled via the search icon in the header) -->\n    <div\n      class=\"cqa-grid\"\n      style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n      [style.grid-template-rows]=\"searchVisible ? '1fr' : '0fr'\"\n    >\n      <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n        <div class=\"cqa-px-3 cqa-pb-2\">\n          <div class=\"cqa-relative\">\n            <cqa-search-bar\n              size=\"sm\"\n              [fullWidth]=\"true\"\n              [value]=\"searchValue\"\n              [autoFocus]=\"searchVisible\"\n              [placeholder]=\"labels.searchFoldersPlaceholder\"\n              [showClear]=\"true\"\n              (valueChange)=\"onSearchInput($event)\"\n              (cleared)=\"onSearchClear()\"\n            ></cqa-search-bar>\n            <span\n              *ngIf=\"folderSearchLoading\"\n              class=\"cqa-absolute cqa-right-8 cqa-inset-y-0 cqa-flex cqa-items-center\"\n              aria-live=\"polite\"\n              aria-label=\"Searching folders\"\n            >\n              <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Organized section header \u2014 visually distinct from folder rows so it reads\n         as a view/section toggle rather than a folder item. -->\n    <button\n      type=\"button\"\n      class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-px-3 cqa-py-1 cqa-text-left cqa-text-[#6D6D74] hover:cqa-text-[#3F43EE] focus:cqa-outline-none focus:cqa-text-[#3F43EE] cqa-flex-shrink-0 cqa-uppercase\"\n      (click)=\"toggleFoldersAccordion()\"\n      [attr.aria-expanded]=\"foldersAccordionExpanded\"\n      [attr.aria-label]=\"foldersAccordionExpanded ? 'Collapse organized folders' : 'Expand organized folders'\"\n    >\n      <span class=\"cqa-text-[11px] cqa-font-semibold cqa-tracking-wider\">{{ labels.organized }}</span>\n      <mat-icon\n        style=\"font-size:16px;width:16px;height:16px;transition: transform 200ms ease;\"\n        [style.transform]=\"foldersAccordionExpanded ? 'rotate(0deg)' : 'rotate(-90deg)'\"\n      >expand_more</mat-icon>\n    </button>\n\n    <!-- Tree (folders only \u2014 Unorganized sits directly below; tree caps at 60vh and scrolls when overflowing).\n         Scroll-based lazy-loading at the root level: nearing the bottom emits\n         `rootLoadMoreRequested`, which the host responds to by fetching the\n         next page of roots. -->\n    <div\n      class=\"cqa-grid cqa-min-h-0\"\n      style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n      [style.grid-template-rows]=\"foldersAccordionExpanded ? '1fr' : '0fr'\"\n    >\n      <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n    <div role=\"tree\" class=\"cqa-min-h-0 cqa-max-h-[40vh] cqa-overflow-y-auto cqa-py-1 cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n         (scroll)=\"onTreeScroll($event)\">\n      <!-- Initial-load spinner: only renders when we have no folders yet AND\n           no search active (search has its own inline spinner). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length === 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-6\"\n        aria-live=\"polite\"\n      >\n        <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>\n      </div>\n      <div\n        *ngIf=\"searchValue?.trim() && rows.length === 0 && !folderSearchLoading\"\n        class=\"cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-neutral-500 cqa-text-center\"\n      >\n        {{ labels.noFoldersFound }}\n      </div>\n      <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n        <!-- Synthetic loading row (lazy fetch in flight) -->\n        <div\n          *ngIf=\"row.kind === 'loading'\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-1.5 cqa-text-sm cqa-text-neutral-500\"\n          aria-live=\"polite\"\n        >\n          <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n          <span>Loading\u2026</span>\n        </div>\n        <!-- Synthetic load-more row (more children available on backend) -->\n        <button\n          *ngIf=\"row.kind === 'load-more'\"\n          type=\"button\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          class=\"cqa-flex cqa-items-center cqa-w-full cqa-py-1.5 cqa-text-sm cqa-text-indigo-600 hover:cqa-bg-[#D8D9FC] cqa-text-left\"\n          (click)=\"onLoadMore(row.node); $event.stopPropagation()\"\n        >\n          <span>Load more ({{ (row.node.totalChildren ?? 0) - (row.node.children?.length ?? 0) }})</span>\n        </button>\n        <!-- Real folder row -->\n        <div\n          *ngIf=\"row.kind === 'folder'\"\n          role=\"treeitem\"\n          tabindex=\"0\"\n          [attr.aria-expanded]=\"row.hasChildren ? isExpanded(row.node.id) : null\"\n          [attr.aria-selected]=\"isSelected(row.node.id)\"\n          [attr.data-folder-row-id]=\"row.node.id\"\n          [cqaFolderDrop]=\"row.node.id\"\n          [dropEnabled]=\"allowDrop\"\n          (testsDropped)=\"rowDropped(row.node.id, $event)\"\n          (folderDropped)=\"onFolderRowDropped(row.node.id, $event)\"\n          [cqaFolderDrag]=\"row.node.id\"\n          [dragEnabled]=\"allowDrop\"\n          (dragstart)=\"onFolderDragStart(row.node)\"\n          (dragend)=\"onFolderDragEnd()\"\n          (dragover)=\"onFolderRowDragOver(row)\"\n          (dragleave)=\"onFolderRowDragLeave(row)\"\n          (click)=\"onSelect(row.node)\"\n          (contextmenu)=\"openContextMenu(row.node, $event)\"\n          (keydown)=\"onRowKeydown($event, row, i)\"\n          class=\"cqa-group cqa-flex cqa-items-center cqa-gap-1 cqa-pr-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-[#D8D9FC] focus:cqa-outline-none focus:cqa-bg-[#D8D9FC] cqa-relative\"\n          [style.background-color]=\"(isSelected(row.node.id) || contextMenuFolderId === row.node.id) ? '#D8D9FC' : null\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          [attr.title]=\"folderRowTooltip(row.node)\"\n        >\n          <span\n            *ngIf=\"isSelected(row.node.id)\"\n            class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n          ></span>\n          <button\n            type=\"button\"\n            class=\"cqa-p-0\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\n            (click)=\"onToggle(row.node, $event)\"\n            [attr.aria-label]=\"isExpanded(row.node.id) ? 'Collapse' : 'Expand'\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">\n              {{ isExpanded(row.node.id) ? 'expand_more' : 'chevron_right' }}\n            </mat-icon>\n          </button>\n          <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: row.node.color }\"></ng-container>\n\n          <ng-container *ngIf=\"renamingId === row.node.id; else nameTpl\">\n            <input\n              type=\"text\"\n              size=\"1\"\n              [attr.data-folder-rename-input]=\"row.node.id\"\n              [attr.maxlength]=\"renameMaxLength\"\n              class=\"cqa-flex-1 cqa-min-w-0 cqa-w-full cqa-px-2 cqa-py-0.5 cqa-rounded cqa-border cqa-bg-white cqa-text-sm cqa-shadow-sm focus:cqa-outline-none focus:cqa-ring-1\"\n              [ngClass]=\"(isRenameDraftValid && !renameLimitFlash)\n                ? 'cqa-border-neutral-300 focus:cqa-border-indigo-400 focus:cqa-ring-indigo-200'\n                : 'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-[#FCA5A5]'\"\n              [attr.aria-invalid]=\"!isRenameDraftValid || renameLimitFlash\"\n              [(ngModel)]=\"renameDraft\"\n              (keydown)=\"onRenameKey($event, row.node)\"\n              (keypress)=\"$event.stopPropagation()\"\n              (keyup)=\"$event.stopPropagation()\"\n              (blur)=\"commitRename(row.node)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </ng-container>\n          <ng-template #nameTpl>\n            <span\n              class=\"cqa-flex-1 cqa-text-sm cqa-truncate\"\n              [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n              (dblclick)=\"beginRename(row.node, $event)\"\n            >{{ row.node.name }}</span>\n          </ng-template>\n\n          <!-- Saving indicator: replaces the count while the host's rename/save\n               API call is in flight, so the user gets immediate feedback. -->\n          <span\n            *ngIf=\"isFolderSaving(row.node.id)\"\n            class=\"cqa-flex cqa-items-center cqa-ml-1 cqa-flex-shrink-0\"\n            aria-live=\"polite\"\n            [attr.aria-label]=\"'Saving ' + row.node.name\"\n          >\n            <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 12 }\"></ng-container>\n          </span>\n\n          <!-- Count shown at rest; hidden on row hover when delete is allowed -->\n          <span\n            *ngIf=\"!isFolderSaving(row.node.id) && showCounts && row.node.count != null\"\n            class=\"cqa-text-xs cqa-tabular-nums cqa-ml-1\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [class.group-hover:cqa-hidden]=\"allowDelete\"\n          >{{ row.node.count }}</span>\n\n          <button\n            *ngIf=\"hasAnyContextAction\"\n            type=\"button\"\n            class=\"cqa-p-0.5 cqa-rounded hover:cqa-bg-neutral-200\"\n            [style.color]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id ? '#3F43EE' : '#4C4C51'\"\n            [class.cqa-hidden]=\"contextMenuFolderId !== row.node.id\"\n            [class.group-hover:cqa-inline-flex]=\"true\"\n            [class.cqa-inline-flex]=\"contextMenuFolderId === row.node.id\"\n            (click)=\"openContextMenu(row.node, $event)\"\n            [attr.aria-label]=\"'Open actions for ' + row.node.name\"\n            [attr.aria-haspopup]=\"'menu'\"\n            [attr.aria-expanded]=\"contextMenuFolderId === row.node.id\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">more_horiz</mat-icon>\n          </button>\n        </div>\n      </ng-container>\n      <!-- Root-level pagination is now driven by scroll (see `(scroll)` on the\n           tree container above). Per-folder children retain the explicit\n           \"Load more\" button rendered inside the rows loop above, since\n           subtrees aren't independently scrollable. -->\n      <!-- Pagination spinner \u2014 visible only when fetching an additional page\n           of roots (folders.length > 0 distinguishes from initial-load case). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length > 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-2\"\n        aria-live=\"polite\"\n      >\n        <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n      </div>\n    </div>\n      </div>\n    </div>\n\n    <!-- Divider between folder tree and pinned Unorganized tab -->\n    <div\n      aria-hidden=\"true\"\n      class=\"cqa-mx-3 cqa-flex-shrink-0\"\n      style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n    ></div>\n\n    <!-- Unorganized \u2014 pinned below the scrollable folder tree so it stays visible regardless of folder count -->\n    <div\n      role=\"treeitem\"\n      tabindex=\"0\"\n      [attr.aria-selected]=\"isSelected(null)\"\n      class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-[#D8D9FC] focus:cqa-outline-none focus:cqa-bg-[#D8D9FC] cqa-relative cqa-flex-shrink-0\"\n      [style.background-color]=\"isSelected(null) ? '#D8D9FC' : null\"\n      [cqaFolderDrop]=\"null\"\n      [dropEnabled]=\"allowDrop\"\n      (testsDropped)=\"rowDropped(null, $event)\"\n      (folderDropped)=\"onFolderRowDropped(null, $event)\"\n      (click)=\"onSelectUnorganized()\"\n    >\n      <span\n        *ngIf=\"isSelected(null)\"\n        class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n      ></span>\n      <mat-icon [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n      <span class=\"cqa-flex-1 cqa-text-sm\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ labels.unorganized }}</span>\n      <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-tabular-nums\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ unorganizedCount }}</span>\n    </div>\n\n    <!-- Folder context menu (right-click / ellipsis). A 0\u00D70 fixed-position\n         anchor at the click coords drives a cdkConnectedOverlay; CDK's\n         flexible-connected positioning auto-flips up/left when the menu\n         would overflow the viewport (last-folder-near-bottom case). -->\n    <div #ctxAnchor cdkOverlayOrigin\n         class=\"cqa-fixed cqa-w-0 cqa-h-0 cqa-pointer-events-none\"\n         [style.left.px]=\"contextMenuPosition.x\"\n         [style.top.px]=\"contextMenuPosition.y\"></div>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"ctxAnchor\"\n      [cdkConnectedOverlayOpen]=\"contextMenuFolderId !== null\"\n      [cdkConnectedOverlayPositions]=\"contextMenuPositions\"\n      [cdkConnectedOverlayHasBackdrop]=\"false\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"false\"\n      [cdkConnectedOverlayPush]=\"true\"\n      (overlayOutsideClick)=\"onOverlayOutsideClick()\"\n      (detach)=\"closeContextMenu()\"\n    >\n      <!-- The lib's tailwind config sets important: '.cqa-ui-root', which\n           emits descendant selectors like `.cqa-ui-root .cqa-bg-white`.\n           CDK Overlay teleports this template into the global overlay\n           container (outside the host's cqa-ui-root), so we wrap the menu in\n           an ancestor cqa-ui-root div to re-establish the utility scope. -->\n      <div class=\"cqa-ui-root\">\n      <div\n        role=\"menu\"\n        class=\"cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n        (click)=\"$event.stopPropagation()\"\n        (contextmenu)=\"$event.preventDefault(); $event.stopPropagation()\"\n      >\n        <ng-container *ngIf=\"folderById(contextMenuFolderId) as menuNode\">\n          <button\n            *ngIf=\"allowCreate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextCreateSubfolder(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">create_new_folder</mat-icon>\n            <span>{{ labels.folderMenuCreateSubfolder }}</span>\n          </button>\n          <button\n            *ngIf=\"allowRename\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextRename(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">edit</mat-icon>\n            <span>{{ labels.folderMenuRename }}</span>\n          </button>\n          <button\n            *ngIf=\"allowMove\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextMove(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">drive_file_move</mat-icon>\n            <span>{{ labels.folderMenuMove }}</span>\n          </button>\n          <button\n            *ngIf=\"allowDuplicate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextDuplicate(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">content_copy</mat-icon>\n            <span>{{ labels.folderMenuDuplicate }}</span>\n          </button>\n          <div *ngIf=\"allowDelete && (allowCreate || allowRename || allowMove || allowDuplicate)\" class=\"cqa-h-px cqa-my-1\" style=\"background-color: #E5E7EB;\"></div>\n          <button\n            *ngIf=\"allowDelete\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-red-600 hover:cqa-bg-red-50 cqa-text-left\"\n            (click)=\"onContextDelete(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">delete_outline</mat-icon>\n            <span>{{ labels.folderMenuDelete }}</span>\n          </button>\n        </ng-container>\n      </div>\n      </div>\n    </ng-template>\n\n  </ng-container>\n  </div>\n</aside>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FolderDropDirective, selector: "[cqaFolderDrop]", inputs: ["cqaFolderDrop", "dropEnabled"], outputs: ["testsDropped", "folderDropped"] }, { type: FolderDragDirective, selector: "[cqaFolderDrag]", inputs: ["cqaFolderDrag", "dragEnabled"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$6.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { type: i1$6.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FolderSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FolderSidebarComponent, selector: "cqa-folder-sidebar", inputs: { folders: "folders", selectedFolderId: "selectedFolderId", expandedFolderIds: "expandedFolderIds", unorganizedCount: "unorganizedCount", allowCreate: "allowCreate", allowRename: "allowRename", allowDelete: "allowDelete", allowMove: "allowMove", allowDuplicate: "allowDuplicate", allowDrop: "allowDrop", showCounts: "showCounts", collapsed: "collapsed", foldersAccordionExpanded: "foldersAccordionExpanded", labels: "labels", serverSideSearch: "serverSideSearch", rootTotal: "rootTotal", folderSearchLoading: "folderSearchLoading", rootFoldersLoading: "rootFoldersLoading", savingFolderIds: "savingFolderIds", searchValue: "searchValue" }, outputs: { folderSelected: "folderSelected", folderExpansionToggled: "folderExpansionToggled", folderChildrenRequested: "folderChildrenRequested", folderLoadMoreRequested: "folderLoadMoreRequested", searchChange: "searchChange", rootLoadMoreRequested: "rootLoadMoreRequested", folderCreated: "folderCreated", folderCreateRequested: "folderCreateRequested", folderRenamed: "folderRenamed", folderDeleted: "folderDeleted", folderMoveRequested: "folderMoveRequested", folderDuplicateRequested: "folderDuplicateRequested", testsDropped: "testsDropped", folderDropped: "folderDropped", collapsedChange: "collapsedChange", foldersAccordionExpandedChange: "foldersAccordionExpandedChange" }, host: { listeners: { "document:click": "onDocumentClick()", "document:keydown.escape": "onEscape()", "document:dragend": "onDocumentDragEnd()" }, classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<!-- Reusable indeterminate loading spinner. Render via\n     <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>. -->\n<ng-template #loadingSpinner let-size=\"size\">\n  <svg [attr.width]=\"size || 16\" [attr.height]=\"size || 16\" viewBox=\"0 0 50 50\" aria-label=\"loading\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"></circle>\n    <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n      <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"></animateTransform>\n    </path>\n  </svg>\n</ng-template>\n\n<!-- Reusable folder icon. Render via <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: node.color }\"></ng-container>. -->\n<ng-template #folderIcon let-color=\"color\">\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-flex-shrink-0\">\n    <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" [attr.stroke]=\"color || '#99999E'\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<aside\n  class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-h-full cqa-min-h-0\"\n  [class.cqa-border]=\"!collapsed\"\n  [class.cqa-border-neutral-200]=\"!collapsed\"\n  [class.cqa-rounded-lg]=\"!collapsed\"\n  [style.width.px]=\"collapsed ? 22 : 240\"\n  style=\"overflow: hidden; transition: width 260ms cubic-bezier(0.4, 0, 0.2, 1);\"\n>\n  <!-- Collapsed rail: the entire sidebar becomes a single click target so the\n       slim strip reads as an obvious \"expand me\" handle. -->\n  <button\n    *ngIf=\"collapsed\"\n    type=\"button\"\n    style=\"width: 22px;\"\n    class=\"cqa-group cqa-flex cqa-flex-col cqa-items-center cqa-flex-shrink-0 cqa-h-full cqa-py-2 cqa-gap-3 cqa-bg-neutral-50 cqa-border cqa-border-neutral-200 cqa-text-neutral-500 hover:cqa-bg-indigo-50 hover:cqa-border-indigo-200 hover:cqa-text-indigo-600 focus:cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-indigo-200 cqa-cursor-pointer\"\n    (click)=\"togglePanel()\"\n    [attr.aria-label]=\"'Expand folders panel'\"\n    [title]=\"'Expand folders panel'\"\n  >\n    <mat-icon style=\"font-size:16px;width:16px;height:16px\">chevron_right</mat-icon>\n    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center\" aria-hidden=\"true\">\n      <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" stroke=\"currentColor\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </span>\n  </button>\n\n  <div *ngIf=\"!collapsed\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-h-0 cqa-pb-2\" style=\"width: 240px;\">\n  <!-- Header (expanded) -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-justify-between cqa-py-1 cqa-px-3\"\n    style=\"border-bottom: 1px solid #E2E2E3; margin-bottom: 8px;\"\n  >\n    <span class=\"cqa-text-sm cqa-font-semibold cqa-text-neutral-900 cqa-py-0.5\">{{ labels.folders }}</span>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <button\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"togglePanel()\"\n        [attr.aria-label]=\"'Collapse folders panel'\"\n        [title]=\"'Collapse folders panel'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">keyboard_double_arrow_left</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100\"\n        [class.cqa-text-neutral-500]=\"!searchVisible\"\n        [class.cqa-text-indigo-600]=\"searchVisible\"\n        [class.cqa-bg-neutral-100]=\"searchVisible\"\n        (click)=\"toggleSearchVisible()\"\n        [attr.aria-label]=\"searchVisible ? 'Hide folder search' : 'Search folders'\"\n        [attr.aria-pressed]=\"searchVisible\"\n        [title]=\"searchVisible ? 'Hide folder search' : 'Search folders'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">search</mat-icon>\n      </button>\n      <button\n        *ngIf=\"allowCreate\"\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"requestCreate(null)\"\n        [attr.aria-label]=\"labels.newFolder\"\n        [title]=\"labels.newFolder\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container>\n    <!-- Search (toggled via the search icon in the header) -->\n    <div\n      class=\"cqa-grid\"\n      style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n      [style.grid-template-rows]=\"searchVisible ? '1fr' : '0fr'\"\n    >\n      <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n        <div class=\"cqa-px-3 cqa-pb-2\">\n          <div class=\"cqa-relative\">\n            <cqa-search-bar\n              size=\"sm\"\n              [fullWidth]=\"true\"\n              [value]=\"searchValue\"\n              [autoFocus]=\"searchVisible\"\n              [placeholder]=\"labels.searchFoldersPlaceholder\"\n              [showClear]=\"true\"\n              (valueChange)=\"onSearchInput($event)\"\n              (cleared)=\"onSearchClear()\"\n            ></cqa-search-bar>\n            <span\n              *ngIf=\"folderSearchLoading\"\n              class=\"cqa-absolute cqa-right-8 cqa-inset-y-0 cqa-flex cqa-items-center\"\n              aria-live=\"polite\"\n              aria-label=\"Searching folders\"\n            >\n              <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Organized section header \u2014 visually distinct from folder rows so it reads\n         as a view/section toggle rather than a folder item. -->\n    <button\n      type=\"button\"\n      class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-px-3 cqa-py-1 cqa-text-left cqa-text-[#6D6D74] hover:cqa-text-[#3F43EE] focus:cqa-outline-none focus:cqa-text-[#3F43EE] cqa-flex-shrink-0 cqa-uppercase\"\n      (click)=\"toggleFoldersAccordion()\"\n      [attr.aria-expanded]=\"foldersAccordionExpanded\"\n      [attr.aria-label]=\"foldersAccordionExpanded ? 'Collapse organized folders' : 'Expand organized folders'\"\n    >\n      <span class=\"cqa-text-[11px] cqa-font-semibold cqa-tracking-wider\">{{ labels.organized }}</span>\n      <mat-icon\n        style=\"font-size:16px;width:16px;height:16px;transition: transform 200ms ease;\"\n        [style.transform]=\"foldersAccordionExpanded ? 'rotate(0deg)' : 'rotate(-90deg)'\"\n      >expand_more</mat-icon>\n    </button>\n\n    <!-- Tree (folders only \u2014 Unorganized sits directly below; tree caps at 60vh and scrolls when overflowing).\n         Scroll-based lazy-loading at the root level: nearing the bottom emits\n         `rootLoadMoreRequested`, which the host responds to by fetching the\n         next page of roots. -->\n    <div\n      class=\"cqa-grid cqa-min-h-0\"\n      style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n      [style.grid-template-rows]=\"foldersAccordionExpanded ? '1fr' : '0fr'\"\n    >\n      <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n    <div role=\"tree\" class=\"cqa-min-h-0 cqa-max-h-[40vh] cqa-overflow-y-auto cqa-py-1 cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n         (scroll)=\"onTreeScroll($event)\">\n      <!-- Initial-load spinner: only renders when we have no folders yet AND\n           no search active (search has its own inline spinner). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length === 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-6\"\n        aria-live=\"polite\"\n      >\n        <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>\n      </div>\n      <div\n        *ngIf=\"searchValue?.trim() && rows.length === 0 && !folderSearchLoading\"\n        class=\"cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-neutral-500 cqa-text-center\"\n      >\n        {{ labels.noFoldersFound }}\n      </div>\n      <div\n        *ngIf=\"!rootFoldersLoading && folders.length === 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-text-center cqa-px-4 cqa-py-6 cqa-gap-2\"\n      >\n        <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-neutral-100 cqa-text-neutral-400\">\n          <mat-icon style=\"font-size:22px;width:22px;height:22px\">folder_open</mat-icon>\n        </span>\n        <span class=\"cqa-text-sm cqa-font-medium cqa-text-neutral-700\">{{ labels.noFoldersFound }}</span>\n        <span *ngIf=\"allowCreate\" class=\"cqa-text-xs cqa-text-neutral-500 cqa-leading-snug\">\n          {{ labels.noFoldersEmptyDescription }}\n        </span>\n      </div>\n      <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n        <!-- Synthetic loading row (lazy fetch in flight) -->\n        <div\n          *ngIf=\"row.kind === 'loading'\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-1.5 cqa-text-sm cqa-text-neutral-500\"\n          aria-live=\"polite\"\n        >\n          <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n          <span>Loading\u2026</span>\n        </div>\n        <!-- Synthetic load-more row (more children available on backend) -->\n        <button\n          *ngIf=\"row.kind === 'load-more'\"\n          type=\"button\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          class=\"cqa-flex cqa-items-center cqa-w-full cqa-py-1.5 cqa-text-sm cqa-text-indigo-600 hover:cqa-bg-[#D8D9FC] cqa-text-left\"\n          (click)=\"onLoadMore(row.node); $event.stopPropagation()\"\n        >\n          <span>Load more ({{ (row.node.totalChildren ?? 0) - (row.node.children?.length ?? 0) }})</span>\n        </button>\n        <!-- Real folder row -->\n        <div\n          *ngIf=\"row.kind === 'folder'\"\n          role=\"treeitem\"\n          tabindex=\"0\"\n          [attr.aria-expanded]=\"row.hasChildren ? isExpanded(row.node.id) : null\"\n          [attr.aria-selected]=\"isSelected(row.node.id)\"\n          [attr.data-folder-row-id]=\"row.node.id\"\n          [cqaFolderDrop]=\"row.node.id\"\n          [dropEnabled]=\"allowDrop\"\n          (testsDropped)=\"rowDropped(row.node.id, $event)\"\n          (folderDropped)=\"onFolderRowDropped(row.node.id, $event)\"\n          [cqaFolderDrag]=\"row.node.id\"\n          [dragEnabled]=\"allowDrop\"\n          (dragstart)=\"onFolderDragStart(row.node)\"\n          (dragend)=\"onFolderDragEnd()\"\n          (dragover)=\"onFolderRowDragOver(row)\"\n          (dragleave)=\"onFolderRowDragLeave(row)\"\n          (click)=\"onSelect(row.node)\"\n          (contextmenu)=\"openContextMenu(row.node, $event)\"\n          (keydown)=\"onRowKeydown($event, row, i)\"\n          class=\"cqa-group cqa-flex cqa-items-center cqa-gap-1 cqa-pr-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-[#D8D9FC] focus:cqa-outline-none focus:cqa-bg-[#D8D9FC] cqa-relative\"\n          [style.background-color]=\"renamingId === row.node.id ? '#FFFFFF' : ((isSelected(row.node.id) || contextMenuFolderId === row.node.id) ? '#D8D9FC' : null)\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          [attr.title]=\"folderRowTooltip(row.node)\"\n        >\n          <span\n            *ngIf=\"isSelected(row.node.id)\"\n            class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n          ></span>\n          <button\n            type=\"button\"\n            class=\"cqa-p-0\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\n            (click)=\"onToggle(row.node, $event)\"\n            [attr.aria-label]=\"isExpanded(row.node.id) ? 'Collapse' : 'Expand'\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">\n              {{ isExpanded(row.node.id) ? 'expand_more' : 'chevron_right' }}\n            </mat-icon>\n          </button>\n          <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: row.node.color }\"></ng-container>\n\n          <ng-container *ngIf=\"renamingId === row.node.id; else nameTpl\">\n            <input\n              type=\"text\"\n              size=\"1\"\n              [attr.data-folder-rename-input]=\"row.node.id\"\n              [attr.maxlength]=\"renameMaxLength\"\n              class=\"cqa-flex-1 cqa-min-w-0 cqa-w-full cqa-px-2 cqa-py-0.5 cqa-rounded cqa-border cqa-bg-white cqa-text-sm cqa-shadow-sm focus:cqa-outline-none focus:cqa-ring-1\"\n              [ngClass]=\"(isRenameDraftValid && !renameLimitFlash)\n                ? 'cqa-border-neutral-300 focus:cqa-border-indigo-400 focus:cqa-ring-indigo-200'\n                : 'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-[#FCA5A5]'\"\n              [attr.aria-invalid]=\"!isRenameDraftValid || renameLimitFlash\"\n              [(ngModel)]=\"renameDraft\"\n              (keydown)=\"onRenameKey($event, row.node)\"\n              (keypress)=\"$event.stopPropagation()\"\n              (keyup)=\"$event.stopPropagation()\"\n              (blur)=\"commitRename(row.node)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </ng-container>\n          <ng-template #nameTpl>\n            <span\n              class=\"cqa-flex-1 cqa-text-sm cqa-truncate\"\n              [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n              (dblclick)=\"beginRename(row.node, $event)\"\n            >{{ row.node.name }}</span>\n          </ng-template>\n\n          <!-- Saving indicator: replaces the count while the host's rename/save\n               API call is in flight, so the user gets immediate feedback. -->\n          <span\n            *ngIf=\"isFolderSaving(row.node.id)\"\n            class=\"cqa-flex cqa-items-center cqa-ml-1 cqa-flex-shrink-0\"\n            aria-live=\"polite\"\n            [attr.aria-label]=\"'Saving ' + row.node.name\"\n          >\n            <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 12 }\"></ng-container>\n          </span>\n\n          <!-- Count shown at rest; hidden on row hover when delete is allowed -->\n          <span\n            *ngIf=\"!isFolderSaving(row.node.id) && showCounts && row.node.count != null\"\n            class=\"cqa-text-xs cqa-tabular-nums cqa-ml-1\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [class.group-hover:cqa-hidden]=\"allowDelete\"\n          >{{ row.node.count }}</span>\n\n          <button\n            *ngIf=\"hasAnyContextAction\"\n            type=\"button\"\n            class=\"cqa-p-0.5 cqa-rounded hover:cqa-bg-neutral-200\"\n            [style.color]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id ? '#3F43EE' : '#4C4C51'\"\n            [class.cqa-hidden]=\"contextMenuFolderId !== row.node.id\"\n            [class.group-hover:cqa-inline-flex]=\"true\"\n            [class.cqa-inline-flex]=\"contextMenuFolderId === row.node.id\"\n            (click)=\"openContextMenu(row.node, $event)\"\n            [attr.aria-label]=\"'Open actions for ' + row.node.name\"\n            [attr.aria-haspopup]=\"'menu'\"\n            [attr.aria-expanded]=\"contextMenuFolderId === row.node.id\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">more_horiz</mat-icon>\n          </button>\n        </div>\n      </ng-container>\n      <!-- Root-level pagination is now driven by scroll (see `(scroll)` on the\n           tree container above). Per-folder children retain the explicit\n           \"Load more\" button rendered inside the rows loop above, since\n           subtrees aren't independently scrollable. -->\n      <!-- Pagination spinner \u2014 visible only when fetching an additional page\n           of roots (folders.length > 0 distinguishes from initial-load case). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length > 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-2\"\n        aria-live=\"polite\"\n      >\n        <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n      </div>\n    </div>\n      </div>\n    </div>\n\n    <!-- Divider between folder tree and pinned Unorganized tab -->\n    <div\n      aria-hidden=\"true\"\n      class=\"cqa-mx-3 cqa-flex-shrink-0\"\n      style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n    ></div>\n\n    <!-- Unorganized \u2014 pinned below the scrollable folder tree so it stays visible regardless of folder count -->\n    <div\n      role=\"treeitem\"\n      tabindex=\"0\"\n      [attr.aria-selected]=\"isSelected(null)\"\n      class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-[#D8D9FC] focus:cqa-outline-none focus:cqa-bg-[#D8D9FC] cqa-relative cqa-flex-shrink-0\"\n      [style.background-color]=\"isSelected(null) ? '#D8D9FC' : null\"\n      [cqaFolderDrop]=\"null\"\n      [dropEnabled]=\"allowDrop\"\n      (testsDropped)=\"rowDropped(null, $event)\"\n      (folderDropped)=\"onFolderRowDropped(null, $event)\"\n      (click)=\"onSelectUnorganized()\"\n    >\n      <span\n        *ngIf=\"isSelected(null)\"\n        class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n      ></span>\n      <mat-icon [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n      <span class=\"cqa-flex-1 cqa-text-sm\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ labels.unorganized }}</span>\n      <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-tabular-nums\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ unorganizedCount }}</span>\n    </div>\n\n    <!-- Folder context menu (right-click / ellipsis). A 0\u00D70 fixed-position\n         anchor at the click coords drives a cdkConnectedOverlay; CDK's\n         flexible-connected positioning auto-flips up/left when the menu\n         would overflow the viewport (last-folder-near-bottom case). -->\n    <div #ctxAnchor cdkOverlayOrigin\n         class=\"cqa-fixed cqa-w-0 cqa-h-0 cqa-pointer-events-none\"\n         [style.left.px]=\"contextMenuPosition.x\"\n         [style.top.px]=\"contextMenuPosition.y\"></div>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"ctxAnchor\"\n      [cdkConnectedOverlayOpen]=\"contextMenuFolderId !== null\"\n      [cdkConnectedOverlayPositions]=\"contextMenuPositions\"\n      [cdkConnectedOverlayHasBackdrop]=\"false\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"false\"\n      [cdkConnectedOverlayPush]=\"true\"\n      (overlayOutsideClick)=\"onOverlayOutsideClick()\"\n      (detach)=\"closeContextMenu()\"\n    >\n      <!-- The lib's tailwind config sets important: '.cqa-ui-root', which\n           emits descendant selectors like `.cqa-ui-root .cqa-bg-white`.\n           CDK Overlay teleports this template into the global overlay\n           container (outside the host's cqa-ui-root), so we wrap the menu in\n           an ancestor cqa-ui-root div to re-establish the utility scope. -->\n      <div class=\"cqa-ui-root\">\n      <div\n        role=\"menu\"\n        class=\"cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n        (click)=\"$event.stopPropagation()\"\n        (contextmenu)=\"$event.preventDefault(); $event.stopPropagation()\"\n      >\n        <ng-container *ngIf=\"folderById(contextMenuFolderId) as menuNode\">\n          <button\n            *ngIf=\"allowCreate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextCreateSubfolder(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">create_new_folder</mat-icon>\n            <span>{{ labels.folderMenuCreateSubfolder }}</span>\n          </button>\n          <button\n            *ngIf=\"allowRename\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextRename(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">edit</mat-icon>\n            <span>{{ labels.folderMenuRename }}</span>\n          </button>\n          <button\n            *ngIf=\"allowMove\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextMove(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">drive_file_move</mat-icon>\n            <span>{{ labels.folderMenuMove }}</span>\n          </button>\n          <button\n            *ngIf=\"allowDuplicate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextDuplicate(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">content_copy</mat-icon>\n            <span>{{ labels.folderMenuDuplicate }}</span>\n          </button>\n          <div *ngIf=\"allowDelete && (allowCreate || allowRename || allowMove || allowDuplicate)\" class=\"cqa-h-px cqa-my-1\" style=\"background-color: #E5E7EB;\"></div>\n          <button\n            *ngIf=\"allowDelete\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-red-600 hover:cqa-bg-red-50 cqa-text-left\"\n            (click)=\"onContextDelete(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">delete_outline</mat-icon>\n            <span>{{ labels.folderMenuDelete }}</span>\n          </button>\n        </ng-container>\n      </div>\n      </div>\n    </ng-template>\n\n  </ng-container>\n  </div>\n</aside>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FolderDropDirective, selector: "[cqaFolderDrop]", inputs: ["cqaFolderDrop", "dropEnabled"], outputs: ["testsDropped", "folderDropped"] }, { type: FolderDragDirective, selector: "[cqaFolderDrag]", inputs: ["cqaFolderDrag", "dragEnabled"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$6.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { type: i1$6.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FolderSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-folder-sidebar', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Reusable indeterminate loading spinner. Render via\n     <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>. -->\n<ng-template #loadingSpinner let-size=\"size\">\n  <svg [attr.width]=\"size || 16\" [attr.height]=\"size || 16\" viewBox=\"0 0 50 50\" aria-label=\"loading\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"></circle>\n    <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n      <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"></animateTransform>\n    </path>\n  </svg>\n</ng-template>\n\n<!-- Reusable folder icon. Render via <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: node.color }\"></ng-container>. -->\n<ng-template #folderIcon let-color=\"color\">\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-flex-shrink-0\">\n    <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" [attr.stroke]=\"color || '#99999E'\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<aside\n  class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-h-full cqa-min-h-0\"\n  [class.cqa-border]=\"!collapsed\"\n  [class.cqa-border-neutral-200]=\"!collapsed\"\n  [class.cqa-rounded-lg]=\"!collapsed\"\n  [style.width.px]=\"collapsed ? 22 : 240\"\n  style=\"overflow: hidden; transition: width 260ms cubic-bezier(0.4, 0, 0.2, 1);\"\n>\n  <!-- Collapsed rail: the entire sidebar becomes a single click target so the\n       slim strip reads as an obvious \"expand me\" handle. -->\n  <button\n    *ngIf=\"collapsed\"\n    type=\"button\"\n    style=\"width: 22px;\"\n    class=\"cqa-group cqa-flex cqa-flex-col cqa-items-center cqa-flex-shrink-0 cqa-h-full cqa-py-2 cqa-gap-3 cqa-bg-neutral-50 cqa-border cqa-border-neutral-200 cqa-text-neutral-500 hover:cqa-bg-indigo-50 hover:cqa-border-indigo-200 hover:cqa-text-indigo-600 focus:cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-indigo-200 cqa-cursor-pointer\"\n    (click)=\"togglePanel()\"\n    [attr.aria-label]=\"'Expand folders panel'\"\n    [title]=\"'Expand folders panel'\"\n  >\n    <mat-icon style=\"font-size:16px;width:16px;height:16px\">chevron_right</mat-icon>\n    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center\" aria-hidden=\"true\">\n      <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" stroke=\"currentColor\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </span>\n  </button>\n\n  <div *ngIf=\"!collapsed\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-h-0 cqa-pb-2\" style=\"width: 240px;\">\n  <!-- Header (expanded) -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-justify-between cqa-py-1 cqa-px-3\"\n    style=\"border-bottom: 1px solid #E2E2E3; margin-bottom: 8px;\"\n  >\n    <span class=\"cqa-text-sm cqa-font-semibold cqa-text-neutral-900 cqa-py-0.5\">{{ labels.folders }}</span>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <button\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"togglePanel()\"\n        [attr.aria-label]=\"'Collapse folders panel'\"\n        [title]=\"'Collapse folders panel'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">keyboard_double_arrow_left</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100\"\n        [class.cqa-text-neutral-500]=\"!searchVisible\"\n        [class.cqa-text-indigo-600]=\"searchVisible\"\n        [class.cqa-bg-neutral-100]=\"searchVisible\"\n        (click)=\"toggleSearchVisible()\"\n        [attr.aria-label]=\"searchVisible ? 'Hide folder search' : 'Search folders'\"\n        [attr.aria-pressed]=\"searchVisible\"\n        [title]=\"searchVisible ? 'Hide folder search' : 'Search folders'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">search</mat-icon>\n      </button>\n      <button\n        *ngIf=\"allowCreate\"\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"requestCreate(null)\"\n        [attr.aria-label]=\"labels.newFolder\"\n        [title]=\"labels.newFolder\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container>\n    <!-- Search (toggled via the search icon in the header) -->\n    <div\n      class=\"cqa-grid\"\n      style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n      [style.grid-template-rows]=\"searchVisible ? '1fr' : '0fr'\"\n    >\n      <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n        <div class=\"cqa-px-3 cqa-pb-2\">\n          <div class=\"cqa-relative\">\n            <cqa-search-bar\n              size=\"sm\"\n              [fullWidth]=\"true\"\n              [value]=\"searchValue\"\n              [autoFocus]=\"searchVisible\"\n              [placeholder]=\"labels.searchFoldersPlaceholder\"\n              [showClear]=\"true\"\n              (valueChange)=\"onSearchInput($event)\"\n              (cleared)=\"onSearchClear()\"\n            ></cqa-search-bar>\n            <span\n              *ngIf=\"folderSearchLoading\"\n              class=\"cqa-absolute cqa-right-8 cqa-inset-y-0 cqa-flex cqa-items-center\"\n              aria-live=\"polite\"\n              aria-label=\"Searching folders\"\n            >\n              <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Organized section header \u2014 visually distinct from folder rows so it reads\n         as a view/section toggle rather than a folder item. -->\n    <button\n      type=\"button\"\n      class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-px-3 cqa-py-1 cqa-text-left cqa-text-[#6D6D74] hover:cqa-text-[#3F43EE] focus:cqa-outline-none focus:cqa-text-[#3F43EE] cqa-flex-shrink-0 cqa-uppercase\"\n      (click)=\"toggleFoldersAccordion()\"\n      [attr.aria-expanded]=\"foldersAccordionExpanded\"\n      [attr.aria-label]=\"foldersAccordionExpanded ? 'Collapse organized folders' : 'Expand organized folders'\"\n    >\n      <span class=\"cqa-text-[11px] cqa-font-semibold cqa-tracking-wider\">{{ labels.organized }}</span>\n      <mat-icon\n        style=\"font-size:16px;width:16px;height:16px;transition: transform 200ms ease;\"\n        [style.transform]=\"foldersAccordionExpanded ? 'rotate(0deg)' : 'rotate(-90deg)'\"\n      >expand_more</mat-icon>\n    </button>\n\n    <!-- Tree (folders only \u2014 Unorganized sits directly below; tree caps at 60vh and scrolls when overflowing).\n         Scroll-based lazy-loading at the root level: nearing the bottom emits\n         `rootLoadMoreRequested`, which the host responds to by fetching the\n         next page of roots. -->\n    <div\n      class=\"cqa-grid cqa-min-h-0\"\n      style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n      [style.grid-template-rows]=\"foldersAccordionExpanded ? '1fr' : '0fr'\"\n    >\n      <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n    <div role=\"tree\" class=\"cqa-min-h-0 cqa-max-h-[40vh] cqa-overflow-y-auto cqa-py-1 cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n         (scroll)=\"onTreeScroll($event)\">\n      <!-- Initial-load spinner: only renders when we have no folders yet AND\n           no search active (search has its own inline spinner). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length === 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-6\"\n        aria-live=\"polite\"\n      >\n        <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>\n      </div>\n      <div\n        *ngIf=\"searchValue?.trim() && rows.length === 0 && !folderSearchLoading\"\n        class=\"cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-neutral-500 cqa-text-center\"\n      >\n        {{ labels.noFoldersFound }}\n      </div>\n      <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n        <!-- Synthetic loading row (lazy fetch in flight) -->\n        <div\n          *ngIf=\"row.kind === 'loading'\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-1.5 cqa-text-sm cqa-text-neutral-500\"\n          aria-live=\"polite\"\n        >\n          <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n          <span>Loading\u2026</span>\n        </div>\n        <!-- Synthetic load-more row (more children available on backend) -->\n        <button\n          *ngIf=\"row.kind === 'load-more'\"\n          type=\"button\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          class=\"cqa-flex cqa-items-center cqa-w-full cqa-py-1.5 cqa-text-sm cqa-text-indigo-600 hover:cqa-bg-[#D8D9FC] cqa-text-left\"\n          (click)=\"onLoadMore(row.node); $event.stopPropagation()\"\n        >\n          <span>Load more ({{ (row.node.totalChildren ?? 0) - (row.node.children?.length ?? 0) }})</span>\n        </button>\n        <!-- Real folder row -->\n        <div\n          *ngIf=\"row.kind === 'folder'\"\n          role=\"treeitem\"\n          tabindex=\"0\"\n          [attr.aria-expanded]=\"row.hasChildren ? isExpanded(row.node.id) : null\"\n          [attr.aria-selected]=\"isSelected(row.node.id)\"\n          [attr.data-folder-row-id]=\"row.node.id\"\n          [cqaFolderDrop]=\"row.node.id\"\n          [dropEnabled]=\"allowDrop\"\n          (testsDropped)=\"rowDropped(row.node.id, $event)\"\n          (folderDropped)=\"onFolderRowDropped(row.node.id, $event)\"\n          [cqaFolderDrag]=\"row.node.id\"\n          [dragEnabled]=\"allowDrop\"\n          (dragstart)=\"onFolderDragStart(row.node)\"\n          (dragend)=\"onFolderDragEnd()\"\n          (dragover)=\"onFolderRowDragOver(row)\"\n          (dragleave)=\"onFolderRowDragLeave(row)\"\n          (click)=\"onSelect(row.node)\"\n          (contextmenu)=\"openContextMenu(row.node, $event)\"\n          (keydown)=\"onRowKeydown($event, row, i)\"\n          class=\"cqa-group cqa-flex cqa-items-center cqa-gap-1 cqa-pr-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-[#D8D9FC] focus:cqa-outline-none focus:cqa-bg-[#D8D9FC] cqa-relative\"\n          [style.background-color]=\"(isSelected(row.node.id) || contextMenuFolderId === row.node.id) ? '#D8D9FC' : null\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          [attr.title]=\"folderRowTooltip(row.node)\"\n        >\n          <span\n            *ngIf=\"isSelected(row.node.id)\"\n            class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n          ></span>\n          <button\n            type=\"button\"\n            class=\"cqa-p-0\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\n            (click)=\"onToggle(row.node, $event)\"\n            [attr.aria-label]=\"isExpanded(row.node.id) ? 'Collapse' : 'Expand'\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">\n              {{ isExpanded(row.node.id) ? 'expand_more' : 'chevron_right' }}\n            </mat-icon>\n          </button>\n          <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: row.node.color }\"></ng-container>\n\n          <ng-container *ngIf=\"renamingId === row.node.id; else nameTpl\">\n            <input\n              type=\"text\"\n              size=\"1\"\n              [attr.data-folder-rename-input]=\"row.node.id\"\n              [attr.maxlength]=\"renameMaxLength\"\n              class=\"cqa-flex-1 cqa-min-w-0 cqa-w-full cqa-px-2 cqa-py-0.5 cqa-rounded cqa-border cqa-bg-white cqa-text-sm cqa-shadow-sm focus:cqa-outline-none focus:cqa-ring-1\"\n              [ngClass]=\"(isRenameDraftValid && !renameLimitFlash)\n                ? 'cqa-border-neutral-300 focus:cqa-border-indigo-400 focus:cqa-ring-indigo-200'\n                : 'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-[#FCA5A5]'\"\n              [attr.aria-invalid]=\"!isRenameDraftValid || renameLimitFlash\"\n              [(ngModel)]=\"renameDraft\"\n              (keydown)=\"onRenameKey($event, row.node)\"\n              (keypress)=\"$event.stopPropagation()\"\n              (keyup)=\"$event.stopPropagation()\"\n              (blur)=\"commitRename(row.node)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </ng-container>\n          <ng-template #nameTpl>\n            <span\n              class=\"cqa-flex-1 cqa-text-sm cqa-truncate\"\n              [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n              (dblclick)=\"beginRename(row.node, $event)\"\n            >{{ row.node.name }}</span>\n          </ng-template>\n\n          <!-- Saving indicator: replaces the count while the host's rename/save\n               API call is in flight, so the user gets immediate feedback. -->\n          <span\n            *ngIf=\"isFolderSaving(row.node.id)\"\n            class=\"cqa-flex cqa-items-center cqa-ml-1 cqa-flex-shrink-0\"\n            aria-live=\"polite\"\n            [attr.aria-label]=\"'Saving ' + row.node.name\"\n          >\n            <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 12 }\"></ng-container>\n          </span>\n\n          <!-- Count shown at rest; hidden on row hover when delete is allowed -->\n          <span\n            *ngIf=\"!isFolderSaving(row.node.id) && showCounts && row.node.count != null\"\n            class=\"cqa-text-xs cqa-tabular-nums cqa-ml-1\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [class.group-hover:cqa-hidden]=\"allowDelete\"\n          >{{ row.node.count }}</span>\n\n          <button\n            *ngIf=\"hasAnyContextAction\"\n            type=\"button\"\n            class=\"cqa-p-0.5 cqa-rounded hover:cqa-bg-neutral-200\"\n            [style.color]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id ? '#3F43EE' : '#4C4C51'\"\n            [class.cqa-hidden]=\"contextMenuFolderId !== row.node.id\"\n            [class.group-hover:cqa-inline-flex]=\"true\"\n            [class.cqa-inline-flex]=\"contextMenuFolderId === row.node.id\"\n            (click)=\"openContextMenu(row.node, $event)\"\n            [attr.aria-label]=\"'Open actions for ' + row.node.name\"\n            [attr.aria-haspopup]=\"'menu'\"\n            [attr.aria-expanded]=\"contextMenuFolderId === row.node.id\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">more_horiz</mat-icon>\n          </button>\n        </div>\n      </ng-container>\n      <!-- Root-level pagination is now driven by scroll (see `(scroll)` on the\n           tree container above). Per-folder children retain the explicit\n           \"Load more\" button rendered inside the rows loop above, since\n           subtrees aren't independently scrollable. -->\n      <!-- Pagination spinner \u2014 visible only when fetching an additional page\n           of roots (folders.length > 0 distinguishes from initial-load case). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length > 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-2\"\n        aria-live=\"polite\"\n      >\n        <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n      </div>\n    </div>\n      </div>\n    </div>\n\n    <!-- Divider between folder tree and pinned Unorganized tab -->\n    <div\n      aria-hidden=\"true\"\n      class=\"cqa-mx-3 cqa-flex-shrink-0\"\n      style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n    ></div>\n\n    <!-- Unorganized \u2014 pinned below the scrollable folder tree so it stays visible regardless of folder count -->\n    <div\n      role=\"treeitem\"\n      tabindex=\"0\"\n      [attr.aria-selected]=\"isSelected(null)\"\n      class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-[#D8D9FC] focus:cqa-outline-none focus:cqa-bg-[#D8D9FC] cqa-relative cqa-flex-shrink-0\"\n      [style.background-color]=\"isSelected(null) ? '#D8D9FC' : null\"\n      [cqaFolderDrop]=\"null\"\n      [dropEnabled]=\"allowDrop\"\n      (testsDropped)=\"rowDropped(null, $event)\"\n      (folderDropped)=\"onFolderRowDropped(null, $event)\"\n      (click)=\"onSelectUnorganized()\"\n    >\n      <span\n        *ngIf=\"isSelected(null)\"\n        class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n      ></span>\n      <mat-icon [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n      <span class=\"cqa-flex-1 cqa-text-sm\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ labels.unorganized }}</span>\n      <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-tabular-nums\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ unorganizedCount }}</span>\n    </div>\n\n    <!-- Folder context menu (right-click / ellipsis). A 0\u00D70 fixed-position\n         anchor at the click coords drives a cdkConnectedOverlay; CDK's\n         flexible-connected positioning auto-flips up/left when the menu\n         would overflow the viewport (last-folder-near-bottom case). -->\n    <div #ctxAnchor cdkOverlayOrigin\n         class=\"cqa-fixed cqa-w-0 cqa-h-0 cqa-pointer-events-none\"\n         [style.left.px]=\"contextMenuPosition.x\"\n         [style.top.px]=\"contextMenuPosition.y\"></div>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"ctxAnchor\"\n      [cdkConnectedOverlayOpen]=\"contextMenuFolderId !== null\"\n      [cdkConnectedOverlayPositions]=\"contextMenuPositions\"\n      [cdkConnectedOverlayHasBackdrop]=\"false\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"false\"\n      [cdkConnectedOverlayPush]=\"true\"\n      (overlayOutsideClick)=\"onOverlayOutsideClick()\"\n      (detach)=\"closeContextMenu()\"\n    >\n      <!-- The lib's tailwind config sets important: '.cqa-ui-root', which\n           emits descendant selectors like `.cqa-ui-root .cqa-bg-white`.\n           CDK Overlay teleports this template into the global overlay\n           container (outside the host's cqa-ui-root), so we wrap the menu in\n           an ancestor cqa-ui-root div to re-establish the utility scope. -->\n      <div class=\"cqa-ui-root\">\n      <div\n        role=\"menu\"\n        class=\"cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n        (click)=\"$event.stopPropagation()\"\n        (contextmenu)=\"$event.preventDefault(); $event.stopPropagation()\"\n      >\n        <ng-container *ngIf=\"folderById(contextMenuFolderId) as menuNode\">\n          <button\n            *ngIf=\"allowCreate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextCreateSubfolder(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">create_new_folder</mat-icon>\n            <span>{{ labels.folderMenuCreateSubfolder }}</span>\n          </button>\n          <button\n            *ngIf=\"allowRename\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextRename(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">edit</mat-icon>\n            <span>{{ labels.folderMenuRename }}</span>\n          </button>\n          <button\n            *ngIf=\"allowMove\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextMove(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">drive_file_move</mat-icon>\n            <span>{{ labels.folderMenuMove }}</span>\n          </button>\n          <button\n            *ngIf=\"allowDuplicate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextDuplicate(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">content_copy</mat-icon>\n            <span>{{ labels.folderMenuDuplicate }}</span>\n          </button>\n          <div *ngIf=\"allowDelete && (allowCreate || allowRename || allowMove || allowDuplicate)\" class=\"cqa-h-px cqa-my-1\" style=\"background-color: #E5E7EB;\"></div>\n          <button\n            *ngIf=\"allowDelete\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-red-600 hover:cqa-bg-red-50 cqa-text-left\"\n            (click)=\"onContextDelete(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">delete_outline</mat-icon>\n            <span>{{ labels.folderMenuDelete }}</span>\n          </button>\n        </ng-container>\n      </div>\n      </div>\n    </ng-template>\n\n  </ng-container>\n  </div>\n</aside>\n", styles: [] }]
+            args: [{ selector: 'cqa-folder-sidebar', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Reusable indeterminate loading spinner. Render via\n     <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>. -->\n<ng-template #loadingSpinner let-size=\"size\">\n  <svg [attr.width]=\"size || 16\" [attr.height]=\"size || 16\" viewBox=\"0 0 50 50\" aria-label=\"loading\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"></circle>\n    <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n      <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"></animateTransform>\n    </path>\n  </svg>\n</ng-template>\n\n<!-- Reusable folder icon. Render via <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: node.color }\"></ng-container>. -->\n<ng-template #folderIcon let-color=\"color\">\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-flex-shrink-0\">\n    <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" [attr.stroke]=\"color || '#99999E'\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<aside\n  class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-h-full cqa-min-h-0\"\n  [class.cqa-border]=\"!collapsed\"\n  [class.cqa-border-neutral-200]=\"!collapsed\"\n  [class.cqa-rounded-lg]=\"!collapsed\"\n  [style.width.px]=\"collapsed ? 22 : 240\"\n  style=\"overflow: hidden; transition: width 260ms cubic-bezier(0.4, 0, 0.2, 1);\"\n>\n  <!-- Collapsed rail: the entire sidebar becomes a single click target so the\n       slim strip reads as an obvious \"expand me\" handle. -->\n  <button\n    *ngIf=\"collapsed\"\n    type=\"button\"\n    style=\"width: 22px;\"\n    class=\"cqa-group cqa-flex cqa-flex-col cqa-items-center cqa-flex-shrink-0 cqa-h-full cqa-py-2 cqa-gap-3 cqa-bg-neutral-50 cqa-border cqa-border-neutral-200 cqa-text-neutral-500 hover:cqa-bg-indigo-50 hover:cqa-border-indigo-200 hover:cqa-text-indigo-600 focus:cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-indigo-200 cqa-cursor-pointer\"\n    (click)=\"togglePanel()\"\n    [attr.aria-label]=\"'Expand folders panel'\"\n    [title]=\"'Expand folders panel'\"\n  >\n    <mat-icon style=\"font-size:16px;width:16px;height:16px\">chevron_right</mat-icon>\n    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center\" aria-hidden=\"true\">\n      <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" stroke=\"currentColor\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </span>\n  </button>\n\n  <div *ngIf=\"!collapsed\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-h-0 cqa-pb-2\" style=\"width: 240px;\">\n  <!-- Header (expanded) -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-justify-between cqa-py-1 cqa-px-3\"\n    style=\"border-bottom: 1px solid #E2E2E3; margin-bottom: 8px;\"\n  >\n    <span class=\"cqa-text-sm cqa-font-semibold cqa-text-neutral-900 cqa-py-0.5\">{{ labels.folders }}</span>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <button\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"togglePanel()\"\n        [attr.aria-label]=\"'Collapse folders panel'\"\n        [title]=\"'Collapse folders panel'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">keyboard_double_arrow_left</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100\"\n        [class.cqa-text-neutral-500]=\"!searchVisible\"\n        [class.cqa-text-indigo-600]=\"searchVisible\"\n        [class.cqa-bg-neutral-100]=\"searchVisible\"\n        (click)=\"toggleSearchVisible()\"\n        [attr.aria-label]=\"searchVisible ? 'Hide folder search' : 'Search folders'\"\n        [attr.aria-pressed]=\"searchVisible\"\n        [title]=\"searchVisible ? 'Hide folder search' : 'Search folders'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">search</mat-icon>\n      </button>\n      <button\n        *ngIf=\"allowCreate\"\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"requestCreate(null)\"\n        [attr.aria-label]=\"labels.newFolder\"\n        [title]=\"labels.newFolder\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container>\n    <!-- Search (toggled via the search icon in the header) -->\n    <div\n      class=\"cqa-grid\"\n      style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n      [style.grid-template-rows]=\"searchVisible ? '1fr' : '0fr'\"\n    >\n      <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n        <div class=\"cqa-px-3 cqa-pb-2\">\n          <div class=\"cqa-relative\">\n            <cqa-search-bar\n              size=\"sm\"\n              [fullWidth]=\"true\"\n              [value]=\"searchValue\"\n              [autoFocus]=\"searchVisible\"\n              [placeholder]=\"labels.searchFoldersPlaceholder\"\n              [showClear]=\"true\"\n              (valueChange)=\"onSearchInput($event)\"\n              (cleared)=\"onSearchClear()\"\n            ></cqa-search-bar>\n            <span\n              *ngIf=\"folderSearchLoading\"\n              class=\"cqa-absolute cqa-right-8 cqa-inset-y-0 cqa-flex cqa-items-center\"\n              aria-live=\"polite\"\n              aria-label=\"Searching folders\"\n            >\n              <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Organized section header \u2014 visually distinct from folder rows so it reads\n         as a view/section toggle rather than a folder item. -->\n    <button\n      type=\"button\"\n      class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-px-3 cqa-py-1 cqa-text-left cqa-text-[#6D6D74] hover:cqa-text-[#3F43EE] focus:cqa-outline-none focus:cqa-text-[#3F43EE] cqa-flex-shrink-0 cqa-uppercase\"\n      (click)=\"toggleFoldersAccordion()\"\n      [attr.aria-expanded]=\"foldersAccordionExpanded\"\n      [attr.aria-label]=\"foldersAccordionExpanded ? 'Collapse organized folders' : 'Expand organized folders'\"\n    >\n      <span class=\"cqa-text-[11px] cqa-font-semibold cqa-tracking-wider\">{{ labels.organized }}</span>\n      <mat-icon\n        style=\"font-size:16px;width:16px;height:16px;transition: transform 200ms ease;\"\n        [style.transform]=\"foldersAccordionExpanded ? 'rotate(0deg)' : 'rotate(-90deg)'\"\n      >expand_more</mat-icon>\n    </button>\n\n    <!-- Tree (folders only \u2014 Unorganized sits directly below; tree caps at 60vh and scrolls when overflowing).\n         Scroll-based lazy-loading at the root level: nearing the bottom emits\n         `rootLoadMoreRequested`, which the host responds to by fetching the\n         next page of roots. -->\n    <div\n      class=\"cqa-grid cqa-min-h-0\"\n      style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n      [style.grid-template-rows]=\"foldersAccordionExpanded ? '1fr' : '0fr'\"\n    >\n      <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n    <div role=\"tree\" class=\"cqa-min-h-0 cqa-max-h-[40vh] cqa-overflow-y-auto cqa-py-1 cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n         (scroll)=\"onTreeScroll($event)\">\n      <!-- Initial-load spinner: only renders when we have no folders yet AND\n           no search active (search has its own inline spinner). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length === 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-6\"\n        aria-live=\"polite\"\n      >\n        <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>\n      </div>\n      <div\n        *ngIf=\"searchValue?.trim() && rows.length === 0 && !folderSearchLoading\"\n        class=\"cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-neutral-500 cqa-text-center\"\n      >\n        {{ labels.noFoldersFound }}\n      </div>\n      <div\n        *ngIf=\"!rootFoldersLoading && folders.length === 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-text-center cqa-px-4 cqa-py-6 cqa-gap-2\"\n      >\n        <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-neutral-100 cqa-text-neutral-400\">\n          <mat-icon style=\"font-size:22px;width:22px;height:22px\">folder_open</mat-icon>\n        </span>\n        <span class=\"cqa-text-sm cqa-font-medium cqa-text-neutral-700\">{{ labels.noFoldersFound }}</span>\n        <span *ngIf=\"allowCreate\" class=\"cqa-text-xs cqa-text-neutral-500 cqa-leading-snug\">\n          {{ labels.noFoldersEmptyDescription }}\n        </span>\n      </div>\n      <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n        <!-- Synthetic loading row (lazy fetch in flight) -->\n        <div\n          *ngIf=\"row.kind === 'loading'\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-1.5 cqa-text-sm cqa-text-neutral-500\"\n          aria-live=\"polite\"\n        >\n          <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n          <span>Loading\u2026</span>\n        </div>\n        <!-- Synthetic load-more row (more children available on backend) -->\n        <button\n          *ngIf=\"row.kind === 'load-more'\"\n          type=\"button\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          class=\"cqa-flex cqa-items-center cqa-w-full cqa-py-1.5 cqa-text-sm cqa-text-indigo-600 hover:cqa-bg-[#D8D9FC] cqa-text-left\"\n          (click)=\"onLoadMore(row.node); $event.stopPropagation()\"\n        >\n          <span>Load more ({{ (row.node.totalChildren ?? 0) - (row.node.children?.length ?? 0) }})</span>\n        </button>\n        <!-- Real folder row -->\n        <div\n          *ngIf=\"row.kind === 'folder'\"\n          role=\"treeitem\"\n          tabindex=\"0\"\n          [attr.aria-expanded]=\"row.hasChildren ? isExpanded(row.node.id) : null\"\n          [attr.aria-selected]=\"isSelected(row.node.id)\"\n          [attr.data-folder-row-id]=\"row.node.id\"\n          [cqaFolderDrop]=\"row.node.id\"\n          [dropEnabled]=\"allowDrop\"\n          (testsDropped)=\"rowDropped(row.node.id, $event)\"\n          (folderDropped)=\"onFolderRowDropped(row.node.id, $event)\"\n          [cqaFolderDrag]=\"row.node.id\"\n          [dragEnabled]=\"allowDrop\"\n          (dragstart)=\"onFolderDragStart(row.node)\"\n          (dragend)=\"onFolderDragEnd()\"\n          (dragover)=\"onFolderRowDragOver(row)\"\n          (dragleave)=\"onFolderRowDragLeave(row)\"\n          (click)=\"onSelect(row.node)\"\n          (contextmenu)=\"openContextMenu(row.node, $event)\"\n          (keydown)=\"onRowKeydown($event, row, i)\"\n          class=\"cqa-group cqa-flex cqa-items-center cqa-gap-1 cqa-pr-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-[#D8D9FC] focus:cqa-outline-none focus:cqa-bg-[#D8D9FC] cqa-relative\"\n          [style.background-color]=\"renamingId === row.node.id ? '#FFFFFF' : ((isSelected(row.node.id) || contextMenuFolderId === row.node.id) ? '#D8D9FC' : null)\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          [attr.title]=\"folderRowTooltip(row.node)\"\n        >\n          <span\n            *ngIf=\"isSelected(row.node.id)\"\n            class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n          ></span>\n          <button\n            type=\"button\"\n            class=\"cqa-p-0\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\n            (click)=\"onToggle(row.node, $event)\"\n            [attr.aria-label]=\"isExpanded(row.node.id) ? 'Collapse' : 'Expand'\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">\n              {{ isExpanded(row.node.id) ? 'expand_more' : 'chevron_right' }}\n            </mat-icon>\n          </button>\n          <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: row.node.color }\"></ng-container>\n\n          <ng-container *ngIf=\"renamingId === row.node.id; else nameTpl\">\n            <input\n              type=\"text\"\n              size=\"1\"\n              [attr.data-folder-rename-input]=\"row.node.id\"\n              [attr.maxlength]=\"renameMaxLength\"\n              class=\"cqa-flex-1 cqa-min-w-0 cqa-w-full cqa-px-2 cqa-py-0.5 cqa-rounded cqa-border cqa-bg-white cqa-text-sm cqa-shadow-sm focus:cqa-outline-none focus:cqa-ring-1\"\n              [ngClass]=\"(isRenameDraftValid && !renameLimitFlash)\n                ? 'cqa-border-neutral-300 focus:cqa-border-indigo-400 focus:cqa-ring-indigo-200'\n                : 'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-[#FCA5A5]'\"\n              [attr.aria-invalid]=\"!isRenameDraftValid || renameLimitFlash\"\n              [(ngModel)]=\"renameDraft\"\n              (keydown)=\"onRenameKey($event, row.node)\"\n              (keypress)=\"$event.stopPropagation()\"\n              (keyup)=\"$event.stopPropagation()\"\n              (blur)=\"commitRename(row.node)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </ng-container>\n          <ng-template #nameTpl>\n            <span\n              class=\"cqa-flex-1 cqa-text-sm cqa-truncate\"\n              [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n              (dblclick)=\"beginRename(row.node, $event)\"\n            >{{ row.node.name }}</span>\n          </ng-template>\n\n          <!-- Saving indicator: replaces the count while the host's rename/save\n               API call is in flight, so the user gets immediate feedback. -->\n          <span\n            *ngIf=\"isFolderSaving(row.node.id)\"\n            class=\"cqa-flex cqa-items-center cqa-ml-1 cqa-flex-shrink-0\"\n            aria-live=\"polite\"\n            [attr.aria-label]=\"'Saving ' + row.node.name\"\n          >\n            <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 12 }\"></ng-container>\n          </span>\n\n          <!-- Count shown at rest; hidden on row hover when delete is allowed -->\n          <span\n            *ngIf=\"!isFolderSaving(row.node.id) && showCounts && row.node.count != null\"\n            class=\"cqa-text-xs cqa-tabular-nums cqa-ml-1\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [class.group-hover:cqa-hidden]=\"allowDelete\"\n          >{{ row.node.count }}</span>\n\n          <button\n            *ngIf=\"hasAnyContextAction\"\n            type=\"button\"\n            class=\"cqa-p-0.5 cqa-rounded hover:cqa-bg-neutral-200\"\n            [style.color]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id ? '#3F43EE' : '#4C4C51'\"\n            [class.cqa-hidden]=\"contextMenuFolderId !== row.node.id\"\n            [class.group-hover:cqa-inline-flex]=\"true\"\n            [class.cqa-inline-flex]=\"contextMenuFolderId === row.node.id\"\n            (click)=\"openContextMenu(row.node, $event)\"\n            [attr.aria-label]=\"'Open actions for ' + row.node.name\"\n            [attr.aria-haspopup]=\"'menu'\"\n            [attr.aria-expanded]=\"contextMenuFolderId === row.node.id\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">more_horiz</mat-icon>\n          </button>\n        </div>\n      </ng-container>\n      <!-- Root-level pagination is now driven by scroll (see `(scroll)` on the\n           tree container above). Per-folder children retain the explicit\n           \"Load more\" button rendered inside the rows loop above, since\n           subtrees aren't independently scrollable. -->\n      <!-- Pagination spinner \u2014 visible only when fetching an additional page\n           of roots (folders.length > 0 distinguishes from initial-load case). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length > 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-2\"\n        aria-live=\"polite\"\n      >\n        <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n      </div>\n    </div>\n      </div>\n    </div>\n\n    <!-- Divider between folder tree and pinned Unorganized tab -->\n    <div\n      aria-hidden=\"true\"\n      class=\"cqa-mx-3 cqa-flex-shrink-0\"\n      style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n    ></div>\n\n    <!-- Unorganized \u2014 pinned below the scrollable folder tree so it stays visible regardless of folder count -->\n    <div\n      role=\"treeitem\"\n      tabindex=\"0\"\n      [attr.aria-selected]=\"isSelected(null)\"\n      class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-[#D8D9FC] focus:cqa-outline-none focus:cqa-bg-[#D8D9FC] cqa-relative cqa-flex-shrink-0\"\n      [style.background-color]=\"isSelected(null) ? '#D8D9FC' : null\"\n      [cqaFolderDrop]=\"null\"\n      [dropEnabled]=\"allowDrop\"\n      (testsDropped)=\"rowDropped(null, $event)\"\n      (folderDropped)=\"onFolderRowDropped(null, $event)\"\n      (click)=\"onSelectUnorganized()\"\n    >\n      <span\n        *ngIf=\"isSelected(null)\"\n        class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n      ></span>\n      <mat-icon [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n      <span class=\"cqa-flex-1 cqa-text-sm\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ labels.unorganized }}</span>\n      <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-tabular-nums\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ unorganizedCount }}</span>\n    </div>\n\n    <!-- Folder context menu (right-click / ellipsis). A 0\u00D70 fixed-position\n         anchor at the click coords drives a cdkConnectedOverlay; CDK's\n         flexible-connected positioning auto-flips up/left when the menu\n         would overflow the viewport (last-folder-near-bottom case). -->\n    <div #ctxAnchor cdkOverlayOrigin\n         class=\"cqa-fixed cqa-w-0 cqa-h-0 cqa-pointer-events-none\"\n         [style.left.px]=\"contextMenuPosition.x\"\n         [style.top.px]=\"contextMenuPosition.y\"></div>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"ctxAnchor\"\n      [cdkConnectedOverlayOpen]=\"contextMenuFolderId !== null\"\n      [cdkConnectedOverlayPositions]=\"contextMenuPositions\"\n      [cdkConnectedOverlayHasBackdrop]=\"false\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"false\"\n      [cdkConnectedOverlayPush]=\"true\"\n      (overlayOutsideClick)=\"onOverlayOutsideClick()\"\n      (detach)=\"closeContextMenu()\"\n    >\n      <!-- The lib's tailwind config sets important: '.cqa-ui-root', which\n           emits descendant selectors like `.cqa-ui-root .cqa-bg-white`.\n           CDK Overlay teleports this template into the global overlay\n           container (outside the host's cqa-ui-root), so we wrap the menu in\n           an ancestor cqa-ui-root div to re-establish the utility scope. -->\n      <div class=\"cqa-ui-root\">\n      <div\n        role=\"menu\"\n        class=\"cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n        (click)=\"$event.stopPropagation()\"\n        (contextmenu)=\"$event.preventDefault(); $event.stopPropagation()\"\n      >\n        <ng-container *ngIf=\"folderById(contextMenuFolderId) as menuNode\">\n          <button\n            *ngIf=\"allowCreate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextCreateSubfolder(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">create_new_folder</mat-icon>\n            <span>{{ labels.folderMenuCreateSubfolder }}</span>\n          </button>\n          <button\n            *ngIf=\"allowRename\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextRename(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">edit</mat-icon>\n            <span>{{ labels.folderMenuRename }}</span>\n          </button>\n          <button\n            *ngIf=\"allowMove\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextMove(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">drive_file_move</mat-icon>\n            <span>{{ labels.folderMenuMove }}</span>\n          </button>\n          <button\n            *ngIf=\"allowDuplicate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextDuplicate(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">content_copy</mat-icon>\n            <span>{{ labels.folderMenuDuplicate }}</span>\n          </button>\n          <div *ngIf=\"allowDelete && (allowCreate || allowRename || allowMove || allowDuplicate)\" class=\"cqa-h-px cqa-my-1\" style=\"background-color: #E5E7EB;\"></div>\n          <button\n            *ngIf=\"allowDelete\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-red-600 hover:cqa-bg-red-50 cqa-text-left\"\n            (click)=\"onContextDelete(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">delete_outline</mat-icon>\n            <span>{{ labels.folderMenuDelete }}</span>\n          </button>\n        </ng-container>\n      </div>\n      </div>\n    </ng-template>\n\n  </ng-container>\n  </div>\n</aside>\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { folders: [{
                 type: Input
             }], selectedFolderId: [{
@@ -9742,6 +9752,15 @@ class ModularTableTemplateComponent {
         this.viewMode = 'list';
         this.viewModeLabels = { list: 'List', modular: 'Modular' };
         this.viewModeChange = new EventEmitter();
+        // Stable reference fed to <cqa-segment-control [segments]>. A getter here
+        // allocates a new array each CD tick, which the segment control then sees as
+        // a changed Input — its updateIndicator runs inside a queueMicrotask, the
+        // zone re-ticks via onMicrotaskEmpty, and the loop pegs CPU at 100% with
+        // HTTP requests starved. Rebuilt only when viewModeLabels actually changes.
+        this.viewModeSegments = [
+            { label: 'List', value: 'list', icon: 'view_list' },
+            { label: 'Modular', value: 'modular', icon: 'folder' },
+        ];
         // Data input
         this.data = [];
         // Empty state inputs
@@ -10038,12 +10057,6 @@ class ModularTableTemplateComponent {
             return ids;
         };
     }
-    get viewModeSegments() {
-        return [
-            { label: this.viewModeLabels.list, value: 'list', icon: 'view_list' },
-            { label: this.viewModeLabels.modular, value: 'modular', icon: 'folder' },
-        ];
-    }
     onViewModeChange(value) {
         const next = value === 'modular' ? 'modular' : 'list';
         if (next !== this.viewMode) {
@@ -10201,6 +10214,12 @@ class ModularTableTemplateComponent {
         if (changes['selectedItems'] || changes['data']) {
             this.restoreSelectionState();
         }
+        if (changes['viewModeLabels']) {
+            this.viewModeSegments = [
+                { label: this.viewModeLabels.list, value: 'list', icon: 'view_list' },
+                { label: this.viewModeLabels.modular, value: 'modular', icon: 'folder' },
+            ];
+        }
         if (changes['reorderSaving'] && !changes['reorderSaving'].firstChange) {
             const nowSaving = !!changes['reorderSaving'].currentValue;
             // Host finished its bulk-update call — exit reorder mode.