@cqa-lib/cqa-ui 1.1.530 → 1.1.532

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

@@ -8921,6 +8921,11 @@ class FolderSidebarComponent {
         this.renameDraft = '';
         /** Inline rename uses the same name rules as the New Folder dialog. */
         this.renameMaxLength = 20;
+        /** Transient flag: turns the rename input red briefly when the user keystrokes
+         *  while already at `renameMaxLength`, so the silent maxlength clamp gets a
+         *  visible "you've hit the cap" signal. Cleared by `renameLimitFlashTimer`. */
+        this.renameLimitFlash = false;
+        this.renameLimitFlashTimer = null;
         /** Id of the folder whose context menu is open, or null when closed. */
         this.contextMenuFolderId = null;
         /** Viewport-anchored position (client coordinates) for the floating menu. */
@@ -9034,6 +9039,7 @@ class FolderSidebarComponent {
     cancelRename() {
         this.renamingId = null;
         this.renameDraft = '';
+        this.clearRenameLimitFlash();
         this.cdr.markForCheck();
     }
     onRenameKey(event, n) {
@@ -9047,11 +9053,54 @@ class FolderSidebarComponent {
             if (!this.isRenameDraftValid)
                 return;
             this.commitRename(n);
+            return;
         }
-        else if (event.key === 'Escape') {
+        if (event.key === 'Escape') {
             event.preventDefault();
             this.cancelRename();
+            return;
+        }
+        // For any other keystroke, detect "user is trying to type past maxlength" and
+        // briefly flash the input red. The browser's `maxlength` attribute already
+        // silently blocks the character; this surfaces a visible "you've hit the cap"
+        // signal that would otherwise be missing.
+        if (this.isPrintableKey(event) && this.wouldExceedRenameLimit(event)) {
+            this.triggerRenameLimitFlash();
+        }
+    }
+    isPrintableKey(event) {
+        // Single-character keys are printables (a, B, 1, !, space). Modifier-driven
+        // shortcuts (Ctrl/Meta) shouldn't count — they don't insert text.
+        return event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+    }
+    wouldExceedRenameLimit(event) {
+        // The new length after the keystroke would be: current - selectionLength + 1.
+        // If a selection covers part of the value, typing replaces that range, so the
+        // net length might still fit under the cap.
+        const target = event.target;
+        const start = target?.selectionStart ?? 0;
+        const end = target?.selectionEnd ?? 0;
+        const selectedLen = Math.max(0, end - start);
+        const draftLen = (this.renameDraft || '').length;
+        return draftLen - selectedLen >= this.renameMaxLength;
+    }
+    triggerRenameLimitFlash() {
+        this.renameLimitFlash = true;
+        if (this.renameLimitFlashTimer)
+            clearTimeout(this.renameLimitFlashTimer);
+        this.renameLimitFlashTimer = setTimeout(() => {
+            this.renameLimitFlash = false;
+            this.renameLimitFlashTimer = null;
+            this.cdr.markForCheck();
+        }, FolderSidebarComponent.RENAME_LIMIT_FLASH_MS);
+        this.cdr.markForCheck();
+    }
+    clearRenameLimitFlash() {
+        if (this.renameLimitFlashTimer) {
+            clearTimeout(this.renameLimitFlashTimer);
+            this.renameLimitFlashTimer = null;
         }
+        this.renameLimitFlash = false;
     }
     deleteFolder(n, event) {
         if (!this.allowDelete)
@@ -9245,6 +9294,7 @@ class FolderSidebarComponent {
     }
     ngOnDestroy() {
         this.clearAllExpandTimers();
+        this.clearRenameLimitFlash();
     }
     onRowKeydown(event, row, index) {
         const rows = this.rows;
@@ -9306,11 +9356,12 @@ class FolderSidebarComponent {
         }, 0);
     }
 }
+FolderSidebarComponent.RENAME_LIMIT_FLASH_MS = 600;
 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", unorganisedCount: "unorganisedCount", allowCreate: "allowCreate", allowRename: "allowRename", allowDelete: "allowDelete", allowMove: "allowMove", allowDuplicate: "allowDuplicate", allowDrop: "allowDrop", showCounts: "showCounts", collapsed: "collapsed", labels: "labels" }, outputs: { folderSelected: "folderSelected", folderExpansionToggled: "folderExpansionToggled", folderCreated: "folderCreated", folderCreateRequested: "folderCreateRequested", folderRenamed: "folderRenamed", folderDeleted: "folderDeleted", folderMoveRequested: "folderMoveRequested", folderDuplicateRequested: "folderDuplicateRequested", testsDropped: "testsDropped", folderDropped: "folderDropped", collapsedChange: "collapsedChange" }, host: { listeners: { "document:click": "onDocumentClick()", "document:keydown.escape": "onEscape()", "document:dragend": "onDocumentDragEnd()" }, classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<!-- 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-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-border cqa-border-neutral-200 cqa-rounded-lg cqa-h-full cqa-min-h-0\"\n  [class.cqa-w-[240px]]=\"!collapsed\"\n  [class.cqa-w-[48px]]=\"collapsed\"\n  style=\"transition: width 150ms ease;\"\n>\n  <!-- Header -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-3 cqa-py-3\">\n    <span *ngIf=\"!collapsed\" class=\"cqa-text-sm cqa-font-semibold cqa-text-neutral-900\">\n      {{ labels.folders }}\n    </span>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\" [class.cqa-w-full]=\"collapsed\" [class.cqa-justify-center]=\"collapsed\">\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]=\"collapsed ? 'Expand folders panel' : 'Collapse folders panel'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">\n          {{ collapsed ? 'chevron_right' : 'keyboard_double_arrow_left' }}\n        </mat-icon>\n      </button>\n      <button\n        *ngIf=\"!collapsed && 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 *ngIf=\"!collapsed\">\n    <!-- Search -->\n    <div class=\"cqa-px-3 cqa-pb-2\">\n      <cqa-search-bar\n        size=\"sm\"\n        [fullWidth]=\"true\"\n        [value]=\"searchValue\"\n        [placeholder]=\"labels.searchFoldersPlaceholder\"\n        [showClear]=\"true\"\n        (valueChange)=\"searchValue = $event\"\n        (cleared)=\"searchValue = ''\"\n      ></cqa-search-bar>\n    </div>\n\n    <!-- Tree (folders only \u2014 Unorganised is pinned below the scroll area) -->\n    <div role=\"tree\" class=\"cqa-flex-1 cqa-min-h-0 cqa-max-h-[60vh] 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      <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n        <div\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-neutral-50 focus:cqa-outline-none focus:cqa-bg-neutral-100 cqa-relative\"\n          [class.cqa-bg-indigo-50]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id\"\n          [style.paddingLeft.px]=\"8 + row.depth * 16\"\n          [attr.title]=\"row.node.totalCount != null ? (row.node.totalCount + ' total including subfolders') : null\"\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 cqa-text-neutral-400\"\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\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\"\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-text-neutral-800 cqa-truncate\"\n              (dblclick)=\"beginRename(row.node, $event)\"\n            >{{ row.node.name }}</span>\n          </ng-template>\n\n          <!-- Count shown at rest; hidden on row hover when delete is allowed -->\n          <span\n            *ngIf=\"showCounts && row.node.count != null\"\n            class=\"cqa-text-xs cqa-text-neutral-400 cqa-tabular-nums cqa-ml-1\"\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 cqa-text-neutral-500\"\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    </div>\n\n    <!-- Divider between folder tree and pinned Unorganised tab -->\n    <div\n      aria-hidden=\"true\"\n      class=\"cqa-mx-3 cqa-shrink-0\"\n      style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n    ></div>\n\n    <!-- Unorganised \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-neutral-50 focus:cqa-outline-none focus:cqa-bg-neutral-100 cqa-relative cqa-shrink-0\"\n      [class.cqa-bg-indigo-50]=\"isSelected(null)\"\n      [cqaFolderDrop]=\"null\"\n      [dropEnabled]=\"allowDrop\"\n      (testsDropped)=\"rowDropped(null, $event)\"\n      (folderDropped)=\"onFolderRowDropped(null, $event)\"\n      (click)=\"onSelectUnorganised()\"\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 class=\"cqa-text-neutral-500\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n      <span class=\"cqa-flex-1 cqa-text-sm cqa-text-neutral-700\">{{ labels.unorganised }}</span>\n      <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-text-neutral-400 cqa-tabular-nums\">{{ unorganisedCount }}</span>\n    </div>\n\n    <!-- Folder context menu (right-click / ellipsis). Anchored to viewport coords. -->\n    <div\n      *ngIf=\"contextMenuFolderId !== null\"\n      role=\"menu\"\n      class=\"cqa-fixed cqa-z-50 cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n      [style.left.px]=\"contextMenuPosition.x\"\n      [style.top.px]=\"contextMenuPosition.y\"\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-neutral-100 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-neutral-100 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-neutral-100 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-neutral-100 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-bg-neutral-200 cqa-my-1\"></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\n  </ng-container>\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.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: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { 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"] }], 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", unorganisedCount: "unorganisedCount", allowCreate: "allowCreate", allowRename: "allowRename", allowDelete: "allowDelete", allowMove: "allowMove", allowDuplicate: "allowDuplicate", allowDrop: "allowDrop", showCounts: "showCounts", collapsed: "collapsed", labels: "labels" }, outputs: { folderSelected: "folderSelected", folderExpansionToggled: "folderExpansionToggled", folderCreated: "folderCreated", folderCreateRequested: "folderCreateRequested", folderRenamed: "folderRenamed", folderDeleted: "folderDeleted", folderMoveRequested: "folderMoveRequested", folderDuplicateRequested: "folderDuplicateRequested", testsDropped: "testsDropped", folderDropped: "folderDropped", collapsedChange: "collapsedChange" }, host: { listeners: { "document:click": "onDocumentClick()", "document:keydown.escape": "onEscape()", "document:dragend": "onDocumentDragEnd()" }, classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<!-- 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-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-border cqa-border-neutral-200 cqa-rounded-lg cqa-h-full cqa-min-h-0\"\n  [class.cqa-w-[240px]]=\"!collapsed\"\n  [class.cqa-w-[48px]]=\"collapsed\"\n  style=\"transition: width 150ms ease;\"\n>\n  <!-- Header -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-3 cqa-py-3\">\n    <span *ngIf=\"!collapsed\" class=\"cqa-text-sm cqa-font-semibold cqa-text-neutral-900\">\n      {{ labels.folders }}\n    </span>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\" [class.cqa-w-full]=\"collapsed\" [class.cqa-justify-center]=\"collapsed\">\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]=\"collapsed ? 'Expand folders panel' : 'Collapse folders panel'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">\n          {{ collapsed ? 'chevron_right' : 'keyboard_double_arrow_left' }}\n        </mat-icon>\n      </button>\n      <button\n        *ngIf=\"!collapsed && 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 *ngIf=\"!collapsed\">\n    <!-- Search -->\n    <div class=\"cqa-px-3 cqa-pb-2\">\n      <cqa-search-bar\n        size=\"sm\"\n        [fullWidth]=\"true\"\n        [value]=\"searchValue\"\n        [placeholder]=\"labels.searchFoldersPlaceholder\"\n        [showClear]=\"true\"\n        (valueChange)=\"searchValue = $event\"\n        (cleared)=\"searchValue = ''\"\n      ></cqa-search-bar>\n    </div>\n\n    <!-- Tree (folders only \u2014 Unorganised is pinned below the scroll area) -->\n    <div role=\"tree\" class=\"cqa-flex-1 cqa-min-h-0 cqa-max-h-[60vh] 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      <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n        <div\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-neutral-50 focus:cqa-outline-none focus:cqa-bg-neutral-100 cqa-relative\"\n          [class.cqa-bg-indigo-50]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id\"\n          [style.paddingLeft.px]=\"8 + row.depth * 16\"\n          [attr.title]=\"row.node.totalCount != null ? (row.node.totalCount + ' total including subfolders') : null\"\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 cqa-text-neutral-400\"\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-text-neutral-800 cqa-truncate\"\n              (dblclick)=\"beginRename(row.node, $event)\"\n            >{{ row.node.name }}</span>\n          </ng-template>\n\n          <!-- Count shown at rest; hidden on row hover when delete is allowed -->\n          <span\n            *ngIf=\"showCounts && row.node.count != null\"\n            class=\"cqa-text-xs cqa-text-neutral-400 cqa-tabular-nums cqa-ml-1\"\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 cqa-text-neutral-500\"\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    </div>\n\n    <!-- Divider between folder tree and pinned Unorganised tab -->\n    <div\n      aria-hidden=\"true\"\n      class=\"cqa-mx-3 cqa-shrink-0\"\n      style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n    ></div>\n\n    <!-- Unorganised \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-neutral-50 focus:cqa-outline-none focus:cqa-bg-neutral-100 cqa-relative cqa-shrink-0\"\n      [class.cqa-bg-indigo-50]=\"isSelected(null)\"\n      [cqaFolderDrop]=\"null\"\n      [dropEnabled]=\"allowDrop\"\n      (testsDropped)=\"rowDropped(null, $event)\"\n      (folderDropped)=\"onFolderRowDropped(null, $event)\"\n      (click)=\"onSelectUnorganised()\"\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 class=\"cqa-text-neutral-500\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n      <span class=\"cqa-flex-1 cqa-text-sm cqa-text-neutral-700\">{{ labels.unorganised }}</span>\n      <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-text-neutral-400 cqa-tabular-nums\">{{ unorganisedCount }}</span>\n    </div>\n\n    <!-- Folder context menu (right-click / ellipsis). Anchored to viewport coords. -->\n    <div\n      *ngIf=\"contextMenuFolderId !== null\"\n      role=\"menu\"\n      class=\"cqa-fixed cqa-z-50 cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n      [style.left.px]=\"contextMenuPosition.x\"\n      [style.top.px]=\"contextMenuPosition.y\"\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-neutral-100 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-neutral-100 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-neutral-100 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-neutral-100 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-bg-neutral-200 cqa-my-1\"></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\n  </ng-container>\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.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: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { 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"] }], 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 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-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-border cqa-border-neutral-200 cqa-rounded-lg cqa-h-full cqa-min-h-0\"\n  [class.cqa-w-[240px]]=\"!collapsed\"\n  [class.cqa-w-[48px]]=\"collapsed\"\n  style=\"transition: width 150ms ease;\"\n>\n  <!-- Header -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-3 cqa-py-3\">\n    <span *ngIf=\"!collapsed\" class=\"cqa-text-sm cqa-font-semibold cqa-text-neutral-900\">\n      {{ labels.folders }}\n    </span>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\" [class.cqa-w-full]=\"collapsed\" [class.cqa-justify-center]=\"collapsed\">\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]=\"collapsed ? 'Expand folders panel' : 'Collapse folders panel'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">\n          {{ collapsed ? 'chevron_right' : 'keyboard_double_arrow_left' }}\n        </mat-icon>\n      </button>\n      <button\n        *ngIf=\"!collapsed && 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 *ngIf=\"!collapsed\">\n    <!-- Search -->\n    <div class=\"cqa-px-3 cqa-pb-2\">\n      <cqa-search-bar\n        size=\"sm\"\n        [fullWidth]=\"true\"\n        [value]=\"searchValue\"\n        [placeholder]=\"labels.searchFoldersPlaceholder\"\n        [showClear]=\"true\"\n        (valueChange)=\"searchValue = $event\"\n        (cleared)=\"searchValue = ''\"\n      ></cqa-search-bar>\n    </div>\n\n    <!-- Tree (folders only \u2014 Unorganised is pinned below the scroll area) -->\n    <div role=\"tree\" class=\"cqa-flex-1 cqa-min-h-0 cqa-max-h-[60vh] 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      <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n        <div\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-neutral-50 focus:cqa-outline-none focus:cqa-bg-neutral-100 cqa-relative\"\n          [class.cqa-bg-indigo-50]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id\"\n          [style.paddingLeft.px]=\"8 + row.depth * 16\"\n          [attr.title]=\"row.node.totalCount != null ? (row.node.totalCount + ' total including subfolders') : null\"\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 cqa-text-neutral-400\"\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\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\"\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-text-neutral-800 cqa-truncate\"\n              (dblclick)=\"beginRename(row.node, $event)\"\n            >{{ row.node.name }}</span>\n          </ng-template>\n\n          <!-- Count shown at rest; hidden on row hover when delete is allowed -->\n          <span\n            *ngIf=\"showCounts && row.node.count != null\"\n            class=\"cqa-text-xs cqa-text-neutral-400 cqa-tabular-nums cqa-ml-1\"\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 cqa-text-neutral-500\"\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    </div>\n\n    <!-- Divider between folder tree and pinned Unorganised tab -->\n    <div\n      aria-hidden=\"true\"\n      class=\"cqa-mx-3 cqa-shrink-0\"\n      style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n    ></div>\n\n    <!-- Unorganised \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-neutral-50 focus:cqa-outline-none focus:cqa-bg-neutral-100 cqa-relative cqa-shrink-0\"\n      [class.cqa-bg-indigo-50]=\"isSelected(null)\"\n      [cqaFolderDrop]=\"null\"\n      [dropEnabled]=\"allowDrop\"\n      (testsDropped)=\"rowDropped(null, $event)\"\n      (folderDropped)=\"onFolderRowDropped(null, $event)\"\n      (click)=\"onSelectUnorganised()\"\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 class=\"cqa-text-neutral-500\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n      <span class=\"cqa-flex-1 cqa-text-sm cqa-text-neutral-700\">{{ labels.unorganised }}</span>\n      <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-text-neutral-400 cqa-tabular-nums\">{{ unorganisedCount }}</span>\n    </div>\n\n    <!-- Folder context menu (right-click / ellipsis). Anchored to viewport coords. -->\n    <div\n      *ngIf=\"contextMenuFolderId !== null\"\n      role=\"menu\"\n      class=\"cqa-fixed cqa-z-50 cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n      [style.left.px]=\"contextMenuPosition.x\"\n      [style.top.px]=\"contextMenuPosition.y\"\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-neutral-100 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-neutral-100 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-neutral-100 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-neutral-100 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-bg-neutral-200 cqa-my-1\"></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\n  </ng-container>\n</aside>\n", styles: [] }]
