Add default to empty drag-drop list

src-ui/src/app/components/admin/settings/settings.component.html

@@ -364,7 +364,7 @@
                   </select>
                 </div>
                   @if (displayFields) {
-                    <pngx-input-drag-drop-select i18n-title title="Show" [items]="displayFields" formControlName="display_fields"></pngx-input-drag-drop-select>
+                    <pngx-input-drag-drop-select i18n-title title="Show" i18n-emptyText emptyText="Default" [items]="displayFields" formControlName="display_fields"></pngx-input-drag-drop-select>
                   }
                 </div>
             </div>

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

@@ -8,6 +8,9 @@
         @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">

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

@@ -25,6 +25,9 @@ export class DragDropSelectComponent extends AbstractInputComponent<string[]> {
   @Input() items: { id: string; name: string }[] = []
   public selectedItems: { id: string; name: string }[] = []
 
+  @Input()
+  emptyText = $localize`No items selected`
+
   @ViewChild('selectedList') selectedList: CdkDropList
   @ViewChild('unselectedList') unselectedList: CdkDropList