@cqa-lib/cqa-ui 1.1.529 → 1.1.531
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/audit-log-drawer/audit-log-drawer.component.mjs +146 -0
- package/esm2020/lib/audit-log-drawer/audit-log-drawer.models.mjs +2 -0
- package/esm2020/lib/audit-log-drawer/audit-log-drawer.service.mjs +84 -0
- package/esm2020/lib/audit-log-drawer/audit-log-entry-card.component.mjs +30 -0
- package/esm2020/lib/manage-columns-dialog/manage-columns-dialog.component.mjs +133 -0
- package/esm2020/lib/manage-columns-dialog/manage-columns-dialog.models.mjs +2 -0
- package/esm2020/lib/templates/modular-table-template/folder-sidebar/folder-sidebar.component.mjs +55 -4
- package/esm2020/lib/ui-kit.module.mjs +16 -1
- package/esm2020/public-api.mjs +7 -1
- package/fesm2015/cqa-lib-cqa-ui.mjs +439 -5
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +433 -5
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/audit-log-drawer/audit-log-drawer.component.d.ts +34 -0
- package/lib/audit-log-drawer/audit-log-drawer.models.d.ts +43 -0
- package/lib/audit-log-drawer/audit-log-drawer.service.d.ts +13 -0
- package/lib/audit-log-drawer/audit-log-entry-card.component.d.ts +10 -0
- package/lib/manage-columns-dialog/manage-columns-dialog.component.d.ts +32 -0
- package/lib/manage-columns-dialog/manage-columns-dialog.models.d.ts +11 -0
- package/lib/templates/modular-table-template/folder-sidebar/folder-sidebar.component.d.ts +10 -0
- package/lib/ui-kit.module.d.ts +92 -89
- package/package.json +1 -1
- package/public-api.d.ts +6 -0
- package/styles.css +1 -1
|
@@ -49,7 +49,7 @@ import { DndModule } from 'ngx-drag-drop';
|
|
|
49
49
|
import * as jquery from 'jquery';
|
|
50
50
|
import * as momentImport from 'moment';
|
|
51
51
|
import 'daterangepicker';
|
|
52
|
-
import { filter } from 'rxjs/operators';
|
|
52
|
+
import { filter, takeUntil } from 'rxjs/operators';
|
|
53
53
|
import { Subject, BehaviorSubject } from 'rxjs';
|
|
54
54
|
import * as i1$7 from 'ngx-monaco-editor';
|
|
55
55
|
import { MonacoEditorModule } from 'ngx-monaco-editor';
|
|
@@ -9033,6 +9033,11 @@ class FolderSidebarComponent {
|
|
|
9033
9033
|
this.renameDraft = '';
|
|
9034
9034
|
/** Inline rename uses the same name rules as the New Folder dialog. */
|
|
9035
9035
|
this.renameMaxLength = 20;
|
|
9036
|
+
/** Transient flag: turns the rename input red briefly when the user keystrokes
|
|
9037
|
+
* while already at `renameMaxLength`, so the silent maxlength clamp gets a
|
|
9038
|
+
* visible "you've hit the cap" signal. Cleared by `renameLimitFlashTimer`. */
|
|
9039
|
+
this.renameLimitFlash = false;
|
|
9040
|
+
this.renameLimitFlashTimer = null;
|
|
9036
9041
|
/** Id of the folder whose context menu is open, or null when closed. */
|
|
9037
9042
|
this.contextMenuFolderId = null;
|
|
9038
9043
|
/** Viewport-anchored position (client coordinates) for the floating menu. */
|
|
@@ -9147,6 +9152,7 @@ class FolderSidebarComponent {
|
|
|
9147
9152
|
cancelRename() {
|
|
9148
9153
|
this.renamingId = null;
|
|
9149
9154
|
this.renameDraft = '';
|
|
9155
|
+
this.clearRenameLimitFlash();
|
|
9150
9156
|
this.cdr.markForCheck();
|
|
9151
9157
|
}
|
|
9152
9158
|
onRenameKey(event, n) {
|
|
@@ -9160,11 +9166,55 @@ class FolderSidebarComponent {
|
|
|
9160
9166
|
if (!this.isRenameDraftValid)
|
|
9161
9167
|
return;
|
|
9162
9168
|
this.commitRename(n);
|
|
9169
|
+
return;
|
|
9163
9170
|
}
|
|
9164
|
-
|
|
9171
|
+
if (event.key === 'Escape') {
|
|
9165
9172
|
event.preventDefault();
|
|
9166
9173
|
this.cancelRename();
|
|
9174
|
+
return;
|
|
9175
|
+
}
|
|
9176
|
+
// For any other keystroke, detect "user is trying to type past maxlength" and
|
|
9177
|
+
// briefly flash the input red. The browser's `maxlength` attribute already
|
|
9178
|
+
// silently blocks the character; this surfaces a visible "you've hit the cap"
|
|
9179
|
+
// signal that would otherwise be missing.
|
|
9180
|
+
if (this.isPrintableKey(event) && this.wouldExceedRenameLimit(event)) {
|
|
9181
|
+
this.triggerRenameLimitFlash();
|
|
9182
|
+
}
|
|
9183
|
+
}
|
|
9184
|
+
isPrintableKey(event) {
|
|
9185
|
+
// Single-character keys are printables (a, B, 1, !, space). Modifier-driven
|
|
9186
|
+
// shortcuts (Ctrl/Meta) shouldn't count — they don't insert text.
|
|
9187
|
+
return event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
|
|
9188
|
+
}
|
|
9189
|
+
wouldExceedRenameLimit(event) {
|
|
9190
|
+
var _a, _b;
|
|
9191
|
+
// The new length after the keystroke would be: current - selectionLength + 1.
|
|
9192
|
+
// If a selection covers part of the value, typing replaces that range, so the
|
|
9193
|
+
// net length might still fit under the cap.
|
|
9194
|
+
const target = event.target;
|
|
9195
|
+
const start = (_a = target === null || target === void 0 ? void 0 : target.selectionStart) !== null && _a !== void 0 ? _a : 0;
|
|
9196
|
+
const end = (_b = target === null || target === void 0 ? void 0 : target.selectionEnd) !== null && _b !== void 0 ? _b : 0;
|
|
9197
|
+
const selectedLen = Math.max(0, end - start);
|
|
9198
|
+
const draftLen = (this.renameDraft || '').length;
|
|
9199
|
+
return draftLen - selectedLen >= this.renameMaxLength;
|
|
9200
|
+
}
|
|
9201
|
+
triggerRenameLimitFlash() {
|
|
9202
|
+
this.renameLimitFlash = true;
|
|
9203
|
+
if (this.renameLimitFlashTimer)
|
|
9204
|
+
clearTimeout(this.renameLimitFlashTimer);
|
|
9205
|
+
this.renameLimitFlashTimer = setTimeout(() => {
|
|
9206
|
+
this.renameLimitFlash = false;
|
|
9207
|
+
this.renameLimitFlashTimer = null;
|
|
9208
|
+
this.cdr.markForCheck();
|
|
9209
|
+
}, FolderSidebarComponent.RENAME_LIMIT_FLASH_MS);
|
|
9210
|
+
this.cdr.markForCheck();
|
|
9211
|
+
}
|
|
9212
|
+
clearRenameLimitFlash() {
|
|
9213
|
+
if (this.renameLimitFlashTimer) {
|
|
9214
|
+
clearTimeout(this.renameLimitFlashTimer);
|
|
9215
|
+
this.renameLimitFlashTimer = null;
|
|
9167
9216
|
}
|
|
9217
|
+
this.renameLimitFlash = false;
|
|
9168
9218
|
}
|
|
9169
9219
|
deleteFolder(n, event) {
|
|
9170
9220
|
if (!this.allowDelete)
|
|
@@ -9361,6 +9411,7 @@ class FolderSidebarComponent {
|
|
|
9361
9411
|
}
|
|
9362
9412
|
ngOnDestroy() {
|
|
9363
9413
|
this.clearAllExpandTimers();
|
|
9414
|
+
this.clearRenameLimitFlash();
|
|
9364
9415
|
}
|
|
9365
9416
|
onRowKeydown(event, row, index) {
|
|
9366
9417
|
const rows = this.rows;
|
|
@@ -9422,11 +9473,12 @@ class FolderSidebarComponent {
|
|
|
9422
9473
|
}, 0);
|
|
9423
9474
|
}
|
|
9424
9475
|
}
|
|
9476
|
+
FolderSidebarComponent.RENAME_LIMIT_FLASH_MS = 600;
|
|
9425
9477
|
FolderSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FolderSidebarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
9426
|
-
FolderSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FolderSidebarComponent, selector: "cqa-folder-sidebar", inputs: { folders: "folders", selectedFolderId: "selectedFolderId", expandedFolderIds: "expandedFolderIds", unorganisedCount: "unorganisedCount", allowCreate: "allowCreate", allowRename: "allowRename", allowDelete: "allowDelete", allowMove: "allowMove", allowDuplicate: "allowDuplicate", allowDrop: "allowDrop", showCounts: "showCounts", collapsed: "collapsed", labels: "labels" }, outputs: { folderSelected: "folderSelected", folderExpansionToggled: "folderExpansionToggled", folderCreated: "folderCreated", folderCreateRequested: "folderCreateRequested", folderRenamed: "folderRenamed", folderDeleted: "folderDeleted", folderMoveRequested: "folderMoveRequested", folderDuplicateRequested: "folderDuplicateRequested", testsDropped: "testsDropped", folderDropped: "folderDropped", collapsedChange: "collapsedChange" }, host: { listeners: { "document:click": "onDocumentClick()", "document:keydown.escape": "onEscape()", "document:dragend": "onDocumentDragEnd()" }, classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<!-- Reusable folder icon. Render via <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: node.color }\"></ng-container>. -->\n<ng-template #folderIcon let-color=\"color\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-shrink-0\">\n <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" [attr.stroke]=\"color || '#99999E'\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n</ng-template>\n\n<aside\n class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-lg cqa-h-full cqa-min-h-0\"\n [class.cqa-w-[240px]]=\"!collapsed\"\n [class.cqa-w-[48px]]=\"collapsed\"\n style=\"transition: width 150ms ease;\"\n>\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-3 cqa-py-3\">\n <span *ngIf=\"!collapsed\" class=\"cqa-text-sm cqa-font-semibold cqa-text-neutral-900\">\n {{ labels.folders }}\n </span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\" [class.cqa-w-full]=\"collapsed\" [class.cqa-justify-center]=\"collapsed\">\n <button\n type=\"button\"\n class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n (click)=\"togglePanel()\"\n [attr.aria-label]=\"collapsed ? 'Expand folders panel' : 'Collapse folders panel'\"\n >\n <mat-icon style=\"font-size:18px;width:18px;height:18px\">\n {{ collapsed ? 'chevron_right' : 'keyboard_double_arrow_left' }}\n </mat-icon>\n </button>\n <button\n *ngIf=\"!collapsed && allowCreate\"\n type=\"button\"\n class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n (click)=\"requestCreate(null)\"\n [attr.aria-label]=\"labels.newFolder\"\n [title]=\"labels.newFolder\"\n >\n <mat-icon style=\"font-size:18px;width:18px;height:18px\">add</mat-icon>\n </button>\n </div>\n </div>\n\n <ng-container *ngIf=\"!collapsed\">\n <!-- Search -->\n <div class=\"cqa-px-3 cqa-pb-2\">\n <cqa-search-bar\n size=\"sm\"\n [fullWidth]=\"true\"\n [value]=\"searchValue\"\n [placeholder]=\"labels.searchFoldersPlaceholder\"\n [showClear]=\"true\"\n (valueChange)=\"searchValue = $event\"\n (cleared)=\"searchValue = ''\"\n ></cqa-search-bar>\n </div>\n\n <!-- Tree (folders only \u2014 Unorganised is pinned below the scroll area) -->\n <div role=\"tree\" class=\"cqa-flex-1 cqa-min-h-0 cqa-max-h-[60vh] cqa-overflow-y-auto cqa-py-1 cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\">\n <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n <div\n role=\"treeitem\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"row.hasChildren ? isExpanded(row.node.id) : null\"\n [attr.aria-selected]=\"isSelected(row.node.id)\"\n [attr.data-folder-row-id]=\"row.node.id\"\n [cqaFolderDrop]=\"row.node.id\"\n [dropEnabled]=\"allowDrop\"\n (testsDropped)=\"rowDropped(row.node.id, $event)\"\n (folderDropped)=\"onFolderRowDropped(row.node.id, $event)\"\n [cqaFolderDrag]=\"row.node.id\"\n [dragEnabled]=\"allowDrop\"\n (dragstart)=\"onFolderDragStart(row.node)\"\n (dragend)=\"onFolderDragEnd()\"\n (dragover)=\"onFolderRowDragOver(row)\"\n (dragleave)=\"onFolderRowDragLeave(row)\"\n (click)=\"onSelect(row.node)\"\n (contextmenu)=\"openContextMenu(row.node, $event)\"\n (keydown)=\"onRowKeydown($event, row, i)\"\n class=\"cqa-group cqa-flex cqa-items-center cqa-gap-1 cqa-pr-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-neutral-50 focus:cqa-outline-none focus:cqa-bg-neutral-100 cqa-relative\"\n [class.cqa-bg-indigo-50]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id\"\n [style.paddingLeft.px]=\"8 + row.depth * 16\"\n [attr.title]=\"row.node.totalCount != null ? (row.node.totalCount + ' total including subfolders') : null\"\n >\n <span\n *ngIf=\"isSelected(row.node.id)\"\n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n ></span>\n <button\n type=\"button\"\n class=\"cqa-p-0 cqa-text-neutral-400\"\n [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\n (click)=\"onToggle(row.node, $event)\"\n [attr.aria-label]=\"isExpanded(row.node.id) ? 'Collapse' : 'Expand'\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">\n {{ isExpanded(row.node.id) ? 'expand_more' : 'chevron_right' }}\n </mat-icon>\n </button>\n <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: row.node.color }\"></ng-container>\n\n <ng-container *ngIf=\"renamingId === row.node.id; else nameTpl\">\n <input\n type=\"text\"\n size=\"1\"\n [attr.data-folder-rename-input]=\"row.node.id\"\n [attr.maxlength]=\"renameMaxLength\"\n class=\"cqa-flex-1 cqa-min-w-0 cqa-w-full cqa-px-2 cqa-py-0.5 cqa-rounded cqa-border cqa-bg-white cqa-text-sm cqa-shadow-sm focus:cqa-outline-none focus:cqa-ring-1\"\n [ngClass]=\"isRenameDraftValid\n ? 'cqa-border-neutral-300 focus:cqa-border-indigo-400 focus:cqa-ring-indigo-200'\n : 'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-[#FCA5A5]'\"\n [attr.aria-invalid]=\"!isRenameDraftValid\"\n [(ngModel)]=\"renameDraft\"\n (keydown)=\"onRenameKey($event, row.node)\"\n (keypress)=\"$event.stopPropagation()\"\n (keyup)=\"$event.stopPropagation()\"\n (blur)=\"commitRename(row.node)\"\n (click)=\"$event.stopPropagation()\"\n />\n </ng-container>\n <ng-template #nameTpl>\n <span\n class=\"cqa-flex-1 cqa-text-sm cqa-text-neutral-800 cqa-truncate\"\n (dblclick)=\"beginRename(row.node, $event)\"\n >{{ row.node.name }}</span>\n </ng-template>\n\n <!-- Count shown at rest; hidden on row hover when delete is allowed -->\n <span\n *ngIf=\"showCounts && row.node.count != null\"\n class=\"cqa-text-xs cqa-text-neutral-400 cqa-tabular-nums cqa-ml-1\"\n [class.group-hover:cqa-hidden]=\"allowDelete\"\n >{{ row.node.count }}</span>\n\n <button\n *ngIf=\"hasAnyContextAction\"\n type=\"button\"\n class=\"cqa-p-0.5 cqa-rounded hover:cqa-bg-neutral-200 cqa-text-neutral-500\"\n [class.cqa-hidden]=\"contextMenuFolderId !== row.node.id\"\n [class.group-hover:cqa-inline-flex]=\"true\"\n [class.cqa-inline-flex]=\"contextMenuFolderId === row.node.id\"\n (click)=\"openContextMenu(row.node, $event)\"\n [attr.aria-label]=\"'Open actions for ' + row.node.name\"\n [attr.aria-haspopup]=\"'menu'\"\n [attr.aria-expanded]=\"contextMenuFolderId === row.node.id\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">more_horiz</mat-icon>\n </button>\n </div>\n </ng-container>\n </div>\n\n <!-- Divider between folder tree and pinned Unorganised tab -->\n <div\n aria-hidden=\"true\"\n class=\"cqa-mx-3 cqa-shrink-0\"\n style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n ></div>\n\n <!-- Unorganised \u2014 pinned below the scrollable folder tree so it stays visible regardless of folder count -->\n <div\n role=\"treeitem\"\n tabindex=\"0\"\n [attr.aria-selected]=\"isSelected(null)\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-neutral-50 focus:cqa-outline-none focus:cqa-bg-neutral-100 cqa-relative cqa-shrink-0\"\n [class.cqa-bg-indigo-50]=\"isSelected(null)\"\n [cqaFolderDrop]=\"null\"\n [dropEnabled]=\"allowDrop\"\n (testsDropped)=\"rowDropped(null, $event)\"\n (folderDropped)=\"onFolderRowDropped(null, $event)\"\n (click)=\"onSelectUnorganised()\"\n >\n <span\n *ngIf=\"isSelected(null)\"\n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n ></span>\n <mat-icon class=\"cqa-text-neutral-500\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n <span class=\"cqa-flex-1 cqa-text-sm cqa-text-neutral-700\">{{ labels.unorganised }}</span>\n <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-text-neutral-400 cqa-tabular-nums\">{{ unorganisedCount }}</span>\n </div>\n\n <!-- Folder context menu (right-click / ellipsis). Anchored to viewport coords. -->\n <div\n *ngIf=\"contextMenuFolderId !== null\"\n role=\"menu\"\n class=\"cqa-fixed cqa-z-50 cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n [style.left.px]=\"contextMenuPosition.x\"\n [style.top.px]=\"contextMenuPosition.y\"\n (click)=\"$event.stopPropagation()\"\n (contextmenu)=\"$event.preventDefault(); $event.stopPropagation()\"\n >\n <ng-container *ngIf=\"folderById(contextMenuFolderId) as menuNode\">\n <button\n *ngIf=\"allowCreate\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-neutral-100 cqa-text-left\"\n (click)=\"onContextCreateSubfolder(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">create_new_folder</mat-icon>\n <span>{{ labels.folderMenuCreateSubfolder }}</span>\n </button>\n <button\n *ngIf=\"allowRename\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-neutral-100 cqa-text-left\"\n (click)=\"onContextRename(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">edit</mat-icon>\n <span>{{ labels.folderMenuRename }}</span>\n </button>\n <button\n *ngIf=\"allowMove\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-neutral-100 cqa-text-left\"\n (click)=\"onContextMove(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">drive_file_move</mat-icon>\n <span>{{ labels.folderMenuMove }}</span>\n </button>\n <button\n *ngIf=\"allowDuplicate\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-neutral-100 cqa-text-left\"\n (click)=\"onContextDuplicate(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">content_copy</mat-icon>\n <span>{{ labels.folderMenuDuplicate }}</span>\n </button>\n <div *ngIf=\"allowDelete && (allowCreate || allowRename || allowMove || allowDuplicate)\" class=\"cqa-h-px cqa-bg-neutral-200 cqa-my-1\"></div>\n <button\n *ngIf=\"allowDelete\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-red-600 hover:cqa-bg-red-50 cqa-text-left\"\n (click)=\"onContextDelete(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">delete_outline</mat-icon>\n <span>{{ labels.folderMenuDelete }}</span>\n </button>\n </ng-container>\n </div>\n\n </ng-container>\n</aside>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FolderDropDirective, selector: "[cqaFolderDrop]", inputs: ["cqaFolderDrop", "dropEnabled"], outputs: ["testsDropped", "folderDropped"] }, { type: FolderDragDirective, selector: "[cqaFolderDrag]", inputs: ["cqaFolderDrag", "dragEnabled"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9478
|
+
FolderSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FolderSidebarComponent, selector: "cqa-folder-sidebar", inputs: { folders: "folders", selectedFolderId: "selectedFolderId", expandedFolderIds: "expandedFolderIds", unorganisedCount: "unorganisedCount", allowCreate: "allowCreate", allowRename: "allowRename", allowDelete: "allowDelete", allowMove: "allowMove", allowDuplicate: "allowDuplicate", allowDrop: "allowDrop", showCounts: "showCounts", collapsed: "collapsed", labels: "labels" }, outputs: { folderSelected: "folderSelected", folderExpansionToggled: "folderExpansionToggled", folderCreated: "folderCreated", folderCreateRequested: "folderCreateRequested", folderRenamed: "folderRenamed", folderDeleted: "folderDeleted", folderMoveRequested: "folderMoveRequested", folderDuplicateRequested: "folderDuplicateRequested", testsDropped: "testsDropped", folderDropped: "folderDropped", collapsedChange: "collapsedChange" }, host: { listeners: { "document:click": "onDocumentClick()", "document:keydown.escape": "onEscape()", "document:dragend": "onDocumentDragEnd()" }, classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<!-- Reusable folder icon. Render via <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: node.color }\"></ng-container>. -->\n<ng-template #folderIcon let-color=\"color\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-shrink-0\">\n <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" [attr.stroke]=\"color || '#99999E'\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n</ng-template>\n\n<aside\n class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-lg cqa-h-full cqa-min-h-0\"\n [class.cqa-w-[240px]]=\"!collapsed\"\n [class.cqa-w-[48px]]=\"collapsed\"\n style=\"transition: width 150ms ease;\"\n>\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-3 cqa-py-3\">\n <span *ngIf=\"!collapsed\" class=\"cqa-text-sm cqa-font-semibold cqa-text-neutral-900\">\n {{ labels.folders }}\n </span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\" [class.cqa-w-full]=\"collapsed\" [class.cqa-justify-center]=\"collapsed\">\n <button\n type=\"button\"\n class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n (click)=\"togglePanel()\"\n [attr.aria-label]=\"collapsed ? 'Expand folders panel' : 'Collapse folders panel'\"\n >\n <mat-icon style=\"font-size:18px;width:18px;height:18px\">\n {{ collapsed ? 'chevron_right' : 'keyboard_double_arrow_left' }}\n </mat-icon>\n </button>\n <button\n *ngIf=\"!collapsed && allowCreate\"\n type=\"button\"\n class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n (click)=\"requestCreate(null)\"\n [attr.aria-label]=\"labels.newFolder\"\n [title]=\"labels.newFolder\"\n >\n <mat-icon style=\"font-size:18px;width:18px;height:18px\">add</mat-icon>\n </button>\n </div>\n </div>\n\n <ng-container *ngIf=\"!collapsed\">\n <!-- Search -->\n <div class=\"cqa-px-3 cqa-pb-2\">\n <cqa-search-bar\n size=\"sm\"\n [fullWidth]=\"true\"\n [value]=\"searchValue\"\n [placeholder]=\"labels.searchFoldersPlaceholder\"\n [showClear]=\"true\"\n (valueChange)=\"searchValue = $event\"\n (cleared)=\"searchValue = ''\"\n ></cqa-search-bar>\n </div>\n\n <!-- Tree (folders only \u2014 Unorganised is pinned below the scroll area) -->\n <div role=\"tree\" class=\"cqa-flex-1 cqa-min-h-0 cqa-max-h-[60vh] cqa-overflow-y-auto cqa-py-1 cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\">\n <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n <div\n role=\"treeitem\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"row.hasChildren ? isExpanded(row.node.id) : null\"\n [attr.aria-selected]=\"isSelected(row.node.id)\"\n [attr.data-folder-row-id]=\"row.node.id\"\n [cqaFolderDrop]=\"row.node.id\"\n [dropEnabled]=\"allowDrop\"\n (testsDropped)=\"rowDropped(row.node.id, $event)\"\n (folderDropped)=\"onFolderRowDropped(row.node.id, $event)\"\n [cqaFolderDrag]=\"row.node.id\"\n [dragEnabled]=\"allowDrop\"\n (dragstart)=\"onFolderDragStart(row.node)\"\n (dragend)=\"onFolderDragEnd()\"\n (dragover)=\"onFolderRowDragOver(row)\"\n (dragleave)=\"onFolderRowDragLeave(row)\"\n (click)=\"onSelect(row.node)\"\n (contextmenu)=\"openContextMenu(row.node, $event)\"\n (keydown)=\"onRowKeydown($event, row, i)\"\n class=\"cqa-group cqa-flex cqa-items-center cqa-gap-1 cqa-pr-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-neutral-50 focus:cqa-outline-none focus:cqa-bg-neutral-100 cqa-relative\"\n [class.cqa-bg-indigo-50]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id\"\n [style.paddingLeft.px]=\"8 + row.depth * 16\"\n [attr.title]=\"row.node.totalCount != null ? (row.node.totalCount + ' total including subfolders') : null\"\n >\n <span\n *ngIf=\"isSelected(row.node.id)\"\n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n ></span>\n <button\n type=\"button\"\n class=\"cqa-p-0 cqa-text-neutral-400\"\n [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\n (click)=\"onToggle(row.node, $event)\"\n [attr.aria-label]=\"isExpanded(row.node.id) ? 'Collapse' : 'Expand'\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">\n {{ isExpanded(row.node.id) ? 'expand_more' : 'chevron_right' }}\n </mat-icon>\n </button>\n <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: row.node.color }\"></ng-container>\n\n <ng-container *ngIf=\"renamingId === row.node.id; else nameTpl\">\n <input\n type=\"text\"\n size=\"1\"\n [attr.data-folder-rename-input]=\"row.node.id\"\n [attr.maxlength]=\"renameMaxLength\"\n class=\"cqa-flex-1 cqa-min-w-0 cqa-w-full cqa-px-2 cqa-py-0.5 cqa-rounded cqa-border cqa-bg-white cqa-text-sm cqa-shadow-sm focus:cqa-outline-none focus:cqa-ring-1\"\n [ngClass]=\"(isRenameDraftValid && !renameLimitFlash)\n ? 'cqa-border-neutral-300 focus:cqa-border-indigo-400 focus:cqa-ring-indigo-200'\n : 'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-[#FCA5A5]'\"\n [attr.aria-invalid]=\"!isRenameDraftValid || renameLimitFlash\"\n [(ngModel)]=\"renameDraft\"\n (keydown)=\"onRenameKey($event, row.node)\"\n (keypress)=\"$event.stopPropagation()\"\n (keyup)=\"$event.stopPropagation()\"\n (blur)=\"commitRename(row.node)\"\n (click)=\"$event.stopPropagation()\"\n />\n </ng-container>\n <ng-template #nameTpl>\n <span\n class=\"cqa-flex-1 cqa-text-sm cqa-text-neutral-800 cqa-truncate\"\n (dblclick)=\"beginRename(row.node, $event)\"\n >{{ row.node.name }}</span>\n </ng-template>\n\n <!-- Count shown at rest; hidden on row hover when delete is allowed -->\n <span\n *ngIf=\"showCounts && row.node.count != null\"\n class=\"cqa-text-xs cqa-text-neutral-400 cqa-tabular-nums cqa-ml-1\"\n [class.group-hover:cqa-hidden]=\"allowDelete\"\n >{{ row.node.count }}</span>\n\n <button\n *ngIf=\"hasAnyContextAction\"\n type=\"button\"\n class=\"cqa-p-0.5 cqa-rounded hover:cqa-bg-neutral-200 cqa-text-neutral-500\"\n [class.cqa-hidden]=\"contextMenuFolderId !== row.node.id\"\n [class.group-hover:cqa-inline-flex]=\"true\"\n [class.cqa-inline-flex]=\"contextMenuFolderId === row.node.id\"\n (click)=\"openContextMenu(row.node, $event)\"\n [attr.aria-label]=\"'Open actions for ' + row.node.name\"\n [attr.aria-haspopup]=\"'menu'\"\n [attr.aria-expanded]=\"contextMenuFolderId === row.node.id\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">more_horiz</mat-icon>\n </button>\n </div>\n </ng-container>\n </div>\n\n <!-- Divider between folder tree and pinned Unorganised tab -->\n <div\n aria-hidden=\"true\"\n class=\"cqa-mx-3 cqa-shrink-0\"\n style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n ></div>\n\n <!-- Unorganised \u2014 pinned below the scrollable folder tree so it stays visible regardless of folder count -->\n <div\n role=\"treeitem\"\n tabindex=\"0\"\n [attr.aria-selected]=\"isSelected(null)\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-neutral-50 focus:cqa-outline-none focus:cqa-bg-neutral-100 cqa-relative cqa-shrink-0\"\n [class.cqa-bg-indigo-50]=\"isSelected(null)\"\n [cqaFolderDrop]=\"null\"\n [dropEnabled]=\"allowDrop\"\n (testsDropped)=\"rowDropped(null, $event)\"\n (folderDropped)=\"onFolderRowDropped(null, $event)\"\n (click)=\"onSelectUnorganised()\"\n >\n <span\n *ngIf=\"isSelected(null)\"\n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n ></span>\n <mat-icon class=\"cqa-text-neutral-500\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n <span class=\"cqa-flex-1 cqa-text-sm cqa-text-neutral-700\">{{ labels.unorganised }}</span>\n <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-text-neutral-400 cqa-tabular-nums\">{{ unorganisedCount }}</span>\n </div>\n\n <!-- Folder context menu (right-click / ellipsis). Anchored to viewport coords. -->\n <div\n *ngIf=\"contextMenuFolderId !== null\"\n role=\"menu\"\n class=\"cqa-fixed cqa-z-50 cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n [style.left.px]=\"contextMenuPosition.x\"\n [style.top.px]=\"contextMenuPosition.y\"\n (click)=\"$event.stopPropagation()\"\n (contextmenu)=\"$event.preventDefault(); $event.stopPropagation()\"\n >\n <ng-container *ngIf=\"folderById(contextMenuFolderId) as menuNode\">\n <button\n *ngIf=\"allowCreate\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-neutral-100 cqa-text-left\"\n (click)=\"onContextCreateSubfolder(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">create_new_folder</mat-icon>\n <span>{{ labels.folderMenuCreateSubfolder }}</span>\n </button>\n <button\n *ngIf=\"allowRename\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-neutral-100 cqa-text-left\"\n (click)=\"onContextRename(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">edit</mat-icon>\n <span>{{ labels.folderMenuRename }}</span>\n </button>\n <button\n *ngIf=\"allowMove\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-neutral-100 cqa-text-left\"\n (click)=\"onContextMove(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">drive_file_move</mat-icon>\n <span>{{ labels.folderMenuMove }}</span>\n </button>\n <button\n *ngIf=\"allowDuplicate\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-neutral-100 cqa-text-left\"\n (click)=\"onContextDuplicate(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">content_copy</mat-icon>\n <span>{{ labels.folderMenuDuplicate }}</span>\n </button>\n <div *ngIf=\"allowDelete && (allowCreate || allowRename || allowMove || allowDuplicate)\" class=\"cqa-h-px cqa-bg-neutral-200 cqa-my-1\"></div>\n <button\n *ngIf=\"allowDelete\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-red-600 hover:cqa-bg-red-50 cqa-text-left\"\n (click)=\"onContextDelete(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">delete_outline</mat-icon>\n <span>{{ labels.folderMenuDelete }}</span>\n </button>\n </ng-container>\n </div>\n\n </ng-container>\n</aside>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FolderDropDirective, selector: "[cqaFolderDrop]", inputs: ["cqaFolderDrop", "dropEnabled"], outputs: ["testsDropped", "folderDropped"] }, { type: FolderDragDirective, selector: "[cqaFolderDrag]", inputs: ["cqaFolderDrag", "dragEnabled"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9427
9479
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FolderSidebarComponent, decorators: [{
|
|
9428
9480
|
type: Component,
|
|
9429
|
-
args: [{ selector: 'cqa-folder-sidebar', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Reusable folder icon. Render via <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: node.color }\"></ng-container>. -->\n<ng-template #folderIcon let-color=\"color\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-shrink-0\">\n <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" [attr.stroke]=\"color || '#99999E'\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n</ng-template>\n\n<aside\n class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-lg cqa-h-full cqa-min-h-0\"\n [class.cqa-w-[240px]]=\"!collapsed\"\n [class.cqa-w-[48px]]=\"collapsed\"\n style=\"transition: width 150ms ease;\"\n>\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-3 cqa-py-3\">\n <span *ngIf=\"!collapsed\" class=\"cqa-text-sm cqa-font-semibold cqa-text-neutral-900\">\n {{ labels.folders }}\n </span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\" [class.cqa-w-full]=\"collapsed\" [class.cqa-justify-center]=\"collapsed\">\n <button\n type=\"button\"\n class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n (click)=\"togglePanel()\"\n [attr.aria-label]=\"collapsed ? 'Expand folders panel' : 'Collapse folders panel'\"\n >\n <mat-icon style=\"font-size:18px;width:18px;height:18px\">\n {{ collapsed ? 'chevron_right' : 'keyboard_double_arrow_left' }}\n </mat-icon>\n </button>\n <button\n *ngIf=\"!collapsed && allowCreate\"\n type=\"button\"\n class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n (click)=\"requestCreate(null)\"\n [attr.aria-label]=\"labels.newFolder\"\n [title]=\"labels.newFolder\"\n >\n <mat-icon style=\"font-size:18px;width:18px;height:18px\">add</mat-icon>\n </button>\n </div>\n </div>\n\n <ng-container *ngIf=\"!collapsed\">\n <!-- Search -->\n <div class=\"cqa-px-3 cqa-pb-2\">\n <cqa-search-bar\n size=\"sm\"\n [fullWidth]=\"true\"\n [value]=\"searchValue\"\n [placeholder]=\"labels.searchFoldersPlaceholder\"\n [showClear]=\"true\"\n (valueChange)=\"searchValue = $event\"\n (cleared)=\"searchValue = ''\"\n ></cqa-search-bar>\n </div>\n\n <!-- Tree (folders only \u2014 Unorganised is pinned below the scroll area) -->\n <div role=\"tree\" class=\"cqa-flex-1 cqa-min-h-0 cqa-max-h-[60vh] cqa-overflow-y-auto cqa-py-1 cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\">\n <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n <div\n role=\"treeitem\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"row.hasChildren ? isExpanded(row.node.id) : null\"\n [attr.aria-selected]=\"isSelected(row.node.id)\"\n [attr.data-folder-row-id]=\"row.node.id\"\n [cqaFolderDrop]=\"row.node.id\"\n [dropEnabled]=\"allowDrop\"\n (testsDropped)=\"rowDropped(row.node.id, $event)\"\n (folderDropped)=\"onFolderRowDropped(row.node.id, $event)\"\n [cqaFolderDrag]=\"row.node.id\"\n [dragEnabled]=\"allowDrop\"\n (dragstart)=\"onFolderDragStart(row.node)\"\n (dragend)=\"onFolderDragEnd()\"\n (dragover)=\"onFolderRowDragOver(row)\"\n (dragleave)=\"onFolderRowDragLeave(row)\"\n (click)=\"onSelect(row.node)\"\n (contextmenu)=\"openContextMenu(row.node, $event)\"\n (keydown)=\"onRowKeydown($event, row, i)\"\n class=\"cqa-group cqa-flex cqa-items-center cqa-gap-1 cqa-pr-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-neutral-50 focus:cqa-outline-none focus:cqa-bg-neutral-100 cqa-relative\"\n [class.cqa-bg-indigo-50]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id\"\n [style.paddingLeft.px]=\"8 + row.depth * 16\"\n [attr.title]=\"row.node.totalCount != null ? (row.node.totalCount + ' total including subfolders') : null\"\n >\n <span\n *ngIf=\"isSelected(row.node.id)\"\n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n ></span>\n <button\n type=\"button\"\n class=\"cqa-p-0 cqa-text-neutral-400\"\n [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\n (click)=\"onToggle(row.node, $event)\"\n [attr.aria-label]=\"isExpanded(row.node.id) ? 'Collapse' : 'Expand'\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">\n {{ isExpanded(row.node.id) ? 'expand_more' : 'chevron_right' }}\n </mat-icon>\n </button>\n <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: row.node.color }\"></ng-container>\n\n <ng-container *ngIf=\"renamingId === row.node.id; else nameTpl\">\n <input\n type=\"text\"\n size=\"1\"\n [attr.data-folder-rename-input]=\"row.node.id\"\n [attr.maxlength]=\"renameMaxLength\"\n class=\"cqa-flex-1 cqa-min-w-0 cqa-w-full cqa-px-2 cqa-py-0.5 cqa-rounded cqa-border cqa-bg-white cqa-text-sm cqa-shadow-sm focus:cqa-outline-none focus:cqa-ring-1\"\n [ngClass]=\"isRenameDraftValid\n ? 'cqa-border-neutral-300 focus:cqa-border-indigo-400 focus:cqa-ring-indigo-200'\n : 'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-[#FCA5A5]'\"\n [attr.aria-invalid]=\"!isRenameDraftValid\"\n [(ngModel)]=\"renameDraft\"\n (keydown)=\"onRenameKey($event, row.node)\"\n (keypress)=\"$event.stopPropagation()\"\n (keyup)=\"$event.stopPropagation()\"\n (blur)=\"commitRename(row.node)\"\n (click)=\"$event.stopPropagation()\"\n />\n </ng-container>\n <ng-template #nameTpl>\n <span\n class=\"cqa-flex-1 cqa-text-sm cqa-text-neutral-800 cqa-truncate\"\n (dblclick)=\"beginRename(row.node, $event)\"\n >{{ row.node.name }}</span>\n </ng-template>\n\n <!-- Count shown at rest; hidden on row hover when delete is allowed -->\n <span\n *ngIf=\"showCounts && row.node.count != null\"\n class=\"cqa-text-xs cqa-text-neutral-400 cqa-tabular-nums cqa-ml-1\"\n [class.group-hover:cqa-hidden]=\"allowDelete\"\n >{{ row.node.count }}</span>\n\n <button\n *ngIf=\"hasAnyContextAction\"\n type=\"button\"\n class=\"cqa-p-0.5 cqa-rounded hover:cqa-bg-neutral-200 cqa-text-neutral-500\"\n [class.cqa-hidden]=\"contextMenuFolderId !== row.node.id\"\n [class.group-hover:cqa-inline-flex]=\"true\"\n [class.cqa-inline-flex]=\"contextMenuFolderId === row.node.id\"\n (click)=\"openContextMenu(row.node, $event)\"\n [attr.aria-label]=\"'Open actions for ' + row.node.name\"\n [attr.aria-haspopup]=\"'menu'\"\n [attr.aria-expanded]=\"contextMenuFolderId === row.node.id\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">more_horiz</mat-icon>\n </button>\n </div>\n </ng-container>\n </div>\n\n <!-- Divider between folder tree and pinned Unorganised tab -->\n <div\n aria-hidden=\"true\"\n class=\"cqa-mx-3 cqa-shrink-0\"\n style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n ></div>\n\n <!-- Unorganised \u2014 pinned below the scrollable folder tree so it stays visible regardless of folder count -->\n <div\n role=\"treeitem\"\n tabindex=\"0\"\n [attr.aria-selected]=\"isSelected(null)\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-neutral-50 focus:cqa-outline-none focus:cqa-bg-neutral-100 cqa-relative cqa-shrink-0\"\n [class.cqa-bg-indigo-50]=\"isSelected(null)\"\n [cqaFolderDrop]=\"null\"\n [dropEnabled]=\"allowDrop\"\n (testsDropped)=\"rowDropped(null, $event)\"\n (folderDropped)=\"onFolderRowDropped(null, $event)\"\n (click)=\"onSelectUnorganised()\"\n >\n <span\n *ngIf=\"isSelected(null)\"\n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n ></span>\n <mat-icon class=\"cqa-text-neutral-500\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n <span class=\"cqa-flex-1 cqa-text-sm cqa-text-neutral-700\">{{ labels.unorganised }}</span>\n <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-text-neutral-400 cqa-tabular-nums\">{{ unorganisedCount }}</span>\n </div>\n\n <!-- Folder context menu (right-click / ellipsis). Anchored to viewport coords. -->\n <div\n *ngIf=\"contextMenuFolderId !== null\"\n role=\"menu\"\n class=\"cqa-fixed cqa-z-50 cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n [style.left.px]=\"contextMenuPosition.x\"\n [style.top.px]=\"contextMenuPosition.y\"\n (click)=\"$event.stopPropagation()\"\n (contextmenu)=\"$event.preventDefault(); $event.stopPropagation()\"\n >\n <ng-container *ngIf=\"folderById(contextMenuFolderId) as menuNode\">\n <button\n *ngIf=\"allowCreate\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-neutral-100 cqa-text-left\"\n (click)=\"onContextCreateSubfolder(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">create_new_folder</mat-icon>\n <span>{{ labels.folderMenuCreateSubfolder }}</span>\n </button>\n <button\n *ngIf=\"allowRename\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-neutral-100 cqa-text-left\"\n (click)=\"onContextRename(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">edit</mat-icon>\n <span>{{ labels.folderMenuRename }}</span>\n </button>\n <button\n *ngIf=\"allowMove\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-neutral-100 cqa-text-left\"\n (click)=\"onContextMove(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">drive_file_move</mat-icon>\n <span>{{ labels.folderMenuMove }}</span>\n </button>\n <button\n *ngIf=\"allowDuplicate\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-neutral-100 cqa-text-left\"\n (click)=\"onContextDuplicate(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">content_copy</mat-icon>\n <span>{{ labels.folderMenuDuplicate }}</span>\n </button>\n <div *ngIf=\"allowDelete && (allowCreate || allowRename || allowMove || allowDuplicate)\" class=\"cqa-h-px cqa-bg-neutral-200 cqa-my-1\"></div>\n <button\n *ngIf=\"allowDelete\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-red-600 hover:cqa-bg-red-50 cqa-text-left\"\n (click)=\"onContextDelete(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">delete_outline</mat-icon>\n <span>{{ labels.folderMenuDelete }}</span>\n </button>\n </ng-container>\n </div>\n\n </ng-container>\n</aside>\n", styles: [] }]
|
|
9481
|
+
args: [{ selector: 'cqa-folder-sidebar', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Reusable folder icon. Render via <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: node.color }\"></ng-container>. -->\n<ng-template #folderIcon let-color=\"color\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-shrink-0\">\n <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" [attr.stroke]=\"color || '#99999E'\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n</ng-template>\n\n<aside\n class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-lg cqa-h-full cqa-min-h-0\"\n [class.cqa-w-[240px]]=\"!collapsed\"\n [class.cqa-w-[48px]]=\"collapsed\"\n style=\"transition: width 150ms ease;\"\n>\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-3 cqa-py-3\">\n <span *ngIf=\"!collapsed\" class=\"cqa-text-sm cqa-font-semibold cqa-text-neutral-900\">\n {{ labels.folders }}\n </span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\" [class.cqa-w-full]=\"collapsed\" [class.cqa-justify-center]=\"collapsed\">\n <button\n type=\"button\"\n class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n (click)=\"togglePanel()\"\n [attr.aria-label]=\"collapsed ? 'Expand folders panel' : 'Collapse folders panel'\"\n >\n <mat-icon style=\"font-size:18px;width:18px;height:18px\">\n {{ collapsed ? 'chevron_right' : 'keyboard_double_arrow_left' }}\n </mat-icon>\n </button>\n <button\n *ngIf=\"!collapsed && allowCreate\"\n type=\"button\"\n class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n (click)=\"requestCreate(null)\"\n [attr.aria-label]=\"labels.newFolder\"\n [title]=\"labels.newFolder\"\n >\n <mat-icon style=\"font-size:18px;width:18px;height:18px\">add</mat-icon>\n </button>\n </div>\n </div>\n\n <ng-container *ngIf=\"!collapsed\">\n <!-- Search -->\n <div class=\"cqa-px-3 cqa-pb-2\">\n <cqa-search-bar\n size=\"sm\"\n [fullWidth]=\"true\"\n [value]=\"searchValue\"\n [placeholder]=\"labels.searchFoldersPlaceholder\"\n [showClear]=\"true\"\n (valueChange)=\"searchValue = $event\"\n (cleared)=\"searchValue = ''\"\n ></cqa-search-bar>\n </div>\n\n <!-- Tree (folders only \u2014 Unorganised is pinned below the scroll area) -->\n <div role=\"tree\" class=\"cqa-flex-1 cqa-min-h-0 cqa-max-h-[60vh] cqa-overflow-y-auto cqa-py-1 cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\">\n <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n <div\n role=\"treeitem\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"row.hasChildren ? isExpanded(row.node.id) : null\"\n [attr.aria-selected]=\"isSelected(row.node.id)\"\n [attr.data-folder-row-id]=\"row.node.id\"\n [cqaFolderDrop]=\"row.node.id\"\n [dropEnabled]=\"allowDrop\"\n (testsDropped)=\"rowDropped(row.node.id, $event)\"\n (folderDropped)=\"onFolderRowDropped(row.node.id, $event)\"\n [cqaFolderDrag]=\"row.node.id\"\n [dragEnabled]=\"allowDrop\"\n (dragstart)=\"onFolderDragStart(row.node)\"\n (dragend)=\"onFolderDragEnd()\"\n (dragover)=\"onFolderRowDragOver(row)\"\n (dragleave)=\"onFolderRowDragLeave(row)\"\n (click)=\"onSelect(row.node)\"\n (contextmenu)=\"openContextMenu(row.node, $event)\"\n (keydown)=\"onRowKeydown($event, row, i)\"\n class=\"cqa-group cqa-flex cqa-items-center cqa-gap-1 cqa-pr-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-neutral-50 focus:cqa-outline-none focus:cqa-bg-neutral-100 cqa-relative\"\n [class.cqa-bg-indigo-50]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id\"\n [style.paddingLeft.px]=\"8 + row.depth * 16\"\n [attr.title]=\"row.node.totalCount != null ? (row.node.totalCount + ' total including subfolders') : null\"\n >\n <span\n *ngIf=\"isSelected(row.node.id)\"\n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n ></span>\n <button\n type=\"button\"\n class=\"cqa-p-0 cqa-text-neutral-400\"\n [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\n (click)=\"onToggle(row.node, $event)\"\n [attr.aria-label]=\"isExpanded(row.node.id) ? 'Collapse' : 'Expand'\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">\n {{ isExpanded(row.node.id) ? 'expand_more' : 'chevron_right' }}\n </mat-icon>\n </button>\n <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: row.node.color }\"></ng-container>\n\n <ng-container *ngIf=\"renamingId === row.node.id; else nameTpl\">\n <input\n type=\"text\"\n size=\"1\"\n [attr.data-folder-rename-input]=\"row.node.id\"\n [attr.maxlength]=\"renameMaxLength\"\n class=\"cqa-flex-1 cqa-min-w-0 cqa-w-full cqa-px-2 cqa-py-0.5 cqa-rounded cqa-border cqa-bg-white cqa-text-sm cqa-shadow-sm focus:cqa-outline-none focus:cqa-ring-1\"\n [ngClass]=\"(isRenameDraftValid && !renameLimitFlash)\n ? 'cqa-border-neutral-300 focus:cqa-border-indigo-400 focus:cqa-ring-indigo-200'\n : 'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-[#FCA5A5]'\"\n [attr.aria-invalid]=\"!isRenameDraftValid || renameLimitFlash\"\n [(ngModel)]=\"renameDraft\"\n (keydown)=\"onRenameKey($event, row.node)\"\n (keypress)=\"$event.stopPropagation()\"\n (keyup)=\"$event.stopPropagation()\"\n (blur)=\"commitRename(row.node)\"\n (click)=\"$event.stopPropagation()\"\n />\n </ng-container>\n <ng-template #nameTpl>\n <span\n class=\"cqa-flex-1 cqa-text-sm cqa-text-neutral-800 cqa-truncate\"\n (dblclick)=\"beginRename(row.node, $event)\"\n >{{ row.node.name }}</span>\n </ng-template>\n\n <!-- Count shown at rest; hidden on row hover when delete is allowed -->\n <span\n *ngIf=\"showCounts && row.node.count != null\"\n class=\"cqa-text-xs cqa-text-neutral-400 cqa-tabular-nums cqa-ml-1\"\n [class.group-hover:cqa-hidden]=\"allowDelete\"\n >{{ row.node.count }}</span>\n\n <button\n *ngIf=\"hasAnyContextAction\"\n type=\"button\"\n class=\"cqa-p-0.5 cqa-rounded hover:cqa-bg-neutral-200 cqa-text-neutral-500\"\n [class.cqa-hidden]=\"contextMenuFolderId !== row.node.id\"\n [class.group-hover:cqa-inline-flex]=\"true\"\n [class.cqa-inline-flex]=\"contextMenuFolderId === row.node.id\"\n (click)=\"openContextMenu(row.node, $event)\"\n [attr.aria-label]=\"'Open actions for ' + row.node.name\"\n [attr.aria-haspopup]=\"'menu'\"\n [attr.aria-expanded]=\"contextMenuFolderId === row.node.id\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">more_horiz</mat-icon>\n </button>\n </div>\n </ng-container>\n </div>\n\n <!-- Divider between folder tree and pinned Unorganised tab -->\n <div\n aria-hidden=\"true\"\n class=\"cqa-mx-3 cqa-shrink-0\"\n style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n ></div>\n\n <!-- Unorganised \u2014 pinned below the scrollable folder tree so it stays visible regardless of folder count -->\n <div\n role=\"treeitem\"\n tabindex=\"0\"\n [attr.aria-selected]=\"isSelected(null)\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-neutral-50 focus:cqa-outline-none focus:cqa-bg-neutral-100 cqa-relative cqa-shrink-0\"\n [class.cqa-bg-indigo-50]=\"isSelected(null)\"\n [cqaFolderDrop]=\"null\"\n [dropEnabled]=\"allowDrop\"\n (testsDropped)=\"rowDropped(null, $event)\"\n (folderDropped)=\"onFolderRowDropped(null, $event)\"\n (click)=\"onSelectUnorganised()\"\n >\n <span\n *ngIf=\"isSelected(null)\"\n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n ></span>\n <mat-icon class=\"cqa-text-neutral-500\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n <span class=\"cqa-flex-1 cqa-text-sm cqa-text-neutral-700\">{{ labels.unorganised }}</span>\n <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-text-neutral-400 cqa-tabular-nums\">{{ unorganisedCount }}</span>\n </div>\n\n <!-- Folder context menu (right-click / ellipsis). Anchored to viewport coords. -->\n <div\n *ngIf=\"contextMenuFolderId !== null\"\n role=\"menu\"\n class=\"cqa-fixed cqa-z-50 cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n [style.left.px]=\"contextMenuPosition.x\"\n [style.top.px]=\"contextMenuPosition.y\"\n (click)=\"$event.stopPropagation()\"\n (contextmenu)=\"$event.preventDefault(); $event.stopPropagation()\"\n >\n <ng-container *ngIf=\"folderById(contextMenuFolderId) as menuNode\">\n <button\n *ngIf=\"allowCreate\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-neutral-100 cqa-text-left\"\n (click)=\"onContextCreateSubfolder(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">create_new_folder</mat-icon>\n <span>{{ labels.folderMenuCreateSubfolder }}</span>\n </button>\n <button\n *ngIf=\"allowRename\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-neutral-100 cqa-text-left\"\n (click)=\"onContextRename(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">edit</mat-icon>\n <span>{{ labels.folderMenuRename }}</span>\n </button>\n <button\n *ngIf=\"allowMove\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-neutral-100 cqa-text-left\"\n (click)=\"onContextMove(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">drive_file_move</mat-icon>\n <span>{{ labels.folderMenuMove }}</span>\n </button>\n <button\n *ngIf=\"allowDuplicate\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-neutral-100 cqa-text-left\"\n (click)=\"onContextDuplicate(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">content_copy</mat-icon>\n <span>{{ labels.folderMenuDuplicate }}</span>\n </button>\n <div *ngIf=\"allowDelete && (allowCreate || allowRename || allowMove || allowDuplicate)\" class=\"cqa-h-px cqa-bg-neutral-200 cqa-my-1\"></div>\n <button\n *ngIf=\"allowDelete\"\n type=\"button\"\n role=\"menuitem\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-red-600 hover:cqa-bg-red-50 cqa-text-left\"\n (click)=\"onContextDelete(menuNode)\"\n >\n <mat-icon style=\"font-size:16px;width:16px;height:16px\">delete_outline</mat-icon>\n <span>{{ labels.folderMenuDelete }}</span>\n </button>\n </ng-container>\n </div>\n\n </ng-container>\n</aside>\n", styles: [] }]
|
|
9430
9482
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { folders: [{
|
|
9431
9483
|
type: Input
|
|
9432
9484
|
}], selectedFolderId: [{
|
|
@@ -51003,6 +51055,299 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
51003
51055
|
type: Input
|
|
51004
51056
|
}] } });
|
|
51005
51057
|
|
|
51058
|
+
class ManageColumnsDialogComponent {
|
|
51059
|
+
constructor() {
|
|
51060
|
+
this.columns = [];
|
|
51061
|
+
this.lockedColumns = [];
|
|
51062
|
+
this.items = [];
|
|
51063
|
+
this.newColName = '';
|
|
51064
|
+
this.columnsError = null;
|
|
51065
|
+
this.trackByUid = (_, item) => item.uid;
|
|
51066
|
+
this.nextUid = 1;
|
|
51067
|
+
}
|
|
51068
|
+
ngOnInit() {
|
|
51069
|
+
const initial = Array.isArray(this.columns) ? this.columns : [];
|
|
51070
|
+
this.items = initial.map(name => ({
|
|
51071
|
+
uid: this.nextUid++,
|
|
51072
|
+
originalName: name,
|
|
51073
|
+
name,
|
|
51074
|
+
}));
|
|
51075
|
+
}
|
|
51076
|
+
isLocked(item) {
|
|
51077
|
+
if (!this.lockedColumns || this.lockedColumns.length === 0) {
|
|
51078
|
+
return false;
|
|
51079
|
+
}
|
|
51080
|
+
if (item.originalName != null && this.lockedColumns.indexOf(item.originalName) !== -1) {
|
|
51081
|
+
return true;
|
|
51082
|
+
}
|
|
51083
|
+
return this.lockedColumns.indexOf(item.name) !== -1;
|
|
51084
|
+
}
|
|
51085
|
+
onDndDrop(event) {
|
|
51086
|
+
const dragged = event.data;
|
|
51087
|
+
if (!dragged || event.index == null) {
|
|
51088
|
+
return;
|
|
51089
|
+
}
|
|
51090
|
+
const from = this.items.findIndex(it => it.uid === dragged.uid);
|
|
51091
|
+
if (from < 0) {
|
|
51092
|
+
return;
|
|
51093
|
+
}
|
|
51094
|
+
const next = this.items.slice();
|
|
51095
|
+
next.splice(from, 1);
|
|
51096
|
+
const to = event.index > from ? event.index - 1 : event.index;
|
|
51097
|
+
next.splice(to, 0, dragged);
|
|
51098
|
+
this.items = next;
|
|
51099
|
+
}
|
|
51100
|
+
onMove(index, dir) {
|
|
51101
|
+
const target = index + dir;
|
|
51102
|
+
if (target < 0 || target >= this.items.length) {
|
|
51103
|
+
return;
|
|
51104
|
+
}
|
|
51105
|
+
const next = this.items.slice();
|
|
51106
|
+
[next[index], next[target]] = [next[target], next[index]];
|
|
51107
|
+
this.items = next;
|
|
51108
|
+
}
|
|
51109
|
+
onRename(index, value) {
|
|
51110
|
+
if (!this.items[index]) {
|
|
51111
|
+
return;
|
|
51112
|
+
}
|
|
51113
|
+
this.items = this.items.map((it, i) => i === index ? Object.assign(Object.assign({}, it), { name: value }) : it);
|
|
51114
|
+
this.columnsError = null;
|
|
51115
|
+
}
|
|
51116
|
+
onRemove(index) {
|
|
51117
|
+
const item = this.items[index];
|
|
51118
|
+
if (!item || this.isLocked(item)) {
|
|
51119
|
+
return;
|
|
51120
|
+
}
|
|
51121
|
+
this.items = this.items.filter((_, i) => i !== index);
|
|
51122
|
+
this.columnsError = null;
|
|
51123
|
+
}
|
|
51124
|
+
onNewColNameChange(value) {
|
|
51125
|
+
this.newColName = value;
|
|
51126
|
+
}
|
|
51127
|
+
onAdd() {
|
|
51128
|
+
const trimmed = (this.newColName || '').trim();
|
|
51129
|
+
if (!trimmed || this.itemsHasName(trimmed)) {
|
|
51130
|
+
return;
|
|
51131
|
+
}
|
|
51132
|
+
this.items = [...this.items, {
|
|
51133
|
+
uid: this.nextUid++,
|
|
51134
|
+
originalName: null,
|
|
51135
|
+
name: trimmed,
|
|
51136
|
+
}];
|
|
51137
|
+
this.newColName = '';
|
|
51138
|
+
this.columnsError = null;
|
|
51139
|
+
}
|
|
51140
|
+
get canAdd() {
|
|
51141
|
+
const trimmed = (this.newColName || '').trim();
|
|
51142
|
+
if (!trimmed) {
|
|
51143
|
+
return false;
|
|
51144
|
+
}
|
|
51145
|
+
return !this.itemsHasName(trimmed);
|
|
51146
|
+
}
|
|
51147
|
+
getValue() {
|
|
51148
|
+
const trimmed = this.items.map(it => ({
|
|
51149
|
+
originalName: it.originalName,
|
|
51150
|
+
name: (it.name || '').trim(),
|
|
51151
|
+
}));
|
|
51152
|
+
if (trimmed.length === 0) {
|
|
51153
|
+
this.columnsError = 'At least one column is required.';
|
|
51154
|
+
return null;
|
|
51155
|
+
}
|
|
51156
|
+
if (trimmed.some(c => c.name.length === 0)) {
|
|
51157
|
+
this.columnsError = 'Column names cannot be empty.';
|
|
51158
|
+
return null;
|
|
51159
|
+
}
|
|
51160
|
+
const lowered = trimmed.map(c => c.name.toLowerCase());
|
|
51161
|
+
if (new Set(lowered).size !== trimmed.length) {
|
|
51162
|
+
this.columnsError = 'Column names must be unique.';
|
|
51163
|
+
return null;
|
|
51164
|
+
}
|
|
51165
|
+
this.columnsError = null;
|
|
51166
|
+
return { columns: trimmed };
|
|
51167
|
+
}
|
|
51168
|
+
itemsHasName(candidate) {
|
|
51169
|
+
const lowered = candidate.toLowerCase();
|
|
51170
|
+
return this.items.some(it => (it.name || '').trim().toLowerCase() === lowered);
|
|
51171
|
+
}
|
|
51172
|
+
}
|
|
51173
|
+
ManageColumnsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ManageColumnsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
51174
|
+
ManageColumnsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ManageColumnsDialogComponent, selector: "cqa-manage-columns-dialog", inputs: { columns: "columns", lockedColumns: "lockedColumns" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-w-full\">\n\n <div class=\"manage-cols-drop-list cqa-flex cqa-flex-col cqa-gap-2\"\n [dndDropzone]=\"['col']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"manage-cols-placeholder\">Drop here</div>\n <div *ngFor=\"let item of items; let i = index; trackBy: trackByUid\"\n class=\"manage-cols-row cqa-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1.5 cqa-rounded-md cqa-border cqa-border-gray-200 cqa-bg-gray-50\">\n <span class=\"manage-cols-handle cqa-flex cqa-items-center cqa-justify-center cqa-text-gray-400\"\n [dndDraggable]=\"item\"\n [dndDisableIf]=\"isLocked(item)\"\n dndType=\"col\"\n dndEffectAllowed=\"move\">\n <mat-icon style=\"font-size:18px;width:18px;height:18px;line-height:18px;\">drag_indicator</mat-icon>\n </span>\n <cqa-custom-input\n class=\"cqa-flex-1\"\n [value]=\"item.name\"\n [fullWidth]=\"true\"\n [disabled]=\"isLocked(item)\"\n inputInlineStyle=\"font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onRename(i, $event)\">\n </cqa-custom-input>\n <button type=\"button\" class=\"manage-cols-icon-btn\"\n title=\"Move up\"\n [disabled]=\"i === 0\"\n (click)=\"onMove(i, -1)\">\n <mat-icon>arrow_upward</mat-icon>\n </button>\n <button type=\"button\" class=\"manage-cols-icon-btn\"\n title=\"Move down\"\n [disabled]=\"i === items.length - 1\"\n (click)=\"onMove(i, 1)\">\n <mat-icon>arrow_downward</mat-icon>\n </button>\n <button type=\"button\" class=\"manage-cols-icon-btn manage-cols-icon-btn-danger\"\n title=\"Delete column\"\n [disabled]=\"isLocked(item)\"\n (click)=\"onRemove(i)\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pt-3 cqa-mt-1 cqa-border-t cqa-border-dashed cqa-border-gray-200\">\n <cqa-custom-input\n class=\"cqa-flex-1\"\n [value]=\"newColName\"\n [fullWidth]=\"true\"\n placeholder=\"New column name (e.g. currency)\"\n inputInlineStyle=\"font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onNewColNameChange($event)\"\n (enterPressed)=\"onAdd()\">\n </cqa-custom-input>\n <cqa-button\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"add\"\n text=\"Add column\"\n [disabled]=\"!canAdd\"\n (clicked)=\"onAdd()\">\n </cqa-button>\n </div>\n\n <span *ngIf=\"columnsError\" class=\"cqa-text-xs cqa-text-red-600\">{{ columnsError }}</span>\n\n <div class=\"cqa-px-3 cqa-py-2 cqa-rounded-md cqa-bg-primary-surface cqa-border cqa-border-success-100 cqa-text-xs cqa-text-gray-700\">\n <strong class=\"cqa-text-gray-900\">Heads up:</strong>\n Deleting a column removes its data from every environment. Renaming keeps the data in place.\n </div>\n\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i5.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i5.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
51175
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ManageColumnsDialogComponent, decorators: [{
|
|
51176
|
+
type: Component,
|
|
51177
|
+
args: [{ selector: 'cqa-manage-columns-dialog', host: { class: 'cqa-ui-root', style: 'display:block;width:100%;' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-w-full\">\n\n <div class=\"manage-cols-drop-list cqa-flex cqa-flex-col cqa-gap-2\"\n [dndDropzone]=\"['col']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"manage-cols-placeholder\">Drop here</div>\n <div *ngFor=\"let item of items; let i = index; trackBy: trackByUid\"\n class=\"manage-cols-row cqa-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1.5 cqa-rounded-md cqa-border cqa-border-gray-200 cqa-bg-gray-50\">\n <span class=\"manage-cols-handle cqa-flex cqa-items-center cqa-justify-center cqa-text-gray-400\"\n [dndDraggable]=\"item\"\n [dndDisableIf]=\"isLocked(item)\"\n dndType=\"col\"\n dndEffectAllowed=\"move\">\n <mat-icon style=\"font-size:18px;width:18px;height:18px;line-height:18px;\">drag_indicator</mat-icon>\n </span>\n <cqa-custom-input\n class=\"cqa-flex-1\"\n [value]=\"item.name\"\n [fullWidth]=\"true\"\n [disabled]=\"isLocked(item)\"\n inputInlineStyle=\"font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onRename(i, $event)\">\n </cqa-custom-input>\n <button type=\"button\" class=\"manage-cols-icon-btn\"\n title=\"Move up\"\n [disabled]=\"i === 0\"\n (click)=\"onMove(i, -1)\">\n <mat-icon>arrow_upward</mat-icon>\n </button>\n <button type=\"button\" class=\"manage-cols-icon-btn\"\n title=\"Move down\"\n [disabled]=\"i === items.length - 1\"\n (click)=\"onMove(i, 1)\">\n <mat-icon>arrow_downward</mat-icon>\n </button>\n <button type=\"button\" class=\"manage-cols-icon-btn manage-cols-icon-btn-danger\"\n title=\"Delete column\"\n [disabled]=\"isLocked(item)\"\n (click)=\"onRemove(i)\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pt-3 cqa-mt-1 cqa-border-t cqa-border-dashed cqa-border-gray-200\">\n <cqa-custom-input\n class=\"cqa-flex-1\"\n [value]=\"newColName\"\n [fullWidth]=\"true\"\n placeholder=\"New column name (e.g. currency)\"\n inputInlineStyle=\"font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onNewColNameChange($event)\"\n (enterPressed)=\"onAdd()\">\n </cqa-custom-input>\n <cqa-button\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"add\"\n text=\"Add column\"\n [disabled]=\"!canAdd\"\n (clicked)=\"onAdd()\">\n </cqa-button>\n </div>\n\n <span *ngIf=\"columnsError\" class=\"cqa-text-xs cqa-text-red-600\">{{ columnsError }}</span>\n\n <div class=\"cqa-px-3 cqa-py-2 cqa-rounded-md cqa-bg-primary-surface cqa-border cqa-border-success-100 cqa-text-xs cqa-text-gray-700\">\n <strong class=\"cqa-text-gray-900\">Heads up:</strong>\n Deleting a column removes its data from every environment. Renaming keeps the data in place.\n </div>\n\n</div>\n" }]
|
|
51178
|
+
}], propDecorators: { columns: [{
|
|
51179
|
+
type: Input
|
|
51180
|
+
}], lockedColumns: [{
|
|
51181
|
+
type: Input
|
|
51182
|
+
}] } });
|
|
51183
|
+
|
|
51184
|
+
const ALL_FILTER_VALUE = '__all__';
|
|
51185
|
+
|
|
51186
|
+
class AuditLogEntryCardComponent {
|
|
51187
|
+
get userShortName() {
|
|
51188
|
+
var _a;
|
|
51189
|
+
const u = ((_a = this.entry) === null || _a === void 0 ? void 0 : _a.user) || '';
|
|
51190
|
+
const idx = u.indexOf('@');
|
|
51191
|
+
return idx > 0 ? u.substring(0, idx) : u;
|
|
51192
|
+
}
|
|
51193
|
+
get etypeClass() {
|
|
51194
|
+
var _a;
|
|
51195
|
+
switch ((_a = this.entry) === null || _a === void 0 ? void 0 : _a.entityType) {
|
|
51196
|
+
case 'Environment Variable': return 'cqa-audit-log-etype-ev';
|
|
51197
|
+
case 'Test Data Profile': return 'cqa-audit-log-etype-tdp';
|
|
51198
|
+
case 'Global Data': return 'cqa-audit-log-etype-gd';
|
|
51199
|
+
default: return '';
|
|
51200
|
+
}
|
|
51201
|
+
}
|
|
51202
|
+
get hasDiff() {
|
|
51203
|
+
var _a, _b;
|
|
51204
|
+
return ((_a = this.entry) === null || _a === void 0 ? void 0 : _a.before) != null || ((_b = this.entry) === null || _b === void 0 ? void 0 : _b.after) != null;
|
|
51205
|
+
}
|
|
51206
|
+
}
|
|
51207
|
+
AuditLogEntryCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AuditLogEntryCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
51208
|
+
AuditLogEntryCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AuditLogEntryCardComponent, selector: "cqa-audit-log-entry-card", inputs: { entry: "entry" }, host: { classAttribute: "cqa-ui-root cqa-audit-log-row" }, ngImport: i0, template: "<div class=\"cqa-audit-log-meta cqa-font-inter\">\n <div class=\"cqa-audit-log-ts\">{{ entry?.ts }}</div>\n <div class=\"cqa-audit-log-user\">{{ userShortName }}</div>\n</div>\n<div class=\"cqa-min-w-0\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap cqa-mb-1\">\n <span class=\"cqa-audit-log-etype\" [ngClass]=\"etypeClass\">{{ entry?.entityType }}</span>\n <span class=\"cqa-text-[13px] cqa-font-medium cqa-text-[#0F172A]\">{{ entry?.entityName }}</span>\n </div>\n <div class=\"cqa-text-xs cqa-text-[#64748B]\">{{ entry?.change }}</div>\n <div *ngIf=\"hasDiff\" class=\"cqa-audit-log-diff\">\n <span class=\"cqa-audit-log-before\">{{ entry?.before || '\u2014' }}</span>\n <span class=\"cqa-audit-log-arrow\">\u2192</span>\n <span class=\"cqa-audit-log-after\">{{ entry?.after || '\u2014' }}</span>\n </div>\n</div>\n", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
51209
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AuditLogEntryCardComponent, decorators: [{
|
|
51210
|
+
type: Component,
|
|
51211
|
+
args: [{ selector: 'cqa-audit-log-entry-card', host: { class: 'cqa-ui-root cqa-audit-log-row' }, template: "<div class=\"cqa-audit-log-meta cqa-font-inter\">\n <div class=\"cqa-audit-log-ts\">{{ entry?.ts }}</div>\n <div class=\"cqa-audit-log-user\">{{ userShortName }}</div>\n</div>\n<div class=\"cqa-min-w-0\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap cqa-mb-1\">\n <span class=\"cqa-audit-log-etype\" [ngClass]=\"etypeClass\">{{ entry?.entityType }}</span>\n <span class=\"cqa-text-[13px] cqa-font-medium cqa-text-[#0F172A]\">{{ entry?.entityName }}</span>\n </div>\n <div class=\"cqa-text-xs cqa-text-[#64748B]\">{{ entry?.change }}</div>\n <div *ngIf=\"hasDiff\" class=\"cqa-audit-log-diff\">\n <span class=\"cqa-audit-log-before\">{{ entry?.before || '\u2014' }}</span>\n <span class=\"cqa-audit-log-arrow\">\u2192</span>\n <span class=\"cqa-audit-log-after\">{{ entry?.after || '\u2014' }}</span>\n </div>\n</div>\n" }]
|
|
51212
|
+
}], propDecorators: { entry: [{
|
|
51213
|
+
type: Input
|
|
51214
|
+
}] } });
|
|
51215
|
+
|
|
51216
|
+
class AuditLogDrawerComponent {
|
|
51217
|
+
constructor() {
|
|
51218
|
+
this.entries = [];
|
|
51219
|
+
this.entityTypeOptions = [];
|
|
51220
|
+
this.envOptions = [];
|
|
51221
|
+
this.userOptions = [];
|
|
51222
|
+
this.defaultRange = '7d';
|
|
51223
|
+
this.isLoading = false;
|
|
51224
|
+
this.filterChange = new EventEmitter();
|
|
51225
|
+
this.close = new EventEmitter();
|
|
51226
|
+
this.ALL = ALL_FILTER_VALUE;
|
|
51227
|
+
this.filtersForm = new FormGroup({
|
|
51228
|
+
entityType: new FormControl(ALL_FILTER_VALUE),
|
|
51229
|
+
env: new FormControl(ALL_FILTER_VALUE),
|
|
51230
|
+
user: new FormControl(ALL_FILTER_VALUE),
|
|
51231
|
+
range: new FormControl('7d'),
|
|
51232
|
+
});
|
|
51233
|
+
this.trackById = (_, e) => e.id;
|
|
51234
|
+
this.destroy$ = new Subject();
|
|
51235
|
+
this.rangeMs = {
|
|
51236
|
+
'24h': 24 * 60 * 60 * 1000,
|
|
51237
|
+
'7d': 7 * 24 * 60 * 60 * 1000,
|
|
51238
|
+
'30d': 30 * 24 * 60 * 60 * 1000,
|
|
51239
|
+
'all': Number.POSITIVE_INFINITY,
|
|
51240
|
+
};
|
|
51241
|
+
}
|
|
51242
|
+
ngOnInit() {
|
|
51243
|
+
this.filtersForm.patchValue({ range: this.defaultRange });
|
|
51244
|
+
this.entityConfig = this.buildSelectConfig('entityType', 'All entity types', this.entityTypeOptions);
|
|
51245
|
+
this.envConfig = this.buildSelectConfig('env', 'All environments', this.envOptions);
|
|
51246
|
+
this.userConfig = this.buildSelectConfig('user', 'All users', this.userOptions);
|
|
51247
|
+
this.rangeConfig = this.buildSelectConfig('range', 'Last 7 days', [
|
|
51248
|
+
{ value: '24h', label: 'Last 24h' },
|
|
51249
|
+
{ value: '7d', label: 'Last 7 days' },
|
|
51250
|
+
{ value: '30d', label: 'Last 30 days' },
|
|
51251
|
+
{ value: 'all', label: 'All time' },
|
|
51252
|
+
], false);
|
|
51253
|
+
this.filtersForm.valueChanges
|
|
51254
|
+
.pipe(takeUntil(this.destroy$))
|
|
51255
|
+
.subscribe(() => this.filterChange.emit(this.currentFilterState()));
|
|
51256
|
+
}
|
|
51257
|
+
ngOnDestroy() {
|
|
51258
|
+
this.destroy$.next();
|
|
51259
|
+
this.destroy$.complete();
|
|
51260
|
+
}
|
|
51261
|
+
get filteredEntries() {
|
|
51262
|
+
const f = this.currentFilterState();
|
|
51263
|
+
const cutoff = this.rangeMs[f.range];
|
|
51264
|
+
const now = Date.now();
|
|
51265
|
+
return (this.entries || []).filter(e => {
|
|
51266
|
+
if (f.entityType !== ALL_FILTER_VALUE && e.entityType !== f.entityType) {
|
|
51267
|
+
return false;
|
|
51268
|
+
}
|
|
51269
|
+
if (f.env !== ALL_FILTER_VALUE && !this.entryMatchesEnv(e, f.env)) {
|
|
51270
|
+
return false;
|
|
51271
|
+
}
|
|
51272
|
+
if (f.user !== ALL_FILTER_VALUE && e.user !== f.user) {
|
|
51273
|
+
return false;
|
|
51274
|
+
}
|
|
51275
|
+
if (cutoff !== Number.POSITIVE_INFINITY) {
|
|
51276
|
+
const ts = this.parseTs(e.ts);
|
|
51277
|
+
if (ts != null && now - ts > cutoff) {
|
|
51278
|
+
return false;
|
|
51279
|
+
}
|
|
51280
|
+
}
|
|
51281
|
+
return true;
|
|
51282
|
+
});
|
|
51283
|
+
}
|
|
51284
|
+
onClose() {
|
|
51285
|
+
this.close.emit();
|
|
51286
|
+
}
|
|
51287
|
+
entryMatchesEnv(entry, env) {
|
|
51288
|
+
return (entry.entityName || '').toLowerCase().includes(env.toLowerCase());
|
|
51289
|
+
}
|
|
51290
|
+
parseTs(ts) {
|
|
51291
|
+
if (!ts) {
|
|
51292
|
+
return null;
|
|
51293
|
+
}
|
|
51294
|
+
const t = Date.parse(ts);
|
|
51295
|
+
return Number.isNaN(t) ? null : t;
|
|
51296
|
+
}
|
|
51297
|
+
currentFilterState() {
|
|
51298
|
+
var _a, _b, _c, _d;
|
|
51299
|
+
const v = this.filtersForm.value;
|
|
51300
|
+
return {
|
|
51301
|
+
entityType: (_a = v.entityType) !== null && _a !== void 0 ? _a : ALL_FILTER_VALUE,
|
|
51302
|
+
env: (_b = v.env) !== null && _b !== void 0 ? _b : ALL_FILTER_VALUE,
|
|
51303
|
+
user: (_c = v.user) !== null && _c !== void 0 ? _c : ALL_FILTER_VALUE,
|
|
51304
|
+
range: (_d = v.range) !== null && _d !== void 0 ? _d : '7d',
|
|
51305
|
+
};
|
|
51306
|
+
}
|
|
51307
|
+
buildSelectConfig(key, placeholder, items, includeAll = true) {
|
|
51308
|
+
const options = [];
|
|
51309
|
+
if (includeAll) {
|
|
51310
|
+
options.push({ id: ALL_FILTER_VALUE, value: ALL_FILTER_VALUE, name: placeholder, label: placeholder });
|
|
51311
|
+
}
|
|
51312
|
+
for (const it of items) {
|
|
51313
|
+
options.push({ id: it.value, value: it.value, name: it.label, label: it.label });
|
|
51314
|
+
}
|
|
51315
|
+
return {
|
|
51316
|
+
key,
|
|
51317
|
+
label: '',
|
|
51318
|
+
placeholder,
|
|
51319
|
+
multiple: false,
|
|
51320
|
+
searchable: false,
|
|
51321
|
+
options,
|
|
51322
|
+
};
|
|
51323
|
+
}
|
|
51324
|
+
}
|
|
51325
|
+
AuditLogDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AuditLogDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
51326
|
+
AuditLogDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AuditLogDrawerComponent, selector: "cqa-audit-log-drawer", inputs: { entries: "entries", entityTypeOptions: "entityTypeOptions", envOptions: "envOptions", userOptions: "userOptions", defaultRange: "defaultRange", isLoading: "isLoading" }, outputs: { filterChange: "filterChange", close: "close" }, host: { styleAttribute: "display:flex;flex-direction:column;height:100%;width:560px;max-width:100vw;background:#fff;box-shadow:-8px 0 32px rgba(15,23,42,.12);", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<header class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-3 cqa-px-[22px] cqa-py-[18px] cqa-border-b cqa-border-[#E5E7EB] cqa-flex-shrink-0 cqa-font-inter\">\n <div class=\"cqa-min-w-0\">\n <h3 class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-m-0 cqa-text-[15px] cqa-font-semibold cqa-text-[#0F172A]\">\n <mat-icon class=\"cqa-text-primary\" style=\"font-size:18px;width:18px;height:18px;line-height:18px;color:#3F43EE;\">history</mat-icon>\n Audit log\n </h3>\n <p class=\"cqa-text-xs cqa-text-[#64748B] cqa-mt-0.5 cqa-mb-0\">\n All changes across environments, profiles, and globals. Read-only, append-only.\n </p>\n </div>\n <button type=\"button\" class=\"cqa-audit-log-close-btn\" (click)=\"onClose()\" aria-label=\"Close audit log\">\n <mat-icon>close</mat-icon>\n </button>\n</header>\n\n<section class=\"cqa-grid cqa-gap-2 cqa-px-[22px] cqa-py-3 cqa-border-b cqa-border-[#E5E7EB] cqa-flex-shrink-0\"\n style=\"grid-template-columns: repeat(4, minmax(0, 1fr)); background:#FAFBFC;\">\n <cqa-dynamic-select [form]=\"filtersForm\" [config]=\"entityConfig\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"filtersForm\" [config]=\"envConfig\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"filtersForm\" [config]=\"userConfig\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"filtersForm\" [config]=\"rangeConfig\"></cqa-dynamic-select>\n</section>\n\n<div class=\"cqa-flex-1 cqa-overflow-y-auto\">\n <cqa-full-table-loader *ngIf=\"isLoading\"></cqa-full-table-loader>\n <ng-container *ngIf=\"!isLoading\">\n <cqa-empty-state\n *ngIf=\"filteredEntries.length === 0; else listTpl\"\n title=\"No entries match your filters\"\n description=\"Adjust the filters above to widen the search.\">\n </cqa-empty-state>\n <ng-template #listTpl>\n <cqa-audit-log-entry-card\n *ngFor=\"let e of filteredEntries; trackBy: trackById\"\n [entry]=\"e\">\n </cqa-audit-log-entry-card>\n </ng-template>\n </ng-container>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: FullTableLoaderComponent, selector: "cqa-full-table-loader", inputs: ["label"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }, { type: AuditLogEntryCardComponent, selector: "cqa-audit-log-entry-card", inputs: ["entry"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
51327
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AuditLogDrawerComponent, decorators: [{
|
|
51328
|
+
type: Component,
|
|
51329
|
+
args: [{ selector: 'cqa-audit-log-drawer', host: {
|
|
51330
|
+
class: 'cqa-ui-root',
|
|
51331
|
+
style: 'display:flex;flex-direction:column;height:100%;width:560px;max-width:100vw;background:#fff;box-shadow:-8px 0 32px rgba(15,23,42,.12);',
|
|
51332
|
+
}, template: "<header class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-3 cqa-px-[22px] cqa-py-[18px] cqa-border-b cqa-border-[#E5E7EB] cqa-flex-shrink-0 cqa-font-inter\">\n <div class=\"cqa-min-w-0\">\n <h3 class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-m-0 cqa-text-[15px] cqa-font-semibold cqa-text-[#0F172A]\">\n <mat-icon class=\"cqa-text-primary\" style=\"font-size:18px;width:18px;height:18px;line-height:18px;color:#3F43EE;\">history</mat-icon>\n Audit log\n </h3>\n <p class=\"cqa-text-xs cqa-text-[#64748B] cqa-mt-0.5 cqa-mb-0\">\n All changes across environments, profiles, and globals. Read-only, append-only.\n </p>\n </div>\n <button type=\"button\" class=\"cqa-audit-log-close-btn\" (click)=\"onClose()\" aria-label=\"Close audit log\">\n <mat-icon>close</mat-icon>\n </button>\n</header>\n\n<section class=\"cqa-grid cqa-gap-2 cqa-px-[22px] cqa-py-3 cqa-border-b cqa-border-[#E5E7EB] cqa-flex-shrink-0\"\n style=\"grid-template-columns: repeat(4, minmax(0, 1fr)); background:#FAFBFC;\">\n <cqa-dynamic-select [form]=\"filtersForm\" [config]=\"entityConfig\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"filtersForm\" [config]=\"envConfig\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"filtersForm\" [config]=\"userConfig\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"filtersForm\" [config]=\"rangeConfig\"></cqa-dynamic-select>\n</section>\n\n<div class=\"cqa-flex-1 cqa-overflow-y-auto\">\n <cqa-full-table-loader *ngIf=\"isLoading\"></cqa-full-table-loader>\n <ng-container *ngIf=\"!isLoading\">\n <cqa-empty-state\n *ngIf=\"filteredEntries.length === 0; else listTpl\"\n title=\"No entries match your filters\"\n description=\"Adjust the filters above to widen the search.\">\n </cqa-empty-state>\n <ng-template #listTpl>\n <cqa-audit-log-entry-card\n *ngFor=\"let e of filteredEntries; trackBy: trackById\"\n [entry]=\"e\">\n </cqa-audit-log-entry-card>\n </ng-template>\n </ng-container>\n</div>\n" }]
|
|
51333
|
+
}], propDecorators: { entries: [{
|
|
51334
|
+
type: Input
|
|
51335
|
+
}], entityTypeOptions: [{
|
|
51336
|
+
type: Input
|
|
51337
|
+
}], envOptions: [{
|
|
51338
|
+
type: Input
|
|
51339
|
+
}], userOptions: [{
|
|
51340
|
+
type: Input
|
|
51341
|
+
}], defaultRange: [{
|
|
51342
|
+
type: Input
|
|
51343
|
+
}], isLoading: [{
|
|
51344
|
+
type: Input
|
|
51345
|
+
}], filterChange: [{
|
|
51346
|
+
type: Output
|
|
51347
|
+
}], close: [{
|
|
51348
|
+
type: Output
|
|
51349
|
+
}] } });
|
|
51350
|
+
|
|
51006
51351
|
class AssignEnvironmentsDialogComponent {
|
|
51007
51352
|
constructor(cdr) {
|
|
51008
51353
|
this.cdr = cdr;
|
|
@@ -51264,6 +51609,9 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
51264
51609
|
NewEnvironmentDialogComponent,
|
|
51265
51610
|
NewEnvironmentVariableDialogComponent,
|
|
51266
51611
|
NewTestDataProfileDialogComponent,
|
|
51612
|
+
ManageColumnsDialogComponent,
|
|
51613
|
+
AuditLogDrawerComponent,
|
|
51614
|
+
AuditLogEntryCardComponent,
|
|
51267
51615
|
AssignEnvironmentsDialogComponent,
|
|
51268
51616
|
PermissionToggleComponent,
|
|
51269
51617
|
ExportCodeModalComponent,
|
|
@@ -51454,6 +51802,9 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
51454
51802
|
NewEnvironmentDialogComponent,
|
|
51455
51803
|
NewEnvironmentVariableDialogComponent,
|
|
51456
51804
|
NewTestDataProfileDialogComponent,
|
|
51805
|
+
ManageColumnsDialogComponent,
|
|
51806
|
+
AuditLogDrawerComponent,
|
|
51807
|
+
AuditLogEntryCardComponent,
|
|
51457
51808
|
AssignEnvironmentsDialogComponent,
|
|
51458
51809
|
PermissionToggleComponent,
|
|
51459
51810
|
ExportCodeModalComponent,
|
|
@@ -51689,6 +52040,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
51689
52040
|
NewEnvironmentDialogComponent,
|
|
51690
52041
|
NewEnvironmentVariableDialogComponent,
|
|
51691
52042
|
NewTestDataProfileDialogComponent,
|
|
52043
|
+
ManageColumnsDialogComponent,
|
|
52044
|
+
AuditLogDrawerComponent,
|
|
52045
|
+
AuditLogEntryCardComponent,
|
|
51692
52046
|
AssignEnvironmentsDialogComponent,
|
|
51693
52047
|
PermissionToggleComponent,
|
|
51694
52048
|
ExportCodeModalComponent,
|
|
@@ -51885,6 +52239,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
51885
52239
|
NewEnvironmentDialogComponent,
|
|
51886
52240
|
NewEnvironmentVariableDialogComponent,
|
|
51887
52241
|
NewTestDataProfileDialogComponent,
|
|
52242
|
+
ManageColumnsDialogComponent,
|
|
52243
|
+
AuditLogDrawerComponent,
|
|
52244
|
+
AuditLogEntryCardComponent,
|
|
51888
52245
|
AssignEnvironmentsDialogComponent,
|
|
51889
52246
|
PermissionToggleComponent,
|
|
51890
52247
|
ExportCodeModalComponent,
|
|
@@ -51993,6 +52350,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
51993
52350
|
}]
|
|
51994
52351
|
}], ctorParameters: function () { return [{ type: i1.MatIconRegistry }]; } });
|
|
51995
52352
|
|
|
52353
|
+
class AuditLogDrawerService {
|
|
52354
|
+
constructor(overlay, injector) {
|
|
52355
|
+
this.overlay = overlay;
|
|
52356
|
+
this.injector = injector;
|
|
52357
|
+
this.currentOverlayRef = null;
|
|
52358
|
+
}
|
|
52359
|
+
open(inputs) {
|
|
52360
|
+
var _a, _b, _c, _d, _e;
|
|
52361
|
+
if (this.currentOverlayRef) {
|
|
52362
|
+
this.currentOverlayRef.dispose();
|
|
52363
|
+
this.currentOverlayRef = null;
|
|
52364
|
+
}
|
|
52365
|
+
const positionStrategy = this.overlay.position()
|
|
52366
|
+
.global()
|
|
52367
|
+
.right('0')
|
|
52368
|
+
.top('0')
|
|
52369
|
+
.bottom('0');
|
|
52370
|
+
const overlayRef = this.overlay.create(new OverlayConfig({
|
|
52371
|
+
hasBackdrop: true,
|
|
52372
|
+
backdropClass: ['cqa-audit-log-drawer-backdrop'],
|
|
52373
|
+
scrollStrategy: this.overlay.scrollStrategies.block(),
|
|
52374
|
+
positionStrategy,
|
|
52375
|
+
panelClass: ['cqa-audit-log-drawer-panel', 'cqa-ui-root'],
|
|
52376
|
+
maxWidth: '100vw',
|
|
52377
|
+
height: '100%',
|
|
52378
|
+
}));
|
|
52379
|
+
const portal = new ComponentPortal(AuditLogDrawerComponent, null, this.injector);
|
|
52380
|
+
const componentRef = overlayRef.attach(portal);
|
|
52381
|
+
const instance = componentRef.instance;
|
|
52382
|
+
instance.entries = (_a = inputs.entries) !== null && _a !== void 0 ? _a : [];
|
|
52383
|
+
instance.entityTypeOptions = (_b = inputs.entityTypeOptions) !== null && _b !== void 0 ? _b : [];
|
|
52384
|
+
instance.envOptions = (_c = inputs.envOptions) !== null && _c !== void 0 ? _c : [];
|
|
52385
|
+
instance.userOptions = (_d = inputs.userOptions) !== null && _d !== void 0 ? _d : [];
|
|
52386
|
+
instance.defaultRange = (_e = inputs.defaultRange) !== null && _e !== void 0 ? _e : '7d';
|
|
52387
|
+
instance.isLoading = !!inputs.isLoading;
|
|
52388
|
+
componentRef.changeDetectorRef.markForCheck();
|
|
52389
|
+
const filterChange = new Subject();
|
|
52390
|
+
const afterClosed = new Subject();
|
|
52391
|
+
instance.filterChange.subscribe((s) => filterChange.next(s));
|
|
52392
|
+
const closeAll = () => {
|
|
52393
|
+
if (!this.currentOverlayRef) {
|
|
52394
|
+
return;
|
|
52395
|
+
}
|
|
52396
|
+
overlayRef.dispose();
|
|
52397
|
+
this.currentOverlayRef = null;
|
|
52398
|
+
afterClosed.next();
|
|
52399
|
+
afterClosed.complete();
|
|
52400
|
+
filterChange.complete();
|
|
52401
|
+
};
|
|
52402
|
+
instance.close.subscribe(() => closeAll());
|
|
52403
|
+
overlayRef.backdropClick().subscribe(() => closeAll());
|
|
52404
|
+
overlayRef.keydownEvents()
|
|
52405
|
+
.pipe(filter((e) => e.key === 'Escape' || e.key === 'Esc'))
|
|
52406
|
+
.subscribe(() => closeAll());
|
|
52407
|
+
this.currentOverlayRef = overlayRef;
|
|
52408
|
+
return {
|
|
52409
|
+
filterChange$: filterChange.asObservable(),
|
|
52410
|
+
afterClosed$: afterClosed.asObservable(),
|
|
52411
|
+
close: () => closeAll(),
|
|
52412
|
+
updateEntries: (entries) => {
|
|
52413
|
+
instance.entries = entries !== null && entries !== void 0 ? entries : [];
|
|
52414
|
+
componentRef.changeDetectorRef.markForCheck();
|
|
52415
|
+
},
|
|
52416
|
+
updateLoading: (isLoading) => {
|
|
52417
|
+
instance.isLoading = !!isLoading;
|
|
52418
|
+
componentRef.changeDetectorRef.markForCheck();
|
|
52419
|
+
},
|
|
52420
|
+
};
|
|
52421
|
+
}
|
|
52422
|
+
}
|
|
52423
|
+
AuditLogDrawerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AuditLogDrawerService, deps: [{ token: i1$6.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
52424
|
+
AuditLogDrawerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AuditLogDrawerService, providedIn: 'root' });
|
|
52425
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AuditLogDrawerService, decorators: [{
|
|
52426
|
+
type: Injectable,
|
|
52427
|
+
args: [{ providedIn: 'root' }]
|
|
52428
|
+
}], ctorParameters: function () { return [{ type: i1$6.Overlay }, { type: i0.Injector }]; } });
|
|
52429
|
+
|
|
51996
52430
|
/**
|
|
51997
52431
|
* Opens the Step Details Drawer (Edit In Depth) as a right-side drawer overlay.
|
|
51998
52432
|
* Matches the behavior of Element popup - opens as a right-side drawer panel.
|
|
@@ -52590,5 +53024,5 @@ function buildTestCaseDetailsFromApi(data, options) {
|
|
|
52590
53024
|
* Generated bundle index. Do not edit.
|
|
52591
53025
|
*/
|
|
52592
53026
|
|
|
52593
|
-
export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiPromptCardComponent, AiReasoningComponent, ApiEditStepComponent, ApiMockingCardComponent, ApiStepComponent, AssignEnvironmentsDialogComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, CaptureVideoDialogComponent, ChangeHistoryComponent, ChartCardComponent, CodeEditorComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionBranchEditorComponent, ConditionDebugStepComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_FOLDER_COLOR, DEFAULT_METADATA_COLOR, DEFAULT_MODULAR_CONFIG, DEFAULT_MODULAR_LABELS, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_REORDER_LABELS, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteFolderDialogComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ENVIRONMENT_ACCENT_COLORS, ElementFormComponent, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, ExportCodeModalComponent, FOLDER_DRAG_MIME, FOLDER_NAME_MAX_LENGTH, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FolderDragDirective, FolderDropDirective, FolderSidebarComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MONACO_LANGUAGE_MAP, MainStepCollapseComponent, MetricsCardComponent, MixedVariableInputComponent, ModularTableTemplateComponent, MoveToFolderDialogComponent, NetworkRequestComponent, NewEnvironmentDialogComponent, NewEnvironmentVariableDialogComponent, NewFolderDialogComponent, NewGlobalVariableDialogComponent, NewTestDataProfileDialogComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, PermissionToggleComponent, ProgressIndicatorComponent, ProgressTextCardComponent, QuestionnaireListComponent, RESULT_COLORS, ROW_DRAG_MIME, RadioCardGroupComponent, RecordingBannerComponent, ReviewRecordedStepsModalComponent, RowDragDirective, RunExecutionAlertComponent, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, STEP_DETAILS_MODAL_DATA, STEP_DETAILS_MODAL_REF, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SessionRestorationDialogComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, StepperComponent, SubStepsConfirmationDialogComponent, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLinkCellComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, VersionHistoryCompareComponent, VersionHistoryDetailComponent, VersionHistoryListComponent, VersionHistoryRestoreConfirmComponent, ViewCompareButtonComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, WorkspaceSelectorComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
|
|
53027
|
+
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_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, NetworkRequestComponent, NewEnvironmentDialogComponent, NewEnvironmentVariableDialogComponent, NewFolderDialogComponent, NewGlobalVariableDialogComponent, NewTestDataProfileDialogComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, PermissionToggleComponent, ProgressIndicatorComponent, ProgressTextCardComponent, QuestionnaireListComponent, RESULT_COLORS, ROW_DRAG_MIME, RadioCardGroupComponent, RecordingBannerComponent, ReviewRecordedStepsModalComponent, RowDragDirective, RunExecutionAlertComponent, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, STEP_DETAILS_MODAL_DATA, STEP_DETAILS_MODAL_REF, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SessionRestorationDialogComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, StepperComponent, SubStepsConfirmationDialogComponent, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLinkCellComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, VersionHistoryCompareComponent, VersionHistoryDetailComponent, VersionHistoryListComponent, VersionHistoryRestoreConfirmComponent, ViewCompareButtonComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, WorkspaceSelectorComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
|
|
52594
53028
|
//# sourceMappingURL=cqa-lib-cqa-ui.mjs.map
|