[DSpace#2719][CST-12825] Introduces item-page-img-field.component.ts

src/app/item-page/simple/field-components/specific-field/img/item-page-img-field.component.html

@@ -0,0 +1,11 @@
+<div class="item-page-field">
+  <ds-metadata-values
+    [mdValues]="item?.allMetadata(fields)"
+    [separator]="separator"
+    [label]="label"
+    [enableMarkdown]="enableMarkdown"
+    [urlRegex]="urlRegex"
+    [browseDefinition]="browseDefinition|async"
+    [img]="img"
+  ></ds-metadata-values>
+</div>

src/app/item-page/simple/field-components/specific-field/img/item-page-img-field.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItemPageImgFieldComponent } from './item-page-img-field.component';
+
+describe('ItemPageImgFieldComponent', () => {
+  let component: ItemPageImgFieldComponent;
+  let fixture: ComponentFixture<ItemPageImgFieldComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ItemPageImgFieldComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ItemPageImgFieldComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/item-page/simple/field-components/specific-field/img/item-page-img-field.component.ts

@@ -0,0 +1,64 @@
+import { Component, Input } from '@angular/core';
+import { ItemPageFieldComponent } from '../item-page-field.component';
+import { Item } from '../../../../../core/shared/item.model';
+
+/**
+ * Interface that encapsulate Image configuration for this component.
+ */
+export interface ImageField {
+  /**
+   * URI that is used to retrieve the image.
+   */
+  URI: string;
+  /**
+   * i18n Key that represents the alt text to display
+   */
+  alt: string;
+  /**
+   * CSS variable that contains the height of the inline image.
+   */
+  heightVar: string;
+}
+
+@Component({
+  selector: 'ds-item-page-img-field',
+  templateUrl: './item-page-img-field.component.html'
+})
+/**
+ * Component that renders an inline image for a given field.
+ * This component uses a given {@code ImageField} configuration to correctly render the img.
+ */
+export class ItemPageImgFieldComponent extends ItemPageFieldComponent {
+
+  /**
+   * The item to display metadata for
+   */
+  @Input() item: Item;
+
+  /**
+   * Separator string between multiple values of the metadata fields defined
+   * @type {string}
+   */
+  @Input() separator: string;
+
+  /**
+   * Fields (schema.element.qualifier) used to render their values.
+   */
+  @Input() fields: string[];
+
+  /**
+   * Label i18n key for the rendered metadata
+   */
+  @Input() label: string;
+
+  /**
+   * Image Configuration
+   */
+  @Input() img: ImageField;
+
+  /**
+   * Whether any valid HTTP(S) URL should be rendered as a link
+   */
+  @Input() urlRegex?: string;
+
+}