feat(ui): Add editor contact card component

libs/ui/elements/src/index.ts

@@ -3,6 +3,7 @@ export * from './lib/avatar/avatar.component'
 export * from './lib/content-ghost/content-ghost.component'
 export * from './lib/download-item/download-item.component'
 export * from './lib/downloads-list/downloads-list.component'
+export * from './lib/editor-contact-card/editor-contact-card.component'
 export * from './lib/error/error.component'
 export * from './lib/image-overlay-preview/image-overlay-preview.component'
 export * from './lib/link-card/link-card.component'

libs/ui/elements/src/lib/editor-contact-card/editor-contact-card.component.html

@@ -0,0 +1,21 @@
+<ng-container *ngIf="organization && contact">
+  <div
+    class="flex flex-row border border-gray-200 bg-gray-50 rounded-xl p-4 gap-4"
+  >
+    <img [src]="organization.logoUrl" class="w-[56px] h-[56px] rounded-[4px]" />
+    <div class="flex flex-col w-full">
+      <div class="flex flex-row justify-between">
+        <span class="flex flex-wrap font-bold w-full"
+          >{{ contact.firstName }} {{ contact.lastName }}</span
+        >
+        <gn-ui-button
+          type="secondary"
+          extraClass="w-[20px] h-[20px] flex items-center justify-center"
+          (buttonClick)="removeContact(contact)"
+          ><span class="text-[14px] leading-[0] font-bold">&#x2715;</span>
+        </gn-ui-button>
+      </div>
+      <div>{{ contact.email }}</div>
+    </div>
+  </div>
+</ng-container>

libs/ui/elements/src/lib/editor-contact-card/editor-contact-card.component.spec.ts

@@ -0,0 +1,32 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { EditorContactCardComponent } from './editor-contact-card.component'
+
+describe('LinkCardComponent', () => {
+  let component: EditorContactCardComponent
+  let fixture: ComponentFixture<EditorContactCardComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      schemas: [NO_ERRORS_SCHEMA],
+      imports: [EditorContactCardComponent],
+    }).compileComponents()
+  })
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditorContactCardComponent)
+    component = fixture.componentInstance
+    component.link = {
+      name: 'Consulter sur Géoclip',
+      description:
+        'Lorem ipsum dolor sit amet, consect etur adipiscing elit. Donec id condim entum ex. Etiam sed molestie est.',
+      url: new URL('https://example.com/someurlpath'),
+      type: 'link',
+    }
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

libs/ui/elements/src/lib/editor-contact-card/editor-contact-card.component.stories.ts

@@ -0,0 +1,39 @@
+import {
+  applicationConfig,
+  componentWrapperDecorator,
+  Meta,
+  moduleMetadata,
+  StoryObj,
+} from '@storybook/angular'
+import { EditorContactCardComponent } from './editor-contact-card.component'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { importProvidersFrom } from '@angular/core'
+
+export default {
+  title: 'Elements/LinkCardComponent',
+  component: EditorContactCardComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [EditorContactCardComponent],
+    }),
+    applicationConfig({
+      providers: [importProvidersFrom(BrowserAnimationsModule)],
+    }),
+    componentWrapperDecorator(
+      (story) => `<div style="max-width: 800px">${story}</div>`
+    ),
+  ],
+} as Meta<EditorContactCardComponent>
+
+export const Primary: StoryObj<EditorContactCardComponent> = {
+  args: {
+    compact: false,
+    link: {
+      type: 'link',
+      name: 'Consulter sur Géoclip',
+      description:
+        'Lorem ipsum dolor sit amet, consect etur adipiscing elit. Donec id condim entum ex. Etiam sed molestie est.',
+      url: new URL('https://example.com/someurlpath'),
+    },
+  },
+}

libs/ui/elements/src/lib/editor-contact-card/editor-contact-card.component.ts

@@ -0,0 +1,32 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import {
+  Individual,
+  Organization,
+} from '@geonetwork-ui/common/domain/model/record'
+import { MatIconModule } from '@angular/material/icon'
+import { CommonModule } from '@angular/common'
+import { ButtonComponent } from '@geonetwork-ui/ui/inputs'
+
+@Component({
+  selector: 'gn-ui-editor-contact-card',
+  templateUrl: './editor-contact-card.component.html',
+  styleUrls: ['./editor-contact-card.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, MatIconModule, ButtonComponent],
+})
+export class EditorContactCardComponent {
+  @Input() contact: Individual
+  @Input() organization: Organization
+  @Output() contactRemoved = new EventEmitter<Individual>()
+
+  removeContact(contact: Individual) {
+    this.contactRemoved.emit(contact)
+  }
+}

libs/ui/elements/src/lib/ui-elements.module.ts

@@ -31,6 +31,7 @@ import { MarkdownParserComponent } from './markdown-parser/markdown-parser.compo
 import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-overlay-preview.component'
 import { UserFeedbackItemComponent } from './user-feedback-item/user-feedback-item.component'
 import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
+import { EditorContactCardComponent } from './editor-contact-card/editor-contact-card.component'
 
 @NgModule({
   imports: [
@@ -50,6 +51,7 @@ import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
     TimeSincePipe,
     BadgeComponent,
     MaxLinesComponent,
+    EditorContactCardComponent,
   ],
   declarations: [
     MetadataInfoComponent,
@@ -77,6 +79,7 @@ import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
     ContentGhostComponent,
     DownloadItemComponent,
     DownloadsListComponent,
+    EditorContactCardComponent,
     ApiCardComponent,
     RelatedRecordCardComponent,
     MetadataContactComponent,