V9 Upgrade esl theme

src/themes/esl/app/item-page/full/full-item-page.component.html

@@ -1,50 +1,64 @@
 <div class="container" *ngVar="(itemRD$ | async) as itemRD">
-  <div class="item-page" *ngIf="itemRD?.hasSucceeded" @fadeInOut>
-    <div *ngIf="itemRD?.payload as item">
-      <ds-themed-item-alerts [item]="item"></ds-themed-item-alerts>
-      <ds-item-versions-notice [item]="item"></ds-item-versions-notice>
-      <ds-view-tracker [object]="item"></ds-view-tracker>
-      <div *ngIf="!item.isWithdrawn || (isAdmin$|async)" class="full-item-info">
-        <!-- TAMU Customization - ESL homepage link -->
-        <div class="d-flex flex-row justify-content-center font-weight-bold">
-          <p>{{"theme.esl.visit" | translate}} <a href="http://esl.tamu.edu/">{{"theme.esl.homepage" | translate}}</a>.</p>
+  @if (itemRD?.hasSucceeded) {
+    <div class="item-page" @fadeInOut>
+      @if (itemRD?.payload; as item) {
+        <div>
+          <ds-item-alerts [item]="item"></ds-item-alerts>
+          <ds-item-versions-notice [item]="item"></ds-item-versions-notice>
+          @if (!item.isWithdrawn || (isAdmin$|async)) {
+            <!-- TAMU Customization - ESL homepage link -->
+            <div class="d-flex flex-row justify-content-center font-weight-bold">
+              <p>{{"theme.esl.visit" | translate}} <a href="http://esl.tamu.edu/">{{"theme.esl.homepage" | translate}}</a>.</p>
+            </div>
+            <!-- End TAMU Customization - ESL homepage link -->
+            <div class="full-item-info">
+              <div class="d-flex flex-row">
+                <ds-item-page-title-field class="me-auto" [item]="item"></ds-item-page-title-field>
+                <ds-dso-edit-menu></ds-dso-edit-menu>
+              </div>
+              @if (!fromSubmissionObject) {
+                <div class="simple-view-link my-3">
+                  <a class="btn btn-outline-primary" [routerLink]="[(itemPageRoute$ | async)]">
+                    {{"item.page.link.simple" | translate}}
+                  </a>
+                </div>
+              }
+              <div class="table-responsive">
+                <table class="table  table-striped">
+                  <tbody>
+                    @for (mdEntry of (metadata$ | async) | keyvalue; track mdEntry) {
+                      @for (mdValue of mdEntry.value; track mdValue) {
+                        <tr>
+                          <td>{{mdEntry.key}}</td>
+                          <td>{{mdValue.value}}</td>
+                          <td>{{mdValue.language}}</td>
+                        </tr>
+                      }
+                    }
+                  </tbody>
+                </table>
+              </div>
+              <ds-item-page-full-file-section [item]="item"></ds-item-page-full-file-section>
+              <ds-item-page-collections [item]="item"></ds-item-page-collections>
+              <ds-item-versions class="mt-2" [item]="item"></ds-item-versions>
+              @if (fromSubmissionObject) {
+                <div class="button-row bottom">
+                  <div class="text-end">
+                    <button class="btn btn-outline-secondary me-1" (click)="back()"><i
+                    class="fas fa-arrow-left"></i> {{'item.page.return' | translate}}</button>
+                  </div>
+                </div>
+              }
+            </div>
+          }
         </div>
-        <!-- End TAMU Customization - ESL homepage link -->
-        <div class="d-flex flex-row">
-          <ds-themed-item-page-title-field class="mr-auto" [item]="item"></ds-themed-item-page-title-field>
-          <ds-dso-edit-menu></ds-dso-edit-menu>
-        </div>
-        <div class="simple-view-link my-3" *ngIf="!fromSubmissionObject">
-          <a class="btn btn-outline-primary" [routerLink]="[(itemPageRoute$ | async)]">
-            {{"item.page.link.simple" | translate}}
-          </a>
-        </div>
-        <div class="table-responsive">
-          <table class="table  table-striped">
-            <tbody>
-            <ng-container *ngFor="let mdEntry of (metadata$ | async) | keyvalue">
-              <tr *ngFor="let mdValue of mdEntry.value">
-                <td>{{mdEntry.key}}</td>
-                <td>{{mdValue.value}}</td>
-                <td>{{mdValue.language}}</td>
-              </tr>
-            </ng-container>
-            </tbody>
-          </table>
-        </div>
-        <ds-themed-item-page-full-file-section [item]="item"></ds-themed-item-page-full-file-section>
-        <ds-item-page-collections [item]="item"></ds-item-page-collections>
-        <ds-item-versions class="mt-2" [item]="item"></ds-item-versions>
-        <div class="button-row bottom" *ngIf="fromSubmissionObject">
-          <div class="text-right">
-            <button class="btn btn-outline-secondary mr-1" (click)="back()">
-              <i class="fas fa-arrow-left"></i> {{'item.page.return' | translate}}
-            </button>
-          </div>
-        </div>
-      </div>
+      }
     </div>
-  </div>
-  <ds-error *ngIf="itemRD?.hasFailed" message="{{'error.item' | translate}}"></ds-error>
-  <ds-themed-loading *ngIf="itemRD?.isLoading" message="{{'loading.item' | translate}}"></ds-themed-loading>
+  }
+  @if (itemRD?.hasFailed) {
+    <ds-error message="{{'error.item' | translate}}"></ds-error>
+  }
+  @if (itemRD?.isLoading) {
+    <ds-loading message="{{'loading.item' | translate}}"></ds-loading>
+  }
 </div>

