refactor: rework components

frontend/app/src/app/modules/data/chips/action-chip-list.component.ts

@@ -12,8 +12,11 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, Input} from '@angular/core';
-import {SCDateSeries, SCThingType, SCThings} from '@openstapps/core';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {SCDateSeries, SCThings, SCThingType} from '@openstapps/core';
+import {LocateActionChipComponent} from './data/locate-action-chip.component';
+import {NavigateActionChipComponent} from './data/navigate-action-chip.component';
+import {AddEventActionChipComponent} from './data/add-event-action-chip.component';
 
 /**
  * Shows a horizontal list of action chips
@@ -21,7 +24,10 @@ import {SCDateSeries, SCThingType, SCThings} from '@openstapps/core';
 @Component({
   selector: 'stapps-action-chip-list',
   templateUrl: 'action-chip-list.html',
-  styleUrls: ['action-chip-list.scss'],
+  styleUrl: 'action-chip-list.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [LocateActionChipComponent, NavigateActionChipComponent, AddEventActionChipComponent],
 })
 export class ActionChipListComponent {
   private _item: SCThings;

frontend/app/src/app/modules/data/chips/action-chip-list.html

@@ -13,7 +13,13 @@
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
-<stapps-locate-action-chip *ngIf="applicable.locate" [item]="item"></stapps-locate-action-chip>
-<stapps-navigate-action-chip *ngIf="applicable.navigate" [item]="$any(item)"></stapps-navigate-action-chip>
-<!-- Add Event Chip needs to load data and should be the last -->
-<stapps-add-event-action-chip *ngIf="applicable.event" [item]="item"></stapps-add-event-action-chip>
+@if (applicable.locate) {
+  <stapps-locate-action-chip [item]="item"></stapps-locate-action-chip>
+}
+@if (applicable.navigate) {
+  <stapps-navigate-action-chip [item]="$any(item)"></stapps-navigate-action-chip>
+}
+@if (applicable.event) {
+  <!-- Add Event Chip needs to load data and should be the last -->
+  <stapps-add-event-action-chip [item]="item"></stapps-add-event-action-chip>
+}

frontend/app/src/app/modules/data/chips/data/add-event-action-chip.component.ts

@@ -38,7 +38,6 @@ import {EditEventSelectionComponent} from '../edit-event-selection.component';
 import {AddEventReviewModalComponent} from '../../../calendar/add-event-review-modal.component';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {AsyncPipe, NgIf, TitleCasePipe} from '@angular/common';
-import {DataModule} from '../../data.module';
 import {TranslateModule} from '@ngx-translate/core';
 import {EditModalComponent} from '../../../../util/edit-modal.component';
 import {IonContentParallaxDirective} from '../../../../util/ion-content-parallax.directive';
@@ -56,7 +55,6 @@ import {IonContentParallaxDirective} from '../../../../util/ion-content-parallax
     IonChip,
     AsyncPipe,
     NgIf,
-    DataModule,
     IonContent,
     IonIcon,
     IonLabel,
@@ -68,6 +66,7 @@ import {IonContentParallaxDirective} from '../../../../util/ion-content-parallax
     IonSkeletonText,
     TitleCasePipe,
     IonContentParallaxDirective,
+    EditEventSelectionComponent,
   ],
 })
 export class AddEventActionChipComponent {

frontend/app/src/app/modules/data/chips/data/navigate-action-chip.component.ts

@@ -12,14 +12,18 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {SCPlaceWithoutReferences, SCThings} from '@openstapps/core';
+import {IonChip, IonIcon, IonLabel} from '@ionic/angular/standalone';
+import {GeoNavigationDirective} from '../../../map/geo-navigation.directive';
+import {TranslateModule} from '@ngx-translate/core';
 
 @Component({
   selector: 'stapps-navigate-action-chip',
   templateUrl: 'navigate-action-chip.html',
-  styleUrl: 'navigate-action-chip.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
+  imports: [IonChip, GeoNavigationDirective, IonIcon, IonLabel, TranslateModule],
 })
 export class NavigateActionChipComponent {
   place: SCPlaceWithoutReferences;

frontend/app/src/app/modules/data/chips/data/navigate-action-chip.scss

@@ -1,14 +0,0 @@
-/*!
- * Copyright (C) 2023 StApps
- * This program is free software: you can redistribute it and/or modify it
- * under the terms of the GNU General Public License as published by the Free
- * Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
- * more details.
- *
- * You should have received a copy of the GNU General Public License along with
- * this program. If not, see <https://www.gnu.org/licenses/>.
- */

frontend/app/src/app/modules/data/chips/edit-event-selection.component.ts

