@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
|
@@ -48,7 +48,7 @@ import { DndModule } from 'ngx-drag-drop';
|
|
|
48
48
|
import * as jquery from 'jquery';
|
|
49
49
|
import * as momentImport from 'moment';
|
|
50
50
|
import 'daterangepicker';
|
|
51
|
-
import { filter } from 'rxjs/operators';
|
|
51
|
+
import { filter, takeUntil } from 'rxjs/operators';
|
|
52
52
|
import { Subject, BehaviorSubject } from 'rxjs';
|
|
53
53
|
import * as i1$7 from 'ngx-monaco-editor';
|
|
54
54
|
import { MonacoEditorModule } from 'ngx-monaco-editor';
|
|
@@ -8921,6 +8921,11 @@ class FolderSidebarComponent {
|
|
|
8921
8921
|
this.renameDraft = '';
|
|
8922
8922
|
/** Inline rename uses the same name rules as the New Folder dialog. */
|
|
8923
8923
|
this.renameMaxLength = 20;
|
|
8924
|
+
/** Transient flag: turns the rename input red briefly when the user keystrokes
|
|
8925
|
+
* while already at `renameMaxLength`, so the silent maxlength clamp gets a
|
|
8926
|
+
* visible "you've hit the cap" signal. Cleared by `renameLimitFlashTimer`. */
|
|
8927
|
+
this.renameLimitFlash = false;
|
|
8928
|
+
this.renameLimitFlashTimer = null;
|
|
8924
8929
|
/** Id of the folder whose context menu is open, or null when closed. */
|
|
8925
8930
|
this.contextMenuFolderId = null;
|
|
8926
8931
|
/** Viewport-anchored position (client coordinates) for the floating menu. */
|
|
@@ -9034,6 +9039,7 @@ class FolderSidebarComponent {
|
|
|
9034
9039
|
cancelRename() {
|
|
9035
9040
|
this.renamingId = null;
|
|
9036
9041
|
this.renameDraft = '';
|
|
9042
|
+
this.clearRenameLimitFlash();
|
|
9037
9043
|
this.cdr.markForCheck();
|
|
9038
9044
|
}
|
|
9039
9045
|
onRenameKey(event, n) {
|
|
@@ -9047,11 +9053,54 @@ class FolderSidebarComponent {
|
|
|
9047
9053
|
if (!this.isRenameDraftValid)
|
|
9048
9054
|
return;
|
|
9049
9055
|
this.commitRename(n);
|
|
9056
|
+
return;
|
|
9050
9057
|
}
|
|
9051
|
-
|
|
9058
|
+
if (event.key === 'Escape') {
|
|
9052
9059
|
event.preventDefault();
|
|
9053
9060
|
this.cancelRename();
|
|
9061
|
+
return;
|
|
9062
|
+
}
|
|
9063
|
+
// For any other keystroke, detect "user is trying to type past maxlength" and
|
|
9064
|
+
// briefly flash the input red. The browser's `maxlength` attribute already
|
|
9065
|
+
// silently blocks the character; this surfaces a visible "you've hit the cap"
|
|
9066
|
+
// signal that would otherwise be missing.
|
|
9067
|
+
if (this.isPrintableKey(event) && this.wouldExceedRenameLimit(event)) {
|
|
9068
|
+
this.triggerRenameLimitFlash();
|
|
9069
|
+
}
|
|
9070
|
+
}
|
|
9071
|
+
isPrintableKey(event) {
|
|
9072
|
+
// Single-character keys are printables (a, B, 1, !, space). Modifier-driven
|
|
9073
|
+
// shortcuts (Ctrl/Meta) shouldn't count — they don't insert text.
|
|
9074
|
+
return event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
|
|
9075
|
+
}
|
|
9076
|
+
wouldExceedRenameLimit(event) {
|
|
9077
|
+
// The new length after the keystroke would be: current - selectionLength + 1.
|
|
9078
|
+
// If a selection covers part of the value, typing replaces that range, so the
|
|
9079
|
+
// net length might still fit under the cap.
|
|
9080
|
+
const target = event.target;
|
|
9081
|
+
const start = target?.selectionStart ?? 0;
|
|
9082
|
+
const end = target?.selectionEnd ?? 0;
|
|
9083
|
+
const selectedLen = Math.max(0, end - start);
|
|
9084
|
+
const draftLen = (this.renameDraft || '').length;
|
|
9085
|
+
return draftLen - selectedLen >= this.renameMaxLength;
|
|
9086
|
+
}
|
|
9087
|
+
triggerRenameLimitFlash() {
|
|
9088
|
+
this.renameLimitFlash = true;
|
|
9089
|
+
if (this.renameLimitFlashTimer)
|
|
9090
|
+
clearTimeout(this.renameLimitFlashTimer);
|
|
9091
|
+
this.renameLimitFlashTimer = setTimeout(() => {
|
|
9092
|
+
this.renameLimitFlash = false;
|
|
9093
|
+
this.renameLimitFlashTimer = null;
|
|
9094
|
+
this.cdr.markForCheck();
|
|
9095
|
+
}, FolderSidebarComponent.RENAME_LIMIT_FLASH_MS);
|
|
9096
|
+
this.cdr.markForCheck();
|
|
9097
|
+
}
|
|
9098
|
+
clearRenameLimitFlash() {
|
|
9099
|
+
if (this.renameLimitFlashTimer) {
|
|
9100
|
+
clearTimeout(this.renameLimitFlashTimer);
|
|
9101
|
+
this.renameLimitFlashTimer = null;
|
|
9054
9102
|
}
|
|
9103
|
+
this.renameLimitFlash = false;
|
|
9055
9104
|
}
|
|
9056
9105
|
deleteFolder(n, event) {
|
|
9057
9106
|
if (!this.allowDelete)
|
|
@@ -9245,6 +9294,7 @@ class FolderSidebarComponent {
|
|
|
9245
9294
|
}
|
|
9246
9295
|
ngOnDestroy() {
|
|
9247
9296
|
this.clearAllExpandTimers();
|
|
9297
|
+
this.clearRenameLimitFlash();
|
|
9248
9298
|
}
|
|
9249
9299
|
onRowKeydown(event, row, index) {
|
|
9250
9300
|
const rows = this.rows;
|
|
@@ -9306,11 +9356,12 @@ class FolderSidebarComponent {
|
|
|
9306
9356
|
}, 0);
|
|
9307
9357
|
}
|
|
9308
9358
|
}
|
|
9359
|
+
FolderSidebarComponent.RENAME_LIMIT_FLASH_MS = 600;
|
|
9309
9360
|
FolderSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FolderSidebarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
9310
|
-
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 });
|
|
9361
|
+
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 });
|
|
9311
9362
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FolderSidebarComponent, decorators: [{
|
|
9312
9363
|
type: Component,
|
|
9313
|
-
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: [] }]
|
|
9364
|
+
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: [] }]
|
|
9314
9365
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { folders: [{
|
|
9315
9366
|
type: Input
|
|
9316
9367
|
}], selectedFolderId: [{
|
|
@@ -50811,6 +50862,295 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
50811
50862
|
type: Input
|
|
50812
50863
|
}] } });
|
|
50813
50864
|
|
|
50865
|
+
class ManageColumnsDialogComponent {
|
|
50866
|
+
constructor() {
|
|
50867
|
+
this.columns = [];
|
|
50868
|
+
this.lockedColumns = [];
|
|
50869
|
+
this.items = [];
|
|
50870
|
+
this.newColName = '';
|
|
50871
|
+
this.columnsError = null;
|
|
50872
|
+
this.trackByUid = (_, item) => item.uid;
|
|
50873
|
+
this.nextUid = 1;
|
|
50874
|
+
}
|
|
50875
|
+
ngOnInit() {
|
|
50876
|
+
const initial = Array.isArray(this.columns) ? this.columns : [];
|
|
50877
|
+
this.items = initial.map(name => ({
|
|
50878
|
+
uid: this.nextUid++,
|
|
50879
|
+
originalName: name,
|
|
50880
|
+
name,
|
|
50881
|
+
}));
|
|
50882
|
+
}
|
|
50883
|
+
isLocked(item) {
|
|
50884
|
+
if (!this.lockedColumns || this.lockedColumns.length === 0) {
|
|
50885
|
+
return false;
|
|
50886
|
+
}
|
|
50887
|
+
if (item.originalName != null && this.lockedColumns.indexOf(item.originalName) !== -1) {
|
|
50888
|
+
return true;
|
|
50889
|
+
}
|
|
50890
|
+
return this.lockedColumns.indexOf(item.name) !== -1;
|
|
50891
|
+
}
|
|
50892
|
+
onDndDrop(event) {
|
|
50893
|
+
const dragged = event.data;
|
|
50894
|
+
if (!dragged || event.index == null) {
|
|
50895
|
+
return;
|
|
50896
|
+
}
|
|
50897
|
+
const from = this.items.findIndex(it => it.uid === dragged.uid);
|
|
50898
|
+
if (from < 0) {
|
|
50899
|
+
return;
|
|
50900
|
+
}
|
|
50901
|
+
const next = this.items.slice();
|
|
50902
|
+
next.splice(from, 1);
|
|
50903
|
+
const to = event.index > from ? event.index - 1 : event.index;
|
|
50904
|
+
next.splice(to, 0, dragged);
|
|
50905
|
+
this.items = next;
|
|
50906
|
+
}
|
|
50907
|
+
onMove(index, dir) {
|
|
50908
|
+
const target = index + dir;
|
|
50909
|
+
if (target < 0 || target >= this.items.length) {
|
|
50910
|
+
return;
|
|
50911
|
+
}
|
|
50912
|
+
const next = this.items.slice();
|
|
50913
|
+
[next[index], next[target]] = [next[target], next[index]];
|
|
50914
|
+
this.items = next;
|
|
50915
|
+
}
|
|
50916
|
+
onRename(index, value) {
|
|
50917
|
+
if (!this.items[index]) {
|
|
50918
|
+
return;
|
|
50919
|
+
}
|
|
50920
|
+
this.items = this.items.map((it, i) => i === index ? { ...it, name: value } : it);
|
|
50921
|
+
this.columnsError = null;
|
|
50922
|
+
}
|
|
50923
|
+
onRemove(index) {
|
|
50924
|
+
const item = this.items[index];
|
|
50925
|
+
if (!item || this.isLocked(item)) {
|
|
50926
|
+
return;
|
|
50927
|
+
}
|
|
50928
|
+
this.items = this.items.filter((_, i) => i !== index);
|
|
50929
|
+
this.columnsError = null;
|
|
50930
|
+
}
|
|
50931
|
+
onNewColNameChange(value) {
|
|
50932
|
+
this.newColName = value;
|
|
50933
|
+
}
|
|
50934
|
+
onAdd() {
|
|
50935
|
+
const trimmed = (this.newColName || '').trim();
|
|
50936
|
+
if (!trimmed || this.itemsHasName(trimmed)) {
|
|
50937
|
+
return;
|
|
50938
|
+
}
|
|
50939
|
+
this.items = [...this.items, {
|
|
50940
|
+
uid: this.nextUid++,
|
|
50941
|
+
originalName: null,
|
|
50942
|
+
name: trimmed,
|
|
50943
|
+
}];
|
|
50944
|
+
this.newColName = '';
|
|
50945
|
+
this.columnsError = null;
|
|
50946
|
+
}
|
|
50947
|
+
get canAdd() {
|
|
50948
|
+
const trimmed = (this.newColName || '').trim();
|
|
50949
|
+
if (!trimmed) {
|
|
50950
|
+
return false;
|
|
50951
|
+
}
|
|
50952
|
+
return !this.itemsHasName(trimmed);
|
|
50953
|
+
}
|
|
50954
|
+
getValue() {
|
|
50955
|
+
const trimmed = this.items.map(it => ({
|
|
50956
|
+
originalName: it.originalName,
|
|
50957
|
+
name: (it.name || '').trim(),
|
|
50958
|
+
}));
|
|
50959
|
+
if (trimmed.length === 0) {
|
|
50960
|
+
this.columnsError = 'At least one column is required.';
|
|
50961
|
+
return null;
|
|
50962
|
+
}
|
|
50963
|
+
if (trimmed.some(c => c.name.length === 0)) {
|
|
50964
|
+
this.columnsError = 'Column names cannot be empty.';
|
|
50965
|
+
return null;
|
|
50966
|
+
}
|
|
50967
|
+
const lowered = trimmed.map(c => c.name.toLowerCase());
|
|
50968
|
+
if (new Set(lowered).size !== trimmed.length) {
|
|
50969
|
+
this.columnsError = 'Column names must be unique.';
|
|
50970
|
+
return null;
|
|
50971
|
+
}
|
|
50972
|
+
this.columnsError = null;
|
|
50973
|
+
return { columns: trimmed };
|
|
50974
|
+
}
|
|
50975
|
+
itemsHasName(candidate) {
|
|
50976
|
+
const lowered = candidate.toLowerCase();
|
|
50977
|
+
return this.items.some(it => (it.name || '').trim().toLowerCase() === lowered);
|
|
50978
|
+
}
|
|
50979
|
+
}
|
|
50980
|
+
ManageColumnsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ManageColumnsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
50981
|
+
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"] }] });
|
|
50982
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ManageColumnsDialogComponent, decorators: [{
|
|
50983
|
+
type: Component,
|
|
50984
|
+
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" }]
|
|
50985
|
+
}], propDecorators: { columns: [{
|
|
50986
|
+
type: Input
|
|
50987
|
+
}], lockedColumns: [{
|
|
50988
|
+
type: Input
|
|
50989
|
+
}] } });
|
|
50990
|
+
|
|
50991
|
+
const ALL_FILTER_VALUE = '__all__';
|
|
50992
|
+
|
|
50993
|
+
class AuditLogEntryCardComponent {
|
|
50994
|
+
get userShortName() {
|
|
50995
|
+
const u = this.entry?.user || '';
|
|
50996
|
+
const idx = u.indexOf('@');
|
|
50997
|
+
return idx > 0 ? u.substring(0, idx) : u;
|
|
50998
|
+
}
|
|
50999
|
+
get etypeClass() {
|
|
51000
|
+
switch (this.entry?.entityType) {
|
|
51001
|
+
case 'Environment Variable': return 'cqa-audit-log-etype-ev';
|
|
51002
|
+
case 'Test Data Profile': return 'cqa-audit-log-etype-tdp';
|
|
51003
|
+
case 'Global Data': return 'cqa-audit-log-etype-gd';
|
|
51004
|
+
default: return '';
|
|
51005
|
+
}
|
|
51006
|
+
}
|
|
51007
|
+
get hasDiff() {
|
|
51008
|
+
return this.entry?.before != null || this.entry?.after != null;
|
|
51009
|
+
}
|
|
51010
|
+
}
|
|
51011
|
+
AuditLogEntryCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AuditLogEntryCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
51012
|
+
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"] }] });
|
|
51013
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AuditLogEntryCardComponent, decorators: [{
|
|
51014
|
+
type: Component,
|
|
51015
|
+
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" }]
|
|
51016
|
+
}], propDecorators: { entry: [{
|
|
51017
|
+
type: Input
|
|
51018
|
+
}] } });
|
|
51019
|
+
|
|
51020
|
+
class AuditLogDrawerComponent {
|
|
51021
|
+
constructor() {
|
|
51022
|
+
this.entries = [];
|
|
51023
|
+
this.entityTypeOptions = [];
|
|
51024
|
+
this.envOptions = [];
|
|
51025
|
+
this.userOptions = [];
|
|
51026
|
+
this.defaultRange = '7d';
|
|
51027
|
+
this.isLoading = false;
|
|
51028
|
+
this.filterChange = new EventEmitter();
|
|
51029
|
+
this.close = new EventEmitter();
|
|
51030
|
+
this.ALL = ALL_FILTER_VALUE;
|
|
51031
|
+
this.filtersForm = new FormGroup({
|
|
51032
|
+
entityType: new FormControl(ALL_FILTER_VALUE),
|
|
51033
|
+
env: new FormControl(ALL_FILTER_VALUE),
|
|
51034
|
+
user: new FormControl(ALL_FILTER_VALUE),
|
|
51035
|
+
range: new FormControl('7d'),
|
|
51036
|
+
});
|
|
51037
|
+
this.trackById = (_, e) => e.id;
|
|
51038
|
+
this.destroy$ = new Subject();
|
|
51039
|
+
this.rangeMs = {
|
|
51040
|
+
'24h': 24 * 60 * 60 * 1000,
|
|
51041
|
+
'7d': 7 * 24 * 60 * 60 * 1000,
|
|
51042
|
+
'30d': 30 * 24 * 60 * 60 * 1000,
|
|
51043
|
+
'all': Number.POSITIVE_INFINITY,
|
|
51044
|
+
};
|
|
51045
|
+
}
|
|
51046
|
+
ngOnInit() {
|
|
51047
|
+
this.filtersForm.patchValue({ range: this.defaultRange });
|
|
51048
|
+
this.entityConfig = this.buildSelectConfig('entityType', 'All entity types', this.entityTypeOptions);
|
|
51049
|
+
this.envConfig = this.buildSelectConfig('env', 'All environments', this.envOptions);
|
|
51050
|
+
this.userConfig = this.buildSelectConfig('user', 'All users', this.userOptions);
|
|
51051
|
+
this.rangeConfig = this.buildSelectConfig('range', 'Last 7 days', [
|
|
51052
|
+
{ value: '24h', label: 'Last 24h' },
|
|
51053
|
+
{ value: '7d', label: 'Last 7 days' },
|
|
51054
|
+
{ value: '30d', label: 'Last 30 days' },
|
|
51055
|
+
{ value: 'all', label: 'All time' },
|
|
51056
|
+
], false);
|
|
51057
|
+
this.filtersForm.valueChanges
|
|
51058
|
+
.pipe(takeUntil(this.destroy$))
|
|
51059
|
+
.subscribe(() => this.filterChange.emit(this.currentFilterState()));
|
|
51060
|
+
}
|
|
51061
|
+
ngOnDestroy() {
|
|
51062
|
+
this.destroy$.next();
|
|
51063
|
+
this.destroy$.complete();
|
|
51064
|
+
}
|
|
51065
|
+
get filteredEntries() {
|
|
51066
|
+
const f = this.currentFilterState();
|
|
51067
|
+
const cutoff = this.rangeMs[f.range];
|
|
51068
|
+
const now = Date.now();
|
|
51069
|
+
return (this.entries || []).filter(e => {
|
|
51070
|
+
if (f.entityType !== ALL_FILTER_VALUE && e.entityType !== f.entityType) {
|
|
51071
|
+
return false;
|
|
51072
|
+
}
|
|
51073
|
+
if (f.env !== ALL_FILTER_VALUE && !this.entryMatchesEnv(e, f.env)) {
|
|
51074
|
+
return false;
|
|
51075
|
+
}
|
|
51076
|
+
if (f.user !== ALL_FILTER_VALUE && e.user !== f.user) {
|
|
51077
|
+
return false;
|
|
51078
|
+
}
|
|
51079
|
+
if (cutoff !== Number.POSITIVE_INFINITY) {
|
|
51080
|
+
const ts = this.parseTs(e.ts);
|
|
51081
|
+
if (ts != null && now - ts > cutoff) {
|
|
51082
|
+
return false;
|
|
51083
|
+
}
|
|
51084
|
+
}
|
|
51085
|
+
return true;
|
|
51086
|
+
});
|
|
51087
|
+
}
|
|
51088
|
+
onClose() {
|
|
51089
|
+
this.close.emit();
|
|
51090
|
+
}
|
|
51091
|
+
entryMatchesEnv(entry, env) {
|
|
51092
|
+
return (entry.entityName || '').toLowerCase().includes(env.toLowerCase());
|
|
51093
|
+
}
|
|
51094
|
+
parseTs(ts) {
|
|
51095
|
+
if (!ts) {
|
|
51096
|
+
return null;
|
|
51097
|
+
}
|
|
51098
|
+
const t = Date.parse(ts);
|
|
51099
|
+
return Number.isNaN(t) ? null : t;
|
|
51100
|
+
}
|
|
51101
|
+
currentFilterState() {
|
|
51102
|
+
const v = this.filtersForm.value;
|
|
51103
|
+
return {
|
|
51104
|
+
entityType: v.entityType ?? ALL_FILTER_VALUE,
|
|
51105
|
+
env: v.env ?? ALL_FILTER_VALUE,
|
|
51106
|
+
user: v.user ?? ALL_FILTER_VALUE,
|
|
51107
|
+
range: v.range ?? '7d',
|
|
51108
|
+
};
|
|
51109
|
+
}
|
|
51110
|
+
buildSelectConfig(key, placeholder, items, includeAll = true) {
|
|
51111
|
+
const options = [];
|
|
51112
|
+
if (includeAll) {
|
|
51113
|
+
options.push({ id: ALL_FILTER_VALUE, value: ALL_FILTER_VALUE, name: placeholder, label: placeholder });
|
|
51114
|
+
}
|
|
51115
|
+
for (const it of items) {
|
|
51116
|
+
options.push({ id: it.value, value: it.value, name: it.label, label: it.label });
|
|
51117
|
+
}
|
|
51118
|
+
return {
|
|
51119
|
+
key,
|
|
51120
|
+
label: '',
|
|
51121
|
+
placeholder,
|
|
51122
|
+
multiple: false,
|
|
51123
|
+
searchable: false,
|
|
51124
|
+
options,
|
|
51125
|
+
};
|
|
51126
|
+
}
|
|
51127
|
+
}
|
|
51128
|
+
AuditLogDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AuditLogDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
51129
|
+
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"] }] });
|
|
51130
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AuditLogDrawerComponent, decorators: [{
|
|
51131
|
+
type: Component,
|
|
51132
|
+
args: [{ selector: 'cqa-audit-log-drawer', host: {
|
|
51133
|
+
class: 'cqa-ui-root',
|
|
51134
|
+
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);',
|
|
51135
|
+
}, 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" }]
|
|
51136
|
+
}], propDecorators: { entries: [{
|
|
51137
|
+
type: Input
|
|
51138
|
+
}], entityTypeOptions: [{
|
|
51139
|
+
type: Input
|
|
51140
|
+
}], envOptions: [{
|
|
51141
|
+
type: Input
|
|
51142
|
+
}], userOptions: [{
|
|
51143
|
+
type: Input
|
|
51144
|
+
}], defaultRange: [{
|
|
51145
|
+
type: Input
|
|
51146
|
+
}], isLoading: [{
|
|
51147
|
+
type: Input
|
|
51148
|
+
}], filterChange: [{
|
|
51149
|
+
type: Output
|
|
51150
|
+
}], close: [{
|
|
51151
|
+
type: Output
|
|
51152
|
+
}] } });
|
|
51153
|
+
|
|
50814
51154
|
class AssignEnvironmentsDialogComponent {
|
|
50815
51155
|
constructor(cdr) {
|
|
50816
51156
|
this.cdr = cdr;
|
|
@@ -51068,6 +51408,9 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
51068
51408
|
NewEnvironmentDialogComponent,
|
|
51069
51409
|
NewEnvironmentVariableDialogComponent,
|
|
51070
51410
|
NewTestDataProfileDialogComponent,
|
|
51411
|
+
ManageColumnsDialogComponent,
|
|
51412
|
+
AuditLogDrawerComponent,
|
|
51413
|
+
AuditLogEntryCardComponent,
|
|
51071
51414
|
AssignEnvironmentsDialogComponent,
|
|
51072
51415
|
PermissionToggleComponent,
|
|
51073
51416
|
ExportCodeModalComponent,
|
|
@@ -51258,6 +51601,9 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
51258
51601
|
NewEnvironmentDialogComponent,
|
|
51259
51602
|
NewEnvironmentVariableDialogComponent,
|
|
51260
51603
|
NewTestDataProfileDialogComponent,
|
|
51604
|
+
ManageColumnsDialogComponent,
|
|
51605
|
+
AuditLogDrawerComponent,
|
|
51606
|
+
AuditLogEntryCardComponent,
|
|
51261
51607
|
AssignEnvironmentsDialogComponent,
|
|
51262
51608
|
PermissionToggleComponent,
|
|
51263
51609
|
ExportCodeModalComponent,
|
|
@@ -51493,6 +51839,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
51493
51839
|
NewEnvironmentDialogComponent,
|
|
51494
51840
|
NewEnvironmentVariableDialogComponent,
|
|
51495
51841
|
NewTestDataProfileDialogComponent,
|
|
51842
|
+
ManageColumnsDialogComponent,
|
|
51843
|
+
AuditLogDrawerComponent,
|
|
51844
|
+
AuditLogEntryCardComponent,
|
|
51496
51845
|
AssignEnvironmentsDialogComponent,
|
|
51497
51846
|
PermissionToggleComponent,
|
|
51498
51847
|
ExportCodeModalComponent,
|
|
@@ -51689,6 +52038,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
51689
52038
|
NewEnvironmentDialogComponent,
|
|
51690
52039
|
NewEnvironmentVariableDialogComponent,
|
|
51691
52040
|
NewTestDataProfileDialogComponent,
|
|
52041
|
+
ManageColumnsDialogComponent,
|
|
52042
|
+
AuditLogDrawerComponent,
|
|
52043
|
+
AuditLogEntryCardComponent,
|
|
51692
52044
|
AssignEnvironmentsDialogComponent,
|
|
51693
52045
|
PermissionToggleComponent,
|
|
51694
52046
|
ExportCodeModalComponent,
|
|
@@ -51797,6 +52149,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
51797
52149
|
}]
|
|
51798
52150
|
}], ctorParameters: function () { return [{ type: i1.MatIconRegistry }]; } });
|
|
51799
52151
|
|
|
52152
|
+
class AuditLogDrawerService {
|
|
52153
|
+
constructor(overlay, injector) {
|
|
52154
|
+
this.overlay = overlay;
|
|
52155
|
+
this.injector = injector;
|
|
52156
|
+
this.currentOverlayRef = null;
|
|
52157
|
+
}
|
|
52158
|
+
open(inputs) {
|
|
52159
|
+
if (this.currentOverlayRef) {
|
|
52160
|
+
this.currentOverlayRef.dispose();
|
|
52161
|
+
this.currentOverlayRef = null;
|
|
52162
|
+
}
|
|
52163
|
+
const positionStrategy = this.overlay.position()
|
|
52164
|
+
.global()
|
|
52165
|
+
.right('0')
|
|
52166
|
+
.top('0')
|
|
52167
|
+
.bottom('0');
|
|
52168
|
+
const overlayRef = this.overlay.create(new OverlayConfig({
|
|
52169
|
+
hasBackdrop: true,
|
|
52170
|
+
backdropClass: ['cqa-audit-log-drawer-backdrop'],
|
|
52171
|
+
scrollStrategy: this.overlay.scrollStrategies.block(),
|
|
52172
|
+
positionStrategy,
|
|
52173
|
+
panelClass: ['cqa-audit-log-drawer-panel', 'cqa-ui-root'],
|
|
52174
|
+
maxWidth: '100vw',
|
|
52175
|
+
height: '100%',
|
|
52176
|
+
}));
|
|
52177
|
+
const portal = new ComponentPortal(AuditLogDrawerComponent, null, this.injector);
|
|
52178
|
+
const componentRef = overlayRef.attach(portal);
|
|
52179
|
+
const instance = componentRef.instance;
|
|
52180
|
+
instance.entries = inputs.entries ?? [];
|
|
52181
|
+
instance.entityTypeOptions = inputs.entityTypeOptions ?? [];
|
|
52182
|
+
instance.envOptions = inputs.envOptions ?? [];
|
|
52183
|
+
instance.userOptions = inputs.userOptions ?? [];
|
|
52184
|
+
instance.defaultRange = inputs.defaultRange ?? '7d';
|
|
52185
|
+
instance.isLoading = !!inputs.isLoading;
|
|
52186
|
+
componentRef.changeDetectorRef.markForCheck();
|
|
52187
|
+
const filterChange = new Subject();
|
|
52188
|
+
const afterClosed = new Subject();
|
|
52189
|
+
instance.filterChange.subscribe((s) => filterChange.next(s));
|
|
52190
|
+
const closeAll = () => {
|
|
52191
|
+
if (!this.currentOverlayRef) {
|
|
52192
|
+
return;
|
|
52193
|
+
}
|
|
52194
|
+
overlayRef.dispose();
|
|
52195
|
+
this.currentOverlayRef = null;
|
|
52196
|
+
afterClosed.next();
|
|
52197
|
+
afterClosed.complete();
|
|
52198
|
+
filterChange.complete();
|
|
52199
|
+
};
|
|
52200
|
+
instance.close.subscribe(() => closeAll());
|
|
52201
|
+
overlayRef.backdropClick().subscribe(() => closeAll());
|
|
52202
|
+
overlayRef.keydownEvents()
|
|
52203
|
+
.pipe(filter((e) => e.key === 'Escape' || e.key === 'Esc'))
|
|
52204
|
+
.subscribe(() => closeAll());
|
|
52205
|
+
this.currentOverlayRef = overlayRef;
|
|
52206
|
+
return {
|
|
52207
|
+
filterChange$: filterChange.asObservable(),
|
|
52208
|
+
afterClosed$: afterClosed.asObservable(),
|
|
52209
|
+
close: () => closeAll(),
|
|
52210
|
+
updateEntries: (entries) => {
|
|
52211
|
+
instance.entries = entries ?? [];
|
|
52212
|
+
componentRef.changeDetectorRef.markForCheck();
|
|
52213
|
+
},
|
|
52214
|
+
updateLoading: (isLoading) => {
|
|
52215
|
+
instance.isLoading = !!isLoading;
|
|
52216
|
+
componentRef.changeDetectorRef.markForCheck();
|
|
52217
|
+
},
|
|
52218
|
+
};
|
|
52219
|
+
}
|
|
52220
|
+
}
|
|
52221
|
+
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 });
|
|
52222
|
+
AuditLogDrawerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AuditLogDrawerService, providedIn: 'root' });
|
|
52223
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AuditLogDrawerService, decorators: [{
|
|
52224
|
+
type: Injectable,
|
|
52225
|
+
args: [{ providedIn: 'root' }]
|
|
52226
|
+
}], ctorParameters: function () { return [{ type: i1$6.Overlay }, { type: i0.Injector }]; } });
|
|
52227
|
+
|
|
51800
52228
|
/**
|
|
51801
52229
|
* Opens the Step Details Drawer (Edit In Depth) as a right-side drawer overlay.
|
|
51802
52230
|
* Matches the behavior of Element popup - opens as a right-side drawer panel.
|
|
@@ -52391,5 +52819,5 @@ function buildTestCaseDetailsFromApi(data, options) {
|
|
|
52391
52819
|
* Generated bundle index. Do not edit.
|
|
52392
52820
|
*/
|
|
52393
52821
|
|
|
52394
|
-
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 };
|
|
52822
|
+
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 };
|
|
52395
52823
|
//# sourceMappingURL=cqa-lib-cqa-ui.mjs.map
|