src/themes/esl/app/item-page/full/full-item-page.component.scss

@@ -0,0 +1,8 @@
+:host {
+    div.simple-view-link {
+        text-align: center;
+        a {
+            min-width: 25%;
+        }
+    }
+}

src/themes/esl/app/item-page/full/full-item-page.component.ts

@@ -1,20 +1,52 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { fadeInOut } from '../../../../../app/shared/animations/fade';
-import { FullItemPageComponent as BaseComponent } from '../../../../../app/item-page/full/full-item-page.component';
+import {
+  AsyncPipe,
+  KeyValuePipe,
+} from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
 
-/**
- * This component renders a full item page.
- * The route parameter 'id' is used to request the item it represents.
- */
+import { ThemedItemAlertsComponent } from '../../../../../app/item-page/alerts/themed-item-alerts.component';
+import { CollectionsComponent } from '../../../../../app/item-page/field-components/collections/collections.component';
+import { ThemedFullFileSectionComponent } from '../../../../../app/item-page/full/field-components/file-section/themed-full-file-section.component';
+import { FullItemPageComponent as BaseComponent } from '../../../../../app/item-page/full/full-item-page.component';
+import { ThemedItemPageTitleFieldComponent } from '../../../../../app/item-page/simple/field-components/specific-field/title/themed-item-page-field.component';
+import { ItemVersionsComponent } from '../../../../../app/item-page/versions/item-versions.component';
+import { ItemVersionsNoticeComponent } from '../../../../../app/item-page/versions/notice/item-versions-notice.component';
+import { fadeInOut } from '../../../../../app/shared/animations/fade';
+import { DsoEditMenuComponent } from '../../../../../app/shared/dso-page/dso-edit-menu/dso-edit-menu.component';
+import { ErrorComponent } from '../../../../../app/shared/error/error.component';
+import { ThemedLoadingComponent } from '../../../../../app/shared/loading/themed-loading.component';
+import { VarDirective } from '../../../../../app/shared/utils/var.directive';
 
 @Component({
-  selector: 'ds-full-item-page',
-  // styleUrls: ['./full-item-page.component.scss'],
-  styleUrls: ['../../../../../app/item-page/full/full-item-page.component.scss'],
+  selector: 'ds-themed-full-item-page',
+  styleUrls: ['./full-item-page.component.scss'],
+  // styleUrls: ['../../../../../app/item-page/full/full-item-page.component.scss'],
   templateUrl: './full-item-page.component.html',
   // templateUrl: '../../../../../app/item-page/full/full-item-page.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [fadeInOut]
+  animations: [fadeInOut],
+  standalone: true,
+  imports: [
+    AsyncPipe,
+    CollectionsComponent,
+    DsoEditMenuComponent,
+    ErrorComponent,
+    ItemVersionsComponent,
+    ItemVersionsNoticeComponent,
+    KeyValuePipe,
+    RouterLink,
+    ThemedFullFileSectionComponent,
+    ThemedItemAlertsComponent,
+    ThemedItemPageTitleFieldComponent,
+    ThemedLoadingComponent,
+    TranslateModule,
+    VarDirective,
+  ],
 })
 export class FullItemPageComponent extends BaseComponent {
 }

