+ {{ entity.columnLabelsString }}
diff --git a/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.scss
index 60096fc14..fad13c3cd 100644
--- a/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.scss
@@ -3,3 +3,9 @@
overflow: hidden;
white-space: nowrap;
}
+
+::ng-deep .custom-tooltip {
+ max-width: 300px;
+ white-space: normal;
+ word-wrap: break-word;
+}
diff --git a/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.ts
index 87c82ca50..09ef65805 100644
--- a/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.ts
@@ -30,6 +30,7 @@ import { DossierTemplateActionsComponent } from '../../shared/components/dossier
import { DossierTemplateBreadcrumbsComponent } from '../../shared/components/dossier-template-breadcrumbs/dossier-template-breadcrumbs.component';
import { AddEditComponentMappingDialogComponent } from './add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component';
import { download } from '@utils/file-download-utils';
+import { MatTooltip } from '@angular/material/tooltip';
@Component({
templateUrl: './component-mappings-screen.component.html',
@@ -49,6 +50,7 @@ import { download } from '@utils/file-download-utils';
InputWithActionComponent,
IconButtonComponent,
IqserAllowDirective,
+ MatTooltip,
],
})
export default class ComponentMappingsScreenComponent extends ListingComponent implements OnInit {
diff --git a/libs/red-domain/src/lib/component-mappings/component-mapping.ts b/libs/red-domain/src/lib/component-mappings/component-mapping.ts
index b8e1e7745..9bfa2d6b1 100644
--- a/libs/red-domain/src/lib/component-mappings/component-mapping.ts
+++ b/libs/red-domain/src/lib/component-mappings/component-mapping.ts
@@ -6,6 +6,7 @@ export interface IComponentMapping extends IListable {
fileName: string;
version: number;
columnLabels: string[];
+ columnLabelsString: string;
numberOfLines: number;
encoding: string;
delimiter: string;
@@ -17,6 +18,7 @@ export class ComponentMapping implements IComponentMapping, IListable {
readonly fileName: string;
readonly version: number;
readonly columnLabels: string[];
+ readonly columnLabelsString: string;
readonly numberOfLines: number;
readonly encoding: string;
readonly delimiter: string;
@@ -27,6 +29,7 @@ export class ComponentMapping implements IComponentMapping, IListable {
this.fileName = componentMapping.fileName;
this.version = componentMapping.version;
this.columnLabels = componentMapping.columnLabels;
+ this.columnLabelsString = componentMapping.columnLabels?.join(', ');
this.numberOfLines = componentMapping.numberOfLines;
this.encoding = componentMapping.encoding;
this.delimiter = componentMapping.delimiter;