@cqa-lib/cqa-ui 1.1.527 → 1.1.529

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

@@ -948,6 +948,18 @@ class DialogComponent {
                 return 'filled';
         }
     }
+    isButtonDisabled(button) {
+        const d = button.disabled;
+        if (typeof d === 'function') {
+            try {
+                return !!d(this.dialogRef);
+            }
+            catch {
+                return false;
+            }
+        }
+        return !!d;
+    }
     buttonHostClasses(button) {
         const role = this.normalizeRole(button.role);
         if (role === 'warn') {
@@ -975,10 +987,10 @@ class DialogComponent {
     }
 }
 DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DialogComponent, selector: "cqa-dialog", host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-flex cqa-w-full cqa-justify-center cqa-px-4 sm:cqa-px-6\">\n    <div [ngClass]=\"panelClassList\" [ngStyle]=\"panelStyles\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-5\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n          <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-dialog\">\n            {{ config.title }}\n          </h2>\n\n          <p *ngIf=\"config.description\" class=\"cqa-text-sm cqa-leading-6 cqa-text-dialog-secondary\">\n            {{ config.description }}\n          </p>\n\n          <div *ngIf=\"config.warning\"\n            class=\"cqa-rounded-xl cqa-border cqa-border-red-200 cqa-bg-red-50 cqa-px-4 cqa-py-3 cqa-text-sm cqa-leading-5 cqa-text-red-700\">\n            {{ config.warning }}\n          </div>\n        </div>\n\n        <div class=\"cqa-text-sm cqa-text-dialog\" [class.hidden]=\"!contentAttached\">\n          <ng-template cdkPortalOutlet></ng-template>\n        </div>\n\n        <div class=\"cqa-mt-4 cqa-flex cqa-flex-wrap cqa-gap-3\" [ngClass]=\"buttonAlignmentClass\">\n          <cqa-button *ngFor=\"let button of config.buttons\" type=\"button\" [variant]=\"buttonVariant(button)\"\n            [ngClass]=\"buttonHostClasses(button)\" (clicked)=\"onButtonClick(button)\">\n            {{ button.label }}\n          </cqa-button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DialogComponent, selector: "cqa-dialog", host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-flex cqa-w-full cqa-justify-center cqa-px-4 sm:cqa-px-6\">\n    <div [ngClass]=\"panelClassList\" [ngStyle]=\"panelStyles\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-5\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n          <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-dialog\">\n            {{ config.title }}\n          </h2>\n\n          <p *ngIf=\"config.description\" class=\"cqa-text-sm cqa-leading-6 cqa-text-dialog-secondary\">\n            {{ config.description }}\n          </p>\n\n          <div *ngIf=\"config.warning\"\n            class=\"cqa-rounded-xl cqa-border cqa-border-red-200 cqa-bg-red-50 cqa-px-4 cqa-py-3 cqa-text-sm cqa-leading-5 cqa-text-red-700\">\n            {{ config.warning }}\n          </div>\n        </div>\n\n        <div class=\"cqa-text-sm cqa-text-dialog\" [class.hidden]=\"!contentAttached\">\n          <ng-template cdkPortalOutlet></ng-template>\n        </div>\n\n        <div class=\"cqa-mt-4 cqa-flex cqa-flex-wrap cqa-gap-3\" [ngClass]=\"buttonAlignmentClass\">\n          <cqa-button *ngFor=\"let button of config.buttons\" type=\"button\" [variant]=\"buttonVariant(button)\"\n            [disabled]=\"isButtonDisabled(button)\"\n            [ngClass]=\"buttonHostClasses(button)\" (clicked)=\"onButtonClick(button)\">\n            {{ button.label }}\n          </cqa-button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-dialog', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-flex cqa-w-full cqa-justify-center cqa-px-4 sm:cqa-px-6\">\n    <div [ngClass]=\"panelClassList\" [ngStyle]=\"panelStyles\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-5\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n          <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-dialog\">\n            {{ config.title }}\n          </h2>\n\n          <p *ngIf=\"config.description\" class=\"cqa-text-sm cqa-leading-6 cqa-text-dialog-secondary\">\n            {{ config.description }}\n          </p>\n\n          <div *ngIf=\"config.warning\"\n            class=\"cqa-rounded-xl cqa-border cqa-border-red-200 cqa-bg-red-50 cqa-px-4 cqa-py-3 cqa-text-sm cqa-leading-5 cqa-text-red-700\">\n            {{ config.warning }}\n          </div>\n        </div>\n\n        <div class=\"cqa-text-sm cqa-text-dialog\" [class.hidden]=\"!contentAttached\">\n          <ng-template cdkPortalOutlet></ng-template>\n        </div>\n\n        <div class=\"cqa-mt-4 cqa-flex cqa-flex-wrap cqa-gap-3\" [ngClass]=\"buttonAlignmentClass\">\n          <cqa-button *ngFor=\"let button of config.buttons\" type=\"button\" [variant]=\"buttonVariant(button)\"\n            [ngClass]=\"buttonHostClasses(button)\" (clicked)=\"onButtonClick(button)\">\n            {{ button.label }}\n          </cqa-button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-dialog', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-flex cqa-w-full cqa-justify-center cqa-px-4 sm:cqa-px-6\">\n    <div [ngClass]=\"panelClassList\" [ngStyle]=\"panelStyles\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-5\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n          <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-dialog\">\n            {{ config.title }}\n          </h2>\n\n          <p *ngIf=\"config.description\" class=\"cqa-text-sm cqa-leading-6 cqa-text-dialog-secondary\">\n            {{ config.description }}\n          </p>\n\n          <div *ngIf=\"config.warning\"\n            class=\"cqa-rounded-xl cqa-border cqa-border-red-200 cqa-bg-red-50 cqa-px-4 cqa-py-3 cqa-text-sm cqa-leading-5 cqa-text-red-700\">\n            {{ config.warning }}\n          </div>\n        </div>\n\n        <div class=\"cqa-text-sm cqa-text-dialog\" [class.hidden]=\"!contentAttached\">\n          <ng-template cdkPortalOutlet></ng-template>\n        </div>\n\n        <div class=\"cqa-mt-4 cqa-flex cqa-flex-wrap cqa-gap-3\" [ngClass]=\"buttonAlignmentClass\">\n          <cqa-button *ngFor=\"let button of config.buttons\" type=\"button\" [variant]=\"buttonVariant(button)\"\n            [disabled]=\"isButtonDisabled(button)\"\n            [ngClass]=\"buttonHostClasses(button)\" (clicked)=\"onButtonClick(button)\">\n            {{ button.label }}\n          </cqa-button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [] }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { portalOutlet: [{
                 type: ViewChild,
                 args: [CdkPortalOutlet, { static: true }]
@@ -7776,6 +7788,8 @@ const DEFAULT_MODULAR_LABELS = {
     newFolderDialogColorLabel: 'Folder color (optional)',
     newFolderDialogCancel: 'Cancel',
     newFolderDialogConfirm: 'Create folder',
+    newFolderDialogNameRequiredError: 'Folder name is required',
+    newFolderDialogNameMaxLengthError: 'Folder name cannot exceed 20 characters',
     folderMenuCreateSubfolder: 'Create subfolder',
     folderMenuRename: 'Rename',
     folderMenuMove: 'Move folder',
@@ -7831,6 +7845,14 @@ class MoveToFolderDialogComponent {
         this.currentFolderId = null;
         /** Controls which folder is visually selected. Two-way-bind friendly via `pickedFolderIdChange`. */
         this.pickedFolderId = null;
+        /** Disables the top-level "Unorganised / no folder" row. Decoupled from `currentFolderId`
+         *  so consumers that reuse this picker for non-move flows (e.g. parent-folder selection
+         *  inside the New Folder dialog) can keep the root option clickable. The move flows wire
+         *  this to `currentFolderId == null`. */
+        this.rootDisabled = false;
+        /** CSS height for the scrollable picker container. Lets embedders shrink the picker when
+         *  it shares space with other fields (e.g. inside the New Folder dialog). */
+        this.pickerHeight = '360px';
         /** Fires whenever the user picks a destination. */
         this.folderPicked = new EventEmitter();
         /** Companion output for banana-in-the-box `[(pickedFolderId)]` binding. */
@@ -7842,7 +7864,7 @@ class MoveToFolderDialogComponent {
         this.seedExpandedIds();
     }
     ngOnChanges(changes) {
-        if (changes['initialExpandedIds'] || changes['currentFolderId'] || changes['folders']) {
+        if (changes['initialExpandedIds'] || changes['currentFolderId'] || changes['pickedFolderId'] || changes['folders']) {
             this.seedExpandedIds();
         }
     }
@@ -7852,9 +7874,13 @@ class MoveToFolderDialogComponent {
             return;
         }
         this.expandedIds = new Set();
-        if (this.currentFolderId != null) {
+        // Prefer currentFolderId (the disabled "self" row) so the user lands on it; fall back
+        // to pickedFolderId so non-move flows (e.g. parent picker) still open with the
+        // pre-selected node visible.
+        const seed = this.currentFolderId != null ? this.currentFolderId : this.pickedFolderId;
+        if (seed != null) {
             const trail = [];
-            this.collectAncestors(this.folders, this.currentFolderId, trail);
+            this.collectAncestors(this.folders, seed, trail);
             trail.forEach(id => this.expandedIds.add(id));
         }
     }
@@ -7893,6 +7919,9 @@ class MoveToFolderDialogComponent {
     isPicked(id) {
         return this.pickedFolderId === id;
     }
+    get isUnorganisedDisabled() {
+        return this.rootDisabled;
+    }
     pick(id) {
         this.pickedFolderId = id;
         this.folderPicked.emit(id);
@@ -7911,7 +7940,7 @@ class MoveToFolderDialogComponent {
     }
 }
 MoveToFolderDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MoveToFolderDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MoveToFolderDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MoveToFolderDialogComponent, selector: "cqa-move-to-folder-dialog", inputs: { folders: "folders", labels: "labels", currentFolderId: "currentFolderId", pickedFolderId: "pickedFolderId", initialExpandedIds: "initialExpandedIds" }, outputs: { folderPicked: "folderPicked", pickedFolderIdChange: "pickedFolderIdChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: `
+MoveToFolderDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MoveToFolderDialogComponent, selector: "cqa-move-to-folder-dialog", inputs: { folders: "folders", labels: "labels", currentFolderId: "currentFolderId", pickedFolderId: "pickedFolderId", initialExpandedIds: "initialExpandedIds", rootDisabled: "rootDisabled", pickerHeight: "pickerHeight" }, outputs: { folderPicked: "folderPicked", pickedFolderIdChange: "pickedFolderIdChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: `
     <!-- Reusable outlined folder icon. Stroke uses currentColor so the row's text color drives the icon. -->
     <ng-template #folderIconTpl>
       <svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="cqa-shrink-0">
@@ -7926,16 +7955,19 @@ MoveToFolderDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
       </svg>
     </ng-template>
 
-    <div class="cqa-flex cqa-flex-col cqa-border-solid cqa-border cqa-border-[#E2E2E3] cqa-rounded-[10px] cqa-py-2 cqa-w-full cqa-h-[360px] cqa-overflow-y-auto cqa-bg-white cqa-scrollbar-thin">
+    <div class="cqa-flex cqa-flex-col cqa-border-solid cqa-border cqa-border-[#E2E2E3] cqa-rounded-[10px] cqa-py-2 cqa-w-full cqa-overflow-y-auto cqa-bg-white cqa-scrollbar-thin" [style.height]="pickerHeight">
       <!-- Unorganised (root / no folder) -->
       <div
         role="button"
         tabindex="0"
         class="cqa-flex cqa-items-center cqa-gap-2.5 cqa-px-4 cqa-py-2 cqa-cursor-pointer cqa-transition-colors cqa-text-sm"
         [ngClass]="isPicked(null) ? 'cqa-bg-indigo-50 cqa-text-indigo-700' : 'cqa-text-neutral-800 hover:cqa-bg-neutral-50'"
-        (click)="pick(null)"
-        (keydown.enter)="pick(null)"
-        (keydown.space)="$event.preventDefault(); pick(null)"
+        [class.cqa-opacity-40]="isUnorganisedDisabled"
+        [class.cqa-cursor-not-allowed]="isUnorganisedDisabled"
+        [attr.aria-disabled]="isUnorganisedDisabled || null"
+        (click)="!isUnorganisedDisabled && pick(null)"
+        (keydown.enter)="!isUnorganisedDisabled && pick(null)"
+        (keydown.space)="$event.preventDefault(); !isUnorganisedDisabled && pick(null)"
       >
         <!-- chevron-slot placeholder so all rows line up -->
         <span class="cqa-inline-block cqa-w-5 cqa-h-5 cqa-shrink-0"></span>
@@ -7996,16 +8028,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
       </svg>
     </ng-template>
 
-    <div class="cqa-flex cqa-flex-col cqa-border-solid cqa-border cqa-border-[#E2E2E3] cqa-rounded-[10px] cqa-py-2 cqa-w-full cqa-h-[360px] cqa-overflow-y-auto cqa-bg-white cqa-scrollbar-thin">
+    <div class="cqa-flex cqa-flex-col cqa-border-solid cqa-border cqa-border-[#E2E2E3] cqa-rounded-[10px] cqa-py-2 cqa-w-full cqa-overflow-y-auto cqa-bg-white cqa-scrollbar-thin" [style.height]="pickerHeight">
       <!-- Unorganised (root / no folder) -->
       <div
         role="button"
         tabindex="0"
         class="cqa-flex cqa-items-center cqa-gap-2.5 cqa-px-4 cqa-py-2 cqa-cursor-pointer cqa-transition-colors cqa-text-sm"
         [ngClass]="isPicked(null) ? 'cqa-bg-indigo-50 cqa-text-indigo-700' : 'cqa-text-neutral-800 hover:cqa-bg-neutral-50'"
-        (click)="pick(null)"
-        (keydown.enter)="pick(null)"
-        (keydown.space)="$event.preventDefault(); pick(null)"
+        [class.cqa-opacity-40]="isUnorganisedDisabled"
+        [class.cqa-cursor-not-allowed]="isUnorganisedDisabled"
+        [attr.aria-disabled]="isUnorganisedDisabled || null"
+        (click)="!isUnorganisedDisabled && pick(null)"
+        (keydown.enter)="!isUnorganisedDisabled && pick(null)"
+        (keydown.space)="$event.preventDefault(); !isUnorganisedDisabled && pick(null)"
       >
         <!-- chevron-slot placeholder so all rows line up -->
         <span class="cqa-inline-block cqa-w-5 cqa-h-5 cqa-shrink-0"></span>
@@ -8059,6 +8094,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], initialExpandedIds: [{
                 type: Input
+            }], rootDisabled: [{
+                type: Input
+            }], pickerHeight: [{
+                type: Input
             }], folderPicked: [{
                 type: Output
             }], pickedFolderIdChange: [{
@@ -8066,6 +8105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             }] } });
 
 const DEFAULT_FOLDER_COLOR = '#99999E';
+const FOLDER_NAME_MAX_LENGTH = 20;
 const PRESET_FOLDER_COLORS = [
     DEFAULT_FOLDER_COLOR,
     '#4F46E5',
@@ -8080,8 +8120,10 @@ const PRESET_FOLDER_COLORS = [
  * Body of the "New Folder" dialog.
  *
  * Uses reusable library components (`cqa-custom-input` for the name field,
- * `cqa-dynamic-select` for the parent dropdown) so hosts can drop this dialog
- * into their own modal shell without worrying about styling drift.
+ * `cqa-move-to-folder-dialog` as an embedded tree picker for the parent folder)
+ * so hosts can drop this dialog into their own modal shell without worrying
+ * about styling drift. The tree picker handles arbitrarily deep nesting via
+ * expand/collapse rather than a flat dropdown of "A › B › C ›…" paths.
  *
  * Two integration paths:
  *
@@ -8096,16 +8138,19 @@ const PRESET_FOLDER_COLORS = [
 class NewFolderDialogComponent {
     constructor(cdr) {
         this.cdr = cdr;
-        // NOTE: These inputs are declared as setters (instead of plain @Input fields)
-        // because `DialogService.open(...)` assigns the `inputs` map via direct
-        // property assignment *after* `attachComponent` has already run the
-        // component's `ngOnInit`. Direct assignment bypasses `ngOnChanges`, so without
-        // setters the `parentSelectConfig` would be built from a default empty folders
-        // array and the parent-folder dropdown would render empty / appear broken.
+        // NOTE: `folders` and `labels` are declared as setters (instead of plain @Input fields)
+        // because `DialogService.open(...)` assigns the `inputs` map via direct property
+        // assignment *after* `attachComponent` has already run the component's lifecycle
+        // hooks — direct assignment bypasses `ngOnChanges`, so setters keep derived state
+        // (e.g. `parentPickerLabels`) in sync no matter the assignment order.
         this._folders = [];
         this._labels = { ...DEFAULT_MODULAR_LABELS };
         this.name = '';
-        this._parentId = null;
+        /** Tracks whether the user has interacted with the name field, so we don't surface
+         *  the "required" error on first paint when the dialog opens with an empty name. */
+        this.nameTouched = false;
+        this.maxNameLength = FOLDER_NAME_MAX_LENGTH;
+        this.parentId = null;
         this.color = DEFAULT_FOLDER_COLOR;
         this.presetColors = PRESET_FOLDER_COLORS;
         this.rainbowBorder = 'conic-gradient(from 0deg, #ef4444, #f59e0b, #eab308, #10b981, #06b6d4, #4f46e5, #8b5cf6, #ec4899, #ef4444)';
@@ -8114,79 +8159,35 @@ class NewFolderDialogComponent {
         this.colorChange = new EventEmitter();
         this.submitted = new EventEmitter();
         this.cancelled = new EventEmitter();
-        /** Reactive form used by cqa-dynamic-select. Untyped to match the project's Angular 13.4 forms API. */
-        this.parentForm = new FormGroup({ parentId: new FormControl(null) });
-        this.parentOptions = [];
-        this.rebuildSelectConfig(); // ensure config exists even before first input set
+        /** Labels passed to the embedded tree picker. Re-uses the move-dialog surface but
+         *  rewrites the root row's label so it reads "(no parent)" instead of "Unorganised"
+         *  for the create-folder context. */
+        this.parentPickerLabels = this.buildParentPickerLabels();
     }
     set folders(value) {
         this._folders = value || [];
-        this.rebuildOptions();
-        this.rebuildSelectConfig();
+        this.cdr.markForCheck();
     }
     get folders() { return this._folders; }
     set labels(value) {
         this._labels = value || { ...DEFAULT_MODULAR_LABELS };
-        this.rebuildSelectConfig();
-    }
-    get labels() { return this._labels; }
-    set parentId(value) {
-        this._parentId = value ?? null;
-        this.syncParentControl();
-    }
-    get parentId() { return this._parentId; }
-    ngOnInit() {
-        // Setters above already rebuilt config once folders/labels were assigned. This
-        // just ensures the form control matches the current parentId value in case
-        // ordering of input assignment differs.
-        this.syncParentControl();
-    }
-    rebuildSelectConfig() {
-        this.parentSelectConfig = {
-            key: 'parentId',
-            label: this.labels.newFolderDialogParentLabel,
-            placeholder: this.labels.newFolderDialogParentNone,
-            searchable: false,
-            multiple: false,
-            closeOnSelect: true,
-            options: [
-                // `getOptionValue` in cqa-dynamic-select returns `id ?? value`, so using
-                // `value: null` (with no id) yields a stable `null` resolved value that
-                // matches the FormControl's null state.
-                { value: null, name: this.labels.newFolderDialogParentNone },
-                ...this.parentOptions.map(o => ({ id: o.id, name: o.label })),
-            ],
-        };
-    }
-    rebuildOptions() {
-        const opts = [];
-        const walk = (nodes, trail) => {
-            for (const n of nodes || []) {
-                const label = [...trail, n.name].join(' › ');
-                opts.push({ id: n.id, label });
-                if (n.children?.length)
-                    walk(n.children, [...trail, n.name]);
-            }
-        };
-        walk(this.folders, []);
-        this.parentOptions = opts;
+        this.parentPickerLabels = this.buildParentPickerLabels();
         this.cdr.markForCheck();
     }
-    syncParentControl() {
-        // Keep the reactive form in sync with the `parentId` input without bouncing events.
-        this.parentForm.get('parentId')?.setValue(this.parentId ?? null, { emitEvent: false });
+    get labels() { return this._labels; }
+    buildParentPickerLabels() {
+        return { ...this._labels, moveDialogRoot: this._labels.newFolderDialogParentNone };
     }
     onNameChange(value) {
         this.name = value;
+        this.nameTouched = true;
         this.nameChange.emit(value);
     }
-    onParentSelectionChange(event) {
-        // cqa-dynamic-select resolves options to `id ?? value`; option ids in the
-        // parent tree are numeric so we coerce defensively.
-        const raw = event?.value;
+    onParentPicked(id) {
+        // The tree picker emits `null` for the "(no parent)" sentinel; numeric otherwise.
         let next = null;
-        if (raw != null) {
-            const coerced = typeof raw === 'number' ? raw : Number(raw);
+        if (id != null) {
+            const coerced = typeof id === 'number' ? id : Number(id);
             if (Number.isFinite(coerced))
                 next = coerced;
         }
@@ -8213,9 +8214,26 @@ class NewFolderDialogComponent {
         if (target)
             this.onColorChange(target.value);
     }
-    /** Returns true when the current state is a valid submission (non-empty, trimmed name). */
+    /** Errors surfaced under the name field. Only computed once the user has touched
+     *  the input so the dialog doesn't open with a "required" error already showing. */
+    get nameErrors() {
+        if (!this.nameTouched)
+            return [];
+        const trimmed = (this.name || '').trim();
+        const errors = [];
+        if (!trimmed) {
+            errors.push(this.labels.newFolderDialogNameRequiredError);
+        }
+        else if (trimmed.length > this.maxNameLength) {
+            errors.push(this.labels.newFolderDialogNameMaxLengthError);
+        }
+        return errors;
+    }
+    /** Returns true when the current state is a valid submission (non-empty trimmed name
+     *  within the max length). Used by the host to gate the dialog's Create button. */
     get isValid() {
-        return !!(this.name || '').trim();
+        const trimmed = (this.name || '').trim();
+        return trimmed.length > 0 && trimmed.length <= this.maxNameLength;
     }
     submit() {
         if (!this.isValid)
@@ -8236,18 +8254,25 @@ NewFolderDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
         [required]="true"
         [placeholder]="labels.newFolderDialogNamePlaceholder"
         [value]="name"
+        [errors]="nameErrors"
         [fullWidth]="true"
         (valueChange)="onNameChange($event)"
         (enterPressed)="submit()"
       ></cqa-custom-input>
 
-      <!-- Parent folder -->
-      <cqa-dynamic-select
-        class="cqa-block cqa-w-full"
-        [form]="parentForm"
-        [config]="parentSelectConfig"
-        (selectionChange)="onParentSelectionChange($event)"
-      ></cqa-dynamic-select>
+      <!-- Parent folder — tree picker (handles arbitrarily deep nesting via expand/collapse) -->
+      <div class="cqa-flex cqa-flex-col cqa-gap-2">
+        <label class="cqa-text-sm cqa-font-medium cqa-text-neutral-700">
+          {{ labels.newFolderDialogParentLabel }}
+        </label>
+        <cqa-move-to-folder-dialog
+          [folders]="folders"
+          [labels]="parentPickerLabels"
+          [pickedFolderId]="parentId"
+          [pickerHeight]="'240px'"
+          (pickedFolderIdChange)="onParentPicked($event)"
+        ></cqa-move-to-folder-dialog>
+      </div>
 
       <!-- Folder color (optional) -->
       <div class="cqa-flex cqa-flex-col cqa-gap-2">
@@ -8306,7 +8331,7 @@ NewFolderDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
         </div>
       </div>
     </div>
-  `, isInline: true, components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: MoveToFolderDialogComponent, selector: "cqa-move-to-folder-dialog", inputs: ["folders", "labels", "currentFolderId", "pickedFolderId", "initialExpandedIds", "rootDisabled", "pickerHeight"], outputs: ["folderPicked", "pickedFolderIdChange"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewFolderDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-new-folder-dialog', template: `
@@ -8317,18 +8342,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
         [required]="true"
         [placeholder]="labels.newFolderDialogNamePlaceholder"
         [value]="name"
+        [errors]="nameErrors"
         [fullWidth]="true"
         (valueChange)="onNameChange($event)"
         (enterPressed)="submit()"
       ></cqa-custom-input>
 
-      <!-- Parent folder -->
-      <cqa-dynamic-select
-        class="cqa-block cqa-w-full"
-        [form]="parentForm"
-        [config]="parentSelectConfig"
-        (selectionChange)="onParentSelectionChange($event)"
-      ></cqa-dynamic-select>
+      <!-- Parent folder — tree picker (handles arbitrarily deep nesting via expand/collapse) -->
+      <div class="cqa-flex cqa-flex-col cqa-gap-2">
+        <label class="cqa-text-sm cqa-font-medium cqa-text-neutral-700">
+          {{ labels.newFolderDialogParentLabel }}
+        </label>
+        <cqa-move-to-folder-dialog
+          [folders]="folders"
+          [labels]="parentPickerLabels"
+          [pickedFolderId]="parentId"
+          [pickerHeight]="'240px'"
+          (pickedFolderIdChange)="onParentPicked($event)"
+        ></cqa-move-to-folder-dialog>
+      </div>
 
       <!-- Folder color (optional) -->
       <div class="cqa-flex cqa-flex-col cqa-gap-2">
@@ -8887,6 +8919,8 @@ class FolderSidebarComponent {
         this.searchValue = '';
         this.renamingId = null;
         this.renameDraft = '';
+        /** Inline rename uses the same name rules as the New Folder dialog. */
+        this.renameMaxLength = 20;
         /** 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. */
@@ -8972,9 +9006,20 @@ class FolderSidebarComponent {
         this.cdr.markForCheck();
         this.focusRenameInput(n.id);
     }
+    /** True when the active rename draft passes the name rules (non-empty, within max length). */
+    get isRenameDraftValid() {
+        const trimmed = (this.renameDraft || '').trim();
+        return trimmed.length > 0 && trimmed.length <= this.renameMaxLength;
+    }
     commitRename(n) {
+        // Discard invalid drafts (empty / too long) instead of committing a bad name.
+        // The user sees the red border while editing; on blur we revert to the original.
+        if (!this.isRenameDraftValid) {
+            this.cancelRename();
+            return;
+        }
         const name = (this.renameDraft || '').trim();
-        if (name && name !== n.name) {
+        if (name !== n.name) {
             // Emit the full renamed node (with the new name) + parent context so hosts can
             // call `PUT /test_case_folders/{id}` without re-resolving from their cached tree.
             const folder = { ...n, name };
@@ -8997,6 +9042,10 @@ class FolderSidebarComponent {
         event.stopPropagation();
         if (event.key === 'Enter') {
             event.preventDefault();
+            // Don't swallow the user's edit on Enter when the draft is invalid — keep
+            // the input open (red border already signals the issue) and let them fix it.
+            if (!this.isRenameDraftValid)
+                return;
             this.commitRename(n);
         }
         else if (event.key === 'Escape') {
@@ -9258,10 +9307,10 @@ class FolderSidebarComponent {
     }
 }
 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 + Unorganised tab) -->\n    <div role=\"tree\" class=\"cqa-flex-1 cqa-overflow-y-auto cqa-py-1\">\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              class=\"cqa-flex-1 cqa-min-w-0 cqa-w-full cqa-px-2 cqa-py-0.5 cqa-rounded cqa-border cqa-border-neutral-300 cqa-bg-white cqa-text-sm cqa-shadow-sm focus:cqa-outline-none focus:cqa-border-indigo-400 focus:cqa-ring-1 focus:cqa-ring-indigo-200\"\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\n      <!-- Divider between folder tree and Unorganised tab -->\n      <div\n        aria-hidden=\"true\"\n        class=\"cqa-mx-3\"\n        style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n      ></div>\n\n      <!-- Unorganised \u2014 flows with the tree, behaves like a tab item -->\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\"\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    </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.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\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 });
 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 + Unorganised tab) -->\n    <div role=\"tree\" class=\"cqa-flex-1 cqa-overflow-y-auto cqa-py-1\">\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              class=\"cqa-flex-1 cqa-min-w-0 cqa-w-full cqa-px-2 cqa-py-0.5 cqa-rounded cqa-border cqa-border-neutral-300 cqa-bg-white cqa-text-sm cqa-shadow-sm focus:cqa-outline-none focus:cqa-border-indigo-400 focus:cqa-ring-1 focus:cqa-ring-indigo-200\"\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\n      <!-- Divider between folder tree and Unorganised tab -->\n      <div\n        aria-hidden=\"true\"\n        class=\"cqa-mx-3\"\n        style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n      ></div>\n\n      <!-- Unorganised \u2014 flows with the tree, behaves like a tab item -->\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\"\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    </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\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: [] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { folders: [{
                 type: Input
             }], selectedFolderId: [{
@@ -10377,6 +10426,8 @@ class ModularTableTemplateComponent {
                     folders: this.folders,
                     labels: this.modularLabels,
                     currentFolderId: this.selectedFolderId,
+                    // When moving FROM Unorganised, disable the Unorganised destination row.
+                    rootDisabled: this.selectedFolderId == null,
                 },
             },
             buttons: [
@@ -47021,6 +47072,16 @@ class StepBuilderGroupComponent {
         this.isLoadingRuntimeVariables = false;
         /** True while parent is creating the step (API in progress); show loader on Create/Update Step button */
         this.isCreatingStep = false;
+        /**
+         * When true, render an amber warning banner at the top of the card explaining that any
+         * runtime values typed here will be overridden by the consuming test case. Set this when
+         * the step-group step is being created/edited inside a host test case that is itself a
+         * step group.
+         */
+        this.showNestedStepGroupWarning = false;
+        /** Optional override for the warning copy. Falls back to a sensible default. */
+        this.nestedStepGroupWarning = 'Parameter names will be used in the test case level where this step group is added. ' +
+            'If you want to set the value in the test case, keep all the parameter values (runtime variables) empty in this step group.';
         /** Emit when step is created */
         this.createStep = new EventEmitter();
         /** Emit when step group is selected to fetch runtime variables */
@@ -47229,10 +47290,10 @@ class StepBuilderGroupComponent {
     }
 }
 StepBuilderGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderGroupComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderGroupComponent, selector: "cqa-step-builder-group", inputs: { stepGroupOptions: "stepGroupOptions", hasMoreStepGroups: "hasMoreStepGroups", isLoadingStepGroups: "isLoadingStepGroups", initialStepGroupId: "initialStepGroupId", editMode: "editMode", runtimeVariables: "runtimeVariables", isLoadingRuntimeVariables: "isLoadingRuntimeVariables", existingRuntimeValues: "existingRuntimeValues", isCreatingStep: "isCreatingStep" }, outputs: { createStep: "createStep", stepGroupSelected: "stepGroupSelected", cancelled: "cancelled", loadMoreStepGroups: "loadMoreStepGroups", searchStepGroups: "searchStepGroups" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    {{ editMode ? 'Edit Step Group Test Step' : 'Create Step Group Test Step' }}\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Step Group Selection -->\n    <div class=\"cqa-mb-6\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Select Step Group<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select\n        [form]=\"stepGroupForm\"\n        [config]=\"stepGroupConfig\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Step Group Description -->\n    <!-- <div *ngIf=\"selectedStepGroup\" class=\"cqa-mb-6\">\n      <div class=\"cqa-mb-2\">\n        <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#4b5563]\">Description:</span>\n      </div>\n      <div class=\"cqa-p-3 cqa-bg-[#f9fafb] cqa-rounded cqa-border cqa-border-[#e5e7eb]\">\n        <div class=\"cqa-text-[14px] cqa-text-[#374151]\" [innerHTML]=\"getStepGroupDescription()\">\n        </div>\n      </div>\n    </div> -->\n\n    <!-- Runtime Variables Section -->\n    <div *ngIf=\"selectedStepGroup\" class=\"cqa-mt-6 cqa-mb-4\">\n      <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n        Set Parameters Default Value\n      </h3>\n      <div class=\"cqa-border-t cqa-border-gray-200 cqa-pt-4\">\n        <!-- Loading State -->\n        <div *ngIf=\"isLoadingRuntimeVariables\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n          <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading runtime variables...</div>\n        </div>\n\n        <!-- Runtime Variables Tables -->\n        <div *ngIf=\"!isLoadingRuntimeVariables && runtimeVariables\" class=\"cqa-space-y-6\">\n          <div *ngFor=\"let childGroup of runtimeVariables; let i = index\" class=\"cqa-mb-6\">\n            <h4 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n              ( {{i + 1}} ) {{ childGroup.name }}\n            </h4>\n            <ng-container *ngIf=\"childGroup.variables && childGroup.variables.length > 0; else noVariables\">\n              <div class=\"cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden\">\n                <table class=\"cqa-w-full cqa-text-left\">\n                  <thead class=\"cqa-bg-gray-50\">\n                    <tr>\n                      <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n                        Parameter Name\n                      </th>\n                      <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n                        Parameter Value\n                      </th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    <tr *ngFor=\"let variable of childGroup.variables; let j = index\" \n                        class=\"cqa-border-b cqa-border-gray-100 last:cqa-border-b-0\">\n                      <td class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-text-[#161617]\">\n                        {{ variable.name }}\n                      </td>\n                      <td class=\"cqa-px-4 cqa-py-2\">\n                        <cqa-custom-input \n                          [placeholder]=\"'Enter value'\"\n                          [value]=\"getRuntimeVariableValue(childGroup.id, variable.name)\"\n                          [fullWidth]=\"true\"\n                          (valueChange)=\"onRuntimeVariableChange(childGroup.id, variable.name, $event)\">\n                        </cqa-custom-input>\n                      </td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            </ng-container>\n            <ng-template #noVariables>\n              <p class=\"cqa-text-[12px] cqa-text-[#EF4444] cqa-py-2\">Runtime variable not available</p>\n            </ng-template>\n          </div>\n        </div>\n      </div>\n    </div>\n    <!-- Loading State: only show when initially loading (no options yet). Load-more loading is shown inside the dropdown. -->\n    <div *ngIf=\"isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n      <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading step groups...</div>\n    </div>\n\n    <!-- Empty State -->\n    <div *ngIf=\"!isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-[#9ca3af] cqa-text-[14px]\">\n      No step groups available\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Insert Step Group'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+StepBuilderGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderGroupComponent, selector: "cqa-step-builder-group", inputs: { stepGroupOptions: "stepGroupOptions", hasMoreStepGroups: "hasMoreStepGroups", isLoadingStepGroups: "isLoadingStepGroups", initialStepGroupId: "initialStepGroupId", editMode: "editMode", runtimeVariables: "runtimeVariables", isLoadingRuntimeVariables: "isLoadingRuntimeVariables", existingRuntimeValues: "existingRuntimeValues", isCreatingStep: "isCreatingStep", showNestedStepGroupWarning: "showNestedStepGroupWarning", nestedStepGroupWarning: "nestedStepGroupWarning" }, outputs: { createStep: "createStep", stepGroupSelected: "stepGroupSelected", cancelled: "cancelled", loadMoreStepGroups: "loadMoreStepGroups", searchStepGroups: "searchStepGroups" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    {{ editMode ? 'Edit Step Group Test Step' : 'Create Step Group Test Step' }}\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Step Group Selection -->\n    <div class=\"cqa-mb-6\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Select Step Group<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select\n        [form]=\"stepGroupForm\"\n        [config]=\"stepGroupConfig\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Step Group Description -->\n    <!-- <div *ngIf=\"selectedStepGroup\" class=\"cqa-mb-6\">\n      <div class=\"cqa-mb-2\">\n        <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#4b5563]\">Description:</span>\n      </div>\n      <div class=\"cqa-p-3 cqa-bg-[#f9fafb] cqa-rounded cqa-border cqa-border-[#e5e7eb]\">\n        <div class=\"cqa-text-[14px] cqa-text-[#374151]\" [innerHTML]=\"getStepGroupDescription()\">\n        </div>\n      </div>\n    </div> -->\n\n    <!-- Runtime Variables Section -->\n    <div *ngIf=\"selectedStepGroup\" class=\"cqa-mt-6 cqa-mb-4\">\n      <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n        Set Parameters Default Value\n      </h3>\n\n      \n       <!-- Nested-step-group warning. Visible only when the consumer flips\n       `showNestedStepGroupWarning` (i.e. the host test case is itself a step group). -->\n      <div *ngIf=\"showNestedStepGroupWarning\"\n        class=\"cqa-flex cqa-items-start cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2.5 cqa-rounded-md cqa-border cqa-border-[#FCD34D] cqa-border-l-[3px] cqa-border-l-[#F59E0B] cqa-bg-[#FEF3C7] cqa-text-[#92400E] cqa-text-[12px] cqa-leading-[18px]\"\n        role=\"alert\">\n        <mat-icon class=\"cqa-text-[#B45309] !cqa-text-[18px] !cqa-w-[18px] !cqa-h-[18px] cqa-mt-px cqa-flex-shrink-0\">warning_amber</mat-icon>\n        <span>{{ nestedStepGroupWarning }}</span>\n      </div>\n      <!-- TODO: ADD warning message here if the host test case is itself a step group -->\n      <div class=\"cqa-border-t cqa-border-gray-200 cqa-pt-4\">\n        <!-- Loading State -->\n        <div *ngIf=\"isLoadingRuntimeVariables\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n          <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading runtime variables...</div>\n        </div>\n\n        <!-- Runtime Variables Tables -->\n        <div *ngIf=\"!isLoadingRuntimeVariables && runtimeVariables\" class=\"cqa-space-y-6\">\n          <div *ngFor=\"let childGroup of runtimeVariables; let i = index\" class=\"cqa-mb-6\">\n            <h4 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n              ( {{i + 1}} ) {{ childGroup.name }}\n            </h4>\n            <ng-container *ngIf=\"childGroup.variables && childGroup.variables.length > 0; else noVariables\">\n              <div class=\"cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden\">\n                <table class=\"cqa-w-full cqa-text-left\">\n                  <thead class=\"cqa-bg-gray-50\">\n                    <tr>\n                      <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n                        Parameter Name\n                      </th>\n                      <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n                        Parameter Value\n                      </th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    <tr *ngFor=\"let variable of childGroup.variables; let j = index\" \n                        class=\"cqa-border-b cqa-border-gray-100 last:cqa-border-b-0\">\n                      <td class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-text-[#161617]\">\n                        {{ variable.name }}\n                      </td>\n                      <td class=\"cqa-px-4 cqa-py-2\">\n                        <cqa-custom-input \n                          [placeholder]=\"'Enter value'\"\n                          [value]=\"getRuntimeVariableValue(childGroup.id, variable.name)\"\n                          [fullWidth]=\"true\"\n                          (valueChange)=\"onRuntimeVariableChange(childGroup.id, variable.name, $event)\">\n                        </cqa-custom-input>\n                      </td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            </ng-container>\n            <ng-template #noVariables>\n              <p class=\"cqa-text-[12px] cqa-text-[#EF4444] cqa-py-2\">Runtime variable not available</p>\n            </ng-template>\n          </div>\n        </div>\n      </div>\n    </div>\n    <!-- Loading State: only show when initially loading (no options yet). Load-more loading is shown inside the dropdown. -->\n    <div *ngIf=\"isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n      <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading step groups...</div>\n    </div>\n\n    <!-- Empty State -->\n    <div *ngIf=\"!isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-[#9ca3af] cqa-text-[14px]\">\n      No step groups available\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Insert Step Group'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-builder-group', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    {{ editMode ? 'Edit Step Group Test Step' : 'Create Step Group Test Step' }}\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Step Group Selection -->\n    <div class=\"cqa-mb-6\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Select Step Group<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select\n        [form]=\"stepGroupForm\"\n        [config]=\"stepGroupConfig\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Step Group Description -->\n    <!-- <div *ngIf=\"selectedStepGroup\" class=\"cqa-mb-6\">\n      <div class=\"cqa-mb-2\">\n        <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#4b5563]\">Description:</span>\n      </div>\n      <div class=\"cqa-p-3 cqa-bg-[#f9fafb] cqa-rounded cqa-border cqa-border-[#e5e7eb]\">\n        <div class=\"cqa-text-[14px] cqa-text-[#374151]\" [innerHTML]=\"getStepGroupDescription()\">\n        </div>\n      </div>\n    </div> -->\n\n    <!-- Runtime Variables Section -->\n    <div *ngIf=\"selectedStepGroup\" class=\"cqa-mt-6 cqa-mb-4\">\n      <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n        Set Parameters Default Value\n      </h3>\n      <div class=\"cqa-border-t cqa-border-gray-200 cqa-pt-4\">\n        <!-- Loading State -->\n        <div *ngIf=\"isLoadingRuntimeVariables\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n          <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading runtime variables...</div>\n        </div>\n\n        <!-- Runtime Variables Tables -->\n        <div *ngIf=\"!isLoadingRuntimeVariables && runtimeVariables\" class=\"cqa-space-y-6\">\n          <div *ngFor=\"let childGroup of runtimeVariables; let i = index\" class=\"cqa-mb-6\">\n            <h4 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n              ( {{i + 1}} ) {{ childGroup.name }}\n            </h4>\n            <ng-container *ngIf=\"childGroup.variables && childGroup.variables.length > 0; else noVariables\">\n              <div class=\"cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden\">\n                <table class=\"cqa-w-full cqa-text-left\">\n                  <thead class=\"cqa-bg-gray-50\">\n                    <tr>\n                      <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n                        Parameter Name\n                      </th>\n                      <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n                        Parameter Value\n                      </th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    <tr *ngFor=\"let variable of childGroup.variables; let j = index\" \n                        class=\"cqa-border-b cqa-border-gray-100 last:cqa-border-b-0\">\n                      <td class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-text-[#161617]\">\n                        {{ variable.name }}\n                      </td>\n                      <td class=\"cqa-px-4 cqa-py-2\">\n                        <cqa-custom-input \n                          [placeholder]=\"'Enter value'\"\n                          [value]=\"getRuntimeVariableValue(childGroup.id, variable.name)\"\n                          [fullWidth]=\"true\"\n                          (valueChange)=\"onRuntimeVariableChange(childGroup.id, variable.name, $event)\">\n                        </cqa-custom-input>\n                      </td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            </ng-container>\n            <ng-template #noVariables>\n              <p class=\"cqa-text-[12px] cqa-text-[#EF4444] cqa-py-2\">Runtime variable not available</p>\n            </ng-template>\n          </div>\n        </div>\n      </div>\n    </div>\n    <!-- Loading State: only show when initially loading (no options yet). Load-more loading is shown inside the dropdown. -->\n    <div *ngIf=\"isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n      <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading step groups...</div>\n    </div>\n\n    <!-- Empty State -->\n    <div *ngIf=\"!isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-[#9ca3af] cqa-text-[14px]\">\n      No step groups available\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Insert Step Group'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-step-builder-group', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    {{ editMode ? 'Edit Step Group Test Step' : 'Create Step Group Test Step' }}\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Step Group Selection -->\n    <div class=\"cqa-mb-6\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Select Step Group<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select\n        [form]=\"stepGroupForm\"\n        [config]=\"stepGroupConfig\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Step Group Description -->\n    <!-- <div *ngIf=\"selectedStepGroup\" class=\"cqa-mb-6\">\n      <div class=\"cqa-mb-2\">\n        <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#4b5563]\">Description:</span>\n      </div>\n      <div class=\"cqa-p-3 cqa-bg-[#f9fafb] cqa-rounded cqa-border cqa-border-[#e5e7eb]\">\n        <div class=\"cqa-text-[14px] cqa-text-[#374151]\" [innerHTML]=\"getStepGroupDescription()\">\n        </div>\n      </div>\n    </div> -->\n\n    <!-- Runtime Variables Section -->\n    <div *ngIf=\"selectedStepGroup\" class=\"cqa-mt-6 cqa-mb-4\">\n      <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n        Set Parameters Default Value\n      </h3>\n\n      \n       <!-- Nested-step-group warning. Visible only when the consumer flips\n       `showNestedStepGroupWarning` (i.e. the host test case is itself a step group). -->\n      <div *ngIf=\"showNestedStepGroupWarning\"\n        class=\"cqa-flex cqa-items-start cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2.5 cqa-rounded-md cqa-border cqa-border-[#FCD34D] cqa-border-l-[3px] cqa-border-l-[#F59E0B] cqa-bg-[#FEF3C7] cqa-text-[#92400E] cqa-text-[12px] cqa-leading-[18px]\"\n        role=\"alert\">\n        <mat-icon class=\"cqa-text-[#B45309] !cqa-text-[18px] !cqa-w-[18px] !cqa-h-[18px] cqa-mt-px cqa-flex-shrink-0\">warning_amber</mat-icon>\n        <span>{{ nestedStepGroupWarning }}</span>\n      </div>\n      <!-- TODO: ADD warning message here if the host test case is itself a step group -->\n      <div class=\"cqa-border-t cqa-border-gray-200 cqa-pt-4\">\n        <!-- Loading State -->\n        <div *ngIf=\"isLoadingRuntimeVariables\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n          <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading runtime variables...</div>\n        </div>\n\n        <!-- Runtime Variables Tables -->\n        <div *ngIf=\"!isLoadingRuntimeVariables && runtimeVariables\" class=\"cqa-space-y-6\">\n          <div *ngFor=\"let childGroup of runtimeVariables; let i = index\" class=\"cqa-mb-6\">\n            <h4 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n              ( {{i + 1}} ) {{ childGroup.name }}\n            </h4>\n            <ng-container *ngIf=\"childGroup.variables && childGroup.variables.length > 0; else noVariables\">\n              <div class=\"cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden\">\n                <table class=\"cqa-w-full cqa-text-left\">\n                  <thead class=\"cqa-bg-gray-50\">\n                    <tr>\n                      <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n                        Parameter Name\n                      </th>\n                      <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n                        Parameter Value\n                      </th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    <tr *ngFor=\"let variable of childGroup.variables; let j = index\" \n                        class=\"cqa-border-b cqa-border-gray-100 last:cqa-border-b-0\">\n                      <td class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-text-[#161617]\">\n                        {{ variable.name }}\n                      </td>\n                      <td class=\"cqa-px-4 cqa-py-2\">\n                        <cqa-custom-input \n                          [placeholder]=\"'Enter value'\"\n                          [value]=\"getRuntimeVariableValue(childGroup.id, variable.name)\"\n                          [fullWidth]=\"true\"\n                          (valueChange)=\"onRuntimeVariableChange(childGroup.id, variable.name, $event)\">\n                        </cqa-custom-input>\n                      </td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            </ng-container>\n            <ng-template #noVariables>\n              <p class=\"cqa-text-[12px] cqa-text-[#EF4444] cqa-py-2\">Runtime variable not available</p>\n            </ng-template>\n          </div>\n        </div>\n      </div>\n    </div>\n    <!-- Loading State: only show when initially loading (no options yet). Load-more loading is shown inside the dropdown. -->\n    <div *ngIf=\"isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n      <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading step groups...</div>\n    </div>\n\n    <!-- Empty State -->\n    <div *ngIf=\"!isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-[#9ca3af] cqa-text-[14px]\">\n      No step groups available\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Insert Step Group'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { stepGroupOptions: [{
                 type: Input
             }], hasMoreStepGroups: [{
@@ -47251,6 +47312,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isCreatingStep: [{
                 type: Input
+            }], showNestedStepGroupWarning: [{
+                type: Input
+            }], nestedStepGroupWarning: [{
+                type: Input
             }], createStep: [{
                 type: Output
             }], stepGroupSelected: [{
@@ -52326,5 +52391,5 @@ function buildTestCaseDetailsFromApi(data, options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiPromptCardComponent, AiReasoningComponent, ApiEditStepComponent, ApiMockingCardComponent, ApiStepComponent, AssignEnvironmentsDialogComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, CaptureVideoDialogComponent, ChangeHistoryComponent, ChartCardComponent, CodeEditorComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionBranchEditorComponent, ConditionDebugStepComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_FOLDER_COLOR, DEFAULT_METADATA_COLOR, DEFAULT_MODULAR_CONFIG, DEFAULT_MODULAR_LABELS, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_REORDER_LABELS, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteFolderDialogComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ENVIRONMENT_ACCENT_COLORS, ElementFormComponent, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, ExportCodeModalComponent, FOLDER_DRAG_MIME, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FolderDragDirective, FolderDropDirective, FolderSidebarComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MONACO_LANGUAGE_MAP, MainStepCollapseComponent, MetricsCardComponent, MixedVariableInputComponent, ModularTableTemplateComponent, MoveToFolderDialogComponent, NetworkRequestComponent, NewEnvironmentDialogComponent, NewEnvironmentVariableDialogComponent, NewFolderDialogComponent, NewGlobalVariableDialogComponent, NewTestDataProfileDialogComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, PermissionToggleComponent, ProgressIndicatorComponent, ProgressTextCardComponent, QuestionnaireListComponent, RESULT_COLORS, ROW_DRAG_MIME, RadioCardGroupComponent, RecordingBannerComponent, ReviewRecordedStepsModalComponent, RowDragDirective, RunExecutionAlertComponent, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, STEP_DETAILS_MODAL_DATA, STEP_DETAILS_MODAL_REF, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SessionRestorationDialogComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, StepperComponent, SubStepsConfirmationDialogComponent, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLinkCellComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, VersionHistoryCompareComponent, VersionHistoryDetailComponent, VersionHistoryListComponent, VersionHistoryRestoreConfirmComponent, ViewCompareButtonComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, WorkspaceSelectorComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
+export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiPromptCardComponent, AiReasoningComponent, ApiEditStepComponent, ApiMockingCardComponent, ApiStepComponent, AssignEnvironmentsDialogComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, CaptureVideoDialogComponent, ChangeHistoryComponent, ChartCardComponent, CodeEditorComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionBranchEditorComponent, ConditionDebugStepComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_FOLDER_COLOR, DEFAULT_METADATA_COLOR, DEFAULT_MODULAR_CONFIG, DEFAULT_MODULAR_LABELS, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_REORDER_LABELS, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteFolderDialogComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ENVIRONMENT_ACCENT_COLORS, ElementFormComponent, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, ExportCodeModalComponent, FOLDER_DRAG_MIME, FOLDER_NAME_MAX_LENGTH, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FolderDragDirective, FolderDropDirective, FolderSidebarComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MONACO_LANGUAGE_MAP, MainStepCollapseComponent, MetricsCardComponent, MixedVariableInputComponent, ModularTableTemplateComponent, MoveToFolderDialogComponent, NetworkRequestComponent, NewEnvironmentDialogComponent, NewEnvironmentVariableDialogComponent, NewFolderDialogComponent, NewGlobalVariableDialogComponent, NewTestDataProfileDialogComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, PermissionToggleComponent, ProgressIndicatorComponent, ProgressTextCardComponent, QuestionnaireListComponent, RESULT_COLORS, ROW_DRAG_MIME, RadioCardGroupComponent, RecordingBannerComponent, ReviewRecordedStepsModalComponent, RowDragDirective, RunExecutionAlertComponent, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, STEP_DETAILS_MODAL_DATA, STEP_DETAILS_MODAL_REF, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SessionRestorationDialogComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, StepperComponent, SubStepsConfirmationDialogComponent, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLinkCellComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, VersionHistoryCompareComponent, VersionHistoryDetailComponent, VersionHistoryListComponent, VersionHistoryRestoreConfirmComponent, ViewCompareButtonComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, WorkspaceSelectorComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
 //# sourceMappingURL=cqa-lib-cqa-ui.mjs.map