96252: Move Item page components out of SharedModule

src/app/shared/metadata-field-wrapper/metadata-field-wrapper.component.html

@@ -0,0 +1,6 @@
+<div class="simple-view-element" [class.d-none]="hideIfNoTextContent && content.textContent.trim().length === 0">
+  <h5 class="simple-view-element-header" *ngIf="label">{{ label }}</h5>
+  <div #content class="simple-view-element-body">
+    <ng-content></ng-content>
+  </div>
+</div>

src/app/shared/metadata-field-wrapper/metadata-field-wrapper.component.scss

@@ -0,0 +1,5 @@
+:host {
+  .simple-view-element {
+    margin-bottom: 15px;
+  }
+}

src/app/shared/metadata-field-wrapper/metadata-field-wrapper.component.spec.ts

@@ -0,0 +1,115 @@
+/* eslint-disable max-classes-per-file */
+import { Component, Input } from '@angular/core';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MetadataFieldWrapperComponent } from './metadata-field-wrapper.component';
+
+@Component({
+    selector: 'ds-component-without-content',
+    template: '<ds-metadata-field-wrapper [hideIfNoTextContent]="hideIfNoTextContent" [label]="\'test label\'">\n' +
+      '</ds-metadata-field-wrapper>'
+})
+class NoContentComponent {
+  public hideIfNoTextContent = true;
+}
+
+@Component({
+    selector: 'ds-component-with-empty-spans',
+    template: '<ds-metadata-field-wrapper [hideIfNoTextContent]="hideIfNoTextContent" [label]="\'test label\'">\n' +
+      '    <span></span>\n' +
+      '    <span></span>\n' +
+      '</ds-metadata-field-wrapper>'
+})
+class SpanContentComponent {
+  @Input() hideIfNoTextContent = true;
+}
+
+@Component({
+    selector: 'ds-component-with-text',
+    template: '<ds-metadata-field-wrapper [hideIfNoTextContent]="hideIfNoTextContent" [label]="\'test label\'">\n' +
+      '    <span>The quick brown fox jumps over the lazy dog</span>\n' +
+      '</ds-metadata-field-wrapper>'
+})
+class TextContentComponent {
+  @Input() hideIfNoTextContent = true;
+}
+
+
+describe('MetadataFieldWrapperComponent', () => {
+  let component: MetadataFieldWrapperComponent;
+  let fixture: ComponentFixture<MetadataFieldWrapperComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [MetadataFieldWrapperComponent, NoContentComponent, SpanContentComponent, TextContentComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MetadataFieldWrapperComponent);
+    component = fixture.componentInstance;
+  });
+
+  const wrapperSelector = '.simple-view-element';
+
+  it('should create', () => {
+    expect(component).toBeDefined();
+  });
+
+  describe('with hideIfNoTextContent=true', () => {
+    it('should not show the component when there is no content', () => {
+      const parentFixture = TestBed.createComponent(NoContentComponent);
+      parentFixture.detectChanges();
+      const parentNative = parentFixture.nativeElement;
+      const nativeWrapper = parentNative.querySelector(wrapperSelector);
+      expect(nativeWrapper.classList.contains('d-none')).toBe(true);
+    });
+
+    it('should not show the component when there is no text content', () => {
+      const parentFixture = TestBed.createComponent(SpanContentComponent);
+      parentFixture.detectChanges();
+      const parentNative = parentFixture.nativeElement;
+      const nativeWrapper = parentNative.querySelector(wrapperSelector);
+      expect(nativeWrapper.classList.contains('d-none')).toBe(true);
+    });
+
+    it('should show the component when there is text content', () => {
+      const parentFixture = TestBed.createComponent(TextContentComponent);
+      parentFixture.detectChanges();
+      const parentNative = parentFixture.nativeElement;
+      const nativeWrapper = parentNative.querySelector(wrapperSelector);
+      parentFixture.detectChanges();
+      expect(nativeWrapper.classList.contains('d-none')).toBe(false);
+    });
+  });
+
+  describe('with hideIfNoTextContent=false', () => {
+    it('should show the component when there is no content', () => {
+      const parentFixture = TestBed.createComponent(NoContentComponent);
+      parentFixture.componentInstance.hideIfNoTextContent = false;
+      parentFixture.detectChanges();
+      const parentNative = parentFixture.nativeElement;
+      const nativeWrapper = parentNative.querySelector(wrapperSelector);
+      expect(nativeWrapper.classList.contains('d-none')).toBe(false);
+    });
+
+    it('should show the component when there is no text content', () => {
+      const parentFixture = TestBed.createComponent(SpanContentComponent);
+      parentFixture.componentInstance.hideIfNoTextContent = false;
+      parentFixture.detectChanges();
+      const parentNative = parentFixture.nativeElement;
+      const nativeWrapper = parentNative.querySelector(wrapperSelector);
+      expect(nativeWrapper.classList.contains('d-none')).toBe(false);
+    });
+
+    it('should show the component when there is text content', () => {
+      const parentFixture = TestBed.createComponent(TextContentComponent);
+      parentFixture.componentInstance.hideIfNoTextContent = false;
+      parentFixture.detectChanges();
+      const parentNative = parentFixture.nativeElement;
+      const nativeWrapper = parentNative.querySelector(wrapperSelector);
+      parentFixture.detectChanges();
+      expect(nativeWrapper.classList.contains('d-none')).toBe(false);
+    });
+  });
+});

src/app/shared/metadata-field-wrapper/metadata-field-wrapper.component.ts

@@ -0,0 +1,20 @@
+import { Component, Input } from '@angular/core';
+
+/**
+ * This component renders any content inside this wrapper.
+ * The wrapper prints a label before the content (if available)
+ */
+@Component({
+  selector: 'ds-metadata-field-wrapper',
+  styleUrls: ['./metadata-field-wrapper.component.scss'],
+  templateUrl: './metadata-field-wrapper.component.html'
+})
+export class MetadataFieldWrapperComponent {
+
+  /**
+   * The label (title) for the content
+   */
+  @Input() label: string;
+
+  @Input() hideIfNoTextContent = true;
+}