src/themes/esl/app/item-page/simple/item-types/untyped-item/untyped-item.component.html

@@ -1,42 +1,48 @@
-<ds-themed-results-back-button *ngIf="showBackButton | async" [back]="back"></ds-themed-results-back-button>
-<div class="row" *ngIf="iiifEnabled">
-  <div class="col-12">
-    <ds-mirador-viewer id="iiif-viewer"
-                   [object]="object"
-                   [searchable]="iiifSearchEnabled"
-                   [query]="iiifQuery$ | async">
-    </ds-mirador-viewer>
+@if (showBackButton$ | async) {
+  <ds-results-back-button [back]="back"></ds-results-back-button>
+}
+@if (iiifEnabled) {
+  <div class="row">
+    <div class="col-12">
+      <ds-mirador-viewer id="iiif-viewer"
+        [object]="object"
+        [searchable]="iiifSearchEnabled"
+        [query]="iiifQuery$ | async">
+      </ds-mirador-viewer>
+    </div>
   </div>
-</div>
+}
 
 <!-- TAMU Customization - ESL homepage link -->
 <div class="d-flex flex-row justify-content-center font-weight-bold">
   <p>{{"theme.esl.visit" | translate}} <a href="http://esl.tamu.edu/">{{"theme.esl.homepage" | translate}}</a>.</p>
 </div>
 <!-- End TAMU Customization - ESL homepage link -->
 <div class="d-flex flex-row">
-  <ds-themed-item-page-title-field [item]="object" class="mr-auto">
-  </ds-themed-item-page-title-field>
+  <ds-item-page-title-field [item]="object" class="me-auto">
+  </ds-item-page-title-field>
   <ds-dso-edit-menu></ds-dso-edit-menu>
 </div>
 <div class="row">
   <div class="col-xs-12 col-md-4">
-    <ng-container *ngIf="!(mediaViewer.image || mediaViewer.video)">
+    @if (!(mediaViewer.image || mediaViewer.video)) {
       <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-        <ds-themed-thumbnail [thumbnail]="object?.thumbnail | async"></ds-themed-thumbnail>
+        <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
       </ds-metadata-field-wrapper>
-    </ng-container>
-    <div *ngIf="mediaViewer.image || mediaViewer.video" class="mb-2">
-      <ds-themed-media-viewer [item]="object"></ds-themed-media-viewer>
-    </div>
-    <ds-themed-item-page-file-section [item]="object"></ds-themed-item-page-file-section>
+    }
+    @if (mediaViewer.image || mediaViewer.video) {
+      <div class="mb-2">
+        <ds-media-viewer [item]="object"></ds-media-viewer>
+      </div>
+    }
+    <ds-item-page-file-section [item]="object"></ds-item-page-file-section>
     <ds-item-page-date-field [item]="object"></ds-item-page-date-field>