+            args: [{ selector: 'cqa-folder-sidebar', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- 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-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-border cqa-border-neutral-200 cqa-rounded-lg cqa-h-full cqa-min-h-0\"\n  [class.cqa-w-[240px]]=\"!collapsed\"\n  [class.cqa-w-[48px]]=\"collapsed\"\n  style=\"transition: width 150ms ease;\"\n>\n  <!-- Header -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-3 cqa-py-3\">\n    <span *ngIf=\"!collapsed\" class=\"cqa-text-sm cqa-font-semibold cqa-text-neutral-900\">\n      {{ labels.folders }}\n    </span>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\" [class.cqa-w-full]=\"collapsed\" [class.cqa-justify-center]=\"collapsed\">\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]=\"collapsed ? 'Expand folders panel' : 'Collapse folders panel'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">\n          {{ collapsed ? 'chevron_right' : 'keyboard_double_arrow_left' }}\n        </mat-icon>\n      </button>\n      <button\n        *ngIf=\"!collapsed && 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 *ngIf=\"!collapsed\">\n    <!-- Search -->\n    <div class=\"cqa-px-3 cqa-pb-2\">\n      <cqa-search-bar\n        size=\"sm\"\n        [fullWidth]=\"true\"\n        [value]=\"searchValue\"\n        [placeholder]=\"labels.searchFoldersPlaceholder\"\n        [showClear]=\"true\"\n        (valueChange)=\"searchValue = $event\"\n        (cleared)=\"searchValue = ''\"\n      ></cqa-search-bar>\n    </div>\n\n    <!-- Tree (folders only \u2014 Unorganised is pinned below the scroll area) -->\n    <div role=\"tree\" class=\"cqa-flex-1 cqa-min-h-0 cqa-max-h-[60vh] 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      <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n        <div\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-neutral-50 focus:cqa-outline-none focus:cqa-bg-neutral-100 cqa-relative\"\n          [class.cqa-bg-indigo-50]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id\"\n          [style.paddingLeft.px]=\"8 + row.depth * 16\"\n          [attr.title]=\"row.node.totalCount != null ? (row.node.totalCount + ' total including subfolders') : null\"\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 cqa-text-neutral-400\"\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-text-neutral-800 cqa-truncate\"\n              (dblclick)=\"beginRename(row.node, $event)\"\n            >{{ row.node.name }}</span>\n          </ng-template>\n\n          <!-- Count shown at rest; hidden on row hover when delete is allowed -->\n          <span\n            *ngIf=\"showCounts && row.node.count != null\"\n            class=\"cqa-text-xs cqa-text-neutral-400 cqa-tabular-nums cqa-ml-1\"\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 cqa-text-neutral-500\"\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    </div>\n\n    <!-- Divider between folder tree and pinned Unorganised tab -->\n    <div\n      aria-hidden=\"true\"\n      class=\"cqa-mx-3 cqa-shrink-0\"\n      style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n    ></div>\n\n    <!-- Unorganised \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-neutral-50 focus:cqa-outline-none focus:cqa-bg-neutral-100 cqa-relative cqa-shrink-0\"\n      [class.cqa-bg-indigo-50]=\"isSelected(null)\"\n      [cqaFolderDrop]=\"null\"\n      [dropEnabled]=\"allowDrop\"\n      (testsDropped)=\"rowDropped(null, $event)\"\n      (folderDropped)=\"onFolderRowDropped(null, $event)\"\n      (click)=\"onSelectUnorganised()\"\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 class=\"cqa-text-neutral-500\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n      <span class=\"cqa-flex-1 cqa-text-sm cqa-text-neutral-700\">{{ labels.unorganised }}</span>\n      <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-text-neutral-400 cqa-tabular-nums\">{{ unorganisedCount }}</span>\n    </div>\n\n    <!-- Folder context menu (right-click / ellipsis). Anchored to viewport coords. -->\n    <div\n      *ngIf=\"contextMenuFolderId !== null\"\n      role=\"menu\"\n      class=\"cqa-fixed cqa-z-50 cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n      [style.left.px]=\"contextMenuPosition.x\"\n      [style.top.px]=\"contextMenuPosition.y\"\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-neutral-100 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-neutral-100 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-neutral-100 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-neutral-100 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-bg-neutral-200 cqa-my-1\"></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\n  </ng-container>\n</aside>\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { folders: [{
                 type: Input
             }], selectedFolderId: [{
@@ -10199,11 +10250,14 @@ class ModularTableTemplateComponent {
             return null;
         return this.findFolder(this.folders, this.selectedFolderId);
     }
-    /** Count of test cases directly under the currently-selected folder (excluding descendants). */
+    /** Count of test cases directly under the currently-selected folder (excluding descendants).
+     *  Reads `FolderNode.count` so the header badge matches the sidebar row count
+     *  (folder-sidebar.component.html renders the same `row.node.count`). Using
+     *  `filteredRows.length` here would only reflect the currently-rendered page. */
     get currentFolderDirectCount() {
         if (this.selectedFolderId == null)
             return 0;
-        return this.filteredRows.length;
+        return this.currentFolderNode?.count ?? 0;
     }
     /**
      * Renders the empty-state slot when the host explicitly opts in, OR when the