@cqa-lib/cqa-ui 1.1.555 → 1.1.556

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

@@ -11634,6 +11634,12 @@ class MoveTestSuiteDialogComponent {
         this.pickedFolderIdChange = new EventEmitter();
         this.submitted = new EventEmitter();
         this.cancelled = new EventEmitter();
+        /** Fires when a folder needs its children fetched. Emitted by `pick` (row
+         *  click) and `toggleExpanded` (chevron click) when the target node has
+         *  `hasChildren = true` but `loadedPages == null` and is not already fetching.
+         *  Hosts subscribe and call their paginated fetch, mutating the FolderNode
+         *  in place (set `children`, `loadedPages`, `childrenLoading`). */
+        this.folderChildrenRequested = new EventEmitter();
         /** Bubble cqa-custom-input focus/blur events up to hosts. Useful when
          *  `fieldsDisabled = false` and the host wants to react to interaction. */
         this.currentFieldFocus = new EventEmitter();
@@ -11645,6 +11651,11 @@ class MoveTestSuiteDialogComponent {
          *  suite starts in Unorganized (`currentFolderId = null`) so a fresh dialog
          *  doesn't appear valid just because `pickedFolderId` also defaults to null. */
         this.pickedTouched = false;
+        /** Folder ids currently expanded in the inlined picker. Managed entirely
+         *  inside this component (no external Input) so it survives the host pushing
+         *  a new `folders` reference after each lazy-fetch resolves. */
+        this.expandedIds = new Set();
+        this.trackById = (_, row) => row.id;
     }
     set folders(value) {
         this._folders = value || [];
@@ -11661,18 +11672,79 @@ class MoveTestSuiteDialogComponent {
         this.cdr.markForCheck();
     }
     get testSuiteLabels() { return this._testSuiteLabels; }
-    onParentPicked(id) {
-        let next = null;
-        if (id != null) {
-            const coerced = typeof id === 'number' ? id : Number(id);
-            if (Number.isFinite(coerced))
-                next = coerced;
+    ngOnInit() {
+        this.seedExpandedIds();
+    }
+    ngOnChanges(changes) {
+        // Re-seed only when expansion-intent inputs change. NEVER on `folders` —
+        // the host pushes a new top-level reference after every lazy fetch and a
+        // reseed there would collapse the folder the user just expanded.
+        if (changes['currentFolderId'] || changes['pickedFolderId']) {
+            this.seedExpandedIds();
         }
-        this.pickedFolderId = next;
+    }
+    /** Folder-row click handler. Selects the folder as the destination and, when
+     *  the folder has unloaded children, auto-expands it and asks the host to
+     *  fetch its children. */
+    pick(id) {
+        this.pickedFolderId = id;
         this.pickedTouched = true;
-        this.pickedFolderIdChange.emit(next);
+        this.pickedFolderIdChange.emit(id);
+        if (id != null) {
+            this.expandedIds.add(id);
+            this.requestChildrenIfMissing(id);
+        }
+        this.cdr.markForCheck();
+    }
+    /** Chevron click handler. Toggles expansion locally; on expand path, asks
+     *  the host to fetch children when not already loaded. */
+    toggleExpanded(id, event) {
+        event.stopPropagation();
+        if (this.expandedIds.has(id)) {
+            this.expandedIds.delete(id);
+        }
+        else {
+            this.expandedIds.add(id);
+            this.requestChildrenIfMissing(id);
+        }
         this.cdr.markForCheck();
     }
+    isPicked(id) {
+        return this.pickedFolderId === id;
+    }
+    /** "Unorganized" row is disabled when the suite is already in Unorganized. */
+    get isUnorganizedDisabled() {
+        return this.currentFolderId == null;
+    }
+    /** Flattened, depth-indented row descriptors fed into the template `*ngFor`.
+     *  Walks `_folders`, derives chevron / loading / expanded state per node. */
+    get flatRows() {
+        const out = [];
+        const walk = (nodes, depth) => {
+            for (const n of nodes || []) {
+                // Drive the chevron from the backend's authoritative `hasChildren` so
+                // it shows BEFORE children are loaded — required for lazy-load.
+                const hasChildren = !!n.hasChildren;
+                const expanded = this.expandedIds.has(n.id);
+                const childrenLoading = !!n.childrenLoading;
+                const childrenLoaded = !!(n.children && n.children.length);
+                out.push({
+                    id: n.id,
+                    name: n.name,
+                    depth,
+                    disabled: n.id === this.currentFolderId,
+                    hasChildren,
+                    expanded,
+                    childrenLoading,
+                    showLoadingPlaceholder: expanded && childrenLoading && !childrenLoaded,
+                });
+                if (expanded && childrenLoaded)
+                    walk(n.children, depth + 1);
+            }
+        };
+        walk(this._folders, 0);
+        return out;
+    }
     /** True once the user has picked a destination via the embedded tree. Drives
      *  the destination-readout styling (indigo when picked, muted when not). */
     get hasPick() {
@@ -11742,6 +11814,47 @@ class MoveTestSuiteDialogComponent {
     onDestinationFieldBlurred(event) {
         this.destinationFieldBlur.emit(event);
     }
+    requestChildrenIfMissing(id) {
+        const node = this.findNode(this._folders, id);
+        if (!node)
+            return;
+        if (node.hasChildren && node.loadedPages == null && !node.childrenLoading) {
+            this.folderChildrenRequested.emit(id);
+        }
+    }
+    seedExpandedIds() {
+        this.expandedIds = new Set();
+        const seed = this.currentFolderId != null ? this.currentFolderId : this.pickedFolderId;
+        if (seed != null) {
+            const trail = [];
+            this.collectAncestors(this._folders, seed, trail);
+            trail.forEach((id) => this.expandedIds.add(id));
+        }
+    }
+    collectAncestors(nodes, targetId, acc) {
+        for (const n of nodes || []) {
+            acc.push(n.id);
+            if (n.id === targetId)
+                return true;
+            if (n.children && this.collectAncestors(n.children, targetId, acc))
+                return true;
+            acc.pop();
+        }
+        return false;
+    }
+    findNode(nodes, id) {
+        var _a;
+        for (const n of nodes || []) {
+            if (n.id === id)
+                return n;
+            if ((_a = n.children) === null || _a === void 0 ? void 0 : _a.length) {
+                const hit = this.findNode(n.children, id);
+                if (hit)
+                    return hit;
+            }
+        }
+        return null;
+    }
     findFolderName(nodes, id) {
         var _a;
         for (const n of nodes || []) {
@@ -11757,7 +11870,7 @@ class MoveTestSuiteDialogComponent {
     }
 }
 MoveTestSuiteDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MoveTestSuiteDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MoveTestSuiteDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MoveTestSuiteDialogComponent, selector: "cqa-move-test-suite-dialog", inputs: { folders: "folders", labels: "labels", testSuiteLabels: "testSuiteLabels", currentFolderId: "currentFolderId", currentFolderName: "currentFolderName", suiteName: "suiteName", pickedFolderId: "pickedFolderId", pickerHeight: "pickerHeight", fieldsDisabled: "fieldsDisabled" }, outputs: { pickedFolderIdChange: "pickedFolderIdChange", submitted: "submitted", cancelled: "cancelled", currentFieldFocus: "currentFieldFocus", currentFieldBlur: "currentFieldBlur", destinationFieldFocus: "destinationFieldFocus", destinationFieldBlur: "destinationFieldBlur" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: `
+MoveTestSuiteDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MoveTestSuiteDialogComponent, selector: "cqa-move-test-suite-dialog", inputs: { folders: "folders", labels: "labels", testSuiteLabels: "testSuiteLabels", currentFolderId: "currentFolderId", currentFolderName: "currentFolderName", suiteName: "suiteName", pickedFolderId: "pickedFolderId", pickerHeight: "pickerHeight", fieldsDisabled: "fieldsDisabled" }, outputs: { pickedFolderIdChange: "pickedFolderIdChange", submitted: "submitted", cancelled: "cancelled", folderChildrenRequested: "folderChildrenRequested", currentFieldFocus: "currentFieldFocus", currentFieldBlur: "currentFieldBlur", destinationFieldFocus: "destinationFieldFocus", destinationFieldBlur: "destinationFieldBlur" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: `
     <div class="cqa-flex cqa-flex-col cqa-gap-2 cqa-w-full">
       <!-- Test suite name (read-only display; surfaces which suite is being moved) -->
       <cqa-custom-input
@@ -11790,17 +11903,84 @@ MoveTestSuiteDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
         (blurred)="onDestinationFieldBlurred($event)"
       ></cqa-custom-input>
 
-      <!-- Folder tree picker -->
-      <cqa-move-to-folder-dialog
-        [folders]="folders"
-        [labels]="labels"
-        [currentFolderId]="currentFolderId"
-        [pickedFolderId]="pickedFolderId"
-        [pickerHeight]="pickerHeight"
-        (pickedFolderIdChange)="onParentPicked($event)"
-      ></cqa-move-to-folder-dialog>
+      <!-- Folder tree picker (inlined; takes reference from cqa-move-to-folder-dialog
+           but does not embed it, so the lazy-fetch wiring and expansion state stay
+           local to this dialog). -->
+      <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-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>
+
+      <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-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>
+
+      <div class="cqa-flex cqa-flex-col cqa-border-solid cqa-border cqa-border-[#E2E2E3] cqa-rounded-[10px] cqa-py-2 cqa-w-full cqa-overflow-y-auto cqa-bg-white cqa-scrollbar-thin" [style.height]="pickerHeight">
+        <div
+          role="button"
+          tabindex="0"
+          class="cqa-flex cqa-items-center cqa-gap-2.5 cqa-px-4 cqa-py-2 cqa-cursor-pointer cqa-transition-colors cqa-text-sm"
+          [ngClass]="isPicked(null) ? 'cqa-bg-indigo-50 cqa-text-indigo-700' : 'cqa-text-neutral-800 hover:cqa-bg-neutral-50'"
+          [class.cqa-opacity-40]="isUnorganizedDisabled"
+          [class.cqa-cursor-not-allowed]="isUnorganizedDisabled"
+          [attr.aria-disabled]="isUnorganizedDisabled || null"
+          (click)="!isUnorganizedDisabled && pick(null)"
+          (keydown.enter)="!isUnorganizedDisabled && pick(null)"
+          (keydown.space)="$event.preventDefault(); !isUnorganizedDisabled && pick(null)"
+        >
+          <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>
+
+        <ng-container *ngFor="let row of flatRows; trackBy: trackById">
+          <div
+            role="button"
+            tabindex="0"
+            class="cqa-flex cqa-items-center cqa-gap-2.5 cqa-py-2 cqa-pr-4 cqa-cursor-pointer cqa-transition-colors cqa-text-sm"
+            [ngClass]="isPicked(row.id) ? 'cqa-bg-indigo-50 cqa-text-indigo-700' : 'cqa-text-neutral-800 hover:cqa-bg-neutral-50'"
+            [class.cqa-opacity-40]="row.disabled"
+            [class.cqa-cursor-not-allowed]="row.disabled"
+            [style.paddingLeft.px]="16 + row.depth * 24"
+            (click)="!row.disabled && pick(row.id)"
+            (keydown.enter)="!row.disabled && pick(row.id)"
+            (keydown.space)="!row.disabled && $event.preventDefault(); !row.disabled && pick(row.id)"
+          >
+            <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-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)"
+            >
+              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
+                   [class.cqa-rotate-90]="row.expanded" style="transition: transform 120ms ease;">
+                <path d="M5 3L9 7L5 11" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </button>
+            <ng-template #chevronPlaceholder>
+              <span class="cqa-inline-block cqa-w-5 cqa-h-5 cqa-flex-shrink-0"></span>
+            </ng-template>
+
+            <ng-container *ngTemplateOutlet="folderIconTpl"></ng-container>
+            <span class="cqa-truncate">{{ row.name }}</span>
+          </div>
+
+          <div
+            *ngIf="row.showLoadingPlaceholder"
+            class="cqa-flex cqa-items-center cqa-gap-2.5 cqa-py-2 cqa-pr-4 cqa-text-sm cqa-text-neutral-500 cqa-italic"
+            [style.paddingLeft.px]="16 + (row.depth + 1) * 24"
+          >
+            <span class="cqa-inline-block cqa-w-5 cqa-h-5 cqa-flex-shrink-0"></span>
+            <span>Loading…</span>
+          </div>
+        </ng-container>
+      </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"] }], 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"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MoveTestSuiteDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-move-test-suite-dialog', template: `
@@ -11836,15 +12016,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
         (blurred)="onDestinationFieldBlurred($event)"
       ></cqa-custom-input>
 
-      <!-- Folder tree picker -->
-      <cqa-move-to-folder-dialog
-        [folders]="folders"
-        [labels]="labels"
-        [currentFolderId]="currentFolderId"
-        [pickedFolderId]="pickedFolderId"
-        [pickerHeight]="pickerHeight"
-        (pickedFolderIdChange)="onParentPicked($event)"
-      ></cqa-move-to-folder-dialog>
+      <!-- Folder tree picker (inlined; takes reference from cqa-move-to-folder-dialog
+           but does not embed it, so the lazy-fetch wiring and expansion state stay
+           local to this dialog). -->
+      <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-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>
+
+      <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-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>
+
+      <div class="cqa-flex cqa-flex-col cqa-border-solid cqa-border cqa-border-[#E2E2E3] cqa-rounded-[10px] cqa-py-2 cqa-w-full cqa-overflow-y-auto cqa-bg-white cqa-scrollbar-thin" [style.height]="pickerHeight">
+        <div
+          role="button"
+          tabindex="0"
+          class="cqa-flex cqa-items-center cqa-gap-2.5 cqa-px-4 cqa-py-2 cqa-cursor-pointer cqa-transition-colors cqa-text-sm"
+          [ngClass]="isPicked(null) ? 'cqa-bg-indigo-50 cqa-text-indigo-700' : 'cqa-text-neutral-800 hover:cqa-bg-neutral-50'"
+          [class.cqa-opacity-40]="isUnorganizedDisabled"
+          [class.cqa-cursor-not-allowed]="isUnorganizedDisabled"
+          [attr.aria-disabled]="isUnorganizedDisabled || null"
+          (click)="!isUnorganizedDisabled && pick(null)"
+          (keydown.enter)="!isUnorganizedDisabled && pick(null)"
+          (keydown.space)="$event.preventDefault(); !isUnorganizedDisabled && pick(null)"
+        >
+          <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>
+
+        <ng-container *ngFor="let row of flatRows; trackBy: trackById">
+          <div
+            role="button"
+            tabindex="0"
+            class="cqa-flex cqa-items-center cqa-gap-2.5 cqa-py-2 cqa-pr-4 cqa-cursor-pointer cqa-transition-colors cqa-text-sm"
+            [ngClass]="isPicked(row.id) ? 'cqa-bg-indigo-50 cqa-text-indigo-700' : 'cqa-text-neutral-800 hover:cqa-bg-neutral-50'"
+            [class.cqa-opacity-40]="row.disabled"
+            [class.cqa-cursor-not-allowed]="row.disabled"
+            [style.paddingLeft.px]="16 + row.depth * 24"
+            (click)="!row.disabled && pick(row.id)"
+            (keydown.enter)="!row.disabled && pick(row.id)"
+            (keydown.space)="!row.disabled && $event.preventDefault(); !row.disabled && pick(row.id)"
+          >
+            <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-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)"
+            >
+              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
+                   [class.cqa-rotate-90]="row.expanded" style="transition: transform 120ms ease;">
+                <path d="M5 3L9 7L5 11" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </button>
+            <ng-template #chevronPlaceholder>
+              <span class="cqa-inline-block cqa-w-5 cqa-h-5 cqa-flex-shrink-0"></span>
+            </ng-template>
+
+            <ng-container *ngTemplateOutlet="folderIconTpl"></ng-container>
+            <span class="cqa-truncate">{{ row.name }}</span>
+          </div>
+
+          <div
+            *ngIf="row.showLoadingPlaceholder"
+            class="cqa-flex cqa-items-center cqa-gap-2.5 cqa-py-2 cqa-pr-4 cqa-text-sm cqa-text-neutral-500 cqa-italic"
+            [style.paddingLeft.px]="16 + (row.depth + 1) * 24"
+          >
+            <span class="cqa-inline-block cqa-w-5 cqa-h-5 cqa-flex-shrink-0"></span>
+            <span>Loading…</span>
+          </div>
+        </ng-container>
+      </div>
     </div>
   `, host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { folders: [{
@@ -11871,6 +12118,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], cancelled: [{
                 type: Output
+            }], folderChildrenRequested: [{
+                type: Output
             }], currentFieldFocus: [{
                 type: Output
             }], currentFieldBlur: [{