-    <ds-themed-metadata-representation-list class="ds-item-page-mixed-author-field"
+    <ds-metadata-representation-list class="ds-item-page-mixed-author-field"
       [parentItem]="object"
       [itemType]="'Person'"
       [metadataFields]="['dc.contributor.author', 'dc.creator']"
-      [label]="'relationships.isAuthorOf' | translate">
-    </ds-themed-metadata-representation-list>
+      [label]="'item.page.authors' | translate">
+    </ds-metadata-representation-list>
     <ds-generic-item-page-field [item]="object"
       [fields]="['journal.title']"
       [label]="'item.page.journal-title'">
@@ -70,13 +76,40 @@
       [fields]="['dc.identifier.citation']"
       [label]="'item.page.citation'">
     </ds-generic-item-page-field>
+    @if (geospatialItemPageFieldsEnabled) {
+      <ds-geospatial-item-page-field [item]="object"
+                                     [label]="'item.page.places'"
+                                     [pointFields]="['dcterms.spatial']"
+                                     [bboxFields]="['dcterms.spatial']"
+                                     [cluster]="true"
+      >
+      </ds-geospatial-item-page-field>
+    }
     <ds-item-page-uri-field [item]="object"
       [fields]="['dc.identifier.uri']"
       [label]="'item.page.uri'">
     </ds-item-page-uri-field>
     <ds-item-page-collections [item]="object"></ds-item-page-collections>
+    <ds-item-page-uri-field [item]="object"
+      [fields]="['coar.notify.endorsedBy']"
+      [label]="'item.page.endorsement'">
+    </ds-item-page-uri-field>
+    <ds-item-page-uri-field [item]="object"
+      [fields]="['datacite.relation.isReviewedBy']"
+      [label]="'item.page.review'">
+    </ds-item-page-uri-field>
+    <ds-item-page-uri-field [item]="object"
+      [fields]="['datacite.relation.isSupplementedBy']"
+      [label]="'item.page.supplemented'">
+    </ds-item-page-uri-field>
+    <ds-item-page-uri-field [item]="object"
+      [fields]="['datacite.relation.isReferencedBy']"
+      [label]="'item.page.referenced'">
+    </ds-item-page-uri-field>
+    <ds-item-page-cc-license-field [item]="object" [variant]="'full'">
+    </ds-item-page-cc-license-field>
     <div>
-      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']" role="button">
+      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']" role="button" role="button" tabindex="0">
         <i class="fas fa-info-circle"></i> {{"item.page.link.full" | translate}}
       </a>
     </div>

src/themes/esl/app/item-page/simple/item-types/untyped-item/untyped-item.component.scss

@@ -0,0 +1 @@
+@import '../../../../../../../styles/variables.scss';

src/themes/esl/app/item-page/simple/item-types/untyped-item/untyped-item.component.ts

@@ -1,25 +1,66 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { Item } from '../../../../../../../app/core/shared/item.model';
-import { ViewMode } from '../../../../../../../app/core/shared/view-mode.model';
+import { AsyncPipe } from '@angular/common';
 import {
-  listableObjectComponent
-} from '../../../../../../../app/shared/object-collection/shared/listable-object/listable-object.decorator';
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+
 import { Context } from '../../../../../../../app/core/shared/context.model';
