From 35112312559d79c5427bb59f5108b8a0ff2f7db4 Mon Sep 17 00:00:00 2001
From: Vera Malieske <vera.malieske@web.de>
Date: Fri, 19 Jun 2026 15:36:27 +0200
Subject: [PATCH 1/5] [Fix] creation: prevent adding empty creation entries

---
 .../metadata/optional/creation/creation.component.html          | 2 +-
 .../components/metadata/optional/creation/creation.component.ts | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/components/metadata/optional/creation/creation.component.html b/src/app/components/metadata/optional/creation/creation.component.html
index 9287b89f..66d46532 100644
--- a/src/app/components/metadata/optional/creation/creation.component.html
+++ b/src/app/components/metadata/optional/creation/creation.component.html
@@ -37,7 +37,7 @@
     <button
       mat-flat-button
       color="primary"
-      [disabled]="!isFormValid"
+      [disabled]="!isFormValid()"
       (click)="addNewCreationData()"
     >
       {{ 'Add' | translate }}
diff --git a/src/app/components/metadata/optional/creation/creation.component.ts b/src/app/components/metadata/optional/creation/creation.component.ts
index 038853b6..e683a6c4 100644
--- a/src/app/components/metadata/optional/creation/creation.component.ts
+++ b/src/app/components/metadata/optional/creation/creation.component.ts
@@ -54,6 +54,7 @@ export class CreationComponent implements OnInit {
 
   addNewCreationData() {
     const value = this.form.value;
+    if (!this.isFormValid()) return;
 
     let formattedDate = '';
     if (value.start && value.end) {

From 6847b8188a16c7b9a3b4ed73477996d368c0b03e Mon Sep 17 00:00:00 2001
From: Vera Malieske <vera.malieske@web.de>
Date: Wed, 1 Jul 2026 14:57:39 +0200
Subject: [PATCH 2/5] Rename dialog

Part of #265 : add a string to switch naming between upload and edit an object
---
 .../create-new-entity.component.ts            | 386 ++++++++++--------
 1 file changed, 224 insertions(+), 162 deletions(-)

diff --git a/src/app/dialogs/create-new-entity/create-new-entity.component.ts b/src/app/dialogs/create-new-entity/create-new-entity.component.ts
index b2eb8f40..6fc4373d 100644
--- a/src/app/dialogs/create-new-entity/create-new-entity.component.ts
+++ b/src/app/dialogs/create-new-entity/create-new-entity.component.ts
@@ -1,4 +1,4 @@
-import { CdkStep, StepperSelectionEvent } from '@angular/cdk/stepper';
+import { CdkStep, StepperSelectionEvent } from "@angular/cdk/stepper";
 import {
   AfterViewInit,
   Component,
@@ -9,22 +9,30 @@ import {
   OnInit,
   signal,
   viewChild,
-} from '@angular/core';
+} from "@angular/core";
 import {
   FormControl,
   FormGroup,
   FormsModule,
   ReactiveFormsModule,
   Validators,
-} from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { MatListModule } from '@angular/material/list';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatStep, MatStepper, MatStepperModule } from '@angular/material/stepper';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { DomSanitizer } from '@angular/platform-browser';
-import { Router } from '@angular/router';
-import fscreen from 'fscreen';
+} from "@angular/forms";
+import {
+  MAT_DIALOG_DATA,
+  MatDialog,
+  MatDialogRef,
+} from "@angular/material/dialog";
+import { MatListModule } from "@angular/material/list";
+import { MatSidenavModule } from "@angular/material/sidenav";
+import {
+  MatStep,
+  MatStepper,
+  MatStepperModule,
+} from "@angular/material/stepper";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { DomSanitizer } from "@angular/platform-browser";
+import { Router } from "@angular/router";
+import fscreen from "fscreen";
 import {
   BehaviorSubject,
   combineLatest,
@@ -36,16 +44,16 @@ import {
   of,
   startWith,
   switchMap,
-} from 'rxjs';
-
-import { AsyncPipe } from '@angular/common';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { MatButtonModule } from '@angular/material/button';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatError, MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
+} from "rxjs";
+
+import { AsyncPipe } from "@angular/common";
+import { toSignal } from "@angular/core/rxjs-interop";
+import { MatButtonModule } from "@angular/material/button";
+import { MatChipsModule } from "@angular/material/chips";
+import { MatDividerModule } from "@angular/material/divider";
+import { MatError, MatFormFieldModule } from "@angular/material/form-field";
+import { MatIconModule } from "@angular/material/icon";
+import { MatInputModule } from "@angular/material/input";
 import {
   EntityAccessRole,
   IContact,
@@ -56,17 +64,20 @@ import {
   CreatorField,
   isEntitySettings,
   isDigitalEntity,
-} from '@kompakkt/common';
-import { ExtenderSlotManager } from '@kompakkt/plugins/extender';
-import ObjectID from 'bson-objectid';
-import { OutlinedInputComponent } from 'src/app/components/outlined-input/outlined-input.component';
-import { TabsComponent } from 'src/app/components/tabs/tabs.component';
-import { ConfirmationDialogComponent, VisibilityAndAccessDialogComponent } from 'src/app/dialogs';
-import { DigitalEntity, PhysicalEntity } from 'src/app/metadata';
-import { Licences } from 'src/app/metadata/licences';
-import { TranslatePipe } from 'src/app/pipes';
-import { GetSketchfabPreviewPipe } from 'src/app/pipes/get-sketchfab-preview.pipe';
-import { IsLastStepPipe } from 'src/app/pipes/is-last-step.pipe';
+} from "@kompakkt/common";
+import { ExtenderSlotManager } from "@kompakkt/plugins/extender";
+import ObjectID from "bson-objectid";
+import { OutlinedInputComponent } from "src/app/components/outlined-input/outlined-input.component";
+import { TabsComponent } from "src/app/components/tabs/tabs.component";
+import {
+  ConfirmationDialogComponent,
+  VisibilityAndAccessDialogComponent,
+} from "src/app/dialogs";
+import { DigitalEntity, PhysicalEntity } from "src/app/metadata";
+import { Licences } from "src/app/metadata/licences";
+import { TranslatePipe } from "src/app/pipes";
+import { GetSketchfabPreviewPipe } from "src/app/pipes/get-sketchfab-preview.pipe";
+import { IsLastStepPipe } from "src/app/pipes/is-last-step.pipe";
 import {
   AccountService,
   BackendService,
@@ -74,20 +85,20 @@ import {
   EventsService,
   supportedFileFormats,
   UploadHandlerService,
-} from 'src/app/services';
-import { MetadataCommunicationService } from 'src/app/services/metadata-communication.service';
-import { getServerUrl } from 'src/app/util/get-server-url';
-import { environment } from 'src/environment';
-import { EntityComponent } from '../../components/metadata/entity/entity.component';
-import { UploadComponent } from '../../components/upload/upload.component';
-import { ElementRef } from '@angular/core';
-import { ViewContainerRef } from '@angular/core';
-import { Subscription } from 'rxjs';
+} from "src/app/services";
+import { MetadataCommunicationService } from "src/app/services/metadata-communication.service";
+import { getServerUrl } from "src/app/util/get-server-url";
+import { environment } from "src/environment";
+import { EntityComponent } from "../../components/metadata/entity/entity.component";
+import { UploadComponent } from "../../components/upload/upload.component";
+import { ElementRef } from "@angular/core";
+import { ViewContainerRef } from "@angular/core";
+import { Subscription } from "rxjs";
 
 @Component({
-  selector: 'app-create-new-entity',
-  templateUrl: './create-new-entity.component.html',
-  styleUrls: ['./create-new-entity.component.scss'],
+  selector: "app-create-new-entity",
+  templateUrl: "./create-new-entity.component.html",
+  styleUrls: ["./create-new-entity.component.scss"],
   imports: [
     MatIconModule,
     MatStepperModule,
@@ -113,10 +124,12 @@ import { Subscription } from 'rxjs';
     TabsComponent,
   ],
   host: {
-    '[style.width]': 'wizardWidth()',
+    "[style.width]": "wizardWidth()",
   },
 })
-export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestroy {
+export class CreateNewEntityComponent
+  implements AfterViewInit, OnInit, OnDestroy
+{
   private translatePipe = inject(TranslatePipe);
   public uploadHandler = inject(UploadHandlerService);
   private account = inject(AccountService);
@@ -128,23 +141,27 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
   private metaService = inject(MetadataCommunicationService);
   // When opened as a dialog
   private dialog = inject(MatDialog);
-  public dialogRef = inject(MatDialogRef<CreateNewEntityComponent>, { optional: true });
-  public dialogData = inject<IEntity | undefined>(MAT_DIALOG_DATA, { optional: true });
+  public dialogRef = inject(MatDialogRef<CreateNewEntityComponent>, {
+    optional: true,
+  });
+  public dialogData = inject<IEntity | undefined>(MAT_DIALOG_DATA, {
+    optional: true,
+  });
 
-  public stepper = viewChild<MatStepper>('stepper');
-  public stepUpload = viewChild<MatStep>('stepUpload');
-  public stepSettings = viewChild<MatStep>('stepSettings');
-  public stepMetadata = viewChild<MatStep>('stepMetadata');
+  public stepper = viewChild<MatStepper>("stepper");
+  public stepUpload = viewChild<MatStep>("stepUpload");
+  public stepSettings = viewChild<MatStep>("stepSettings");
+  public stepMetadata = viewChild<MatStep>("stepMetadata");
   public selectedStep = signal<CdkStep | undefined>(this.stepUpload());
 
   wizardWidth = computed(() => {
     const selectedStep = this.selectedStep();
-    const defaultWidth = 'min(50rem, 80vw)';
+    const defaultWidth = "min(50rem, 80vw)";
 
     if (!selectedStep) return defaultWidth;
 
-    if (selectedStep === this.stepSettings()) return 'min(80rem, 80vw)';
-    if (selectedStep === this.stepMetadata()) return 'min(60rem, 80vw)';
+    if (selectedStep === this.stepSettings()) return "min(80rem, 80vw)";
+    if (selectedStep === this.stepMetadata()) return "min(60rem, 80vw)";
 
     return defaultWidth;
   });
@@ -158,25 +175,25 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
     const entity = this.serverEntity();
     if (!entity || !entity._id) return undefined;
     const url = `${environment.viewer_url}${
-      environment.viewer_url.endsWith('index.html') ? '' : '/'
+      environment.viewer_url.endsWith("index.html") ? "" : "/"
     }?mode=upload&entity=${entity._id}`;
     return this.sanitizer.bypassSecurityTrustResourceUrl(url);
   });
 
   public availableRoles = [
-    { type: 'RIGHTS_OWNER', value: 'Rightsowner', checked: false },
-    { type: 'CREATOR', value: 'Creator', checked: false },
-    { type: 'EDITOR', value: 'Editor', checked: false },
-    { type: 'DATA_CREATOR', value: 'Data Creator', checked: false },
-    { type: 'CONTACT_PERSON', value: 'Contact Person', checked: false },
+    { type: "RIGHTS_OWNER", value: "Rightsowner", checked: false },
+    { type: "CREATOR", value: "Creator", checked: false },
+    { type: "EDITOR", value: "Editor", checked: false },
+    { type: "DATA_CREATOR", value: "Data Creator", checked: false },
+    { type: "CONTACT_PERSON", value: "Contact Person", checked: false },
   ];
 
   // While waiting for server responses, block further user interaction
   public isFinishing = signal(false);
   public isFinished = signal(false);
 
-  public externalFileControlExtensions = ['glb', 'stl', 'spz', 'splat'];
-  public externalFileControl = new FormControl('', ctrl => {
+  public externalFileControlExtensions = ["glb", "stl", "spz", "splat"];
+  public externalFileControl = new FormControl("", (ctrl) => {
     const value = ctrl.value as string;
 
     // No checking on empty
@@ -186,32 +203,33 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
     if (!value.match(/^https?:\/\//)) return { nourl: true };
 
     // Check for matching host protocol
-    if (value.startsWith('http://')) return { unsafe: true };
+    if (value.startsWith("http://")) return { unsafe: true };
 
     // Check supported file extensions
-    const ext = value.slice(value.lastIndexOf('.')).slice(1);
-    if (!this.externalFileControlExtensions.includes(ext)) return { unsupported: true };
+    const ext = value.slice(value.lastIndexOf(".")).slice(1);
+    if (!this.externalFileControlExtensions.includes(ext))
+      return { unsupported: true };
 
     return null;
   });
 
   public sketchfabGroup = new FormGroup({
-    token: new FormControl('', {
+    token: new FormControl("", {
       nonNullable: true,
       validators: [Validators.minLength(1)],
     }),
-    url: new FormControl('', {
+    url: new FormControl("", {
       nonNullable: true,
       validators: [Validators.minLength(1)],
     }),
   });
   sketchfabModelId$ = this.sketchfabGroup.controls.url.valueChanges.pipe(
-    startWith(''),
-    map(url => {
+    startWith(""),
+    map((url) => {
       if (!url) return;
       const match = url.match(/sketchfab\.com\/3d-models\/([^/?#]+)/);
       if (!match) return;
-      return match.at(1)?.split('-').at(-1);
+      return match.at(1)?.split("-").at(-1);
     }),
   );
   sketchfabModel$ = combineLatest([
@@ -220,21 +238,27 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
     ),
     this.sketchfabModelId$,
   ]).pipe(
-    filter(([token]) => this.sketchfabGroup.controls.token.valid && token.length > 0),
+    filter(
+      ([token]) => this.sketchfabGroup.controls.token.valid && token.length > 0,
+    ),
     map(([_, modelId]) => modelId),
     distinctUntilChanged(),
     debounceTime(500),
-    switchMap(id => (id ? this.backend.getSketchfabModelDetails(id) : of(undefined))),
+    switchMap((id) =>
+      id ? this.backend.getSketchfabModelDetails(id) : of(undefined),
+    ),
   );
   sketchfabLicence = computed(() => {
     const model = this.sketchfabModel();
-    const sketchfabLicence = model?.license.slug?.replaceAll('-', '').toUpperCase();
+    const sketchfabLicence = model?.license.slug
+      ?.replaceAll("-", "")
+      .toUpperCase();
     return sketchfabLicence;
   });
   sketchfabModel = toSignal(this.sketchfabModel$);
   wasSketchfabUploaded = signal(false);
   isImportingSketchfab = signal(false);
-  sourceSelection = signal<'upload' | 'sketchfab' | 'external'>('upload');
+  sourceSelection = signal<"upload" | "sketchfab" | "external">("upload");
 
   Licences = Licences;
 
@@ -259,22 +283,27 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
   constructor() {
     this.sketchfabModel$.subscribe(console.log);
 
-    this.account.isAuthenticated$.subscribe(isAuthenticated => {
-      if (!isAuthenticated) this.dialogRef?.close('User is not authenticated');
+    this.account.isAuthenticated$.subscribe((isAuthenticated) => {
+      if (!isAuthenticated) this.dialogRef?.close("User is not authenticated");
     });
 
     this.events.windowMessages$
-      .pipe(filter(message => message?.data?.type === 'settings'))
+      .pipe(filter((message) => message?.data?.type === "settings"))
       .subscribe(async ({ data }) => {
-        if (!data.data || !('entityId' in data.data) || !('settings' in data.data)) return;
+        if (
+          !data.data ||
+          !("entityId" in data.data) ||
+          !("settings" in data.data)
+        )
+          return;
         const settings = data.data.settings;
         if (!isEntitySettings(settings)) return;
         const serverEntity = this.serverEntity();
         if (serverEntity?._id !== data.data.entityId) return;
-        console.log('Message received in CreateNewEntityComponent', data);
+        console.log("Message received in CreateNewEntityComponent", data);
         this.entitySettings.set(settings);
         const value = this.entitySettings();
-        console.log('Settings windowMessage', value);
+        console.log("Settings windowMessage", value);
         const stepper = this.stepper();
         if (!!value && stepper?.selected) {
           // Close fullscreen viewer before proceeding to next step
@@ -307,15 +336,15 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
   isPluginDigitalEntityValid$ = new BehaviorSubject(false);
 
   getRoleValue(roleType: string): string {
-    const role = this.availableRoles.find(r => r.type === roleType);
+    const role = this.availableRoles.find((r) => r.type === roleType);
     return role ? role.value : roleType; // Fallback to roleType if no match is found
   }
 
   getFormattedRoles(roles: string[] | undefined): string {
     if (!roles) {
-      return ''; // Return an empty string if roles is undefined
+      return ""; // Return an empty string if roles is undefined
     }
-    return roles.map(role => this.getRoleValue(role)).join(', ');
+    return roles.map((role) => this.getRoleValue(role)).join(", ");
   }
 
   getMail(contactReferences: Record<string, IContact>): string | null {
@@ -342,8 +371,10 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
   imagePreviewUrl = computed(() => {
     const settings = this.entitySettings();
     if (!settings?.preview) return undefined;
-    const isBase64 = settings.preview.includes(';base64,');
-    return isBase64 ? settings.preview : getServerUrl(`${settings.preview}?t=${Date.now()}`);
+    const isBase64 = settings.preview.includes(";base64,");
+    return isBase64
+      ? settings.preview
+      : getServerUrl(`${settings.preview}?t=${Date.now()}`);
   });
 
   uploadValid = computed(() => {
@@ -355,11 +386,15 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
       return true;
     }
 
-    return this.uploadedFiles().length > 0 && this.uploadHandler.hasAllChecksums();
+    return (
+      this.uploadedFiles().length > 0 && this.uploadHandler.hasAllChecksums()
+    );
   });
 
   get canFinish() {
-    return this.isDigitalEntityValid && this.settingsValid() && this.uploadValid();
+    return (
+      this.isDigitalEntityValid && this.settingsValid() && this.uploadValid()
+    );
   }
 
   get externalFileValid() {
@@ -405,10 +440,18 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
       const entity = { ...this.dialogData } as IEntity;
       const { relatedDigitalEntity, settings } = entity;
       this.serverEntity.set(entity);
-      this.digitalEntity$.next(new DigitalEntity(relatedDigitalEntity as IDigitalEntity));
-      console.log('AddEntityWizard DialogData', this.dialogData, relatedDigitalEntity);
+      this.digitalEntity$.next(
+        new DigitalEntity(relatedDigitalEntity as IDigitalEntity),
+      );
+      console.log(
+        "AddEntityWizard DialogData",
+        this.dialogData,
+        relatedDigitalEntity,
+      );
       this.entitySettings.set(
-        this.dialogData.settings.preview !== '' ? { ...this.dialogData.settings } : undefined,
+        this.dialogData.settings.preview !== ""
+          ? { ...this.dialogData.settings }
+          : undefined,
       );
       this.uploadedFiles.set(this.dialogData.files);
       const stepper = this.stepper();
@@ -418,38 +461,44 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
     }
   }
 
-  digitalEntityWizardSlotRef = viewChild<ElementRef<HTMLElement>>('digitalEntityWizardSlot');
+  digitalEntityWizardSlotRef = viewChild<ElementRef<HTMLElement>>(
+    "digitalEntityWizardSlot",
+  );
   #viewContainerRef = inject(ViewContainerRef);
   #slotSubscription?: Subscription;
   ngAfterViewInit() {
-    this.stepper()?.selectionChange.subscribe(event => {
-      console.log('Stepper selectionChange', event);
+    this.stepper()?.selectionChange.subscribe((event) => {
+      console.log("Stepper selectionChange", event);
       this.selectedStep.set(event.selectedStep);
 
       // Register Slot for Metadata step
       if (event.selectedStep === this.stepMetadata()) {
         const elementRef = this.digitalEntityWizardSlotRef();
         if (!elementRef) {
-          console.error('No elementRef for digitalEntityWizardSlot');
+          console.error("No elementRef for digitalEntityWizardSlot");
           return;
         }
         this.#slotSubscription = ExtenderSlotManager.registerSlot({
-          slotName: 'entity-wizard',
-          slotBehaviour: 'replace',
+          slotName: "entity-wizard",
+          slotBehaviour: "replace",
           dataObservable: this.digitalEntity$,
           elementRef,
           viewContainerRef: this.#viewContainerRef,
-        }).subscribe(slotEvent => {
+        }).subscribe((slotEvent) => {
           const { detail } = slotEvent.event as CustomEvent<{
             entity: DigitalEntity;
             isValid: boolean;
           }>;
-          console.log('Slot event received in CreateNewEntityComponent', slotEvent, detail);
+          console.log(
+            "Slot event received in CreateNewEntityComponent",
+            slotEvent,
+            detail,
+          );
           if (
-            'entity' in detail &&
-            'isValid' in detail &&
+            "entity" in detail &&
+            "isValid" in detail &&
             isDigitalEntity(detail) &&
-            typeof detail.isValid === 'boolean'
+            typeof detail.isValid === "boolean"
           ) {
             this.isPluginDigitalEntity$.next(true);
             this.isPluginDigitalEntityValid$.next(detail.isValid);
@@ -481,16 +530,16 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
         : this.uploadHandler.mediaType();
 
     if (uploadedFiles.length === 0 && !this.externalFileValid) {
-      throw new Error('No uploaded files found');
+      throw new Error("No uploaded files found");
     }
 
     if (!mediaType) {
-      throw new Error('Could not determine type of uploaded files');
+      throw new Error("Could not determine type of uploaded files");
     }
 
     const creator = this.#creator();
     if (!creator) {
-      throw new Error('No creator information available');
+      throw new Error("No creator information available");
     }
 
     const _id = new ObjectID().toString();
@@ -502,7 +551,7 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
       externalFile: externalFile || undefined,
       creator,
       settings: {
-        preview: '',
+        preview: "",
         cameraPositionInitial: {
           position: { x: 0, y: 0, z: 0 },
           target: { x: 0, y: 0, z: 0 },
@@ -513,17 +562,17 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
         },
         lights: [
           {
-            type: 'HemisphericLight',
+            type: "HemisphericLight",
             position: { x: 0, y: -1, z: 0 },
             intensity: 1,
           },
           {
-            type: 'HemisphericLight',
+            type: "HemisphericLight",
             position: { x: 0, y: 1, z: 0 },
             intensity: 1,
           },
           {
-            type: 'PointLight',
+            type: "PointLight",
             position: { x: 1, y: 10, z: 1 },
             intensity: 1,
           },
@@ -534,19 +583,20 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
       finished: false,
       online: false,
       mediaType,
-      dataSource: { isExternal: false, service: 'kompakkt' },
+      dataSource: { isExternal: false, service: "kompakkt" },
       relatedDigitalEntity: { _id: `${this.digitalEntity$.getValue()._id}` },
-      processed: { raw: '', high: '', medium: '', low: '' },
+      processed: { raw: "", high: "", medium: "", low: "" },
       access: [{ ...creator, role: EntityAccessRole.owner }],
     } satisfies IEntity;
 
     // If files were uploaded, add them
     const files = this.uploadedFiles()
-      .filter(file =>
-        mediaType === 'model' || mediaType === 'entity'
-          ? supportedFileFormats.model.filter(ext => file.file_name.toLowerCase().endsWith(ext))
-              .length > 0 && file.file_format !== ''
-          : file.file_format !== '',
+      .filter((file) =>
+        mediaType === "model" || mediaType === "entity"
+          ? supportedFileFormats.model.filter((ext) =>
+              file.file_name.toLowerCase().endsWith(ext),
+            ).length > 0 && file.file_format !== ""
+          : file.file_format !== "",
       )
       .sort((a, b) => b.file_size - a.file_size);
     if (files.length > 0) {
@@ -560,18 +610,18 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
 
     const serverEntity = await this.backend
       .pushEntity(entity)
-      .then(res => res)
-      .catch(err => {
+      .then((res) => res)
+      .catch((err) => {
         console.error(err);
         return undefined;
       });
 
     if (!serverEntity) {
-      console.error('No serverEntity', this);
+      console.error("No serverEntity", this);
       return;
     }
     this.serverEntity.set(serverEntity);
-    console.log('uploadBaseEntity serverEntity', this.serverEntity());
+    console.log("uploadBaseEntity serverEntity", this.serverEntity());
 
     // this.entity.objecttype = mediaType;
     this.digitalEntity$.getValue().type = mediaType;
@@ -582,22 +632,22 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
     const serverEntity = this.serverEntity();
     const settings = this.entitySettings();
     if (!serverEntity) {
-      console.error('No ServerEntity', this);
+      console.error("No ServerEntity", this);
       return;
     }
     if (!settings) {
-      console.error('No settings', this);
+      console.error("No settings", this);
       return;
     }
 
     await this.backend
       .pushEntity({ ...serverEntity, settings })
-      .then(result => {
-        console.log('Updated settings:', result);
+      .then((result) => {
+        console.log("Updated settings:", result);
         this.serverEntity.set(result);
         this.entitySettings.set(result.settings);
       })
-      .catch(err => console.error(err));
+      .catch((err) => console.error(err));
   }
 
   public async updateDigitalEntity() {
@@ -608,11 +658,11 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
     const settings = this.entitySettings();
 
     if (!serverEntity) {
-      throw new Error('No serverEntity');
+      throw new Error("No serverEntity");
     }
 
     if (!settings) {
-      throw new Error('No settings');
+      throw new Error("No settings");
     }
 
     if (physicalEntity) digitalEntity.phyObjs[0] = physicalEntity;
@@ -629,18 +679,18 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
         ...updatedEntity,
         settings,
       })
-      .then(result => {
-        console.log('Updated entity:', result);
+      .then((result) => {
+        console.log("Updated entity:", result);
         this.serverEntity.set(result);
         this.entitySettings.set(result.settings);
       })
-      .catch(err => console.error(err));
+      .catch((err) => console.error(err));
 
     const stepper = this.stepper();
     const metadataStep = this.stepMetadata();
     if (stepper && metadataStep) {
       const steps = stepper.steps.toArray();
-      const metadataIndex = steps.findIndex(s => s === metadataStep);
+      const metadataIndex = steps.findIndex((s) => s === metadataStep);
       const isLastStep = metadataIndex === steps.length - 1;
       if (isLastStep) {
         this.navigateToFinishedEntity();
@@ -656,7 +706,7 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
     visibilityDialogComponent: VisibilityAndAccessDialogComponent,
   ) {
     if (this.isFinishing()) {
-      console.log('Already trying to finish entity');
+      console.log("Already trying to finish entity");
       return;
     }
     this.isFinishing.set(true);
@@ -666,7 +716,7 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
     const settings = this.entitySettings();
     const files = this.uploadedFiles();
 
-    console.log('tryFinish', {
+    console.log("tryFinish", {
       visibilitySettings,
       digitalEntity,
       settings,
@@ -675,19 +725,21 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
 
     if (!settings || !visibilitySettings) return;
 
-    digitalEntity.phyObjs = digitalEntity.phyObjs.filter(obj => PhysicalEntity.checkIsValid(obj));
+    digitalEntity.phyObjs = digitalEntity.phyObjs.filter((obj) =>
+      PhysicalEntity.checkIsValid(obj),
+    );
 
     const serverEntityResult = await this.backend
       .pushDigitalEntity(digitalEntity)
-      .then(result => {
-        console.log('Got DigitalEntity from server:', result);
+      .then((result) => {
+        console.log("Got DigitalEntity from server:", result);
         if (Object.keys(result).length < 3) {
-          throw new Error('Incomplete digital entity received from server');
+          throw new Error("Incomplete digital entity received from server");
         }
 
         const serverEntity = this.serverEntity();
         if (!serverEntity) {
-          throw new Error('No serverEntity');
+          throw new Error("No serverEntity");
         }
 
         // Set finished and un-published
@@ -722,15 +774,15 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
         entity.name = result.title;
         entity.relatedDigitalEntity = { _id: result._id };
 
-        console.log('Saving entity to server:', entity);
+        console.log("Saving entity to server:", entity);
         return entity;
       })
-      .then(entity => this.backend.pushEntity(entity))
-      .then(result => {
-        console.log('Saved entity to server', result);
+      .then((entity) => this.backend.pushEntity(entity))
+      .then((result) => {
+        console.log("Saved entity to server", result);
         return result;
       })
-      .catch(e => {
+      .catch((e) => {
         console.error(e);
         return undefined;
       });
@@ -741,10 +793,14 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
       this.isFinishing.set(false);
       this.isFinished.set(true);
 
-      stepper._steps.forEach(step => (step.editable = false));
+      stepper._steps.forEach((step) => (step.editable = false));
 
       if (this.dialogRef && this.dialogData) {
-        console.log('Updated entity via dialog:', this.serverEntity(), digitalEntity);
+        console.log(
+          "Updated entity via dialog:",
+          this.serverEntity(),
+          digitalEntity,
+        );
       }
 
       // Refresh account data
@@ -761,7 +817,9 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
     const serverEntity = this.serverEntity();
     if (!serverEntity) return;
     this.router
-      .navigate([`/entity/${serverEntity._id}`], { onSameUrlNavigation: 'reload' })
+      .navigate([`/entity/${serverEntity._id}`], {
+        onSameUrlNavigation: "reload",
+      })
       .then(() => {
         if (this.dialogRef) {
           this.dialogRef.close(undefined);
@@ -769,7 +827,7 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
           this.content.updateContent();
         }
       })
-      .catch(e => console.error(e));
+      .catch((e) => console.error(e));
   }
 
   // Steps require interaction before they can be completed
@@ -786,12 +844,14 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
   }
 
   private confirmClose(): Promise<boolean> {
+    const stateString = this.serverEntity() ? "metadata editor" : "upload";
+
     return firstValueFrom(
       this.dialog
         .open(ConfirmationDialogComponent, {
           data: {
-            title: 'Close upload',
-            message: 'Do you want to close the upload?',
+            title: `Close ${stateString}`,
+            message: `Do you want to close the ${stateString}?`,
           },
         })
         .afterClosed(),
@@ -804,12 +864,14 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
     const { token, url } = this.sketchfabGroup.value;
     const selectedModel = this.sketchfabModel();
     const sketchfabLicence = this.sketchfabLicence();
-    const hasKompakktLicence = sketchfabLicence ? !!Licences[sketchfabLicence] : false;
+    const hasKompakktLicence = sketchfabLicence
+      ? !!Licences[sketchfabLicence]
+      : false;
     if (!selectedModel || !token || !selectedModel.isDownloadable) {
       this.isImportingSketchfab.set(false);
       return;
     }
-    const mediaType = 'model';
+    const mediaType = "model";
     const sketchfabFile = await this.backend.downloadAndPrepareSketchfabModel(
       token,
       selectedModel.uid,
@@ -822,7 +884,7 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
 
     const creator = this.#creator();
     if (!creator) {
-      throw new Error('No creator information available');
+      throw new Error("No creator information available");
     }
 
     const _id = new ObjectID().toString();
@@ -833,7 +895,7 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
       files: [sketchfabFile],
       creator,
       settings: {
-        preview: '',
+        preview: "",
         cameraPositionInitial: {
           position: { x: 0, y: 0, z: 0 },
           target: { x: 0, y: 0, z: 0 },
@@ -844,17 +906,17 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
         },
         lights: [
           {
-            type: 'HemisphericLight',
+            type: "HemisphericLight",
             position: { x: 0, y: -1, z: 0 },
             intensity: 1,
           },
           {
-            type: 'HemisphericLight',
+            type: "HemisphericLight",
             position: { x: 0, y: 1, z: 0 },
             intensity: 1,
           },
           {
-            type: 'PointLight',
+            type: "PointLight",
             position: { x: 1, y: 10, z: 1 },
             intensity: 1,
           },
@@ -865,14 +927,14 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
       finished: false,
       online: false,
       mediaType,
-      dataSource: { isExternal: false, service: 'sketchfab' },
+      dataSource: { isExternal: false, service: "sketchfab" },
       relatedDigitalEntity: {
         _id: `${this.digitalEntity$.getValue()._id}`,
         title: selectedModel.name,
         description: selectedModel.description,
         licence: hasKompakktLicence ? sketchfabLicence : undefined,
       },
-      processed: { raw: '', high: '', medium: '', low: '' },
+      processed: { raw: "", high: "", medium: "", low: "" },
       access: [
         {
           ...creator,
@@ -890,19 +952,19 @@ export class CreateNewEntityComponent implements AfterViewInit, OnInit, OnDestro
 
     const serverEntity = await this.backend
       .pushEntity(entity)
-      .then(res => res)
-      .catch(err => {
+      .then((res) => res)
+      .catch((err) => {
         console.error(err);
         return undefined;
       });
     this.isImportingSketchfab.set(false);
 
     if (!serverEntity) {
-      console.error('No serverEntity', this);
+      console.error("No serverEntity", this);
       return;
     }
     this.serverEntity.set(serverEntity);
-    console.log('uploadBaseEntity serverEntity', this.serverEntity());
+    console.log("uploadBaseEntity serverEntity", this.serverEntity());
 
     // this.entity.objecttype = mediaType;
     this.wasSketchfabUploaded.set(true);

From 8480cf489a2e36c869badc27c097b3e8799beec0 Mon Sep 17 00:00:00 2001
From: Vera Malieske <vera.malieske@web.de>
Date: Wed, 1 Jul 2026 20:55:25 +0200
Subject: [PATCH 3/5] Fix Dialog-Issue

- close login-dialog when another dialog is opened
- move auth-dialog to dialog-folder so it's easier to find
- clean up ununsed imports and run format in register dialog
---
 src/app/components/index.ts                   |  2 +-
 .../auth-dialog/auth-dialog.component.html    |  0
 .../auth-dialog/auth-dialog.component.scss    |  0
 .../auth-dialog/auth-dialog.component.ts      | 69 +++++++++++--------
 .../register-dialog.component.ts              | 32 +++++----
 src/app/services/dialog-helper.service.ts     |  2 +-
 6 files changed, 62 insertions(+), 43 deletions(-)
 rename src/app/{components => dialogs}/auth-dialog/auth-dialog.component.html (100%)
 rename src/app/{components => dialogs}/auth-dialog/auth-dialog.component.scss (100%)
 rename src/app/{components => dialogs}/auth-dialog/auth-dialog.component.ts (50%)

diff --git a/src/app/components/index.ts b/src/app/components/index.ts
index 20691fbc..962b1ddf 100644
--- a/src/app/components/index.ts
+++ b/src/app/components/index.ts
@@ -1,5 +1,5 @@
 export { ActionbarComponent } from './actionbar/actionbar.component';
-export { AuthDialogComponent } from './auth-dialog/auth-dialog.component';
+export { AuthDialogComponent } from '../dialogs/auth-dialog/auth-dialog.component';
 export { CompilationDetailComponent } from './compilation-detail/compilation-detail.component';
 export { DetailEntityComponent } from './entity-detail/detail-entity/detail-entity.component';
 export { EntityDetailComponent } from './entity-detail/entity-detail.component';
diff --git a/src/app/components/auth-dialog/auth-dialog.component.html b/src/app/dialogs/auth-dialog/auth-dialog.component.html
similarity index 100%
rename from src/app/components/auth-dialog/auth-dialog.component.html
rename to src/app/dialogs/auth-dialog/auth-dialog.component.html
diff --git a/src/app/components/auth-dialog/auth-dialog.component.scss b/src/app/dialogs/auth-dialog/auth-dialog.component.scss
similarity index 100%
rename from src/app/components/auth-dialog/auth-dialog.component.scss
rename to src/app/dialogs/auth-dialog/auth-dialog.component.scss
diff --git a/src/app/components/auth-dialog/auth-dialog.component.ts b/src/app/dialogs/auth-dialog/auth-dialog.component.ts
similarity index 50%
rename from src/app/components/auth-dialog/auth-dialog.component.ts
rename to src/app/dialogs/auth-dialog/auth-dialog.component.ts
index cb6b6128..5953a3b2 100644
--- a/src/app/components/auth-dialog/auth-dialog.component.ts
+++ b/src/app/dialogs/auth-dialog/auth-dialog.component.ts
@@ -1,30 +1,34 @@
-import { Component, computed, inject, OnInit, signal } from '@angular/core';
+import { Component, computed, inject, OnInit, signal } from "@angular/core";
 import {
   FormControl,
   FormGroup,
   FormsModule,
   ReactiveFormsModule,
   Validators,
-} from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
-
-import { MatButtonModule } from '@angular/material/button';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { ExtenderPluginManager } from '@kompakkt/plugins/extender';
+} from "@angular/forms";
+import {
+  MAT_DIALOG_DATA,
+  MatDialog,
+  MatDialogRef,
+} from "@angular/material/dialog";
+
+import { MatButtonModule } from "@angular/material/button";
+import { MatDividerModule } from "@angular/material/divider";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatIconModule } from "@angular/material/icon";
+import { MatInputModule } from "@angular/material/input";
+import {
+  ExtenderPluginManager,
+  ExtenderSlotDirective,
+} from "@kompakkt/plugins/extender";
 import {
   ForgotPasswordDialogComponent,
   ForgotUsernameDialogComponent,
   RegisterDialogComponent,
-} from 'src/app/dialogs';
-import { AccountService } from 'src/app/services';
-import { TranslatePipe } from '../../pipes/translate.pipe';
-import { OutlinedInputComponent } from '../outlined-input/outlined-input.component';
-import { viewChild } from '@angular/core';
-import { ElementRef } from '@angular/core';
-import { ExtenderSlotDirective } from 'src/app/directives/extender-slot.directive';
+} from "src/app/dialogs";
+import { AccountService } from "src/app/services";
+import { TranslatePipe } from "../../pipes/translate.pipe";
+import { OutlinedInputComponent } from "../../components/outlined-input/outlined-input.component";
 
 export type AuthDialogData = {
   concern?: string;
@@ -32,9 +36,9 @@ export type AuthDialogData = {
 };
 
 @Component({
-  selector: 'app-auth-dialog',
-  templateUrl: './auth-dialog.component.html',
-  styleUrls: ['./auth-dialog.component.scss'],
+  selector: "app-auth-dialog",
+  templateUrl: "./auth-dialog.component.html",
+  styleUrls: ["./auth-dialog.component.scss"],
   imports: [
     FormsModule,
     ReactiveFormsModule,
@@ -59,17 +63,17 @@ export class AuthDialogComponent implements OnInit {
   hasAuthMethods = signal(false);
 
   data = inject<AuthDialogData>(MAT_DIALOG_DATA);
-  concern = computed(() => this.data?.concern ?? '');
+  concern = computed(() => this.data?.concern ?? "");
 
   public form = new FormGroup({
-    username: new FormControl('', Validators.required),
-    password: new FormControl('', Validators.required),
+    username: new FormControl("", Validators.required),
+    password: new FormControl("", Validators.required),
   });
 
   public async trySubmit() {
     const { username, password } = {
-      username: this.form.get('username')!.value as string,
-      password: this.form.get('password')!.value as string,
+      username: this.form.get("username")!.value as string,
+      password: this.form.get("password")!.value as string,
     };
 
     this.waitingForResponse = true;
@@ -88,22 +92,29 @@ export class AuthDialogComponent implements OnInit {
 
   public openForgotUsernameDialog() {
     this.#dialog.open(ForgotUsernameDialogComponent);
+    this.dialogRef.close(false);
   }
 
   public openForgotPasswordDialog() {
     this.#dialog.open(ForgotPasswordDialogComponent);
+    this.dialogRef.close(false);
   }
 
   public openRegistrationDialog() {
     this.#dialog.open(RegisterDialogComponent);
+    this.dialogRef.close(false);
   }
 
-  authMethodsSlotRef = viewChild.required<ElementRef<HTMLElement>>('authMethodsSlot');
+  authMethodsSlotRef =
+    viewChild.required<ElementRef<HTMLElement>>("authMethodsSlot");
   ngOnInit() {
-    if (this.data?.username) this.form.get('username')?.patchValue(this.data.username);
+    if (this.data?.username)
+      this.form.get("username")?.patchValue(this.data.username);
 
-    this.hasAuthMethods.set(ExtenderPluginManager.hasComponentsForSlot('auth-method'));
-    console.log('AuthDialogComponent', {
+    this.hasAuthMethods.set(
+      ExtenderPluginManager.hasComponentsForSlot("auth-method"),
+    );
+    console.log("AuthDialogComponent", {
       hasAuthMethods: this.hasAuthMethods(),
       elementRef: this.authMethodsSlotRef(),
     });
diff --git a/src/app/dialogs/register-dialog/register-dialog.component.ts b/src/app/dialogs/register-dialog/register-dialog.component.ts
index 1a8dd70b..c2acd1da 100644
--- a/src/app/dialogs/register-dialog/register-dialog.component.ts
+++ b/src/app/dialogs/register-dialog/register-dialog.component.ts
@@ -1,7 +1,7 @@
-import { Component, signal } from '@angular/core';
+import { Component } from '@angular/core';
 import { MatDialogRef, MatDialog } from '@angular/material/dialog';
 
-import { AuthDialogComponent } from 'src/app/components/auth-dialog/auth-dialog.component';
+import { AuthDialogComponent } from 'src/app/dialogs/auth-dialog/auth-dialog.component';
 
 import { HttpErrorResponse } from '@angular/common/http';
 import {
@@ -13,17 +13,13 @@ import {
 } from '@angular/forms';
 
 import { AccountService, BackendService } from 'src/app/services';
-import { TranslateService } from '../../services/translate.service';
 import { TranslatePipe } from '../../pipes/translate.pipe';
 
 import { MatButtonModule } from '@angular/material/button';
-import { MatIcon, MatIconModule } from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { MatFormField, MatFormFieldModule } from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { OutlinedInputComponent } from 'src/app/components/outlined-input/outlined-input.component';
-import { map } from 'rxjs';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { KeyValuePipe } from '@angular/common';
 
 @Component({
   selector: 'app-register-dialog',
@@ -43,14 +39,26 @@ import { KeyValuePipe } from '@angular/common';
 })
 export class RegisterDialogComponent {
   public form = new FormGroup({
-    prename: new FormControl('', { validators: Validators.required, nonNullable: true }),
-    surname: new FormControl('', { validators: Validators.required, nonNullable: true }),
-    username: new FormControl('', { validators: Validators.required, nonNullable: true }),
+    prename: new FormControl('', {
+      validators: Validators.required,
+      nonNullable: true,
+    }),
+    surname: new FormControl('', {
+      validators: Validators.required,
+      nonNullable: true,
+    }),
+    username: new FormControl('', {
+      validators: Validators.required,
+      nonNullable: true,
+    }),
     mail: new FormControl('', {
       validators: [Validators.required, Validators.email],
       nonNullable: true,
     }),
-    password: new FormControl('', { validators: Validators.required, nonNullable: true }),
+    password: new FormControl('', {
+      validators: Validators.required,
+      nonNullable: true,
+    }),
     passwordRepeat: new FormControl('', {
       validators: [
         Validators.required,
diff --git a/src/app/services/dialog-helper.service.ts b/src/app/services/dialog-helper.service.ts
index 7341d4ac..5d92556d 100644
--- a/src/app/services/dialog-helper.service.ts
+++ b/src/app/services/dialog-helper.service.ts
@@ -19,7 +19,7 @@ import {
   isCompilation,
   isEntity,
 } from '@kompakkt/common';
-import { AuthDialogData } from '../components/auth-dialog/auth-dialog.component';
+import { AuthDialogData } from '../dialogs/auth-dialog/auth-dialog.component';
 import { EntityDownloadDialogComponent } from '../dialogs/entity-download-dialog/entity-download-dialog.component';
 import {
   ViewerDialogComponent,

From 1ee0459fd54fefb80e61612de19876355632da3a Mon Sep 17 00:00:00 2001
From: Vera Malieske <vera.malieske@web.de>
Date: Sun, 12 Jul 2026 18:59:45 +0200
Subject: [PATCH 4/5] Fix agent custom-role & bibliographic issue

- change availableRoles to signal to serve the reactivity when adding a new role to the array
- distinguish between one and two buttons on optional cards
---
 .../metadata/agents/agents.component.html     |  2 +-
 .../metadata/agents/agents.component.ts       | 42 +++++++++----------
 .../optional-card-list.component.html         |  2 +-
 .../optional-card-list.component.scss         |  5 +++
 4 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/app/components/metadata/agents/agents.component.html b/src/app/components/metadata/agents/agents.component.html
index 63de60a0..7e7a2068 100644
--- a/src/app/components/metadata/agents/agents.component.html
+++ b/src/app/components/metadata/agents/agents.component.html
@@ -242,7 +242,7 @@
 
 <p class="sub-headers">{{ 'Assigned role(s)' | translate }}</p>
 <div class="role-selection">
-  @for (role of availableRoles; track role) {
+  @for (role of availableRoles(); track role) {
     <mat-checkbox color="primary" [(ngModel)]="role.checked">
       {{ role.value }}
     </mat-checkbox>
diff --git a/src/app/components/metadata/agents/agents.component.ts b/src/app/components/metadata/agents/agents.component.ts
index 34f51484..4add9060 100644
--- a/src/app/components/metadata/agents/agents.component.ts
+++ b/src/app/components/metadata/agents/agents.component.ts
@@ -9,7 +9,6 @@ import {
   signal,
   SimpleChanges,
   viewChild,
-  ViewChild,
 } from '@angular/core';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 
@@ -26,7 +25,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatTabChangeEvent, MatTabGroup, MatTabsModule } from '@angular/material/tabs';
 
-import { Address, AnyEntity, ContactReference, Institution, Person, Tag } from 'src/app/metadata';
+import { Address, AnyEntity, ContactReference, Institution, Person } from 'src/app/metadata';
 import { TranslatePipe } from '../../../pipes/translate.pipe';
 
 import {
@@ -44,7 +43,6 @@ import { AccountService, BackendService } from 'src/app/services';
 import { MetadataCommunicationService } from 'src/app/services/metadata-communication.service';
 import { AgentListComponent } from './agent-list/agent-list.component';
 import {
-  Collection,
   IInstitution,
   IPerson,
   isAddress,
@@ -284,10 +282,10 @@ export class AgentsComponent implements OnDestroy, OnChanges, OnInit {
 
   selectedTabIndex = 0;
 
-  availableRoles = [
+  availableRoles = signal([
     { type: 'RIGHTS_OWNER', value: 'Rightsowner', checked: false },
     { type: 'CONTACT_PERSON', value: 'Contact person', checked: false },
-  ];
+  ]);
 
   newCustomRole = { value: '', checked: false };
 
@@ -323,7 +321,7 @@ export class AgentsComponent implements OnDestroy, OnChanges, OnInit {
 
   get atLeastOneRoleSelected(): boolean {
     return (
-      this.availableRoles.some(role => role.checked) ||
+      this.availableRoles().some(role => role.checked) ||
       (this.newCustomRole.checked && this.newCustomRole.value != '')
     );
   }
@@ -333,7 +331,7 @@ export class AgentsComponent implements OnDestroy, OnChanges, OnInit {
   }
 
   get currentRoleSelection(): string[] {
-    const availableRoleTypes = this.availableRoles
+    const availableRoleTypes = this.availableRoles()
       .filter(role => role.checked)
       .map(role => role.type);
 
@@ -422,11 +420,13 @@ export class AgentsComponent implements OnDestroy, OnChanges, OnInit {
     if (this.isUpdating()) {
       this.clearRoleSelection();
 
-      for (const role of agent.roles[this.entityId()] ?? []) {
-        for (const roleOption of this.availableRoles) {
-          if (roleOption.type === role) roleOption.checked = true;
-        }
-      }
+      const rolesToActivate = agent.roles[this.entityId()] ?? [];
+
+      this.availableRoles.update(roles =>
+        roles.map(role =>
+          rolesToActivate.includes(role.type) ? { ...role, checked: true } : role,
+        ),
+      );
     }
   }
 
@@ -511,13 +511,13 @@ export class AgentsComponent implements OnDestroy, OnChanges, OnInit {
   private addRoleIfNotExists(newRoleName: string) {
     const entity = this.entity();
     const cleanedUpRoleName = entity.formatRoleLabel(newRoleName);
-    if (!cleanedUpRoleName || this.availableRoles.some(r => r.value === cleanedUpRoleName)) return;
+    if (!cleanedUpRoleName || this.availableRoles().some(r => r.value === cleanedUpRoleName))
+      return;
 
-    this.availableRoles.push({
-      type: cleanedUpRoleName,
-      value: cleanedUpRoleName,
-      checked: false,
-    });
+    this.availableRoles.update(roles => [
+      ...roles,
+      { type: cleanedUpRoleName, value: cleanedUpRoleName, checked: false },
+    ]);
   }
 
   public updateAgent() {
@@ -592,9 +592,7 @@ export class AgentsComponent implements OnDestroy, OnChanges, OnInit {
   }
 
   clearRoleSelection() {
-    this.availableRoles.forEach(role => {
-      role.checked = false;
-    });
+    this.availableRoles.update(roles => roles.map(role => ({ ...role, checked: false })));
     this.newCustomRole = { value: '', checked: false };
   }
 
@@ -615,7 +613,7 @@ export class AgentsComponent implements OnDestroy, OnChanges, OnInit {
   }
 
   ngOnInit(): void {
-    const fixedRoles = this.availableRoles.map(r => r.type);
+    const fixedRoles = this.availableRoles().map(r => r.type);
     const allAgents = [...this.entity().persons, ...this.entity().institutions];
 
     for (const agent of allAgents) {
diff --git a/src/app/components/metadata/optional/optional-card-list/optional-card-list.component.html b/src/app/components/metadata/optional/optional-card-list/optional-card-list.component.html
index 454b2e9b..0eec5092 100644
--- a/src/app/components/metadata/optional/optional-card-list/optional-card-list.component.html
+++ b/src/app/components/metadata/optional/optional-card-list/optional-card-list.component.html
@@ -1,7 +1,7 @@
 <div>
   @for (data of optionalData(); track $index) {
     <div class="card-wrapper">
-      <div class="card">
+      <div class="card" [class.is-editable]="propertyType() === 'biblio'">
         @switch (propertyType()) {
           @case ('dimension') {
             @if (data | isDimensionTuple) {
diff --git a/src/app/components/metadata/optional/optional-card-list/optional-card-list.component.scss b/src/app/components/metadata/optional/optional-card-list/optional-card-list.component.scss
index 3de06d91..263d2ed2 100644
--- a/src/app/components/metadata/optional/optional-card-list/optional-card-list.component.scss
+++ b/src/app/components/metadata/optional/optional-card-list/optional-card-list.component.scss
@@ -3,6 +3,11 @@
   border-radius: 1rem !important;
   justify-items: center;
   justify-content: center;
+  padding-right: 45px;
+}
+
+.card.is-editable {
+  padding-right: 90px;
 }
 
 div.card .actions {

From f56994b1c52029d16349fcac59d23bc204a716d7 Mon Sep 17 00:00:00 2001
From: Vera Malieske <vera.malieske@web.de>
Date: Sun, 12 Jul 2026 19:17:11 +0200
Subject: [PATCH 5/5] Fix import issues from rebase

---
 .../dialogs/auth-dialog/auth-dialog.component.ts    | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/app/dialogs/auth-dialog/auth-dialog.component.ts b/src/app/dialogs/auth-dialog/auth-dialog.component.ts
index 5953a3b2..4313b0e3 100644
--- a/src/app/dialogs/auth-dialog/auth-dialog.component.ts
+++ b/src/app/dialogs/auth-dialog/auth-dialog.component.ts
@@ -1,4 +1,12 @@
-import { Component, computed, inject, OnInit, signal } from "@angular/core";
+import {
+  Component,
+  computed,
+  ElementRef,
+  inject,
+  OnInit,
+  signal,
+  viewChild,
+} from "@angular/core";
 import {
   FormControl,
   FormGroup,
@@ -19,7 +27,7 @@ import { MatIconModule } from "@angular/material/icon";
 import { MatInputModule } from "@angular/material/input";
 import {
   ExtenderPluginManager,
-  ExtenderSlotDirective,
+  ExtenderSlotManager,
 } from "@kompakkt/plugins/extender";
 import {
   ForgotPasswordDialogComponent,
@@ -29,6 +37,7 @@ import {
 import { AccountService } from "src/app/services";
 import { TranslatePipe } from "../../pipes/translate.pipe";
 import { OutlinedInputComponent } from "../../components/outlined-input/outlined-input.component";
+import { ExtenderSlotDirective } from "../../directives/extender-slot.directive";
 
 export type AuthDialogData = {
   concern?: string;