Feature: customizable fields display for documents, saved views & dashboard widgets (#6439)

src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.html

@@ -0,0 +1,26 @@
+<div class="d-flex flex-row mt-2 align-items-center">
+    <span class="me-2">{{title}}:</span>
+    <div class="d-flex flex-row gap-2 w-100 mh-1" style="min-height: 1em;"
+        cdkDropList #selectedList="cdkDropList"
+        cdkDropListOrientation="horizontal"
+        (cdkDropListDropped)="drop($event)"
+        [cdkDropListConnectedTo]="[unselectedList]">
+        @for (item of selectedItems; track item.id) {
+            <div class="badge bg-primary" cdkDrag>{{item.name}}</div>
+        }
+        @if (selectedItems.length === 0) {
+            <div class="badge bg-light fst-italic" i18n>{{emptyText}}</div>
+        }
+    </div>
+</div>
+<div class="d-flex flex-row mt-2 align-items-center bg-light p-2">
+    <div class="d-flex flex-row gap-2 w-100 mh-1" style="min-height: 1em;"
+        cdkDropList #unselectedList="cdkDropList"
+        cdkDropListOrientation="horizontal"
+        (cdkDropListDropped)="drop($event)"
+        [cdkDropListConnectedTo]="[selectedList]">
+        @for (item of unselectedItems; track item.id) {
+            <div class="badge bg-secondary opacity-50" cdkDrag>{{item.name}}</div>
+        }
+    </div>
+</div>