@cqa-lib/cqa-ui 1.1.549-delta.3 → 1.1.550

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

@@ -977,6 +977,18 @@ class DialogComponent {
         }
         return !!d;
     }
+    isButtonLoading(button) {
+        const l = button.loading;
+        if (typeof l === 'function') {
+            try {
+                return !!l(this.dialogRef);
+            }
+            catch (_a) {
+                return false;
+            }
+        }
+        return !!l;
+    }
     buttonHostClasses(button) {
         const role = this.normalizeRole(button.role);
         if (role === 'warn') {
@@ -1004,10 +1016,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            [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 });
+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            [loading]=\"isButtonLoading(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            [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: [] }]
+            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            [loading]=\"isButtonLoading(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 }]
@@ -7923,6 +7935,8 @@ const DEFAULT_MODULAR_LABELS = {
     folderColumnLabel: 'Folder',
     unorganizedRowLabel: 'Unorganized',
     noFoldersFound: 'No Folders Found',
+    folderTooltipTotalSingular: '1 total test case including subfolders',
+    folderTooltipTotalPlural: '{n} total test cases including subfolders',
 };
 const DEFAULT_REORDER_LABELS = {
     reorderButton: 'Reorder',
@@ -8061,14 +8075,14 @@ MoveToFolderDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.
 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">
+      <svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="cqa-flex-shrink-0">
         <path d="M15.6375 12.6377C15.6375 13.0355 15.4794 13.4171 15.1981 13.6984C14.9168 13.9797 14.5353 14.1377 14.1375 14.1377H2.13745C1.73963 14.1377 1.3581 13.9797 1.07679 13.6984C0.795486 13.4171 0.637451 13.0355 0.637451 12.6377V2.1377C0.637451 1.73987 0.795486 1.35834 1.07679 1.07704C1.3581 0.795731 1.73963 0.637695 2.13745 0.637695H5.88745L7.38745 2.8877H14.1375C14.5353 2.8877 14.9168 3.04573 15.1981 3.32704C15.4794 3.60834 15.6375 3.98987 15.6375 4.3877V12.6377Z" stroke="currentColor" stroke-width="1.275" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
     </ng-template>
 
     <!-- Reusable outlined archive/inbox icon for the "Unorganized" entry. -->
     <ng-template #unorganizedIconTpl>
-      <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">
+      <svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="cqa-flex-shrink-0">
         <path d="M14.6875 5.5V12.5C14.6875 13.3 14.0375 14 13.1875 14H3.8125C2.9625 14 2.3125 13.3 2.3125 12.5V5.5M14.6875 5.5L12.7875 1.7C12.5375 1.2 12.0875 1 11.5875 1H5.4125C4.9125 1 4.4625 1.2 4.2125 1.7L2.3125 5.5M14.6875 5.5H2.3125M6.1875 8.5H10.8125" stroke="currentColor" stroke-width="1.275" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
     </ng-template>
@@ -8088,7 +8102,7 @@ MoveToFolderDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
         (keydown.space)="$event.preventDefault(); !isUnorganizedDisabled && 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>
+        <span class="cqa-inline-block cqa-w-5 cqa-h-5 cqa-flex-shrink-0"></span>
         <ng-container *ngTemplateOutlet="unorganizedIconTpl"></ng-container>
         <span>{{ labels.moveDialogRoot }}</span>
       </div>
@@ -8111,7 +8125,7 @@ MoveToFolderDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
         <button
           *ngIf="row.hasChildren; else chevronPlaceholder"
           type="button"
-          class="cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5 cqa-shrink-0 cqa-rounded cqa-text-neutral-600 hover:cqa-bg-neutral-100 hover:cqa-text-neutral-900"
+          class="cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5 cqa-flex-shrink-0 cqa-rounded cqa-text-neutral-600 hover:cqa-bg-neutral-100 hover:cqa-text-neutral-900"
           [attr.aria-label]="row.expanded ? 'Collapse ' + row.name : 'Expand ' + row.name"
           (click)="toggleExpanded(row.id!, $event)"
         >
@@ -8121,7 +8135,7 @@ MoveToFolderDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
           </svg>
         </button>
         <ng-template #chevronPlaceholder>
-          <span class="cqa-inline-block cqa-w-5 cqa-h-5 cqa-shrink-0"></span>
+          <span class="cqa-inline-block cqa-w-5 cqa-h-5 cqa-flex-shrink-0"></span>
         </ng-template>
 
         <ng-container *ngTemplateOutlet="folderIconTpl"></ng-container>
@@ -8134,14 +8148,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             args: [{ selector: 'cqa-move-to-folder-dialog', 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">
+      <svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="cqa-flex-shrink-0">
         <path d="M15.6375 12.6377C15.6375 13.0355 15.4794 13.4171 15.1981 13.6984C14.9168 13.9797 14.5353 14.1377 14.1375 14.1377H2.13745C1.73963 14.1377 1.3581 13.9797 1.07679 13.6984C0.795486 13.4171 0.637451 13.0355 0.637451 12.6377V2.1377C0.637451 1.73987 0.795486 1.35834 1.07679 1.07704C1.3581 0.795731 1.73963 0.637695 2.13745 0.637695H5.88745L7.38745 2.8877H14.1375C14.5353 2.8877 14.9168 3.04573 15.1981 3.32704C15.4794 3.60834 15.6375 3.98987 15.6375 4.3877V12.6377Z" stroke="currentColor" stroke-width="1.275" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
     </ng-template>
 
     <!-- Reusable outlined archive/inbox icon for the "Unorganized" entry. -->
     <ng-template #unorganizedIconTpl>
-      <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">
+      <svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="cqa-flex-shrink-0">
         <path d="M14.6875 5.5V12.5C14.6875 13.3 14.0375 14 13.1875 14H3.8125C2.9625 14 2.3125 13.3 2.3125 12.5V5.5M14.6875 5.5L12.7875 1.7C12.5375 1.2 12.0875 1 11.5875 1H5.4125C4.9125 1 4.4625 1.2 4.2125 1.7L2.3125 5.5M14.6875 5.5H2.3125M6.1875 8.5H10.8125" stroke="currentColor" stroke-width="1.275" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
     </ng-template>
@@ -8161,7 +8175,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
         (keydown.space)="$event.preventDefault(); !isUnorganizedDisabled && 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>
+        <span class="cqa-inline-block cqa-w-5 cqa-h-5 cqa-flex-shrink-0"></span>
         <ng-container *ngTemplateOutlet="unorganizedIconTpl"></ng-container>
         <span>{{ labels.moveDialogRoot }}</span>
       </div>
@@ -8184,7 +8198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
         <button
           *ngIf="row.hasChildren; else chevronPlaceholder"
           type="button"
-          class="cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5 cqa-shrink-0 cqa-rounded cqa-text-neutral-600 hover:cqa-bg-neutral-100 hover:cqa-text-neutral-900"
+          class="cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5 cqa-flex-shrink-0 cqa-rounded cqa-text-neutral-600 hover:cqa-bg-neutral-100 hover:cqa-text-neutral-900"
           [attr.aria-label]="row.expanded ? 'Collapse ' + row.name : 'Expand ' + row.name"
           (click)="toggleExpanded(row.id!, $event)"
         >
@@ -8194,7 +8208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
           </svg>
         </button>
         <ng-template #chevronPlaceholder>
-          <span class="cqa-inline-block cqa-w-5 cqa-h-5 cqa-shrink-0"></span>
+          <span class="cqa-inline-block cqa-w-5 cqa-h-5 cqa-flex-shrink-0"></span>
         </ng-template>
 
         <ng-container *ngTemplateOutlet="folderIconTpl"></ng-container>
@@ -8392,7 +8406,10 @@ NewFolderDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
         ></cqa-move-to-folder-dialog>
       </div>
 
-      <!-- Folder color (optional) -->
+      <!-- Folder color picker temporarily disabled — submitted folders fall
+           back to DEFAULT_FOLDER_COLOR. Re-enable by uncommenting the block
+           below; all inputs/outputs are still wired. -->
+      <!--
       <div class="cqa-flex cqa-flex-col cqa-gap-2">
         <label class="cqa-text-sm cqa-font-medium cqa-text-neutral-700">
           {{ labels.newFolderDialogColorLabel }}
@@ -8448,8 +8465,9 @@ NewFolderDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
           </label>
         </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: 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 });
+  `, 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"] }], 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: `
@@ -8480,7 +8498,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
         ></cqa-move-to-folder-dialog>
       </div>
 
-      <!-- Folder color (optional) -->
+      <!-- Folder color picker temporarily disabled — submitted folders fall
+           back to DEFAULT_FOLDER_COLOR. Re-enable by uncommenting the block
+           below; all inputs/outputs are still wired. -->
+      <!--
       <div class="cqa-flex cqa-flex-col cqa-gap-2">
         <label class="cqa-text-sm cqa-font-medium cqa-text-neutral-700">
           {{ labels.newFolderDialogColorLabel }}
@@ -8536,6 +8557,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
           </label>
         </div>
       </div>
+      -->
     </div>
   `, host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { folders: [{
@@ -8658,7 +8680,7 @@ DeleteFolderDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
     <!-- Reusable radio bullet -->
     <ng-template #radio let-checked="checked">
       <span
-        class="cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5 cqa-rounded-full cqa-border-solid cqa-shrink-0 cqa-mt-0.5"
+        class="cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5 cqa-rounded-full cqa-border-solid cqa-flex-shrink-0 cqa-mt-0.5"
         [ngClass]="checked ? 'cqa-border-indigo-600' : 'cqa-border-neutral-400'"
         [style.borderWidth]="'2px'"
       >
@@ -8715,7 +8737,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
     <!-- Reusable radio bullet -->
     <ng-template #radio let-checked="checked">
       <span
-        class="cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5 cqa-rounded-full cqa-border-solid cqa-shrink-0 cqa-mt-0.5"
+        class="cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5 cqa-rounded-full cqa-border-solid cqa-flex-shrink-0 cqa-mt-0.5"
         [ngClass]="checked ? 'cqa-border-indigo-600' : 'cqa-border-neutral-400'"
         [style.borderWidth]="'2px'"
       >
@@ -9018,6 +9040,7 @@ class FolderSidebarComponent {
         this.allowDrop = true;
         this.showCounts = true;
         this.collapsed = false;
+        this.foldersAccordionExpanded = true;
         this.labels = Object.assign({}, DEFAULT_MODULAR_LABELS);
         /** When true, the sidebar emits `searchChange` and skips its local name filter
          *  — the host is expected to swap `folders` with server-side search results.
@@ -9036,6 +9059,11 @@ class FolderSidebarComponent {
          *  spinner; when set during pagination, a small spinner appears at the
          *  bottom of the tree. */
         this.rootFoldersLoading = false;
+        /** Folder ids currently being saved (rename / move / etc). The sidebar renders
+         *  a small spinner in place of the count so the user gets feedback while the
+         *  host's API call is in flight. The host is responsible for adding/removing
+         *  ids around its async call. */
+        this.savingFolderIds = [];
         this.folderSelected = new EventEmitter();
         this.folderExpansionToggled = new EventEmitter();
         /** Lazy-load: fires when the user expands a node whose children haven't been
@@ -9065,6 +9093,7 @@ class FolderSidebarComponent {
         /** Fires when a folder row is dropped onto another folder (or the Unorganized row). */
         this.folderDropped = new EventEmitter();
         this.collapsedChange = new EventEmitter();
+        this.foldersAccordionExpandedChange = new EventEmitter();
         /** Bound to the search input. Exposed as an Input so hosts can seed/restore
          *  the visible search term across destroy/re-create cycles (e.g., when the
          *  sidebar is `*ngIf`'d out by a view-mode toggle and re-mounted later). */
@@ -9108,8 +9137,36 @@ class FolderSidebarComponent {
          *  Used to throttle the scroll-based pagination so we don't re-emit until the
          *  host has actually appended a new page. */
         this.lastRootLoadEmittedAt = -1;
+        /** Toggles the inline folder-search input. When closing while a query is active,
+         *  also clear the search so the tree reverts to its full state. */
+        this.searchVisible = false;
         this.trackByRow = (_, row) => `${row.kind}_${row.node.id}`;
     }
+    isFolderSaving(id) {
+        var _a, _b;
+        return (_b = (_a = this.savingFolderIds) === null || _a === void 0 ? void 0 : _a.includes(id)) !== null && _b !== void 0 ? _b : false;
+    }
+    folderRowTooltip(node) {
+        const name = (node === null || node === void 0 ? void 0 : node.name) || '';
+        if ((node === null || node === void 0 ? void 0 : node.totalCount) == null) {
+            return name || null;
+        }
+        const tpl = node.totalCount === 1
+            ? this.labels.folderTooltipTotalSingular
+            : this.labels.folderTooltipTotalPlural;
+        const countLine = (tpl || '').replace('{n}', String(node.totalCount));
+        return name ? `${name}\n${countLine}` : countLine;
+    }
+    /** Visual depth indent: linear up to a cap, then quarter-rate beyond, so deep
+     *  trees don't push the row content off the right edge of the panel. */
+    rowIndent(depth) {
+        const step = 16;
+        const cap = 6;
+        const base = 8;
+        if (depth <= cap)
+            return base + depth * step;
+        return base + cap * step + (depth - cap) * 4;
+    }
     get expandedSet() {
         return new Set(this.expandedFolderIds || []);
     }
@@ -9478,8 +9535,28 @@ class FolderSidebarComponent {
     }
     togglePanel() {
         this.collapsed = !this.collapsed;
+        if (this.collapsed)
+            this.searchVisible = false;
         this.collapsedChange.emit(this.collapsed);
     }
+    toggleFoldersAccordion() {
+        this.foldersAccordionExpanded = !this.foldersAccordionExpanded;
+        if (!this.foldersAccordionExpanded)
+            this.searchVisible = false;
+        this.foldersAccordionExpandedChange.emit(this.foldersAccordionExpanded);
+        this.cdr.markForCheck();
+    }
+    toggleSearchVisible() {
+        if (!this.foldersAccordionExpanded && !this.searchVisible) {
+            this.foldersAccordionExpanded = true;
+            this.foldersAccordionExpandedChange.emit(true);
+        }
+        this.searchVisible = !this.searchVisible;
+        if (!this.searchVisible && (this.searchValue || '').trim()) {
+            this.onSearchClear();
+        }
+        this.cdr.markForCheck();
+    }
     rowDropped(targetId, event) {
         // Directive already emits with the bound folder id, but normalise in case callers
         // wire raw events.
@@ -9632,10 +9709,10 @@ FolderSidebarComponent.RENAME_LIMIT_FLASH_MS = 600;
  *  position is within this many px of the end. */
 FolderSidebarComponent.SCROLL_LOAD_THRESHOLD_PX = 64;
 FolderSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FolderSidebarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FolderSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FolderSidebarComponent, selector: "cqa-folder-sidebar", inputs: { folders: "folders", selectedFolderId: "selectedFolderId", expandedFolderIds: "expandedFolderIds", unorganizedCount: "unorganizedCount", allowCreate: "allowCreate", allowRename: "allowRename", allowDelete: "allowDelete", allowMove: "allowMove", allowDuplicate: "allowDuplicate", allowDrop: "allowDrop", showCounts: "showCounts", collapsed: "collapsed", labels: "labels", serverSideSearch: "serverSideSearch", rootTotal: "rootTotal", folderSearchLoading: "folderSearchLoading", rootFoldersLoading: "rootFoldersLoading", searchValue: "searchValue" }, outputs: { folderSelected: "folderSelected", folderExpansionToggled: "folderExpansionToggled", folderChildrenRequested: "folderChildrenRequested", folderLoadMoreRequested: "folderLoadMoreRequested", searchChange: "searchChange", rootLoadMoreRequested: "rootLoadMoreRequested", folderCreated: "folderCreated", folderCreateRequested: "folderCreateRequested", folderRenamed: "folderRenamed", folderDeleted: "folderDeleted", folderMoveRequested: "folderMoveRequested", folderDuplicateRequested: "folderDuplicateRequested", testsDropped: "testsDropped", folderDropped: "folderDropped", collapsedChange: "collapsedChange" }, 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\n    class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-3 cqa-py-1\"\n    [style.border-bottom]=\"collapsed ? null : '1px solid #E2E2E3'\"\n    [style.margin-bottom.px]=\"collapsed ? 0 : 8\"\n  >\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      <div class=\"cqa-relative\">\n        <cqa-search-bar\n          size=\"sm\"\n          [fullWidth]=\"true\"\n          [value]=\"searchValue\"\n          [placeholder]=\"labels.searchFoldersPlaceholder\"\n          [showClear]=\"true\"\n          (valueChange)=\"onSearchInput($event)\"\n          (cleared)=\"onSearchClear()\"\n        ></cqa-search-bar>\n        <span\n          *ngIf=\"folderSearchLoading\"\n          class=\"cqa-absolute cqa-right-8 cqa-inset-y-0 cqa-flex cqa-items-center\"\n          aria-live=\"polite\"\n          aria-label=\"Searching folders\"\n        >\n          <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n        </span>\n      </div>\n    </div>\n\n    <!-- Tree (folders only \u2014 Unorganized sits directly below; tree caps at 60vh and scrolls when overflowing).\n         Scroll-based lazy-loading at the root level: nearing the bottom emits\n         `rootLoadMoreRequested`, which the host responds to by fetching the\n         next page of roots. -->\n    <div role=\"tree\" class=\"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         (scroll)=\"onTreeScroll($event)\">\n      <!-- Initial-load spinner: only renders when we have no folders yet AND\n           no search active (search has its own inline spinner). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length === 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-6\"\n        aria-live=\"polite\"\n      >\n        <mat-spinner diameter=\"20\" mode=\"indeterminate\"></mat-spinner>\n      </div>\n      <div\n        *ngIf=\"searchValue?.trim() && rows.length === 0 && !folderSearchLoading\"\n        class=\"cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-neutral-500 cqa-text-center\"\n      >\n        {{ labels.noFoldersFound }}\n      </div>\n      <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n        <!-- Synthetic loading row (lazy fetch in flight) -->\n        <div\n          *ngIf=\"row.kind === 'loading'\"\n          [style.paddingLeft.px]=\"8 + row.depth * 16\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-1.5 cqa-text-sm cqa-text-neutral-500\"\n          aria-live=\"polite\"\n        >\n          <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n          <span>Loading\u2026</span>\n        </div>\n        <!-- Synthetic load-more row (more children available on backend) -->\n        <button\n          *ngIf=\"row.kind === 'load-more'\"\n          type=\"button\"\n          [style.paddingLeft.px]=\"8 + row.depth * 16\"\n          class=\"cqa-flex cqa-items-center cqa-w-full cqa-py-1.5 cqa-text-sm cqa-text-indigo-600 hover:cqa-bg-indigo-50 cqa-text-left\"\n          (click)=\"onLoadMore(row.node); $event.stopPropagation()\"\n        >\n          <span>Load more ({{ (row.node.totalChildren ?? 0) - (row.node.children?.length ?? 0) }})</span>\n        </button>\n        <!-- Real folder row -->\n        <div\n          *ngIf=\"row.kind === 'folder'\"\n          role=\"treeitem\"\n          tabindex=\"0\"\n          [attr.aria-expanded]=\"row.hasChildren ? isExpanded(row.node.id) : null\"\n          [attr.aria-selected]=\"isSelected(row.node.id)\"\n          [attr.data-folder-row-id]=\"row.node.id\"\n          [cqaFolderDrop]=\"row.node.id\"\n          [dropEnabled]=\"allowDrop\"\n          (testsDropped)=\"rowDropped(row.node.id, $event)\"\n          (folderDropped)=\"onFolderRowDropped(row.node.id, $event)\"\n          [cqaFolderDrag]=\"row.node.id\"\n          [dragEnabled]=\"allowDrop\"\n          (dragstart)=\"onFolderDragStart(row.node)\"\n          (dragend)=\"onFolderDragEnd()\"\n          (dragover)=\"onFolderRowDragOver(row)\"\n          (dragleave)=\"onFolderRowDragLeave(row)\"\n          (click)=\"onSelect(row.node)\"\n          (contextmenu)=\"openContextMenu(row.node, $event)\"\n          (keydown)=\"onRowKeydown($event, row, i)\"\n          class=\"cqa-group cqa-flex cqa-items-center cqa-gap-1 cqa-pr-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-indigo-50 focus:cqa-outline-none focus:cqa-bg-indigo-50 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\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\n            (click)=\"onToggle(row.node, $event)\"\n            [attr.aria-label]=\"isExpanded(row.node.id) ? 'Collapse' : 'Expand'\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">\n              {{ isExpanded(row.node.id) ? 'expand_more' : 'chevron_right' }}\n            </mat-icon>\n          </button>\n          <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: row.node.color }\"></ng-container>\n\n          <ng-container *ngIf=\"renamingId === row.node.id; else nameTpl\">\n            <input\n              type=\"text\"\n              size=\"1\"\n              [attr.data-folder-rename-input]=\"row.node.id\"\n              [attr.maxlength]=\"renameMaxLength\"\n              class=\"cqa-flex-1 cqa-min-w-0 cqa-w-full cqa-px-2 cqa-py-0.5 cqa-rounded cqa-border cqa-bg-white cqa-text-sm cqa-shadow-sm focus:cqa-outline-none focus:cqa-ring-1\"\n              [ngClass]=\"(isRenameDraftValid && !renameLimitFlash)\n                ? 'cqa-border-neutral-300 focus:cqa-border-indigo-400 focus:cqa-ring-indigo-200'\n                : 'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-[#FCA5A5]'\"\n              [attr.aria-invalid]=\"!isRenameDraftValid || renameLimitFlash\"\n              [(ngModel)]=\"renameDraft\"\n              (keydown)=\"onRenameKey($event, row.node)\"\n              (keypress)=\"$event.stopPropagation()\"\n              (keyup)=\"$event.stopPropagation()\"\n              (blur)=\"commitRename(row.node)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </ng-container>\n          <ng-template #nameTpl>\n            <span\n              class=\"cqa-flex-1 cqa-text-sm cqa-truncate\"\n              [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n              (dblclick)=\"beginRename(row.node, $event)\"\n            >{{ row.node.name }}</span>\n          </ng-template>\n\n          <!-- 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-tabular-nums cqa-ml-1\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [class.group-hover:cqa-hidden]=\"allowDelete\"\n          >{{ row.node.count }}</span>\n\n          <button\n            *ngIf=\"hasAnyContextAction\"\n            type=\"button\"\n            class=\"cqa-p-0.5 cqa-rounded hover:cqa-bg-neutral-200\"\n            [style.color]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id ? '#3F43EE' : '#4C4C51'\"\n            [class.cqa-hidden]=\"contextMenuFolderId !== row.node.id\"\n            [class.group-hover:cqa-inline-flex]=\"true\"\n            [class.cqa-inline-flex]=\"contextMenuFolderId === row.node.id\"\n            (click)=\"openContextMenu(row.node, $event)\"\n            [attr.aria-label]=\"'Open actions for ' + row.node.name\"\n            [attr.aria-haspopup]=\"'menu'\"\n            [attr.aria-expanded]=\"contextMenuFolderId === row.node.id\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">more_horiz</mat-icon>\n          </button>\n        </div>\n      </ng-container>\n      <!-- Root-level pagination is now driven by scroll (see `(scroll)` on the\n           tree container above). Per-folder children retain the explicit\n           \"Load more\" button rendered inside the rows loop above, since\n           subtrees aren't independently scrollable. -->\n      <!-- Pagination spinner \u2014 visible only when fetching an additional page\n           of roots (folders.length > 0 distinguishes from initial-load case). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length > 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-2\"\n        aria-live=\"polite\"\n      >\n        <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n      </div>\n    </div>\n\n    <!-- Divider between folder tree and pinned Unorganized tab -->\n    <div\n      aria-hidden=\"true\"\n      class=\"cqa-mx-3 cqa-shrink-0\"\n      style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n    ></div>\n\n    <!-- Unorganized \u2014 pinned below the scrollable folder tree so it stays visible regardless of folder count -->\n    <div\n      role=\"treeitem\"\n      tabindex=\"0\"\n      [attr.aria-selected]=\"isSelected(null)\"\n      class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-indigo-50 focus:cqa-outline-none focus:cqa-bg-indigo-50 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)=\"onSelectUnorganized()\"\n    >\n      <span\n        *ngIf=\"isSelected(null)\"\n        class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n      ></span>\n      <mat-icon [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n      <span class=\"cqa-flex-1 cqa-text-sm\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ labels.unorganized }}</span>\n      <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-tabular-nums\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ unorganizedCount }}</span>\n    </div>\n\n    <!-- Folder context menu (right-click / ellipsis). A 0\u00D70 fixed-position\n         anchor at the click coords drives a cdkConnectedOverlay; CDK's\n         flexible-connected positioning auto-flips up/left when the menu\n         would overflow the viewport (last-folder-near-bottom case). -->\n    <div #ctxAnchor cdkOverlayOrigin\n         class=\"cqa-fixed cqa-w-0 cqa-h-0 cqa-pointer-events-none\"\n         [style.left.px]=\"contextMenuPosition.x\"\n         [style.top.px]=\"contextMenuPosition.y\"></div>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"ctxAnchor\"\n      [cdkConnectedOverlayOpen]=\"contextMenuFolderId !== null\"\n      [cdkConnectedOverlayPositions]=\"contextMenuPositions\"\n      [cdkConnectedOverlayHasBackdrop]=\"false\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"false\"\n      [cdkConnectedOverlayPush]=\"true\"\n      (overlayOutsideClick)=\"onOverlayOutsideClick()\"\n      (detach)=\"closeContextMenu()\"\n    >\n      <!-- The lib's tailwind config sets important: '.cqa-ui-root', which\n           emits descendant selectors like `.cqa-ui-root .cqa-bg-white`.\n           CDK Overlay teleports this template into the global overlay\n           container (outside the host's cqa-ui-root), so we wrap the menu in\n           an ancestor cqa-ui-root div to re-establish the utility scope. -->\n      <div class=\"cqa-ui-root\">\n      <div\n        role=\"menu\"\n        class=\"cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n        (click)=\"$event.stopPropagation()\"\n        (contextmenu)=\"$event.preventDefault(); $event.stopPropagation()\"\n      >\n        <ng-container *ngIf=\"folderById(contextMenuFolderId) as menuNode\">\n          <button\n            *ngIf=\"allowCreate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextCreateSubfolder(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">create_new_folder</mat-icon>\n            <span>{{ labels.folderMenuCreateSubfolder }}</span>\n          </button>\n          <button\n            *ngIf=\"allowRename\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextRename(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">edit</mat-icon>\n            <span>{{ labels.folderMenuRename }}</span>\n          </button>\n          <button\n            *ngIf=\"allowMove\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextMove(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">drive_file_move</mat-icon>\n            <span>{{ labels.folderMenuMove }}</span>\n          </button>\n          <button\n            *ngIf=\"allowDuplicate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextDuplicate(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">content_copy</mat-icon>\n            <span>{{ labels.folderMenuDuplicate }}</span>\n          </button>\n          <div *ngIf=\"allowDelete && (allowCreate || allowRename || allowMove || allowDuplicate)\" class=\"cqa-h-px cqa-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      </div>\n    </ng-template>\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"] }, { type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], 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"] }, { type: i1$6.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { type: i1$6.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FolderSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FolderSidebarComponent, selector: "cqa-folder-sidebar", inputs: { folders: "folders", selectedFolderId: "selectedFolderId", expandedFolderIds: "expandedFolderIds", unorganizedCount: "unorganizedCount", allowCreate: "allowCreate", allowRename: "allowRename", allowDelete: "allowDelete", allowMove: "allowMove", allowDuplicate: "allowDuplicate", allowDrop: "allowDrop", showCounts: "showCounts", collapsed: "collapsed", foldersAccordionExpanded: "foldersAccordionExpanded", labels: "labels", serverSideSearch: "serverSideSearch", rootTotal: "rootTotal", folderSearchLoading: "folderSearchLoading", rootFoldersLoading: "rootFoldersLoading", savingFolderIds: "savingFolderIds", searchValue: "searchValue" }, outputs: { folderSelected: "folderSelected", folderExpansionToggled: "folderExpansionToggled", folderChildrenRequested: "folderChildrenRequested", folderLoadMoreRequested: "folderLoadMoreRequested", searchChange: "searchChange", rootLoadMoreRequested: "rootLoadMoreRequested", folderCreated: "folderCreated", folderCreateRequested: "folderCreateRequested", folderRenamed: "folderRenamed", folderDeleted: "folderDeleted", folderMoveRequested: "folderMoveRequested", folderDuplicateRequested: "folderDuplicateRequested", testsDropped: "testsDropped", folderDropped: "folderDropped", collapsedChange: "collapsedChange", foldersAccordionExpandedChange: "foldersAccordionExpandedChange" }, host: { listeners: { "document:click": "onDocumentClick()", "document:keydown.escape": "onEscape()", "document:dragend": "onDocumentDragEnd()" }, classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<!-- Reusable indeterminate loading spinner. Render via\n     <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>. -->\n<ng-template #loadingSpinner let-size=\"size\">\n  <svg [attr.width]=\"size || 16\" [attr.height]=\"size || 16\" viewBox=\"0 0 50 50\" aria-label=\"loading\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"></circle>\n    <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n      <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"></animateTransform>\n    </path>\n  </svg>\n</ng-template>\n\n<!-- Reusable folder icon. Render via <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: node.color }\"></ng-container>. -->\n<ng-template #folderIcon let-color=\"color\">\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-flex-shrink-0\">\n    <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" [attr.stroke]=\"color || '#99999E'\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<aside\n  class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-h-full cqa-min-h-0\"\n  [class.cqa-border]=\"!collapsed\"\n  [class.cqa-border-neutral-200]=\"!collapsed\"\n  [class.cqa-rounded-lg]=\"!collapsed\"\n  [style.width.px]=\"collapsed ? 22 : 240\"\n  style=\"overflow: hidden; transition: width 260ms cubic-bezier(0.4, 0, 0.2, 1);\"\n>\n  <!-- Collapsed rail: the entire sidebar becomes a single click target so the\n       slim strip reads as an obvious \"expand me\" handle. -->\n  <button\n    *ngIf=\"collapsed\"\n    type=\"button\"\n    style=\"width: 22px;\"\n    class=\"cqa-group cqa-flex cqa-flex-col cqa-items-center cqa-flex-shrink-0 cqa-h-full cqa-py-2 cqa-gap-3 cqa-bg-neutral-50 cqa-border cqa-border-neutral-200 cqa-text-neutral-500 hover:cqa-bg-indigo-50 hover:cqa-border-indigo-200 hover:cqa-text-indigo-600 focus:cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-indigo-200 cqa-cursor-pointer\"\n    (click)=\"togglePanel()\"\n    [attr.aria-label]=\"'Expand folders panel'\"\n    [title]=\"'Expand folders panel'\"\n  >\n    <mat-icon style=\"font-size:16px;width:16px;height:16px\">chevron_right</mat-icon>\n    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center\" aria-hidden=\"true\">\n      <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" stroke=\"currentColor\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </span>\n  </button>\n\n  <div *ngIf=\"!collapsed\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-h-0 cqa-pb-2\" style=\"width: 240px;\">\n  <!-- Header (expanded) -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-justify-between cqa-py-1 cqa-px-3\"\n    style=\"border-bottom: 1px solid #E2E2E3; margin-bottom: 8px;\"\n  >\n    <span class=\"cqa-text-sm cqa-font-semibold cqa-text-neutral-900 cqa-py-0.5\">{{ labels.folders }}</span>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <button\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"togglePanel()\"\n        [attr.aria-label]=\"'Collapse folders panel'\"\n        [title]=\"'Collapse folders panel'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">keyboard_double_arrow_left</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100\"\n        [class.cqa-text-neutral-500]=\"!searchVisible\"\n        [class.cqa-text-indigo-600]=\"searchVisible\"\n        [class.cqa-bg-neutral-100]=\"searchVisible\"\n        (click)=\"toggleSearchVisible()\"\n        [attr.aria-label]=\"searchVisible ? 'Hide folder search' : 'Search folders'\"\n        [attr.aria-pressed]=\"searchVisible\"\n        [title]=\"searchVisible ? 'Hide folder search' : 'Search folders'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">search</mat-icon>\n      </button>\n      <button\n        *ngIf=\"allowCreate\"\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"requestCreate(null)\"\n        [attr.aria-label]=\"labels.newFolder\"\n        [title]=\"labels.newFolder\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container>\n    <!-- Search (toggled via the search icon in the header) -->\n    <div\n      class=\"cqa-grid\"\n      style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n      [style.grid-template-rows]=\"searchVisible ? '1fr' : '0fr'\"\n    >\n      <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n        <div class=\"cqa-px-3 cqa-pb-2\">\n          <div class=\"cqa-relative\">\n            <cqa-search-bar\n              size=\"sm\"\n              [fullWidth]=\"true\"\n              [value]=\"searchValue\"\n              [autoFocus]=\"searchVisible\"\n              [placeholder]=\"labels.searchFoldersPlaceholder\"\n              [showClear]=\"true\"\n              (valueChange)=\"onSearchInput($event)\"\n              (cleared)=\"onSearchClear()\"\n            ></cqa-search-bar>\n            <span\n              *ngIf=\"folderSearchLoading\"\n              class=\"cqa-absolute cqa-right-8 cqa-inset-y-0 cqa-flex cqa-items-center\"\n              aria-live=\"polite\"\n              aria-label=\"Searching folders\"\n            >\n              <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Organized section header \u2014 visually distinct from folder rows so it reads\n         as a view/section toggle rather than a folder item. -->\n    <button\n      type=\"button\"\n      class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-px-3 cqa-py-1 cqa-text-left cqa-text-[#6D6D74] hover:cqa-text-[#3F43EE] focus:cqa-outline-none focus:cqa-text-[#3F43EE] cqa-flex-shrink-0 cqa-uppercase\"\n      (click)=\"toggleFoldersAccordion()\"\n      [attr.aria-expanded]=\"foldersAccordionExpanded\"\n      [attr.aria-label]=\"foldersAccordionExpanded ? 'Collapse organized folders' : 'Expand organized folders'\"\n    >\n      <span class=\"cqa-text-[11px] cqa-font-semibold cqa-tracking-wider\">{{ labels.organized }}</span>\n      <mat-icon\n        style=\"font-size:16px;width:16px;height:16px;transition: transform 200ms ease;\"\n        [style.transform]=\"foldersAccordionExpanded ? 'rotate(0deg)' : 'rotate(-90deg)'\"\n      >expand_more</mat-icon>\n    </button>\n\n    <!-- Tree (folders only \u2014 Unorganized sits directly below; tree caps at 60vh and scrolls when overflowing).\n         Scroll-based lazy-loading at the root level: nearing the bottom emits\n         `rootLoadMoreRequested`, which the host responds to by fetching the\n         next page of roots. -->\n    <div\n      class=\"cqa-grid cqa-min-h-0\"\n      style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n      [style.grid-template-rows]=\"foldersAccordionExpanded ? '1fr' : '0fr'\"\n    >\n      <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n    <div role=\"tree\" class=\"cqa-min-h-0 cqa-max-h-[40vh] cqa-overflow-y-auto cqa-py-1 cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n         (scroll)=\"onTreeScroll($event)\">\n      <!-- Initial-load spinner: only renders when we have no folders yet AND\n           no search active (search has its own inline spinner). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length === 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-6\"\n        aria-live=\"polite\"\n      >\n        <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>\n      </div>\n      <div\n        *ngIf=\"searchValue?.trim() && rows.length === 0 && !folderSearchLoading\"\n        class=\"cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-neutral-500 cqa-text-center\"\n      >\n        {{ labels.noFoldersFound }}\n      </div>\n      <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n        <!-- Synthetic loading row (lazy fetch in flight) -->\n        <div\n          *ngIf=\"row.kind === 'loading'\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-1.5 cqa-text-sm cqa-text-neutral-500\"\n          aria-live=\"polite\"\n        >\n          <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n          <span>Loading\u2026</span>\n        </div>\n        <!-- Synthetic load-more row (more children available on backend) -->\n        <button\n          *ngIf=\"row.kind === 'load-more'\"\n          type=\"button\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          class=\"cqa-flex cqa-items-center cqa-w-full cqa-py-1.5 cqa-text-sm cqa-text-indigo-600 hover:cqa-bg-[#D8D9FC] cqa-text-left\"\n          (click)=\"onLoadMore(row.node); $event.stopPropagation()\"\n        >\n          <span>Load more ({{ (row.node.totalChildren ?? 0) - (row.node.children?.length ?? 0) }})</span>\n        </button>\n        <!-- Real folder row -->\n        <div\n          *ngIf=\"row.kind === 'folder'\"\n          role=\"treeitem\"\n          tabindex=\"0\"\n          [attr.aria-expanded]=\"row.hasChildren ? isExpanded(row.node.id) : null\"\n          [attr.aria-selected]=\"isSelected(row.node.id)\"\n          [attr.data-folder-row-id]=\"row.node.id\"\n          [cqaFolderDrop]=\"row.node.id\"\n          [dropEnabled]=\"allowDrop\"\n          (testsDropped)=\"rowDropped(row.node.id, $event)\"\n          (folderDropped)=\"onFolderRowDropped(row.node.id, $event)\"\n          [cqaFolderDrag]=\"row.node.id\"\n          [dragEnabled]=\"allowDrop\"\n          (dragstart)=\"onFolderDragStart(row.node)\"\n          (dragend)=\"onFolderDragEnd()\"\n          (dragover)=\"onFolderRowDragOver(row)\"\n          (dragleave)=\"onFolderRowDragLeave(row)\"\n          (click)=\"onSelect(row.node)\"\n          (contextmenu)=\"openContextMenu(row.node, $event)\"\n          (keydown)=\"onRowKeydown($event, row, i)\"\n          class=\"cqa-group cqa-flex cqa-items-center cqa-gap-1 cqa-pr-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-[#D8D9FC] focus:cqa-outline-none focus:cqa-bg-[#D8D9FC] cqa-relative\"\n          [style.background-color]=\"(isSelected(row.node.id) || contextMenuFolderId === row.node.id) ? '#D8D9FC' : null\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          [attr.title]=\"folderRowTooltip(row.node)\"\n        >\n          <span\n            *ngIf=\"isSelected(row.node.id)\"\n            class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n          ></span>\n          <button\n            type=\"button\"\n            class=\"cqa-p-0\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\n            (click)=\"onToggle(row.node, $event)\"\n            [attr.aria-label]=\"isExpanded(row.node.id) ? 'Collapse' : 'Expand'\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">\n              {{ isExpanded(row.node.id) ? 'expand_more' : 'chevron_right' }}\n            </mat-icon>\n          </button>\n          <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: row.node.color }\"></ng-container>\n\n          <ng-container *ngIf=\"renamingId === row.node.id; else nameTpl\">\n            <input\n              type=\"text\"\n              size=\"1\"\n              [attr.data-folder-rename-input]=\"row.node.id\"\n              [attr.maxlength]=\"renameMaxLength\"\n              class=\"cqa-flex-1 cqa-min-w-0 cqa-w-full cqa-px-2 cqa-py-0.5 cqa-rounded cqa-border cqa-bg-white cqa-text-sm cqa-shadow-sm focus:cqa-outline-none focus:cqa-ring-1\"\n              [ngClass]=\"(isRenameDraftValid && !renameLimitFlash)\n                ? 'cqa-border-neutral-300 focus:cqa-border-indigo-400 focus:cqa-ring-indigo-200'\n                : 'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-[#FCA5A5]'\"\n              [attr.aria-invalid]=\"!isRenameDraftValid || renameLimitFlash\"\n              [(ngModel)]=\"renameDraft\"\n              (keydown)=\"onRenameKey($event, row.node)\"\n              (keypress)=\"$event.stopPropagation()\"\n              (keyup)=\"$event.stopPropagation()\"\n              (blur)=\"commitRename(row.node)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </ng-container>\n          <ng-template #nameTpl>\n            <span\n              class=\"cqa-flex-1 cqa-text-sm cqa-truncate\"\n              [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n              (dblclick)=\"beginRename(row.node, $event)\"\n            >{{ row.node.name }}</span>\n          </ng-template>\n\n          <!-- Saving indicator: replaces the count while the host's rename/save\n               API call is in flight, so the user gets immediate feedback. -->\n          <span\n            *ngIf=\"isFolderSaving(row.node.id)\"\n            class=\"cqa-flex cqa-items-center cqa-ml-1 cqa-flex-shrink-0\"\n            aria-live=\"polite\"\n            [attr.aria-label]=\"'Saving ' + row.node.name\"\n          >\n            <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 12 }\"></ng-container>\n          </span>\n\n          <!-- Count shown at rest; hidden on row hover when delete is allowed -->\n          <span\n            *ngIf=\"!isFolderSaving(row.node.id) && showCounts && row.node.count != null\"\n            class=\"cqa-text-xs cqa-tabular-nums cqa-ml-1\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [class.group-hover:cqa-hidden]=\"allowDelete\"\n          >{{ row.node.count }}</span>\n\n          <button\n            *ngIf=\"hasAnyContextAction\"\n            type=\"button\"\n            class=\"cqa-p-0.5 cqa-rounded hover:cqa-bg-neutral-200\"\n            [style.color]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id ? '#3F43EE' : '#4C4C51'\"\n            [class.cqa-hidden]=\"contextMenuFolderId !== row.node.id\"\n            [class.group-hover:cqa-inline-flex]=\"true\"\n            [class.cqa-inline-flex]=\"contextMenuFolderId === row.node.id\"\n            (click)=\"openContextMenu(row.node, $event)\"\n            [attr.aria-label]=\"'Open actions for ' + row.node.name\"\n            [attr.aria-haspopup]=\"'menu'\"\n            [attr.aria-expanded]=\"contextMenuFolderId === row.node.id\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">more_horiz</mat-icon>\n          </button>\n        </div>\n      </ng-container>\n      <!-- Root-level pagination is now driven by scroll (see `(scroll)` on the\n           tree container above). Per-folder children retain the explicit\n           \"Load more\" button rendered inside the rows loop above, since\n           subtrees aren't independently scrollable. -->\n      <!-- Pagination spinner \u2014 visible only when fetching an additional page\n           of roots (folders.length > 0 distinguishes from initial-load case). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length > 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-2\"\n        aria-live=\"polite\"\n      >\n        <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n      </div>\n    </div>\n      </div>\n    </div>\n\n    <!-- Divider between folder tree and pinned Unorganized tab -->\n    <div\n      aria-hidden=\"true\"\n      class=\"cqa-mx-3 cqa-flex-shrink-0\"\n      style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n    ></div>\n\n    <!-- Unorganized \u2014 pinned below the scrollable folder tree so it stays visible regardless of folder count -->\n    <div\n      role=\"treeitem\"\n      tabindex=\"0\"\n      [attr.aria-selected]=\"isSelected(null)\"\n      class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-[#D8D9FC] focus:cqa-outline-none focus:cqa-bg-[#D8D9FC] cqa-relative cqa-flex-shrink-0\"\n      [style.background-color]=\"isSelected(null) ? '#D8D9FC' : null\"\n      [cqaFolderDrop]=\"null\"\n      [dropEnabled]=\"allowDrop\"\n      (testsDropped)=\"rowDropped(null, $event)\"\n      (folderDropped)=\"onFolderRowDropped(null, $event)\"\n      (click)=\"onSelectUnorganized()\"\n    >\n      <span\n        *ngIf=\"isSelected(null)\"\n        class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n      ></span>\n      <mat-icon [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n      <span class=\"cqa-flex-1 cqa-text-sm\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ labels.unorganized }}</span>\n      <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-tabular-nums\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ unorganizedCount }}</span>\n    </div>\n\n    <!-- Folder context menu (right-click / ellipsis). A 0\u00D70 fixed-position\n         anchor at the click coords drives a cdkConnectedOverlay; CDK's\n         flexible-connected positioning auto-flips up/left when the menu\n         would overflow the viewport (last-folder-near-bottom case). -->\n    <div #ctxAnchor cdkOverlayOrigin\n         class=\"cqa-fixed cqa-w-0 cqa-h-0 cqa-pointer-events-none\"\n         [style.left.px]=\"contextMenuPosition.x\"\n         [style.top.px]=\"contextMenuPosition.y\"></div>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"ctxAnchor\"\n      [cdkConnectedOverlayOpen]=\"contextMenuFolderId !== null\"\n      [cdkConnectedOverlayPositions]=\"contextMenuPositions\"\n      [cdkConnectedOverlayHasBackdrop]=\"false\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"false\"\n      [cdkConnectedOverlayPush]=\"true\"\n      (overlayOutsideClick)=\"onOverlayOutsideClick()\"\n      (detach)=\"closeContextMenu()\"\n    >\n      <!-- The lib's tailwind config sets important: '.cqa-ui-root', which\n           emits descendant selectors like `.cqa-ui-root .cqa-bg-white`.\n           CDK Overlay teleports this template into the global overlay\n           container (outside the host's cqa-ui-root), so we wrap the menu in\n           an ancestor cqa-ui-root div to re-establish the utility scope. -->\n      <div class=\"cqa-ui-root\">\n      <div\n        role=\"menu\"\n        class=\"cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n        (click)=\"$event.stopPropagation()\"\n        (contextmenu)=\"$event.preventDefault(); $event.stopPropagation()\"\n      >\n        <ng-container *ngIf=\"folderById(contextMenuFolderId) as menuNode\">\n          <button\n            *ngIf=\"allowCreate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextCreateSubfolder(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">create_new_folder</mat-icon>\n            <span>{{ labels.folderMenuCreateSubfolder }}</span>\n          </button>\n          <button\n            *ngIf=\"allowRename\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextRename(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">edit</mat-icon>\n            <span>{{ labels.folderMenuRename }}</span>\n          </button>\n          <button\n            *ngIf=\"allowMove\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextMove(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">drive_file_move</mat-icon>\n            <span>{{ labels.folderMenuMove }}</span>\n          </button>\n          <button\n            *ngIf=\"allowDuplicate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextDuplicate(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">content_copy</mat-icon>\n            <span>{{ labels.folderMenuDuplicate }}</span>\n          </button>\n          <div *ngIf=\"allowDelete && (allowCreate || allowRename || allowMove || allowDuplicate)\" class=\"cqa-h-px cqa-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      </div>\n    </ng-template>\n\n  </ng-container>\n  </div>\n</aside>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FolderDropDirective, selector: "[cqaFolderDrop]", inputs: ["cqaFolderDrop", "dropEnabled"], outputs: ["testsDropped", "folderDropped"] }, { type: FolderDragDirective, selector: "[cqaFolderDrag]", inputs: ["cqaFolderDrag", "dragEnabled"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$6.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { type: i1$6.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FolderSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-folder-sidebar', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Reusable 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\n    class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-3 cqa-py-1\"\n    [style.border-bottom]=\"collapsed ? null : '1px solid #E2E2E3'\"\n    [style.margin-bottom.px]=\"collapsed ? 0 : 8\"\n  >\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      <div class=\"cqa-relative\">\n        <cqa-search-bar\n          size=\"sm\"\n          [fullWidth]=\"true\"\n          [value]=\"searchValue\"\n          [placeholder]=\"labels.searchFoldersPlaceholder\"\n          [showClear]=\"true\"\n          (valueChange)=\"onSearchInput($event)\"\n          (cleared)=\"onSearchClear()\"\n        ></cqa-search-bar>\n        <span\n          *ngIf=\"folderSearchLoading\"\n          class=\"cqa-absolute cqa-right-8 cqa-inset-y-0 cqa-flex cqa-items-center\"\n          aria-live=\"polite\"\n          aria-label=\"Searching folders\"\n        >\n          <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n        </span>\n      </div>\n    </div>\n\n    <!-- Tree (folders only \u2014 Unorganized sits directly below; tree caps at 60vh and scrolls when overflowing).\n         Scroll-based lazy-loading at the root level: nearing the bottom emits\n         `rootLoadMoreRequested`, which the host responds to by fetching the\n         next page of roots. -->\n    <div role=\"tree\" class=\"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         (scroll)=\"onTreeScroll($event)\">\n      <!-- Initial-load spinner: only renders when we have no folders yet AND\n           no search active (search has its own inline spinner). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length === 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-6\"\n        aria-live=\"polite\"\n      >\n        <mat-spinner diameter=\"20\" mode=\"indeterminate\"></mat-spinner>\n      </div>\n      <div\n        *ngIf=\"searchValue?.trim() && rows.length === 0 && !folderSearchLoading\"\n        class=\"cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-neutral-500 cqa-text-center\"\n      >\n        {{ labels.noFoldersFound }}\n      </div>\n      <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n        <!-- Synthetic loading row (lazy fetch in flight) -->\n        <div\n          *ngIf=\"row.kind === 'loading'\"\n          [style.paddingLeft.px]=\"8 + row.depth * 16\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-1.5 cqa-text-sm cqa-text-neutral-500\"\n          aria-live=\"polite\"\n        >\n          <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n          <span>Loading\u2026</span>\n        </div>\n        <!-- Synthetic load-more row (more children available on backend) -->\n        <button\n          *ngIf=\"row.kind === 'load-more'\"\n          type=\"button\"\n          [style.paddingLeft.px]=\"8 + row.depth * 16\"\n          class=\"cqa-flex cqa-items-center cqa-w-full cqa-py-1.5 cqa-text-sm cqa-text-indigo-600 hover:cqa-bg-indigo-50 cqa-text-left\"\n          (click)=\"onLoadMore(row.node); $event.stopPropagation()\"\n        >\n          <span>Load more ({{ (row.node.totalChildren ?? 0) - (row.node.children?.length ?? 0) }})</span>\n        </button>\n        <!-- Real folder row -->\n        <div\n          *ngIf=\"row.kind === 'folder'\"\n          role=\"treeitem\"\n          tabindex=\"0\"\n          [attr.aria-expanded]=\"row.hasChildren ? isExpanded(row.node.id) : null\"\n          [attr.aria-selected]=\"isSelected(row.node.id)\"\n          [attr.data-folder-row-id]=\"row.node.id\"\n          [cqaFolderDrop]=\"row.node.id\"\n          [dropEnabled]=\"allowDrop\"\n          (testsDropped)=\"rowDropped(row.node.id, $event)\"\n          (folderDropped)=\"onFolderRowDropped(row.node.id, $event)\"\n          [cqaFolderDrag]=\"row.node.id\"\n          [dragEnabled]=\"allowDrop\"\n          (dragstart)=\"onFolderDragStart(row.node)\"\n          (dragend)=\"onFolderDragEnd()\"\n          (dragover)=\"onFolderRowDragOver(row)\"\n          (dragleave)=\"onFolderRowDragLeave(row)\"\n          (click)=\"onSelect(row.node)\"\n          (contextmenu)=\"openContextMenu(row.node, $event)\"\n          (keydown)=\"onRowKeydown($event, row, i)\"\n          class=\"cqa-group cqa-flex cqa-items-center cqa-gap-1 cqa-pr-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-indigo-50 focus:cqa-outline-none focus:cqa-bg-indigo-50 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\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\n            (click)=\"onToggle(row.node, $event)\"\n            [attr.aria-label]=\"isExpanded(row.node.id) ? 'Collapse' : 'Expand'\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">\n              {{ isExpanded(row.node.id) ? 'expand_more' : 'chevron_right' }}\n            </mat-icon>\n          </button>\n          <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: row.node.color }\"></ng-container>\n\n          <ng-container *ngIf=\"renamingId === row.node.id; else nameTpl\">\n            <input\n              type=\"text\"\n              size=\"1\"\n              [attr.data-folder-rename-input]=\"row.node.id\"\n              [attr.maxlength]=\"renameMaxLength\"\n              class=\"cqa-flex-1 cqa-min-w-0 cqa-w-full cqa-px-2 cqa-py-0.5 cqa-rounded cqa-border cqa-bg-white cqa-text-sm cqa-shadow-sm focus:cqa-outline-none focus:cqa-ring-1\"\n              [ngClass]=\"(isRenameDraftValid && !renameLimitFlash)\n                ? 'cqa-border-neutral-300 focus:cqa-border-indigo-400 focus:cqa-ring-indigo-200'\n                : 'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-[#FCA5A5]'\"\n              [attr.aria-invalid]=\"!isRenameDraftValid || renameLimitFlash\"\n              [(ngModel)]=\"renameDraft\"\n              (keydown)=\"onRenameKey($event, row.node)\"\n              (keypress)=\"$event.stopPropagation()\"\n              (keyup)=\"$event.stopPropagation()\"\n              (blur)=\"commitRename(row.node)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </ng-container>\n          <ng-template #nameTpl>\n            <span\n              class=\"cqa-flex-1 cqa-text-sm cqa-truncate\"\n              [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n              (dblclick)=\"beginRename(row.node, $event)\"\n            >{{ row.node.name }}</span>\n          </ng-template>\n\n          <!-- 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-tabular-nums cqa-ml-1\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [class.group-hover:cqa-hidden]=\"allowDelete\"\n          >{{ row.node.count }}</span>\n\n          <button\n            *ngIf=\"hasAnyContextAction\"\n            type=\"button\"\n            class=\"cqa-p-0.5 cqa-rounded hover:cqa-bg-neutral-200\"\n            [style.color]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id ? '#3F43EE' : '#4C4C51'\"\n            [class.cqa-hidden]=\"contextMenuFolderId !== row.node.id\"\n            [class.group-hover:cqa-inline-flex]=\"true\"\n            [class.cqa-inline-flex]=\"contextMenuFolderId === row.node.id\"\n            (click)=\"openContextMenu(row.node, $event)\"\n            [attr.aria-label]=\"'Open actions for ' + row.node.name\"\n            [attr.aria-haspopup]=\"'menu'\"\n            [attr.aria-expanded]=\"contextMenuFolderId === row.node.id\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">more_horiz</mat-icon>\n          </button>\n        </div>\n      </ng-container>\n      <!-- Root-level pagination is now driven by scroll (see `(scroll)` on the\n           tree container above). Per-folder children retain the explicit\n           \"Load more\" button rendered inside the rows loop above, since\n           subtrees aren't independently scrollable. -->\n      <!-- Pagination spinner \u2014 visible only when fetching an additional page\n           of roots (folders.length > 0 distinguishes from initial-load case). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length > 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-2\"\n        aria-live=\"polite\"\n      >\n        <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n      </div>\n    </div>\n\n    <!-- Divider between folder tree and pinned Unorganized tab -->\n    <div\n      aria-hidden=\"true\"\n      class=\"cqa-mx-3 cqa-shrink-0\"\n      style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n    ></div>\n\n    <!-- Unorganized \u2014 pinned below the scrollable folder tree so it stays visible regardless of folder count -->\n    <div\n      role=\"treeitem\"\n      tabindex=\"0\"\n      [attr.aria-selected]=\"isSelected(null)\"\n      class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-indigo-50 focus:cqa-outline-none focus:cqa-bg-indigo-50 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)=\"onSelectUnorganized()\"\n    >\n      <span\n        *ngIf=\"isSelected(null)\"\n        class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n      ></span>\n      <mat-icon [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n      <span class=\"cqa-flex-1 cqa-text-sm\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ labels.unorganized }}</span>\n      <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-tabular-nums\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ unorganizedCount }}</span>\n    </div>\n\n    <!-- Folder context menu (right-click / ellipsis). A 0\u00D70 fixed-position\n         anchor at the click coords drives a cdkConnectedOverlay; CDK's\n         flexible-connected positioning auto-flips up/left when the menu\n         would overflow the viewport (last-folder-near-bottom case). -->\n    <div #ctxAnchor cdkOverlayOrigin\n         class=\"cqa-fixed cqa-w-0 cqa-h-0 cqa-pointer-events-none\"\n         [style.left.px]=\"contextMenuPosition.x\"\n         [style.top.px]=\"contextMenuPosition.y\"></div>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"ctxAnchor\"\n      [cdkConnectedOverlayOpen]=\"contextMenuFolderId !== null\"\n      [cdkConnectedOverlayPositions]=\"contextMenuPositions\"\n      [cdkConnectedOverlayHasBackdrop]=\"false\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"false\"\n      [cdkConnectedOverlayPush]=\"true\"\n      (overlayOutsideClick)=\"onOverlayOutsideClick()\"\n      (detach)=\"closeContextMenu()\"\n    >\n      <!-- The lib's tailwind config sets important: '.cqa-ui-root', which\n           emits descendant selectors like `.cqa-ui-root .cqa-bg-white`.\n           CDK Overlay teleports this template into the global overlay\n           container (outside the host's cqa-ui-root), so we wrap the menu in\n           an ancestor cqa-ui-root div to re-establish the utility scope. -->\n      <div class=\"cqa-ui-root\">\n      <div\n        role=\"menu\"\n        class=\"cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n        (click)=\"$event.stopPropagation()\"\n        (contextmenu)=\"$event.preventDefault(); $event.stopPropagation()\"\n      >\n        <ng-container *ngIf=\"folderById(contextMenuFolderId) as menuNode\">\n          <button\n            *ngIf=\"allowCreate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextCreateSubfolder(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">create_new_folder</mat-icon>\n            <span>{{ labels.folderMenuCreateSubfolder }}</span>\n          </button>\n          <button\n            *ngIf=\"allowRename\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextRename(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">edit</mat-icon>\n            <span>{{ labels.folderMenuRename }}</span>\n          </button>\n          <button\n            *ngIf=\"allowMove\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextMove(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">drive_file_move</mat-icon>\n            <span>{{ labels.folderMenuMove }}</span>\n          </button>\n          <button\n            *ngIf=\"allowDuplicate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextDuplicate(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">content_copy</mat-icon>\n            <span>{{ labels.folderMenuDuplicate }}</span>\n          </button>\n          <div *ngIf=\"allowDelete && (allowCreate || allowRename || allowMove || allowDuplicate)\" class=\"cqa-h-px cqa-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      </div>\n    </ng-template>\n\n  </ng-container>\n</aside>\n", styles: [] }]
+            args: [{ selector: 'cqa-folder-sidebar', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Reusable indeterminate loading spinner. Render via\n     <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>. -->\n<ng-template #loadingSpinner let-size=\"size\">\n  <svg [attr.width]=\"size || 16\" [attr.height]=\"size || 16\" viewBox=\"0 0 50 50\" aria-label=\"loading\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"></circle>\n    <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n      <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"></animateTransform>\n    </path>\n  </svg>\n</ng-template>\n\n<!-- Reusable folder icon. Render via <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: node.color }\"></ng-container>. -->\n<ng-template #folderIcon let-color=\"color\">\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-flex-shrink-0\">\n    <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" [attr.stroke]=\"color || '#99999E'\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<aside\n  class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-h-full cqa-min-h-0\"\n  [class.cqa-border]=\"!collapsed\"\n  [class.cqa-border-neutral-200]=\"!collapsed\"\n  [class.cqa-rounded-lg]=\"!collapsed\"\n  [style.width.px]=\"collapsed ? 22 : 240\"\n  style=\"overflow: hidden; transition: width 260ms cubic-bezier(0.4, 0, 0.2, 1);\"\n>\n  <!-- Collapsed rail: the entire sidebar becomes a single click target so the\n       slim strip reads as an obvious \"expand me\" handle. -->\n  <button\n    *ngIf=\"collapsed\"\n    type=\"button\"\n    style=\"width: 22px;\"\n    class=\"cqa-group cqa-flex cqa-flex-col cqa-items-center cqa-flex-shrink-0 cqa-h-full cqa-py-2 cqa-gap-3 cqa-bg-neutral-50 cqa-border cqa-border-neutral-200 cqa-text-neutral-500 hover:cqa-bg-indigo-50 hover:cqa-border-indigo-200 hover:cqa-text-indigo-600 focus:cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-indigo-200 cqa-cursor-pointer\"\n    (click)=\"togglePanel()\"\n    [attr.aria-label]=\"'Expand folders panel'\"\n    [title]=\"'Expand folders panel'\"\n  >\n    <mat-icon style=\"font-size:16px;width:16px;height:16px\">chevron_right</mat-icon>\n    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center\" aria-hidden=\"true\">\n      <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" stroke=\"currentColor\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </span>\n  </button>\n\n  <div *ngIf=\"!collapsed\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-h-0 cqa-pb-2\" style=\"width: 240px;\">\n  <!-- Header (expanded) -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-justify-between cqa-py-1 cqa-px-3\"\n    style=\"border-bottom: 1px solid #E2E2E3; margin-bottom: 8px;\"\n  >\n    <span class=\"cqa-text-sm cqa-font-semibold cqa-text-neutral-900 cqa-py-0.5\">{{ labels.folders }}</span>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <button\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"togglePanel()\"\n        [attr.aria-label]=\"'Collapse folders panel'\"\n        [title]=\"'Collapse folders panel'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">keyboard_double_arrow_left</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100\"\n        [class.cqa-text-neutral-500]=\"!searchVisible\"\n        [class.cqa-text-indigo-600]=\"searchVisible\"\n        [class.cqa-bg-neutral-100]=\"searchVisible\"\n        (click)=\"toggleSearchVisible()\"\n        [attr.aria-label]=\"searchVisible ? 'Hide folder search' : 'Search folders'\"\n        [attr.aria-pressed]=\"searchVisible\"\n        [title]=\"searchVisible ? 'Hide folder search' : 'Search folders'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">search</mat-icon>\n      </button>\n      <button\n        *ngIf=\"allowCreate\"\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"requestCreate(null)\"\n        [attr.aria-label]=\"labels.newFolder\"\n        [title]=\"labels.newFolder\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container>\n    <!-- Search (toggled via the search icon in the header) -->\n    <div\n      class=\"cqa-grid\"\n      style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n      [style.grid-template-rows]=\"searchVisible ? '1fr' : '0fr'\"\n    >\n      <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n        <div class=\"cqa-px-3 cqa-pb-2\">\n          <div class=\"cqa-relative\">\n            <cqa-search-bar\n              size=\"sm\"\n              [fullWidth]=\"true\"\n              [value]=\"searchValue\"\n              [autoFocus]=\"searchVisible\"\n              [placeholder]=\"labels.searchFoldersPlaceholder\"\n              [showClear]=\"true\"\n              (valueChange)=\"onSearchInput($event)\"\n              (cleared)=\"onSearchClear()\"\n            ></cqa-search-bar>\n            <span\n              *ngIf=\"folderSearchLoading\"\n              class=\"cqa-absolute cqa-right-8 cqa-inset-y-0 cqa-flex cqa-items-center\"\n              aria-live=\"polite\"\n              aria-label=\"Searching folders\"\n            >\n              <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Organized section header \u2014 visually distinct from folder rows so it reads\n         as a view/section toggle rather than a folder item. -->\n    <button\n      type=\"button\"\n      class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-px-3 cqa-py-1 cqa-text-left cqa-text-[#6D6D74] hover:cqa-text-[#3F43EE] focus:cqa-outline-none focus:cqa-text-[#3F43EE] cqa-flex-shrink-0 cqa-uppercase\"\n      (click)=\"toggleFoldersAccordion()\"\n      [attr.aria-expanded]=\"foldersAccordionExpanded\"\n      [attr.aria-label]=\"foldersAccordionExpanded ? 'Collapse organized folders' : 'Expand organized folders'\"\n    >\n      <span class=\"cqa-text-[11px] cqa-font-semibold cqa-tracking-wider\">{{ labels.organized }}</span>\n      <mat-icon\n        style=\"font-size:16px;width:16px;height:16px;transition: transform 200ms ease;\"\n        [style.transform]=\"foldersAccordionExpanded ? 'rotate(0deg)' : 'rotate(-90deg)'\"\n      >expand_more</mat-icon>\n    </button>\n\n    <!-- Tree (folders only \u2014 Unorganized sits directly below; tree caps at 60vh and scrolls when overflowing).\n         Scroll-based lazy-loading at the root level: nearing the bottom emits\n         `rootLoadMoreRequested`, which the host responds to by fetching the\n         next page of roots. -->\n    <div\n      class=\"cqa-grid cqa-min-h-0\"\n      style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n      [style.grid-template-rows]=\"foldersAccordionExpanded ? '1fr' : '0fr'\"\n    >\n      <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n    <div role=\"tree\" class=\"cqa-min-h-0 cqa-max-h-[40vh] cqa-overflow-y-auto cqa-py-1 cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n         (scroll)=\"onTreeScroll($event)\">\n      <!-- Initial-load spinner: only renders when we have no folders yet AND\n           no search active (search has its own inline spinner). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length === 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-6\"\n        aria-live=\"polite\"\n      >\n        <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>\n      </div>\n      <div\n        *ngIf=\"searchValue?.trim() && rows.length === 0 && !folderSearchLoading\"\n        class=\"cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-neutral-500 cqa-text-center\"\n      >\n        {{ labels.noFoldersFound }}\n      </div>\n      <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n        <!-- Synthetic loading row (lazy fetch in flight) -->\n        <div\n          *ngIf=\"row.kind === 'loading'\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-1.5 cqa-text-sm cqa-text-neutral-500\"\n          aria-live=\"polite\"\n        >\n          <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n          <span>Loading\u2026</span>\n        </div>\n        <!-- Synthetic load-more row (more children available on backend) -->\n        <button\n          *ngIf=\"row.kind === 'load-more'\"\n          type=\"button\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          class=\"cqa-flex cqa-items-center cqa-w-full cqa-py-1.5 cqa-text-sm cqa-text-indigo-600 hover:cqa-bg-[#D8D9FC] cqa-text-left\"\n          (click)=\"onLoadMore(row.node); $event.stopPropagation()\"\n        >\n          <span>Load more ({{ (row.node.totalChildren ?? 0) - (row.node.children?.length ?? 0) }})</span>\n        </button>\n        <!-- Real folder row -->\n        <div\n          *ngIf=\"row.kind === 'folder'\"\n          role=\"treeitem\"\n          tabindex=\"0\"\n          [attr.aria-expanded]=\"row.hasChildren ? isExpanded(row.node.id) : null\"\n          [attr.aria-selected]=\"isSelected(row.node.id)\"\n          [attr.data-folder-row-id]=\"row.node.id\"\n          [cqaFolderDrop]=\"row.node.id\"\n          [dropEnabled]=\"allowDrop\"\n          (testsDropped)=\"rowDropped(row.node.id, $event)\"\n          (folderDropped)=\"onFolderRowDropped(row.node.id, $event)\"\n          [cqaFolderDrag]=\"row.node.id\"\n          [dragEnabled]=\"allowDrop\"\n          (dragstart)=\"onFolderDragStart(row.node)\"\n          (dragend)=\"onFolderDragEnd()\"\n          (dragover)=\"onFolderRowDragOver(row)\"\n          (dragleave)=\"onFolderRowDragLeave(row)\"\n          (click)=\"onSelect(row.node)\"\n          (contextmenu)=\"openContextMenu(row.node, $event)\"\n          (keydown)=\"onRowKeydown($event, row, i)\"\n          class=\"cqa-group cqa-flex cqa-items-center cqa-gap-1 cqa-pr-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-[#D8D9FC] focus:cqa-outline-none focus:cqa-bg-[#D8D9FC] cqa-relative\"\n          [style.background-color]=\"(isSelected(row.node.id) || contextMenuFolderId === row.node.id) ? '#D8D9FC' : null\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          [attr.title]=\"folderRowTooltip(row.node)\"\n        >\n          <span\n            *ngIf=\"isSelected(row.node.id)\"\n            class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n          ></span>\n          <button\n            type=\"button\"\n            class=\"cqa-p-0\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\n            (click)=\"onToggle(row.node, $event)\"\n            [attr.aria-label]=\"isExpanded(row.node.id) ? 'Collapse' : 'Expand'\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">\n              {{ isExpanded(row.node.id) ? 'expand_more' : 'chevron_right' }}\n            </mat-icon>\n          </button>\n          <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: row.node.color }\"></ng-container>\n\n          <ng-container *ngIf=\"renamingId === row.node.id; else nameTpl\">\n            <input\n              type=\"text\"\n              size=\"1\"\n              [attr.data-folder-rename-input]=\"row.node.id\"\n              [attr.maxlength]=\"renameMaxLength\"\n              class=\"cqa-flex-1 cqa-min-w-0 cqa-w-full cqa-px-2 cqa-py-0.5 cqa-rounded cqa-border cqa-bg-white cqa-text-sm cqa-shadow-sm focus:cqa-outline-none focus:cqa-ring-1\"\n              [ngClass]=\"(isRenameDraftValid && !renameLimitFlash)\n                ? 'cqa-border-neutral-300 focus:cqa-border-indigo-400 focus:cqa-ring-indigo-200'\n                : 'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-[#FCA5A5]'\"\n              [attr.aria-invalid]=\"!isRenameDraftValid || renameLimitFlash\"\n              [(ngModel)]=\"renameDraft\"\n              (keydown)=\"onRenameKey($event, row.node)\"\n              (keypress)=\"$event.stopPropagation()\"\n              (keyup)=\"$event.stopPropagation()\"\n              (blur)=\"commitRename(row.node)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </ng-container>\n          <ng-template #nameTpl>\n            <span\n              class=\"cqa-flex-1 cqa-text-sm cqa-truncate\"\n              [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n              (dblclick)=\"beginRename(row.node, $event)\"\n            >{{ row.node.name }}</span>\n          </ng-template>\n\n          <!-- Saving indicator: replaces the count while the host's rename/save\n               API call is in flight, so the user gets immediate feedback. -->\n          <span\n            *ngIf=\"isFolderSaving(row.node.id)\"\n            class=\"cqa-flex cqa-items-center cqa-ml-1 cqa-flex-shrink-0\"\n            aria-live=\"polite\"\n            [attr.aria-label]=\"'Saving ' + row.node.name\"\n          >\n            <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 12 }\"></ng-container>\n          </span>\n\n          <!-- Count shown at rest; hidden on row hover when delete is allowed -->\n          <span\n            *ngIf=\"!isFolderSaving(row.node.id) && showCounts && row.node.count != null\"\n            class=\"cqa-text-xs cqa-tabular-nums cqa-ml-1\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [class.group-hover:cqa-hidden]=\"allowDelete\"\n          >{{ row.node.count }}</span>\n\n          <button\n            *ngIf=\"hasAnyContextAction\"\n            type=\"button\"\n            class=\"cqa-p-0.5 cqa-rounded hover:cqa-bg-neutral-200\"\n            [style.color]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id ? '#3F43EE' : '#4C4C51'\"\n            [class.cqa-hidden]=\"contextMenuFolderId !== row.node.id\"\n            [class.group-hover:cqa-inline-flex]=\"true\"\n            [class.cqa-inline-flex]=\"contextMenuFolderId === row.node.id\"\n            (click)=\"openContextMenu(row.node, $event)\"\n            [attr.aria-label]=\"'Open actions for ' + row.node.name\"\n            [attr.aria-haspopup]=\"'menu'\"\n            [attr.aria-expanded]=\"contextMenuFolderId === row.node.id\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">more_horiz</mat-icon>\n          </button>\n        </div>\n      </ng-container>\n      <!-- Root-level pagination is now driven by scroll (see `(scroll)` on the\n           tree container above). Per-folder children retain the explicit\n           \"Load more\" button rendered inside the rows loop above, since\n           subtrees aren't independently scrollable. -->\n      <!-- Pagination spinner \u2014 visible only when fetching an additional page\n           of roots (folders.length > 0 distinguishes from initial-load case). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length > 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-2\"\n        aria-live=\"polite\"\n      >\n        <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n      </div>\n    </div>\n      </div>\n    </div>\n\n    <!-- Divider between folder tree and pinned Unorganized tab -->\n    <div\n      aria-hidden=\"true\"\n      class=\"cqa-mx-3 cqa-flex-shrink-0\"\n      style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n    ></div>\n\n    <!-- Unorganized \u2014 pinned below the scrollable folder tree so it stays visible regardless of folder count -->\n    <div\n      role=\"treeitem\"\n      tabindex=\"0\"\n      [attr.aria-selected]=\"isSelected(null)\"\n      class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-[#D8D9FC] focus:cqa-outline-none focus:cqa-bg-[#D8D9FC] cqa-relative cqa-flex-shrink-0\"\n      [style.background-color]=\"isSelected(null) ? '#D8D9FC' : null\"\n      [cqaFolderDrop]=\"null\"\n      [dropEnabled]=\"allowDrop\"\n      (testsDropped)=\"rowDropped(null, $event)\"\n      (folderDropped)=\"onFolderRowDropped(null, $event)\"\n      (click)=\"onSelectUnorganized()\"\n    >\n      <span\n        *ngIf=\"isSelected(null)\"\n        class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n      ></span>\n      <mat-icon [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n      <span class=\"cqa-flex-1 cqa-text-sm\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ labels.unorganized }}</span>\n      <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-tabular-nums\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ unorganizedCount }}</span>\n    </div>\n\n    <!-- Folder context menu (right-click / ellipsis). A 0\u00D70 fixed-position\n         anchor at the click coords drives a cdkConnectedOverlay; CDK's\n         flexible-connected positioning auto-flips up/left when the menu\n         would overflow the viewport (last-folder-near-bottom case). -->\n    <div #ctxAnchor cdkOverlayOrigin\n         class=\"cqa-fixed cqa-w-0 cqa-h-0 cqa-pointer-events-none\"\n         [style.left.px]=\"contextMenuPosition.x\"\n         [style.top.px]=\"contextMenuPosition.y\"></div>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"ctxAnchor\"\n      [cdkConnectedOverlayOpen]=\"contextMenuFolderId !== null\"\n      [cdkConnectedOverlayPositions]=\"contextMenuPositions\"\n      [cdkConnectedOverlayHasBackdrop]=\"false\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"false\"\n      [cdkConnectedOverlayPush]=\"true\"\n      (overlayOutsideClick)=\"onOverlayOutsideClick()\"\n      (detach)=\"closeContextMenu()\"\n    >\n      <!-- The lib's tailwind config sets important: '.cqa-ui-root', which\n           emits descendant selectors like `.cqa-ui-root .cqa-bg-white`.\n           CDK Overlay teleports this template into the global overlay\n           container (outside the host's cqa-ui-root), so we wrap the menu in\n           an ancestor cqa-ui-root div to re-establish the utility scope. -->\n      <div class=\"cqa-ui-root\">\n      <div\n        role=\"menu\"\n        class=\"cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n        (click)=\"$event.stopPropagation()\"\n        (contextmenu)=\"$event.preventDefault(); $event.stopPropagation()\"\n      >\n        <ng-container *ngIf=\"folderById(contextMenuFolderId) as menuNode\">\n          <button\n            *ngIf=\"allowCreate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextCreateSubfolder(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">create_new_folder</mat-icon>\n            <span>{{ labels.folderMenuCreateSubfolder }}</span>\n          </button>\n          <button\n            *ngIf=\"allowRename\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextRename(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">edit</mat-icon>\n            <span>{{ labels.folderMenuRename }}</span>\n          </button>\n          <button\n            *ngIf=\"allowMove\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextMove(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">drive_file_move</mat-icon>\n            <span>{{ labels.folderMenuMove }}</span>\n          </button>\n          <button\n            *ngIf=\"allowDuplicate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextDuplicate(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">content_copy</mat-icon>\n            <span>{{ labels.folderMenuDuplicate }}</span>\n          </button>\n          <div *ngIf=\"allowDelete && (allowCreate || allowRename || allowMove || allowDuplicate)\" class=\"cqa-h-px cqa-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      </div>\n    </ng-template>\n\n  </ng-container>\n  </div>\n</aside>\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { folders: [{
                 type: Input
             }], selectedFolderId: [{
@@ -9660,6 +9737,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], collapsed: [{
                 type: Input
+            }], foldersAccordionExpanded: [{
+                type: Input
             }], labels: [{
                 type: Input
             }], serverSideSearch: [{
@@ -9670,6 +9749,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], rootFoldersLoading: [{
                 type: Input
+            }], savingFolderIds: [{
+                type: Input
             }], folderSelected: [{
                 type: Output
             }], folderExpansionToggled: [{
@@ -9700,6 +9781,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], collapsedChange: [{
                 type: Output
+            }], foldersAccordionExpandedChange: [{
+                type: Output
             }], searchValue: [{
                 type: Input
             }], onDocumentClick: [{
@@ -9866,6 +9949,12 @@ class ModularTableTemplateComponent {
         this.modularLabels = Object.assign({}, DEFAULT_MODULAR_LABELS);
         this.bulkActions = [];
         this.sidebarCollapsed = false;
+        /** Controls whether the "Subfolders in {parent}" section is expanded.
+         *  Two-way bindable as `[(subfolderSectionExpanded)]`. Defaults to true. */
+        this.subfolderSectionExpanded = true;
+        /** Controls whether the root-view "Organized" folder grid is expanded.
+         *  Two-way bindable as `[(organizedSectionExpanded)]`. Defaults to true. */
+        this.organizedSectionExpanded = true;
         /** Lazy-load: when true, the sidebar emits `searchChange` and skips its
          *  local name filter so the host can serve search results from the backend. */
         this.serverSideSearch = false;
@@ -9884,6 +9973,9 @@ class ModularTableTemplateComponent {
          *  the modular grid renders at the right edge of the Organized row, and is
          *  forwarded to the sidebar for its own loading affordance. */
         this.rootFoldersLoading = false;
+        /** Folder ids whose host-side save (rename / move / etc.) is in flight.
+         *  Forwarded to the sidebar for loading state. */
+        this.savingFolderIds = [];
         /** Override for the currently-selected folder node. Used as a fallback when
          *  `findFolder(folders, selectedFolderId)` misses — e.g., during sidebar
          *  search when `folders` holds only the matched results, the selected
@@ -9948,6 +10040,8 @@ class ModularTableTemplateComponent {
          */
         this.bulkActionInvoked = new EventEmitter();
         this.sidebarCollapsedChange = new EventEmitter();
+        this.subfolderSectionExpandedChange = new EventEmitter();
+        this.organizedSectionExpandedChange = new EventEmitter();
         // ============================================================================
         // Row-reorder surface
         // ============================================================================
@@ -10058,6 +10152,14 @@ class ModularTableTemplateComponent {
             this.viewModeChange.emit(next);
         }
     }
+    toggleSubfolderSection() {
+        this.subfolderSectionExpanded = !this.subfolderSectionExpanded;
+        this.subfolderSectionExpandedChange.emit(this.subfolderSectionExpanded);
+    }
+    toggleOrganizedSection() {
+        this.organizedSectionExpanded = !this.organizedSectionExpanded;
+        this.organizedSectionExpandedChange.emit(this.organizedSectionExpanded);
+    }
     /** Partial override for the default reorder labels ("Reorder", "Done", etc.). */
     set reorderLabels(partial) {
         this._reorderLabels = Object.assign(Object.assign({}, DEFAULT_REORDER_LABELS), (partial || {}));
@@ -11215,10 +11317,10 @@ class ModularTableTemplateComponent {
 }
 ModularTableTemplateComponent.GRID_SCROLL_LOAD_THRESHOLD_PX = 96;
 ModularTableTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ModularTableTemplateComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
-ModularTableTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ModularTableTemplateComponent, selector: "cqa-modular-table-template", inputs: { searchPlaceholder: "searchPlaceholder", searchValue: "searchValue", showClear: "showClear", showSearchBar: "showSearchBar", showExportButton: "showExportButton", isExporting: "isExporting", filterConfig: "filterConfig", filterModel: "filterModel", showFilterPanel: "showFilterPanel", showFilterButton: "showFilterButton", otherButtons: "otherButtons", otherDropDownButtons: "otherDropDownButtons", otherSelectDropDownButtons: "otherSelectDropDownButtons", otherButtonLabel: "otherButtonLabel", otherButtonVariant: "otherButtonVariant", showOtherButton: "showOtherButton", showActionButton: "showActionButton", showSettingsButton: "showSettingsButton", showAutoRefreshButton: "showAutoRefreshButton", showViewModeToggle: "showViewModeToggle", viewMode: "viewMode", viewModeLabels: "viewModeLabels", data: "data", isEmptyState: "isEmptyState", emptyStateConfig: "emptyStateConfig", actions: "actions", chips: "chips", filterApplied: "filterApplied", columns: "columns", rowSelectable: "rowSelectable", selectedAutoRefreshInterval: "selectedAutoRefreshInterval", pageIndex: "pageIndex", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", pageSizeMenuDirection: "pageSizeMenuDirection", serverSidePagination: "serverSidePagination", totalElements: "totalElements", enableLocalSort: "enableLocalSort", isTableLoading: "isTableLoading", isTableDataLoading: "isTableDataLoading", cellJsonPathGetter: "cellJsonPathGetter", onJsonPathCopiedHandler: "onJsonPathCopiedHandler", selectedItems: "selectedItems", showSelectAllInToolbar: "showSelectAllInToolbar", showDismissInToolbar: "showDismissInToolbar", allSelectedInToolbar: "allSelectedInToolbar", folders: "folders", rootFolders: "rootFolders", selectedFolderId: "selectedFolderId", expandedFolderIds: "expandedFolderIds", unorganizedCount: "unorganizedCount", folderIdAccessor: "folderIdAccessor", modularConfig: "modularConfig", modularLabels: "modularLabels", bulkActions: "bulkActions", sidebarCollapsed: "sidebarCollapsed", serverSideSearch: "serverSideSearch", rootTotal: "rootTotal", folderSearchLoading: "folderSearchLoading", folderSearchValue: "folderSearchValue", rootFoldersLoading: "rootFoldersLoading", selectedFolderNode: "selectedFolderNode", selectedFolderTrail: "selectedFolderTrail", useInternalDialogs: "useInternalDialogs", showReorderButton: "showReorderButton", reorderSaving: "reorderSaving", reorderLabels: "reorderLabels", columnVisibility: "columnVisibility" }, outputs: { onSearchChange: "onSearchChange", onExportClick: "onExportClick", onApplyFilterClick: "onApplyFilterClick", onResetFilterClick: "onResetFilterClick", onClearAll: "onClearAll", removeChip: "removeChip", viewModeChange: "viewModeChange", pageChange: "pageChange", sortChange: "sortChange", folderSelected: "folderSelected", folderExpansionToggled: "folderExpansionToggled", folderChildrenRequested: "folderChildrenRequested", folderLoadMoreRequested: "folderLoadMoreRequested", rootLoadMoreRequested: "rootLoadMoreRequested", folderSearchChange: "folderSearchChange", folderCreated: "folderCreated", folderCreateRequested: "folderCreateRequested", folderRenamed: "folderRenamed", folderDeleted: "folderDeleted", testsMoved: "testsMoved", bulkActionClick: "bulkActionClick", bulkSelectAllChange: "bulkSelectAllChange", bulkDismiss: "bulkDismiss", bulkActionInvoked: "bulkActionInvoked", sidebarCollapsedChange: "sidebarCollapsedChange", reorderStart: "reorderStart", reorderCancel: "reorderCancel", reorderSave: "reorderSave", moveRequested: "moveRequested", selectedItemsChange: "selectedItemsChange", folderDeleteRequested: "folderDeleteRequested", folderMoveRequested: "folderMoveRequested", folderMoved: "folderMoved", folderDuplicateRequested: "folderDuplicateRequested", onReload: "onReload", onAutoRefreshClick: "onAutoRefreshClick", columnVisibilityChange: "columnVisibilityChange", autoRefreshIntervalChange: "autoRefreshIntervalChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "dynamicFilterComponent", first: true, predicate: DynamicFilterComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Reusable folder-icon chip. Render via <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>. -->\n<ng-template #folderIconChip let-color=\"color\">\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-lg cqa-bg-[#F0F0F1] cqa-text-[#6D6D74] cqa-shrink-0 group-hover:cqa-bg-indigo-50 group-hover:cqa-text-[#3F43EE]\">\n    <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" [attr.stroke]=\"color || 'currentColor'\" stroke-width=\"0.916667\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<!-- Reusable \"+\" chip used by the \"New folder\" tile. -->\n<ng-template #addIconChip>\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-lg cqa-bg-[#F0F0F1] cqa-text-[#6D6D74] cqa-shrink-0 group-hover:cqa-bg-indigo-50 group-hover:cqa-text-[#3F43EE]\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M8 3V13M3 8H13\" stroke=\"currentColor\" stroke-width=\"1.275\" stroke-linecap=\"round\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<div class=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n    <div [class]=\"!showSearchBar ? 'cqa-justify-end' : 'cqa-justify-between'\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n      <cqa-search-bar\n        *ngIf=\"showSearchBar\"\n        [placeholder]=\"searchPlaceholder\"\n        [value]=\"searchValue\"\n        [showClear]=\"showClear\"\n        (valueChange)=\"valueChange($event)\"\n        (search)=\"search($event)\"\n        (cleared)=\"cleared()\"\n      ></cqa-search-bar>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n        <cqa-button\n        *ngIf=\"showExportButton\"\n        variant=\"grey-solid\"\n        icon=\"open_in_new\"\n        [text]=\"isExporting ? 'Exporting...' : 'Export'\"\n        [disabled]=\"isExporting\"\n        (clicked)=\"exportCodeClick()\"\n      >\n        <span>{{ isExporting ? 'Exporting...' : 'Export' }}</span>\n      </cqa-button>\n      \n      <!-- Export Code Modal -->\n      <cqa-export-code-modal\n        *ngIf=\"showExportButton\"\n        [isOpen]=\"isExportModalOpen\"\n        [cases]=\"selectedCasesForExport\"\n        [disabled]=\"false\"\n        (closeModal)=\"closeExportModal()\"\n        (export)=\"onExportModalExport($event)\">\n      </cqa-export-code-modal>\n         <ng-container *ngFor=\"let dropdownTemplate of otherDropDownButtons; trackBy: trackByDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"dropdownTemplate\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngFor=\"let selectDropdownTemplate of otherSelectDropDownButtons; trackBy: trackBySelectDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"selectDropdownTemplate\"></ng-container>\n        </ng-container>\n        \n        <cqa-button\n          *ngIf=\"showFilterButton\"\n          variant=\"grey-solid\"\n          icon=\"add\"\n          [disabled]=\"isReordering\"\n          (clicked)=\"toggleFilter()\"\n        >\n        <span class=\"cqa-flex cqa-items-center cqa-gap-1\">\n          Filter          \n           <div [class]=\"arrowClasses\">\n            <svg\n              class=\"cqa-w-2 cqa-h-1 cqa-absolute cqa-left-[4px] cqa-top-[6px]\"\n              viewBox=\"0 0 8 4\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M0 0L4 4L8 0\"\n                stroke=\"#0B0B0C\"\n                stroke-width=\"1.33\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </div>\n        </span>\n        </cqa-button>\n        <cqa-column-visibility\n          *ngIf=\"showSettingsButton\"\n          [columns]=\"visibilityColumns\"\n          [columnVisibility]=\"columnVisibility\"\n          [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n          (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n          (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n        ></cqa-column-visibility>\n        <cqa-button\n          *ngIf=\"showAutoRefreshButton\"\n          variant=\"grey-solid\"\n          icon=\"refresh\"\n          (clicked)=\"handleRefreshClick()\"\n          [tooltip]=\"'Refresh'\"\n          tooltipPosition=\"below\"\n          [disabled]=\"isReordering\"\n        ></cqa-button>\n        <ng-container *ngFor=\"let buttonTemplate of otherButtons; trackBy: trackByTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n        </ng-container>\n        <cqa-segment-control\n          *ngIf=\"showViewModeToggle\"\n          size=\"lg\"\n          [segments]=\"viewModeSegments\"\n          [value]=\"viewMode\"\n          (valueChange)=\"onViewModeChange($event)\"\n        ></cqa-segment-control>\n        <cqa-button\n          *ngIf=\"showReorderButton && !isReordering\"\n          variant=\"outlined\"\n          icon=\"drag_indicator\"\n          [text]=\"reorderLabels.reorderButton\"\n          [disabled]=\"!pagedRows || pagedRows.length === 0 || isTableLoading || isTableDataLoading\"\n          (clicked)=\"startReorder()\"\n        ></cqa-button>\n        <ng-container *ngIf=\"showReorderButton && isReordering\">\n          <cqa-button\n            variant=\"outlined\"\n            [text]=\"reorderLabels.cancelButton\"\n            [disabled]=\"reorderSaving\"\n            (clicked)=\"cancelReorder()\"\n          ></cqa-button>\n          <cqa-button\n            variant=\"filled\"\n            [icon]=\"reorderSaving ? 'hourglass_empty' : ''\"\n            [text]=\"reorderSaving ? reorderLabels.savingButton : reorderLabels.doneButton\"\n            [disabled]=\"reorderSaving\"\n            (clicked)=\"saveReorder()\"\n          ></cqa-button>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Reorder mode banner -->\n    <div *ngIf=\"isReordering\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-bg-[#FFFBEB] cqa-border cqa-border-[#FDE68A]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n      </svg>\n      <span class=\"cqa-text-sm cqa-font-semibold cqa-text-[#92400E]\">{{ reorderLabels.bannerTitle }}</span>\n      <span class=\"cqa-text-sm cqa-text-[#92400E]\">{{ reorderLabels.bannerDescription }}</span>\n    </div>\n\n    <cqa-selected-filters\n      [filterApplied]=\"filterApplied\"\n      [chips]=\"chips\"\n      (removeChip)=\"onRemoveChip($event)\"\n      (clearAll)=\"onClearAllChips()\"\n      (onClearAll)=\"onClearAll.emit()\"\n    >\n    </cqa-selected-filters>\n\n    <cqa-dynamic-filter\n      *ngIf=\"showFilterPanel\"\n      [config]=\"filterConfig\"\n      [model]=\"filterModel\"\n      [showFilterPanel]=\"showFilterPanel\"\n      (filtersChanged)=\"onFiltersChanged($event)\"\n      (filtersApplied)=\"onFiltersApplied($event)\"\n      (onApplyFilterClick)=\"onApplyFilterClick.emit($event)\"\n      (onResetFilterClick)=\"handleResetFilterClick()\"\n    >\n    </cqa-dynamic-filter>\n\n    <div class=\"cqa-flex cqa-items-stretch cqa-gap-3 cqa-min-h-0 \" style=\"border-bottom: 1px solid rgb(226, 226, 227);\">\n      <!-- Sidebar (only shown in modular view) -->\n      <cqa-folder-sidebar\n        *ngIf=\"isModularView && modularConfig.showSidebar\"\n        [folders]=\"folders\"\n        [selectedFolderId]=\"selectedFolderId\"\n        [expandedFolderIds]=\"expandedFolderIds\"\n        [unorganizedCount]=\"unorganizedCount\"\n        [allowCreate]=\"modularConfig.allowCreateFolder\"\n        [allowRename]=\"modularConfig.allowRenameFolder\"\n        [allowDelete]=\"modularConfig.allowDeleteFolder\"\n        [allowDrop]=\"modularConfig.allowTestDragDrop\"\n        [showCounts]=\"modularConfig.showCounts\"\n        [collapsed]=\"sidebarCollapsed\"\n        [labels]=\"modularLabels\"\n        [serverSideSearch]=\"serverSideSearch\"\n        [rootTotal]=\"rootTotal\"\n        [folderSearchLoading]=\"folderSearchLoading\"\n        [rootFoldersLoading]=\"rootFoldersLoading\"\n        [searchValue]=\"folderSearchValue\"\n        (folderSelected)=\"onFolderSelected($event)\"\n        (folderExpansionToggled)=\"onFolderExpansionToggled($event)\"\n        (folderChildrenRequested)=\"folderChildrenRequested.emit($event)\"\n        (folderLoadMoreRequested)=\"folderLoadMoreRequested.emit($event)\"\n        (rootLoadMoreRequested)=\"rootLoadMoreRequested.emit()\"\n        (searchChange)=\"folderSearchChange.emit($event)\"\n        (folderCreated)=\"onFolderCreated($event)\"\n        (folderCreateRequested)=\"onFolderCreateRequested($event)\"\n        (folderRenamed)=\"onFolderRenamed($event)\"\n        (folderDeleted)=\"onFolderDeleted($event)\"\n        (folderMoveRequested)=\"onFolderMoveRequested($event)\"\n        (folderDuplicateRequested)=\"onFolderDuplicateRequested($event)\"\n        (testsDropped)=\"onTestsDropped($event)\"\n        (folderDropped)=\"onFolderDropped($event)\"\n        (collapsedChange)=\"onSidebarCollapsedChange($event)\"\n      ></cqa-folder-sidebar>\n\n      <!-- Right pane -->\n      <div\n        class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-min-w-0\"\n        [style.border-top]=\"isModularView ? '1px solid #E2E2E3' : null\"\n        [style.border-left]=\"isModularView ? '1px solid #E2E2E3' : null\"\n        [style.border-right]=\"isModularView ? '1px solid #E2E2E3' : null\"\n      >\n        <!-- Breadcrumb (modular view, folder drilled-in) -->\n        <nav\n          *ngIf=\"isModularView && modularConfig.showBreadcrumb && !isRootView\"\n          aria-label=\"Folder path\"\n          class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-sm cqa-px-3 cqa-py-1 cqa-mb-3 cqa-rounded-none\"\n          style=\"color: #6D6D74; border-bottom: 1px solid #E2E2E3;\"\n        >\n          <button type=\"button\" class=\"hover:cqa-text-[#3F43EE] cqa-inline-flex cqa-items-center cqa-gap-1\" (click)=\"onFolderSelected(null)\">\n            <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n              <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" stroke=\"currentColor\" stroke-width=\"0.916667\"/>\n            </svg>\n            <span>{{ modularLabels.allFolders }}</span>\n          </button>\n          <ng-container *ngFor=\"let crumb of breadcrumbTrail; let last = last\">\n            <mat-icon class=\"cqa-align-middle\" style=\"font-size:16px;width:16px;height:16px;color:#6D6D74;\">chevron_right</mat-icon>\n            <button\n              type=\"button\"\n              [ngClass]=\"last\n                ? 'cqa-text-[#161617] cqa-font-semibold'\n                : 'cqa-text-[#6D6D74] hover:cqa-text-[#3F43EE]'\"\n              [disabled]=\"last\"\n              (click)=\"!last && onFolderSelected(crumb.id)\"\n            >{{ crumb.name }}</button>\n          </ng-container>\n        </nav>\n\n        <!-- Folder grid: modular + root view -->\n        <section\n          *ngIf=\"isModularView && isRootView && modularConfig.showFolderGrid && rootFolderTiles.length\"\n          class=\"cqa-mb-4 cqa-px-5 cqa-pt-4 cqa-pb-[14px]\"\n          style=\"border-bottom: 1px solid #F0F0F1;\"\n        >\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n            <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n              <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" stroke=\"#6D6D74\" stroke-width=\"0.916667\"/>\n            </svg>\n            <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-[#6D6D74]\">{{ modularLabels.organized }}</h3>\n            <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n              {{ rootFolderTiles.length === 1 ? modularLabels.foldersCountSingular : modularLabels.foldersCountPlural.replace('{n}', '' + rootFolderTiles.length) }}\n            </span>\n          </div>\n          <div class=\"cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin cqa-pb-2\"\n               (scroll)=\"onRootGridScroll($event)\">\n            <button\n              *ngFor=\"let f of rootFolderTiles\"\n              type=\"button\"\n              [cqaFolderDrop]=\"f.id\"\n              [dropEnabled]=\"modularConfig.allowTestDragDrop\"\n              (testsDropped)=\"onTestsDropped($event)\"\n              (click)=\"onFolderSelected(f.id)\"\n              class=\"cqa-group cqa-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-solid cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-white hover:cqa-border-[#3F43EE] hover:cqa-shadow-sm cqa-transition-colors\"\n            >\n              <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-min-w-0\">\n                <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>\n                <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                  <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ f.name }}</span>\n                  <span *ngIf=\"modularConfig.showCounts\" class=\"cqa-text-sm cqa-text-neutral-500 cqa-truncate\">\n                    {{ (f.count ?? 0) === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + (f.count ?? 0)) }}<ng-container *ngIf=\"f.children?.length\"> \u00B7 {{ f.children!.length === 1 ? modularLabels.oneSubfolder : modularLabels.subfoldersCount.replace('{n}', '' + f.children!.length) }}</ng-container>\n                  </span>\n                </div>\n              </div>\n              <mat-icon class=\"cqa-text-neutral-400 cqa-shrink-0\" style=\"font-size:20px;width:20px;height:20px\">chevron_right</mat-icon>\n            </button>\n\n            <!-- \"+ New folder\" tile -->\n            <button\n              *ngIf=\"modularConfig.allowCreateFolder\"\n              type=\"button\"\n              (click)=\"onFolderCreateRequested({ parentId: null })\"\n              class=\"cqa-group cqa-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-dashed cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-[#FAFAFA] hover:cqa-border-[#3F43EE] hover:cqa-bg-white cqa-transition-colors\"\n            >\n              <ng-container *ngTemplateOutlet=\"addIconChip\"></ng-container>\n              <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ modularLabels.newFolder }}</span>\n                <span class=\"cqa-text-sm cqa-text-neutral-400\">{{ modularLabels.testsCountPlural.replace('{n}', '0') }}</span>\n              </div>\n            </button>\n\n            <!-- Pagination spinner anchored at the right edge of the Organized\n                 row. Only renders during an in-flight root fetch (initial OR\n                 scroll-driven \"load more\"), and is filtered to suppress when\n                 the section is empty so we don't show a spinner inside an\n                 otherwise-blank row. -->\n            <div\n              *ngIf=\"rootFoldersLoading && rootFolderTiles.length > 0\"\n              class=\"cqa-shrink-0 cqa-flex cqa-items-center cqa-justify-center cqa-w-[80px]\"\n              aria-live=\"polite\"\n              [attr.aria-label]=\"'Loading more folders'\"\n            >\n              <mat-spinner diameter=\"20\" mode=\"indeterminate\"></mat-spinner>\n            </div>\n          </div>\n        </section>\n\n        <!-- Subfolder section: modular + folder view. Shown whenever drilled in\n             (even if no subfolders, so the \"+ New folder\" tile remains\n             reachable, and so we can render a loading state during the\n             drill-in fetch before children arrive). -->\n        <section\n          *ngIf=\"isModularView && !isRootView && modularConfig.showSubfolderSection && (subfolderTiles.length || currentFolderNode?.childrenLoading)\"\n          class=\"cqa-mb-4 cqa-px-3 cqa-py-1\"\n        >\n          <div *ngIf=\"subfolderTiles.length || modularConfig.allowCreateFolder\" class=\"cqa-text-sm cqa-text-neutral-600 cqa-mb-2\">\n            {{ modularLabels.subfoldersIn }} {{ breadcrumbTrail.length ? breadcrumbTrail[breadcrumbTrail.length - 1].name : '' }}\n          </div>\n          <div class=\"cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin cqa-pb-2\"\n               (scroll)=\"onSubfolderGridScroll($event)\">\n            <button\n              *ngFor=\"let f of subfolderTiles\"\n              type=\"button\"\n              [cqaFolderDrop]=\"f.id\"\n              [dropEnabled]=\"modularConfig.allowTestDragDrop\"\n              (testsDropped)=\"onTestsDropped($event)\"\n              (click)=\"onFolderSelected(f.id)\"\n              class=\"cqa-group cqa-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-solid cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-white hover:cqa-border-[#3F43EE] hover:cqa-shadow-sm cqa-transition-colors\"\n            >\n              <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-min-w-0\">\n                <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>\n                <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                  <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ f.name }}</span>\n                  <span *ngIf=\"modularConfig.showCounts\" class=\"cqa-text-sm cqa-text-neutral-500 cqa-truncate\">\n                    {{ (f.count ?? 0) === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + (f.count ?? 0)) }}\n                  </span>\n                </div>\n              </div>\n              <mat-icon class=\"cqa-text-neutral-400 cqa-shrink-0\" style=\"font-size:20px;width:20px;height:20px\">chevron_right</mat-icon>\n            </button>\n\n            <!-- \"+ New folder\" tile -->\n            <button\n              *ngIf=\"modularConfig.allowCreateFolder\"\n              type=\"button\"\n              (click)=\"onFolderCreateRequested({ parentId: selectedFolderId })\"\n              class=\"cqa-group cqa-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-dashed cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-[#FAFAFA] hover:cqa-border-[#3F43EE] hover:cqa-bg-white cqa-transition-colors\"\n            >\n              <ng-container *ngTemplateOutlet=\"addIconChip\"></ng-container>\n              <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ modularLabels.newFolder }}</span>\n                <span class=\"cqa-text-sm cqa-text-neutral-400\">{{ modularLabels.testsCountPlural.replace('{n}', '0') }}</span>\n              </div>\n            </button>\n\n            <!-- Subfolder fetch indicator. Two cases:\n                 - Drill-in fetch: no subfolderTiles yet, render a centered\n                   row spinner so the section isn't empty during the fetch.\n                 - Pagination fetch: tiles exist, anchor a small spinner at\n                   the right edge so the user knows the next page is loading. -->\n            <div\n              *ngIf=\"currentFolderNode?.childrenLoading\"\n              class=\"cqa-shrink-0 cqa-flex cqa-items-center cqa-justify-center cqa-w-[80px]\"\n              aria-live=\"polite\"\n              [attr.aria-label]=\"'Loading subfolders'\"\n            >\n              <mat-spinner diameter=\"20\" mode=\"indeterminate\"></mat-spinner>\n            </div>\n          </div>\n        </section>\n\n        <!-- Folder panel header above the table: \"Hotel Search (3)\" + Clear filter -->\n        <div\n          *ngIf=\"isModularView && !isRootView && modularConfig.showUnorganizedSection\"\n          class=\"cqa-flex cqa-mb-1 cqa-items-center cqa-justify-between cqa-px-4 cqa-py-3 cqa-rounded-t-lg cqa-bg-indigo-50 cqa-border cqa-border-indigo-100\"\n        >\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n              <path d=\"M12.9585 10.4585C12.9585 10.79 12.8268 11.108 12.5924 11.3424C12.358 11.5768 12.04 11.7085 11.7085 11.7085H1.7085C1.37698 11.7085 1.05903 11.5768 0.824613 11.3424C0.590192 11.108 0.458496 10.79 0.458496 10.4585V1.7085C0.458496 1.37698 0.590192 1.05903 0.824613 0.824613C1.05903 0.590192 1.37698 0.458496 1.7085 0.458496H4.8335L6.0835 2.3335H11.7085C12.04 2.3335 12.358 2.46519 12.5924 2.69961C12.8268 2.93403 12.9585 3.25198 12.9585 3.5835V10.4585Z\" [attr.stroke]=\"currentFolderNode?.color || '#3F43EE'\" stroke-width=\"0.916667\"/>\n            </svg>\n            <span class=\"cqa-text-sm cqa-font-semibold cqa-text-indigo-700\">\n              {{ currentFolderNode?.name }} ({{ currentFolderDirectCount }})\n            </span>\n          </div>\n          <button\n            type=\"button\"\n            class=\"cqa-px-3 cqa-py-1 cqa-text-xs cqa-font-medium cqa-text-indigo-700 cqa-bg-white cqa-border cqa-border-indigo-200 cqa-rounded hover:cqa-bg-indigo-50\"\n            (click)=\"onFolderSelected(null)\"\n          >{{ modularLabels.clearFilter }}</button>\n        </div>\n\n        <!-- Unorganized section header at root view -->\n        <div\n          *ngIf=\"isModularView && isRootView && modularConfig.showUnorganizedSection\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2 cqa-mt-2\" style=\"margin-left: 20px;\"\n        >\n          <mat-icon class=\"cqa-text-[#6D6D74]\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n          <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-[#6D6D74]\">{{ modularLabels.unorganized }}</h3>\n          <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n            {{ unorganizedCount === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + unorganizedCount) }}\n          </span>\n        </div>\n\n        <!-- Table -->\n        <div class=\"cqa-rounded-[7px] cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative cqa-overflow-x-auto\"\n             [attr.style]=\"pagedRows && pagedRows.length > 0 ? null : 'border-bottom: none !important'\">\n          <ng-container *ngIf=\"(isTableLoading || isTableDataLoading) || (!effectiveIsEmptyState && pagedRows && pagedRows.length > 0); else storyEmptyTpl\">\n            <app-dynamic-table\n              [style.border-bottom]=\"pagedRows && pagedRows.length > 0 ? '1px solid rgb(226, 226, 227)' : null\"\n              [columns]=\"computedColumns\"\n              [data]=\"pagedRows\"\n              [rowSelectable]=\"rowSelectable\"\n              [enableLocalSort]=\"enableLocalSort && !isReordering\"\n              [isTableLoading]=\"isTableLoading\"\n              [isTableDataLoading]=\"isTableDataLoading\"\n              [cellJsonPathGetter]=\"cellJsonPathGetter\"\n              [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n              [enableRowReorder]=\"isReordering\"\n              (rowReorder)=\"onRowReorder($event)\"\n              (sortChange)=\"sortChange.emit($event)\">\n              <ng-template #emptyTableTpl>\n                <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8\">\n                  <img src=\"/assets/illustrations/empty-state.svg\" alt=\"No data\" class=\"cqa-w-32 cqa-h-32 cqa-mb-4\" />\n                  <h3 class=\"cqa-text-lg cqa-font-semibold cqa-mb-2\">No test cases</h3>\n                  <p class=\"cqa-text-sm cqa-text-neutral-500 cqa-mb-4\">Try adjusting filters or create a new test case.</p>\n                  <cqa-button variant=\"filled\" (clicked)=\"toggleFilter()\">Show Filters</cqa-button>\n                </div>\n              </ng-template>\n            </app-dynamic-table>\n          </ng-container>\n\n          <ng-template #storyEmptyTpl>\n            <div class=\"cqa-p-6 cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n              <cqa-empty-state\n                *ngIf=\"effectiveIsEmptyState\"\n                [title]=\"effectiveEmptyStateConfig.title\"\n                [description]=\"effectiveEmptyStateConfig.description\"\n                [imageUrl]=\"effectiveEmptyStateConfig.imageUrl\"\n                [actions]=\"effectiveEmptyStateConfig.actions\"\n                (actionClick)=\"onEmptyAction($event)\"\n              >\n              </cqa-empty-state>\n            </div>\n          </ng-template>\n        </div>\n\n        <cqa-pagination\n          [totalElements]=\"serverSidePagination ? totalElements : filteredRows.length\"\n          [pageIndex]=\"pageIndex\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"pageSizeOptions\"\n          [pageSizeMenuDirection]=\"pageSizeMenuDirection\"\n          [pageItemCount]=\"pagedRows.length\"\n          (paginate)=\"onPaginate($event)\"\n          (pageSizeChange)=\"onPageSizeChange($event)\"\n        >\n        </cqa-pagination>\n      </div>\n    </div>\n\n    <!-- Reused bulk action toolbar -->\n    <div *ngIf=\"anyRowSelected && modularConfig.allowBulkSelection && !isReordering\" class=\"cqa-absolute cqa-bottom-[18.75px] cqa-left-[50%] cqa-translate-x-[-50%] cqa-w-full lg:cqa-max-w-[68%] cqa-sm:max-w-[75%] cqa-max-w-[90%] cqa-z-[1]\">\n      <cqa-table-action-toolbar\n        [selectedItems]=\"selectedItems && selectedItems.length > 0 ? selectedItems : currentSelectedItems\"\n        [actions]=\"effectiveBulkActions\"\n        [showSelectAll]=\"showSelectAllInToolbar\"\n        [allSelected]=\"allSelectedInToolbar\"\n        [showDismiss]=\"showDismissInToolbar\"\n        (actionClick)=\"onBulkAction($event)\"\n        (selectAllChange)=\"onBulkSelectAll($event)\"\n        (dismiss)=\"onBulkDismiss()\"\n      ></cqa-table-action-toolbar>\n    </div>\n\n  </div>\n</div>\n\n", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: ExportCodeModalComponent, selector: "cqa-export-code-modal", inputs: ["isOpen", "cases", "disabled"], outputs: ["closeModal", "export"] }, { type: ColumnVisibilityComponent, selector: "cqa-column-visibility", inputs: ["isStepGroup", "columns", "columnVisibility", "selectedAutoRefreshInterval"], outputs: ["columnVisibilityChange", "autoRefreshChange"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor", "fullWidth", "size"], outputs: ["valueChange"] }, { type: SelectedFiltersComponent, selector: "cqa-selected-filters", inputs: ["filterApplied", "chips", "defaultChips", "defaultChipClass"], outputs: ["removeChip", "clearAll", "onClearAll"] }, { type: DynamicFilterComponent, selector: "cqa-dynamic-filter", inputs: ["config", "model", "showFilterPanel", "buttonLayout"], outputs: ["filtersApplied", "filtersChanged", "resetAction", "onApplyFilterClick", "onResetFilterClick"] }, { type: FolderSidebarComponent, selector: "cqa-folder-sidebar", inputs: ["folders", "selectedFolderId", "expandedFolderIds", "unorganizedCount", "allowCreate", "allowRename", "allowDelete", "allowMove", "allowDuplicate", "allowDrop", "showCounts", "collapsed", "labels", "serverSideSearch", "rootTotal", "folderSearchLoading", "rootFoldersLoading", "searchValue"], outputs: ["folderSelected", "folderExpansionToggled", "folderChildrenRequested", "folderLoadMoreRequested", "searchChange", "rootLoadMoreRequested", "folderCreated", "folderCreateRequested", "folderRenamed", "folderDeleted", "folderMoveRequested", "folderDuplicateRequested", "testsDropped", "folderDropped", "collapsedChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: DynamicTableComponent, selector: "app-dynamic-table", inputs: ["data", "columns", "emptyState", "gridTemplateColumns", "screenWidth", "enableSelectAll", "rowSelectable", "enableLocalSort", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler", "enableRowReorder", "reorderHandleTooltip"], outputs: ["sortChange", "rowReorder"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }, { type: PaginationComponent, selector: "cqa-pagination", inputs: ["totalElements", "totalPages", "pageIndex", "pageSize", "pageItemCount", "pageSizeOptions", "pageSizeMenuDirection"], outputs: ["pageIndexChange", "pageSizeChange", "paginate"] }, { type: TableActionToolbarComponent, selector: "cqa-table-action-toolbar", inputs: ["selectedItems", "actions", "showSelectAll", "allSelected", "showDismiss"], outputs: ["actionClick", "selectAllChange", "dismiss"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: FolderDropDirective, selector: "[cqaFolderDrop]", inputs: ["cqaFolderDrop", "dropEnabled"], outputs: ["testsDropped", "folderDropped"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ModularTableTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ModularTableTemplateComponent, selector: "cqa-modular-table-template", inputs: { searchPlaceholder: "searchPlaceholder", searchValue: "searchValue", showClear: "showClear", showSearchBar: "showSearchBar", showExportButton: "showExportButton", isExporting: "isExporting", filterConfig: "filterConfig", filterModel: "filterModel", showFilterPanel: "showFilterPanel", showFilterButton: "showFilterButton", otherButtons: "otherButtons", otherDropDownButtons: "otherDropDownButtons", otherSelectDropDownButtons: "otherSelectDropDownButtons", otherButtonLabel: "otherButtonLabel", otherButtonVariant: "otherButtonVariant", showOtherButton: "showOtherButton", showActionButton: "showActionButton", showSettingsButton: "showSettingsButton", showAutoRefreshButton: "showAutoRefreshButton", showViewModeToggle: "showViewModeToggle", viewMode: "viewMode", viewModeLabels: "viewModeLabels", data: "data", isEmptyState: "isEmptyState", emptyStateConfig: "emptyStateConfig", actions: "actions", chips: "chips", filterApplied: "filterApplied", columns: "columns", rowSelectable: "rowSelectable", selectedAutoRefreshInterval: "selectedAutoRefreshInterval", pageIndex: "pageIndex", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", pageSizeMenuDirection: "pageSizeMenuDirection", serverSidePagination: "serverSidePagination", totalElements: "totalElements", enableLocalSort: "enableLocalSort", isTableLoading: "isTableLoading", isTableDataLoading: "isTableDataLoading", cellJsonPathGetter: "cellJsonPathGetter", onJsonPathCopiedHandler: "onJsonPathCopiedHandler", selectedItems: "selectedItems", showSelectAllInToolbar: "showSelectAllInToolbar", showDismissInToolbar: "showDismissInToolbar", allSelectedInToolbar: "allSelectedInToolbar", folders: "folders", rootFolders: "rootFolders", selectedFolderId: "selectedFolderId", expandedFolderIds: "expandedFolderIds", unorganizedCount: "unorganizedCount", folderIdAccessor: "folderIdAccessor", modularConfig: "modularConfig", modularLabels: "modularLabels", bulkActions: "bulkActions", sidebarCollapsed: "sidebarCollapsed", subfolderSectionExpanded: "subfolderSectionExpanded", organizedSectionExpanded: "organizedSectionExpanded", serverSideSearch: "serverSideSearch", rootTotal: "rootTotal", folderSearchLoading: "folderSearchLoading", folderSearchValue: "folderSearchValue", rootFoldersLoading: "rootFoldersLoading", savingFolderIds: "savingFolderIds", selectedFolderNode: "selectedFolderNode", selectedFolderTrail: "selectedFolderTrail", useInternalDialogs: "useInternalDialogs", showReorderButton: "showReorderButton", reorderSaving: "reorderSaving", reorderLabels: "reorderLabels", columnVisibility: "columnVisibility" }, outputs: { onSearchChange: "onSearchChange", onExportClick: "onExportClick", onApplyFilterClick: "onApplyFilterClick", onResetFilterClick: "onResetFilterClick", onClearAll: "onClearAll", removeChip: "removeChip", viewModeChange: "viewModeChange", pageChange: "pageChange", sortChange: "sortChange", folderSelected: "folderSelected", folderExpansionToggled: "folderExpansionToggled", folderChildrenRequested: "folderChildrenRequested", folderLoadMoreRequested: "folderLoadMoreRequested", rootLoadMoreRequested: "rootLoadMoreRequested", folderSearchChange: "folderSearchChange", folderCreated: "folderCreated", folderCreateRequested: "folderCreateRequested", folderRenamed: "folderRenamed", folderDeleted: "folderDeleted", testsMoved: "testsMoved", bulkActionClick: "bulkActionClick", bulkSelectAllChange: "bulkSelectAllChange", bulkDismiss: "bulkDismiss", bulkActionInvoked: "bulkActionInvoked", sidebarCollapsedChange: "sidebarCollapsedChange", subfolderSectionExpandedChange: "subfolderSectionExpandedChange", organizedSectionExpandedChange: "organizedSectionExpandedChange", reorderStart: "reorderStart", reorderCancel: "reorderCancel", reorderSave: "reorderSave", moveRequested: "moveRequested", selectedItemsChange: "selectedItemsChange", folderDeleteRequested: "folderDeleteRequested", folderMoveRequested: "folderMoveRequested", folderMoved: "folderMoved", folderDuplicateRequested: "folderDuplicateRequested", onReload: "onReload", onAutoRefreshClick: "onAutoRefreshClick", columnVisibilityChange: "columnVisibilityChange", autoRefreshIntervalChange: "autoRefreshIntervalChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "dynamicFilterComponent", first: true, predicate: DynamicFilterComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Reusable folder-icon chip. Render via <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>. -->\n<ng-template #folderIconChip let-color=\"color\">\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-lg cqa-bg-[#F0F0F1] cqa-text-[#6D6D74] cqa-flex-shrink-0 group-hover:cqa-bg-indigo-50 group-hover:cqa-text-[#3F43EE]\">\n    <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" [attr.stroke]=\"color || 'currentColor'\" stroke-width=\"0.916667\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<!-- Reusable indeterminate loading spinner. Render via\n     <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>. -->\n<ng-template #loadingSpinner let-size=\"size\">\n  <svg [attr.width]=\"size || 20\" [attr.height]=\"size || 20\" viewBox=\"0 0 50 50\" aria-label=\"loading\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"></circle>\n    <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n      <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"></animateTransform>\n    </path>\n  </svg>\n</ng-template>\n\n<!-- Reusable \"+\" chip used by the \"New folder\" tile. -->\n<ng-template #addIconChip>\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-lg cqa-bg-[#F0F0F1] cqa-text-[#6D6D74] cqa-flex-shrink-0 group-hover:cqa-bg-indigo-50 group-hover:cqa-text-[#3F43EE]\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M8 3V13M3 8H13\" stroke=\"currentColor\" stroke-width=\"1.275\" stroke-linecap=\"round\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<div class=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n    <div [class]=\"!showSearchBar ? 'cqa-justify-end' : 'cqa-justify-between'\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n      <cqa-search-bar\n        *ngIf=\"showSearchBar\"\n        [placeholder]=\"searchPlaceholder\"\n        [value]=\"searchValue\"\n        [showClear]=\"showClear\"\n        (valueChange)=\"valueChange($event)\"\n        (search)=\"search($event)\"\n        (cleared)=\"cleared()\"\n      ></cqa-search-bar>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n        <cqa-button\n        *ngIf=\"showExportButton\"\n        variant=\"grey-solid\"\n        icon=\"open_in_new\"\n        [text]=\"isExporting ? 'Exporting...' : 'Export'\"\n        [disabled]=\"isExporting\"\n        (clicked)=\"exportCodeClick()\"\n      >\n        <span>{{ isExporting ? 'Exporting...' : 'Export' }}</span>\n      </cqa-button>\n      \n      <!-- Export Code Modal -->\n      <cqa-export-code-modal\n        *ngIf=\"showExportButton\"\n        [isOpen]=\"isExportModalOpen\"\n        [cases]=\"selectedCasesForExport\"\n        [disabled]=\"false\"\n        (closeModal)=\"closeExportModal()\"\n        (export)=\"onExportModalExport($event)\">\n      </cqa-export-code-modal>\n         <ng-container *ngFor=\"let dropdownTemplate of otherDropDownButtons; trackBy: trackByDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"dropdownTemplate\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngFor=\"let selectDropdownTemplate of otherSelectDropDownButtons; trackBy: trackBySelectDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"selectDropdownTemplate\"></ng-container>\n        </ng-container>\n        \n        <cqa-button\n          *ngIf=\"showFilterButton\"\n          variant=\"grey-solid\"\n          icon=\"add\"\n          [disabled]=\"isReordering\"\n          (clicked)=\"toggleFilter()\"\n        >\n        <span class=\"cqa-flex cqa-items-center cqa-gap-1\">\n          Filter          \n           <div [class]=\"arrowClasses\">\n            <svg\n              class=\"cqa-w-2 cqa-h-1 cqa-absolute cqa-left-[4px] cqa-top-[6px]\"\n              viewBox=\"0 0 8 4\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M0 0L4 4L8 0\"\n                stroke=\"#0B0B0C\"\n                stroke-width=\"1.33\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </div>\n        </span>\n        </cqa-button>\n        <cqa-column-visibility\n          *ngIf=\"showSettingsButton\"\n          [columns]=\"visibilityColumns\"\n          [columnVisibility]=\"columnVisibility\"\n          [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n          (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n          (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n        ></cqa-column-visibility>\n        <cqa-button\n          *ngIf=\"showAutoRefreshButton\"\n          variant=\"grey-solid\"\n          icon=\"refresh\"\n          (clicked)=\"handleRefreshClick()\"\n          [tooltip]=\"'Refresh'\"\n          tooltipPosition=\"below\"\n          [disabled]=\"isReordering\"\n        ></cqa-button>\n        <ng-container *ngFor=\"let buttonTemplate of otherButtons; trackBy: trackByTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n        </ng-container>\n        <cqa-segment-control\n          *ngIf=\"showViewModeToggle\"\n          size=\"lg\"\n          [segments]=\"viewModeSegments\"\n          [value]=\"viewMode\"\n          (valueChange)=\"onViewModeChange($event)\"\n        ></cqa-segment-control>\n        <cqa-button\n          *ngIf=\"showReorderButton && !isReordering\"\n          variant=\"outlined\"\n          icon=\"drag_indicator\"\n          [text]=\"reorderLabels.reorderButton\"\n          [disabled]=\"!pagedRows || pagedRows.length === 0 || isTableLoading || isTableDataLoading\"\n          (clicked)=\"startReorder()\"\n        ></cqa-button>\n        <ng-container *ngIf=\"showReorderButton && isReordering\">\n          <cqa-button\n            variant=\"outlined\"\n            [text]=\"reorderLabels.cancelButton\"\n            [disabled]=\"reorderSaving\"\n            (clicked)=\"cancelReorder()\"\n          ></cqa-button>\n          <cqa-button\n            variant=\"filled\"\n            [icon]=\"reorderSaving ? 'hourglass_empty' : ''\"\n            [text]=\"reorderSaving ? reorderLabels.savingButton : reorderLabels.doneButton\"\n            [disabled]=\"reorderSaving\"\n            (clicked)=\"saveReorder()\"\n          ></cqa-button>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Reorder mode banner -->\n    <div *ngIf=\"isReordering\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-bg-[#FFFBEB] cqa-border cqa-border-[#FDE68A]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n      </svg>\n      <span class=\"cqa-text-sm cqa-font-semibold cqa-text-[#92400E]\">{{ reorderLabels.bannerTitle }}</span>\n      <span class=\"cqa-text-sm cqa-text-[#92400E]\">{{ reorderLabels.bannerDescription }}</span>\n    </div>\n\n    <cqa-selected-filters\n      [filterApplied]=\"filterApplied\"\n      [chips]=\"chips\"\n      (removeChip)=\"onRemoveChip($event)\"\n      (clearAll)=\"onClearAllChips()\"\n      (onClearAll)=\"onClearAll.emit()\"\n    >\n    </cqa-selected-filters>\n\n    <cqa-dynamic-filter\n      *ngIf=\"showFilterPanel\"\n      [config]=\"filterConfig\"\n      [model]=\"filterModel\"\n      [showFilterPanel]=\"showFilterPanel\"\n      (filtersChanged)=\"onFiltersChanged($event)\"\n      (filtersApplied)=\"onFiltersApplied($event)\"\n      (onApplyFilterClick)=\"onApplyFilterClick.emit($event)\"\n      (onResetFilterClick)=\"handleResetFilterClick()\"\n    >\n    </cqa-dynamic-filter>\n\n    <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-min-h-0 \" style=\"border-bottom: 1px solid rgb(226, 226, 227);\">\n      <!-- Sidebar (only shown in modular view) -->\n      <cqa-folder-sidebar\n        *ngIf=\"isModularView && modularConfig.showSidebar\"\n        [folders]=\"folders\"\n        [selectedFolderId]=\"selectedFolderId\"\n        [expandedFolderIds]=\"expandedFolderIds\"\n        [unorganizedCount]=\"unorganizedCount\"\n        [allowCreate]=\"modularConfig.allowCreateFolder\"\n        [allowRename]=\"modularConfig.allowRenameFolder\"\n        [allowDelete]=\"modularConfig.allowDeleteFolder\"\n        [allowDrop]=\"modularConfig.allowTestDragDrop\"\n        [showCounts]=\"modularConfig.showCounts\"\n        [collapsed]=\"sidebarCollapsed\"\n        [labels]=\"modularLabels\"\n        [serverSideSearch]=\"serverSideSearch\"\n        [rootTotal]=\"rootTotal\"\n        [folderSearchLoading]=\"folderSearchLoading\"\n        [rootFoldersLoading]=\"rootFoldersLoading\"\n        [savingFolderIds]=\"savingFolderIds\"\n        [searchValue]=\"folderSearchValue\"\n        (folderSelected)=\"onFolderSelected($event)\"\n        (folderExpansionToggled)=\"onFolderExpansionToggled($event)\"\n        (folderChildrenRequested)=\"folderChildrenRequested.emit($event)\"\n        (folderLoadMoreRequested)=\"folderLoadMoreRequested.emit($event)\"\n        (rootLoadMoreRequested)=\"rootLoadMoreRequested.emit()\"\n        (searchChange)=\"folderSearchChange.emit($event)\"\n        (folderCreated)=\"onFolderCreated($event)\"\n        (folderCreateRequested)=\"onFolderCreateRequested($event)\"\n        (folderRenamed)=\"onFolderRenamed($event)\"\n        (folderDeleted)=\"onFolderDeleted($event)\"\n        (folderMoveRequested)=\"onFolderMoveRequested($event)\"\n        (folderDuplicateRequested)=\"onFolderDuplicateRequested($event)\"\n        (testsDropped)=\"onTestsDropped($event)\"\n        (folderDropped)=\"onFolderDropped($event)\"\n        (collapsedChange)=\"onSidebarCollapsedChange($event)\"\n      ></cqa-folder-sidebar>\n\n      <!-- Right pane -->\n      <div\n        class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-min-w-0\"\n        [style.border-top]=\"isModularView ? '1px solid #E2E2E3' : null\"\n        [style.border-left]=\"isModularView ? '1px solid #E2E2E3' : null\"\n        [style.border-right]=\"isModularView ? '1px solid #E2E2E3' : null\"\n      >\n        <!-- Breadcrumb (modular view, folder drilled-in) -->\n        <nav\n          *ngIf=\"isModularView && modularConfig.showBreadcrumb && !isRootView\"\n          aria-label=\"Folder path\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-sm cqa-px-3 cqa-py-2 cqa-rounded-none cqa-min-w-0\"\n          style=\"color: #6D6D74; border-bottom: 1px solid #E2E2E3;\"\n        >\n          <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-flex-1 cqa-min-w-0 cqa-overflow-x-auto cqa-scrollbar-thin cqa-whitespace-nowrap\">\n            <button type=\"button\" class=\"hover:cqa-text-[#3F43EE] cqa-inline-flex cqa-items-center cqa-gap-1 cqa-flex-shrink-0\" (click)=\"onFolderSelected(null)\">\n              <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" stroke=\"currentColor\" stroke-width=\"0.916667\"/>\n              </svg>\n              <span>{{ modularLabels.allFolders }}</span>\n            </button>\n            <ng-container *ngFor=\"let crumb of breadcrumbTrail; let last = last\">\n              <mat-icon class=\"cqa-align-middle cqa-flex-shrink-0\" style=\"font-size:16px;width:16px;height:16px;color:#6D6D74;\">chevron_right</mat-icon>\n              <button\n                type=\"button\"\n                class=\"cqa-flex-shrink-0\"\n                [ngClass]=\"last\n                  ? 'cqa-text-[#161617] cqa-font-semibold'\n                  : 'cqa-text-[#6D6D74] hover:cqa-text-[#3F43EE]'\"\n                [disabled]=\"last\"\n                (click)=\"!last && onFolderSelected(crumb.id)\"\n              >{{ crumb.name }}</button>\n            </ng-container>\n          </div>\n          <cqa-button\n            *ngIf=\"modularConfig.showSubfolderSection && subfolderTiles.length\"\n            class=\"cqa-flex-shrink-0\"\n            variant=\"text\"\n            btnSize=\"sm\"\n            customClass=\"!cqa-text-[13px] !cqa-leading-[18px]\"\n            [icon]=\"subfolderSectionExpanded ? 'expand_less' : 'expand_more'\"\n            [text]=\"(subfolderSectionExpanded ? 'Hide' : 'Show') + ' subfolders'\"\n            [attr.aria-expanded]=\"subfolderSectionExpanded\"\n            (clicked)=\"toggleSubfolderSection()\"\n          ></cqa-button>\n          <cqa-button\n            *ngIf=\"modularConfig.allowCreateFolder\"\n            class=\"cqa-flex-shrink-0\"\n            variant=\"text\"\n            btnSize=\"sm\"\n            customClass=\"!cqa-text-[13px] !cqa-leading-[18px]\"\n            icon=\"add\"\n            [text]=\"modularLabels.newFolder\"\n            (clicked)=\"onFolderCreateRequested({ parentId: selectedFolderId })\"\n          ></cqa-button>\n        </nav>\n\n        <!-- Folder grid: modular + root view -->\n        <section\n          *ngIf=\"isModularView && isRootView && modularConfig.showFolderGrid && rootFolderTiles.length\"\n          class=\"cqa-px-5 cqa-pt-2\"\n          style=\"border-bottom: 1px solid #F0F0F1;\"\n        >\n          <button\n            type=\"button\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2 cqa-w-full cqa-text-left\"\n            [attr.aria-expanded]=\"organizedSectionExpanded\"\n            (click)=\"toggleOrganizedSection()\"\n          >\n            <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n              <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" stroke=\"#6D6D74\" stroke-width=\"0.916667\"/>\n            </svg>\n            <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-[#6D6D74]\">{{ modularLabels.organized }}</h3>\n            <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n              {{ rootFolderTiles.length === 1 ? modularLabels.foldersCountSingular : modularLabels.foldersCountPlural.replace('{n}', '' + rootFolderTiles.length) }}\n            </span>\n            <mat-icon class=\"cqa-text-[#6D6D74] cqa-ml-auto\" style=\"font-size:18px;width:18px;height:18px\">\n              {{ organizedSectionExpanded ? 'expand_less' : 'expand_more' }}\n            </mat-icon>\n          </button>\n          <div\n            class=\"cqa-grid\"\n            style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n            [style.grid-template-rows]=\"organizedSectionExpanded ? '1fr' : '0fr'\"\n          >\n          <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n          <div class=\"cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin cqa-pb-1\"\n               (scroll)=\"onRootGridScroll($event)\">\n            <button\n              *ngFor=\"let f of rootFolderTiles\"\n              type=\"button\"\n              [cqaFolderDrop]=\"f.id\"\n              [dropEnabled]=\"modularConfig.allowTestDragDrop\"\n              (testsDropped)=\"onTestsDropped($event)\"\n              (click)=\"onFolderSelected(f.id)\"\n              class=\"cqa-group cqa-flex-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-solid cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-white hover:cqa-border-[#3F43EE] hover:cqa-shadow-sm cqa-transition-colors\"\n            >\n              <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-min-w-0\">\n                <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>\n                <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                  <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ f.name }}</span>\n                  <span *ngIf=\"modularConfig.showCounts\" class=\"cqa-text-sm cqa-text-neutral-500 cqa-truncate\">\n                    {{ (f.count ?? 0) === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + (f.count ?? 0)) }}<ng-container *ngIf=\"f.children?.length\"> \u00B7 {{ f.children!.length === 1 ? modularLabels.oneSubfolder : modularLabels.subfoldersCount.replace('{n}', '' + f.children!.length) }}</ng-container>\n                  </span>\n                </div>\n              </div>\n              <mat-icon class=\"cqa-text-neutral-400 cqa-flex-shrink-0\" style=\"font-size:20px;width:20px;height:20px\">chevron_right</mat-icon>\n            </button>\n\n            <!-- \"+ New folder\" tile -->\n            <button\n              *ngIf=\"modularConfig.allowCreateFolder\"\n              type=\"button\"\n              (click)=\"onFolderCreateRequested({ parentId: null })\"\n              class=\"cqa-group cqa-flex-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-dashed cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-[#FAFAFA] hover:cqa-border-[#3F43EE] hover:cqa-bg-white cqa-transition-colors\"\n            >\n              <ng-container *ngTemplateOutlet=\"addIconChip\"></ng-container>\n              <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ modularLabels.newFolder }}</span>\n                <span class=\"cqa-text-sm cqa-text-neutral-400\">{{ modularLabels.testsCountPlural.replace('{n}', '0') }}</span>\n              </div>\n            </button>\n\n            <!-- Pagination spinner anchored at the right edge of the Organized\n                 row. Only renders during an in-flight root fetch (initial OR\n                 scroll-driven \"load more\"), and is filtered to suppress when\n                 the section is empty so we don't show a spinner inside an\n                 otherwise-blank row. -->\n            <div\n              *ngIf=\"rootFoldersLoading && rootFolderTiles.length > 0\"\n              class=\"cqa-flex-shrink-0 cqa-flex cqa-items-center cqa-justify-center cqa-w-[80px]\"\n              aria-live=\"polite\"\n              [attr.aria-label]=\"'Loading more folders'\"\n            >\n              <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>\n            </div>\n          </div>\n          </div>\n          </div>\n        </section>\n\n        <!-- Subfolder section: modular + folder view. Shown whenever drilled in\n             (even if no subfolders, so the \"+ New folder\" tile remains\n             reachable, and so we can render a loading state during the\n             drill-in fetch before children arrive). -->\n        <section\n          *ngIf=\"isModularView && !isRootView && modularConfig.showSubfolderSection && (subfolderTiles.length || currentFolderNode?.childrenLoading)\"\n          class=\"cqa-grid\"\n          style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n          [style.grid-template-rows]=\"subfolderSectionExpanded ? '1fr' : '0fr'\"\n        >\n          <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n          <div class=\"cqa-px-3 cqa-py-2 cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin\"\n               (scroll)=\"onSubfolderGridScroll($event)\">\n            <button\n              *ngFor=\"let f of subfolderTiles\"\n              type=\"button\"\n              [cqaFolderDrop]=\"f.id\"\n              [dropEnabled]=\"modularConfig.allowTestDragDrop\"\n              (testsDropped)=\"onTestsDropped($event)\"\n              (click)=\"onFolderSelected(f.id)\"\n              class=\"cqa-group cqa-flex-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-solid cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-white hover:cqa-border-[#3F43EE] hover:cqa-shadow-sm cqa-transition-colors\"\n            >\n              <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-min-w-0\">\n                <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>\n                <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                  <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ f.name }}</span>\n                  <span *ngIf=\"modularConfig.showCounts\" class=\"cqa-text-sm cqa-text-neutral-500 cqa-truncate\">\n                    {{ (f.count ?? 0) === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + (f.count ?? 0)) }}\n                  </span>\n                </div>\n              </div>\n              <mat-icon class=\"cqa-text-neutral-400 cqa-flex-shrink-0\" style=\"font-size:20px;width:20px;height:20px\">chevron_right</mat-icon>\n            </button>\n\n            <!-- \"+ New folder\" tile -->\n            <button\n              *ngIf=\"modularConfig.allowCreateFolder\"\n              type=\"button\"\n              (click)=\"onFolderCreateRequested({ parentId: selectedFolderId })\"\n              class=\"cqa-group cqa-flex-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-dashed cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-[#FAFAFA] hover:cqa-border-[#3F43EE] hover:cqa-bg-white cqa-transition-colors\"\n            >\n              <ng-container *ngTemplateOutlet=\"addIconChip\"></ng-container>\n              <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ modularLabels.newFolder }}</span>\n                <span class=\"cqa-text-sm cqa-text-neutral-400\">{{ modularLabels.testsCountPlural.replace('{n}', '0') }}</span>\n              </div>\n            </button>\n\n            <!-- Subfolder fetch indicator. Two cases:\n                 - Drill-in fetch: no subfolderTiles yet, render a centered\n                   row spinner so the section isn't empty during the fetch.\n                 - Pagination fetch: tiles exist, anchor a small spinner at\n                   the right edge so the user knows the next page is loading. -->\n            <div\n              *ngIf=\"currentFolderNode?.childrenLoading\"\n              class=\"cqa-flex-shrink-0 cqa-flex cqa-items-center cqa-justify-center cqa-w-[80px]\"\n              aria-live=\"polite\"\n              [attr.aria-label]=\"'Loading subfolders'\"\n            >\n              <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>\n            </div>\n          </div>\n          </div>\n        </section>\n\n        <div\n          *ngIf=\"isModularView && !isRootView && modularConfig.showUnorganizedSection\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-4 cqa-py-3 cqa-border cqa-border-indigo-100\"\n          style=\"background-color: #D8D9FC;\"\n        >\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n              <path d=\"M12.9585 10.4585C12.9585 10.79 12.8268 11.108 12.5924 11.3424C12.358 11.5768 12.04 11.7085 11.7085 11.7085H1.7085C1.37698 11.7085 1.05903 11.5768 0.824613 11.3424C0.590192 11.108 0.458496 10.79 0.458496 10.4585V1.7085C0.458496 1.37698 0.590192 1.05903 0.824613 0.824613C1.05903 0.590192 1.37698 0.458496 1.7085 0.458496H4.8335L6.0835 2.3335H11.7085C12.04 2.3335 12.358 2.46519 12.5924 2.69961C12.8268 2.93403 12.9585 3.25198 12.9585 3.5835V10.4585Z\" stroke=\"#3F43EE\" stroke-width=\"0.916667\"/>\n            </svg>\n            <span class=\"cqa-text-sm cqa-font-semibold\" style=\"color: #3F43EE;\">\n              {{ currentFolderNode?.name }} ({{ currentFolderDirectCount }})\n            </span>\n          </div>\n          <cqa-button\n            variant=\"outlined\"\n            btnSize=\"sm\"\n            customClass=\"!cqa-text-[13px]\"\n            inlineStyles=\"border-color: #3F43EE; color: #3F43EE;\"\n            [text]=\"modularLabels.clearFilter\"\n            (clicked)=\"onFolderSelected(null)\"\n          ></cqa-button>\n        </div>\n\n        <!-- Unorganized section header at root view -->\n        <div\n          *ngIf=\"isModularView && isRootView && modularConfig.showUnorganizedSection\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2 cqa-mt-2\" style=\"margin-left: 20px;\"\n        >\n          <mat-icon class=\"cqa-text-[#6D6D74]\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n          <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-[#6D6D74]\">{{ modularLabels.unorganized }}</h3>\n          <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n            {{ unorganizedCount === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + unorganizedCount) }}\n          </span>\n        </div>\n\n        <div class=\"cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative cqa-overflow-x-auto\"\n             [class.cqa-modular-table-flush]=\"isModularView\"\n             [attr.style]=\"(!isModularView ? 'border-radius: 7px;' : '') + ((pagedRows && pagedRows.length > 0) ? '' : ' border-bottom: none !important;')\">\n          <ng-container *ngIf=\"(isTableLoading || isTableDataLoading) || (!effectiveIsEmptyState && pagedRows && pagedRows.length > 0); else storyEmptyTpl\">\n            <app-dynamic-table\n              [style.border-bottom]=\"pagedRows && pagedRows.length > 0 ? '1px solid rgb(226, 226, 227)' : null\"\n              [columns]=\"computedColumns\"\n              [data]=\"pagedRows\"\n              [rowSelectable]=\"rowSelectable\"\n              [enableLocalSort]=\"enableLocalSort && !isReordering\"\n              [isTableLoading]=\"isTableLoading\"\n              [isTableDataLoading]=\"isTableDataLoading\"\n              [cellJsonPathGetter]=\"cellJsonPathGetter\"\n              [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n              [enableRowReorder]=\"isReordering\"\n              (rowReorder)=\"onRowReorder($event)\"\n              (sortChange)=\"sortChange.emit($event)\">\n              <ng-template #emptyTableTpl>\n                <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8\">\n                  <img src=\"/assets/illustrations/empty-state.svg\" alt=\"No data\" class=\"cqa-w-32 cqa-h-32 cqa-mb-4\" />\n                  <h3 class=\"cqa-text-lg cqa-font-semibold cqa-mb-2\">No test cases</h3>\n                  <p class=\"cqa-text-sm cqa-text-neutral-500 cqa-mb-4\">Try adjusting filters or create a new test case.</p>\n                  <cqa-button variant=\"filled\" (clicked)=\"toggleFilter()\">Show Filters</cqa-button>\n                </div>\n              </ng-template>\n            </app-dynamic-table>\n          </ng-container>\n\n          <ng-template #storyEmptyTpl>\n            <div class=\"cqa-p-6 cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n              <cqa-empty-state\n                *ngIf=\"effectiveIsEmptyState\"\n                [title]=\"effectiveEmptyStateConfig.title\"\n                [description]=\"effectiveEmptyStateConfig.description\"\n                [imageUrl]=\"effectiveEmptyStateConfig.imageUrl\"\n                [actions]=\"effectiveEmptyStateConfig.actions\"\n                (actionClick)=\"onEmptyAction($event)\"\n              >\n              </cqa-empty-state>\n            </div>\n          </ng-template>\n        </div>\n\n        <cqa-pagination\n          [totalElements]=\"serverSidePagination ? totalElements : filteredRows.length\"\n          [pageIndex]=\"pageIndex\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"pageSizeOptions\"\n          [pageSizeMenuDirection]=\"pageSizeMenuDirection\"\n          [pageItemCount]=\"pagedRows.length\"\n          (paginate)=\"onPaginate($event)\"\n          (pageSizeChange)=\"onPageSizeChange($event)\"\n        >\n        </cqa-pagination>\n      </div>\n    </div>\n\n    <!-- Reused bulk action toolbar -->\n    <div *ngIf=\"anyRowSelected && modularConfig.allowBulkSelection && !isReordering\" class=\"cqa-absolute cqa-bottom-[18.75px] cqa-left-[50%] cqa-translate-x-[-50%] cqa-w-full lg:cqa-max-w-[68%] cqa-sm:max-w-[75%] cqa-max-w-[90%] cqa-z-[1]\">\n      <cqa-table-action-toolbar\n        [selectedItems]=\"selectedItems && selectedItems.length > 0 ? selectedItems : currentSelectedItems\"\n        [actions]=\"effectiveBulkActions\"\n        [showSelectAll]=\"showSelectAllInToolbar\"\n        [allSelected]=\"allSelectedInToolbar\"\n        [showDismiss]=\"showDismissInToolbar\"\n        (actionClick)=\"onBulkAction($event)\"\n        (selectAllChange)=\"onBulkSelectAll($event)\"\n        (dismiss)=\"onBulkDismiss()\"\n      ></cqa-table-action-toolbar>\n    </div>\n\n  </div>\n</div>\n\n", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: ExportCodeModalComponent, selector: "cqa-export-code-modal", inputs: ["isOpen", "cases", "disabled"], outputs: ["closeModal", "export"] }, { type: ColumnVisibilityComponent, selector: "cqa-column-visibility", inputs: ["isStepGroup", "columns", "columnVisibility", "selectedAutoRefreshInterval"], outputs: ["columnVisibilityChange", "autoRefreshChange"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor", "fullWidth", "size"], outputs: ["valueChange"] }, { type: SelectedFiltersComponent, selector: "cqa-selected-filters", inputs: ["filterApplied", "chips", "defaultChips", "defaultChipClass"], outputs: ["removeChip", "clearAll", "onClearAll"] }, { type: DynamicFilterComponent, selector: "cqa-dynamic-filter", inputs: ["config", "model", "showFilterPanel", "buttonLayout"], outputs: ["filtersApplied", "filtersChanged", "resetAction", "onApplyFilterClick", "onResetFilterClick"] }, { type: FolderSidebarComponent, selector: "cqa-folder-sidebar", inputs: ["folders", "selectedFolderId", "expandedFolderIds", "unorganizedCount", "allowCreate", "allowRename", "allowDelete", "allowMove", "allowDuplicate", "allowDrop", "showCounts", "collapsed", "foldersAccordionExpanded", "labels", "serverSideSearch", "rootTotal", "folderSearchLoading", "rootFoldersLoading", "savingFolderIds", "searchValue"], outputs: ["folderSelected", "folderExpansionToggled", "folderChildrenRequested", "folderLoadMoreRequested", "searchChange", "rootLoadMoreRequested", "folderCreated", "folderCreateRequested", "folderRenamed", "folderDeleted", "folderMoveRequested", "folderDuplicateRequested", "testsDropped", "folderDropped", "collapsedChange", "foldersAccordionExpandedChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicTableComponent, selector: "app-dynamic-table", inputs: ["data", "columns", "emptyState", "gridTemplateColumns", "screenWidth", "enableSelectAll", "rowSelectable", "enableLocalSort", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler", "enableRowReorder", "reorderHandleTooltip"], outputs: ["sortChange", "rowReorder"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }, { type: PaginationComponent, selector: "cqa-pagination", inputs: ["totalElements", "totalPages", "pageIndex", "pageSize", "pageItemCount", "pageSizeOptions", "pageSizeMenuDirection"], outputs: ["pageIndexChange", "pageSizeChange", "paginate"] }, { type: TableActionToolbarComponent, selector: "cqa-table-action-toolbar", inputs: ["selectedItems", "actions", "showSelectAll", "allSelected", "showDismiss"], outputs: ["actionClick", "selectAllChange", "dismiss"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: FolderDropDirective, selector: "[cqaFolderDrop]", inputs: ["cqaFolderDrop", "dropEnabled"], outputs: ["testsDropped", "folderDropped"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ModularTableTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-modular-table-template', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Reusable folder-icon chip. Render via <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>. -->\n<ng-template #folderIconChip let-color=\"color\">\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-lg cqa-bg-[#F0F0F1] cqa-text-[#6D6D74] cqa-shrink-0 group-hover:cqa-bg-indigo-50 group-hover:cqa-text-[#3F43EE]\">\n    <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" [attr.stroke]=\"color || 'currentColor'\" stroke-width=\"0.916667\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<!-- Reusable \"+\" chip used by the \"New folder\" tile. -->\n<ng-template #addIconChip>\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-lg cqa-bg-[#F0F0F1] cqa-text-[#6D6D74] cqa-shrink-0 group-hover:cqa-bg-indigo-50 group-hover:cqa-text-[#3F43EE]\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M8 3V13M3 8H13\" stroke=\"currentColor\" stroke-width=\"1.275\" stroke-linecap=\"round\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<div class=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n    <div [class]=\"!showSearchBar ? 'cqa-justify-end' : 'cqa-justify-between'\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n      <cqa-search-bar\n        *ngIf=\"showSearchBar\"\n        [placeholder]=\"searchPlaceholder\"\n        [value]=\"searchValue\"\n        [showClear]=\"showClear\"\n        (valueChange)=\"valueChange($event)\"\n        (search)=\"search($event)\"\n        (cleared)=\"cleared()\"\n      ></cqa-search-bar>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n        <cqa-button\n        *ngIf=\"showExportButton\"\n        variant=\"grey-solid\"\n        icon=\"open_in_new\"\n        [text]=\"isExporting ? 'Exporting...' : 'Export'\"\n        [disabled]=\"isExporting\"\n        (clicked)=\"exportCodeClick()\"\n      >\n        <span>{{ isExporting ? 'Exporting...' : 'Export' }}</span>\n      </cqa-button>\n      \n      <!-- Export Code Modal -->\n      <cqa-export-code-modal\n        *ngIf=\"showExportButton\"\n        [isOpen]=\"isExportModalOpen\"\n        [cases]=\"selectedCasesForExport\"\n        [disabled]=\"false\"\n        (closeModal)=\"closeExportModal()\"\n        (export)=\"onExportModalExport($event)\">\n      </cqa-export-code-modal>\n         <ng-container *ngFor=\"let dropdownTemplate of otherDropDownButtons; trackBy: trackByDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"dropdownTemplate\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngFor=\"let selectDropdownTemplate of otherSelectDropDownButtons; trackBy: trackBySelectDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"selectDropdownTemplate\"></ng-container>\n        </ng-container>\n        \n        <cqa-button\n          *ngIf=\"showFilterButton\"\n          variant=\"grey-solid\"\n          icon=\"add\"\n          [disabled]=\"isReordering\"\n          (clicked)=\"toggleFilter()\"\n        >\n        <span class=\"cqa-flex cqa-items-center cqa-gap-1\">\n          Filter          \n           <div [class]=\"arrowClasses\">\n            <svg\n              class=\"cqa-w-2 cqa-h-1 cqa-absolute cqa-left-[4px] cqa-top-[6px]\"\n              viewBox=\"0 0 8 4\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M0 0L4 4L8 0\"\n                stroke=\"#0B0B0C\"\n                stroke-width=\"1.33\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </div>\n        </span>\n        </cqa-button>\n        <cqa-column-visibility\n          *ngIf=\"showSettingsButton\"\n          [columns]=\"visibilityColumns\"\n          [columnVisibility]=\"columnVisibility\"\n          [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n          (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n          (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n        ></cqa-column-visibility>\n        <cqa-button\n          *ngIf=\"showAutoRefreshButton\"\n          variant=\"grey-solid\"\n          icon=\"refresh\"\n          (clicked)=\"handleRefreshClick()\"\n          [tooltip]=\"'Refresh'\"\n          tooltipPosition=\"below\"\n          [disabled]=\"isReordering\"\n        ></cqa-button>\n        <ng-container *ngFor=\"let buttonTemplate of otherButtons; trackBy: trackByTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n        </ng-container>\n        <cqa-segment-control\n          *ngIf=\"showViewModeToggle\"\n          size=\"lg\"\n          [segments]=\"viewModeSegments\"\n          [value]=\"viewMode\"\n          (valueChange)=\"onViewModeChange($event)\"\n        ></cqa-segment-control>\n        <cqa-button\n          *ngIf=\"showReorderButton && !isReordering\"\n          variant=\"outlined\"\n          icon=\"drag_indicator\"\n          [text]=\"reorderLabels.reorderButton\"\n          [disabled]=\"!pagedRows || pagedRows.length === 0 || isTableLoading || isTableDataLoading\"\n          (clicked)=\"startReorder()\"\n        ></cqa-button>\n        <ng-container *ngIf=\"showReorderButton && isReordering\">\n          <cqa-button\n            variant=\"outlined\"\n            [text]=\"reorderLabels.cancelButton\"\n            [disabled]=\"reorderSaving\"\n            (clicked)=\"cancelReorder()\"\n          ></cqa-button>\n          <cqa-button\n            variant=\"filled\"\n            [icon]=\"reorderSaving ? 'hourglass_empty' : ''\"\n            [text]=\"reorderSaving ? reorderLabels.savingButton : reorderLabels.doneButton\"\n            [disabled]=\"reorderSaving\"\n            (clicked)=\"saveReorder()\"\n          ></cqa-button>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Reorder mode banner -->\n    <div *ngIf=\"isReordering\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-bg-[#FFFBEB] cqa-border cqa-border-[#FDE68A]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n      </svg>\n      <span class=\"cqa-text-sm cqa-font-semibold cqa-text-[#92400E]\">{{ reorderLabels.bannerTitle }}</span>\n      <span class=\"cqa-text-sm cqa-text-[#92400E]\">{{ reorderLabels.bannerDescription }}</span>\n    </div>\n\n    <cqa-selected-filters\n      [filterApplied]=\"filterApplied\"\n      [chips]=\"chips\"\n      (removeChip)=\"onRemoveChip($event)\"\n      (clearAll)=\"onClearAllChips()\"\n      (onClearAll)=\"onClearAll.emit()\"\n    >\n    </cqa-selected-filters>\n\n    <cqa-dynamic-filter\n      *ngIf=\"showFilterPanel\"\n      [config]=\"filterConfig\"\n      [model]=\"filterModel\"\n      [showFilterPanel]=\"showFilterPanel\"\n      (filtersChanged)=\"onFiltersChanged($event)\"\n      (filtersApplied)=\"onFiltersApplied($event)\"\n      (onApplyFilterClick)=\"onApplyFilterClick.emit($event)\"\n      (onResetFilterClick)=\"handleResetFilterClick()\"\n    >\n    </cqa-dynamic-filter>\n\n    <div class=\"cqa-flex cqa-items-stretch cqa-gap-3 cqa-min-h-0 \" style=\"border-bottom: 1px solid rgb(226, 226, 227);\">\n      <!-- Sidebar (only shown in modular view) -->\n      <cqa-folder-sidebar\n        *ngIf=\"isModularView && modularConfig.showSidebar\"\n        [folders]=\"folders\"\n        [selectedFolderId]=\"selectedFolderId\"\n        [expandedFolderIds]=\"expandedFolderIds\"\n        [unorganizedCount]=\"unorganizedCount\"\n        [allowCreate]=\"modularConfig.allowCreateFolder\"\n        [allowRename]=\"modularConfig.allowRenameFolder\"\n        [allowDelete]=\"modularConfig.allowDeleteFolder\"\n        [allowDrop]=\"modularConfig.allowTestDragDrop\"\n        [showCounts]=\"modularConfig.showCounts\"\n        [collapsed]=\"sidebarCollapsed\"\n        [labels]=\"modularLabels\"\n        [serverSideSearch]=\"serverSideSearch\"\n        [rootTotal]=\"rootTotal\"\n        [folderSearchLoading]=\"folderSearchLoading\"\n        [rootFoldersLoading]=\"rootFoldersLoading\"\n        [searchValue]=\"folderSearchValue\"\n        (folderSelected)=\"onFolderSelected($event)\"\n        (folderExpansionToggled)=\"onFolderExpansionToggled($event)\"\n        (folderChildrenRequested)=\"folderChildrenRequested.emit($event)\"\n        (folderLoadMoreRequested)=\"folderLoadMoreRequested.emit($event)\"\n        (rootLoadMoreRequested)=\"rootLoadMoreRequested.emit()\"\n        (searchChange)=\"folderSearchChange.emit($event)\"\n        (folderCreated)=\"onFolderCreated($event)\"\n        (folderCreateRequested)=\"onFolderCreateRequested($event)\"\n        (folderRenamed)=\"onFolderRenamed($event)\"\n        (folderDeleted)=\"onFolderDeleted($event)\"\n        (folderMoveRequested)=\"onFolderMoveRequested($event)\"\n        (folderDuplicateRequested)=\"onFolderDuplicateRequested($event)\"\n        (testsDropped)=\"onTestsDropped($event)\"\n        (folderDropped)=\"onFolderDropped($event)\"\n        (collapsedChange)=\"onSidebarCollapsedChange($event)\"\n      ></cqa-folder-sidebar>\n\n      <!-- Right pane -->\n      <div\n        class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-min-w-0\"\n        [style.border-top]=\"isModularView ? '1px solid #E2E2E3' : null\"\n        [style.border-left]=\"isModularView ? '1px solid #E2E2E3' : null\"\n        [style.border-right]=\"isModularView ? '1px solid #E2E2E3' : null\"\n      >\n        <!-- Breadcrumb (modular view, folder drilled-in) -->\n        <nav\n          *ngIf=\"isModularView && modularConfig.showBreadcrumb && !isRootView\"\n          aria-label=\"Folder path\"\n          class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-sm cqa-px-3 cqa-py-1 cqa-mb-3 cqa-rounded-none\"\n          style=\"color: #6D6D74; border-bottom: 1px solid #E2E2E3;\"\n        >\n          <button type=\"button\" class=\"hover:cqa-text-[#3F43EE] cqa-inline-flex cqa-items-center cqa-gap-1\" (click)=\"onFolderSelected(null)\">\n            <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n              <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" stroke=\"currentColor\" stroke-width=\"0.916667\"/>\n            </svg>\n            <span>{{ modularLabels.allFolders }}</span>\n          </button>\n          <ng-container *ngFor=\"let crumb of breadcrumbTrail; let last = last\">\n            <mat-icon class=\"cqa-align-middle\" style=\"font-size:16px;width:16px;height:16px;color:#6D6D74;\">chevron_right</mat-icon>\n            <button\n              type=\"button\"\n              [ngClass]=\"last\n                ? 'cqa-text-[#161617] cqa-font-semibold'\n                : 'cqa-text-[#6D6D74] hover:cqa-text-[#3F43EE]'\"\n              [disabled]=\"last\"\n              (click)=\"!last && onFolderSelected(crumb.id)\"\n            >{{ crumb.name }}</button>\n          </ng-container>\n        </nav>\n\n        <!-- Folder grid: modular + root view -->\n        <section\n          *ngIf=\"isModularView && isRootView && modularConfig.showFolderGrid && rootFolderTiles.length\"\n          class=\"cqa-mb-4 cqa-px-5 cqa-pt-4 cqa-pb-[14px]\"\n          style=\"border-bottom: 1px solid #F0F0F1;\"\n        >\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n            <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n              <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" stroke=\"#6D6D74\" stroke-width=\"0.916667\"/>\n            </svg>\n            <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-[#6D6D74]\">{{ modularLabels.organized }}</h3>\n            <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n              {{ rootFolderTiles.length === 1 ? modularLabels.foldersCountSingular : modularLabels.foldersCountPlural.replace('{n}', '' + rootFolderTiles.length) }}\n            </span>\n          </div>\n          <div class=\"cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin cqa-pb-2\"\n               (scroll)=\"onRootGridScroll($event)\">\n            <button\n              *ngFor=\"let f of rootFolderTiles\"\n              type=\"button\"\n              [cqaFolderDrop]=\"f.id\"\n              [dropEnabled]=\"modularConfig.allowTestDragDrop\"\n              (testsDropped)=\"onTestsDropped($event)\"\n              (click)=\"onFolderSelected(f.id)\"\n              class=\"cqa-group cqa-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-solid cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-white hover:cqa-border-[#3F43EE] hover:cqa-shadow-sm cqa-transition-colors\"\n            >\n              <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-min-w-0\">\n                <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>\n                <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                  <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ f.name }}</span>\n                  <span *ngIf=\"modularConfig.showCounts\" class=\"cqa-text-sm cqa-text-neutral-500 cqa-truncate\">\n                    {{ (f.count ?? 0) === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + (f.count ?? 0)) }}<ng-container *ngIf=\"f.children?.length\"> \u00B7 {{ f.children!.length === 1 ? modularLabels.oneSubfolder : modularLabels.subfoldersCount.replace('{n}', '' + f.children!.length) }}</ng-container>\n                  </span>\n                </div>\n              </div>\n              <mat-icon class=\"cqa-text-neutral-400 cqa-shrink-0\" style=\"font-size:20px;width:20px;height:20px\">chevron_right</mat-icon>\n            </button>\n\n            <!-- \"+ New folder\" tile -->\n            <button\n              *ngIf=\"modularConfig.allowCreateFolder\"\n              type=\"button\"\n              (click)=\"onFolderCreateRequested({ parentId: null })\"\n              class=\"cqa-group cqa-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-dashed cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-[#FAFAFA] hover:cqa-border-[#3F43EE] hover:cqa-bg-white cqa-transition-colors\"\n            >\n              <ng-container *ngTemplateOutlet=\"addIconChip\"></ng-container>\n              <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ modularLabels.newFolder }}</span>\n                <span class=\"cqa-text-sm cqa-text-neutral-400\">{{ modularLabels.testsCountPlural.replace('{n}', '0') }}</span>\n              </div>\n            </button>\n\n            <!-- Pagination spinner anchored at the right edge of the Organized\n                 row. Only renders during an in-flight root fetch (initial OR\n                 scroll-driven \"load more\"), and is filtered to suppress when\n                 the section is empty so we don't show a spinner inside an\n                 otherwise-blank row. -->\n            <div\n              *ngIf=\"rootFoldersLoading && rootFolderTiles.length > 0\"\n              class=\"cqa-shrink-0 cqa-flex cqa-items-center cqa-justify-center cqa-w-[80px]\"\n              aria-live=\"polite\"\n              [attr.aria-label]=\"'Loading more folders'\"\n            >\n              <mat-spinner diameter=\"20\" mode=\"indeterminate\"></mat-spinner>\n            </div>\n          </div>\n        </section>\n\n        <!-- Subfolder section: modular + folder view. Shown whenever drilled in\n             (even if no subfolders, so the \"+ New folder\" tile remains\n             reachable, and so we can render a loading state during the\n             drill-in fetch before children arrive). -->\n        <section\n          *ngIf=\"isModularView && !isRootView && modularConfig.showSubfolderSection && (subfolderTiles.length || currentFolderNode?.childrenLoading)\"\n          class=\"cqa-mb-4 cqa-px-3 cqa-py-1\"\n        >\n          <div *ngIf=\"subfolderTiles.length || modularConfig.allowCreateFolder\" class=\"cqa-text-sm cqa-text-neutral-600 cqa-mb-2\">\n            {{ modularLabels.subfoldersIn }} {{ breadcrumbTrail.length ? breadcrumbTrail[breadcrumbTrail.length - 1].name : '' }}\n          </div>\n          <div class=\"cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin cqa-pb-2\"\n               (scroll)=\"onSubfolderGridScroll($event)\">\n            <button\n              *ngFor=\"let f of subfolderTiles\"\n              type=\"button\"\n              [cqaFolderDrop]=\"f.id\"\n              [dropEnabled]=\"modularConfig.allowTestDragDrop\"\n              (testsDropped)=\"onTestsDropped($event)\"\n              (click)=\"onFolderSelected(f.id)\"\n              class=\"cqa-group cqa-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-solid cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-white hover:cqa-border-[#3F43EE] hover:cqa-shadow-sm cqa-transition-colors\"\n            >\n              <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-min-w-0\">\n                <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>\n                <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                  <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ f.name }}</span>\n                  <span *ngIf=\"modularConfig.showCounts\" class=\"cqa-text-sm cqa-text-neutral-500 cqa-truncate\">\n                    {{ (f.count ?? 0) === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + (f.count ?? 0)) }}\n                  </span>\n                </div>\n              </div>\n              <mat-icon class=\"cqa-text-neutral-400 cqa-shrink-0\" style=\"font-size:20px;width:20px;height:20px\">chevron_right</mat-icon>\n            </button>\n\n            <!-- \"+ New folder\" tile -->\n            <button\n              *ngIf=\"modularConfig.allowCreateFolder\"\n              type=\"button\"\n              (click)=\"onFolderCreateRequested({ parentId: selectedFolderId })\"\n              class=\"cqa-group cqa-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-dashed cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-[#FAFAFA] hover:cqa-border-[#3F43EE] hover:cqa-bg-white cqa-transition-colors\"\n            >\n              <ng-container *ngTemplateOutlet=\"addIconChip\"></ng-container>\n              <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ modularLabels.newFolder }}</span>\n                <span class=\"cqa-text-sm cqa-text-neutral-400\">{{ modularLabels.testsCountPlural.replace('{n}', '0') }}</span>\n              </div>\n            </button>\n\n            <!-- Subfolder fetch indicator. Two cases:\n                 - Drill-in fetch: no subfolderTiles yet, render a centered\n                   row spinner so the section isn't empty during the fetch.\n                 - Pagination fetch: tiles exist, anchor a small spinner at\n                   the right edge so the user knows the next page is loading. -->\n            <div\n              *ngIf=\"currentFolderNode?.childrenLoading\"\n              class=\"cqa-shrink-0 cqa-flex cqa-items-center cqa-justify-center cqa-w-[80px]\"\n              aria-live=\"polite\"\n              [attr.aria-label]=\"'Loading subfolders'\"\n            >\n              <mat-spinner diameter=\"20\" mode=\"indeterminate\"></mat-spinner>\n            </div>\n          </div>\n        </section>\n\n        <!-- Folder panel header above the table: \"Hotel Search (3)\" + Clear filter -->\n        <div\n          *ngIf=\"isModularView && !isRootView && modularConfig.showUnorganizedSection\"\n          class=\"cqa-flex cqa-mb-1 cqa-items-center cqa-justify-between cqa-px-4 cqa-py-3 cqa-rounded-t-lg cqa-bg-indigo-50 cqa-border cqa-border-indigo-100\"\n        >\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n              <path d=\"M12.9585 10.4585C12.9585 10.79 12.8268 11.108 12.5924 11.3424C12.358 11.5768 12.04 11.7085 11.7085 11.7085H1.7085C1.37698 11.7085 1.05903 11.5768 0.824613 11.3424C0.590192 11.108 0.458496 10.79 0.458496 10.4585V1.7085C0.458496 1.37698 0.590192 1.05903 0.824613 0.824613C1.05903 0.590192 1.37698 0.458496 1.7085 0.458496H4.8335L6.0835 2.3335H11.7085C12.04 2.3335 12.358 2.46519 12.5924 2.69961C12.8268 2.93403 12.9585 3.25198 12.9585 3.5835V10.4585Z\" [attr.stroke]=\"currentFolderNode?.color || '#3F43EE'\" stroke-width=\"0.916667\"/>\n            </svg>\n            <span class=\"cqa-text-sm cqa-font-semibold cqa-text-indigo-700\">\n              {{ currentFolderNode?.name }} ({{ currentFolderDirectCount }})\n            </span>\n          </div>\n          <button\n            type=\"button\"\n            class=\"cqa-px-3 cqa-py-1 cqa-text-xs cqa-font-medium cqa-text-indigo-700 cqa-bg-white cqa-border cqa-border-indigo-200 cqa-rounded hover:cqa-bg-indigo-50\"\n            (click)=\"onFolderSelected(null)\"\n          >{{ modularLabels.clearFilter }}</button>\n        </div>\n\n        <!-- Unorganized section header at root view -->\n        <div\n          *ngIf=\"isModularView && isRootView && modularConfig.showUnorganizedSection\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2 cqa-mt-2\" style=\"margin-left: 20px;\"\n        >\n          <mat-icon class=\"cqa-text-[#6D6D74]\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n          <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-[#6D6D74]\">{{ modularLabels.unorganized }}</h3>\n          <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n            {{ unorganizedCount === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + unorganizedCount) }}\n          </span>\n        </div>\n\n        <!-- Table -->\n        <div class=\"cqa-rounded-[7px] cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative cqa-overflow-x-auto\"\n             [attr.style]=\"pagedRows && pagedRows.length > 0 ? null : 'border-bottom: none !important'\">\n          <ng-container *ngIf=\"(isTableLoading || isTableDataLoading) || (!effectiveIsEmptyState && pagedRows && pagedRows.length > 0); else storyEmptyTpl\">\n            <app-dynamic-table\n              [style.border-bottom]=\"pagedRows && pagedRows.length > 0 ? '1px solid rgb(226, 226, 227)' : null\"\n              [columns]=\"computedColumns\"\n              [data]=\"pagedRows\"\n              [rowSelectable]=\"rowSelectable\"\n              [enableLocalSort]=\"enableLocalSort && !isReordering\"\n              [isTableLoading]=\"isTableLoading\"\n              [isTableDataLoading]=\"isTableDataLoading\"\n              [cellJsonPathGetter]=\"cellJsonPathGetter\"\n              [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n              [enableRowReorder]=\"isReordering\"\n              (rowReorder)=\"onRowReorder($event)\"\n              (sortChange)=\"sortChange.emit($event)\">\n              <ng-template #emptyTableTpl>\n                <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8\">\n                  <img src=\"/assets/illustrations/empty-state.svg\" alt=\"No data\" class=\"cqa-w-32 cqa-h-32 cqa-mb-4\" />\n                  <h3 class=\"cqa-text-lg cqa-font-semibold cqa-mb-2\">No test cases</h3>\n                  <p class=\"cqa-text-sm cqa-text-neutral-500 cqa-mb-4\">Try adjusting filters or create a new test case.</p>\n                  <cqa-button variant=\"filled\" (clicked)=\"toggleFilter()\">Show Filters</cqa-button>\n                </div>\n              </ng-template>\n            </app-dynamic-table>\n          </ng-container>\n\n          <ng-template #storyEmptyTpl>\n            <div class=\"cqa-p-6 cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n              <cqa-empty-state\n                *ngIf=\"effectiveIsEmptyState\"\n                [title]=\"effectiveEmptyStateConfig.title\"\n                [description]=\"effectiveEmptyStateConfig.description\"\n                [imageUrl]=\"effectiveEmptyStateConfig.imageUrl\"\n                [actions]=\"effectiveEmptyStateConfig.actions\"\n                (actionClick)=\"onEmptyAction($event)\"\n              >\n              </cqa-empty-state>\n            </div>\n          </ng-template>\n        </div>\n\n        <cqa-pagination\n          [totalElements]=\"serverSidePagination ? totalElements : filteredRows.length\"\n          [pageIndex]=\"pageIndex\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"pageSizeOptions\"\n          [pageSizeMenuDirection]=\"pageSizeMenuDirection\"\n          [pageItemCount]=\"pagedRows.length\"\n          (paginate)=\"onPaginate($event)\"\n          (pageSizeChange)=\"onPageSizeChange($event)\"\n        >\n        </cqa-pagination>\n      </div>\n    </div>\n\n    <!-- Reused bulk action toolbar -->\n    <div *ngIf=\"anyRowSelected && modularConfig.allowBulkSelection && !isReordering\" class=\"cqa-absolute cqa-bottom-[18.75px] cqa-left-[50%] cqa-translate-x-[-50%] cqa-w-full lg:cqa-max-w-[68%] cqa-sm:max-w-[75%] cqa-max-w-[90%] cqa-z-[1]\">\n      <cqa-table-action-toolbar\n        [selectedItems]=\"selectedItems && selectedItems.length > 0 ? selectedItems : currentSelectedItems\"\n        [actions]=\"effectiveBulkActions\"\n        [showSelectAll]=\"showSelectAllInToolbar\"\n        [allSelected]=\"allSelectedInToolbar\"\n        [showDismiss]=\"showDismissInToolbar\"\n        (actionClick)=\"onBulkAction($event)\"\n        (selectAllChange)=\"onBulkSelectAll($event)\"\n        (dismiss)=\"onBulkDismiss()\"\n      ></cqa-table-action-toolbar>\n    </div>\n\n  </div>\n</div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-modular-table-template', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Reusable folder-icon chip. Render via <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>. -->\n<ng-template #folderIconChip let-color=\"color\">\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-lg cqa-bg-[#F0F0F1] cqa-text-[#6D6D74] cqa-flex-shrink-0 group-hover:cqa-bg-indigo-50 group-hover:cqa-text-[#3F43EE]\">\n    <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" [attr.stroke]=\"color || 'currentColor'\" stroke-width=\"0.916667\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<!-- Reusable indeterminate loading spinner. Render via\n     <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>. -->\n<ng-template #loadingSpinner let-size=\"size\">\n  <svg [attr.width]=\"size || 20\" [attr.height]=\"size || 20\" viewBox=\"0 0 50 50\" aria-label=\"loading\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"></circle>\n    <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n      <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"></animateTransform>\n    </path>\n  </svg>\n</ng-template>\n\n<!-- Reusable \"+\" chip used by the \"New folder\" tile. -->\n<ng-template #addIconChip>\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-lg cqa-bg-[#F0F0F1] cqa-text-[#6D6D74] cqa-flex-shrink-0 group-hover:cqa-bg-indigo-50 group-hover:cqa-text-[#3F43EE]\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M8 3V13M3 8H13\" stroke=\"currentColor\" stroke-width=\"1.275\" stroke-linecap=\"round\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<div class=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n    <div [class]=\"!showSearchBar ? 'cqa-justify-end' : 'cqa-justify-between'\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n      <cqa-search-bar\n        *ngIf=\"showSearchBar\"\n        [placeholder]=\"searchPlaceholder\"\n        [value]=\"searchValue\"\n        [showClear]=\"showClear\"\n        (valueChange)=\"valueChange($event)\"\n        (search)=\"search($event)\"\n        (cleared)=\"cleared()\"\n      ></cqa-search-bar>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n        <cqa-button\n        *ngIf=\"showExportButton\"\n        variant=\"grey-solid\"\n        icon=\"open_in_new\"\n        [text]=\"isExporting ? 'Exporting...' : 'Export'\"\n        [disabled]=\"isExporting\"\n        (clicked)=\"exportCodeClick()\"\n      >\n        <span>{{ isExporting ? 'Exporting...' : 'Export' }}</span>\n      </cqa-button>\n      \n      <!-- Export Code Modal -->\n      <cqa-export-code-modal\n        *ngIf=\"showExportButton\"\n        [isOpen]=\"isExportModalOpen\"\n        [cases]=\"selectedCasesForExport\"\n        [disabled]=\"false\"\n        (closeModal)=\"closeExportModal()\"\n        (export)=\"onExportModalExport($event)\">\n      </cqa-export-code-modal>\n         <ng-container *ngFor=\"let dropdownTemplate of otherDropDownButtons; trackBy: trackByDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"dropdownTemplate\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngFor=\"let selectDropdownTemplate of otherSelectDropDownButtons; trackBy: trackBySelectDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"selectDropdownTemplate\"></ng-container>\n        </ng-container>\n        \n        <cqa-button\n          *ngIf=\"showFilterButton\"\n          variant=\"grey-solid\"\n          icon=\"add\"\n          [disabled]=\"isReordering\"\n          (clicked)=\"toggleFilter()\"\n        >\n        <span class=\"cqa-flex cqa-items-center cqa-gap-1\">\n          Filter          \n           <div [class]=\"arrowClasses\">\n            <svg\n              class=\"cqa-w-2 cqa-h-1 cqa-absolute cqa-left-[4px] cqa-top-[6px]\"\n              viewBox=\"0 0 8 4\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M0 0L4 4L8 0\"\n                stroke=\"#0B0B0C\"\n                stroke-width=\"1.33\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </div>\n        </span>\n        </cqa-button>\n        <cqa-column-visibility\n          *ngIf=\"showSettingsButton\"\n          [columns]=\"visibilityColumns\"\n          [columnVisibility]=\"columnVisibility\"\n          [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n          (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n          (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n        ></cqa-column-visibility>\n        <cqa-button\n          *ngIf=\"showAutoRefreshButton\"\n          variant=\"grey-solid\"\n          icon=\"refresh\"\n          (clicked)=\"handleRefreshClick()\"\n          [tooltip]=\"'Refresh'\"\n          tooltipPosition=\"below\"\n          [disabled]=\"isReordering\"\n        ></cqa-button>\n        <ng-container *ngFor=\"let buttonTemplate of otherButtons; trackBy: trackByTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n        </ng-container>\n        <cqa-segment-control\n          *ngIf=\"showViewModeToggle\"\n          size=\"lg\"\n          [segments]=\"viewModeSegments\"\n          [value]=\"viewMode\"\n          (valueChange)=\"onViewModeChange($event)\"\n        ></cqa-segment-control>\n        <cqa-button\n          *ngIf=\"showReorderButton && !isReordering\"\n          variant=\"outlined\"\n          icon=\"drag_indicator\"\n          [text]=\"reorderLabels.reorderButton\"\n          [disabled]=\"!pagedRows || pagedRows.length === 0 || isTableLoading || isTableDataLoading\"\n          (clicked)=\"startReorder()\"\n        ></cqa-button>\n        <ng-container *ngIf=\"showReorderButton && isReordering\">\n          <cqa-button\n            variant=\"outlined\"\n            [text]=\"reorderLabels.cancelButton\"\n            [disabled]=\"reorderSaving\"\n            (clicked)=\"cancelReorder()\"\n          ></cqa-button>\n          <cqa-button\n            variant=\"filled\"\n            [icon]=\"reorderSaving ? 'hourglass_empty' : ''\"\n            [text]=\"reorderSaving ? reorderLabels.savingButton : reorderLabels.doneButton\"\n            [disabled]=\"reorderSaving\"\n            (clicked)=\"saveReorder()\"\n          ></cqa-button>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Reorder mode banner -->\n    <div *ngIf=\"isReordering\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-bg-[#FFFBEB] cqa-border cqa-border-[#FDE68A]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n      </svg>\n      <span class=\"cqa-text-sm cqa-font-semibold cqa-text-[#92400E]\">{{ reorderLabels.bannerTitle }}</span>\n      <span class=\"cqa-text-sm cqa-text-[#92400E]\">{{ reorderLabels.bannerDescription }}</span>\n    </div>\n\n    <cqa-selected-filters\n      [filterApplied]=\"filterApplied\"\n      [chips]=\"chips\"\n      (removeChip)=\"onRemoveChip($event)\"\n      (clearAll)=\"onClearAllChips()\"\n      (onClearAll)=\"onClearAll.emit()\"\n    >\n    </cqa-selected-filters>\n\n    <cqa-dynamic-filter\n      *ngIf=\"showFilterPanel\"\n      [config]=\"filterConfig\"\n      [model]=\"filterModel\"\n      [showFilterPanel]=\"showFilterPanel\"\n      (filtersChanged)=\"onFiltersChanged($event)\"\n      (filtersApplied)=\"onFiltersApplied($event)\"\n      (onApplyFilterClick)=\"onApplyFilterClick.emit($event)\"\n      (onResetFilterClick)=\"handleResetFilterClick()\"\n    >\n    </cqa-dynamic-filter>\n\n    <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-min-h-0 \" style=\"border-bottom: 1px solid rgb(226, 226, 227);\">\n      <!-- Sidebar (only shown in modular view) -->\n      <cqa-folder-sidebar\n        *ngIf=\"isModularView && modularConfig.showSidebar\"\n        [folders]=\"folders\"\n        [selectedFolderId]=\"selectedFolderId\"\n        [expandedFolderIds]=\"expandedFolderIds\"\n        [unorganizedCount]=\"unorganizedCount\"\n        [allowCreate]=\"modularConfig.allowCreateFolder\"\n        [allowRename]=\"modularConfig.allowRenameFolder\"\n        [allowDelete]=\"modularConfig.allowDeleteFolder\"\n        [allowDrop]=\"modularConfig.allowTestDragDrop\"\n        [showCounts]=\"modularConfig.showCounts\"\n        [collapsed]=\"sidebarCollapsed\"\n        [labels]=\"modularLabels\"\n        [serverSideSearch]=\"serverSideSearch\"\n        [rootTotal]=\"rootTotal\"\n        [folderSearchLoading]=\"folderSearchLoading\"\n        [rootFoldersLoading]=\"rootFoldersLoading\"\n        [savingFolderIds]=\"savingFolderIds\"\n        [searchValue]=\"folderSearchValue\"\n        (folderSelected)=\"onFolderSelected($event)\"\n        (folderExpansionToggled)=\"onFolderExpansionToggled($event)\"\n        (folderChildrenRequested)=\"folderChildrenRequested.emit($event)\"\n        (folderLoadMoreRequested)=\"folderLoadMoreRequested.emit($event)\"\n        (rootLoadMoreRequested)=\"rootLoadMoreRequested.emit()\"\n        (searchChange)=\"folderSearchChange.emit($event)\"\n        (folderCreated)=\"onFolderCreated($event)\"\n        (folderCreateRequested)=\"onFolderCreateRequested($event)\"\n        (folderRenamed)=\"onFolderRenamed($event)\"\n        (folderDeleted)=\"onFolderDeleted($event)\"\n        (folderMoveRequested)=\"onFolderMoveRequested($event)\"\n        (folderDuplicateRequested)=\"onFolderDuplicateRequested($event)\"\n        (testsDropped)=\"onTestsDropped($event)\"\n        (folderDropped)=\"onFolderDropped($event)\"\n        (collapsedChange)=\"onSidebarCollapsedChange($event)\"\n      ></cqa-folder-sidebar>\n\n      <!-- Right pane -->\n      <div\n        class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-min-w-0\"\n        [style.border-top]=\"isModularView ? '1px solid #E2E2E3' : null\"\n        [style.border-left]=\"isModularView ? '1px solid #E2E2E3' : null\"\n        [style.border-right]=\"isModularView ? '1px solid #E2E2E3' : null\"\n      >\n        <!-- Breadcrumb (modular view, folder drilled-in) -->\n        <nav\n          *ngIf=\"isModularView && modularConfig.showBreadcrumb && !isRootView\"\n          aria-label=\"Folder path\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-sm cqa-px-3 cqa-py-2 cqa-rounded-none cqa-min-w-0\"\n          style=\"color: #6D6D74; border-bottom: 1px solid #E2E2E3;\"\n        >\n          <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-flex-1 cqa-min-w-0 cqa-overflow-x-auto cqa-scrollbar-thin cqa-whitespace-nowrap\">\n            <button type=\"button\" class=\"hover:cqa-text-[#3F43EE] cqa-inline-flex cqa-items-center cqa-gap-1 cqa-flex-shrink-0\" (click)=\"onFolderSelected(null)\">\n              <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" stroke=\"currentColor\" stroke-width=\"0.916667\"/>\n              </svg>\n              <span>{{ modularLabels.allFolders }}</span>\n            </button>\n            <ng-container *ngFor=\"let crumb of breadcrumbTrail; let last = last\">\n              <mat-icon class=\"cqa-align-middle cqa-flex-shrink-0\" style=\"font-size:16px;width:16px;height:16px;color:#6D6D74;\">chevron_right</mat-icon>\n              <button\n                type=\"button\"\n                class=\"cqa-flex-shrink-0\"\n                [ngClass]=\"last\n                  ? 'cqa-text-[#161617] cqa-font-semibold'\n                  : 'cqa-text-[#6D6D74] hover:cqa-text-[#3F43EE]'\"\n                [disabled]=\"last\"\n                (click)=\"!last && onFolderSelected(crumb.id)\"\n              >{{ crumb.name }}</button>\n            </ng-container>\n          </div>\n          <cqa-button\n            *ngIf=\"modularConfig.showSubfolderSection && subfolderTiles.length\"\n            class=\"cqa-flex-shrink-0\"\n            variant=\"text\"\n            btnSize=\"sm\"\n            customClass=\"!cqa-text-[13px] !cqa-leading-[18px]\"\n            [icon]=\"subfolderSectionExpanded ? 'expand_less' : 'expand_more'\"\n            [text]=\"(subfolderSectionExpanded ? 'Hide' : 'Show') + ' subfolders'\"\n            [attr.aria-expanded]=\"subfolderSectionExpanded\"\n            (clicked)=\"toggleSubfolderSection()\"\n          ></cqa-button>\n          <cqa-button\n            *ngIf=\"modularConfig.allowCreateFolder\"\n            class=\"cqa-flex-shrink-0\"\n            variant=\"text\"\n            btnSize=\"sm\"\n            customClass=\"!cqa-text-[13px] !cqa-leading-[18px]\"\n            icon=\"add\"\n            [text]=\"modularLabels.newFolder\"\n            (clicked)=\"onFolderCreateRequested({ parentId: selectedFolderId })\"\n          ></cqa-button>\n        </nav>\n\n        <!-- Folder grid: modular + root view -->\n        <section\n          *ngIf=\"isModularView && isRootView && modularConfig.showFolderGrid && rootFolderTiles.length\"\n          class=\"cqa-px-5 cqa-pt-2\"\n          style=\"border-bottom: 1px solid #F0F0F1;\"\n        >\n          <button\n            type=\"button\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2 cqa-w-full cqa-text-left\"\n            [attr.aria-expanded]=\"organizedSectionExpanded\"\n            (click)=\"toggleOrganizedSection()\"\n          >\n            <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n              <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" stroke=\"#6D6D74\" stroke-width=\"0.916667\"/>\n            </svg>\n            <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-[#6D6D74]\">{{ modularLabels.organized }}</h3>\n            <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n              {{ rootFolderTiles.length === 1 ? modularLabels.foldersCountSingular : modularLabels.foldersCountPlural.replace('{n}', '' + rootFolderTiles.length) }}\n            </span>\n            <mat-icon class=\"cqa-text-[#6D6D74] cqa-ml-auto\" style=\"font-size:18px;width:18px;height:18px\">\n              {{ organizedSectionExpanded ? 'expand_less' : 'expand_more' }}\n            </mat-icon>\n          </button>\n          <div\n            class=\"cqa-grid\"\n            style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n            [style.grid-template-rows]=\"organizedSectionExpanded ? '1fr' : '0fr'\"\n          >\n          <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n          <div class=\"cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin cqa-pb-1\"\n               (scroll)=\"onRootGridScroll($event)\">\n            <button\n              *ngFor=\"let f of rootFolderTiles\"\n              type=\"button\"\n              [cqaFolderDrop]=\"f.id\"\n              [dropEnabled]=\"modularConfig.allowTestDragDrop\"\n              (testsDropped)=\"onTestsDropped($event)\"\n              (click)=\"onFolderSelected(f.id)\"\n              class=\"cqa-group cqa-flex-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-solid cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-white hover:cqa-border-[#3F43EE] hover:cqa-shadow-sm cqa-transition-colors\"\n            >\n              <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-min-w-0\">\n                <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>\n                <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                  <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ f.name }}</span>\n                  <span *ngIf=\"modularConfig.showCounts\" class=\"cqa-text-sm cqa-text-neutral-500 cqa-truncate\">\n                    {{ (f.count ?? 0) === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + (f.count ?? 0)) }}<ng-container *ngIf=\"f.children?.length\"> \u00B7 {{ f.children!.length === 1 ? modularLabels.oneSubfolder : modularLabels.subfoldersCount.replace('{n}', '' + f.children!.length) }}</ng-container>\n                  </span>\n                </div>\n              </div>\n              <mat-icon class=\"cqa-text-neutral-400 cqa-flex-shrink-0\" style=\"font-size:20px;width:20px;height:20px\">chevron_right</mat-icon>\n            </button>\n\n            <!-- \"+ New folder\" tile -->\n            <button\n              *ngIf=\"modularConfig.allowCreateFolder\"\n              type=\"button\"\n              (click)=\"onFolderCreateRequested({ parentId: null })\"\n              class=\"cqa-group cqa-flex-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-dashed cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-[#FAFAFA] hover:cqa-border-[#3F43EE] hover:cqa-bg-white cqa-transition-colors\"\n            >\n              <ng-container *ngTemplateOutlet=\"addIconChip\"></ng-container>\n              <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ modularLabels.newFolder }}</span>\n                <span class=\"cqa-text-sm cqa-text-neutral-400\">{{ modularLabels.testsCountPlural.replace('{n}', '0') }}</span>\n              </div>\n            </button>\n\n            <!-- Pagination spinner anchored at the right edge of the Organized\n                 row. Only renders during an in-flight root fetch (initial OR\n                 scroll-driven \"load more\"), and is filtered to suppress when\n                 the section is empty so we don't show a spinner inside an\n                 otherwise-blank row. -->\n            <div\n              *ngIf=\"rootFoldersLoading && rootFolderTiles.length > 0\"\n              class=\"cqa-flex-shrink-0 cqa-flex cqa-items-center cqa-justify-center cqa-w-[80px]\"\n              aria-live=\"polite\"\n              [attr.aria-label]=\"'Loading more folders'\"\n            >\n              <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>\n            </div>\n          </div>\n          </div>\n          </div>\n        </section>\n\n        <!-- Subfolder section: modular + folder view. Shown whenever drilled in\n             (even if no subfolders, so the \"+ New folder\" tile remains\n             reachable, and so we can render a loading state during the\n             drill-in fetch before children arrive). -->\n        <section\n          *ngIf=\"isModularView && !isRootView && modularConfig.showSubfolderSection && (subfolderTiles.length || currentFolderNode?.childrenLoading)\"\n          class=\"cqa-grid\"\n          style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n          [style.grid-template-rows]=\"subfolderSectionExpanded ? '1fr' : '0fr'\"\n        >\n          <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n          <div class=\"cqa-px-3 cqa-py-2 cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin\"\n               (scroll)=\"onSubfolderGridScroll($event)\">\n            <button\n              *ngFor=\"let f of subfolderTiles\"\n              type=\"button\"\n              [cqaFolderDrop]=\"f.id\"\n              [dropEnabled]=\"modularConfig.allowTestDragDrop\"\n              (testsDropped)=\"onTestsDropped($event)\"\n              (click)=\"onFolderSelected(f.id)\"\n              class=\"cqa-group cqa-flex-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-solid cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-white hover:cqa-border-[#3F43EE] hover:cqa-shadow-sm cqa-transition-colors\"\n            >\n              <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-min-w-0\">\n                <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>\n                <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                  <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ f.name }}</span>\n                  <span *ngIf=\"modularConfig.showCounts\" class=\"cqa-text-sm cqa-text-neutral-500 cqa-truncate\">\n                    {{ (f.count ?? 0) === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + (f.count ?? 0)) }}\n                  </span>\n                </div>\n              </div>\n              <mat-icon class=\"cqa-text-neutral-400 cqa-flex-shrink-0\" style=\"font-size:20px;width:20px;height:20px\">chevron_right</mat-icon>\n            </button>\n\n            <!-- \"+ New folder\" tile -->\n            <button\n              *ngIf=\"modularConfig.allowCreateFolder\"\n              type=\"button\"\n              (click)=\"onFolderCreateRequested({ parentId: selectedFolderId })\"\n              class=\"cqa-group cqa-flex-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-dashed cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-[#FAFAFA] hover:cqa-border-[#3F43EE] hover:cqa-bg-white cqa-transition-colors\"\n            >\n              <ng-container *ngTemplateOutlet=\"addIconChip\"></ng-container>\n              <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ modularLabels.newFolder }}</span>\n                <span class=\"cqa-text-sm cqa-text-neutral-400\">{{ modularLabels.testsCountPlural.replace('{n}', '0') }}</span>\n              </div>\n            </button>\n\n            <!-- Subfolder fetch indicator. Two cases:\n                 - Drill-in fetch: no subfolderTiles yet, render a centered\n                   row spinner so the section isn't empty during the fetch.\n                 - Pagination fetch: tiles exist, anchor a small spinner at\n                   the right edge so the user knows the next page is loading. -->\n            <div\n              *ngIf=\"currentFolderNode?.childrenLoading\"\n              class=\"cqa-flex-shrink-0 cqa-flex cqa-items-center cqa-justify-center cqa-w-[80px]\"\n              aria-live=\"polite\"\n              [attr.aria-label]=\"'Loading subfolders'\"\n            >\n              <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>\n            </div>\n          </div>\n          </div>\n        </section>\n\n        <div\n          *ngIf=\"isModularView && !isRootView && modularConfig.showUnorganizedSection\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-4 cqa-py-3 cqa-border cqa-border-indigo-100\"\n          style=\"background-color: #D8D9FC;\"\n        >\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n              <path d=\"M12.9585 10.4585C12.9585 10.79 12.8268 11.108 12.5924 11.3424C12.358 11.5768 12.04 11.7085 11.7085 11.7085H1.7085C1.37698 11.7085 1.05903 11.5768 0.824613 11.3424C0.590192 11.108 0.458496 10.79 0.458496 10.4585V1.7085C0.458496 1.37698 0.590192 1.05903 0.824613 0.824613C1.05903 0.590192 1.37698 0.458496 1.7085 0.458496H4.8335L6.0835 2.3335H11.7085C12.04 2.3335 12.358 2.46519 12.5924 2.69961C12.8268 2.93403 12.9585 3.25198 12.9585 3.5835V10.4585Z\" stroke=\"#3F43EE\" stroke-width=\"0.916667\"/>\n            </svg>\n            <span class=\"cqa-text-sm cqa-font-semibold\" style=\"color: #3F43EE;\">\n              {{ currentFolderNode?.name }} ({{ currentFolderDirectCount }})\n            </span>\n          </div>\n          <cqa-button\n            variant=\"outlined\"\n            btnSize=\"sm\"\n            customClass=\"!cqa-text-[13px]\"\n            inlineStyles=\"border-color: #3F43EE; color: #3F43EE;\"\n            [text]=\"modularLabels.clearFilter\"\n            (clicked)=\"onFolderSelected(null)\"\n          ></cqa-button>\n        </div>\n\n        <!-- Unorganized section header at root view -->\n        <div\n          *ngIf=\"isModularView && isRootView && modularConfig.showUnorganizedSection\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2 cqa-mt-2\" style=\"margin-left: 20px;\"\n        >\n          <mat-icon class=\"cqa-text-[#6D6D74]\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n          <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-[#6D6D74]\">{{ modularLabels.unorganized }}</h3>\n          <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n            {{ unorganizedCount === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + unorganizedCount) }}\n          </span>\n        </div>\n\n        <div class=\"cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative cqa-overflow-x-auto\"\n             [class.cqa-modular-table-flush]=\"isModularView\"\n             [attr.style]=\"(!isModularView ? 'border-radius: 7px;' : '') + ((pagedRows && pagedRows.length > 0) ? '' : ' border-bottom: none !important;')\">\n          <ng-container *ngIf=\"(isTableLoading || isTableDataLoading) || (!effectiveIsEmptyState && pagedRows && pagedRows.length > 0); else storyEmptyTpl\">\n            <app-dynamic-table\n              [style.border-bottom]=\"pagedRows && pagedRows.length > 0 ? '1px solid rgb(226, 226, 227)' : null\"\n              [columns]=\"computedColumns\"\n              [data]=\"pagedRows\"\n              [rowSelectable]=\"rowSelectable\"\n              [enableLocalSort]=\"enableLocalSort && !isReordering\"\n              [isTableLoading]=\"isTableLoading\"\n              [isTableDataLoading]=\"isTableDataLoading\"\n              [cellJsonPathGetter]=\"cellJsonPathGetter\"\n              [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n              [enableRowReorder]=\"isReordering\"\n              (rowReorder)=\"onRowReorder($event)\"\n              (sortChange)=\"sortChange.emit($event)\">\n              <ng-template #emptyTableTpl>\n                <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8\">\n                  <img src=\"/assets/illustrations/empty-state.svg\" alt=\"No data\" class=\"cqa-w-32 cqa-h-32 cqa-mb-4\" />\n                  <h3 class=\"cqa-text-lg cqa-font-semibold cqa-mb-2\">No test cases</h3>\n                  <p class=\"cqa-text-sm cqa-text-neutral-500 cqa-mb-4\">Try adjusting filters or create a new test case.</p>\n                  <cqa-button variant=\"filled\" (clicked)=\"toggleFilter()\">Show Filters</cqa-button>\n                </div>\n              </ng-template>\n            </app-dynamic-table>\n          </ng-container>\n\n          <ng-template #storyEmptyTpl>\n            <div class=\"cqa-p-6 cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n              <cqa-empty-state\n                *ngIf=\"effectiveIsEmptyState\"\n                [title]=\"effectiveEmptyStateConfig.title\"\n                [description]=\"effectiveEmptyStateConfig.description\"\n                [imageUrl]=\"effectiveEmptyStateConfig.imageUrl\"\n                [actions]=\"effectiveEmptyStateConfig.actions\"\n                (actionClick)=\"onEmptyAction($event)\"\n              >\n              </cqa-empty-state>\n            </div>\n          </ng-template>\n        </div>\n\n        <cqa-pagination\n          [totalElements]=\"serverSidePagination ? totalElements : filteredRows.length\"\n          [pageIndex]=\"pageIndex\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"pageSizeOptions\"\n          [pageSizeMenuDirection]=\"pageSizeMenuDirection\"\n          [pageItemCount]=\"pagedRows.length\"\n          (paginate)=\"onPaginate($event)\"\n          (pageSizeChange)=\"onPageSizeChange($event)\"\n        >\n        </cqa-pagination>\n      </div>\n    </div>\n\n    <!-- Reused bulk action toolbar -->\n    <div *ngIf=\"anyRowSelected && modularConfig.allowBulkSelection && !isReordering\" class=\"cqa-absolute cqa-bottom-[18.75px] cqa-left-[50%] cqa-translate-x-[-50%] cqa-w-full lg:cqa-max-w-[68%] cqa-sm:max-w-[75%] cqa-max-w-[90%] cqa-z-[1]\">\n      <cqa-table-action-toolbar\n        [selectedItems]=\"selectedItems && selectedItems.length > 0 ? selectedItems : currentSelectedItems\"\n        [actions]=\"effectiveBulkActions\"\n        [showSelectAll]=\"showSelectAllInToolbar\"\n        [allSelected]=\"allSelectedInToolbar\"\n        [showDismiss]=\"showDismissInToolbar\"\n        (actionClick)=\"onBulkAction($event)\"\n        (selectAllChange)=\"onBulkSelectAll($event)\"\n        (dismiss)=\"onBulkDismiss()\"\n      ></cqa-table-action-toolbar>\n    </div>\n\n  </div>\n</div>\n\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: DialogService }]; }, propDecorators: { searchPlaceholder: [{
                 type: Input
             }], searchValue: [{
@@ -11349,6 +11451,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], sidebarCollapsed: [{
                 type: Input
+            }], subfolderSectionExpanded: [{
+                type: Input
+            }], organizedSectionExpanded: [{
+                type: Input
             }], serverSideSearch: [{
                 type: Input
             }], rootTotal: [{
@@ -11359,6 +11465,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], rootFoldersLoading: [{
                 type: Input
+            }], savingFolderIds: [{
+                type: Input
             }], selectedFolderNode: [{
                 type: Input
             }], selectedFolderTrail: [{
@@ -11397,6 +11505,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], sidebarCollapsedChange: [{
                 type: Output
+            }], subfolderSectionExpandedChange: [{
+                type: Output
+            }], organizedSectionExpandedChange: [{
+                type: Output
             }], showReorderButton: [{
                 type: Input
             }], reorderSaving: [{
@@ -35644,124 +35756,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }] } });
 
-class GraphQLOperationPickerComponent {
-    constructor() {
-        /** Flat operations list. Picker partitions by `kind` for the section headers. */
-        this.operations = [];
-        /** Display state for the "Introspected" / "Pending" badge in the title row. */
-        this.introspected = false;
-        /** True while the parent is fetching/introspecting a schema. Renders a spinner instead of the empty state. */
-        this.isLoading = false;
-        /** Emitted when the user clicks the back arrow above the title (returns to the main step 1 view). */
-        this.back = new EventEmitter();
-        /** Emitted when the user clicks an operation row. Parent patches graphQLForm and pops the picker. */
-        this.operationSelected = new EventEmitter();
-        /** Emitted when the user clicks Re-introspect — parent re-fetches the schema. */
-        this.reIntrospect = new EventEmitter();
-        /** Emitted when the user clicks Change — parent shows a URL/auth picker (deferred for now). */
-        this.change = new EventEmitter();
-        /** Emitted when the user clicks Preview on a row — parent shows a preview popover (deferred). */
-        this.preview = new EventEmitter();
-        /** Filter input value. Plain substring match across name / description / returnType. */
-        this.filterTerm = '';
-    }
-    /** Operations currently shown after applying `filterTerm`. */
-    get filteredOperations() {
-        const term = this.filterTerm.trim().toLowerCase();
-        if (!term)
-            return this.operations || [];
-        return (this.operations || []).filter((o) => {
-            var _a, _b;
-            return o.name.toLowerCase().includes(term) ||
-                ((_a = o.description) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(term) ||
-                ((_b = o.returnType) !== null && _b !== void 0 ? _b : '').toLowerCase().includes(term);
-        });
-    }
-    get queryOperations() {
-        return this.filteredOperations.filter((o) => o.kind === 'query');
-    }
-    get mutationOperations() {
-        return this.filteredOperations.filter((o) => o.kind === 'mutation');
-    }
-    get subscriptionOperations() {
-        return this.filteredOperations.filter((o) => o.kind === 'subscription');
-    }
-    /** Convenience: total schema-source count line, e.g. "38 types · 4 queries · 3 mutations". */
-    get headerCounts() {
-        const parts = [];
-        const s = this.schemaSource;
-        if (!s)
-            return '';
-        if (s.typeCount != null)
-            parts.push(`${s.typeCount} types`);
-        if (s.queryCount != null)
-            parts.push(`${s.queryCount} ${s.queryCount === 1 ? 'query' : 'queries'}`);
-        if (s.mutationCount != null)
-            parts.push(`${s.mutationCount} ${s.mutationCount === 1 ? 'mutation' : 'mutations'}`);
-        if (s.subscriptionCount != null && s.subscriptionCount > 0) {
-            parts.push(`${s.subscriptionCount} ${s.subscriptionCount === 1 ? 'subscription' : 'subscriptions'}`);
-        }
-        return parts.join(' · ');
-    }
-    onBack() {
-        this.back.emit();
-    }
-    onSelect(op) {
-        this.operationSelected.emit(op);
-    }
-    onPreview(op, event) {
-        // Stop the click from also bubbling to the row's select handler — Preview is a peek,
-        // not a commit.
-        event.stopPropagation();
-        this.preview.emit(op);
-    }
-    onReIntrospect() {
-        this.reIntrospect.emit(this.schemaSource);
-    }
-    onChange() {
-        this.change.emit();
-    }
-    onFilterChange(value) {
-        this.filterTerm = value !== null && value !== void 0 ? value : '';
-    }
-    trackByOperation(_index, op) {
-        return op.id;
-    }
-    /** Tailwind text colour for the return-type pill, keyed by operation kind. */
-    returnTypeColorClass(kind) {
-        switch (kind) {
-            case 'mutation': return 'cqa-text-[#D97706]'; // amber-600
-            case 'subscription': return 'cqa-text-[#7C3AED]'; // violet-600
-            case 'query':
-            default: return 'cqa-text-[#059669]'; // emerald-600
-        }
-    }
-}
-GraphQLOperationPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: GraphQLOperationPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GraphQLOperationPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: GraphQLOperationPickerComponent, selector: "cqa-graphql-operation-picker", inputs: { schemaSource: "schemaSource", operations: "operations", introspected: "introspected", isLoading: "isLoading" }, outputs: { back: "back", operationSelected: "operationSelected", reIntrospect: "reIntrospect", change: "change", preview: "preview" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-graphql-operation-picker cqa-flex cqa-flex-col cqa-gap-4 cqa-bg-white cqa-w-full\">\n\n  <!-- Title row: back arrow + heading + Introspected badge -->\n  <div class=\"cqa-graphql-operation-picker-header cqa-flex cqa-items-center cqa-gap-3\">\n    <div class=\"cqa-cursor-pointer cqa-text-[#6B7280] cqa-text-[14px] cqa-font-semibold\" (click)=\"onBack()\">\n      <mat-icon class=\"cqa-flex cqa-items-center cqa-justify-center cqa-text-[18px] cqa-text-[#6B7280] cqa-font-semibold\" style=\"display:flex;font-size:18px;font-weight: 600;\">arrow_back</mat-icon>\n    </div>\n    <h3 class=\"cqa-graphql-operation-picker-title cqa-m-0 cqa-text-[18px] cqa-font-semibold cqa-text-[#111827] cqa-leading-[1.25]\">\n      Pick a GraphQL operation\n    </h3>\n    <span *ngIf=\"introspected\"\n      class=\"cqa-graphql-operation-picker-badge cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-[2px] cqa-rounded-full cqa-bg-[#EDE9FE] cqa-text-[#7C3AED] cqa-text-[11px] cqa-font-medium cqa-leading-[1.4]\">\n      <span aria-hidden=\"true\">\u25C6</span> Introspected\n    </span>\n  </div>\n\n  <!-- Subheading -->\n  <p class=\"cqa-graphql-operation-picker-subheading cqa-m-0 cqa-text-[12px] cqa-text-[#6B7280] cqa-leading-[1.5]\">\n    Phase 1 supports one operation per test step. Select one to auto-fill the request.\n  </p>\n\n  <!-- Schema source bar: URL + counts + Re-introspect / Change buttons -->\n  <div class=\"cqa-graphql-operation-picker-source cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-bg-[#EEF2FF] cqa-rounded-lg cqa-px-4 cqa-py-3 cqa-border cqa-border-solid cqa-border-[#E0E7FF]\">\n    <div class=\"cqa-graphql-operation-picker-source-info cqa-flex cqa-flex-col cqa-gap-0.5 cqa-min-w-0\">\n      <div class=\"cqa-graphql-operation-picker-source-label cqa-text-[10px] cqa-uppercase cqa-tracking-wide cqa-text-[#6B7280] cqa-font-semibold\">\n        Schema source\n      </div>\n      <div *ngIf=\"schemaSource?.url\"\n        class=\"cqa-graphql-operation-picker-source-url cqa-text-[13px] cqa-font-mono cqa-text-[#1F2937] cqa-truncate cqa-min-w-0\"\n        [title]=\"schemaSource?.url\">\n        {{ schemaSource?.url }}\n      </div>\n      <div *ngIf=\"!schemaSource?.url\"\n        class=\"cqa-graphql-operation-picker-source-url cqa-text-[13px] cqa-italic cqa-text-[#6B7280]\">\n        No schema loaded yet.\n      </div>\n    </div>\n    <div class=\"cqa-graphql-operation-picker-source-meta cqa-flex cqa-items-center cqa-gap-3 cqa-shrink-0\">\n      <span *ngIf=\"headerCounts\" class=\"cqa-graphql-operation-picker-source-counts cqa-text-[12px] cqa-text-[#4B5563]\">\n        {{ headerCounts }}\n      </span>\n      <cqa-button type=\"button\" variant=\"outlined\" [icon]=\"'refresh'\" btnSize=\"md\" text=\"Re-introspect\"\n        customClass=\"!cqa-bg-white !cqa-text-[#374151] !cqa-border !cqa-border-solid !cqa-border-[#D1D5DB] cqa-text-[12px] cqa-font-medium hover:!cqa-bg-[#F9FAFB]\"\n        (clicked)=\"onReIntrospect()\">\n      </cqa-button>\n      <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\" text=\"Change\"\n        customClass=\"!cqa-text-[#4F46E5] cqa-text-[12px] cqa-font-medium hover:!cqa-bg-[#EEF2FF]\"\n        (clicked)=\"onChange()\">\n      </cqa-button>\n    </div>\n  </div>\n\n  <!-- Filter -->\n  <cqa-custom-input\n    [(value)]=\"filterTerm\"\n    [label]=\"''\"\n    placeholder=\"Filter operations...\"\n    [fullWidth]=\"true\"\n    size=\"md\"\n    ariaLabel=\"Filter GraphQL operations\">\n  </cqa-custom-input>\n\n  <!-- Loading spinner shown while the parent is introspecting. Replaces the empty state. -->\n  <div *ngIf=\"isLoading\"\n    class=\"cqa-graphql-operation-picker-loading cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-12 cqa-text-center cqa-bg-[#F9FAFB] cqa-rounded-md cqa-border cqa-border-dashed cqa-border-[#E5E7EB]\">\n    <span class=\"cqa-graphql-operation-picker-spinner cqa-inline-block cqa-w-7 cqa-h-7 cqa-rounded-full cqa-border-2 cqa-border-solid cqa-border-[#E5E7EB] cqa-border-t-[#4F46E5] cqa-animate-spin\" aria-hidden=\"true\"></span>\n    <span class=\"cqa-text-[13px] cqa-font-medium cqa-text-[#374151]\">Loading schema\u2026</span>\n    <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Introspecting GraphQL endpoint, this may take a moment.</span>\n  </div>\n\n  <!-- Empty state when no operations are loaded yet (or filter rules everything out). -->\n  <div *ngIf=\"!isLoading && !filteredOperations.length\"\n    class=\"cqa-graphql-operation-picker-empty cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-2 cqa-py-10 cqa-text-center cqa-bg-[#F9FAFB] cqa-rounded-md cqa-border cqa-border-dashed cqa-border-[#E5E7EB]\">\n    <span class=\"cqa-text-[13px] cqa-font-medium cqa-text-[#374151]\">\n      {{ filterTerm ? 'No operations match your filter.' : 'No operations available.' }}\n    </span>\n    <span *ngIf=\"!filterTerm\" class=\"cqa-text-[12px] cqa-text-[#6B7280]\">\n      Click <strong>Re-introspect</strong> above to load the schema.\n    </span>\n  </div>\n\n  <!-- Operation sections (Queries / Mutations / Subscriptions) -->\n  <ng-container *ngIf=\"!isLoading && filteredOperations.length\">\n    <ng-container *ngTemplateOutlet=\"opSection; context: { $implicit: queryOperations, label: 'Queries', accent: 'cqa-text-[#059669]' }\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"opSection; context: { $implicit: mutationOperations, label: 'Mutations', accent: 'cqa-text-[#D97706]' }\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"opSection; context: { $implicit: subscriptionOperations, label: 'Subscriptions', accent: 'cqa-text-[#7C3AED]' }\"></ng-container>\n  </ng-container>\n\n  <!-- Footer: selection summary. No Back / Use buttons \u2014 clicking a row commits + returns. -->\n  <div *ngIf=\"!isLoading && filteredOperations.length\" class=\"cqa-graphql-operation-picker-footer cqa-flex cqa-items-center cqa-pt-2 cqa-text-[12px] cqa-text-[#6B7280]\">\n    <span>Click an operation to use it \u2014 the picker closes and the request is auto-filled.</span>\n  </div>\n\n  <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Section template \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <ng-template #opSection let-ops let-label=\"label\" let-accent=\"accent\">\n    <div *ngIf=\"ops?.length\" class=\"cqa-graphql-operation-picker-section cqa-flex cqa-flex-col cqa-gap-2\">\n      <div class=\"cqa-graphql-operation-picker-section-head cqa-flex cqa-items-center cqa-gap-2 cqa-bg-[#F9FAFB] cqa-px-3 cqa-py-1.5 cqa-rounded-md cqa-border cqa-border-solid cqa-border-[#F3F4F6]\">\n        <span class=\"cqa-graphql-operation-picker-section-label cqa-text-[12px] cqa-font-semibold\" [ngClass]=\"accent\">{{ label }}</span>\n        <span class=\"cqa-graphql-operation-picker-section-count cqa-text-[11px] cqa-text-[#6B7280]\">\n          {{ ops.length }} {{ ops.length === 1 ? 'operation' : 'operations' }}\n        </span>\n      </div>\n      <div *ngFor=\"let op of ops; trackBy: trackByOperation\"\n        class=\"cqa-graphql-operation-picker-row cqa-flex cqa-items-start cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2.5 cqa-rounded-md cqa-cursor-pointer cqa-border cqa-border-solid cqa-border-transparent hover:cqa-bg-[#F9FAFB] hover:cqa-border-[#E5E7EB] focus-within:cqa-bg-[#F5F3FF]\"\n        role=\"button\"\n        tabindex=\"0\"\n        [attr.aria-label]=\"'Use operation ' + op.name\"\n        (click)=\"onSelect(op)\"\n        (keydown.enter)=\"onSelect(op)\"\n        (keydown.space)=\"onSelect(op); $event.preventDefault()\">\n        <span class=\"cqa-graphql-operation-picker-row-radio cqa-mt-1 cqa-shrink-0\">\n          <span class=\"cqa-inline-block cqa-w-4 cqa-h-4 cqa-rounded-full cqa-border cqa-border-solid cqa-border-[#9CA3AF] cqa-bg-white\" aria-hidden=\"true\"></span>\n        </span>\n        <div class=\"cqa-graphql-operation-picker-row-body cqa-flex cqa-flex-col cqa-gap-0.5 cqa-flex-1 cqa-min-w-0\">\n          <div class=\"cqa-graphql-operation-picker-row-signature cqa-flex cqa-flex-wrap cqa-items-baseline cqa-gap-x-1 cqa-text-[13px] cqa-font-mono cqa-leading-[1.4] cqa-min-w-0\">\n            <span class=\"cqa-text-[#111827] cqa-font-semibold\">{{ op.name }}</span>\n            <span class=\"cqa-text-[#6B7280]\">(</span>\n            <ng-container *ngFor=\"let arg of op.args ?? []; let last = last\">\n              <span class=\"cqa-text-[#374151]\">{{ arg.name }}</span>\n              <span class=\"cqa-text-[#6B7280]\">:&nbsp;</span>\n              <span [ngClass]=\"returnTypeColorClass(op.kind)\">{{ arg.type }}</span>\n              <span *ngIf=\"!last\" class=\"cqa-text-[#6B7280]\">,&nbsp;</span>\n            </ng-container>\n            <span class=\"cqa-text-[#6B7280]\">)</span>\n            \n          </div>\n          <div *ngIf=\"op.description\"\n            class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-graphql-operation-picker-row-description cqa-text-[12px] cqa-text-[#6B7280] cqa-leading-[1.5]\">\n            <span>{{ op.description }}</span>\n            <mat-icon *ngIf=\"op.returnType\" style=\"display:flex;font-size:14px;font-weight: 600;\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-text-[#6B7280] cqa-mx-1\">arrow_forward</mat-icon>\n            <span *ngIf=\"op.returnType\" [ngClass]=\"returnTypeColorClass(op.kind)\" class=\"cqa-font-semibold\">{{ op.returnType }}</span>\n          </div>\n        </div>\n        <!-- <button type=\"button\"\n          class=\"cqa-graphql-operation-picker-row-preview cqa-shrink-0 cqa-inline-flex cqa-items-center cqa-gap-1 cqa-bg-transparent cqa-border-0 cqa-cursor-pointer cqa-text-[#4F46E5] cqa-text-[12px] cqa-font-medium hover:cqa-underline focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#A5B4FC] cqa-rounded-md cqa-px-2 cqa-py-1\"\n          [attr.aria-label]=\"'Preview operation ' + op.name\"\n          (click)=\"onPreview(op, $event)\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n            <path d=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"2\"/>\n          </svg>\n          <span>Preview</span>\n        </button> -->\n      </div>\n    </div>\n  </ng-template>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { 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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: GraphQLOperationPickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cqa-graphql-operation-picker', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.Default, template: "<div class=\"cqa-graphql-operation-picker cqa-flex cqa-flex-col cqa-gap-4 cqa-bg-white cqa-w-full\">\n\n  <!-- Title row: back arrow + heading + Introspected badge -->\n  <div class=\"cqa-graphql-operation-picker-header cqa-flex cqa-items-center cqa-gap-3\">\n    <div class=\"cqa-cursor-pointer cqa-text-[#6B7280] cqa-text-[14px] cqa-font-semibold\" (click)=\"onBack()\">\n      <mat-icon class=\"cqa-flex cqa-items-center cqa-justify-center cqa-text-[18px] cqa-text-[#6B7280] cqa-font-semibold\" style=\"display:flex;font-size:18px;font-weight: 600;\">arrow_back</mat-icon>\n    </div>\n    <h3 class=\"cqa-graphql-operation-picker-title cqa-m-0 cqa-text-[18px] cqa-font-semibold cqa-text-[#111827] cqa-leading-[1.25]\">\n      Pick a GraphQL operation\n    </h3>\n    <span *ngIf=\"introspected\"\n      class=\"cqa-graphql-operation-picker-badge cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-[2px] cqa-rounded-full cqa-bg-[#EDE9FE] cqa-text-[#7C3AED] cqa-text-[11px] cqa-font-medium cqa-leading-[1.4]\">\n      <span aria-hidden=\"true\">\u25C6</span> Introspected\n    </span>\n  </div>\n\n  <!-- Subheading -->\n  <p class=\"cqa-graphql-operation-picker-subheading cqa-m-0 cqa-text-[12px] cqa-text-[#6B7280] cqa-leading-[1.5]\">\n    Phase 1 supports one operation per test step. Select one to auto-fill the request.\n  </p>\n\n  <!-- Schema source bar: URL + counts + Re-introspect / Change buttons -->\n  <div class=\"cqa-graphql-operation-picker-source cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-bg-[#EEF2FF] cqa-rounded-lg cqa-px-4 cqa-py-3 cqa-border cqa-border-solid cqa-border-[#E0E7FF]\">\n    <div class=\"cqa-graphql-operation-picker-source-info cqa-flex cqa-flex-col cqa-gap-0.5 cqa-min-w-0\">\n      <div class=\"cqa-graphql-operation-picker-source-label cqa-text-[10px] cqa-uppercase cqa-tracking-wide cqa-text-[#6B7280] cqa-font-semibold\">\n        Schema source\n      </div>\n      <div *ngIf=\"schemaSource?.url\"\n        class=\"cqa-graphql-operation-picker-source-url cqa-text-[13px] cqa-font-mono cqa-text-[#1F2937] cqa-truncate cqa-min-w-0\"\n        [title]=\"schemaSource?.url\">\n        {{ schemaSource?.url }}\n      </div>\n      <div *ngIf=\"!schemaSource?.url\"\n        class=\"cqa-graphql-operation-picker-source-url cqa-text-[13px] cqa-italic cqa-text-[#6B7280]\">\n        No schema loaded yet.\n      </div>\n    </div>\n    <div class=\"cqa-graphql-operation-picker-source-meta cqa-flex cqa-items-center cqa-gap-3 cqa-shrink-0\">\n      <span *ngIf=\"headerCounts\" class=\"cqa-graphql-operation-picker-source-counts cqa-text-[12px] cqa-text-[#4B5563]\">\n        {{ headerCounts }}\n      </span>\n      <cqa-button type=\"button\" variant=\"outlined\" [icon]=\"'refresh'\" btnSize=\"md\" text=\"Re-introspect\"\n        customClass=\"!cqa-bg-white !cqa-text-[#374151] !cqa-border !cqa-border-solid !cqa-border-[#D1D5DB] cqa-text-[12px] cqa-font-medium hover:!cqa-bg-[#F9FAFB]\"\n        (clicked)=\"onReIntrospect()\">\n      </cqa-button>\n      <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\" text=\"Change\"\n        customClass=\"!cqa-text-[#4F46E5] cqa-text-[12px] cqa-font-medium hover:!cqa-bg-[#EEF2FF]\"\n        (clicked)=\"onChange()\">\n      </cqa-button>\n    </div>\n  </div>\n\n  <!-- Filter -->\n  <cqa-custom-input\n    [(value)]=\"filterTerm\"\n    [label]=\"''\"\n    placeholder=\"Filter operations...\"\n    [fullWidth]=\"true\"\n    size=\"md\"\n    ariaLabel=\"Filter GraphQL operations\">\n  </cqa-custom-input>\n\n  <!-- Loading spinner shown while the parent is introspecting. Replaces the empty state. -->\n  <div *ngIf=\"isLoading\"\n    class=\"cqa-graphql-operation-picker-loading cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-12 cqa-text-center cqa-bg-[#F9FAFB] cqa-rounded-md cqa-border cqa-border-dashed cqa-border-[#E5E7EB]\">\n    <span class=\"cqa-graphql-operation-picker-spinner cqa-inline-block cqa-w-7 cqa-h-7 cqa-rounded-full cqa-border-2 cqa-border-solid cqa-border-[#E5E7EB] cqa-border-t-[#4F46E5] cqa-animate-spin\" aria-hidden=\"true\"></span>\n    <span class=\"cqa-text-[13px] cqa-font-medium cqa-text-[#374151]\">Loading schema\u2026</span>\n    <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Introspecting GraphQL endpoint, this may take a moment.</span>\n  </div>\n\n  <!-- Empty state when no operations are loaded yet (or filter rules everything out). -->\n  <div *ngIf=\"!isLoading && !filteredOperations.length\"\n    class=\"cqa-graphql-operation-picker-empty cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-2 cqa-py-10 cqa-text-center cqa-bg-[#F9FAFB] cqa-rounded-md cqa-border cqa-border-dashed cqa-border-[#E5E7EB]\">\n    <span class=\"cqa-text-[13px] cqa-font-medium cqa-text-[#374151]\">\n      {{ filterTerm ? 'No operations match your filter.' : 'No operations available.' }}\n    </span>\n    <span *ngIf=\"!filterTerm\" class=\"cqa-text-[12px] cqa-text-[#6B7280]\">\n      Click <strong>Re-introspect</strong> above to load the schema.\n    </span>\n  </div>\n\n  <!-- Operation sections (Queries / Mutations / Subscriptions) -->\n  <ng-container *ngIf=\"!isLoading && filteredOperations.length\">\n    <ng-container *ngTemplateOutlet=\"opSection; context: { $implicit: queryOperations, label: 'Queries', accent: 'cqa-text-[#059669]' }\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"opSection; context: { $implicit: mutationOperations, label: 'Mutations', accent: 'cqa-text-[#D97706]' }\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"opSection; context: { $implicit: subscriptionOperations, label: 'Subscriptions', accent: 'cqa-text-[#7C3AED]' }\"></ng-container>\n  </ng-container>\n\n  <!-- Footer: selection summary. No Back / Use buttons \u2014 clicking a row commits + returns. -->\n  <div *ngIf=\"!isLoading && filteredOperations.length\" class=\"cqa-graphql-operation-picker-footer cqa-flex cqa-items-center cqa-pt-2 cqa-text-[12px] cqa-text-[#6B7280]\">\n    <span>Click an operation to use it \u2014 the picker closes and the request is auto-filled.</span>\n  </div>\n\n  <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Section template \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <ng-template #opSection let-ops let-label=\"label\" let-accent=\"accent\">\n    <div *ngIf=\"ops?.length\" class=\"cqa-graphql-operation-picker-section cqa-flex cqa-flex-col cqa-gap-2\">\n      <div class=\"cqa-graphql-operation-picker-section-head cqa-flex cqa-items-center cqa-gap-2 cqa-bg-[#F9FAFB] cqa-px-3 cqa-py-1.5 cqa-rounded-md cqa-border cqa-border-solid cqa-border-[#F3F4F6]\">\n        <span class=\"cqa-graphql-operation-picker-section-label cqa-text-[12px] cqa-font-semibold\" [ngClass]=\"accent\">{{ label }}</span>\n        <span class=\"cqa-graphql-operation-picker-section-count cqa-text-[11px] cqa-text-[#6B7280]\">\n          {{ ops.length }} {{ ops.length === 1 ? 'operation' : 'operations' }}\n        </span>\n      </div>\n      <div *ngFor=\"let op of ops; trackBy: trackByOperation\"\n        class=\"cqa-graphql-operation-picker-row cqa-flex cqa-items-start cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2.5 cqa-rounded-md cqa-cursor-pointer cqa-border cqa-border-solid cqa-border-transparent hover:cqa-bg-[#F9FAFB] hover:cqa-border-[#E5E7EB] focus-within:cqa-bg-[#F5F3FF]\"\n        role=\"button\"\n        tabindex=\"0\"\n        [attr.aria-label]=\"'Use operation ' + op.name\"\n        (click)=\"onSelect(op)\"\n        (keydown.enter)=\"onSelect(op)\"\n        (keydown.space)=\"onSelect(op); $event.preventDefault()\">\n        <span class=\"cqa-graphql-operation-picker-row-radio cqa-mt-1 cqa-shrink-0\">\n          <span class=\"cqa-inline-block cqa-w-4 cqa-h-4 cqa-rounded-full cqa-border cqa-border-solid cqa-border-[#9CA3AF] cqa-bg-white\" aria-hidden=\"true\"></span>\n        </span>\n        <div class=\"cqa-graphql-operation-picker-row-body cqa-flex cqa-flex-col cqa-gap-0.5 cqa-flex-1 cqa-min-w-0\">\n          <div class=\"cqa-graphql-operation-picker-row-signature cqa-flex cqa-flex-wrap cqa-items-baseline cqa-gap-x-1 cqa-text-[13px] cqa-font-mono cqa-leading-[1.4] cqa-min-w-0\">\n            <span class=\"cqa-text-[#111827] cqa-font-semibold\">{{ op.name }}</span>\n            <span class=\"cqa-text-[#6B7280]\">(</span>\n            <ng-container *ngFor=\"let arg of op.args ?? []; let last = last\">\n              <span class=\"cqa-text-[#374151]\">{{ arg.name }}</span>\n              <span class=\"cqa-text-[#6B7280]\">:&nbsp;</span>\n              <span [ngClass]=\"returnTypeColorClass(op.kind)\">{{ arg.type }}</span>\n              <span *ngIf=\"!last\" class=\"cqa-text-[#6B7280]\">,&nbsp;</span>\n            </ng-container>\n            <span class=\"cqa-text-[#6B7280]\">)</span>\n            \n          </div>\n          <div *ngIf=\"op.description\"\n            class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-graphql-operation-picker-row-description cqa-text-[12px] cqa-text-[#6B7280] cqa-leading-[1.5]\">\n            <span>{{ op.description }}</span>\n            <mat-icon *ngIf=\"op.returnType\" style=\"display:flex;font-size:14px;font-weight: 600;\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-text-[#6B7280] cqa-mx-1\">arrow_forward</mat-icon>\n            <span *ngIf=\"op.returnType\" [ngClass]=\"returnTypeColorClass(op.kind)\" class=\"cqa-font-semibold\">{{ op.returnType }}</span>\n          </div>\n        </div>\n        <!-- <button type=\"button\"\n          class=\"cqa-graphql-operation-picker-row-preview cqa-shrink-0 cqa-inline-flex cqa-items-center cqa-gap-1 cqa-bg-transparent cqa-border-0 cqa-cursor-pointer cqa-text-[#4F46E5] cqa-text-[12px] cqa-font-medium hover:cqa-underline focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#A5B4FC] cqa-rounded-md cqa-px-2 cqa-py-1\"\n          [attr.aria-label]=\"'Preview operation ' + op.name\"\n          (click)=\"onPreview(op, $event)\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n            <path d=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"2\"/>\n          </svg>\n          <span>Preview</span>\n        </button> -->\n      </div>\n    </div>\n  </ng-template>\n</div>\n" }]
-        }], propDecorators: { schemaSource: [{
-                type: Input
-            }], operations: [{
-                type: Input
-            }], introspected: [{
-                type: Input
-            }], isLoading: [{
-                type: Input
-            }], back: [{
-                type: Output
-            }], operationSelected: [{
-                type: Output
-            }], reIntrospect: [{
-                type: Output
-            }], change: [{
-                type: Output
-            }], preview: [{
-                type: Output
-            }] } });
-
 class AdvancedVariablesFormComponent {
     constructor() {
         this.advancedVariables = [];
@@ -36263,10 +36257,6 @@ class ApiEditStepComponent {
         this.cdr = cdr;
         /** True while parent is creating the step (API in progress); show loader on Create/Update button */
         this.isCreatingStep = false;
-        /** Operations list for the picker. Empty until parent loads/introspects the schema. */
-        this.graphQLOperations = [];
-        /** True while the parent is introspecting; the picker swaps its empty state for a spinner. */
-        this.isLoadingGraphQLSchema = false;
         /** Emits the cURL string when user clicks Import (value from the textarea control). */
         this.importCurl = new EventEmitter();
         /** Emits when user cancels the Import cURL panel (clicks Cancel). */
@@ -36328,8 +36318,6 @@ class ApiEditStepComponent {
         this.environmentSearch = new EventEmitter();
         /** Emit when user scrolls to load more environments. */
         this.environmentLoadMore = new EventEmitter();
-        /** Emit when user clicks "Load Schema" in GraphQL mode. Parent handles the schema fetch (or shows a "coming soon" toast for now). */
-        this.loadSchema = new EventEmitter();
         /** Auth type options: array of strings or objects with id, name, value, label (passed from parent). Falls back to built-in list when empty. */
         this.authTypeOptions = [];
         /** Config for Auth Type dropdown (updated when authTypeOptions changes, like environment) */
@@ -36360,23 +36348,13 @@ class ApiEditStepComponent {
         this._url = '';
         /** When true, params form changes should not update the URL (we're syncing from URL). */
         this.paramsSyncingFromUrl = false;
-        this.activePayloadTab = 'headers';
-        /** Currently selected API type. REST is the default and matches today's behaviour exactly. */
-        this.activeApiType = 'rest';
-        /** Segments rendered above the Method/URL row. SOAP/WebSocket/gRPC are intentionally `disabled` for now. */
-        this.apiTypeSegments = [
-            { label: 'REST API', value: 'rest' },
-            { label: 'GraphQL', value: 'graphql' },
-            { label: 'SOAP', value: 'soap', disabled: true, tooltip: 'Coming soon' },
-            { label: 'WebSocket', value: 'websocket', disabled: true, tooltip: 'Coming soon' },
-            { label: 'gRPC', value: 'grpc', disabled: true, tooltip: 'Coming soon' },
+        this.payloadTabs = [
+            { value: 'authorization', label: 'Authorization' },
+            { value: 'headers', label: 'Headers' },
+            { value: 'body', label: 'Body' },
+            { value: 'params', label: 'Params' },
         ];
-        /** Inline error displayed under the Query textarea when empty/blank on Save. Cleared as the user types. */
-        this.graphQLQueryError = '';
-        /** Inline error displayed under the Variables textarea when JSON is malformed. */
-        this.graphQLVariablesError = '';
-        /** Non-blocking warning shown under the Operation Name field when the query declares 2+ operations. */
-        this.graphQLOperationWarning = '';
+        this.activePayloadTab = 'headers';
         /** Step 3: Response verification tabs */
         this.responseVerificationTabs = [
             { value: 'response-body', label: 'Response Body' },
@@ -36694,12 +36672,6 @@ class ApiEditStepComponent {
         var _a, _c;
         return ((_c = (_a = this.urlOptions) === null || _a === void 0 ? void 0 : _a.length) !== null && _c !== void 0 ? _c : 0) > 0 ? 'Enter URL or select Parameter *' : 'Enter URL *';
     }
-    /** Tabs visible under the request row, swapped based on `activeApiType`. */
-    get payloadTabs() {
-        return this.activeApiType === 'graphql'
-            ? ApiEditStepComponent.GRAPHQL_PAYLOAD_TABS
-            : ApiEditStepComponent.REST_PAYLOAD_TABS;
-    }
     onPayloadTypeChange(val) {
         this.payloadType = val;
     }
@@ -36953,7 +36925,7 @@ class ApiEditStepComponent {
         return values.length > 0 ? values[0] : 'equals';
     }
     ngOnInit() {
-        var _a, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
+        var _a, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
         this.applyInitialStep(this.initialStep);
         this.updateMethodSelectConfig();
         this.updateHeaderNameSelectConfig();
@@ -37061,50 +37033,6 @@ class ApiEditStepComponent {
         if (this.advancedSettingsVariables && this.advancedSettingsVariables.length > 0) {
             this.buildAdvancedVariablesForm();
         }
-        // GraphQL form + initial state. Hydrate from `initialApiType` / `initialGraphQL` if the parent
-        // is editing a GraphQL step. Variables come in as either an object (preferred) or a JSON string —
-        // we always store the form value as a pretty-printed JSON string so the textarea round-trips cleanly.
-        this.activeApiType = this.initialApiType === 'graphql' ? 'graphql' : 'rest';
-        const initialQuery = (_2 = (_1 = this.initialGraphQL) === null || _1 === void 0 ? void 0 : _1.query) !== null && _2 !== void 0 ? _2 : '';
-        const initialVarsRaw = (_3 = this.initialGraphQL) === null || _3 === void 0 ? void 0 : _3.variables;
-        let initialVariablesString = '';
-        if (initialVarsRaw != null) {
-            if (typeof initialVarsRaw === 'string') {
-                initialVariablesString = initialVarsRaw;
-            }
-            else {
-                try {
-                    initialVariablesString = JSON.stringify(initialVarsRaw, null, 2);
-                }
-                catch (_9) {
-                    initialVariablesString = '';
-                }
-            }
-        }
-        const initialOperationName = (_5 = (_4 = this.initialGraphQL) === null || _4 === void 0 ? void 0 : _4.operationName) !== null && _5 !== void 0 ? _5 : '';
-        this.graphQLForm = this.fb.group({
-            query: [initialQuery],
-            variables: [initialVariablesString],
-            operationName: [initialOperationName],
-        });
-        // Re-validate as the user types so inline errors clear/re-render in real time.
-        (_6 = this.graphQLForm.get('query')) === null || _6 === void 0 ? void 0 : _6.valueChanges.subscribe(() => {
-            if (this.graphQLQueryError)
-                this.graphQLQueryError = '';
-            this.recomputeGraphQLOperationWarning();
-        });
-        (_7 = this.graphQLForm.get('variables')) === null || _7 === void 0 ? void 0 : _7.valueChanges.subscribe(() => {
-            this.validateGraphQLVariables(false);
-        });
-        (_8 = this.graphQLForm.get('operationName')) === null || _8 === void 0 ? void 0 : _8.valueChanges.subscribe(() => {
-            this.recomputeGraphQLOperationWarning();
-        });
-        // Default the active tab to "graphql" when the user is editing a GraphQL step,
-        // so the Query / Variables / Operation Name fields are visible immediately.
-        if (this.activeApiType === 'graphql') {
-            this.activePayloadTab = 'graphql';
-        }
-        this.recomputeGraphQLOperationWarning();
     }
     ngAfterViewInit() {
         this.setupPayloadTextareaScrollSync();
@@ -37608,23 +37536,6 @@ class ApiEditStepComponent {
             return false;
         }
     }
-    /**
-     * Aggregate disabled state for the Send Request button. URL validity is
-     * always required; in GraphQL mode the Query field must also be non-blank
-     * (without it the request body would be `{ query: "" }`, which the engine
-     * rejects up-front anyway).
-     */
-    get isSendRequestDisabled() {
-        var _a, _c, _d;
-        if (!this.isUrlValid)
-            return true;
-        if (this.activeApiType === 'graphql') {
-            const query = ((_d = (_c = (_a = this.graphQLForm) === null || _a === void 0 ? void 0 : _a.get('query')) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '').trim();
-            if (!query)
-                return true;
-        }
-        return false;
-    }
     onSendRequest() {
         var _a, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         // Validate URL before sending request
@@ -37636,7 +37547,21 @@ class ApiEditStepComponent {
         const method = this.selectedMethod != null ? String(this.selectedMethod) : '';
         try {
             const step1 = this.getCreatePayload().step1;
-            this.sendRequest.emit(Object.assign(Object.assign({ environment: (_a = step1.environment) !== null && _a !== void 0 ? _a : environment, method: (_c = step1.method) !== null && _c !== void 0 ? _c : method, url: (_d = step1.url) !== null && _d !== void 0 ? _d : ((_e = this.url) !== null && _e !== void 0 ? _e : ''), headers: (_f = step1.headers) !== null && _f !== void 0 ? _f : this.headers, authType: step1.authType, bearerToken: step1.bearerToken, oauth2: step1.oauth2, payloadType: step1.payloadType, payloadFormat: step1.payloadFormat, payloadText: step1.payloadText, keyValueRows: step1.keyValueRows, keyTypeValueRows: step1.keyTypeValueRows, paramsRows: step1.paramsRows }, (step1.apiType && { apiType: step1.apiType })), (step1.graphQL && { graphQL: step1.graphQL })));
+            this.sendRequest.emit({
+                environment: (_a = step1.environment) !== null && _a !== void 0 ? _a : environment,
+                method: (_c = step1.method) !== null && _c !== void 0 ? _c : method,
+                url: (_d = step1.url) !== null && _d !== void 0 ? _d : ((_e = this.url) !== null && _e !== void 0 ? _e : ''),
+                headers: (_f = step1.headers) !== null && _f !== void 0 ? _f : this.headers,
+                authType: step1.authType,
+                bearerToken: step1.bearerToken,
+                oauth2: step1.oauth2,
+                payloadType: step1.payloadType,
+                payloadFormat: step1.payloadFormat,
+                payloadText: step1.payloadText,
+                keyValueRows: step1.keyValueRows,
+                keyTypeValueRows: step1.keyTypeValueRows,
+                paramsRows: step1.paramsRows,
+            });
         }
         catch (_o) {
             this.sendRequest.emit({
@@ -37694,150 +37619,6 @@ class ApiEditStepComponent {
     setPayloadTab(value) {
         this.activePayloadTab = value;
     }
-    /**
-     * Handle API Type segment toggle (REST ↔ GraphQL). When switching to GraphQL we
-     * jump to the GraphQL tab so the Query / Variables / Operation Name fields are
-     * immediately visible. When switching back to REST we land on Headers (REST default).
-     * Disabled segments (SOAP/WebSocket/gRPC) cannot fire here — `cqa-segment-control`
-     * blocks the click — but we guard anyway in case a future caller bypasses that.
-     */
-    onApiTypeChange(value) {
-        if (value !== 'rest' && value !== 'graphql')
-            return;
-        if (this.activeApiType === value)
-            return;
-        this.activeApiType = value;
-        if (this.activeApiType === 'graphql') {
-            this.activePayloadTab = 'graphql';
-            // Re-validate variables on first switch — the textarea may already have content
-            // from a previous edit and we want the inline error to surface immediately.
-            this.validateGraphQLVariables(false);
-            this.recomputeGraphQLOperationWarning();
-        }
-        else {
-            // Returning to REST — drop any GraphQL-only inline state so it doesn't linger.
-            this.graphQLQueryError = '';
-            this.graphQLVariablesError = '';
-            this.graphQLOperationWarning = '';
-            this.activePayloadTab = 'headers';
-        }
-        this.cdr.markForCheck();
-    }
-    /**
-     * Parse the Variables textarea as JSON. Empty string is valid (= no variables).
-     * Sets `graphQLVariablesError` for inline display; returns the parsed object or
-     * the raw string when the user typed something non-empty that didn't parse.
-     *
-     * @param strict When true (called from `onCreate`), an invalid JSON blocks save
-     *               — we leave the error visible and return `null` to signal abort.
-     */
-    validateGraphQLVariables(strict) {
-        var _a, _c, _d;
-        const raw = ((_d = (_c = (_a = this.graphQLForm) === null || _a === void 0 ? void 0 : _a.get('variables')) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '').trim();
-        if (!raw) {
-            this.graphQLVariablesError = '';
-            return { value: undefined, valid: true };
-        }
-        try {
-            const parsed = JSON.parse(raw);
-            this.graphQLVariablesError = '';
-            return { value: parsed, valid: true };
-        }
-        catch (err) {
-            const message = err instanceof Error ? err.message : String(err);
-            this.graphQLVariablesError = `Invalid JSON: ${message}`;
-            // In non-strict mode (live typing) we still echo back the raw string so the parent
-            // can decide what to do; in strict mode the caller checks `valid` to abort save.
-            return { value: strict ? undefined : raw, valid: false };
-        }
-    }
-    /**
-     * Detect when the GraphQL query declares 2+ named operations. GraphQL requires the
-     * client to specify `operationName` in that case; absence is a runtime error, not a
-     * syntax one, so we surface it as a non-blocking warning.
-     */
-    recomputeGraphQLOperationWarning() {
-        var _a, _c, _d, _e;
-        if (this.activeApiType !== 'graphql' || !this.graphQLForm) {
-            this.graphQLOperationWarning = '';
-            return;
-        }
-        const query = ((_c = (_a = this.graphQLForm.get('query')) === null || _a === void 0 ? void 0 : _a.value) !== null && _c !== void 0 ? _c : '');
-        const opName = ((_e = (_d = this.graphQLForm.get('operationName')) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : '').trim();
-        if (!query.trim() || opName) {
-            this.graphQLOperationWarning = '';
-            return;
-        }
-        // Match `query`, `mutation`, `subscription` as standalone tokens at the start of a line.
-        // Strip block/line comments first so commented-out operations don't trip the count.
-        const stripped = query
-            .replace(/#[^\n]*/g, '')
-            .replace(/"""[\s\S]*?"""/g, '');
-        const matches = stripped.match(/^[\s]*(query|mutation|subscription)\b/gm) || [];
-        this.graphQLOperationWarning = matches.length >= 2
-            ? 'Multiple operations detected — Operation Name is required.'
-            : '';
-    }
-    /**
-     * Click handler for the "Load Schema" button (GraphQL mode only). Switches the body view
-     * to the operation picker AND emits `loadSchema` so the parent can fetch / refresh the
-     * schema in the background. The picker renders whatever `graphQLSchemaSource` /
-     * `graphQLOperations` the parent has supplied at any given time — empty state by default.
-     */
-    onLoadSchema() {
-        var _a;
-        this.bodyView = 'graphql-schema';
-        this.loadSchema.emit({ url: (_a = this.url) !== null && _a !== void 0 ? _a : '', headers: this.headers });
-        this.cdr.markForCheck();
-    }
-    /** Picker → back: drop the picker view and return to the headers/tabs panel. */
-    onGraphQLPickerBack() {
-        this.bodyView = 'headers';
-        this.cdr.markForCheck();
-    }
-    /** Picker → re-introspect: forward to parent so it can refetch the schema. */
-    onGraphQLPickerReIntrospect() {
-        var _a;
-        this.loadSchema.emit({ url: (_a = this.url) !== null && _a !== void 0 ? _a : '', headers: this.headers });
-    }
-    /**
-     * Picker → operation selected: patch the GraphQL form (query / variables / operationName)
-     * and pop back to the main view with the GraphQL tab active so the user can see the
-     * filled-in fields.
-     */
-    onGraphQLPickerOperationSelected(op) {
-        var _a, _c, _d;
-        if (!this.graphQLForm) {
-            this.bodyView = 'headers';
-            return;
-        }
-        let variablesString = '';
-        if (op.variables != null) {
-            try {
-                variablesString = JSON.stringify(op.variables, null, 2);
-            }
-            catch (_e) {
-                variablesString = '';
-            }
-        }
-        this.graphQLForm.patchValue({
-            query: (_a = op.query) !== null && _a !== void 0 ? _a : '',
-            variables: variablesString,
-            operationName: (_d = (_c = op.operationName) !== null && _c !== void 0 ? _c : op.name) !== null && _d !== void 0 ? _d : '',
-        });
-        this.graphQLQueryError = '';
-        this.graphQLVariablesError = '';
-        this.recomputeGraphQLOperationWarning();
-        // Drop any stale response from a previously-picked operation. The next Send Request
-        // will populate the preview again. Note: ngOnChanges on `initialResponsePreview` only
-        // syncs non-null values down, so clearing here doesn't get clobbered when the parent
-        // also clears its `initialResponsePreview` field.
-        this.responsePreview = '';
-        this.activeApiType = 'graphql';
-        this.activePayloadTab = 'graphql';
-        this.bodyView = 'headers';
-        this.cdr.markForCheck();
-    }
     setResponseVerificationTab(value) {
         this.activeResponseVerificationTab = value;
     }
@@ -37964,24 +37745,7 @@ class ApiEditStepComponent {
     }
     /** Emit all entered details (environment, HTTP method, URL, headers, body, step2 variable, step3 verifications) when user clicks Create. */
     onCreate() {
-        var _a, _c, _d;
         console.log('9999999');
-        // GraphQL mode validation: query is required + non-blank, variables (if non-empty) must be valid JSON.
-        if (this.activeApiType === 'graphql') {
-            const query = ((_d = (_c = (_a = this.graphQLForm) === null || _a === void 0 ? void 0 : _a.get('query')) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '').trim();
-            if (!query) {
-                this.graphQLQueryError = 'Query is required.';
-                this.activePayloadTab = 'graphql';
-                this.cdr.markForCheck();
-                return;
-            }
-            const variables = this.validateGraphQLVariables(true);
-            if (!variables.valid) {
-                this.activePayloadTab = 'graphql';
-                this.cdr.markForCheck();
-                return;
-            }
-        }
         try {
             const payload = this.getCreatePayload();
             console.log('9999999 payload', payload);
@@ -38031,7 +37795,7 @@ class ApiEditStepComponent {
     }
     /** Build full create payload: environment, HTTP method, URL, headers, body (step1), variable name (step2), verifications (step3). */
     getCreatePayload() {
-        var _a, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
+        var _a, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
         const envFromForm = ApiEditStepComponent.getControlValue((_a = this.environmentForm) === null || _a === void 0 ? void 0 : _a.get('environment'));
         const environment = envFromForm !== '' ? envFromForm : (this.currentEnvironmentValue !== '' ? this.currentEnvironmentValue : this.selectedEnvironment);
         const methodFromForm = ApiEditStepComponent.getControlValue((_c = this.methodForm) === null || _c === void 0 ? void 0 : _c.get('method'));
@@ -38095,33 +37859,13 @@ class ApiEditStepComponent {
                 clientAuthentication: clientAuth !== '' ? clientAuth : 'basic',
             };
         }
-        // GraphQL extension: when in GraphQL mode, package the query/variables/operationName into a
-        // single sub-object and ensure Content-Type defaults to application/json (engine sets it too,
-        // but surfacing it on the headers list is cleaner for the user). Method is forced to POST so
-        // legacy REST-flavoured downstream code paths keep working when they peek at it.
-        const isGraphQL = this.activeApiType === 'graphql';
-        let outputApiType;
-        let outputGraphQL;
-        let outputHeaders = this.headers;
-        let outputMethod = method;
-        if (isGraphQL) {
-            outputApiType = 'graphql';
-            const query = ((_y = (_x = (_w = this.graphQLForm) === null || _w === void 0 ? void 0 : _w.get('query')) === null || _x === void 0 ? void 0 : _x.value) !== null && _y !== void 0 ? _y : '').trim();
-            const operationName = ((_1 = (_0 = (_z = this.graphQLForm) === null || _z === void 0 ? void 0 : _z.get('operationName')) === null || _0 === void 0 ? void 0 : _0.value) !== null && _1 !== void 0 ? _1 : '').trim();
-            const variablesResult = this.validateGraphQLVariables(false);
-            outputGraphQL = Object.assign(Object.assign({ query }, (variablesResult.value !== undefined && { variables: variablesResult.value })), (operationName && { operationName }));
-            outputMethod = 'POST';
-            const hasContentType = outputHeaders.some(h => (h.name || '').trim().toLowerCase() === 'content-type');
-            if (!hasContentType) {
-                outputHeaders = [{ name: 'Content-Type', type: 'string', value: 'application/json' }, ...outputHeaders];
-            }
-        }
         return {
-            step1: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ summary: ((_2 = this.summary) === null || _2 === void 0 ? void 0 : _2.trim()) || undefined, environment, method: outputMethod, url: (_3 = this.url) !== null && _3 !== void 0 ? _3 : '', headers: outputHeaders, authType }, (bearerToken !== undefined && { bearerToken })), (oauth2 !== undefined && { oauth2 })), { activePayloadTab: this.activePayloadTab, payloadType: this.payloadType, payloadFormat: format, payloadText: (_4 = this.payloadText) !== null && _4 !== void 0 ? _4 : '', keyValueRows,
+            step1: Object.assign(Object.assign(Object.assign({ summary: ((_w = this.summary) === null || _w === void 0 ? void 0 : _w.trim()) || undefined, environment,
+                method, url: (_x = this.url) !== null && _x !== void 0 ? _x : '', headers: this.headers, authType }, (bearerToken !== undefined && { bearerToken })), (oauth2 !== undefined && { oauth2 })), { activePayloadTab: this.activePayloadTab, payloadType: this.payloadType, payloadFormat: format, payloadText: (_y = this.payloadText) !== null && _y !== void 0 ? _y : '', keyValueRows,
                 keyTypeValueRows,
-                paramsRows }), (outputApiType && { apiType: outputApiType })), (outputGraphQL && { graphQL: outputGraphQL })),
+                paramsRows }),
             step2: {
-                variableName: (_5 = this.variableName) !== null && _5 !== void 0 ? _5 : '',
+                variableName: (_z = this.variableName) !== null && _z !== void 0 ? _z : '',
             },
             step3: {
                 activeResponseVerificationTab: this.activeResponseVerificationTab,
@@ -38345,22 +38089,6 @@ ApiEditStepComponent.OAUTH_CLIENT_AUTH_OPTIONS = [
     { id: 'basic', value: 'basic', name: 'Send as Basic Auth header', label: 'Send as Basic Auth header' },
     { id: 'body', value: 'body', name: 'Send in body', label: 'Send in body' },
 ];
-/**
- * The two tab arrangements. REST keeps the legacy four-tab layout. GraphQL drops Body & Params
- * because the body is a single { query, variables, operationName } object (rendered in the new
- * GraphQL tab below) and query params have no meaning for a GraphQL POST.
- */
-ApiEditStepComponent.REST_PAYLOAD_TABS = [
-    { value: 'authorization', label: 'Authorization' },
-    { value: 'headers', label: 'Headers' },
-    { value: 'body', label: 'Body' },
-    { value: 'params', label: 'Params' },
-];
-ApiEditStepComponent.GRAPHQL_PAYLOAD_TABS = [
-    { value: 'authorization', label: 'Authorization' },
-    { value: 'headers', label: 'Headers' },
-    { value: 'graphql', label: 'GraphQL' },
-];
 ApiEditStepComponent.DEFAULT_FORMAT_OPTIONS = [
     { id: 'json', value: 'json', name: 'JSON', label: 'JSON' },
     { id: 'xml', value: 'xml', name: 'XML', label: 'XML' },
@@ -38432,10 +38160,10 @@ ApiEditStepComponent.DEFAULT_STATUS_VERIFICATION_OPTIONS = [
     { id: 'greater-than', value: 'greater-than', name: 'Greater than', label: 'Greater than' },
 ];
 ApiEditStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ApiEditStepComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ApiEditStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ApiEditStepComponent, selector: "cqa-api-edit-step", inputs: { initialMethod: "initialMethod", initialEnvironment: "initialEnvironment", initialStep: "initialStep", initialUrl: "initialUrl", initialPayloadTab: "initialPayloadTab", initialPayloadType: "initialPayloadType", initialPayloadText: "initialPayloadText", initialSummary: "initialSummary", initialHeaders: "initialHeaders", initialResponsePreview: "initialResponsePreview", initialVariableName: "initialVariableName", initialResponseBodyVerifications: "initialResponseBodyVerifications", initialStatusVerifications: "initialStatusVerifications", initialActiveResponseVerificationTab: "initialActiveResponseVerificationTab", editMode: "editMode", isCreatingStep: "isCreatingStep", initialApiType: "initialApiType", initialGraphQL: "initialGraphQL", graphQLSchemaSource: "graphQLSchemaSource", graphQLOperations: "graphQLOperations", isLoadingGraphQLSchema: "isLoadingGraphQLSchema", httpMethodOptions: "httpMethodOptions", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", urlOptions: "urlOptions", authTypeOptions: "authTypeOptions", initialAuthType: "initialAuthType", formatOptions: "formatOptions", initialFormat: "initialFormat", headerNameOptions: "headerNameOptions", verificationOptions: "verificationOptions", verificationDataTypeOptions: "verificationDataTypeOptions", statusVerificationOptions: "statusVerificationOptions", advancedSettingsVariables: "advancedSettingsVariables" }, outputs: { importCurl: "importCurl", importCurlCancel: "importCurlCancel", sendRequest: "sendRequest", back: "back", cancel: "cancel", next: "next", create: "create", headersChange: "headersChange", environmentChange: "environmentChange", environmentSearch: "environmentSearch", environmentLoadMore: "environmentLoadMore", loadSchema: "loadSchema" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "payloadEditorWithLinesRef", first: true, predicate: ["payloadEditorWithLinesRef"], descendants: true }, { propertyName: "payloadTextareaRef", first: true, predicate: ["payloadTextareaRef"], descendants: true }, { propertyName: "responsePreviewRef", first: true, predicate: ["responsePreviewRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-api-edit-step-container cqa-bg-[#ffffff] cqa-flex cqa-flex-col cqa-w-full cqa-h-full cqa-p-[16px] cqa-gap-[12px] cqa-overflow-y-auto cqa-overflow-x-hidden cqa-box-border\">\n\n  <h2 class=\"cqa-api-edit-step-title cqa-font-inter cqa-text-[12px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal cqa-text-[#000000] cqa-m-0\">\n    {{ editMode ? 'Update API Test Step' : 'Create API Test Step' }}\n  </h2>\n\n  <div class=\"cqa-api-edit-step-indicator cqa-flex cqa-items-center cqa-gap-0 cqa-max-[767px]:cqa-flex-wrap cqa-max-[767px]:cqa-gap-2 cqa-max-[767px]:cqa-justify-start\"\n    [class.cqa-justify-start]=\"stepLabels.length === 1\"\n    [class.cqa-justify-between]=\"stepLabels.length !== 1\">\n    <ng-container *ngFor=\"let step of stepLabels; let i = index\">\n      <cqa-button type=\"button\" variant=\"text\"\n        customClass=\"cqa-api-edit-step-indicator-item cqa-api-edit-step-indicator-item--clickable cqa-flex cqa-items-center cqa-gap-[10px] cqa-cursor-pointer cqa-border-none cqa-p-0 cqa-font-inherit cqa-text-inherit cqa-text-left !cqa-bg-transparent\"\n        [attr.aria-label]=\"'Step ' + step.index + ': ' + step.label\" [attr.aria-pressed]=\"step.index === currentStep\"\n        (clicked)=\"setStep(step.index)\">\n        <span class=\"cqa-api-edit-step-indicator-circle cqa-w-8 cqa-h-8 cqa-rounded-full cqa-inline-flex cqa-items-center cqa-justify-center cqa-text-sm cqa-font-medium cqa-leading-none cqa-border-none cqa-shrink-0\"\n          [ngClass]=\"step.index === currentStep ? 'cqa-bg-[#4F46E5] cqa-text-white' : 'cqa-bg-[#E0E0E0] cqa-text-[#666666]'\">\n          {{ step.index }}\n        </span>\n        <span class=\"cqa-api-edit-step-indicator-label cqa-text-sm cqa-leading-[18px] cqa-font-normal cqa-max-[767px]:cqa-text-xs\"\n          [ngClass]=\"step.index === currentStep ? 'cqa-text-[#4F46E5]' : 'cqa-text-[#666666]'\">\n          {{ step.label }}\n        </span>\n        <div *ngIf=\"i < stepLabels.length - 1\" class=\"cqa-api-edit-step-indicator-line cqa-w-[96px] cqa-h-[2px] cqa-bg-[#E0E0E0] cqa-my-0 cqa-mx-[6px] cqa-shrink-0 cqa-self-center cqa-max-[767px]:cqa-w-[24px] cqa-max-[767px]:cqa-mx-1\" aria-hidden=\"true\"></div>\n      </cqa-button>\n    </ng-container>\n  </div>\n\n  <!-- Step content viewport: only the active step body is shown (*ngIf) -->\n  <div class=\"cqa-api-edit-step-viewport cqa-w-full\">\n    <!-- Step 1: Environment, request, body, response -->\n    <div *ngIf=\"currentStep === 1\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <!-- API Type segment: REST API (default) | GraphQL | SOAP/WebSocket/gRPC (disabled) -->\n        <div class=\"cqa-api-edit-step-api-type-row cqa-flex cqa-flex-col cqa-gap-1.5\">\n          <label class=\"cqa-api-edit-step-api-type-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">API Type</label>\n          <cqa-segment-control\n            [value]=\"activeApiType\"\n            [segments]=\"apiTypeSegments\"\n            (valueChange)=\"onApiTypeChange($event)\"\n            class=\"cqa-api-edit-step-api-type-segment\">\n          </cqa-segment-control>\n        </div>\n\n        <!-- Summary field: label on top, input below (above Environment) -->\n        <div class=\"cqa-api-edit-step-summary-row cqa-flex cqa-flex-col cqa-gap-1.5 cqa-items-stretch\">\n          <label class=\"cqa-api-edit-step-summary-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">Summary</label>\n          <cqa-custom-input [(value)]=\"summary\"\n            [label]=\"''\" placeholder=\"Enter Request summary\" [fullWidth]=\"true\" size=\"md\"\n            ariaLabel=\"Summary\">\n          </cqa-custom-input>\n        </div>\n        <!-- Environment row: label on top, select below (aligned right on desktop) -->\n        <div class=\"cqa-api-edit-step-environment-row cqa-flex cqa-justify-end cqa-gap-1.5 cqa-items-end cqa-max-[767px]:cqa-items-stretch\">\n          <div *ngIf=\"activeApiType === 'graphql'\" class=\"cqa-api-edit-step-url-wrap cqa-flex-1 cqa-min-w-[200px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-w-full\">\n            <cqa-autocomplete\n              [value]=\"url\"\n              (valueChange)=\"url = $event\"\n              [options]=\"urlOptions\"\n              [placeholder]=\"urlPlaceholder\"\n              ariaLabel=\"Enter URL or select Parameter\"\n              [fullWidth]=\"true\"\n              (optionSelect)=\"onUrlOptionSelect($event)\">\n            </cqa-autocomplete>\n            <div *ngIf=\"urlError\" class=\"cqa-text-red-600 cqa-text-sm cqa-mt-1\">\n              {{ urlError }}\n            </div>\n          </div>\n\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-max-[767px]:cqa-items-stretch\">\n            <label class=\"cqa-api-edit-step-environment-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">Environments</label>\n            <cqa-dynamic-select *ngIf=\"environmentForm\"\n              [form]=\"environmentForm\"\n              [config]=\"environmentSelectConfig\"\n              class=\"cqa-api-edit-step-environment-select cqa-shrink-0 cqa-w-auto cqa-min-w-[315px] cqa-max-w-[315px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full [&_.mat-form-field-wrapper]:cqa-pb-0\"\n              aria-label=\"Environment\"\n              (selectionChange)=\"onEnvironmentSelectionChange($event)\">\n            </cqa-dynamic-select>\n          </div>\n        </div>\n\n        <!-- Request row: method, URL, buttons -->\n        <div [ngClass]=\"{'cqa-items-start': activeApiType === 'rest', 'cqa-justify-between': activeApiType === 'graphql'}\" class=\"cqa-api-edit-step-request-row cqa-flex cqa-gap-3 cqa-flex-wrap cqa-max-[767px]:cqa-flex-col cqa-max-[767px]:cqa-items-stretch cqa-max-[767px]:cqa-gap-2.5\">\n          <!-- REST mode shows the HTTP Method dropdown. GraphQL pins method to POST internally so the dropdown is hidden. -->\n          <cqa-dynamic-select *ngIf=\"methodForm && activeApiType === 'rest'\" [form]=\"methodForm\" [config]=\"methodSelectConfig\"\n            class=\"cqa-api-edit-step-method-select cqa-shrink-0 cqa-w-auto cqa-min-w-[152px] cqa-max-w-[152px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full\" aria-label=\"HTTP method\"\n            (selectionChange)=\"onMethodSelectionChange($event)\">\n          </cqa-dynamic-select>\n          <div *ngIf=\"activeApiType === 'rest'\" class=\"cqa-api-edit-step-url-wrap cqa-flex-1 cqa-min-w-[200px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-w-full\">\n            <cqa-autocomplete\n              [value]=\"url\"\n              (valueChange)=\"url = $event\"\n              [options]=\"urlOptions\"\n              [placeholder]=\"urlPlaceholder\"\n              ariaLabel=\"Enter URL or select Parameter\"\n              [fullWidth]=\"true\"\n              (optionSelect)=\"onUrlOptionSelect($event)\">\n            </cqa-autocomplete>\n            <div *ngIf=\"urlError\" class=\"cqa-text-red-600 cqa-text-sm cqa-mt-1\">\n              {{ urlError }}\n            </div>\n          </div>\n\n          <!-- Import API cURL: REST-only (the cURL parser produces REST shapes). -->\n          <div *ngIf=\"activeApiType === 'rest'\" class=\"cqa-api-edit-step-import-curl-trigger cqa-contents cqa-max-[767px]:cqa-w-full cqa-max-[767px]:!cqa-flex\" (click)=\"openImportCurlPanel()\">\n            <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Import API cURL\"\n              customClass=\"cqa-api-edit-step-btn-outline !cqa-bg-white !cqa-border !cqa-border-solid !cqa-border-[#6B7280] cqa-text-[#414146] cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal hover:!cqa-bg-[#F9FAFB] hover:!cqa-text-[#414146] cqa-max-[767px]:cqa-w-full cqa-mt-1\">\n            </cqa-button>\n          </div>\n          <!--\n            Load Schema: GraphQL-only. Uses the elevated cqa-button variant so the\n            indigo surface + text + elevation shadow come from the design system \u2014\n            customClass keeps only the typography + responsive sizing tweaks.\n            Disabled / blocked styling is handled natively by the elevated variant\n            (cqa-bg-primary-muted, muted text, no shadow), so we don't add an\n            opacity override on top.\n          -->\n          <cqa-button *ngIf=\"activeApiType === 'graphql'\" type=\"button\" variant=\"elevated\" btnSize=\"lg\" text=\"Load Schema\"\n            icon=\"schema\"\n            customClass=\"cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal cqa-max-[767px]:cqa-w-full cqa-mt-1\"\n            [disabled]=\"!url || !url.trim() || isLoadingGraphQLSchema\"\n            (clicked)=\"onLoadSchema()\">\n          </cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" text=\"Send Request\" (clicked)=\"onSendRequest()\"\n            [disabled]=\"isSendRequestDisabled\"\n            customClass=\"cqa-api-edit-step-btn-primary cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal !cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] !cqa-border-none cqa-py-2.5 cqa-px-6 cqa-gap-2 cqa-rounded-lg cqa-min-h-[37px] cqa-box-border hover:!cqa-bg-[#1B1FEB] cqa-max-[767px]:cqa-w-full cqa-mt-1\"\n            [ngClass]=\"{'!cqa-opacity-50 !cqa-cursor-not-allowed': isSendRequestDisabled}\">\n          </cqa-button>\n        </div>\n\n\n\n        <!-- Body content: header section (default) OR import cURL section -->\n        <ng-container *ngIf=\"bodyView === 'import-curl'\">\n          <div class=\"cqa-api-edit-step-import-curl-panel cqa-flex cqa-flex-col cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-shadow-[0_1px_3px_rgba(0,0,0,0.08)] cqa-overflow-hidden\">\n            <div class=\"cqa-api-edit-step-import-curl-header cqa-flex cqa-items-center cqa-justify-between cqa-py-3 cqa-px-5 cqa-border-b cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-[#F9FAFB] cqa-rounded-t-lg cqa-max-[767px]:cqa-px-4\">\n              <h3 class=\"cqa-api-edit-step-import-curl-title cqa-m-0 cqa-text-xs cqa-font-bold cqa-leading-[18px] cqa-text-[#374151]\">Import API cURL</h3>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-separator cqa-h-px cqa-bg-[#E2E8F0] cqa-my-0 cqa-mx-5\"></div>\n            <div class=\"cqa-api-edit-step-import-curl-note cqa-px-5 cqa-pt-3\">\n              <cqa-badge label=\"cURL is supported in Bash format only.\" icon=\"info\" variant=\"info\" size=\"small\" [fullWidth]=\"true\"></cqa-badge>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-body\">\n              <cqa-custom-textarea [value]=\"importCurlControl.value\"\n                (valueChange)=\"importCurlControl.setValue($event)\"\n                placeholder=\"Paste your cURL command here (e.g., curl -X POST https://api.example.com/users)\"\n                [fullWidth]=\"true\" [rows]=\"8\" resize=\"vertical\" size=\"md\"\n                class=\"cqa-api-edit-step-import-curl-textarea\">\n              </cqa-custom-textarea>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-footer\">\n              <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n                customClass=\"cqa-api-edit-step-import-curl-btn-cancel\" (clicked)=\"onCancelImportCurl()\"></cqa-button>\n              <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Import\"\n                customClass=\"cqa-api-edit-step-import-curl-btn-import\" (clicked)=\"onImportCurlConfirm()\"></cqa-button>\n            </div>\n          </div>\n        </ng-container>\n\n        <!-- GraphQL operation picker \u2014 opened by the \"Load Schema\" button in GraphQL mode. -->\n        <ng-container *ngIf=\"bodyView === 'graphql-schema'\">\n          <cqa-graphql-operation-picker\n            [schemaSource]=\"graphQLSchemaSource\"\n            [operations]=\"graphQLOperations\"\n            [introspected]=\"!!graphQLSchemaSource\"\n            [isLoading]=\"isLoadingGraphQLSchema\"\n            (back)=\"onGraphQLPickerBack()\"\n            (reIntrospect)=\"onGraphQLPickerReIntrospect()\"\n            (operationSelected)=\"onGraphQLPickerOperationSelected($event)\">\n          </cqa-graphql-operation-picker>\n        </ng-container>\n\n        <ng-container *ngIf=\"bodyView === 'headers'\">\n          <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n            <div class=\"cqa-api-edit-step-tabs\">\n              <cqa-button *ngFor=\"let tab of payloadTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n                [customClass]=\"'cqa-api-edit-step-tab' + (activePayloadTab === tab.value ? ' cqa-api-edit-step-tab--active' : '') + (isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params') ? ' cqa-api-edit-step-tab--disabled' : '')\"\n                [disabled]=\"isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params')\"\n                (clicked)=\"setPayloadTab(tab.value)\">\n              </cqa-button>\n            </div>\n\n            <!-- Payload content (Authorization) -->\n            <div *ngIf=\"activePayloadTab === 'authorization'\" class=\"cqa-api-edit-step-payload\"\n              [attr.style]=\"'padding: 20px; min-height: 200px;'\">\n              <div [attr.style]=\"'display: flex; flex-direction: column; gap: 20px;'\">\n                <div [attr.style]=\"'display: flex; flex-direction: column; gap: 8px; width: fit-content;'\">\n                  <span [attr.style]=\"'font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #6B7280; text-transform: uppercase; line-height: 1.25;'\">AUTH TYPE</span>\n                  <cqa-dynamic-select *ngIf=\"authTypeForm\" [form]=\"authTypeForm\" [config]=\"authTypeSelectConfig\"\n                    class=\"cqa-api-edit-step-auth-type-select\" aria-label=\"Auth type\"\n                    [attr.style]=\"'min-width: 160px;'\">\n                  </cqa-dynamic-select>\n                </div>\n                <!-- No Auth: centered message -->\n                <div *ngIf=\"selectedAuthType === 'no-auth'\"\n                  [attr.style]=\"'flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; text-align: center; border: 1px solid #E5E7EB; border-radius: 8px; padding-top: 16px; padding-bottom: 16px;'\">\n                  <div aria-hidden=\"true\"\n                    [attr.style]=\"'width: 48px; height: 48px; border-radius: 10px; background: #F3F4F6; display: flex; align-items: center; justify-content: center; flex-shrink: 0;'\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n                      <rect x=\"5\" y=\"11\" width=\"14\" height=\"2\" rx=\"1\" fill=\"#9CA3AF\"/>\n                    </svg>\n                  </div>\n                  <span [attr.style]=\"'font-size: 16px; font-weight: 600; color: #374151; line-height: 1.25;'\">No Auth</span>\n                  <div [attr.style]=\"'display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;'\">\n                    <span [attr.style]=\"'font-size: 14px; font-weight: 400; color: #9CA3AF; line-height: 1.4;'\">This request does not use any authorization.</span>\n                    <span role=\"img\" aria-label=\"More information\" title=\"This request does not use any authorization.\"\n                      [attr.style]=\"'display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: #9CA3AF; flex-shrink: 0;'\">\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n                        <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" fill=\"none\"/>\n                        <path d=\"M8 7v4M8 5v.5\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                      </svg>\n                    </span>\n                  </div>\n                </div>\n                <!-- Bearer Token: Token label + textarea -->\n                <div *ngIf=\"selectedAuthType === 'bearer'\"\n                  [attr.style]=\"'flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0;'\">\n                  <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Token</span>\n                  <cqa-custom-textarea [(value)]=\"bearerToken\"\n                    placeholder=\"Enter bearer token\"\n                    [fullWidth]=\"true\" [rows]=\"6\" resize=\"vertical\" size=\"md\"\n                    class=\"cqa-api-edit-step-auth-token-textarea\" ariaLabel=\"Bearer token\">\n                  </cqa-custom-textarea>\n                </div>\n                <!-- OAuth 2.0: Grant Type, Access Token URL, Client ID, Client Secret, Scope, Client Authentication -->\n                <div *ngIf=\"selectedAuthType === 'oauth2' && oauth2Form\"\n                  class=\"cqa-api-edit-step-oauth2-grid\"\n                  [attr.style]=\"'display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; width: 100%;'\">\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Grant Type</span>\n                    <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2GrantTypeSelectConfig\"\n                      class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"OAuth grant type\"\n                      [attr.style]=\"'min-width: 0; width: 100%;'\">\n                    </cqa-dynamic-select>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth grant type</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Access Token URL</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('accessTokenUrl')?.value\"\n                      (valueChange)=\"oauth2Form.get('accessTokenUrl')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter OAuth token endpoint\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Access Token URL\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth token endpoint</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client ID</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('clientId')?.value\"\n                      (valueChange)=\"oauth2Form.get('clientId')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter OAuth client identifier\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Client ID\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client identifier</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Secret</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('clientSecret')?.value\"\n                      (valueChange)=\"oauth2Form.get('clientSecret')?.setValue($event)\"\n                      type=\"password\" [label]=\"''\" placeholder=\"Enter OAuth client secret\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Client Secret\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client secret</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Scope</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('scope')?.value\"\n                      (valueChange)=\"oauth2Form.get('scope')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter space-separated scopes\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Scope\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Space-separated scopes</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Authentication</span>\n                    <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2ClientAuthSelectConfig\"\n                      class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"Client authentication method\"\n                      [attr.style]=\"'min-width: 0; width: 100%;'\">\n                    </cqa-dynamic-select>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Client authentication method</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Payload content (Headers) -->\n            <div *ngIf=\"activePayloadTab === 'headers'\" class=\"cqa-api-edit-step-payload\">\n              <div class=\"cqa-api-edit-step-headers-grid\">\n                <span class=\"cqa-api-edit-step-headers-label\">Header Name</span>\n                <span class=\"cqa-api-edit-step-headers-label\">Header Value</span>\n                <span class=\"cqa-api-edit-step-headers-label cqa-api-edit-step-headers-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of headerRows; let i = index; trackBy: trackByHeader\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-header-row\">\n                <cqa-dynamic-select [form]=\"row\" [config]=\"headerNameSelectConfig\"\n                  (addCustomValue)=\"onHeaderNameAddCustomValue($event, row)\"\n                  class=\"cqa-api-edit-step-header-type-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                  (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-header-value-input\" ariaLabel=\"Header value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-header-delete'\"\n                  [tooltip]=\"'Remove header'\" (clicked)=\"removeHeader(i)\">\n                  <svg class=\"cqa-api-edit-step-header-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n              <div class=\"cqa-api-edit-step-add-header-wrap\">\n                <cqa-button type=\"button\" variant=\"text\" text=\"+ Add Header\"\n                  [customClass]=\"'cqa-api-edit-step-add-header-link'\" (clicked)=\"addHeader()\">\n                </cqa-button>\n              </div>\n            </div>\n\n            <!-- Payload content (Params): Key\u2013Value table with add/delete rows. REST-only \u2014 GraphQL POST has no query params. -->\n            <div *ngIf=\"activePayloadTab === 'params' && activeApiType === 'rest'\" class=\"cqa-api-edit-step-payload\">\n              <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n                <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n                <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n                <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of paramsRows; let i = index; trackBy: trackByParams\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-key-value-row\">\n                <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                  (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n                </cqa-custom-input>\n                <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                  (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeParamsRow(i)\">\n                  <svg class=\"cqa-api-edit-step-key-value-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n              <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n                <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                  customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addParamsRow()\">\n                </cqa-button>\n              </div>\n            </div>\n\n            <!-- Payload content (Body only): type, format, text area, Back/Next. REST-only \u2014 GraphQL uses the dedicated tab below. -->\n            <div *ngIf=\"activePayloadTab === 'body' && activeApiType === 'rest'\"\n              class=\"cqa-api-edit-step-payload cqa-api-edit-step-payload-editor\">\n              <div class=\"cqa-api-edit-step-payload-type-row\">\n                <span class=\"cqa-api-edit-step-payload-type-label\">Type</span>\n                <div class=\"cqa-api-edit-step-payload-type-radios\">\n                  <cqa-segment-control [value]=\"payloadType\" [segments]=\"payloadTypeSegments\"\n                    (valueChange)=\"onPayloadTypeChange($event)\"\n                    class=\"cqa-api-edit-step-payload-type-segment\">\n                  </cqa-segment-control>\n                </div>\n                <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-format-wrap\">\n                  <span class=\"cqa-api-edit-step-payload-format-label\">Format:</span>\n                  <cqa-dynamic-select *ngIf=\"payloadFormatForm\" [form]=\"payloadFormatForm\"\n                    [config]=\"payloadFormatSelectConfig\" class=\"cqa-api-edit-step-payload-format-select\"\n                    aria-label=\"Format\">\n                  </cqa-dynamic-select>\n                </div>\n              </div>\n              <!-- Raw: text area with line numbers (Postman-style payload body) -->\n              <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-body\" #payloadEditorWithLinesRef>\n                <div class=\"cqa-api-edit-step-payload-editor-with-lines\">\n                  <div class=\"cqa-api-edit-step-payload-line-numbers\" aria-hidden=\"true\">\n                    <span *ngFor=\"let n of payloadLineNumbers\" class=\"cqa-api-edit-step-payload-line-num\">\n                      <span *ngIf=\"payloadJsonError && payloadJsonError.line === n\"\n                        class=\"cqa-api-edit-step-payload-line-error-icon\" [title]=\"payloadJsonErrorTooltip\"\n                        aria-label=\"Parse error on this line\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n                          <circle cx=\"7\" cy=\"7\" r=\"6\" fill=\"#EF4444\"/>\n                          <path d=\"M4 4l6 6M10 4l-6 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                        </svg>\n                      </span>\n                      <span class=\"cqa-api-edit-step-payload-line-num-text\">{{ n }}</span>\n                    </span>\n                  </div>\n                  <div class=\"cqa-api-edit-step-payload-textarea-cell\">\n                    <div class=\"cqa-api-edit-step-payload-textarea cqa-w-full cqa-flex cqa-flex-col cqa-min-h-0\"\n                      [ngClass]=\"{'cqa-api-edit-step-payload-textarea--error': payloadJsonError}\">\n                      <textarea #payloadTextareaRef\n                        class=\"cqa-api-edit-step-payload-textarea-input cqa-w-full cqa-outline-none cqa-box-border\"\n                        [ngClass]=\"{'cqa-api-edit-step-payload-textarea-input--error': payloadJsonError}\"\n                        [value]=\"payloadText\"\n                        placeholder=\"\"\n                        [attr.aria-label]=\"'Payload'\"\n                        [attr.aria-invalid]=\"!!payloadJsonError\"\n                        (input)=\"onPayloadInput($event)\"\n                        (keydown)=\"onPayloadKeydown($event)\">\n                      </textarea>\n                    </div>\n                  </div>\n                </div>\n                <p *ngIf=\"payloadJsonError\" class=\"cqa-api-edit-step-payload-json-error-msg\">\n                  Invalid JSON format. Please check your syntax.\n                </p>\n              </div>\n\n              <!-- x-www-form-urlencoded: Key\u2013Value rows, add/remove dynamically -->\n              <div *ngIf=\"payloadType === 'x-www-form-urlencoded'\" class=\"cqa-api-edit-step-key-value\">\n                <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n                  <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n                  <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n                  <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n                    aria-hidden=\"true\"></span>\n                </div>\n                <div *ngFor=\"let row of keyValueRows; let i = index; trackBy: trackByKeyValue\" [formGroup]=\"row\"\n                  class=\"cqa-api-edit-step-key-value-row\">\n                  <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                    (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n                  </cqa-custom-input>\n                  <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                    (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n                  </cqa-custom-input>\n                  <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n                    [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyValueRow(i)\">\n                    <svg class=\"cqa-api-edit-step-key-value-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                      <path\n                        d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                        fill=\"#F9BFBF\" />\n                    </svg>\n                  </cqa-button>\n                </div>\n                <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n                  <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                    customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addKeyValueRow()\">\n                  </cqa-button>\n                </div>\n              </div>\n\n              <!-- Form Data: Key\u2013Type\u2013Value rows; Type is a dropdown (Text/File), add/remove dynamically -->\n              <div *ngIf=\"payloadType === 'form-data'\" class=\"cqa-api-edit-step-key-type-value\">\n                <div class=\"cqa-api-edit-step-key-type-value-header\">\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Key</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Type</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Value</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label cqa-api-edit-step-key-type-value-label--empty\"\n                    aria-hidden=\"true\"></span>\n                </div>\n                <div *ngFor=\"let row of keyTypeValueRows; let i = index; trackBy: trackByKeyTypeValue\" [formGroup]=\"row\"\n                  class=\"cqa-api-edit-step-key-type-value-row\">\n                  <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                    (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Key\">\n                  </cqa-custom-input>\n                  <cqa-dynamic-select [form]=\"row\" [config]=\"keyTypeValueTypeSelectConfig\"\n                    class=\"cqa-api-edit-step-key-type-value-type-select cqa-w-full\">\n                  </cqa-dynamic-select>\n                  <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                    (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Value\">\n                  </cqa-custom-input>\n                  <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-type-value-delete'\"\n                    [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyTypeValueRow(i)\">\n                    <svg class=\"cqa-api-edit-step-key-type-value-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                      <path\n                        d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                        fill=\"#F9BFBF\" />\n                    </svg>\n                  </cqa-button>\n                </div>\n                <div class=\"cqa-api-edit-step-key-type-value-add-wrap\">\n                  <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                    customClass=\"cqa-api-edit-step-key-type-value-add-btn\" (clicked)=\"addKeyTypeValueRow()\">\n                  </cqa-button>\n                </div>\n              </div>\n            </div>\n\n            <!-- Payload content (GraphQL): Query + Variables + Operation Name. Active only in GraphQL mode. -->\n            <div *ngIf=\"activePayloadTab === 'graphql' && activeApiType === 'graphql' && graphQLForm\"\n              class=\"cqa-api-edit-step-payload-graphql cqa-api-edit-step-graphql-tab cqa-flex cqa-flex-col cqa-gap-4\">\n              <!--\n                Query / Variables use the design-system `cqa-custom-textarea` so\n                styling, label, error rendering, and accessibility come from the\n                primitive. We bind via [value] / (valueChange) instead of\n                formControlName because cqa-custom-textarea isn't a CVA \u2014 calling\n                form.get('\u2026').setValue still fires the existing valueChanges\n                subscriptions (which clear inline errors and recompute the\n                multi-operation warning).\n              -->\n              <cqa-custom-textarea\n                label=\"Query\"\n                [required]=\"true\"\n                [value]=\"graphQLForm.get('query')?.value || ''\"\n                (valueChange)=\"graphQLForm.get('query')?.setValue($event)\"\n                placeholder=\"query GetX($id: ID!) {&#10;  x(id: $id) { name }&#10;}\"\n                ariaLabel=\"GraphQL query\"\n                [errors]=\"graphQLQueryError ? [graphQLQueryError] : []\"\n                [fullWidth]=\"true\"\n                [rows]=\"4\"\n                resize=\"vertical\"\n                size=\"md\">\n              </cqa-custom-textarea>\n              <div class=\"cqa-flex cqa-gap-1.5\">\n                <cqa-custom-textarea\n                  class=\"cqa-flex-1\"\n                  label=\"Variables (JSON)\"\n                  [value]=\"graphQLForm.get('variables')?.value || ''\"\n                  (valueChange)=\"graphQLForm.get('variables')?.setValue($event)\"\n                  placeholder='{ \"id\": \"abc\" }'\n                  ariaLabel=\"GraphQL variables\"\n                  [errors]=\"graphQLVariablesError ? [graphQLVariablesError] : []\"\n                  [fullWidth]=\"true\"\n                  [rows]=\"3\"\n                  resize=\"vertical\"\n                  size=\"md\">\n                </cqa-custom-textarea>\n                <!-- Operation Name: optional unless 2+ operations are declared. -->\n                <div class=\"cqa-api-edit-step-graphql-field cqa-flex cqa-flex-col cqa-gap-1.5\">\n                  <label class=\"cqa-api-edit-step-graphql-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-text-[#374151]\">Operation Name</label>\n                  <cqa-custom-input\n                    [value]=\"graphQLForm.get('operationName')?.value || ''\"\n                    (valueChange)=\"graphQLForm.get('operationName')?.setValue($event)\"\n                    [label]=\"''\" placeholder=\"e.g. GetBooking\" [fullWidth]=\"true\" size=\"md\"\n                    ariaLabel=\"GraphQL operation name\">\n                  </cqa-custom-input>\n                  <p *ngIf=\"graphQLOperationWarning\" class=\"cqa-text-[#B45309] cqa-text-[12px] cqa-mt-1\">\n                    {{ graphQLOperationWarning }}\n                  </p>\n                  <div class=\"cqa-flex cqa-flex-row cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-p-2\" style=\"border-radius: 8px; border: 1px solid #EDE9FE; background: #F5F3FF;\">\n                    <div>\n                      <mat-icon style=\"display:flex;font-size:14px;font-weight: 600;\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-text-[14px] cqa-text-[#7C3AED]\" >lightbulb</mat-icon>\n                    </div>\n                    <div class=\"cqa-text-[#7C3AED]\">\n                      Use <span style=\"background-color: white; color:black; border-radius: 4px; padding: 2px;\">var</span> in variables to bind from earlier steps.\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n\n        <!-- Advanced settings (step-level). Hidden while the GraphQL picker is open so it doesn't compete for focus with the operation list. -->\n        <div *ngIf=\"bodyView !== 'graphql-schema'\">\n          <button\n            type=\"button\"\n            class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n            (click)=\"advancedExpanded = !advancedExpanded\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"advancedExpanded\">\n              expand_more\n            </mat-icon>\n          </button>\n          <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n            <cqa-advanced-variables-form\n              [advancedVariables]=\"advancedSettingsVariables\"\n              [advancedVariableForm]=\"advancedVariablesForm\"\n              (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n              (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n            </cqa-advanced-variables-form>\n          </div>\n        </div>\n\n    </div>\n    <!-- Step 2: Variable Name: input, validation, Back / Next -->\n    <div *ngIf=\"currentStep === 2\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <div class=\"cqa-api-edit-step-variable-section\">\n          <div class=\"cqa-api-edit-step-variable-input-wrap\">\n            <cqa-custom-input [(value)]=\"variableName\" [label]=\"''\" placeholder=\"Variable Name\" [fullWidth]=\"true\"\n              size=\"md\" (valueChange)=\"onVariableNameChange()\" aria-label=\"Variable Name\">\n            </cqa-custom-input>\n          </div>\n          <p *ngIf=\"variableNameError\" class=\"cqa-api-edit-step-variable-error\" role=\"alert\">{{ variableNameError }}</p>\n        </div>\n    </div>\n    <!-- Step 3: Response Body / Status tabs -->\n    <div *ngIf=\"currentStep === 3\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n          <div class=\"cqa-api-edit-step-tabs\">\n            <cqa-button *ngFor=\"let tab of responseVerificationTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n              [customClass]=\"'cqa-api-edit-step-tab' + (activeResponseVerificationTab === tab.value ? ' cqa-api-edit-step-tab--active' : '')\"\n              (clicked)=\"setResponseVerificationTab(tab.value)\">\n            </cqa-button>\n          </div>\n\n          <!-- Response Body tab content: verification grid -->\n          <div *ngIf=\"activeResponseVerificationTab === 'response-body'\" class=\"cqa-api-edit-step-step3-content\">\n            <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n              <span></span>\n              <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n                customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addVerificationRow()\">\n              </cqa-button>\n            </div>\n            <div class=\"cqa-api-edit-step-verification\">\n              <div class=\"cqa-api-edit-step-verification-grid cqa-api-edit-step-verification-grid-header\">\n                <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n                <span class=\"cqa-api-edit-step-verification-label\">JSON Path</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Data Type</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n                <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of verificationRows; let i = index; trackBy: trackByVerification\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-verification-row\">\n                <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n                <cqa-custom-input [value]=\"row.get('jsonPath')?.value ?? ''\"\n                  (valueChange)=\"row.get('jsonPath')?.setValue($event)\" placeholder=\"Json Path\" [fullWidth]=\"true\"\n                  size=\"sm\" class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"JSON Path\">\n                </cqa-custom-input>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"verificationSelectConfig\"\n                  class=\"cqa-api-edit-step-verification-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"verificationDataTypeSelectConfig\"\n                  class=\"cqa-api-edit-step-verification-select cqa-w-full\"\n                  (selectionChange)=\"onVerificationDataTypeChange(row, $event)\">\n                </cqa-dynamic-select>\n                <!-- Expected Value: text for String/Array/Object, number for Number, dropdown for Boolean -->\n                <ng-container [ngSwitch]=\"row.get('dataType')?.value\">\n                  <cqa-dynamic-select *ngSwitchCase=\"'boolean'\" [form]=\"row\"\n                    [config]=\"verificationExpectedValueBooleanSelectConfig\"\n                    class=\"cqa-api-edit-step-verification-select cqa-api-edit-step-verification-expected-select cqa-w-full\">\n                  </cqa-dynamic-select>\n                  <cqa-custom-input *ngSwitchCase=\"'number'\" [value]=\"row.get('expectedValue')?.value ?? ''\"\n                    (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value (number)\"\n                    type=\"number\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-verification-input cqa-api-edit-step-verification-expected-number\"\n                    ariaLabel=\"Expected Value\">\n                  </cqa-custom-input>\n                  <cqa-custom-input *ngSwitchDefault [value]=\"row.get('expectedValue')?.value ?? ''\"\n                    (valueChange)=\"row.get('expectedValue')?.setValue($event)\"\n                    placeholder=\"Expected Value in String\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"Expected Value\">\n                  </cqa-custom-input>\n                </ng-container>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeVerificationRow(i)\">\n                  <svg class=\"cqa-api-edit-step-verification-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n            </div>\n          </div>\n\n          <!-- Status tab content: S.no, Verification dropdown, Expected Value, add/remove rows -->\n          <div *ngIf=\"activeResponseVerificationTab === 'status'\" class=\"cqa-api-edit-step-step3-content\">\n            <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n              <span></span>\n              <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n                customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addStatusVerificationRow()\">\n              </cqa-button>\n            </div>\n            <div class=\"cqa-api-edit-step-status-verification\">\n              <div class=\"cqa-api-edit-step-status-verification-header\">\n                <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n                <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of statusVerificationRows; let i = index; trackBy: trackByStatusVerification\"\n                [formGroup]=\"row\" class=\"cqa-api-edit-step-status-verification-row\">\n                <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"statusVerificationSelectConfig\"\n                  class=\"cqa-api-edit-step-status-verification-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-custom-input [value]=\"row.get('expectedValue')?.value ?? ''\"\n                  (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value\"\n                  type=\"number\" [fullWidth]=\"true\" size=\"sm\" class=\"cqa-api-edit-step-verification-input\"\n                  ariaLabel=\"Expected Value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeStatusVerificationRow(i)\">\n                  <svg class=\"cqa-api-edit-step-verification-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n            </div>\n          </div>\n        </div>\n    </div>\n  </div>\n\n  <!-- Response Preview. Hidden while the GraphQL picker is open \u2014 the user is in \"pick an operation\" mode, not \"view last response\" mode, so showing a stale preview below the picker is just noise. -->\n  <div *ngIf=\"bodyView !== 'graphql-schema'\" #responsePreviewRef class=\"cqa-api-edit-step-response\">\n    <h3 class=\"cqa-api-edit-step-response-title cqa-text-[14px] cqa-font-bold cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-mb-[12px] cqa-shrink-0\">Response Preview</h3>\n    <pre class=\"cqa-api-edit-step-response-content\">{{ responsePreview }}</pre>\n  </div>\n\n  <!-- Step actions: one row, full width. Step 1: Cancel + Next; Step 2: Back + Next; Step 3: Back + Create -->\n  <div *ngIf=\"bodyView !== 'graphql-schema'\" class=\"cqa-api-edit-step-actions\">\n    <ng-container [ngSwitch]=\"currentStep\">\n      <ng-container *ngSwitchCase=\"1\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n          customClass=\"cqa-api-edit-step-actions-btn-cancel\" (clicked)=\"onCancel()\">\n        </cqa-button>\n        <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n          customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n        </cqa-button>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"2\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n          customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n        </cqa-button>\n        <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n          customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n        </cqa-button>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"3\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n          customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n        </cqa-button>\n        <cqa-button *ngIf=\"!isCreatingStep\" type=\"button\" variant=\"filled\" btnSize=\"lg\" [text]=\"editMode ? 'Update' : 'Create'\"\n          customClass=\"cqa-api-edit-step-actions-btn-create\" (clicked)=\"onCreate()\">\n        </cqa-button>\n        <!-- Match cqa-button flex: actions row styles > cqa-button { flex: 1 1 0 } \u2014 loader div must grow same width as Create -->\n        <div *ngIf=\"isCreatingStep\" class=\"cqa-api-edit-step-actions-loader cqa-w-full cqa-min-h-[38px] cqa-rounded-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n          <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n            [inlineStyles]=\"'min-height: 38px; height: 38px; width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n            variant=\"info\" size=\"medium\"></cqa-badge>\n        </div>\n      </ng-container>\n    </ng-container>\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"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor", "fullWidth", "size"], outputs: ["valueChange"] }, { 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: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth", "compact"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { 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"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: GraphQLOperationPickerComponent, selector: "cqa-graphql-operation-picker", inputs: ["schemaSource", "operations", "introspected", "isLoading"], outputs: ["back", "operationSelected", "reIntrospect", "change", "preview"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+ApiEditStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ApiEditStepComponent, selector: "cqa-api-edit-step", inputs: { initialMethod: "initialMethod", initialEnvironment: "initialEnvironment", initialStep: "initialStep", initialUrl: "initialUrl", initialPayloadTab: "initialPayloadTab", initialPayloadType: "initialPayloadType", initialPayloadText: "initialPayloadText", initialSummary: "initialSummary", initialHeaders: "initialHeaders", initialResponsePreview: "initialResponsePreview", initialVariableName: "initialVariableName", initialResponseBodyVerifications: "initialResponseBodyVerifications", initialStatusVerifications: "initialStatusVerifications", initialActiveResponseVerificationTab: "initialActiveResponseVerificationTab", editMode: "editMode", isCreatingStep: "isCreatingStep", httpMethodOptions: "httpMethodOptions", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", urlOptions: "urlOptions", authTypeOptions: "authTypeOptions", initialAuthType: "initialAuthType", formatOptions: "formatOptions", initialFormat: "initialFormat", headerNameOptions: "headerNameOptions", verificationOptions: "verificationOptions", verificationDataTypeOptions: "verificationDataTypeOptions", statusVerificationOptions: "statusVerificationOptions", advancedSettingsVariables: "advancedSettingsVariables" }, outputs: { importCurl: "importCurl", importCurlCancel: "importCurlCancel", sendRequest: "sendRequest", back: "back", cancel: "cancel", next: "next", create: "create", headersChange: "headersChange", environmentChange: "environmentChange", environmentSearch: "environmentSearch", environmentLoadMore: "environmentLoadMore" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "payloadEditorWithLinesRef", first: true, predicate: ["payloadEditorWithLinesRef"], descendants: true }, { propertyName: "payloadTextareaRef", first: true, predicate: ["payloadTextareaRef"], descendants: true }, { propertyName: "responsePreviewRef", first: true, predicate: ["responsePreviewRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-api-edit-step-container cqa-bg-[#ffffff] cqa-flex cqa-flex-col cqa-w-full cqa-h-full cqa-p-[16px] cqa-gap-[12px] cqa-overflow-y-auto cqa-overflow-x-hidden cqa-box-border\">\n\n  <h2 class=\"cqa-api-edit-step-title cqa-font-inter cqa-text-[12px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal cqa-text-[#000000] cqa-m-0\">\n    {{ editMode ? 'Update API Test Step' : 'Create API Test Step' }}\n  </h2>\n\n  <div class=\"cqa-api-edit-step-indicator cqa-flex cqa-items-center cqa-gap-0 cqa-max-[767px]:cqa-flex-wrap cqa-max-[767px]:cqa-gap-2 cqa-max-[767px]:cqa-justify-start\"\n    [class.cqa-justify-start]=\"stepLabels.length === 1\"\n    [class.cqa-justify-between]=\"stepLabels.length !== 1\">\n    <ng-container *ngFor=\"let step of stepLabels; let i = index\">\n      <cqa-button type=\"button\" variant=\"text\"\n        customClass=\"cqa-api-edit-step-indicator-item cqa-api-edit-step-indicator-item--clickable cqa-flex cqa-items-center cqa-gap-[10px] cqa-cursor-pointer cqa-border-none cqa-p-0 cqa-font-inherit cqa-text-inherit cqa-text-left !cqa-bg-transparent\"\n        [attr.aria-label]=\"'Step ' + step.index + ': ' + step.label\" [attr.aria-pressed]=\"step.index === currentStep\"\n        (clicked)=\"setStep(step.index)\">\n        <span class=\"cqa-api-edit-step-indicator-circle cqa-w-8 cqa-h-8 cqa-rounded-full cqa-inline-flex cqa-items-center cqa-justify-center cqa-text-sm cqa-font-medium cqa-leading-none cqa-border-none cqa-shrink-0\"\n          [ngClass]=\"step.index === currentStep ? 'cqa-bg-[#4F46E5] cqa-text-white' : 'cqa-bg-[#E0E0E0] cqa-text-[#666666]'\">\n          {{ step.index }}\n        </span>\n        <span class=\"cqa-api-edit-step-indicator-label cqa-text-sm cqa-leading-[18px] cqa-font-normal cqa-max-[767px]:cqa-text-xs\"\n          [ngClass]=\"step.index === currentStep ? 'cqa-text-[#4F46E5]' : 'cqa-text-[#666666]'\">\n          {{ step.label }}\n        </span>\n        <div *ngIf=\"i < stepLabels.length - 1\" class=\"cqa-api-edit-step-indicator-line cqa-w-[96px] cqa-h-[2px] cqa-bg-[#E0E0E0] cqa-my-0 cqa-mx-[6px] cqa-shrink-0 cqa-self-center cqa-max-[767px]:cqa-w-[24px] cqa-max-[767px]:cqa-mx-1\" aria-hidden=\"true\"></div>\n      </cqa-button>\n    </ng-container>\n  </div>\n\n  <!-- Step content viewport: only the active step body is shown (*ngIf) -->\n  <div class=\"cqa-api-edit-step-viewport cqa-w-full\">\n    <!-- Step 1: Environment, request, body, response -->\n    <div *ngIf=\"currentStep === 1\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <!-- Summary field: label on top, input below (above Environment) -->\n        <div class=\"cqa-api-edit-step-summary-row cqa-flex cqa-flex-col cqa-gap-1.5 cqa-items-stretch\">\n          <label class=\"cqa-api-edit-step-summary-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">Summary</label>\n          <cqa-custom-input [(value)]=\"summary\"\n            [label]=\"''\" placeholder=\"Enter Request summary\" [fullWidth]=\"true\" size=\"md\"\n            ariaLabel=\"Summary\">\n          </cqa-custom-input>\n        </div>\n        <!-- Environment row: label on top, select below (aligned right on desktop) -->\n        <div class=\"cqa-api-edit-step-environment-row cqa-flex cqa-flex-col cqa-gap-1.5 cqa-items-end cqa-max-[767px]:cqa-items-stretch\">\n          <span class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-max-[767px]:cqa-items-stretch\">\n          <label class=\"cqa-api-edit-step-environment-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">Environments</label>\n          <cqa-dynamic-select *ngIf=\"environmentForm\"\n            [form]=\"environmentForm\"\n            [config]=\"environmentSelectConfig\"\n            class=\"cqa-api-edit-step-environment-select cqa-shrink-0 cqa-w-auto cqa-min-w-[315px] cqa-max-w-[315px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full [&_.mat-form-field-wrapper]:cqa-pb-0\"\n            aria-label=\"Environment\"\n            (selectionChange)=\"onEnvironmentSelectionChange($event)\">\n          </cqa-dynamic-select>\n        </span>\n        </div>\n\n        <!-- Request row: method, URL, buttons -->\n        <div class=\"cqa-api-edit-step-request-row cqa-flex cqa-items-start cqa-gap-3 cqa-flex-wrap cqa-max-[767px]:cqa-flex-col cqa-max-[767px]:cqa-items-stretch cqa-max-[767px]:cqa-gap-2.5\">\n          <cqa-dynamic-select *ngIf=\"methodForm\" [form]=\"methodForm\" [config]=\"methodSelectConfig\"\n            class=\"cqa-api-edit-step-method-select cqa-shrink-0 cqa-w-auto cqa-min-w-[152px] cqa-max-w-[152px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full\" aria-label=\"HTTP method\"\n            (selectionChange)=\"onMethodSelectionChange($event)\">\n          </cqa-dynamic-select>\n          <div class=\"cqa-api-edit-step-url-wrap cqa-flex-1 cqa-min-w-[200px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-w-full\">\n            <cqa-autocomplete\n              [value]=\"url\"\n              (valueChange)=\"url = $event\"\n              [options]=\"urlOptions\"\n              [placeholder]=\"urlPlaceholder\"\n              ariaLabel=\"Enter URL or select Parameter\"\n              [fullWidth]=\"true\"\n              (optionSelect)=\"onUrlOptionSelect($event)\">\n            </cqa-autocomplete>\n            <div *ngIf=\"urlError\" class=\"cqa-text-red-600 cqa-text-sm cqa-mt-1\">\n              {{ urlError }}\n            </div>\n          </div>\n          <div class=\"cqa-api-edit-step-import-curl-trigger cqa-contents cqa-max-[767px]:cqa-w-full cqa-max-[767px]:!cqa-flex\" (click)=\"openImportCurlPanel()\">\n            <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Import API cURL\"\n              customClass=\"cqa-api-edit-step-btn-outline !cqa-bg-white !cqa-border !cqa-border-solid !cqa-border-[#6B7280] cqa-text-[#414146] cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal hover:!cqa-bg-[#F9FAFB] hover:!cqa-text-[#414146] cqa-max-[767px]:cqa-w-full cqa-mt-1\">\n            </cqa-button>\n          </div>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" text=\"Send Request\" (clicked)=\"onSendRequest()\"\n            [disabled]=\"!isUrlValid\"\n            customClass=\"cqa-api-edit-step-btn-primary cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal !cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] !cqa-border-none cqa-py-2.5 cqa-px-6 cqa-gap-2 cqa-rounded-lg cqa-min-h-[37px] cqa-box-border hover:!cqa-bg-[#1B1FEB] cqa-max-[767px]:cqa-w-full cqa-mt-1\"\n            [ngClass]=\"{'!cqa-opacity-50 !cqa-cursor-not-allowed': !isUrlValid}\">\n          </cqa-button>\n        </div>\n\n\n\n        <!-- Body content: header section (default) OR import cURL section -->\n        <ng-container *ngIf=\"bodyView === 'import-curl'\">\n          <div class=\"cqa-api-edit-step-import-curl-panel cqa-flex cqa-flex-col cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-shadow-[0_1px_3px_rgba(0,0,0,0.08)] cqa-overflow-hidden\">\n            <div class=\"cqa-api-edit-step-import-curl-header cqa-flex cqa-items-center cqa-justify-between cqa-py-3 cqa-px-5 cqa-border-b cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-[#F9FAFB] cqa-rounded-t-lg cqa-max-[767px]:cqa-px-4\">\n              <h3 class=\"cqa-api-edit-step-import-curl-title cqa-m-0 cqa-text-xs cqa-font-bold cqa-leading-[18px] cqa-text-[#374151]\">Import API cURL</h3>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-separator cqa-h-px cqa-bg-[#E2E8F0] cqa-my-0 cqa-mx-5\"></div>\n            <div class=\"cqa-api-edit-step-import-curl-note cqa-px-5 cqa-pt-3\">\n              <cqa-badge label=\"cURL is supported in Bash format only.\" icon=\"info\" variant=\"info\" size=\"small\" [fullWidth]=\"true\"></cqa-badge>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-body\">\n              <cqa-custom-textarea [value]=\"importCurlControl.value\"\n                (valueChange)=\"importCurlControl.setValue($event)\"\n                placeholder=\"Paste your cURL command here (e.g., curl -X POST https://api.example.com/users)\"\n                [fullWidth]=\"true\" [rows]=\"8\" resize=\"vertical\" size=\"md\"\n                class=\"cqa-api-edit-step-import-curl-textarea\">\n              </cqa-custom-textarea>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-footer\">\n              <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n                customClass=\"cqa-api-edit-step-import-curl-btn-cancel\" (clicked)=\"onCancelImportCurl()\"></cqa-button>\n              <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Import\"\n                customClass=\"cqa-api-edit-step-import-curl-btn-import\" (clicked)=\"onImportCurlConfirm()\"></cqa-button>\n            </div>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"bodyView === 'headers'\">\n          <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n            <div class=\"cqa-api-edit-step-tabs\">\n              <cqa-button *ngFor=\"let tab of payloadTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n                [customClass]=\"'cqa-api-edit-step-tab' + (activePayloadTab === tab.value ? ' cqa-api-edit-step-tab--active' : '') + (isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params') ? ' cqa-api-edit-step-tab--disabled' : '')\"\n                [disabled]=\"isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params')\"\n                (clicked)=\"setPayloadTab(tab.value)\">\n              </cqa-button>\n            </div>\n\n            <!-- Payload content (Authorization) -->\n            <div *ngIf=\"activePayloadTab === 'authorization'\" class=\"cqa-api-edit-step-payload\"\n              [attr.style]=\"'padding: 20px; min-height: 200px;'\">\n              <div [attr.style]=\"'display: flex; flex-direction: column; gap: 20px;'\">\n                <div [attr.style]=\"'display: flex; flex-direction: column; gap: 8px; width: fit-content;'\">\n                  <span [attr.style]=\"'font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #6B7280; text-transform: uppercase; line-height: 1.25;'\">AUTH TYPE</span>\n                  <cqa-dynamic-select *ngIf=\"authTypeForm\" [form]=\"authTypeForm\" [config]=\"authTypeSelectConfig\"\n                    class=\"cqa-api-edit-step-auth-type-select\" aria-label=\"Auth type\"\n                    [attr.style]=\"'min-width: 160px;'\">\n                  </cqa-dynamic-select>\n                </div>\n                <!-- No Auth: centered message -->\n                <div *ngIf=\"selectedAuthType === 'no-auth'\"\n                  [attr.style]=\"'flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; text-align: center; border: 1px solid #E5E7EB; border-radius: 8px; padding-top: 16px; padding-bottom: 16px;'\">\n                  <div aria-hidden=\"true\"\n                    [attr.style]=\"'width: 48px; height: 48px; border-radius: 10px; background: #F3F4F6; display: flex; align-items: center; justify-content: center; flex-shrink: 0;'\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n                      <rect x=\"5\" y=\"11\" width=\"14\" height=\"2\" rx=\"1\" fill=\"#9CA3AF\"/>\n                    </svg>\n                  </div>\n                  <span [attr.style]=\"'font-size: 16px; font-weight: 600; color: #374151; line-height: 1.25;'\">No Auth</span>\n                  <div [attr.style]=\"'display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;'\">\n                    <span [attr.style]=\"'font-size: 14px; font-weight: 400; color: #9CA3AF; line-height: 1.4;'\">This request does not use any authorization.</span>\n                    <span role=\"img\" aria-label=\"More information\" title=\"This request does not use any authorization.\"\n                      [attr.style]=\"'display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: #9CA3AF; flex-shrink: 0;'\">\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n                        <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" fill=\"none\"/>\n                        <path d=\"M8 7v4M8 5v.5\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                      </svg>\n                    </span>\n                  </div>\n                </div>\n                <!-- Bearer Token: Token label + textarea -->\n                <div *ngIf=\"selectedAuthType === 'bearer'\"\n                  [attr.style]=\"'flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0;'\">\n                  <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Token</span>\n                  <cqa-custom-textarea [(value)]=\"bearerToken\"\n                    placeholder=\"Enter bearer token\"\n                    [fullWidth]=\"true\" [rows]=\"6\" resize=\"vertical\" size=\"md\"\n                    class=\"cqa-api-edit-step-auth-token-textarea\" ariaLabel=\"Bearer token\">\n                  </cqa-custom-textarea>\n                </div>\n                <!-- OAuth 2.0: Grant Type, Access Token URL, Client ID, Client Secret, Scope, Client Authentication -->\n                <div *ngIf=\"selectedAuthType === 'oauth2' && oauth2Form\"\n                  class=\"cqa-api-edit-step-oauth2-grid\"\n                  [attr.style]=\"'display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; width: 100%;'\">\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Grant Type</span>\n                    <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2GrantTypeSelectConfig\"\n                      class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"OAuth grant type\"\n                      [attr.style]=\"'min-width: 0; width: 100%;'\">\n                    </cqa-dynamic-select>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth grant type</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Access Token URL</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('accessTokenUrl')?.value\"\n                      (valueChange)=\"oauth2Form.get('accessTokenUrl')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter OAuth token endpoint\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Access Token URL\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth token endpoint</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client ID</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('clientId')?.value\"\n                      (valueChange)=\"oauth2Form.get('clientId')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter OAuth client identifier\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Client ID\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client identifier</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Secret</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('clientSecret')?.value\"\n                      (valueChange)=\"oauth2Form.get('clientSecret')?.setValue($event)\"\n                      type=\"password\" [label]=\"''\" placeholder=\"Enter OAuth client secret\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Client Secret\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client secret</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Scope</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('scope')?.value\"\n                      (valueChange)=\"oauth2Form.get('scope')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter space-separated scopes\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Scope\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Space-separated scopes</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Authentication</span>\n                    <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2ClientAuthSelectConfig\"\n                      class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"Client authentication method\"\n                      [attr.style]=\"'min-width: 0; width: 100%;'\">\n                    </cqa-dynamic-select>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Client authentication method</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Payload content (Headers) -->\n            <div *ngIf=\"activePayloadTab === 'headers'\" class=\"cqa-api-edit-step-payload\">\n              <div class=\"cqa-api-edit-step-headers-grid\">\n                <span class=\"cqa-api-edit-step-headers-label\">Header Name</span>\n                <span class=\"cqa-api-edit-step-headers-label\">Header Value</span>\n                <span class=\"cqa-api-edit-step-headers-label cqa-api-edit-step-headers-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of headerRows; let i = index; trackBy: trackByHeader\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-header-row\">\n                <cqa-dynamic-select [form]=\"row\" [config]=\"headerNameSelectConfig\"\n                  (addCustomValue)=\"onHeaderNameAddCustomValue($event, row)\"\n                  class=\"cqa-api-edit-step-header-type-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                  (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-header-value-input\" ariaLabel=\"Header value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-header-delete'\"\n                  [tooltip]=\"'Remove header'\" (clicked)=\"removeHeader(i)\">\n                  <svg class=\"cqa-api-edit-step-header-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n              <div class=\"cqa-api-edit-step-add-header-wrap\">\n                <cqa-button type=\"button\" variant=\"text\" text=\"+ Add Header\"\n                  [customClass]=\"'cqa-api-edit-step-add-header-link'\" (clicked)=\"addHeader()\">\n                </cqa-button>\n              </div>\n            </div>\n\n            <!-- Payload content (Params): Key\u2013Value table with add/delete rows -->\n            <div *ngIf=\"activePayloadTab === 'params'\" class=\"cqa-api-edit-step-payload\">\n              <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n                <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n                <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n                <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of paramsRows; let i = index; trackBy: trackByParams\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-key-value-row\">\n                <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                  (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n                </cqa-custom-input>\n                <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                  (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeParamsRow(i)\">\n                  <svg class=\"cqa-api-edit-step-key-value-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n              <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n                <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                  customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addParamsRow()\">\n                </cqa-button>\n              </div>\n            </div>\n\n            <!-- Payload content (Body only): type, format, text area, Back/Next -->\n            <div *ngIf=\"activePayloadTab === 'body'\"\n              class=\"cqa-api-edit-step-payload cqa-api-edit-step-payload-editor\">\n              <div class=\"cqa-api-edit-step-payload-type-row\">\n                <span class=\"cqa-api-edit-step-payload-type-label\">Type</span>\n                <div class=\"cqa-api-edit-step-payload-type-radios\">\n                  <cqa-segment-control [value]=\"payloadType\" [segments]=\"payloadTypeSegments\"\n                    (valueChange)=\"onPayloadTypeChange($event)\"\n                    class=\"cqa-api-edit-step-payload-type-segment\">\n                  </cqa-segment-control>\n                </div>\n                <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-format-wrap\">\n                  <span class=\"cqa-api-edit-step-payload-format-label\">Format:</span>\n                  <cqa-dynamic-select *ngIf=\"payloadFormatForm\" [form]=\"payloadFormatForm\"\n                    [config]=\"payloadFormatSelectConfig\" class=\"cqa-api-edit-step-payload-format-select\"\n                    aria-label=\"Format\">\n                  </cqa-dynamic-select>\n                </div>\n              </div>\n              <!-- Raw: text area with line numbers (Postman-style payload body) -->\n              <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-body\" #payloadEditorWithLinesRef>\n                <div class=\"cqa-api-edit-step-payload-editor-with-lines\">\n                  <div class=\"cqa-api-edit-step-payload-line-numbers\" aria-hidden=\"true\">\n                    <span *ngFor=\"let n of payloadLineNumbers\" class=\"cqa-api-edit-step-payload-line-num\">\n                      <span *ngIf=\"payloadJsonError && payloadJsonError.line === n\"\n                        class=\"cqa-api-edit-step-payload-line-error-icon\" [title]=\"payloadJsonErrorTooltip\"\n                        aria-label=\"Parse error on this line\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n                          <circle cx=\"7\" cy=\"7\" r=\"6\" fill=\"#EF4444\"/>\n                          <path d=\"M4 4l6 6M10 4l-6 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                        </svg>\n                      </span>\n                      <span class=\"cqa-api-edit-step-payload-line-num-text\">{{ n }}</span>\n                    </span>\n                  </div>\n                  <div class=\"cqa-api-edit-step-payload-textarea-cell\">\n                    <div class=\"cqa-api-edit-step-payload-textarea cqa-w-full cqa-flex cqa-flex-col cqa-min-h-0\"\n                      [ngClass]=\"{'cqa-api-edit-step-payload-textarea--error': payloadJsonError}\">\n                      <textarea #payloadTextareaRef\n                        class=\"cqa-api-edit-step-payload-textarea-input cqa-w-full cqa-outline-none cqa-box-border\"\n                        [ngClass]=\"{'cqa-api-edit-step-payload-textarea-input--error': payloadJsonError}\"\n                        [value]=\"payloadText\"\n                        placeholder=\"\"\n                        [attr.aria-label]=\"'Payload'\"\n                        [attr.aria-invalid]=\"!!payloadJsonError\"\n                        (input)=\"onPayloadInput($event)\"\n                        (keydown)=\"onPayloadKeydown($event)\">\n                      </textarea>\n                    </div>\n                  </div>\n                </div>\n                <p *ngIf=\"payloadJsonError\" class=\"cqa-api-edit-step-payload-json-error-msg\">\n                  Invalid JSON format. Please check your syntax.\n                </p>\n              </div>\n\n              <!-- x-www-form-urlencoded: Key\u2013Value rows, add/remove dynamically -->\n              <div *ngIf=\"payloadType === 'x-www-form-urlencoded'\" class=\"cqa-api-edit-step-key-value\">\n                <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n                  <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n                  <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n                  <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n                    aria-hidden=\"true\"></span>\n                </div>\n                <div *ngFor=\"let row of keyValueRows; let i = index; trackBy: trackByKeyValue\" [formGroup]=\"row\"\n                  class=\"cqa-api-edit-step-key-value-row\">\n                  <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                    (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n                  </cqa-custom-input>\n                  <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                    (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n                  </cqa-custom-input>\n                  <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n                    [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyValueRow(i)\">\n                    <svg class=\"cqa-api-edit-step-key-value-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                      <path\n                        d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                        fill=\"#F9BFBF\" />\n                    </svg>\n                  </cqa-button>\n                </div>\n                <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n                  <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                    customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addKeyValueRow()\">\n                  </cqa-button>\n                </div>\n              </div>\n\n              <!-- Form Data: Key\u2013Type\u2013Value rows; Type is a dropdown (Text/File), add/remove dynamically -->\n              <div *ngIf=\"payloadType === 'form-data'\" class=\"cqa-api-edit-step-key-type-value\">\n                <div class=\"cqa-api-edit-step-key-type-value-header\">\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Key</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Type</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Value</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label cqa-api-edit-step-key-type-value-label--empty\"\n                    aria-hidden=\"true\"></span>\n                </div>\n                <div *ngFor=\"let row of keyTypeValueRows; let i = index; trackBy: trackByKeyTypeValue\" [formGroup]=\"row\"\n                  class=\"cqa-api-edit-step-key-type-value-row\">\n                  <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                    (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Key\">\n                  </cqa-custom-input>\n                  <cqa-dynamic-select [form]=\"row\" [config]=\"keyTypeValueTypeSelectConfig\"\n                    class=\"cqa-api-edit-step-key-type-value-type-select cqa-w-full\">\n                  </cqa-dynamic-select>\n                  <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                    (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Value\">\n                  </cqa-custom-input>\n                  <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-type-value-delete'\"\n                    [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyTypeValueRow(i)\">\n                    <svg class=\"cqa-api-edit-step-key-type-value-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                      <path\n                        d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                        fill=\"#F9BFBF\" />\n                    </svg>\n                  </cqa-button>\n                </div>\n                <div class=\"cqa-api-edit-step-key-type-value-add-wrap\">\n                  <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                    customClass=\"cqa-api-edit-step-key-type-value-add-btn\" (clicked)=\"addKeyTypeValueRow()\">\n                  </cqa-button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n\n        <!-- Advanced settings (step-level) -->\n        <div class=\"cqa-mt-4\">\n          <button\n            type=\"button\"\n            class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n            (click)=\"advancedExpanded = !advancedExpanded\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"advancedExpanded\">\n              expand_more\n            </mat-icon>\n          </button>\n          <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n            <cqa-advanced-variables-form\n              [advancedVariables]=\"advancedSettingsVariables\"\n              [advancedVariableForm]=\"advancedVariablesForm\"\n              (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n              (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n            </cqa-advanced-variables-form>\n          </div>\n        </div>\n\n    </div>\n    <!-- Step 2: Variable Name: input, validation, Back / Next -->\n    <div *ngIf=\"currentStep === 2\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <div class=\"cqa-api-edit-step-variable-section\">\n          <div class=\"cqa-api-edit-step-variable-input-wrap\">\n            <cqa-custom-input [(value)]=\"variableName\" [label]=\"''\" placeholder=\"Variable Name\" [fullWidth]=\"true\"\n              size=\"md\" (valueChange)=\"onVariableNameChange()\" aria-label=\"Variable Name\">\n            </cqa-custom-input>\n          </div>\n          <p *ngIf=\"variableNameError\" class=\"cqa-api-edit-step-variable-error\" role=\"alert\">{{ variableNameError }}</p>\n        </div>\n    </div>\n    <!-- Step 3: Response Body / Status tabs -->\n    <div *ngIf=\"currentStep === 3\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n          <div class=\"cqa-api-edit-step-tabs\">\n            <cqa-button *ngFor=\"let tab of responseVerificationTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n              [customClass]=\"'cqa-api-edit-step-tab' + (activeResponseVerificationTab === tab.value ? ' cqa-api-edit-step-tab--active' : '')\"\n              (clicked)=\"setResponseVerificationTab(tab.value)\">\n            </cqa-button>\n          </div>\n\n          <!-- Response Body tab content: verification grid -->\n          <div *ngIf=\"activeResponseVerificationTab === 'response-body'\" class=\"cqa-api-edit-step-step3-content\">\n            <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n              <span></span>\n              <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n                customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addVerificationRow()\">\n              </cqa-button>\n            </div>\n            <div class=\"cqa-api-edit-step-verification\">\n              <div class=\"cqa-api-edit-step-verification-grid cqa-api-edit-step-verification-grid-header\">\n                <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n                <span class=\"cqa-api-edit-step-verification-label\">JSON Path</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Data Type</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n                <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of verificationRows; let i = index; trackBy: trackByVerification\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-verification-row\">\n                <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n                <cqa-custom-input [value]=\"row.get('jsonPath')?.value ?? ''\"\n                  (valueChange)=\"row.get('jsonPath')?.setValue($event)\" placeholder=\"Json Path\" [fullWidth]=\"true\"\n                  size=\"sm\" class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"JSON Path\">\n                </cqa-custom-input>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"verificationSelectConfig\"\n                  class=\"cqa-api-edit-step-verification-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"verificationDataTypeSelectConfig\"\n                  class=\"cqa-api-edit-step-verification-select cqa-w-full\"\n                  (selectionChange)=\"onVerificationDataTypeChange(row, $event)\">\n                </cqa-dynamic-select>\n                <!-- Expected Value: text for String/Array/Object, number for Number, dropdown for Boolean -->\n                <ng-container [ngSwitch]=\"row.get('dataType')?.value\">\n                  <cqa-dynamic-select *ngSwitchCase=\"'boolean'\" [form]=\"row\"\n                    [config]=\"verificationExpectedValueBooleanSelectConfig\"\n                    class=\"cqa-api-edit-step-verification-select cqa-api-edit-step-verification-expected-select cqa-w-full\">\n                  </cqa-dynamic-select>\n                  <cqa-custom-input *ngSwitchCase=\"'number'\" [value]=\"row.get('expectedValue')?.value ?? ''\"\n                    (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value (number)\"\n                    type=\"number\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-verification-input cqa-api-edit-step-verification-expected-number\"\n                    ariaLabel=\"Expected Value\">\n                  </cqa-custom-input>\n                  <cqa-custom-input *ngSwitchDefault [value]=\"row.get('expectedValue')?.value ?? ''\"\n                    (valueChange)=\"row.get('expectedValue')?.setValue($event)\"\n                    placeholder=\"Expected Value in String\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"Expected Value\">\n                  </cqa-custom-input>\n                </ng-container>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeVerificationRow(i)\">\n                  <svg class=\"cqa-api-edit-step-verification-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n            </div>\n          </div>\n\n          <!-- Status tab content: S.no, Verification dropdown, Expected Value, add/remove rows -->\n          <div *ngIf=\"activeResponseVerificationTab === 'status'\" class=\"cqa-api-edit-step-step3-content\">\n            <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n              <span></span>\n              <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n                customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addStatusVerificationRow()\">\n              </cqa-button>\n            </div>\n            <div class=\"cqa-api-edit-step-status-verification\">\n              <div class=\"cqa-api-edit-step-status-verification-header\">\n                <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n                <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of statusVerificationRows; let i = index; trackBy: trackByStatusVerification\"\n                [formGroup]=\"row\" class=\"cqa-api-edit-step-status-verification-row\">\n                <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"statusVerificationSelectConfig\"\n                  class=\"cqa-api-edit-step-status-verification-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-custom-input [value]=\"row.get('expectedValue')?.value ?? ''\"\n                  (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value\"\n                  type=\"number\" [fullWidth]=\"true\" size=\"sm\" class=\"cqa-api-edit-step-verification-input\"\n                  ariaLabel=\"Expected Value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeStatusVerificationRow(i)\">\n                  <svg class=\"cqa-api-edit-step-verification-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n            </div>\n          </div>\n        </div>\n    </div>\n  </div>\n\n  <!-- Response Preview -->\n  <div #responsePreviewRef class=\"cqa-api-edit-step-response\">\n    <h3 class=\"cqa-api-edit-step-response-title cqa-text-[14px] cqa-font-bold cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-mb-[12px] cqa-shrink-0\">Response Preview</h3>\n    <pre class=\"cqa-api-edit-step-response-content\">{{ responsePreview }}</pre>\n  </div>\n\n  <!-- Step actions: one row, full width. Step 1: Cancel + Next; Step 2: Back + Next; Step 3: Back + Create -->\n  <div class=\"cqa-api-edit-step-actions\">\n    <ng-container [ngSwitch]=\"currentStep\">\n      <ng-container *ngSwitchCase=\"1\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n          customClass=\"cqa-api-edit-step-actions-btn-cancel\" (clicked)=\"onCancel()\">\n        </cqa-button>\n        <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n          customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n        </cqa-button>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"2\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n          customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n        </cqa-button>\n        <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n          customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n        </cqa-button>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"3\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n          customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n        </cqa-button>\n        <cqa-button *ngIf=\"!isCreatingStep\" type=\"button\" variant=\"filled\" btnSize=\"lg\" [text]=\"editMode ? 'Update' : 'Create'\"\n          customClass=\"cqa-api-edit-step-actions-btn-create\" (clicked)=\"onCreate()\">\n        </cqa-button>\n        <!-- Match cqa-button flex: actions row styles > cqa-button { flex: 1 1 0 } \u2014 loader div must grow same width as Create -->\n        <div *ngIf=\"isCreatingStep\" class=\"cqa-api-edit-step-actions-loader cqa-w-full cqa-min-h-[38px] cqa-rounded-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n          <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n            [inlineStyles]=\"'min-height: 38px; height: 38px; width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n            variant=\"info\" size=\"medium\"></cqa-badge>\n        </div>\n      </ng-container>\n    </ng-container>\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"] }, { 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"] }, { type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth", "compact"], outputs: ["valueChange", "optionSelect", "cleared"] }, { 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"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor", "fullWidth", "size"], outputs: ["valueChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ApiEditStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-api-edit-step', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.Default, template: "<div class=\"cqa-api-edit-step-container cqa-bg-[#ffffff] cqa-flex cqa-flex-col cqa-w-full cqa-h-full cqa-p-[16px] cqa-gap-[12px] cqa-overflow-y-auto cqa-overflow-x-hidden cqa-box-border\">\n\n  <h2 class=\"cqa-api-edit-step-title cqa-font-inter cqa-text-[12px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal cqa-text-[#000000] cqa-m-0\">\n    {{ editMode ? 'Update API Test Step' : 'Create API Test Step' }}\n  </h2>\n\n  <div class=\"cqa-api-edit-step-indicator cqa-flex cqa-items-center cqa-gap-0 cqa-max-[767px]:cqa-flex-wrap cqa-max-[767px]:cqa-gap-2 cqa-max-[767px]:cqa-justify-start\"\n    [class.cqa-justify-start]=\"stepLabels.length === 1\"\n    [class.cqa-justify-between]=\"stepLabels.length !== 1\">\n    <ng-container *ngFor=\"let step of stepLabels; let i = index\">\n      <cqa-button type=\"button\" variant=\"text\"\n        customClass=\"cqa-api-edit-step-indicator-item cqa-api-edit-step-indicator-item--clickable cqa-flex cqa-items-center cqa-gap-[10px] cqa-cursor-pointer cqa-border-none cqa-p-0 cqa-font-inherit cqa-text-inherit cqa-text-left !cqa-bg-transparent\"\n        [attr.aria-label]=\"'Step ' + step.index + ': ' + step.label\" [attr.aria-pressed]=\"step.index === currentStep\"\n        (clicked)=\"setStep(step.index)\">\n        <span class=\"cqa-api-edit-step-indicator-circle cqa-w-8 cqa-h-8 cqa-rounded-full cqa-inline-flex cqa-items-center cqa-justify-center cqa-text-sm cqa-font-medium cqa-leading-none cqa-border-none cqa-shrink-0\"\n          [ngClass]=\"step.index === currentStep ? 'cqa-bg-[#4F46E5] cqa-text-white' : 'cqa-bg-[#E0E0E0] cqa-text-[#666666]'\">\n          {{ step.index }}\n        </span>\n        <span class=\"cqa-api-edit-step-indicator-label cqa-text-sm cqa-leading-[18px] cqa-font-normal cqa-max-[767px]:cqa-text-xs\"\n          [ngClass]=\"step.index === currentStep ? 'cqa-text-[#4F46E5]' : 'cqa-text-[#666666]'\">\n          {{ step.label }}\n        </span>\n        <div *ngIf=\"i < stepLabels.length - 1\" class=\"cqa-api-edit-step-indicator-line cqa-w-[96px] cqa-h-[2px] cqa-bg-[#E0E0E0] cqa-my-0 cqa-mx-[6px] cqa-shrink-0 cqa-self-center cqa-max-[767px]:cqa-w-[24px] cqa-max-[767px]:cqa-mx-1\" aria-hidden=\"true\"></div>\n      </cqa-button>\n    </ng-container>\n  </div>\n\n  <!-- Step content viewport: only the active step body is shown (*ngIf) -->\n  <div class=\"cqa-api-edit-step-viewport cqa-w-full\">\n    <!-- Step 1: Environment, request, body, response -->\n    <div *ngIf=\"currentStep === 1\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <!-- API Type segment: REST API (default) | GraphQL | SOAP/WebSocket/gRPC (disabled) -->\n        <div class=\"cqa-api-edit-step-api-type-row cqa-flex cqa-flex-col cqa-gap-1.5\">\n          <label class=\"cqa-api-edit-step-api-type-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">API Type</label>\n          <cqa-segment-control\n            [value]=\"activeApiType\"\n            [segments]=\"apiTypeSegments\"\n            (valueChange)=\"onApiTypeChange($event)\"\n            class=\"cqa-api-edit-step-api-type-segment\">\n          </cqa-segment-control>\n        </div>\n\n        <!-- Summary field: label on top, input below (above Environment) -->\n        <div class=\"cqa-api-edit-step-summary-row cqa-flex cqa-flex-col cqa-gap-1.5 cqa-items-stretch\">\n          <label class=\"cqa-api-edit-step-summary-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">Summary</label>\n          <cqa-custom-input [(value)]=\"summary\"\n            [label]=\"''\" placeholder=\"Enter Request summary\" [fullWidth]=\"true\" size=\"md\"\n            ariaLabel=\"Summary\">\n          </cqa-custom-input>\n        </div>\n        <!-- Environment row: label on top, select below (aligned right on desktop) -->\n        <div class=\"cqa-api-edit-step-environment-row cqa-flex cqa-justify-end cqa-gap-1.5 cqa-items-end cqa-max-[767px]:cqa-items-stretch\">\n          <div *ngIf=\"activeApiType === 'graphql'\" class=\"cqa-api-edit-step-url-wrap cqa-flex-1 cqa-min-w-[200px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-w-full\">\n            <cqa-autocomplete\n              [value]=\"url\"\n              (valueChange)=\"url = $event\"\n              [options]=\"urlOptions\"\n              [placeholder]=\"urlPlaceholder\"\n              ariaLabel=\"Enter URL or select Parameter\"\n              [fullWidth]=\"true\"\n              (optionSelect)=\"onUrlOptionSelect($event)\">\n            </cqa-autocomplete>\n            <div *ngIf=\"urlError\" class=\"cqa-text-red-600 cqa-text-sm cqa-mt-1\">\n              {{ urlError }}\n            </div>\n          </div>\n\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-max-[767px]:cqa-items-stretch\">\n            <label class=\"cqa-api-edit-step-environment-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">Environments</label>\n            <cqa-dynamic-select *ngIf=\"environmentForm\"\n              [form]=\"environmentForm\"\n              [config]=\"environmentSelectConfig\"\n              class=\"cqa-api-edit-step-environment-select cqa-shrink-0 cqa-w-auto cqa-min-w-[315px] cqa-max-w-[315px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full [&_.mat-form-field-wrapper]:cqa-pb-0\"\n              aria-label=\"Environment\"\n              (selectionChange)=\"onEnvironmentSelectionChange($event)\">\n            </cqa-dynamic-select>\n          </div>\n        </div>\n\n        <!-- Request row: method, URL, buttons -->\n        <div [ngClass]=\"{'cqa-items-start': activeApiType === 'rest', 'cqa-justify-between': activeApiType === 'graphql'}\" class=\"cqa-api-edit-step-request-row cqa-flex cqa-gap-3 cqa-flex-wrap cqa-max-[767px]:cqa-flex-col cqa-max-[767px]:cqa-items-stretch cqa-max-[767px]:cqa-gap-2.5\">\n          <!-- REST mode shows the HTTP Method dropdown. GraphQL pins method to POST internally so the dropdown is hidden. -->\n          <cqa-dynamic-select *ngIf=\"methodForm && activeApiType === 'rest'\" [form]=\"methodForm\" [config]=\"methodSelectConfig\"\n            class=\"cqa-api-edit-step-method-select cqa-shrink-0 cqa-w-auto cqa-min-w-[152px] cqa-max-w-[152px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full\" aria-label=\"HTTP method\"\n            (selectionChange)=\"onMethodSelectionChange($event)\">\n          </cqa-dynamic-select>\n          <div *ngIf=\"activeApiType === 'rest'\" class=\"cqa-api-edit-step-url-wrap cqa-flex-1 cqa-min-w-[200px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-w-full\">\n            <cqa-autocomplete\n              [value]=\"url\"\n              (valueChange)=\"url = $event\"\n              [options]=\"urlOptions\"\n              [placeholder]=\"urlPlaceholder\"\n              ariaLabel=\"Enter URL or select Parameter\"\n              [fullWidth]=\"true\"\n              (optionSelect)=\"onUrlOptionSelect($event)\">\n            </cqa-autocomplete>\n            <div *ngIf=\"urlError\" class=\"cqa-text-red-600 cqa-text-sm cqa-mt-1\">\n              {{ urlError }}\n            </div>\n          </div>\n\n          <!-- Import API cURL: REST-only (the cURL parser produces REST shapes). -->\n          <div *ngIf=\"activeApiType === 'rest'\" class=\"cqa-api-edit-step-import-curl-trigger cqa-contents cqa-max-[767px]:cqa-w-full cqa-max-[767px]:!cqa-flex\" (click)=\"openImportCurlPanel()\">\n            <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Import API cURL\"\n              customClass=\"cqa-api-edit-step-btn-outline !cqa-bg-white !cqa-border !cqa-border-solid !cqa-border-[#6B7280] cqa-text-[#414146] cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal hover:!cqa-bg-[#F9FAFB] hover:!cqa-text-[#414146] cqa-max-[767px]:cqa-w-full cqa-mt-1\">\n            </cqa-button>\n          </div>\n          <!--\n            Load Schema: GraphQL-only. Uses the elevated cqa-button variant so the\n            indigo surface + text + elevation shadow come from the design system \u2014\n            customClass keeps only the typography + responsive sizing tweaks.\n            Disabled / blocked styling is handled natively by the elevated variant\n            (cqa-bg-primary-muted, muted text, no shadow), so we don't add an\n            opacity override on top.\n          -->\n          <cqa-button *ngIf=\"activeApiType === 'graphql'\" type=\"button\" variant=\"elevated\" btnSize=\"lg\" text=\"Load Schema\"\n            icon=\"schema\"\n            customClass=\"cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal cqa-max-[767px]:cqa-w-full cqa-mt-1\"\n            [disabled]=\"!url || !url.trim() || isLoadingGraphQLSchema\"\n            (clicked)=\"onLoadSchema()\">\n          </cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" text=\"Send Request\" (clicked)=\"onSendRequest()\"\n            [disabled]=\"isSendRequestDisabled\"\n            customClass=\"cqa-api-edit-step-btn-primary cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal !cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] !cqa-border-none cqa-py-2.5 cqa-px-6 cqa-gap-2 cqa-rounded-lg cqa-min-h-[37px] cqa-box-border hover:!cqa-bg-[#1B1FEB] cqa-max-[767px]:cqa-w-full cqa-mt-1\"\n            [ngClass]=\"{'!cqa-opacity-50 !cqa-cursor-not-allowed': isSendRequestDisabled}\">\n          </cqa-button>\n        </div>\n\n\n\n        <!-- Body content: header section (default) OR import cURL section -->\n        <ng-container *ngIf=\"bodyView === 'import-curl'\">\n          <div class=\"cqa-api-edit-step-import-curl-panel cqa-flex cqa-flex-col cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-shadow-[0_1px_3px_rgba(0,0,0,0.08)] cqa-overflow-hidden\">\n            <div class=\"cqa-api-edit-step-import-curl-header cqa-flex cqa-items-center cqa-justify-between cqa-py-3 cqa-px-5 cqa-border-b cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-[#F9FAFB] cqa-rounded-t-lg cqa-max-[767px]:cqa-px-4\">\n              <h3 class=\"cqa-api-edit-step-import-curl-title cqa-m-0 cqa-text-xs cqa-font-bold cqa-leading-[18px] cqa-text-[#374151]\">Import API cURL</h3>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-separator cqa-h-px cqa-bg-[#E2E8F0] cqa-my-0 cqa-mx-5\"></div>\n            <div class=\"cqa-api-edit-step-import-curl-note cqa-px-5 cqa-pt-3\">\n              <cqa-badge label=\"cURL is supported in Bash format only.\" icon=\"info\" variant=\"info\" size=\"small\" [fullWidth]=\"true\"></cqa-badge>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-body\">\n              <cqa-custom-textarea [value]=\"importCurlControl.value\"\n                (valueChange)=\"importCurlControl.setValue($event)\"\n                placeholder=\"Paste your cURL command here (e.g., curl -X POST https://api.example.com/users)\"\n                [fullWidth]=\"true\" [rows]=\"8\" resize=\"vertical\" size=\"md\"\n                class=\"cqa-api-edit-step-import-curl-textarea\">\n              </cqa-custom-textarea>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-footer\">\n              <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n                customClass=\"cqa-api-edit-step-import-curl-btn-cancel\" (clicked)=\"onCancelImportCurl()\"></cqa-button>\n              <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Import\"\n                customClass=\"cqa-api-edit-step-import-curl-btn-import\" (clicked)=\"onImportCurlConfirm()\"></cqa-button>\n            </div>\n          </div>\n        </ng-container>\n\n        <!-- GraphQL operation picker \u2014 opened by the \"Load Schema\" button in GraphQL mode. -->\n        <ng-container *ngIf=\"bodyView === 'graphql-schema'\">\n          <cqa-graphql-operation-picker\n            [schemaSource]=\"graphQLSchemaSource\"\n            [operations]=\"graphQLOperations\"\n            [introspected]=\"!!graphQLSchemaSource\"\n            [isLoading]=\"isLoadingGraphQLSchema\"\n            (back)=\"onGraphQLPickerBack()\"\n            (reIntrospect)=\"onGraphQLPickerReIntrospect()\"\n            (operationSelected)=\"onGraphQLPickerOperationSelected($event)\">\n          </cqa-graphql-operation-picker>\n        </ng-container>\n\n        <ng-container *ngIf=\"bodyView === 'headers'\">\n          <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n            <div class=\"cqa-api-edit-step-tabs\">\n              <cqa-button *ngFor=\"let tab of payloadTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n                [customClass]=\"'cqa-api-edit-step-tab' + (activePayloadTab === tab.value ? ' cqa-api-edit-step-tab--active' : '') + (isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params') ? ' cqa-api-edit-step-tab--disabled' : '')\"\n                [disabled]=\"isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params')\"\n                (clicked)=\"setPayloadTab(tab.value)\">\n              </cqa-button>\n            </div>\n\n            <!-- Payload content (Authorization) -->\n            <div *ngIf=\"activePayloadTab === 'authorization'\" class=\"cqa-api-edit-step-payload\"\n              [attr.style]=\"'padding: 20px; min-height: 200px;'\">\n              <div [attr.style]=\"'display: flex; flex-direction: column; gap: 20px;'\">\n                <div [attr.style]=\"'display: flex; flex-direction: column; gap: 8px; width: fit-content;'\">\n                  <span [attr.style]=\"'font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #6B7280; text-transform: uppercase; line-height: 1.25;'\">AUTH TYPE</span>\n                  <cqa-dynamic-select *ngIf=\"authTypeForm\" [form]=\"authTypeForm\" [config]=\"authTypeSelectConfig\"\n                    class=\"cqa-api-edit-step-auth-type-select\" aria-label=\"Auth type\"\n                    [attr.style]=\"'min-width: 160px;'\">\n                  </cqa-dynamic-select>\n                </div>\n                <!-- No Auth: centered message -->\n                <div *ngIf=\"selectedAuthType === 'no-auth'\"\n                  [attr.style]=\"'flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; text-align: center; border: 1px solid #E5E7EB; border-radius: 8px; padding-top: 16px; padding-bottom: 16px;'\">\n                  <div aria-hidden=\"true\"\n                    [attr.style]=\"'width: 48px; height: 48px; border-radius: 10px; background: #F3F4F6; display: flex; align-items: center; justify-content: center; flex-shrink: 0;'\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n                      <rect x=\"5\" y=\"11\" width=\"14\" height=\"2\" rx=\"1\" fill=\"#9CA3AF\"/>\n                    </svg>\n                  </div>\n                  <span [attr.style]=\"'font-size: 16px; font-weight: 600; color: #374151; line-height: 1.25;'\">No Auth</span>\n                  <div [attr.style]=\"'display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;'\">\n                    <span [attr.style]=\"'font-size: 14px; font-weight: 400; color: #9CA3AF; line-height: 1.4;'\">This request does not use any authorization.</span>\n                    <span role=\"img\" aria-label=\"More information\" title=\"This request does not use any authorization.\"\n                      [attr.style]=\"'display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: #9CA3AF; flex-shrink: 0;'\">\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n                        <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" fill=\"none\"/>\n                        <path d=\"M8 7v4M8 5v.5\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                      </svg>\n                    </span>\n                  </div>\n                </div>\n                <!-- Bearer Token: Token label + textarea -->\n                <div *ngIf=\"selectedAuthType === 'bearer'\"\n                  [attr.style]=\"'flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0;'\">\n                  <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Token</span>\n                  <cqa-custom-textarea [(value)]=\"bearerToken\"\n                    placeholder=\"Enter bearer token\"\n                    [fullWidth]=\"true\" [rows]=\"6\" resize=\"vertical\" size=\"md\"\n                    class=\"cqa-api-edit-step-auth-token-textarea\" ariaLabel=\"Bearer token\">\n                  </cqa-custom-textarea>\n                </div>\n                <!-- OAuth 2.0: Grant Type, Access Token URL, Client ID, Client Secret, Scope, Client Authentication -->\n                <div *ngIf=\"selectedAuthType === 'oauth2' && oauth2Form\"\n                  class=\"cqa-api-edit-step-oauth2-grid\"\n                  [attr.style]=\"'display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; width: 100%;'\">\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Grant Type</span>\n                    <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2GrantTypeSelectConfig\"\n                      class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"OAuth grant type\"\n                      [attr.style]=\"'min-width: 0; width: 100%;'\">\n                    </cqa-dynamic-select>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth grant type</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Access Token URL</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('accessTokenUrl')?.value\"\n                      (valueChange)=\"oauth2Form.get('accessTokenUrl')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter OAuth token endpoint\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Access Token URL\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth token endpoint</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client ID</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('clientId')?.value\"\n                      (valueChange)=\"oauth2Form.get('clientId')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter OAuth client identifier\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Client ID\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client identifier</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Secret</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('clientSecret')?.value\"\n                      (valueChange)=\"oauth2Form.get('clientSecret')?.setValue($event)\"\n                      type=\"password\" [label]=\"''\" placeholder=\"Enter OAuth client secret\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Client Secret\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client secret</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Scope</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('scope')?.value\"\n                      (valueChange)=\"oauth2Form.get('scope')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter space-separated scopes\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Scope\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Space-separated scopes</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Authentication</span>\n                    <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2ClientAuthSelectConfig\"\n                      class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"Client authentication method\"\n                      [attr.style]=\"'min-width: 0; width: 100%;'\">\n                    </cqa-dynamic-select>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Client authentication method</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Payload content (Headers) -->\n            <div *ngIf=\"activePayloadTab === 'headers'\" class=\"cqa-api-edit-step-payload\">\n              <div class=\"cqa-api-edit-step-headers-grid\">\n                <span class=\"cqa-api-edit-step-headers-label\">Header Name</span>\n                <span class=\"cqa-api-edit-step-headers-label\">Header Value</span>\n                <span class=\"cqa-api-edit-step-headers-label cqa-api-edit-step-headers-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of headerRows; let i = index; trackBy: trackByHeader\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-header-row\">\n                <cqa-dynamic-select [form]=\"row\" [config]=\"headerNameSelectConfig\"\n                  (addCustomValue)=\"onHeaderNameAddCustomValue($event, row)\"\n                  class=\"cqa-api-edit-step-header-type-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                  (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-header-value-input\" ariaLabel=\"Header value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-header-delete'\"\n                  [tooltip]=\"'Remove header'\" (clicked)=\"removeHeader(i)\">\n                  <svg class=\"cqa-api-edit-step-header-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n              <div class=\"cqa-api-edit-step-add-header-wrap\">\n                <cqa-button type=\"button\" variant=\"text\" text=\"+ Add Header\"\n                  [customClass]=\"'cqa-api-edit-step-add-header-link'\" (clicked)=\"addHeader()\">\n                </cqa-button>\n              </div>\n            </div>\n\n            <!-- Payload content (Params): Key\u2013Value table with add/delete rows. REST-only \u2014 GraphQL POST has no query params. -->\n            <div *ngIf=\"activePayloadTab === 'params' && activeApiType === 'rest'\" class=\"cqa-api-edit-step-payload\">\n              <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n                <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n                <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n                <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of paramsRows; let i = index; trackBy: trackByParams\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-key-value-row\">\n                <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                  (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n                </cqa-custom-input>\n                <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                  (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeParamsRow(i)\">\n                  <svg class=\"cqa-api-edit-step-key-value-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n              <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n                <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                  customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addParamsRow()\">\n                </cqa-button>\n              </div>\n            </div>\n\n            <!-- Payload content (Body only): type, format, text area, Back/Next. REST-only \u2014 GraphQL uses the dedicated tab below. -->\n            <div *ngIf=\"activePayloadTab === 'body' && activeApiType === 'rest'\"\n              class=\"cqa-api-edit-step-payload cqa-api-edit-step-payload-editor\">\n              <div class=\"cqa-api-edit-step-payload-type-row\">\n                <span class=\"cqa-api-edit-step-payload-type-label\">Type</span>\n                <div class=\"cqa-api-edit-step-payload-type-radios\">\n                  <cqa-segment-control [value]=\"payloadType\" [segments]=\"payloadTypeSegments\"\n                    (valueChange)=\"onPayloadTypeChange($event)\"\n                    class=\"cqa-api-edit-step-payload-type-segment\">\n                  </cqa-segment-control>\n                </div>\n                <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-format-wrap\">\n                  <span class=\"cqa-api-edit-step-payload-format-label\">Format:</span>\n                  <cqa-dynamic-select *ngIf=\"payloadFormatForm\" [form]=\"payloadFormatForm\"\n                    [config]=\"payloadFormatSelectConfig\" class=\"cqa-api-edit-step-payload-format-select\"\n                    aria-label=\"Format\">\n                  </cqa-dynamic-select>\n                </div>\n              </div>\n              <!-- Raw: text area with line numbers (Postman-style payload body) -->\n              <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-body\" #payloadEditorWithLinesRef>\n                <div class=\"cqa-api-edit-step-payload-editor-with-lines\">\n                  <div class=\"cqa-api-edit-step-payload-line-numbers\" aria-hidden=\"true\">\n                    <span *ngFor=\"let n of payloadLineNumbers\" class=\"cqa-api-edit-step-payload-line-num\">\n                      <span *ngIf=\"payloadJsonError && payloadJsonError.line === n\"\n                        class=\"cqa-api-edit-step-payload-line-error-icon\" [title]=\"payloadJsonErrorTooltip\"\n                        aria-label=\"Parse error on this line\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n                          <circle cx=\"7\" cy=\"7\" r=\"6\" fill=\"#EF4444\"/>\n                          <path d=\"M4 4l6 6M10 4l-6 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                        </svg>\n                      </span>\n                      <span class=\"cqa-api-edit-step-payload-line-num-text\">{{ n }}</span>\n                    </span>\n                  </div>\n                  <div class=\"cqa-api-edit-step-payload-textarea-cell\">\n                    <div class=\"cqa-api-edit-step-payload-textarea cqa-w-full cqa-flex cqa-flex-col cqa-min-h-0\"\n                      [ngClass]=\"{'cqa-api-edit-step-payload-textarea--error': payloadJsonError}\">\n                      <textarea #payloadTextareaRef\n                        class=\"cqa-api-edit-step-payload-textarea-input cqa-w-full cqa-outline-none cqa-box-border\"\n                        [ngClass]=\"{'cqa-api-edit-step-payload-textarea-input--error': payloadJsonError}\"\n                        [value]=\"payloadText\"\n                        placeholder=\"\"\n                        [attr.aria-label]=\"'Payload'\"\n                        [attr.aria-invalid]=\"!!payloadJsonError\"\n                        (input)=\"onPayloadInput($event)\"\n                        (keydown)=\"onPayloadKeydown($event)\">\n                      </textarea>\n                    </div>\n                  </div>\n                </div>\n                <p *ngIf=\"payloadJsonError\" class=\"cqa-api-edit-step-payload-json-error-msg\">\n                  Invalid JSON format. Please check your syntax.\n                </p>\n              </div>\n\n              <!-- x-www-form-urlencoded: Key\u2013Value rows, add/remove dynamically -->\n              <div *ngIf=\"payloadType === 'x-www-form-urlencoded'\" class=\"cqa-api-edit-step-key-value\">\n                <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n                  <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n                  <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n                  <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n                    aria-hidden=\"true\"></span>\n                </div>\n                <div *ngFor=\"let row of keyValueRows; let i = index; trackBy: trackByKeyValue\" [formGroup]=\"row\"\n                  class=\"cqa-api-edit-step-key-value-row\">\n                  <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                    (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n                  </cqa-custom-input>\n                  <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                    (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n                  </cqa-custom-input>\n                  <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n                    [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyValueRow(i)\">\n                    <svg class=\"cqa-api-edit-step-key-value-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                      <path\n                        d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                        fill=\"#F9BFBF\" />\n                    </svg>\n                  </cqa-button>\n                </div>\n                <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n                  <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                    customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addKeyValueRow()\">\n                  </cqa-button>\n                </div>\n              </div>\n\n              <!-- Form Data: Key\u2013Type\u2013Value rows; Type is a dropdown (Text/File), add/remove dynamically -->\n              <div *ngIf=\"payloadType === 'form-data'\" class=\"cqa-api-edit-step-key-type-value\">\n                <div class=\"cqa-api-edit-step-key-type-value-header\">\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Key</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Type</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Value</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label cqa-api-edit-step-key-type-value-label--empty\"\n                    aria-hidden=\"true\"></span>\n                </div>\n                <div *ngFor=\"let row of keyTypeValueRows; let i = index; trackBy: trackByKeyTypeValue\" [formGroup]=\"row\"\n                  class=\"cqa-api-edit-step-key-type-value-row\">\n                  <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                    (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Key\">\n                  </cqa-custom-input>\n                  <cqa-dynamic-select [form]=\"row\" [config]=\"keyTypeValueTypeSelectConfig\"\n                    class=\"cqa-api-edit-step-key-type-value-type-select cqa-w-full\">\n                  </cqa-dynamic-select>\n                  <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                    (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Value\">\n                  </cqa-custom-input>\n                  <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-type-value-delete'\"\n                    [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyTypeValueRow(i)\">\n                    <svg class=\"cqa-api-edit-step-key-type-value-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                      <path\n                        d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                        fill=\"#F9BFBF\" />\n                    </svg>\n                  </cqa-button>\n                </div>\n                <div class=\"cqa-api-edit-step-key-type-value-add-wrap\">\n                  <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                    customClass=\"cqa-api-edit-step-key-type-value-add-btn\" (clicked)=\"addKeyTypeValueRow()\">\n                  </cqa-button>\n                </div>\n              </div>\n            </div>\n\n            <!-- Payload content (GraphQL): Query + Variables + Operation Name. Active only in GraphQL mode. -->\n            <div *ngIf=\"activePayloadTab === 'graphql' && activeApiType === 'graphql' && graphQLForm\"\n              class=\"cqa-api-edit-step-payload-graphql cqa-api-edit-step-graphql-tab cqa-flex cqa-flex-col cqa-gap-4\">\n              <!--\n                Query / Variables use the design-system `cqa-custom-textarea` so\n                styling, label, error rendering, and accessibility come from the\n                primitive. We bind via [value] / (valueChange) instead of\n                formControlName because cqa-custom-textarea isn't a CVA \u2014 calling\n                form.get('\u2026').setValue still fires the existing valueChanges\n                subscriptions (which clear inline errors and recompute the\n                multi-operation warning).\n              -->\n              <cqa-custom-textarea\n                label=\"Query\"\n                [required]=\"true\"\n                [value]=\"graphQLForm.get('query')?.value || ''\"\n                (valueChange)=\"graphQLForm.get('query')?.setValue($event)\"\n                placeholder=\"query GetX($id: ID!) {&#10;  x(id: $id) { name }&#10;}\"\n                ariaLabel=\"GraphQL query\"\n                [errors]=\"graphQLQueryError ? [graphQLQueryError] : []\"\n                [fullWidth]=\"true\"\n                [rows]=\"4\"\n                resize=\"vertical\"\n                size=\"md\">\n              </cqa-custom-textarea>\n              <div class=\"cqa-flex cqa-gap-1.5\">\n                <cqa-custom-textarea\n                  class=\"cqa-flex-1\"\n                  label=\"Variables (JSON)\"\n                  [value]=\"graphQLForm.get('variables')?.value || ''\"\n                  (valueChange)=\"graphQLForm.get('variables')?.setValue($event)\"\n                  placeholder='{ \"id\": \"abc\" }'\n                  ariaLabel=\"GraphQL variables\"\n                  [errors]=\"graphQLVariablesError ? [graphQLVariablesError] : []\"\n                  [fullWidth]=\"true\"\n                  [rows]=\"3\"\n                  resize=\"vertical\"\n                  size=\"md\">\n                </cqa-custom-textarea>\n                <!-- Operation Name: optional unless 2+ operations are declared. -->\n                <div class=\"cqa-api-edit-step-graphql-field cqa-flex cqa-flex-col cqa-gap-1.5\">\n                  <label class=\"cqa-api-edit-step-graphql-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-text-[#374151]\">Operation Name</label>\n                  <cqa-custom-input\n                    [value]=\"graphQLForm.get('operationName')?.value || ''\"\n                    (valueChange)=\"graphQLForm.get('operationName')?.setValue($event)\"\n                    [label]=\"''\" placeholder=\"e.g. GetBooking\" [fullWidth]=\"true\" size=\"md\"\n                    ariaLabel=\"GraphQL operation name\">\n                  </cqa-custom-input>\n                  <p *ngIf=\"graphQLOperationWarning\" class=\"cqa-text-[#B45309] cqa-text-[12px] cqa-mt-1\">\n                    {{ graphQLOperationWarning }}\n                  </p>\n                  <div class=\"cqa-flex cqa-flex-row cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-p-2\" style=\"border-radius: 8px; border: 1px solid #EDE9FE; background: #F5F3FF;\">\n                    <div>\n                      <mat-icon style=\"display:flex;font-size:14px;font-weight: 600;\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-text-[14px] cqa-text-[#7C3AED]\" >lightbulb</mat-icon>\n                    </div>\n                    <div class=\"cqa-text-[#7C3AED]\">\n                      Use <span style=\"background-color: white; color:black; border-radius: 4px; padding: 2px;\">var</span> in variables to bind from earlier steps.\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n\n        <!-- Advanced settings (step-level). Hidden while the GraphQL picker is open so it doesn't compete for focus with the operation list. -->\n        <div *ngIf=\"bodyView !== 'graphql-schema'\">\n          <button\n            type=\"button\"\n            class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n            (click)=\"advancedExpanded = !advancedExpanded\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"advancedExpanded\">\n              expand_more\n            </mat-icon>\n          </button>\n          <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n            <cqa-advanced-variables-form\n              [advancedVariables]=\"advancedSettingsVariables\"\n              [advancedVariableForm]=\"advancedVariablesForm\"\n              (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n              (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n            </cqa-advanced-variables-form>\n          </div>\n        </div>\n\n    </div>\n    <!-- Step 2: Variable Name: input, validation, Back / Next -->\n    <div *ngIf=\"currentStep === 2\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <div class=\"cqa-api-edit-step-variable-section\">\n          <div class=\"cqa-api-edit-step-variable-input-wrap\">\n            <cqa-custom-input [(value)]=\"variableName\" [label]=\"''\" placeholder=\"Variable Name\" [fullWidth]=\"true\"\n              size=\"md\" (valueChange)=\"onVariableNameChange()\" aria-label=\"Variable Name\">\n            </cqa-custom-input>\n          </div>\n          <p *ngIf=\"variableNameError\" class=\"cqa-api-edit-step-variable-error\" role=\"alert\">{{ variableNameError }}</p>\n        </div>\n    </div>\n    <!-- Step 3: Response Body / Status tabs -->\n    <div *ngIf=\"currentStep === 3\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n          <div class=\"cqa-api-edit-step-tabs\">\n            <cqa-button *ngFor=\"let tab of responseVerificationTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n              [customClass]=\"'cqa-api-edit-step-tab' + (activeResponseVerificationTab === tab.value ? ' cqa-api-edit-step-tab--active' : '')\"\n              (clicked)=\"setResponseVerificationTab(tab.value)\">\n            </cqa-button>\n          </div>\n\n          <!-- Response Body tab content: verification grid -->\n          <div *ngIf=\"activeResponseVerificationTab === 'response-body'\" class=\"cqa-api-edit-step-step3-content\">\n            <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n              <span></span>\n              <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n                customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addVerificationRow()\">\n              </cqa-button>\n            </div>\n            <div class=\"cqa-api-edit-step-verification\">\n              <div class=\"cqa-api-edit-step-verification-grid cqa-api-edit-step-verification-grid-header\">\n                <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n                <span class=\"cqa-api-edit-step-verification-label\">JSON Path</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Data Type</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n                <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of verificationRows; let i = index; trackBy: trackByVerification\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-verification-row\">\n                <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n                <cqa-custom-input [value]=\"row.get('jsonPath')?.value ?? ''\"\n                  (valueChange)=\"row.get('jsonPath')?.setValue($event)\" placeholder=\"Json Path\" [fullWidth]=\"true\"\n                  size=\"sm\" class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"JSON Path\">\n                </cqa-custom-input>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"verificationSelectConfig\"\n                  class=\"cqa-api-edit-step-verification-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"verificationDataTypeSelectConfig\"\n                  class=\"cqa-api-edit-step-verification-select cqa-w-full\"\n                  (selectionChange)=\"onVerificationDataTypeChange(row, $event)\">\n                </cqa-dynamic-select>\n                <!-- Expected Value: text for String/Array/Object, number for Number, dropdown for Boolean -->\n                <ng-container [ngSwitch]=\"row.get('dataType')?.value\">\n                  <cqa-dynamic-select *ngSwitchCase=\"'boolean'\" [form]=\"row\"\n                    [config]=\"verificationExpectedValueBooleanSelectConfig\"\n                    class=\"cqa-api-edit-step-verification-select cqa-api-edit-step-verification-expected-select cqa-w-full\">\n                  </cqa-dynamic-select>\n                  <cqa-custom-input *ngSwitchCase=\"'number'\" [value]=\"row.get('expectedValue')?.value ?? ''\"\n                    (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value (number)\"\n                    type=\"number\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-verification-input cqa-api-edit-step-verification-expected-number\"\n                    ariaLabel=\"Expected Value\">\n                  </cqa-custom-input>\n                  <cqa-custom-input *ngSwitchDefault [value]=\"row.get('expectedValue')?.value ?? ''\"\n                    (valueChange)=\"row.get('expectedValue')?.setValue($event)\"\n                    placeholder=\"Expected Value in String\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"Expected Value\">\n                  </cqa-custom-input>\n                </ng-container>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeVerificationRow(i)\">\n                  <svg class=\"cqa-api-edit-step-verification-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n            </div>\n          </div>\n\n          <!-- Status tab content: S.no, Verification dropdown, Expected Value, add/remove rows -->\n          <div *ngIf=\"activeResponseVerificationTab === 'status'\" class=\"cqa-api-edit-step-step3-content\">\n            <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n              <span></span>\n              <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n                customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addStatusVerificationRow()\">\n              </cqa-button>\n            </div>\n            <div class=\"cqa-api-edit-step-status-verification\">\n              <div class=\"cqa-api-edit-step-status-verification-header\">\n                <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n                <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of statusVerificationRows; let i = index; trackBy: trackByStatusVerification\"\n                [formGroup]=\"row\" class=\"cqa-api-edit-step-status-verification-row\">\n                <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"statusVerificationSelectConfig\"\n                  class=\"cqa-api-edit-step-status-verification-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-custom-input [value]=\"row.get('expectedValue')?.value ?? ''\"\n                  (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value\"\n                  type=\"number\" [fullWidth]=\"true\" size=\"sm\" class=\"cqa-api-edit-step-verification-input\"\n                  ariaLabel=\"Expected Value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeStatusVerificationRow(i)\">\n                  <svg class=\"cqa-api-edit-step-verification-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n            </div>\n          </div>\n        </div>\n    </div>\n  </div>\n\n  <!-- Response Preview. Hidden while the GraphQL picker is open \u2014 the user is in \"pick an operation\" mode, not \"view last response\" mode, so showing a stale preview below the picker is just noise. -->\n  <div *ngIf=\"bodyView !== 'graphql-schema'\" #responsePreviewRef class=\"cqa-api-edit-step-response\">\n    <h3 class=\"cqa-api-edit-step-response-title cqa-text-[14px] cqa-font-bold cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-mb-[12px] cqa-shrink-0\">Response Preview</h3>\n    <pre class=\"cqa-api-edit-step-response-content\">{{ responsePreview }}</pre>\n  </div>\n\n  <!-- Step actions: one row, full width. Step 1: Cancel + Next; Step 2: Back + Next; Step 3: Back + Create -->\n  <div *ngIf=\"bodyView !== 'graphql-schema'\" class=\"cqa-api-edit-step-actions\">\n    <ng-container [ngSwitch]=\"currentStep\">\n      <ng-container *ngSwitchCase=\"1\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n          customClass=\"cqa-api-edit-step-actions-btn-cancel\" (clicked)=\"onCancel()\">\n        </cqa-button>\n        <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n          customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n        </cqa-button>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"2\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n          customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n        </cqa-button>\n        <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n          customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n        </cqa-button>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"3\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n          customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n        </cqa-button>\n        <cqa-button *ngIf=\"!isCreatingStep\" type=\"button\" variant=\"filled\" btnSize=\"lg\" [text]=\"editMode ? 'Update' : 'Create'\"\n          customClass=\"cqa-api-edit-step-actions-btn-create\" (clicked)=\"onCreate()\">\n        </cqa-button>\n        <!-- Match cqa-button flex: actions row styles > cqa-button { flex: 1 1 0 } \u2014 loader div must grow same width as Create -->\n        <div *ngIf=\"isCreatingStep\" class=\"cqa-api-edit-step-actions-loader cqa-w-full cqa-min-h-[38px] cqa-rounded-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n          <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n            [inlineStyles]=\"'min-height: 38px; height: 38px; width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n            variant=\"info\" size=\"medium\"></cqa-badge>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>" }]
+            args: [{ selector: 'cqa-api-edit-step', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.Default, template: "<div class=\"cqa-api-edit-step-container cqa-bg-[#ffffff] cqa-flex cqa-flex-col cqa-w-full cqa-h-full cqa-p-[16px] cqa-gap-[12px] cqa-overflow-y-auto cqa-overflow-x-hidden cqa-box-border\">\n\n  <h2 class=\"cqa-api-edit-step-title cqa-font-inter cqa-text-[12px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal cqa-text-[#000000] cqa-m-0\">\n    {{ editMode ? 'Update API Test Step' : 'Create API Test Step' }}\n  </h2>\n\n  <div class=\"cqa-api-edit-step-indicator cqa-flex cqa-items-center cqa-gap-0 cqa-max-[767px]:cqa-flex-wrap cqa-max-[767px]:cqa-gap-2 cqa-max-[767px]:cqa-justify-start\"\n    [class.cqa-justify-start]=\"stepLabels.length === 1\"\n    [class.cqa-justify-between]=\"stepLabels.length !== 1\">\n    <ng-container *ngFor=\"let step of stepLabels; let i = index\">\n      <cqa-button type=\"button\" variant=\"text\"\n        customClass=\"cqa-api-edit-step-indicator-item cqa-api-edit-step-indicator-item--clickable cqa-flex cqa-items-center cqa-gap-[10px] cqa-cursor-pointer cqa-border-none cqa-p-0 cqa-font-inherit cqa-text-inherit cqa-text-left !cqa-bg-transparent\"\n        [attr.aria-label]=\"'Step ' + step.index + ': ' + step.label\" [attr.aria-pressed]=\"step.index === currentStep\"\n        (clicked)=\"setStep(step.index)\">\n        <span class=\"cqa-api-edit-step-indicator-circle cqa-w-8 cqa-h-8 cqa-rounded-full cqa-inline-flex cqa-items-center cqa-justify-center cqa-text-sm cqa-font-medium cqa-leading-none cqa-border-none cqa-shrink-0\"\n          [ngClass]=\"step.index === currentStep ? 'cqa-bg-[#4F46E5] cqa-text-white' : 'cqa-bg-[#E0E0E0] cqa-text-[#666666]'\">\n          {{ step.index }}\n        </span>\n        <span class=\"cqa-api-edit-step-indicator-label cqa-text-sm cqa-leading-[18px] cqa-font-normal cqa-max-[767px]:cqa-text-xs\"\n          [ngClass]=\"step.index === currentStep ? 'cqa-text-[#4F46E5]' : 'cqa-text-[#666666]'\">\n          {{ step.label }}\n        </span>\n        <div *ngIf=\"i < stepLabels.length - 1\" class=\"cqa-api-edit-step-indicator-line cqa-w-[96px] cqa-h-[2px] cqa-bg-[#E0E0E0] cqa-my-0 cqa-mx-[6px] cqa-shrink-0 cqa-self-center cqa-max-[767px]:cqa-w-[24px] cqa-max-[767px]:cqa-mx-1\" aria-hidden=\"true\"></div>\n      </cqa-button>\n    </ng-container>\n  </div>\n\n  <!-- Step content viewport: only the active step body is shown (*ngIf) -->\n  <div class=\"cqa-api-edit-step-viewport cqa-w-full\">\n    <!-- Step 1: Environment, request, body, response -->\n    <div *ngIf=\"currentStep === 1\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <!-- Summary field: label on top, input below (above Environment) -->\n        <div class=\"cqa-api-edit-step-summary-row cqa-flex cqa-flex-col cqa-gap-1.5 cqa-items-stretch\">\n          <label class=\"cqa-api-edit-step-summary-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">Summary</label>\n          <cqa-custom-input [(value)]=\"summary\"\n            [label]=\"''\" placeholder=\"Enter Request summary\" [fullWidth]=\"true\" size=\"md\"\n            ariaLabel=\"Summary\">\n          </cqa-custom-input>\n        </div>\n        <!-- Environment row: label on top, select below (aligned right on desktop) -->\n        <div class=\"cqa-api-edit-step-environment-row cqa-flex cqa-flex-col cqa-gap-1.5 cqa-items-end cqa-max-[767px]:cqa-items-stretch\">\n          <span class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-max-[767px]:cqa-items-stretch\">\n          <label class=\"cqa-api-edit-step-environment-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">Environments</label>\n          <cqa-dynamic-select *ngIf=\"environmentForm\"\n            [form]=\"environmentForm\"\n            [config]=\"environmentSelectConfig\"\n            class=\"cqa-api-edit-step-environment-select cqa-shrink-0 cqa-w-auto cqa-min-w-[315px] cqa-max-w-[315px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full [&_.mat-form-field-wrapper]:cqa-pb-0\"\n            aria-label=\"Environment\"\n            (selectionChange)=\"onEnvironmentSelectionChange($event)\">\n          </cqa-dynamic-select>\n        </span>\n        </div>\n\n        <!-- Request row: method, URL, buttons -->\n        <div class=\"cqa-api-edit-step-request-row cqa-flex cqa-items-start cqa-gap-3 cqa-flex-wrap cqa-max-[767px]:cqa-flex-col cqa-max-[767px]:cqa-items-stretch cqa-max-[767px]:cqa-gap-2.5\">\n          <cqa-dynamic-select *ngIf=\"methodForm\" [form]=\"methodForm\" [config]=\"methodSelectConfig\"\n            class=\"cqa-api-edit-step-method-select cqa-shrink-0 cqa-w-auto cqa-min-w-[152px] cqa-max-w-[152px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full\" aria-label=\"HTTP method\"\n            (selectionChange)=\"onMethodSelectionChange($event)\">\n          </cqa-dynamic-select>\n          <div class=\"cqa-api-edit-step-url-wrap cqa-flex-1 cqa-min-w-[200px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-w-full\">\n            <cqa-autocomplete\n              [value]=\"url\"\n              (valueChange)=\"url = $event\"\n              [options]=\"urlOptions\"\n              [placeholder]=\"urlPlaceholder\"\n              ariaLabel=\"Enter URL or select Parameter\"\n              [fullWidth]=\"true\"\n              (optionSelect)=\"onUrlOptionSelect($event)\">\n            </cqa-autocomplete>\n            <div *ngIf=\"urlError\" class=\"cqa-text-red-600 cqa-text-sm cqa-mt-1\">\n              {{ urlError }}\n            </div>\n          </div>\n          <div class=\"cqa-api-edit-step-import-curl-trigger cqa-contents cqa-max-[767px]:cqa-w-full cqa-max-[767px]:!cqa-flex\" (click)=\"openImportCurlPanel()\">\n            <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Import API cURL\"\n              customClass=\"cqa-api-edit-step-btn-outline !cqa-bg-white !cqa-border !cqa-border-solid !cqa-border-[#6B7280] cqa-text-[#414146] cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal hover:!cqa-bg-[#F9FAFB] hover:!cqa-text-[#414146] cqa-max-[767px]:cqa-w-full cqa-mt-1\">\n            </cqa-button>\n          </div>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" text=\"Send Request\" (clicked)=\"onSendRequest()\"\n            [disabled]=\"!isUrlValid\"\n            customClass=\"cqa-api-edit-step-btn-primary cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal !cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] !cqa-border-none cqa-py-2.5 cqa-px-6 cqa-gap-2 cqa-rounded-lg cqa-min-h-[37px] cqa-box-border hover:!cqa-bg-[#1B1FEB] cqa-max-[767px]:cqa-w-full cqa-mt-1\"\n            [ngClass]=\"{'!cqa-opacity-50 !cqa-cursor-not-allowed': !isUrlValid}\">\n          </cqa-button>\n        </div>\n\n\n\n        <!-- Body content: header section (default) OR import cURL section -->\n        <ng-container *ngIf=\"bodyView === 'import-curl'\">\n          <div class=\"cqa-api-edit-step-import-curl-panel cqa-flex cqa-flex-col cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-shadow-[0_1px_3px_rgba(0,0,0,0.08)] cqa-overflow-hidden\">\n            <div class=\"cqa-api-edit-step-import-curl-header cqa-flex cqa-items-center cqa-justify-between cqa-py-3 cqa-px-5 cqa-border-b cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-[#F9FAFB] cqa-rounded-t-lg cqa-max-[767px]:cqa-px-4\">\n              <h3 class=\"cqa-api-edit-step-import-curl-title cqa-m-0 cqa-text-xs cqa-font-bold cqa-leading-[18px] cqa-text-[#374151]\">Import API cURL</h3>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-separator cqa-h-px cqa-bg-[#E2E8F0] cqa-my-0 cqa-mx-5\"></div>\n            <div class=\"cqa-api-edit-step-import-curl-note cqa-px-5 cqa-pt-3\">\n              <cqa-badge label=\"cURL is supported in Bash format only.\" icon=\"info\" variant=\"info\" size=\"small\" [fullWidth]=\"true\"></cqa-badge>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-body\">\n              <cqa-custom-textarea [value]=\"importCurlControl.value\"\n                (valueChange)=\"importCurlControl.setValue($event)\"\n                placeholder=\"Paste your cURL command here (e.g., curl -X POST https://api.example.com/users)\"\n                [fullWidth]=\"true\" [rows]=\"8\" resize=\"vertical\" size=\"md\"\n                class=\"cqa-api-edit-step-import-curl-textarea\">\n              </cqa-custom-textarea>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-footer\">\n              <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n                customClass=\"cqa-api-edit-step-import-curl-btn-cancel\" (clicked)=\"onCancelImportCurl()\"></cqa-button>\n              <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Import\"\n                customClass=\"cqa-api-edit-step-import-curl-btn-import\" (clicked)=\"onImportCurlConfirm()\"></cqa-button>\n            </div>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"bodyView === 'headers'\">\n          <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n            <div class=\"cqa-api-edit-step-tabs\">\n              <cqa-button *ngFor=\"let tab of payloadTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n                [customClass]=\"'cqa-api-edit-step-tab' + (activePayloadTab === tab.value ? ' cqa-api-edit-step-tab--active' : '') + (isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params') ? ' cqa-api-edit-step-tab--disabled' : '')\"\n                [disabled]=\"isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params')\"\n                (clicked)=\"setPayloadTab(tab.value)\">\n              </cqa-button>\n            </div>\n\n            <!-- Payload content (Authorization) -->\n            <div *ngIf=\"activePayloadTab === 'authorization'\" class=\"cqa-api-edit-step-payload\"\n              [attr.style]=\"'padding: 20px; min-height: 200px;'\">\n              <div [attr.style]=\"'display: flex; flex-direction: column; gap: 20px;'\">\n                <div [attr.style]=\"'display: flex; flex-direction: column; gap: 8px; width: fit-content;'\">\n                  <span [attr.style]=\"'font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #6B7280; text-transform: uppercase; line-height: 1.25;'\">AUTH TYPE</span>\n                  <cqa-dynamic-select *ngIf=\"authTypeForm\" [form]=\"authTypeForm\" [config]=\"authTypeSelectConfig\"\n                    class=\"cqa-api-edit-step-auth-type-select\" aria-label=\"Auth type\"\n                    [attr.style]=\"'min-width: 160px;'\">\n                  </cqa-dynamic-select>\n                </div>\n                <!-- No Auth: centered message -->\n                <div *ngIf=\"selectedAuthType === 'no-auth'\"\n                  [attr.style]=\"'flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; text-align: center; border: 1px solid #E5E7EB; border-radius: 8px; padding-top: 16px; padding-bottom: 16px;'\">\n                  <div aria-hidden=\"true\"\n                    [attr.style]=\"'width: 48px; height: 48px; border-radius: 10px; background: #F3F4F6; display: flex; align-items: center; justify-content: center; flex-shrink: 0;'\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n                      <rect x=\"5\" y=\"11\" width=\"14\" height=\"2\" rx=\"1\" fill=\"#9CA3AF\"/>\n                    </svg>\n                  </div>\n                  <span [attr.style]=\"'font-size: 16px; font-weight: 600; color: #374151; line-height: 1.25;'\">No Auth</span>\n                  <div [attr.style]=\"'display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;'\">\n                    <span [attr.style]=\"'font-size: 14px; font-weight: 400; color: #9CA3AF; line-height: 1.4;'\">This request does not use any authorization.</span>\n                    <span role=\"img\" aria-label=\"More information\" title=\"This request does not use any authorization.\"\n                      [attr.style]=\"'display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: #9CA3AF; flex-shrink: 0;'\">\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n                        <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" fill=\"none\"/>\n                        <path d=\"M8 7v4M8 5v.5\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                      </svg>\n                    </span>\n                  </div>\n                </div>\n                <!-- Bearer Token: Token label + textarea -->\n                <div *ngIf=\"selectedAuthType === 'bearer'\"\n                  [attr.style]=\"'flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0;'\">\n                  <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Token</span>\n                  <cqa-custom-textarea [(value)]=\"bearerToken\"\n                    placeholder=\"Enter bearer token\"\n                    [fullWidth]=\"true\" [rows]=\"6\" resize=\"vertical\" size=\"md\"\n                    class=\"cqa-api-edit-step-auth-token-textarea\" ariaLabel=\"Bearer token\">\n                  </cqa-custom-textarea>\n                </div>\n                <!-- OAuth 2.0: Grant Type, Access Token URL, Client ID, Client Secret, Scope, Client Authentication -->\n                <div *ngIf=\"selectedAuthType === 'oauth2' && oauth2Form\"\n                  class=\"cqa-api-edit-step-oauth2-grid\"\n                  [attr.style]=\"'display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; width: 100%;'\">\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Grant Type</span>\n                    <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2GrantTypeSelectConfig\"\n                      class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"OAuth grant type\"\n                      [attr.style]=\"'min-width: 0; width: 100%;'\">\n                    </cqa-dynamic-select>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth grant type</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Access Token URL</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('accessTokenUrl')?.value\"\n                      (valueChange)=\"oauth2Form.get('accessTokenUrl')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter OAuth token endpoint\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Access Token URL\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth token endpoint</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client ID</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('clientId')?.value\"\n                      (valueChange)=\"oauth2Form.get('clientId')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter OAuth client identifier\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Client ID\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client identifier</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Secret</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('clientSecret')?.value\"\n                      (valueChange)=\"oauth2Form.get('clientSecret')?.setValue($event)\"\n                      type=\"password\" [label]=\"''\" placeholder=\"Enter OAuth client secret\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Client Secret\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client secret</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Scope</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('scope')?.value\"\n                      (valueChange)=\"oauth2Form.get('scope')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter space-separated scopes\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Scope\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Space-separated scopes</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Authentication</span>\n                    <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2ClientAuthSelectConfig\"\n                      class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"Client authentication method\"\n                      [attr.style]=\"'min-width: 0; width: 100%;'\">\n                    </cqa-dynamic-select>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Client authentication method</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Payload content (Headers) -->\n            <div *ngIf=\"activePayloadTab === 'headers'\" class=\"cqa-api-edit-step-payload\">\n              <div class=\"cqa-api-edit-step-headers-grid\">\n                <span class=\"cqa-api-edit-step-headers-label\">Header Name</span>\n                <span class=\"cqa-api-edit-step-headers-label\">Header Value</span>\n                <span class=\"cqa-api-edit-step-headers-label cqa-api-edit-step-headers-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of headerRows; let i = index; trackBy: trackByHeader\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-header-row\">\n                <cqa-dynamic-select [form]=\"row\" [config]=\"headerNameSelectConfig\"\n                  (addCustomValue)=\"onHeaderNameAddCustomValue($event, row)\"\n                  class=\"cqa-api-edit-step-header-type-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                  (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-header-value-input\" ariaLabel=\"Header value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-header-delete'\"\n                  [tooltip]=\"'Remove header'\" (clicked)=\"removeHeader(i)\">\n                  <svg class=\"cqa-api-edit-step-header-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n              <div class=\"cqa-api-edit-step-add-header-wrap\">\n                <cqa-button type=\"button\" variant=\"text\" text=\"+ Add Header\"\n                  [customClass]=\"'cqa-api-edit-step-add-header-link'\" (clicked)=\"addHeader()\">\n                </cqa-button>\n              </div>\n            </div>\n\n            <!-- Payload content (Params): Key\u2013Value table with add/delete rows -->\n            <div *ngIf=\"activePayloadTab === 'params'\" class=\"cqa-api-edit-step-payload\">\n              <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n                <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n                <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n                <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of paramsRows; let i = index; trackBy: trackByParams\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-key-value-row\">\n                <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                  (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n                </cqa-custom-input>\n                <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                  (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeParamsRow(i)\">\n                  <svg class=\"cqa-api-edit-step-key-value-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n              <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n                <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                  customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addParamsRow()\">\n                </cqa-button>\n              </div>\n            </div>\n\n            <!-- Payload content (Body only): type, format, text area, Back/Next -->\n            <div *ngIf=\"activePayloadTab === 'body'\"\n              class=\"cqa-api-edit-step-payload cqa-api-edit-step-payload-editor\">\n              <div class=\"cqa-api-edit-step-payload-type-row\">\n                <span class=\"cqa-api-edit-step-payload-type-label\">Type</span>\n                <div class=\"cqa-api-edit-step-payload-type-radios\">\n                  <cqa-segment-control [value]=\"payloadType\" [segments]=\"payloadTypeSegments\"\n                    (valueChange)=\"onPayloadTypeChange($event)\"\n                    class=\"cqa-api-edit-step-payload-type-segment\">\n                  </cqa-segment-control>\n                </div>\n                <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-format-wrap\">\n                  <span class=\"cqa-api-edit-step-payload-format-label\">Format:</span>\n                  <cqa-dynamic-select *ngIf=\"payloadFormatForm\" [form]=\"payloadFormatForm\"\n                    [config]=\"payloadFormatSelectConfig\" class=\"cqa-api-edit-step-payload-format-select\"\n                    aria-label=\"Format\">\n                  </cqa-dynamic-select>\n                </div>\n              </div>\n              <!-- Raw: text area with line numbers (Postman-style payload body) -->\n              <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-body\" #payloadEditorWithLinesRef>\n                <div class=\"cqa-api-edit-step-payload-editor-with-lines\">\n                  <div class=\"cqa-api-edit-step-payload-line-numbers\" aria-hidden=\"true\">\n                    <span *ngFor=\"let n of payloadLineNumbers\" class=\"cqa-api-edit-step-payload-line-num\">\n                      <span *ngIf=\"payloadJsonError && payloadJsonError.line === n\"\n                        class=\"cqa-api-edit-step-payload-line-error-icon\" [title]=\"payloadJsonErrorTooltip\"\n                        aria-label=\"Parse error on this line\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n                          <circle cx=\"7\" cy=\"7\" r=\"6\" fill=\"#EF4444\"/>\n                          <path d=\"M4 4l6 6M10 4l-6 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                        </svg>\n                      </span>\n                      <span class=\"cqa-api-edit-step-payload-line-num-text\">{{ n }}</span>\n                    </span>\n                  </div>\n                  <div class=\"cqa-api-edit-step-payload-textarea-cell\">\n                    <div class=\"cqa-api-edit-step-payload-textarea cqa-w-full cqa-flex cqa-flex-col cqa-min-h-0\"\n                      [ngClass]=\"{'cqa-api-edit-step-payload-textarea--error': payloadJsonError}\">\n                      <textarea #payloadTextareaRef\n                        class=\"cqa-api-edit-step-payload-textarea-input cqa-w-full cqa-outline-none cqa-box-border\"\n                        [ngClass]=\"{'cqa-api-edit-step-payload-textarea-input--error': payloadJsonError}\"\n                        [value]=\"payloadText\"\n                        placeholder=\"\"\n                        [attr.aria-label]=\"'Payload'\"\n                        [attr.aria-invalid]=\"!!payloadJsonError\"\n                        (input)=\"onPayloadInput($event)\"\n                        (keydown)=\"onPayloadKeydown($event)\">\n                      </textarea>\n                    </div>\n                  </div>\n                </div>\n                <p *ngIf=\"payloadJsonError\" class=\"cqa-api-edit-step-payload-json-error-msg\">\n                  Invalid JSON format. Please check your syntax.\n                </p>\n              </div>\n\n              <!-- x-www-form-urlencoded: Key\u2013Value rows, add/remove dynamically -->\n              <div *ngIf=\"payloadType === 'x-www-form-urlencoded'\" class=\"cqa-api-edit-step-key-value\">\n                <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n                  <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n                  <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n                  <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n                    aria-hidden=\"true\"></span>\n                </div>\n                <div *ngFor=\"let row of keyValueRows; let i = index; trackBy: trackByKeyValue\" [formGroup]=\"row\"\n                  class=\"cqa-api-edit-step-key-value-row\">\n                  <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                    (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n                  </cqa-custom-input>\n                  <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                    (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n                  </cqa-custom-input>\n                  <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n                    [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyValueRow(i)\">\n                    <svg class=\"cqa-api-edit-step-key-value-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                      <path\n                        d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                        fill=\"#F9BFBF\" />\n                    </svg>\n                  </cqa-button>\n                </div>\n                <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n                  <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                    customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addKeyValueRow()\">\n                  </cqa-button>\n                </div>\n              </div>\n\n              <!-- Form Data: Key\u2013Type\u2013Value rows; Type is a dropdown (Text/File), add/remove dynamically -->\n              <div *ngIf=\"payloadType === 'form-data'\" class=\"cqa-api-edit-step-key-type-value\">\n                <div class=\"cqa-api-edit-step-key-type-value-header\">\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Key</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Type</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Value</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label cqa-api-edit-step-key-type-value-label--empty\"\n                    aria-hidden=\"true\"></span>\n                </div>\n                <div *ngFor=\"let row of keyTypeValueRows; let i = index; trackBy: trackByKeyTypeValue\" [formGroup]=\"row\"\n                  class=\"cqa-api-edit-step-key-type-value-row\">\n                  <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                    (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Key\">\n                  </cqa-custom-input>\n                  <cqa-dynamic-select [form]=\"row\" [config]=\"keyTypeValueTypeSelectConfig\"\n                    class=\"cqa-api-edit-step-key-type-value-type-select cqa-w-full\">\n                  </cqa-dynamic-select>\n                  <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                    (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Value\">\n                  </cqa-custom-input>\n                  <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-type-value-delete'\"\n                    [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyTypeValueRow(i)\">\n                    <svg class=\"cqa-api-edit-step-key-type-value-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                      <path\n                        d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                        fill=\"#F9BFBF\" />\n                    </svg>\n                  </cqa-button>\n                </div>\n                <div class=\"cqa-api-edit-step-key-type-value-add-wrap\">\n                  <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                    customClass=\"cqa-api-edit-step-key-type-value-add-btn\" (clicked)=\"addKeyTypeValueRow()\">\n                  </cqa-button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n\n        <!-- Advanced settings (step-level) -->\n        <div class=\"cqa-mt-4\">\n          <button\n            type=\"button\"\n            class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n            (click)=\"advancedExpanded = !advancedExpanded\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"advancedExpanded\">\n              expand_more\n            </mat-icon>\n          </button>\n          <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n            <cqa-advanced-variables-form\n              [advancedVariables]=\"advancedSettingsVariables\"\n              [advancedVariableForm]=\"advancedVariablesForm\"\n              (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n              (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n            </cqa-advanced-variables-form>\n          </div>\n        </div>\n\n    </div>\n    <!-- Step 2: Variable Name: input, validation, Back / Next -->\n    <div *ngIf=\"currentStep === 2\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <div class=\"cqa-api-edit-step-variable-section\">\n          <div class=\"cqa-api-edit-step-variable-input-wrap\">\n            <cqa-custom-input [(value)]=\"variableName\" [label]=\"''\" placeholder=\"Variable Name\" [fullWidth]=\"true\"\n              size=\"md\" (valueChange)=\"onVariableNameChange()\" aria-label=\"Variable Name\">\n            </cqa-custom-input>\n          </div>\n          <p *ngIf=\"variableNameError\" class=\"cqa-api-edit-step-variable-error\" role=\"alert\">{{ variableNameError }}</p>\n        </div>\n    </div>\n    <!-- Step 3: Response Body / Status tabs -->\n    <div *ngIf=\"currentStep === 3\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n          <div class=\"cqa-api-edit-step-tabs\">\n            <cqa-button *ngFor=\"let tab of responseVerificationTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n              [customClass]=\"'cqa-api-edit-step-tab' + (activeResponseVerificationTab === tab.value ? ' cqa-api-edit-step-tab--active' : '')\"\n              (clicked)=\"setResponseVerificationTab(tab.value)\">\n            </cqa-button>\n          </div>\n\n          <!-- Response Body tab content: verification grid -->\n          <div *ngIf=\"activeResponseVerificationTab === 'response-body'\" class=\"cqa-api-edit-step-step3-content\">\n            <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n              <span></span>\n              <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n                customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addVerificationRow()\">\n              </cqa-button>\n            </div>\n            <div class=\"cqa-api-edit-step-verification\">\n              <div class=\"cqa-api-edit-step-verification-grid cqa-api-edit-step-verification-grid-header\">\n                <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n                <span class=\"cqa-api-edit-step-verification-label\">JSON Path</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Data Type</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n                <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of verificationRows; let i = index; trackBy: trackByVerification\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-verification-row\">\n                <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n                <cqa-custom-input [value]=\"row.get('jsonPath')?.value ?? ''\"\n                  (valueChange)=\"row.get('jsonPath')?.setValue($event)\" placeholder=\"Json Path\" [fullWidth]=\"true\"\n                  size=\"sm\" class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"JSON Path\">\n                </cqa-custom-input>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"verificationSelectConfig\"\n                  class=\"cqa-api-edit-step-verification-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"verificationDataTypeSelectConfig\"\n                  class=\"cqa-api-edit-step-verification-select cqa-w-full\"\n                  (selectionChange)=\"onVerificationDataTypeChange(row, $event)\">\n                </cqa-dynamic-select>\n                <!-- Expected Value: text for String/Array/Object, number for Number, dropdown for Boolean -->\n                <ng-container [ngSwitch]=\"row.get('dataType')?.value\">\n                  <cqa-dynamic-select *ngSwitchCase=\"'boolean'\" [form]=\"row\"\n                    [config]=\"verificationExpectedValueBooleanSelectConfig\"\n                    class=\"cqa-api-edit-step-verification-select cqa-api-edit-step-verification-expected-select cqa-w-full\">\n                  </cqa-dynamic-select>\n                  <cqa-custom-input *ngSwitchCase=\"'number'\" [value]=\"row.get('expectedValue')?.value ?? ''\"\n                    (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value (number)\"\n                    type=\"number\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-verification-input cqa-api-edit-step-verification-expected-number\"\n                    ariaLabel=\"Expected Value\">\n                  </cqa-custom-input>\n                  <cqa-custom-input *ngSwitchDefault [value]=\"row.get('expectedValue')?.value ?? ''\"\n                    (valueChange)=\"row.get('expectedValue')?.setValue($event)\"\n                    placeholder=\"Expected Value in String\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"Expected Value\">\n                  </cqa-custom-input>\n                </ng-container>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeVerificationRow(i)\">\n                  <svg class=\"cqa-api-edit-step-verification-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n            </div>\n          </div>\n\n          <!-- Status tab content: S.no, Verification dropdown, Expected Value, add/remove rows -->\n          <div *ngIf=\"activeResponseVerificationTab === 'status'\" class=\"cqa-api-edit-step-step3-content\">\n            <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n              <span></span>\n              <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n                customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addStatusVerificationRow()\">\n              </cqa-button>\n            </div>\n            <div class=\"cqa-api-edit-step-status-verification\">\n              <div class=\"cqa-api-edit-step-status-verification-header\">\n                <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n                <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of statusVerificationRows; let i = index; trackBy: trackByStatusVerification\"\n                [formGroup]=\"row\" class=\"cqa-api-edit-step-status-verification-row\">\n                <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"statusVerificationSelectConfig\"\n                  class=\"cqa-api-edit-step-status-verification-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-custom-input [value]=\"row.get('expectedValue')?.value ?? ''\"\n                  (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value\"\n                  type=\"number\" [fullWidth]=\"true\" size=\"sm\" class=\"cqa-api-edit-step-verification-input\"\n                  ariaLabel=\"Expected Value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeStatusVerificationRow(i)\">\n                  <svg class=\"cqa-api-edit-step-verification-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n            </div>\n          </div>\n        </div>\n    </div>\n  </div>\n\n  <!-- Response Preview -->\n  <div #responsePreviewRef class=\"cqa-api-edit-step-response\">\n    <h3 class=\"cqa-api-edit-step-response-title cqa-text-[14px] cqa-font-bold cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-mb-[12px] cqa-shrink-0\">Response Preview</h3>\n    <pre class=\"cqa-api-edit-step-response-content\">{{ responsePreview }}</pre>\n  </div>\n\n  <!-- Step actions: one row, full width. Step 1: Cancel + Next; Step 2: Back + Next; Step 3: Back + Create -->\n  <div class=\"cqa-api-edit-step-actions\">\n    <ng-container [ngSwitch]=\"currentStep\">\n      <ng-container *ngSwitchCase=\"1\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n          customClass=\"cqa-api-edit-step-actions-btn-cancel\" (clicked)=\"onCancel()\">\n        </cqa-button>\n        <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n          customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n        </cqa-button>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"2\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n          customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n        </cqa-button>\n        <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n          customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n        </cqa-button>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"3\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n          customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n        </cqa-button>\n        <cqa-button *ngIf=\"!isCreatingStep\" type=\"button\" variant=\"filled\" btnSize=\"lg\" [text]=\"editMode ? 'Update' : 'Create'\"\n          customClass=\"cqa-api-edit-step-actions-btn-create\" (clicked)=\"onCreate()\">\n        </cqa-button>\n        <!-- Match cqa-button flex: actions row styles > cqa-button { flex: 1 1 0 } \u2014 loader div must grow same width as Create -->\n        <div *ngIf=\"isCreatingStep\" class=\"cqa-api-edit-step-actions-loader cqa-w-full cqa-min-h-[38px] cqa-rounded-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n          <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n            [inlineStyles]=\"'min-height: 38px; height: 38px; width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n            variant=\"info\" size=\"medium\"></cqa-badge>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { initialMethod: [{
                 type: Input
             }], initialEnvironment: [{
@@ -38468,16 +38196,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isCreatingStep: [{
                 type: Input
-            }], initialApiType: [{
-                type: Input
-            }], initialGraphQL: [{
-                type: Input
-            }], graphQLSchemaSource: [{
-                type: Input
-            }], graphQLOperations: [{
-                type: Input
-            }], isLoadingGraphQLSchema: [{
-                type: Input
             }], importCurl: [{
                 type: Output
             }], importCurlCancel: [{
@@ -38510,8 +38228,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], environmentLoadMore: [{
                 type: Output
-            }], loadSchema: [{
-                type: Output
             }], authTypeOptions: [{
                 type: Input
             }], initialAuthType: [{
@@ -53508,7 +53224,6 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         DeleteStepsComponent,
         RunExecutionAlertComponent,
         ApiEditStepComponent,
-        GraphQLOperationPickerComponent,
         LiveConversationComponent,
         StepBuilderActionComponent,
         StepBuilderLoopComponent,
@@ -53704,7 +53419,6 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         DeleteStepsComponent,
         RunExecutionAlertComponent,
         ApiEditStepComponent,
-        GraphQLOperationPickerComponent,
         LiveConversationComponent,
         StepBuilderActionComponent,
         StepBuilderLoopComponent,
@@ -53947,7 +53661,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         DeleteStepsComponent,
                         RunExecutionAlertComponent,
                         ApiEditStepComponent,
-                        GraphQLOperationPickerComponent,
                         LiveConversationComponent,
                         StepBuilderActionComponent,
                         StepBuilderLoopComponent,
@@ -54149,7 +53862,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         DeleteStepsComponent,
                         RunExecutionAlertComponent,
                         ApiEditStepComponent,
-                        GraphQLOperationPickerComponent,
                         LiveConversationComponent,
                         StepBuilderActionComponent,
                         StepBuilderLoopComponent,
@@ -54903,5 +54615,5 @@ function buildTestCaseDetailsFromApi(data, options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, ALL_FILTER_VALUE, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiPromptCardComponent, AiReasoningComponent, ApiEditStepComponent, ApiMockingCardComponent, ApiStepComponent, AssignEnvironmentsDialogComponent, AuditLogDrawerComponent, AuditLogDrawerService, AuditLogEntryCardComponent, 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_COLUMN_FIELD_ID, FOLDER_DRAG_MIME, FOLDER_NAME_MAX_LENGTH, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FolderDragDirective, FolderDropDirective, FolderSidebarComponent, FullTableLoaderComponent, GraphQLOperationPickerComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MONACO_LANGUAGE_MAP, MainStepCollapseComponent, ManageColumnsDialogComponent, MetricsCardComponent, MixedVariableInputComponent, ModularTableTemplateComponent, MoveToFolderDialogComponent, NamePromptModalComponent, NetworkRequestComponent, NewDbConfigDialogComponent, 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, ViewportSelectorComponent, 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, ALL_FILTER_VALUE, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiPromptCardComponent, AiReasoningComponent, ApiEditStepComponent, ApiMockingCardComponent, ApiStepComponent, AssignEnvironmentsDialogComponent, AuditLogDrawerComponent, AuditLogDrawerService, AuditLogEntryCardComponent, 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_COLUMN_FIELD_ID, 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, ManageColumnsDialogComponent, MetricsCardComponent, MixedVariableInputComponent, ModularTableTemplateComponent, MoveToFolderDialogComponent, NamePromptModalComponent, NetworkRequestComponent, NewDbConfigDialogComponent, 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, ViewportSelectorComponent, 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