@@ -13,7 +13,15 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {ModalController} from '@ionic/angular/standalone';
+import {
+  IonCheckbox,
+  IonIcon,
+  IonItem,
+  IonList,
+  IonListHeader,
+  IonText,
+  ModalController,
+} from '@ionic/angular/standalone';
 import {SCDateSeries} from '@openstapps/core';
 import {
   DateSeriesRelevantData,
@@ -30,6 +38,10 @@ import {
   differenceBy,
 } from '@openstapps/collection-utils';
 import {SelectionValue, TreeNode} from './tree-node';
+import {TranslateModule} from '@ngx-translate/core';
+import {ThingTranslateModule} from '../../../translation/thing-translate.module';
+import {MomentModule} from 'ngx-moment';
+import {KeyValuePipe, TitleCasePipe} from '@angular/common';
 
 /**
  * Shows a horizontal list of action chips
@@ -38,6 +50,20 @@ import {SelectionValue, TreeNode} from './tree-node';
   selector: 'stapps-edit-event-selection',
   templateUrl: 'edit-event-selection.html',
   styleUrls: ['edit-event-selection.scss'],
+  standalone: true,
+  imports: [
+    IonItem,
+    IonCheckbox,
+    IonListHeader,
+    TranslateModule,
+    IonList,
+    IonText,
+    IonIcon,
+    ThingTranslateModule,
+    MomentModule,
+    KeyValuePipe,
+    TitleCasePipe,
+  ],
 })
 export class EditEventSelectionComponent implements OnInit {
   /**

frontend/app/src/app/modules/data/chips/edit-event-selection.html

@@ -22,7 +22,7 @@
     <ion-list-header> {{ 'data.chips.add_events.popover.ALL' | translate }} </ion-list-header>
   </ion-checkbox>
 </ion-item>
-<ng-container *ngFor="let frequency of selection.children">
+@for (frequency of selection.children; track $index) {
   <ion-list inset="true" lines="full">
     <ion-item lines="none" class="list-header">
       <ion-checkbox
@@ -39,42 +39,43 @@
         </ion-list-header>
       </ion-checkbox>
     </ion-item>
-    <ion-item *ngFor="let date of frequency.children">
-      <ion-checkbox
-        [checked]="date.selected"
-        (ionChange)="modified.emit(); date.selected = !date.selected; frequency.notifyChildChanged()"
-      >
-        <ng-container *ngIf="date.item.dates.length > 1; else single_event">
-          <ion-text>
-            {{ date.item.dates[0] | amDateFormat: 'dddd, LT' }} -
-            {{ date.item.dates[0] | amAdd: date.item.duration | amDateFormat: 'LT' }}
-          </ion-text>
-          <br />
-          <ion-text>
-            {{ date.item.dates[0] | amDateFormat: 'LL' }} -
-            {{ date.item.dates[date.item.dates.length - 1] | amDateFormat: 'LL' }}
-          </ion-text>
-        </ng-container>
-        <ng-template #single_event>
-          <ion-text *ngIf="date.item.dates[0] as time; else noDates">
-            {{ time | amDateFormat: 'LL, LT' }} - {{ time | amAdd: date.item.duration | amDateFormat: 'LT' }}
-          </ion-text>
-          <ng-template #noDates>
+    @for (date of frequency.children; track $index) {
+      <ion-item>
+        <ion-checkbox
+          [checked]="date.selected"
+          (ionChange)="modified.emit(); date.selected = !date.selected; frequency.notifyChildChanged()"
+        >
+          @if (date.item.dates.length > 1) {
+            <ion-text>
+              {{ date.item.dates[0] | amDateFormat: 'dddd, LT' }} -
+              {{ date.item.dates[0] | amAdd: date.item.duration | amDateFormat: 'LT' }}
+            </ion-text>
+            <br />
+            <ion-text>
+              {{ date.item.dates[0] | amDateFormat: 'LL' }} -
+              {{ date.item.dates.at(-1) | amDateFormat: 'LL' }}
+            </ion-text>
+          } @else if (date.item.dates.length === 1) {
+            <ion-text>
+              {{ date.item.dates[0] | amDateFormat: 'LL, LT' }} -
+              {{ date.item.dates[0] | amAdd: date.item.duration | amDateFormat: 'LT' }}
+            </ion-text>
+          } @else {
             <ion-text color="danger">{{ 'data.chips.add_events.popover.DATA_ERROR' | translate }}</ion-text>
             <br />
-            <ion-text *ngFor="let id of date.item.identifiers | keyvalue">
-              {{ id.key }}: {{ id.value }}
+            @for (id of date.item.identifiers | keyvalue; track $index) {
+              <ion-text>{{ id.key }}: {{ id.value }}</ion-text>
+            }
+          }
+          @if (date.item.inPlace) {
+            <br />
+            <ion-text color="medium" class="place">
+              <ion-icon name="pin_drop"></ion-icon>
+              <span> {{ 'inPlace.name' | thingTranslate: date.item }}</span>
             </ion-text>
-          </ng-template>
-        </ng-template>
-        <ng-container class="ion-align-items-center" *ngIf="date.item.inPlace">
-          <br />
-          <ion-text color="medium" class="place">
-            <ion-icon name="pin_drop"></ion-icon>
-            <span> {{ 'inPlace.name' | thingTranslate: date.item }}</span>
-          </ion-text>
-        </ng-container>
-      </ion-checkbox>
-    </ion-item>
+          }
+        </ion-checkbox>
+      </ion-item>
+    }
   </ion-list>
-</ng-container>
+}

frontend/app/src/app/modules/data/chips/filter/chip-filter.component.ts

@@ -12,8 +12,9 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {IonChip, IonLabel} from '@ionic/angular/standalone';
+import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from '@angular/core';
+import {IonChip, IonIcon, IonLabel} from '@ionic/angular/standalone';
+
 /**
  * Shows a chip filter
  */
@@ -21,8 +22,9 @@ import {IonChip, IonLabel} from '@ionic/angular/standalone';
   selector: 'stapps-chip-filter',
   templateUrl: './chip-filter.component.html',
   styleUrls: ['./chip-filter.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [IonChip, IonLabel],
+  imports: [IonChip, IonLabel, IonIcon],
 })
 export class ChipFilterComponent {
   /**

frontend/app/src/app/modules/data/data-icon.pipe.ts

@@ -21,6 +21,8 @@ import {DataIcons} from './data-icon.config';
  */
 @Pipe({
   name: 'dataIcon',
+  pure: true,
+  standalone: true,
 })
 export class DataIconPipe implements PipeTransform {
   /**

frontend/app/src/app/modules/data/data.module.ts

@@ -26,59 +26,20 @@ import {ThingTranslateModule} from '../../translation/thing-translate.module';
 import {SimpleBrowser, browserFactory} from '../../util/browser.factory';
 import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
 import {RoutingStackService} from '../../util/routing-stack.service';
-import {UtilModule} from '../../util/util.module';
 import {CalendarService} from '../calendar/calendar.service';
 import {ScheduleProvider} from '../calendar/schedule.provider';
 import {GeoNavigationDirective} from '../map/geo-navigation.directive';
 import {SettingsProvider} from '../settings/settings.provider';
 import {StorageModule} from '../storage/storage.module';
-import {ActionChipListComponent} from './chips/action-chip-list.component';
-import {AddEventActionChipComponent} from './chips/data/add-event-action-chip.component';
-import {LocateActionChipComponent} from './chips/data/locate-action-chip.component';
-import {NavigateActionChipComponent} from './chips/data/navigate-action-chip.component';
-import {EditEventSelectionComponent} from './chips/edit-event-selection.component';
 import {CoordinatedSearchProvider} from './coordinated-search.provider';
 import {DataFacetsProvider} from './data-facets.provider';
-import {DataIconPipe} from './data-icon.pipe';
 import {DataRoutingModule} from './data-routing.module';
 import {DataProvider} from './data.provider';
 import {DataDetailContentComponent} from './detail/data-detail-content.component';
 import {DataDetailComponent} from './detail/data-detail.component';
 import {DataPathComponent} from './detail/data-path.component';
-import {AddressDetailComponent} from './elements/address-detail.component';
-import {CertificationsInDetailComponent} from './elements/certifications-in-detail.component';
-import {ExternalLinkComponent} from './elements/external-link.component';
-import {FavoriteButtonComponent} from './elements/favorite-button.component';
-import {LongInlineTextComponent} from './elements/long-inline-text.component';
-import {OffersDetailComponent} from './elements/offers-detail.component';
-import {OffersInListComponent} from './elements/offers-in-list.component';
-import {OriginDetailComponent} from './elements/origin-detail.component';
-import {OriginInListComponent} from './elements/origin-in-list.component';
-import {StappsRatingComponent} from './elements/rating.component';
-import {SimpleCardComponent} from './elements/simple-card.component';
-import {SkeletonListItemComponent} from './elements/skeleton-list-item.component';
-import {SkeletonSegmentComponent} from './elements/skeleton-segment-button.component';
-import {SkeletonSimpleCardComponent} from './elements/skeleton-simple-card.component';
-import {TitleCardComponent} from './elements/title-card.component';
-import {DataListItemHostDefaultComponent} from './list/data-list-item-host-default.component';
-import {DataListItemHostDirective} from './list/data-list-item-host.directive';
-import {DataListItemComponent} from './list/data-list-item.component';
-import {DataListComponent} from './list/data-list.component';
 import {FoodDataListComponent} from './list/food-data-list.component';
-import {SearchPageComponent} from './list/search-page.component';
-import {SimpleDataListComponent} from './list/simple-data-list.component';
-import {SkeletonListComponent} from './list/skeleton-list.component';
-import {TreeListFragmentComponent} from './list/tree-list-fragment.component';
-import {TreeListComponent} from './list/tree-list.component';
 import {StAppsWebHttpClient} from './stapps-web-http-client.provider';
-import {ArticleContentComponent} from './types/article/article-content.component';
-import {ArticleListItemComponent} from './types/article/article-item.component';
-import {BookDetailContentComponent} from './types/book/book-detail-content.component';
-import {BookListItemComponent} from './types/book/book-list-item.component';
-import {CatalogDetailContentComponent} from './types/catalog/catalog-detail-content.component';
-import {CatalogListItemComponent} from './types/catalog/catalog-list-item.component';
-import {DateSeriesDetailContentComponent} from './types/date-series/date-series-detail-content.component';
-import {DateSeriesListItemComponent} from './types/date-series/date-series-list-item.component';
 import {DishCharacteristicsComponent} from './types/dish/dish-characteristics.component';
 import {DishDetailContentComponent} from './types/dish/dish-detail-content.component';
 import {DishListItemComponent} from './types/dish/dish-list-item.component';
@@ -110,71 +71,33 @@ import {VideoListItemComponent} from './types/video/video-list-item.component';
  */
 @NgModule({
   declarations: [
-    ActionChipListComponent,
-    AddEventActionChipComponent,
-    NavigateActionChipComponent,
-    EditEventSelectionComponent,
-    AddressDetailComponent,
-    CatalogDetailContentComponent,
-    CatalogListItemComponent,
-    CertificationsInDetailComponent,
     DishCharacteristicsComponent,
     DataDetailComponent,
     DataDetailContentComponent,
-    DataIconPipe,
-    DataListComponent,
-    DataListItemComponent,
     DataPathComponent,
     EventRoutePathComponent,
-    DateSeriesDetailContentComponent,
-    DateSeriesListItemComponent,
     DishDetailContentComponent,
     DishListItemComponent,
     EventDetailContentComponent,
     EventListItemComponent,
-    FavoriteButtonComponent,
     FavoriteDetailContentComponent,
-    SkeletonListComponent,
     FavoriteListItemComponent,
     FoodDataListComponent,
-    LocateActionChipComponent,
-    LongInlineTextComponent,
     MessageDetailContentComponent,
     MessageListItemComponent,
     JobPostingDetailContentComponent,
     JobPostingListItemComponent,
-    OffersDetailComponent,
-    OffersInListComponent,
     OrganizationDetailContentComponent,
     OrganizationListItemComponent,
-    OriginDetailComponent,
-    OriginInListComponent,
     PersonDetailContentComponent,
     PersonListItemComponent,
     PlaceDetailContentComponent,
     PlaceListItemComponent,
     PlaceMensaDetailComponent,
-    SearchPageComponent,
     SemesterDetailContentComponent,
     SemesterListItemComponent,
-    DataListItemHostDirective,
-    DataListItemHostDefaultComponent,
-    SimpleCardComponent,
-    SkeletonListItemComponent,
-    SkeletonSegmentComponent,
-    StappsRatingComponent,
-    SkeletonSimpleCardComponent,
-    TreeListComponent,
-    TreeListFragmentComponent,
     VideoDetailContentComponent,
     VideoListItemComponent,
-    SimpleDataListComponent,
-    TitleCardComponent,
-    ExternalLinkComponent,
-    ArticleListItemComponent,
-    ArticleContentComponent,
-    BookListItemComponent,
-    BookDetailContentComponent,
     PeriodicalListItemComponent,
     PeriodicalDetailContentComponent,
   ],
@@ -191,7 +114,6 @@ import {VideoListItemComponent} from './types/video/video-list-item.component';
     StorageModule,
     TranslateModule.forChild(),
     ThingTranslateModule.forChild(),
-    UtilModule,
     GeoNavigationDirective,
   ],
   providers: [
@@ -213,25 +135,8 @@ import {VideoListItemComponent} from './types/video/video-list-item.component';
   exports: [
     DataDetailComponent,
     DataDetailContentComponent,
-    DataIconPipe,
-    DataListComponent,
-    DataListItemComponent,
-    DateSeriesListItemComponent,
     PlaceListItemComponent,
-    SimpleCardComponent,
-    SkeletonListItemComponent,
-    SkeletonSimpleCardComponent,
-    SearchPageComponent,
-    SimpleDataListComponent,
-    OriginDetailComponent,
-    FavoriteButtonComponent,
-    TreeListComponent,
-    ExternalLinkComponent,
-    ArticleContentComponent,
-    BookDetailContentComponent,
     PeriodicalDetailContentComponent,
-    TitleCardComponent,
-    EditEventSelectionComponent,
   ],
 })
 export class DataModule {}

frontend/app/src/app/modules/data/list/data-list-item-host-default.component.ts

@@ -12,12 +12,17 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {SCThings} from '@openstapps/core';
+import {ThingTranslateModule} from '../../../translation/thing-translate.module';
+import {LongInlineTextComponent} from '../elements/long-inline-text.component';
 
 @Component({
   selector: 'data-list-item-host-default',
   templateUrl: 'data-list-item-host-default.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [ThingTranslateModule, LongInlineTextComponent],
 })
 export class DataListItemHostDefaultComponent {
   @Input() item: SCThings;

frontend/app/src/app/modules/data/list/data-list-item-host-default.html

@@ -14,9 +14,11 @@
   -->
 
 <h2>{{ 'name' | thingTranslate: item }}</h2>
-<p *ngIf="item.description">
-  <stapps-long-inline-text
-    [text]="'description' | thingTranslate: item"
-    [size]="80"
-  ></stapps-long-inline-text>
-</p>
+@if (item.description) {
+  <p>
+    <stapps-long-inline-text
+      [text]="'description' | thingTranslate: item"
+      [size]="80"
+    ></stapps-long-inline-text>
+  </p>
+}

frontend/app/src/app/modules/data/list/data-list-item-host.directive.ts

@@ -59,6 +59,7 @@ const DataListItemIndex: Partial<Record<SCThingType, Type<DataListItem>>> = {
 
 @Directive({
   selector: '[dataListItemHost]',
+  standalone: true,
 })
 export class DataListItemHostDirective {
   private type?: Type<DataListItem>;

frontend/app/src/app/modules/data/list/data-list-item.component.ts

@@ -12,18 +12,46 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, ContentChild, HostBinding, Input, TemplateRef} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  HostBinding,
+  Input,
+  TemplateRef,
+} from '@angular/core';
 import {SCThings} from '@openstapps/core';
 import {DataRoutingService} from '../data-routing.service';
 import {DataListContext} from './data-list.component';
+import {IonIcon, IonItem, IonLabel, IonThumbnail} from '@ionic/angular/standalone';
+import {StappsRatingComponent} from '../elements/rating.component';
+import {FavoriteButtonComponent} from '../elements/favorite-button.component';
+import {ActionChipListComponent} from '../chips/action-chip-list.component';
+import {NgTemplateOutlet} from '@angular/common';
+import {DataListItemHostDirective} from './data-list-item-host.directive';
+import {DataIconPipe} from '../data-icon.pipe';
 
 /**
  * Shows data items in lists such es search result
  */
 @Component({
   selector: 'stapps-data-list-item',
-  styleUrls: ['data-list-item.scss'],
   templateUrl: 'data-list-item.html',
+  styleUrl: 'data-list-item.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    IonItem,
+    IonThumbnail,
+    IonIcon,
+    IonLabel,
+    StappsRatingComponent,
+    FavoriteButtonComponent,
+    ActionChipListComponent,
+    NgTemplateOutlet,
+    DataListItemHostDirective,
+    DataIconPipe,
+  ],
 })
 export class DataListItemComponent {
   /**

frontend/app/src/app/modules/data/list/data-list-item.html

@@ -21,32 +21,38 @@
   (click)="notifySelect()"
 >
   <div class="item-height-placeholder"></div>
-  <ion-thumbnail slot="start" *ngIf="!hideThumbnail" class="ion-margin-end">
-    <ion-icon color="dark" [name]="item.type | dataIcon" size="36"></ion-icon>
-  </ion-thumbnail>
-  <ng-container *ngIf="contentTemplateRef; else defaultContent">
-    <ion-label class="ion-text-wrap" [ngSwitch]="true">
+  @if (!hideThumbnail) {
+    <ion-thumbnail slot="start" class="ion-margin-end">
+      <ion-icon color="dark" [name]="item.type | dataIcon" size="36"></ion-icon>
+    </ion-thumbnail>
+  }
+  @if (contentTemplateRef) {
+    <ng-container>
+      <ion-label class="ion-text-wrap">
+        <div>
+          <ng-container *ngTemplateOutlet="contentTemplateRef; context: {$implicit: item}"></ng-container>
+        </div>
+      </ion-label>
+    </ng-container>
+  } @else {
+    <ion-label class="ion-text-wrap">
       <div>
-        <ng-container *ngTemplateOutlet="contentTemplateRef; context: {$implicit: item}"></ng-container>
+        <ng-template [dataListItemHost]="item"></ng-template>
+        @if (listItemChipInteraction && appearance !== 'square') {
+          <stapps-action-chip-list slot="end" [item]="item"></stapps-action-chip-list>
+        }
       </div>
     </ion-label>
-  </ng-container>
+  }
 
-  <ng-container *ngIf="listItemEndInteraction" [ngSwitch]="item.type">
-    <stapps-rating *ngSwitchCase="'dish'" [item]="$any(item)"></stapps-rating>
-    <stapps-favorite-button *ngSwitchDefault [item]="$any(item)"></stapps-favorite-button>
-  </ng-container>
+  @if (listItemChipInteraction) {
+    @switch (item.type) {
+      @case ('dish') {
+        <stapps-rating [item]="$any(item)"></stapps-rating>
+      }
+      @default {
+        <stapps-favorite-button [item]="$any(item)"></stapps-favorite-button>
+      }
+    }
+  }
 </ion-item>
-
-<ng-template #defaultContent>
-  <ion-label class="ion-text-wrap">
-    <div>
-      <ng-template [dataListItemHost]="item"></ng-template>
-      <stapps-action-chip-list
-        *ngIf="listItemChipInteraction && appearance !== 'square'"
-        slot="end"
-        [item]="item"
-      ></stapps-action-chip-list>
-    </div>
-  </ion-label>
-</ng-template>

frontend/app/src/app/modules/data/list/data-list.component.ts

@@ -13,6 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {
+  ChangeDetectionStrategy,
   Component,
   ContentChild,
   DestroyRef,
@@ -29,8 +30,12 @@ import {
 } from '@angular/core';
 import {SCThings} from '@openstapps/core';
 import {BehaviorSubject, Observable} from 'rxjs';
-import {IonInfiniteScroll} from '@ionic/angular/standalone';
+import {IonInfiniteScroll, IonInfiniteScrollContent, IonLabel, IonList} from '@ionic/angular/standalone';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {AsyncPipe, NgTemplateOutlet, TitleCasePipe} from '@angular/common';
+import {TranslateModule} from '@ngx-translate/core';
+import {SkeletonListComponent} from './skeleton-list.component';
+import {DataListItemComponent} from './data-list-item.component';
 
 export interface DataListContext<T> {
   $implicit: T;
@@ -42,7 +47,21 @@ export interface DataListContext<T> {
 @Component({
   selector: 'stapps-data-list',
   templateUrl: 'data-list.html',
-  styleUrls: ['data-list.scss'],
+  styleUrl: 'data-list.scss',
+  changeDetection: ChangeDetectionStrategy.Default,
+  standalone: true,
+  imports: [
+    IonList,
+    IonInfiniteScroll,
+    IonInfiniteScrollContent,
+    IonLabel,
+    AsyncPipe,
+    NgTemplateOutlet,
+    TranslateModule,
+    TitleCasePipe,
+    SkeletonListComponent,
+    DataListItemComponent,
+  ],
 })
 export class DataListComponent implements OnChanges, OnInit {
   /**

frontend/app/src/app/modules/data/list/data-list.html

@@ -13,25 +13,25 @@
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
-<ng-container *ngIf="itemStream | async as items">
+@if (itemStream | async; as items) {
   <ng-content select="[header]"></ng-content>
   <ion-list [style.display]="items && items.length ? 'block' : 'none'">
-    <ng-container *ngFor="let item of items">
+    @for (item of items; track $index) {
       <ng-container
         *ngTemplateOutlet="listItemTemplateRef || defaultListItem; context: {$implicit: item}"
       ></ng-container>
-    </ng-container>
+    } @empty {
+      <ion-label class="centered-message-container">
+        {{ 'search.nothing_found' | translate | titlecase }}
+      </ion-label>
+    }
     <ion-infinite-scroll (ionInfinite)="notifyLoadMore()">
       <ion-infinite-scroll-content></ion-infinite-scroll-content>
     </ion-infinite-scroll>
   </ion-list>
-</ng-container>
-<div [style.display]="!loading && items && items.length === 0 ? 'block' : 'none'">
-  <ion-label class="centered-message-container">
-    {{ 'search.nothing_found' | translate | titlecase }}
-  </ion-label>
-</div>
-<skeleton-list [style.display]="loading ? 'block' : 'none'"></skeleton-list>
+} @else if (loading) {
+  <skeleton-list></skeleton-list>
+}
 
 <ng-template let-item #defaultListItem>
   <stapps-data-list-item [item]="item" [hideThumbnail]="singleType"></stapps-data-list-item>

frontend/app/src/app/modules/data/list/sc-thing-list-item-virtual-scroll-strategy.directive.ts

@@ -1,64 +0,0 @@
-/*
- * Copyright (C) 2023 StApps
- * This program is free software: you can redistribute it and/or modify it
- * under the terms of the GNU General Public License as published by the Free
- * Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
- * more details.
- *
- * You should have received a copy of the GNU General Public License along with
- * this program. If not, see <https://www.gnu.org/licenses/>.
- */
-
-import {Directive, forwardRef, Input, Output, ViewChild} from '@angular/core';
-import {CdkVirtualForOf, VIRTUAL_SCROLL_STRATEGY} from '@angular/cdk/scrolling';
-import {ScThingListItemVirtualScrollStrategy} from './sc-thing-list-item-virtual-scroll-strategy';
-
-/**
- *
- */
-function factory(directive: SCThingListItemVirtualScrollStrategyDirective) {
-  return directive.scrollStrategy;
-}
-
-@Directive({
-  selector: 'cdk-virtual-scroll-viewport[scThingListItemVirtualScrollStrategy]',
-  providers: [
-    {
-      provide: VIRTUAL_SCROLL_STRATEGY,
-      useFactory: factory,
-      deps: [forwardRef(() => SCThingListItemVirtualScrollStrategyDirective)],
-    },
-  ],
-})
-export class SCThingListItemVirtualScrollStrategyDirective {
-  scrollStrategy = new ScThingListItemVirtualScrollStrategy();
-
-  @ViewChild(CdkVirtualForOf) virtualForOf: CdkVirtualForOf<unknown>;
-
-  @Output() readonly loadMore = this.scrollStrategy.loadMore;
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  @Input() set trackGroupBy(value: (item: any) => unknown) {
-    this.scrollStrategy.trackGroupBy = value;
-  }
-
-  @Input() set minimumHeight(value: number) {
-    this.scrollStrategy.approximateItemHeight = value;
-  }
-
-  @Input() set buffer(value: number) {
-    this.scrollStrategy.buffer = value;
-  }
-
-  @Input() set gap(value: number) {
-    this.scrollStrategy.gap = value;
-  }
-
-  @Input() set itemRenderTimeout(value: number) {
-    this.scrollStrategy.itemRenderTimeout = value;
-  }
-}

frontend/app/src/app/modules/data/list/sc-thing-list-item-virtual-scroll-strategy.ts

@@ -1,286 +0,0 @@
-/*
- * Copyright (C) 2023 StApps
- * This program is free software: you can redistribute it and/or modify it
- * under the terms of the GNU General Public License as published by the Free
- * Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
- * more details.
- *
- * You should have received a copy of the GNU General Public License along with
- * this program. If not, see <https://www.gnu.org/licenses/>.
- */
-
-import {CdkVirtualForOf, CdkVirtualScrollViewport, VirtualScrollStrategy} from '@angular/cdk/scrolling';
-import {BehaviorSubject, Subject, Subscription, takeUntil, timer} from 'rxjs';
-import {debounceTime, distinctUntilChanged, tap} from 'rxjs/operators';
-import {SCThingType} from '@openstapps/core';
-
-export class ScThingListItemVirtualScrollStrategy implements VirtualScrollStrategy {
-  private viewport?: CdkVirtualScrollViewport;
-
-  private virtualForOf?: CdkVirtualForOf<unknown>;
-
-  private index$ = new Subject<number>();
-
-  private heights = new Map<unknown, number | undefined>();
-
-  private groupHeights = new Map<unknown, number | undefined>();
-
-  private offsets: number[] = [];
-
-  private totalHeight = 0;
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private _items?: readonly unknown[];
-
-  private _groups?: readonly unknown[];
-
-  /**
-   * We use this to track loadMore
-   */
-  private currentLength = 0;
-
-  private dataStreamSubscription?: Subscription;
-
-  private mutationObserver?: MutationObserver;
-
-  approximateItemHeight = 67;
-
-  approximateGroupSizes: Map<unknown, number> = new Map([[SCThingType.AcademicEvent, 139]]);
-
-  buffer = 4000;
-
-  gap = 8;
-
-  itemRenderTimeout = 1000;
-
-  heightUpdateDebounceTime = 25;
-
-  heightSetDebounceTime = 100;
-
-  loadMore = new Subject<void>();
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  trackGroupBy: (value: any) => unknown = it => it.type;
-
-  attach(viewport: CdkVirtualScrollViewport): void {
-    this.viewport = viewport;
-    // @ts-expect-error private property
-    this.virtualForOf = viewport._forOf;
-    this.dataStreamSubscription = this.virtualForOf?.dataStream.subscribe(items => {
-      this.items = items;
-    });
-
-    this.mutationObserver = new MutationObserver(() => {
-      const renderedItems = this.renderedItems;
-      if (!renderedItems) {
-        this.mutationObserver?.disconnect();
-        return this.onPrematureDisconnect();
-      }
-
-      this.intersectionObserver?.disconnect();
-      this.intersectionObserver = new IntersectionObserver(this.observeIntersection.bind(this), {
-        rootMargin: `${this.buffer - 64}px`,
-        threshold: 1,
-      });
-
-      for (const node of renderedItems) {
-        const [item, group] = this.getItemByNode(node, renderedItems);
-
-        if (this.heights.has(item)) {
-          node.style.height = `${this.getHeight(item, group)}px`;
-        } else {
-          this.intersectionObserver.observe(node);
-        }
-      }
-    });
-
-    const contentWrapper = this.contentWrapper;
-    if (!contentWrapper) return this.onPrematureDisconnect();
-    this.mutationObserver.observe(contentWrapper, {childList: true, subtree: true});
-
-    this.setTotalContentSize();
-  }
-
-  detach(): void {
-    this.index$.complete();
-    this.dataStreamSubscription?.unsubscribe();
-    this.mutationObserver?.disconnect();
-    delete this.viewport;
-  }
-
-  private getHeight(item: unknown, group: unknown) {
-    return (
-      this.heights.get(item) ||
-      this.groupHeights.get(group) ||
-      this.approximateGroupSizes.get(group) ||
-      this.approximateItemHeight
-    );
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private set items(value: readonly unknown[]) {
-    const trackBy = this.virtualForOf?.cdkVirtualForTrackBy;
-    const tracks = value.map((it, i) => (trackBy ? trackBy(i, it) : it));
-    if (
-      this._items &&
-      tracks.length === this._items.length &&
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      tracks.every((it, i) => it === this._items![i])
-    )
-      return;
-
-    this._items = tracks;
-    this._groups = value.map(this.trackGroupBy);
-    this.currentLength = tracks.length;
-
-    this.updateHeights();
-  }
-
-  scrolledIndexChange = this.index$.pipe(distinctUntilChanged());
-
-  private getOffsetFromIndex(index: number): number {
-    return this.offsets[index];
-  }
-
-  private getIndexFromOffset(offset: number): number {
-    return Math.max(
-      0,
-      this.offsets.findIndex((it, i, array) => it >= offset || i === array.length - 1),
-    );
-  }
-
-  private updateHeights() {
-    if (!this._items) return;
-    const heights = this._items.map((it, i) => this.getHeight(it, this._groups![i]) + this.gap);
-    this.offsets = Array.from({length: heights.length}, () => 0);
-    this.totalHeight = heights.reduce((a, b, index) => (this.offsets[index + 1] = a + b), 0) + this.gap;
-
-    this.setTotalContentSize();
-    this.updateRenderedRange();
-  }
-
-  private updateRenderedRange() {
-    if (!this.viewport) return;
-    const offset = this.viewport.measureScrollOffset('top');
-    const viewportSize = this.viewport.getViewportSize();
-    const firstVisibleIndex = Math.max(0, this.getIndexFromOffset(offset) - 1);
-    const range = {
-      start: this.getIndexFromOffset(Math.max(0, offset - this.buffer)),
-      end: this.getIndexFromOffset(offset + viewportSize + this.buffer),
-    };
-    const {start, end} = this.viewport.getRenderedRange();
-    if (range.start === start && range.end === end) return;
-
-    if (this.currentLength !== 0 && range.end === this.currentLength) {
-      this.currentLength++;
-      this.loadMore.next();
-    }
-
-    this.viewport.setRenderedRange(range);
-    this.viewport.setRenderedContentOffset(this.getOffsetFromIndex(range.start), 'to-start');
-
-    this.index$.next(firstVisibleIndex);
-  }
-
-  private setTotalContentSize() {
-    this.viewport?.setTotalContentSize(this.totalHeight);
-    // @ts-expect-error TODO
-    this.viewport?._measureViewportSize();
-  }
-
-  observeIntersection(entries: IntersectionObserverEntry[], observer: IntersectionObserver) {
-    const renderedItems = this.renderedItems;
-    if (!renderedItems) return this.onPrematureDisconnect();
-
-    const update = new Subject<void>();
-    for (const entry of entries) {
-      if (!entry.isIntersecting) continue;
-
-      const outerNode = entry.target as HTMLElement;
-      const [item] = this.getItemByNode(outerNode, renderedItems);
-      const node = outerNode.firstChild! as HTMLElement;
-
-      const height = new BehaviorSubject(node.offsetHeight);
-      const resizeObserver = new ResizeObserver(() => {
-        const renderedItems = this.renderedItems;
-        if (!renderedItems) {
-          resizeObserver.disconnect();
-          return this.onPrematureDisconnect();
-        }
-        const [newItem] = this.getItemByNode(node, renderedItems);
-        if (newItem !== item) {
-          this.heights.delete(item);
-          resizeObserver.disconnect();
-          return;
-        }
-        height.next(node.offsetHeight);
-      });
-      resizeObserver.observe(node);
-      height
-        .pipe(
-          distinctUntilChanged(),
-          debounceTime(this.heightSetDebounceTime),
-          takeUntil(timer(this.itemRenderTimeout)),
-          tap({complete: () => resizeObserver.disconnect()}),
-        )
-        .subscribe(height => {
-          this.heights.set(item, height);
-          outerNode.style.height = `${height}px`;
-          update.next();
-        });
-
-      observer.unobserve(node);
-    }
-    update
-      .pipe(debounceTime(this.heightUpdateDebounceTime), takeUntil(timer(this.itemRenderTimeout)))
-      .subscribe(() => {
-        this.updateHeights();
-      });
-  }
-
-  intersectionObserver?: IntersectionObserver;
-
-  get contentWrapper() {
-    return this.viewport?._contentWrapper.nativeElement;
-  }
-
-  get renderedItems() {
-    const contentWrapper = this.contentWrapper;
-    return contentWrapper
-      ? // eslint-disable-next-line unicorn/prefer-spread
-        (Array.from(contentWrapper.children).filter(it => it instanceof HTMLElement) as HTMLElement[])
-      : undefined;
-  }
-
-  getItemByNode(node: HTMLElement, renderedItems: HTMLElement[]) {
-    const {start} = this.viewport!.getRenderedRange();
-    const index = renderedItems.indexOf(node) + start;
-    return [this._items![index], this._groups![index]];
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onContentRendered(): void {}
-
-  onContentScrolled() {
-    this.updateRenderedRange();
-  }
-
-  onPrematureDisconnect() {
-    console.warn('Virtual Scroll strategy was disconnected unexpectedly', new Error('foo').stack);
-  }
-
-  onDataLengthChanged(): void {
-    this.setTotalContentSize();
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onRenderedOffsetChanged(): void {}
-
-  scrollToIndex(index: number, behavior: ScrollBehavior): void {
-    this.viewport?.scrollToOffset(this.getOffsetFromIndex(index), behavior);
-  }
-}

frontend/app/src/app/modules/data/list/search-page.component.ts

@@ -13,9 +13,24 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {Component, DestroyRef, inject, Input, OnInit} from '@angular/core';
-import {ActivatedRoute, Router} from '@angular/router';
+import {ActivatedRoute, Router, RouterLink} from '@angular/router';
 import {Keyboard} from '@capacitor/keyboard';
-import {AlertController, AnimationBuilder, AnimationController} from '@ionic/angular/standalone';
+import {
+  AlertController,
+  AnimationBuilder,
+  AnimationController,
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonLabel,
+  IonMenuButton,
+  IonSearchbar,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 import {Capacitor} from '@capacitor/core';
 import {
   SCFacet,
@@ -36,6 +51,12 @@ import {PositionService} from '../../map/position.service';
 import {ConfigProvider} from '../../config/config.provider';
 import {searchPageSwitchAnimation} from './search-page-switch-animation';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {ContextMenuComponent} from '../../menu/context/context-menu.component';
+import {TranslateModule} from '@ngx-translate/core';
+import {FormsModule} from '@angular/forms';
+import {SearchbarAutofocusDirective} from '../../../util/searchbar-autofocus.directive';
+import {DataListComponent} from './data-list.component';
+import {AsyncPipe} from '@angular/common';
 
 /**
  * SearchPageComponent queries things and shows list of things as search results and filter as context menu
@@ -43,8 +64,29 @@ import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 @Component({
   selector: 'stapps-search-page',
   templateUrl: 'search-page.html',
-  styleUrls: ['search-page.scss'],
+  styleUrl: 'search-page.scss',
   providers: [ContextMenuService],
+  standalone: true,
+  imports: [
+    ContextMenuComponent,
+    IonHeader,
+    IonToolbar,
+    IonButtons,
+    IonBackButton,
+    IonTitle,
+    TranslateModule,
+    IonSearchbar,
+    FormsModule,
+    SearchbarAutofocusDirective,
+    IonMenuButton,
+    IonIcon,
+    IonButton,
+    RouterLink,
+    IonContent,
+    IonLabel,
+    DataListComponent,
+    AsyncPipe,
+  ],
 })
 export class SearchPageComponent implements OnInit {
   @Input() title = 'search.title';
@@ -146,19 +188,6 @@ export class SearchPageComponent implements OnInit {
 
   routeAnimation: AnimationBuilder;
 
-  /**
-   * Injects the providers and creates subscriptions
-   * @param alertController AlertController
-   * @param dataProvider DataProvider
-   * @param contextMenuService ContextMenuService
-   * @param settingsProvider SettingsProvider
-   * @param logger An angular logger
-   * @param dataRoutingService DataRoutingService
-   * @param router Router
-   * @param route ActivatedRoute
-   * @param positionService PositionService
-   * @param configProvider ConfigProvider
-   */
   constructor(
     protected readonly alertController: AlertController,
     protected dataProvider: DataProvider,

frontend/app/src/app/modules/data/list/search-page.html

@@ -15,12 +15,14 @@
 
 <stapps-context contentId="data-list"></stapps-context>
 <ion-header>
-  <ion-toolbar color="primary" mode="ios" *ngIf="showDrawer && showTopToolbar">
-    <ion-buttons slot="start">
-      <ion-back-button [defaultHref]="backUrl"></ion-back-button>
-    </ion-buttons>
-    <ion-title>{{ title | translate }}</ion-title>
-  </ion-toolbar>
+  @if (showDrawer && showTopToolbar) {
+    <ion-toolbar color="primary" mode="ios">
+      <ion-buttons slot="start">
+        <ion-back-button [defaultHref]="backUrl"></ion-back-button>
+      </ion-buttons>
+      <ion-title>{{ title | translate }}</ion-title>
+    </ion-toolbar>
+  }
   <ion-toolbar color="primary">
     <ion-searchbar
       (ngModelChange)="searchStringChanged($event)"
@@ -40,19 +42,21 @@
       </ion-menu-button>
     </ion-searchbar>
   </ion-toolbar>
-  <ion-toolbar color="primary" class="category-tab" *ngIf="showNavigation && isHebisAvailable">
-    <ion-buttons class="ion-justify-content-between">
-      <ion-button class="button-active" size="large">{{ 'search.type' | translate }}</ion-button>
-      <ion-button
-        [routerLink]="['/hebis-search']"
-        queryParamsHandling="merge"
-        [routerAnimation]="routeAnimation"
-        fill="outline"
-        size="large"
-        >{{ 'hebisSearch.type' | translate }}
-      </ion-button>
-    </ion-buttons>
-  </ion-toolbar>
+  @if (showNavigation && isHebisAvailable) {
+    <ion-toolbar color="primary" class="category-tab">
+      <ion-buttons class="ion-justify-content-between">
+        <ion-button class="button-active" size="large">{{ 'search.type' | translate }}</ion-button>
+        <ion-button
+          [routerLink]="['/hebis-search']"
+          queryParamsHandling="merge"
+          [routerAnimation]="routeAnimation"
+          fill="outline"
+          size="large"
+          >{{ 'hebisSearch.type' | translate }}
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+  }
 </ion-header>
 
 <ion-content class="content">

frontend/app/src/app/modules/data/list/search-provider.ts

@@ -1,22 +0,0 @@
-/*
- * Copyright (C) 2022 StApps
- * This program is free software: you can redistribute it and/or modify it
- * under the terms of the GNU General Public License as published by the Free
- * Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
- * more details.
- *
- * You should have received a copy of the GNU General Public License along with
- * this program. If not, see <https://www.gnu.org/licenses/>.
- */
-
-import {SCThings} from '@openstapps/core';
-
-export abstract class SearchProvider {
-  abstract fetchAndUpdateItems(append: boolean): Promise<void> | void;
-
-  abstract route(item: SCThings): Promise<void> | void;
-}

frontend/app/src/app/modules/data/list/simple-data-list.component.ts

@@ -12,12 +12,25 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, ContentChild, DestroyRef, inject, Input, OnInit, TemplateRef} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  DestroyRef,
+  inject,
+  Input,
+  OnInit,
+  TemplateRef,
+} from '@angular/core';
 import {SCThings} from '@openstapps/core';
 import {Router} from '@angular/router';
 import {DataRoutingService} from '../data-routing.service';
 import {DataListContext} from './data-list.component';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {AsyncPipe, NgTemplateOutlet} from '@angular/common';
+import {IonLabel, IonList, IonListHeader, IonText} from '@ionic/angular/standalone';
+import {SkeletonListItemComponent} from '../elements/skeleton-list-item.component';
+import {DataListItemComponent} from './data-list-item.component';
 
 /**
  * Shows the list of items
@@ -25,7 +38,19 @@ import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 @Component({
   selector: 'stapps-simple-data-list',
   templateUrl: 'simple-data-list.html',
-  styleUrls: ['simple-data-list.scss'],
+  styleUrl: 'simple-data-list.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    AsyncPipe,
+    IonList,
+    IonLabel,
+    SkeletonListItemComponent,
+    IonListHeader,
+    IonText,
+    DataListItemComponent,
+    NgTemplateOutlet,
+  ],
 })
 export class SimpleDataListComponent implements OnInit {
   @Input() items?: Promise<SCThings[] | undefined>;

frontend/app/src/app/modules/data/list/simple-data-list.html

@@ -13,35 +13,32 @@
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
-<ng-container *ngIf="items | async as items; else loading">
+@if (items | async; as items) {
   <ion-list>
-    <ng-container *ngIf="!listHeader; else header"></ng-container>
-    <ng-container *ngFor="let item of items">
+    @if (listHeader) {
+      <ion-list-header lines="inset">
+        <ion-text color="dark">
+          <h3>{{ listHeader }}</h3>
+        </ion-text>
+      </ion-list-header>
+    }
+    @for (item of items; track $index) {
       <ng-container
         *ngTemplateOutlet="listItemTemplateRef || defaultListItem; context: {$implicit: item}"
       ></ng-container>
-    </ng-container>
+    } @empty {
+      @if (emptyListMessage) {
+        <ion-label class="empty-list-message">{{ emptyListMessage }}</ion-label>
+      }
+    }
   </ion-list>
-  <ion-label class="empty-list-message" *ngIf="emptyListMessage && items.length === 0">{{
-    emptyListMessage
-  }}</ion-label>
-</ng-container>
-<ng-template #loading>
+} @else {
   <ion-list>
-    <stapps-skeleton-list-item
-      [hideThumbnail]="singleType"
-      *ngFor="let skeleton of [].constructor(skeletonItems)"
-    >
-    </stapps-skeleton-list-item>
+    @for (skeleton of [].constructor(skeletonItems); track $index) {
+      <stapps-skeleton-list-item [hideThumbnail]="singleType"> </stapps-skeleton-list-item>
+    }
   </ion-list>
-</ng-template>
-<ng-template #header>
-  <ion-list-header lines="inset">
-    <ion-text color="dark">
-      <h3>{{ listHeader }}</h3>
-    </ion-text>
-  </ion-list-header>
-</ng-template>
+}
 <ng-template let-item #defaultListItem>
   <stapps-data-list-item [item]="item" [hideThumbnail]="singleType"></stapps-data-list-item>
 </ng-template>

frontend/app/src/app/modules/data/list/skeleton-list.component.ts

@@ -13,11 +13,13 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 
 @Component({
   selector: 'skeleton-list',
   templateUrl: 'skeleton-list.html',
-  styleUrls: ['skeleton-list.scss'],
+  styleUrl: 'skeleton-list.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class SkeletonListComponent {}

frontend/app/src/app/modules/data/list/tree-list-fragment.component.ts

@@ -12,15 +12,21 @@
  *  You should have received a copy of the GNU General Public License along with
  *  this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, Input, TemplateRef} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input, TemplateRef} from '@angular/core';
 import {SCThings, SCThingWithoutReferences, SCUuid} from '@openstapps/core';
 import type {Tree} from '@openstapps/collection-utils';
 import {DataListContext} from './data-list.component';
+import {IonAccordion, IonAccordionGroup, IonList} from '@ionic/angular/standalone';
+import {DataListItemComponent} from './data-list-item.component';
+import {NgTemplateOutlet} from '@angular/common';
 
 @Component({
   selector: 'tree-list-fragment',
   templateUrl: 'tree-list-fragment.html',
   styleUrls: ['tree-list-fragment.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [IonAccordionGroup, IonAccordion, IonList, DataListItemComponent, NgTemplateOutlet],
 })
 export class TreeListFragmentComponent {
   entries?: [string, Tree<SCThings>][];

frontend/app/src/app/modules/data/list/tree-list-fragment.html

@@ -13,28 +13,35 @@
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
-<ion-accordion-group *ngIf="entries as entries" [readonly]="true" [value]="entries" [multiple]="true">
-  <ion-accordion *ngFor="let entry of entries" [value]="entry">
-    <div *ngIf="groupMap[entry[0]] as header" slot="header" class="tree-indicator">
-      <ng-container
-        *ngTemplateOutlet="listItemTemplateRef || defaultListItem; context: {$implicit: header}"
-      ></ng-container>
-    </div>
-    <ion-list slot="content" lines="none">
-      <div *ngFor="let item of entry[1]._ || []" class="tree-indicator">
-        <ng-container
-          *ngTemplateOutlet="listItemTemplateRef || defaultListItem; context: {$implicit: item}"
-        ></ng-container>
-      </div>
-      <tree-list-fragment
-        [groupMap]="groupMap"
-        [items]="entry[1]"
-        [singleType]="singleType"
-        [listItemTemplateRef]="listItemTemplateRef"
-      ></tree-list-fragment>
-    </ion-list>
-  </ion-accordion>
-</ion-accordion-group>
+@if (entries; as entries) {
+  <ion-accordion-group [readonly]="true" [value]="entries" [multiple]="true">
+    @for (entry of entries; track $index) {
+      <ion-accordion [value]="entry">
+        @if (groupMap[entry[0]]; as header) {
+          <div
+            slot="header"
+            class="tree-indicator"
+            *ngTemplateOutlet="listItemTemplateRef || defaultListItem; context: {$implicit: header}"
+          ></div>
+        }
+        <ion-list slot="content" lines="none">
+          @for (item of entry[1]._ || []; track $index) {
+            <div
+              class="tree-indicator"
+              *ngTemplateOutlet="listItemTemplateRef || defaultListItem; context: {$implicit: item}"
+            ></div>
+          }
+          <tree-list-fragment
+            [groupMap]="groupMap"
+            [items]="entry[1]"
+            [singleType]="singleType"
+            [listItemTemplateRef]="listItemTemplateRef"
+          ></tree-list-fragment>
+        </ion-list>
+      </ion-accordion>
+    }
+  </ion-accordion-group>
+}
 
 <ng-template let-item #defaultListItem>
   <stapps-data-list-item [item]="item" [hideThumbnail]="singleType"></stapps-data-list-item>

frontend/app/src/app/modules/data/list/tree-list.component.ts

@@ -12,15 +12,20 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, ContentChild, Input, TemplateRef} from '@angular/core';
+import {ChangeDetectionStrategy, Component, ContentChild, Input, TemplateRef} from '@angular/core';
 import {DataListContext} from './data-list.component';
 import {SCThings, SCThingWithoutReferences, SCUuid} from '@openstapps/core';
 import {Tree, treeGroupBy} from '@openstapps/collection-utils';
+import {AsyncPipe} from '@angular/common';
+import {TreeListFragmentComponent} from './tree-list-fragment.component';
 
 @Component({
   selector: 'tree-list',
   templateUrl: 'tree-list.html',
-  styleUrls: ['tree-list.scss'],
+  styleUrl: 'tree-list.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [AsyncPipe, TreeListFragmentComponent],
 })
 export class TreeListComponent {
   _items?: Promise<SCThings[] | undefined>;

frontend/app/src/app/modules/data/list/tree-list.html

@@ -13,10 +13,11 @@
   ~  this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
-<tree-list-fragment
-  *ngIf="_groups | async as groups"
-  [items]="groups"
-  [groupMap]="_groupItems"
-  [singleType]="singleType"
-  [listItemTemplateRef]="listItemTemplateRef"
-></tree-list-fragment>
+@if (_groups | async; as groups) {
+  <tree-list-fragment
+    [items]="groups"
+    [groupMap]="_groupItems"
+    [singleType]="singleType"
+    [listItemTemplateRef]="listItemTemplateRef"
+  ></tree-list-fragment>
+}

frontend/app/src/app/modules/data/types/article/article-content.component.ts

@@ -14,19 +14,31 @@
  */
 import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {SCArticle} from '@openstapps/core';
+import {IonCard, IonCardContent, IonCardHeader, IonChip, IonLabel} from '@ionic/angular/standalone';
+import {ExternalLinkComponent} from '../../elements/external-link.component';
+import {ThingTranslateModule} from '../../../../translation/thing-translate.module';
+import {TranslateModule} from '@ngx-translate/core';
+import {SimpleCardComponent} from '../../elements/simple-card.component';
+import {DataIconPipe} from '../../data-icon.pipe';
 
-/**
- * TODO
- */
 @Component({
   selector: 'stapps-article-content',
   templateUrl: 'article-content.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
+  imports: [
+    IonCard,
+    IonCardHeader,
+    IonCardContent,
+    ExternalLinkComponent,
+    ThingTranslateModule,
+    TranslateModule,
+    SimpleCardComponent,
+    IonLabel,
+    IonChip,
+    DataIconPipe,
+  ],
 })
 export class ArticleContentComponent {
-  /**
-   * TODO
-   */
   @Input() item: SCArticle;
 }

frontend/app/src/app/modules/data/types/article/article-content.html

@@ -12,81 +12,101 @@
   ~ You should have received a copy of the GNU General Public License along with
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
+@if (item.sameAs) {
+  <ion-card>
+    <ion-card-header>{{ 'hebisSearch.detail.title' | translate | sentencecase }}</ion-card-header>
+    <ion-card-content>
+      <stapps-external-link
+        [text]="'name' | thingTranslate: item"
+        [link]="item.sameAs"
+      ></stapps-external-link>
+    </ion-card-content>
+  </ion-card>
+} @else {
+  <stapps-simple-card
+    [title]="'name' | propertyNameTranslate: item | sentencecase"
+    [content]="'name' | thingTranslate: item"
+  >
+  </stapps-simple-card>
+}
 
-<ion-card *ngIf="item.sameAs">
-  <ion-card-header>{{ 'hebisSearch.detail.title' | translate | sentencecase }}</ion-card-header>
-  <ion-card-content>
-    <stapps-external-link [text]="'name' | thingTranslate: item" [link]="item.sameAs"></stapps-external-link>
-  </ion-card-content>
-</ion-card>
+@if (item.description) {
+  <stapps-simple-card
+    [title]="'hebisSearch.detail.description' | translate | sentencecase"
+    [content]="item.description"
+  ></stapps-simple-card>
+}
 
-<stapps-simple-card
-  *ngIf="!item.sameAs"
-  [title]="'name' | propertyNameTranslate: item | sentencecase"
-  [content]="'name' | thingTranslate: item"
->
-</stapps-simple-card>
+@if (item.sourceOrganization) {
+  <stapps-simple-card
+    [title]="'sourceOrganization' | propertyNameTranslate: item | sentencecase"
+    [content]="item.sourceOrganization"
+  ></stapps-simple-card>
+}
 
-<stapps-simple-card
-  *ngIf="item.description"
-  [title]="'hebisSearch.detail.description' | translate | sentencecase"
-  [content]="item.description"
-></stapps-simple-card>
+@if (item.authors && item.authors.length > 0) {
+  <ion-card>
+    <ion-card-header>{{ 'authors' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
+    <ion-card-content>
+      @for (author of item.authors; track $index) {
+        <ion-label>{{ 'name' | thingTranslate: author }}</ion-label>
+      }
+    </ion-card-content>
+  </ion-card>
+}
 
-<stapps-simple-card
-  *ngIf="item.sourceOrganization"
-  [title]="'sourceOrganization' | propertyNameTranslate: item | sentencecase"
-  [content]="item.sourceOrganization"
-></stapps-simple-card>
+@if (item.firstPublished && !item.lastPublished) {
+  <stapps-simple-card
+    [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
+    [content]="item.firstPublished"
+  >
+  </stapps-simple-card>
+}
 
-<ion-card *ngIf="item.authors && item.authors.length > 0">
-  <ion-card-header>{{ 'authors' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
-  <ion-card-content>
-    <ion-label *ngFor="let author of item.authors">{{ 'name' | thingTranslate: author }}</ion-label>
-  </ion-card-content>
-</ion-card>
+@if (item.firstPublished && item.lastPublished) {
+  <stapps-simple-card
+    [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
+    [content]="[item.firstPublished, item.lastPublished] | join: ' - '"
+  >
+  </stapps-simple-card>
+}
 
-<stapps-simple-card
-  *ngIf="item.firstPublished && !item.lastPublished"
-  [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
-  [content]="item.firstPublished"
->
-</stapps-simple-card>
+@if (item.publications) {
+  <ion-card>
+    <ion-card-header>{{ 'publications' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
+    <ion-card-content>
+      @for (publication of item.publications; track $index) {
+        <p>
+          {{ publication.locations | join: ', ' }}
+          {{ publication.locations && publication.publisher ? ':' : '' }} {{ publication.publisher }}
+        </p>
+      }
+    </ion-card-content>
+  </ion-card>
+}
 
-<stapps-simple-card
-  *ngIf="item.firstPublished && item.lastPublished"
-  [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
-  [content]="[item.firstPublished, item.lastPublished] | join: ' - '"
->
-</stapps-simple-card>
+@if (item.reference) {
+  <stapps-simple-card
+    [title]="'reference' | propertyNameTranslate: item | sentencecase"
+    [content]="item.reference"
+  ></stapps-simple-card>
+}
 
-<ion-card *ngIf="item.publications">
-  <ion-card-header>{{ 'publications' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
-  <ion-card-content>
-    <p *ngFor="let publication of item.publications">
-      {{ publication.locations | join: ', ' }}
-      {{ publication.locations && publication.publisher ? ':' : '' }} {{ publication.publisher }}
-    </p>
-  </ion-card-content>
-</ion-card>
+@if (item.isPartOf) {
+  <stapps-simple-card
+    [title]="'isPartOf' | propertyNameTranslate: item | sentencecase"
+    [content]="item.isPartOf.name"
+  ></stapps-simple-card>
+}
 
-<stapps-simple-card
-  *ngIf="item.reference"
-  [title]="'reference' | propertyNameTranslate: item | sentencecase"
-  [content]="item.reference"
-></stapps-simple-card>
-
-<stapps-simple-card
-  *ngIf="item.isPartOf"
-  [title]="'isPartOf' | propertyNameTranslate: item | sentencecase"
-  [content]="item.isPartOf.name"
-></stapps-simple-card>
-<ion-card *ngIf="item.categories">
-  <ion-card-header>{{ 'categories' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
-  <ion-card-content>
-    <ion-chip [color]="'primary'">
-      <ion-icon [name]="item.type | dataIcon"></ion-icon>
-      <ion-label>{{ 'categories' | thingTranslate: item }}</ion-label>
-    </ion-chip>
-  </ion-card-content>
-</ion-card>
+@if (item.categories) {
+  <ion-card>
+    <ion-card-header>{{ 'categories' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
+    <ion-card-content>
+      <ion-chip [color]="'primary'">
+        <ion-icon [name]="item.type | dataIcon"></ion-icon>
+        <ion-label>{{ 'categories' | thingTranslate: item }}</ion-label>
+      </ion-chip>
+    </ion-card-content>
+  </ion-card>
+}

frontend/app/src/app/modules/data/types/article/article-item.component.ts

@@ -14,19 +14,16 @@
  */
 import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {SCArticle} from '@openstapps/core';
+import {IonCol, IonGrid, IonNote, IonRow} from '@ionic/angular/standalone';
+import {ThingTranslateModule} from '../../../../translation/thing-translate.module';
 
-/**
- * TODO
- */
 @Component({
   selector: 'stapps-article-item',
   templateUrl: 'article-list-item.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
+  imports: [IonGrid, IonRow, IonCol, ThingTranslateModule, IonNote],
 })
 export class ArticleListItemComponent {
-  /**
-   * TODO
-   */
   @Input() item: SCArticle;
 }

frontend/app/src/app/modules/data/types/article/article-list-item.html

@@ -18,16 +18,17 @@
     <ion-col>
       <h2 class="name">{{ 'name' | thingTranslate: item }}</h2>
       <p>
-        <ng-container *ngFor="let author of item.authors"> {{ 'name' | thingTranslate: author }}</ng-container
-        ><ng-container *ngIf="item.authors && item.authors && item.firstPublished">,&nbsp;</ng-container>
-        <ng-container *ngIf="item.firstPublished && !item.lastPublished; else dateRange">{{
-          item.firstPublished
-        }}</ng-container
-        ><ng-template #dateRange
-          ><ng-container *ngIf="item.firstPublished && item.lastPublished">{{
-            [item.firstPublished, item.lastPublished] | join: ' - '
-          }}</ng-container></ng-template
-        >
+        @for (author of item.authors; track $index) {
+          {{ 'name' | thingTranslate: author }}
+        }
+        @if (item.authors && item.firstPublished) {
+          ,&nbsp;
+        }
+        @if (item.firstPublished && !item.lastPublished) {
+          {{ item.firstPublished }}
+        } @else if (item.firstPublished && item.lastPublished) {
+          {{ [item.firstPublished, item.lastPublished] | join: ' - ' }}
+        }
       </p>
       <ion-note> {{ 'categories' | thingTranslate: item }} </ion-note>
     </ion-col>

frontend/app/src/app/modules/data/types/book/book-detail-content.component.ts

@@ -14,19 +14,31 @@
  */
 import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {SCBook} from '@openstapps/core';
+import {IonCard, IonCardContent, IonCardHeader, IonChip, IonLabel} from '@ionic/angular/standalone';
+import {ExternalLinkComponent} from '../../elements/external-link.component';
+import {TranslateModule} from '@ngx-translate/core';
+import {ThingTranslateModule} from '../../../../translation/thing-translate.module';
+import {SimpleCardComponent} from '../../elements/simple-card.component';
+import {DataIconPipe} from '../../data-icon.pipe';
 
-/**
- * TODO
- */
 @Component({
   selector: 'stapps-book-detail-content',
   templateUrl: 'book-detail-content.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
+  imports: [
+    IonCard,
+    IonCardHeader,
+    IonCardContent,
+    ExternalLinkComponent,
+    TranslateModule,
+    ThingTranslateModule,
+    SimpleCardComponent,
+    IonChip,
+    IonLabel,
+    DataIconPipe,
+  ],
 })
 export class BookDetailContentComponent {
-  /**
-   * TODO
-   */
   @Input() item: SCBook;
 }

frontend/app/src/app/modules/data/types/book/book-detail-content.html

@@ -12,80 +12,100 @@
   ~ You should have received a copy of the GNU General Public License along with
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
+@if (item.sameAs) {
+  <ion-card>
+    <ion-card-header>{{ 'hebisSearch.detail.title' | translate | sentencecase }}</ion-card-header>
+    <ion-card-content>
+      <stapps-external-link
+        [text]="'name' | thingTranslate: item"
+        [link]="item.sameAs"
+      ></stapps-external-link>
+    </ion-card-content>
+  </ion-card>
+} @else {
+  <stapps-simple-card
+    [title]="'name' | propertyNameTranslate: item | sentencecase"
+    [content]="'name' | thingTranslate: item"
+  >
+  </stapps-simple-card>
+}
 
-<ion-card *ngIf="item.sameAs">
-  <ion-card-header>{{ 'hebisSearch.detail.title' | translate | sentencecase }}</ion-card-header>
-  <ion-card-content>
-    <stapps-external-link [text]="'name' | thingTranslate: item" [link]="item.sameAs"></stapps-external-link>
-  </ion-card-content>
-</ion-card>
+@if (item.edition) {
+  <stapps-simple-card
+    [title]="'edition' | propertyNameTranslate: item | sentencecase"
+    [content]="'edition' | thingTranslate: item"
+  >
+  </stapps-simple-card>
+}
 
-<stapps-simple-card
-  *ngIf="!item.sameAs"
-  [title]="'name' | propertyNameTranslate: item | sentencecase"
-  [content]="'name' | thingTranslate: item"
->
-</stapps-simple-card>
+@if (item.description) {
+  <stapps-simple-card
+    [title]="'hebisSearch.detail.description' | translate | sentencecase"
+    [content]="item.description"
+  ></stapps-simple-card>
+}
 
-<stapps-simple-card
-  *ngIf="item.edition"
-  [title]="'edition' | propertyNameTranslate: item | sentencecase"
-  [content]="'edition' | thingTranslate: item"
->
-</stapps-simple-card>
+@if (item.sourceOrganization) {
+  <stapps-simple-card
+    [title]="'sourceOrganization' | propertyNameTranslate: item | sentencecase"
+    [content]="item.sourceOrganization"
+  ></stapps-simple-card>
+}
 
-<stapps-simple-card
-  *ngIf="item.description"
-  [title]="'hebisSearch.detail.description' | translate | sentencecase"
-  [content]="item.description"
-></stapps-simple-card>
+@if (item.authors && item.authors.length > 0) {
+  <ion-card>
+    <ion-card-header>{{ 'authors' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
+    <ion-card-content>
+      @for (author of item.authors; track $index) {
+        <ion-label>{{ 'name' | thingTranslate: author }}</ion-label>
+      }
+    </ion-card-content>
+  </ion-card>
+}
 
-<stapps-simple-card
-  *ngIf="item.sourceOrganization"
-  [title]="'sourceOrganization' | propertyNameTranslate: item | sentencecase"
-  [content]="item.sourceOrganization"
-></stapps-simple-card>
+@if (item.ISBNs) {
+  <stapps-simple-card [title]="'ISBNs' | propertyNameTranslate: item | sentencecase" [content]="item.ISBNs">
+  </stapps-simple-card>
+}
 
-<ion-card *ngIf="item.authors && item.authors.length > 0">
-  <ion-card-header>{{ 'authors' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
-  <ion-card-content>
-    <ion-label *ngFor="let author of item.authors">{{ 'name' | thingTranslate: author }}</ion-label>
-  </ion-card-content>
-</ion-card>
+@if (item.firstPublished && !item.lastPublished) {
+  <stapps-simple-card
+    [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
+    [content]="item.firstPublished"
+  >
+  </stapps-simple-card>
+}
 
-<stapps-simple-card
-  *ngIf="item.ISBNs"
-  [title]="'ISBNs' | propertyNameTranslate: item | sentencecase"
-  [content]="item.ISBNs"
->
-</stapps-simple-card>
-<stapps-simple-card
-  *ngIf="item.firstPublished && !item.lastPublished"
-  [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
-  [content]="item.firstPublished"
->
-</stapps-simple-card>
-<stapps-simple-card
-  *ngIf="item.firstPublished && item.lastPublished"
-  [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
-  [content]="[item.firstPublished, item.lastPublished] | join: ' - '"
->
-</stapps-simple-card>
-<ion-card *ngIf="item.publications">
-  <ion-card-header>{{ 'publications' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
-  <ion-card-content>
-    <p *ngFor="let publication of item.publications">
-      {{ publication.locations | join: ', ' }}
-      {{ publication.locations && publication.publisher ? ':' : '' }} {{ publication.publisher }}
-    </p>
-  </ion-card-content>
-</ion-card>
-<ion-card *ngIf="item.categories">
-  <ion-card-header>{{ 'categories' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
-  <ion-card-content>
-    <ion-chip [color]="'primary'">
-      <ion-icon [name]="item.type | dataIcon"></ion-icon>
-      <ion-label>{{ 'categories' | thingTranslate: item }}</ion-label>
-    </ion-chip>
-  </ion-card-content>
-</ion-card>
+@if (item.firstPublished && item.lastPublished) {
+  <stapps-simple-card
+    [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
+    [content]="[item.firstPublished, item.lastPublished] | join: ' - '"
+  >
+  </stapps-simple-card>
+}
+
+@if (item.publications) {
+  <ion-card>
+    <ion-card-header>{{ 'publications' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
+    <ion-card-content>
+      @for (publication of item.publications; track $index) {
+        <p>
+          {{ publication.locations | join: ', ' }}
+          {{ publication.locations && publication.publisher ? ':' : '' }} {{ publication.publisher }}
+        </p>
+      }
+    </ion-card-content>
+  </ion-card>
+}
+
+@if (item.categories) {
+  <ion-card>
+    <ion-card-header>{{ 'categories' | propertyNameTranslate: item | sentencecase }}</ion-card-header>
+    <ion-card-content>
+      <ion-chip [color]="'primary'">
+        <ion-icon [name]="item.type | dataIcon"></ion-icon>
+        <ion-label>{{ 'categories' | thingTranslate: item }}</ion-label>
+      </ion-chip>
+    </ion-card-content>
+  </ion-card>
+}

frontend/app/src/app/modules/data/types/book/book-list-item.component.ts

@@ -14,19 +14,16 @@
  */
 import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {SCBook} from '@openstapps/core';
+import {IonCol, IonGrid, IonNote, IonRow} from '@ionic/angular/standalone';
+import {ThingTranslateModule} from '../../../../translation/thing-translate.module';
 
-/**
- * TODO
- */
 @Component({
   selector: 'stapps-book-list-item',
   templateUrl: 'book-list-item.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
+  imports: [IonGrid, IonRow, IonCol, ThingTranslateModule, IonNote],
 })
 export class BookListItemComponent {
-  /**
-   * TODO
-   */
   @Input() item: SCBook;
 }

frontend/app/src/app/modules/data/types/book/book-list-item.html

@@ -18,18 +18,19 @@
     <ion-col>
       <h2 class="name">{{ 'name' | thingTranslate: item }}</h2>
       <p>
-        <ng-container *ngFor="let author of item.authors"> {{ 'name' | thingTranslate: author }}</ng-container
-        ><ng-container *ngIf="item.authors && item.authors && item.firstPublished">,&nbsp;</ng-container>
-        <ng-container *ngIf="item.firstPublished && !item.lastPublished; else dateRange">{{
-          item.firstPublished
-        }}</ng-container
-        ><ng-template #dateRange
-          ><ng-container *ngIf="item.firstPublished && item.lastPublished">{{
-            [item.firstPublished, item.lastPublished] | join: ' - '
-          }}</ng-container></ng-template
-        >
+        @for (author of item.authors; track $index) {
+          {{ 'name' | thingTranslate: author }}
+        }
+        @if (item.authors && item.authors && item.firstPublished) {
+          ,&nbsp;
+        }
+        @if (item.firstPublished && !item.lastPublished) {
+          {{ item.firstPublished }}
+        } @else if (item.firstPublished && item.lastPublished) {
+          {{ [item.firstPublished, item.lastPublished] | join: ' - ' }}
+        }
       </p>
-      <ion-note> {{ 'categories' | thingTranslate: item }} </ion-note>
+      <ion-note>{{ 'categories' | thingTranslate: item }}</ion-note>
     </ion-col>
   </ion-row>
 </ion-grid>

frontend/app/src/app/modules/data/types/catalog/catalog-detail-content.component.ts

@@ -15,13 +15,17 @@
 import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
 import {SCCatalog, SCThings} from '@openstapps/core';
 import {DataProvider} from '../../data.provider';
+import {SimpleDataListComponent} from '../../list/simple-data-list.component';
+import {ThingTranslateModule} from '../../../../translation/thing-translate.module';
+import {TitleCasePipe} from '@angular/common';
+import {TranslateModule} from '@ngx-translate/core';
 
 @Component({
   selector: 'stapps-catalog-detail-content',
   templateUrl: 'catalog-detail-content.html',
-  styleUrl: 'catalog-detail-content.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
+  imports: [SimpleDataListComponent, ThingTranslateModule, TitleCasePipe, TranslateModule],
 })
 export class CatalogDetailContentComponent implements OnInit {
   @Input() item: SCCatalog;

frontend/app/src/app/modules/data/types/catalog/catalog-detail-content.html

@@ -14,7 +14,6 @@
   -->
 
 <stapps-simple-data-list
-  id="simple-data-list"
   [items]="items"
   [singleType]="true"
   [listHeader]="'type' | thingTranslate: item | titlecase"

frontend/app/src/app/modules/data/types/catalog/catalog-detail-content.scss

@@ -1,14 +0,0 @@
-/*!
- * Copyright (C) 2023 StApps
- * This program is free software: you can redistribute it and/or modify it
- * under the terms of the GNU General Public License as published by the Free
- * Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
- * more details.
- *
- * You should have received a copy of the GNU General Public License along with
- * this program. If not, see <https://www.gnu.org/licenses/>.
- */

frontend/app/src/app/modules/data/types/catalog/catalog-list-item.component.ts

@@ -18,9 +18,6 @@ import {DataListItemComponent} from '../../list/data-list-item.component';
 import {IonCol, IonGrid, IonLabel, IonRow} from '@ionic/angular/standalone';
 import {ThingTranslateModule} from '../../../../translation/thing-translate.module';
 
-/**
- * TODO
- */
 @Component({
   selector: 'stapps-catalog-list-item',
   templateUrl: 'catalog-list-item.html',
@@ -29,8 +26,5 @@ import {ThingTranslateModule} from '../../../../translation/thing-translate.modu
   imports: [IonGrid, IonRow, IonCol, IonLabel, ThingTranslateModule],
 })
 export class CatalogListItemComponent extends DataListItemComponent {
-  /**
-   * TODO
-   */
   @Input() item: SCCatalog;
 }

frontend/app/src/app/modules/data/types/date-series/date-series-detail-content.component.ts

@@ -26,6 +26,9 @@ import {TranslateModule} from '@ngx-translate/core';
 import {ThingTranslateModule} from '../../../../translation/thing-translate.module';
 import {MomentModule} from 'ngx-moment';
 import {MapWidgetComponent} from '../../../map/widget/map-widget.component';
+import {SimpleCardComponent} from '../../elements/simple-card.component';
+import {DataListItemComponent} from '../../list/data-list-item.component';
+import {OffersDetailComponent} from '../../elements/offers-detail.component';
 
 @Component({
   selector: 'stapps-date-series-detail-content',
@@ -45,6 +48,9 @@ import {MapWidgetComponent} from '../../../map/widget/map-widget.component';
     IonCardHeader,
     IonCardContent,
     IonCard,
+    SimpleCardComponent,
+    DataListItemComponent,
+    OffersDetailComponent,
   ],
 })
 export class DateSeriesDetailContentComponent implements OnInit {

frontend/app/src/app/modules/data/types/date-series/date-series-detail-content.html

@@ -12,57 +12,67 @@
   ~ You should have received a copy of the GNU General Public License along with
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
-<ng-container *ngIf="isInCalendar | async; else add">
+@if (isInCalendar | async) {
   <ion-chip outline="true" color="success" (click)="removeFromCalendar()">
     <ion-icon name="event_available" fill="true"></ion-icon>
     <ion-label>{{ 'chips.addEvent.addedToEvents' | translate }}</ion-label>
   </ion-chip>
-</ng-container>
-<ng-template #add>
+} @else {
   <ion-chip outline="true" color="primary" (click)="addToCalendar()">
     <ion-icon name="calendar_today"></ion-icon>
     <ion-label>{{ 'chips.addEvent.addEvent' | translate }}</ion-label>
   </ion-chip>
-</ng-template>
+}
 <stapps-simple-card
-  title="{{ 'duration' | propertyNameTranslate: item | titlecase }}"
+  title="{{ $any('duration' | propertyNameTranslate: item) | titlecase }}"
   [content]="[item.duration | amDuration: 'minutes']"
 ></stapps-simple-card>
-<stapps-simple-card
-  *ngIf="item.dates.length > 1; else single_event"
-  title="{{ 'dates' | propertyNameTranslate: item | titlecase }}"
-  content="{{ 'data.chips.add_events.popover.AT' | translate | titlecase }} {{
-    item.dates[0] | amDateFormat: 'HH:mm ddd'
-  }} {{ 'data.chips.add_events.popover.UNTIL' | translate }} {{
-    item.dates[item.dates.length - 1] | amDateFormat: 'll'
-  }}"
-></stapps-simple-card>
-<ng-template #single_event>
+
+@if (item.dates.length > 1) {
   <stapps-simple-card
-    title="{{ 'dates' | propertyNameTranslate: item | titlecase }}"
+    title="{{ $any('dates' | propertyNameTranslate: item) | titlecase }}"
+    content="{{ 'data.chips.add_events.popover.AT' | translate | titlecase }} {{
+      item.dates[0] | amDateFormat: 'HH:mm ddd'
+    }} {{ 'data.chips.add_events.popover.UNTIL' | translate }} {{
+      item.dates[item.dates.length - 1] | amDateFormat: 'll'
+    }}"
+  ></stapps-simple-card>
+} @else {
+  <stapps-simple-card
+    title="{{ $any('dates' | propertyNameTranslate: item) | titlecase }}"
     content="{{ 'data.chips.add_events.popover.AT' | translate | titlecase }} {{
       item.dates[item.dates.length - 1] | amDateFormat: 'll, HH:mm'
     }}"
   ></stapps-simple-card>
-</ng-template>
-<stapps-simple-card
-  *ngIf="item.performers"
-  [title]="'performers' | propertyNameTranslate: item.performers | titlecase"
-  [content]="item.performers"
-></stapps-simple-card>
-<stapps-offers-detail *ngIf="item.offers" [offers]="item.offers"></stapps-offers-detail>
+}
+
+@if (item.performers) {
+  <stapps-simple-card
+    [title]="$any('performers' | propertyNameTranslate: item.performers) | titlecase"
+    [content]="item.performers"
+  ></stapps-simple-card>
+}
+
+@if (item.offers) {
+  <stapps-offers-detail [offers]="item.offers"></stapps-offers-detail>
+}
+
 <ion-card>
-  <ion-card-header> {{ 'event' | propertyNameTranslate: item | titlecase }} </ion-card-header>
+  <ion-card-header> {{ $any('event' | propertyNameTranslate: item) | titlecase }} </ion-card-header>
   <ion-card-content>
     <stapps-data-list-item [item]="$any(item.event)"></stapps-data-list-item>
   </ion-card-content>
 </ion-card>
+
 @if (item.inPlace) {
   <ion-card>
-    <ion-card-header> {{ 'inPlace' | propertyNameTranslate: item | titlecase }} </ion-card-header>
+    <ion-card-header> {{ $any('inPlace' | propertyNameTranslate: item) | titlecase }} </ion-card-header>
     <ion-card-content>
       <stapps-data-list-item [item]="$any(item.inPlace)"></stapps-data-list-item>
     </ion-card-content>
   </ion-card>
 }
-<stapps-map-widget *ngIf="item.inPlace?.geo" [place]="item.inPlace"></stapps-map-widget>
+
+@if (item.inPlace?.geo) {
+  <stapps-map-widget [place]="item.inPlace"></stapps-map-widget>
+}

frontend/app/src/app/modules/data/types/date-series/date-series-list-item.component.ts

@@ -12,17 +12,20 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {SCDateSeries} from '@openstapps/core';
 import {DataListItemComponent} from '../../list/data-list-item.component';
+import {IonCol, IonGrid, IonIcon, IonLabel, IonNote, IonRow} from '@ionic/angular/standalone';
+import {ThingTranslateModule} from '../../../../translation/thing-translate.module';
+import {OffersInListComponent} from '../../elements/offers-in-list.component';
 
-/**
- * TODO
- */
 @Component({
   selector: 'stapps-date-series-list-item',
   templateUrl: 'date-series-list-item.html',
-  styleUrls: ['date-series-list-item.scss'],
+  styleUrl: 'date-series-list-item.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [IonGrid, IonIcon, IonRow, IonCol, IonLabel, ThingTranslateModule, IonNote, OffersInListComponent],
 })
 export class DateSeriesListItemComponent extends DataListItemComponent {
   /**
@@ -30,8 +33,5 @@ export class DateSeriesListItemComponent extends DataListItemComponent {
    */
   @Input() compact = false;
 
-  /**
-   * TODO
-   */
   @Input() item: SCDateSeries;
 }

frontend/app/src/app/modules/data/types/date-series/date-series-list-item.html

@@ -20,23 +20,29 @@
         <ion-label class="title">{{ 'event.name' | thingTranslate: item }}</ion-label>
         <p>
           <ion-icon name="calendar_today"></ion-icon>
-          <span *ngIf="item.dates[0] && item.dates[item.dates.length - 1]">
-            <span *ngIf="item.repeatFrequency">
-              {{ item.repeatFrequency | durationLocalized: true | sentencecase }},
-              {{ item.dates[0] | dateFormat: 'weekday:long' }}
-            </span>
+          @if (item.dates[0] && item.dates.at(-1)) {
             <span>
-              ({{ item.dates[0] | dateFormat }} - {{ item.dates[item.dates.length - 1] | dateFormat }})
+              @if (item.repeatFrequency) {
+                <span>
+                  {{ item.repeatFrequency | durationLocalized: true | sentencecase }},
+                  {{ item.dates[0] | dateFormat: 'weekday:long' }}
+                </span>
+              }
+              <span>
+                ({{ item.dates[0] | dateFormat }} - {{ item.dates[item.dates.length - 1] | dateFormat }})
+              </span>
             </span>
-          </span>
+          }
         </p>
-        <ion-note *ngIf="item.event.type === 'academic event'">{{
-          'categories' | thingTranslate: item.event | join: ', '
-        }}</ion-note>
+        @if (item.event.type === 'academic event') {
+          <ion-note>{{ 'categories' | thingTranslate: item.event | join: ', ' }}</ion-note>
+        }
       </div>
     </ion-col>
     <ion-col width-20 text-right>
-      <stapps-offers-in-list *ngIf="item.offers" [offers]="item.offers"></stapps-offers-in-list>
+      @if (item.offers) {
+        <stapps-offers-in-list [offers]="item.offers"></stapps-offers-in-list>
+      }
     </ion-col>
   </ion-row>
 </ion-grid>

frontend/app/src/app/modules/menu/context/context-menu.service.ts

@@ -30,9 +30,7 @@ import {transformFacets} from './facet-filter';
 /**
  * ContextMenuService provides bidirectional communication of context menu options and search queries
  */
-@Injectable({
-  providedIn: 'root',
-})
+@Injectable()
 export class ContextMenuService {
   /**
    * Local filter context object