-import {
-  UntypedItemComponent as BaseComponent
-} from '../../../../../../../app/item-page/simple/item-types/untyped-item/untyped-item.component';
+import { Item } from '../../../../../../../app/core/shared/item.model';
+import { ViewMode } from '../../../../../../../app/core/shared/view-mode.model';
+import { CollectionsComponent } from '../../../../../../../app/item-page/field-components/collections/collections.component';
+import { ThemedMediaViewerComponent } from '../../../../../../../app/item-page/media-viewer/themed-media-viewer.component';
+import { MiradorViewerComponent } from '../../../../../../../app/item-page/mirador-viewer/mirador-viewer.component';
+import { ThemedFileSectionComponent } from '../../../../../../../app/item-page/simple/field-components/file-section/themed-file-section.component';
+import { ItemPageAbstractFieldComponent } from '../../../../../../../app/item-page/simple/field-components/specific-field/abstract/item-page-abstract-field.component';
+import { ItemPageCcLicenseFieldComponent } from '../../../../../../../app/item-page/simple/field-components/specific-field/cc-license/item-page-cc-license-field.component';
+import { ItemPageDateFieldComponent } from '../../../../../../../app/item-page/simple/field-components/specific-field/date/item-page-date-field.component';
+import { GenericItemPageFieldComponent } from '../../../../../../../app/item-page/simple/field-components/specific-field/generic/generic-item-page-field.component';
+import { GeospatialItemPageFieldComponent } from '../../../../../../../app/item-page/simple/field-components/specific-field/geospatial/geospatial-item-page-field.component';
+import { ThemedItemPageTitleFieldComponent } from '../../../../../../../app/item-page/simple/field-components/specific-field/title/themed-item-page-field.component';
+import { ItemPageUriFieldComponent } from '../../../../../../../app/item-page/simple/field-components/specific-field/uri/item-page-uri-field.component';
+import { UntypedItemComponent as BaseComponent } from '../../../../../../../app/item-page/simple/item-types/untyped-item/untyped-item.component';
+import { ThemedMetadataRepresentationListComponent } from '../../../../../../../app/item-page/simple/metadata-representation-list/themed-metadata-representation-list.component';
+import { DsoEditMenuComponent } from '../../../../../../../app/shared/dso-page/dso-edit-menu/dso-edit-menu.component';
+import { MetadataFieldWrapperComponent } from '../../../../../../../app/shared/metadata-field-wrapper/metadata-field-wrapper.component';
+import { listableObjectComponent } from '../../../../../../../app/shared/object-collection/shared/listable-object/listable-object.decorator';
+import { ThemedResultsBackButtonComponent } from '../../../../../../../app/shared/results-back-button/themed-results-back-button.component';
+import { ThemedThumbnailComponent } from '../../../../../../../app/thumbnail/themed-thumbnail.component';
 
-/**
- * Component that represents an untyped Item page
- */
 @listableObjectComponent(Item, ViewMode.StandalonePage, Context.Any, 'esl')
 @Component({
   selector: 'ds-untyped-item',
-  // styleUrls: ['./untyped-item.component.scss'],
-  styleUrls: ['../../../../../../../app/item-page/simple/item-types/untyped-item/untyped-item.component.scss'],
+  styleUrls: ['./untyped-item.component.scss'],
+  // styleUrls: [
+  //   '../../../../../../../app/item-page/simple/item-types/untyped-item/untyped-item.component.scss',
+  // ],
   templateUrl: './untyped-item.component.html',
-  // templateUrl: '../../../../../../../app/item-page/simple/item-types/untyped-item/untyped-item.component.html',
+  // templateUrl:
+  //   '../../../../../../../app/item-page/simple/item-types/untyped-item/untyped-item.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    AsyncPipe,
+    CollectionsComponent,
+    DsoEditMenuComponent,
+    GenericItemPageFieldComponent,
+    GeospatialItemPageFieldComponent,
+    ItemPageAbstractFieldComponent,
+    ItemPageCcLicenseFieldComponent,
+    ItemPageDateFieldComponent,
+    ItemPageUriFieldComponent,
+    MetadataFieldWrapperComponent,
+    MiradorViewerComponent,
+    RouterLink,
+    ThemedFileSectionComponent,
+    ThemedItemPageTitleFieldComponent,
+    ThemedMediaViewerComponent,
+    ThemedMetadataRepresentationListComponent,
+    ThemedResultsBackButtonComponent,
+    ThemedThumbnailComponent,
+    TranslateModule,
+  ],
 })
 export class UntypedItemComponent extends BaseComponent {
 }