feat: upgrade to Angular 16.1

2026-10-03 16:22:05 +00:00 · 2023-08-02 17:59:20 +02:00
parent df37c6c185
commit 23481d0d73
109 changed files with 2681 additions and 3931 deletions
@@ -15,7 +15,6 @@

 /**
 * Chunk array into smaller arrays of a specified size.
- *
 * @param array The array to chunk.
 * @param chunkSize The size of each chunk.
 */
@@ -19,7 +19,6 @@
 export class AppError extends Error {
  /**
   * TODO
-   *
   * @param name Name of the error
   * @param message Message of the error
   */
@@ -25,13 +25,12 @@ import {SHARED_AXIS_DIRECTIONS} from './material-motion';
 *
 * ```html
 * <div [ngSwitch]='choreographer.state'
- *      [@animation]='choreographer.animationState'
- *      [@animation.done]='choreographer.done()'>
- *      <div *ngSwitchCase='"a"'/>
- *      <div *ngSwitchCase='"b"'/>
+ * [@animation]='choreographer.animationState'
+ * [@animation.done]='choreographer.done()'>
+ * <div *ngSwitchCase='"a"'/>
+ * <div *ngSwitchCase='"b"'/>
 * </div>
 * ```
- *
 * @see {@link https://material.io/design/motion/the-motion-system.html#shared-axis}
 */
 export class SharedAxisChoreographer<T> {
@@ -16,7 +16,6 @@ import {animate, sequence, state, style, transition, trigger} from '@angular/ani

 /**
 * Fade transition
- *
 * @see {@link https://material.io/design/motion/the-motion-system.html#fade}
 */
 export const materialFade = trigger('materialFade', [
@@ -27,7 +26,6 @@ export const materialFade = trigger('materialFade', [

 /**
 * Fade transition
- *
 * @see {@link https://material.io/design/motion/the-motion-system.html#fade}
 */
 export const materialManualFade = trigger('materialManualFade', [
@@ -39,7 +37,6 @@ export const materialManualFade = trigger('materialManualFade', [

 /**
 * Fade through transition
- *
 * @see {@link https://material.io/design/motion/the-motion-system.html#fade-through}
 */
 export const materialFadeThrough = trigger('materialFadeThrough', [
@@ -58,7 +55,6 @@ export const SHARED_AXIS_DIRECTIONS = {
 * Shared axis transition along the X-Axis
 *
 * Needs to be manually choreographed
- *
 * @see {@link https://material.io/design/motion/the-motion-system.html#shared-axis}
 * @see {SharedAxisChoreographer}
 */
@@ -71,7 +71,6 @@ SwiperCore.use([FreeMode, Navigation]);

 /**
 * Initializes data needed on startup
- *
 * @param storageProvider provider of the saved data (using framework's storage)
 * @param logger TODO
 * @param settingsProvider provider of settings (e.g. language that has been set)
@@ -118,7 +117,6 @@ export function initializerFactory(

 /**
 * TODO
- *
 * @param http TODO
 */
 export function createTranslateLoader(http: HttpClient) {
@@ -36,7 +36,7 @@
      </ion-col>
    </ion-row>
  </ion-grid>
-  <ion-item *ngSwitchCase="'router link'" [routerLink]="content.link" fill="clear">
+  <ion-item *ngSwitchCase="'router link'" [routerLink]="content.link">
    <ion-icon *ngIf="content.icon" [name]="content.icon" slot="start"></ion-icon>
    <ion-label>{{ 'title' | translateSimple : content }}</ion-label>
  </ion-item>
@@ -12,7 +12,7 @@
 * 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 '~src/theme/util/mixins';
+@import '../../../../theme/util/mixins';

 ion-text {
  margin-inline: var(--spacing-md);
@@ -122,7 +122,6 @@ export class AuthHelperService {

  /**
   * Ends browser session by opening endSessionEndpoint URL of the provider
-   *
   * @param providerType Type of the provider (e.g. 'default' or 'paia')
   */
  async endBrowserSession(providerType: SCAuthorizationProviderType) {
@@ -47,8 +47,9 @@

  <div class="horizontal-flex">
    <ion-item lines="none">
-      <ion-label>{{ 'schedule.toCalendar.reviewModal.INCLUDE_CANCELLED' | translate }}</ion-label>
-      <ion-checkbox [(ngModel)]="includeCancelled" slot="end"></ion-checkbox>
+      <ion-checkbox [(ngModel)]="includeCancelled"
+        >{{ 'schedule.toCalendar.reviewModal.INCLUDE_CANCELLED' | translate }}</ion-checkbox
+      >
    </ion-item>
  </div>
  <div class="horizontal-flex">
@@ -105,7 +105,6 @@ export class CalendarService {

  /**
   * Emit the calendar index corresponding to the input date.
-   *
   * @param date Moment - date the calendar should go to
   */
  emitGoToDate(date: Moment) {
@@ -111,7 +111,7 @@ export function findRRules(dates: SCISO8601Date[]): Array<RRule | SCISO8601Date>
  for (let i = 0; i < sorted.length; i++) {
    const current = sorted[i];
    const next = sorted[i + 1] as SCISO8601Date | undefined;
-    const element = output[output.length - 1];
+    const element = output.at(-1);

    const units: unitOfTime.Diff[] = element?.freq ? [element.freq] : ['day', 'week', 'month', 'year'];
    const freq = minBy(
@@ -242,7 +242,7 @@ export function iso8601ToICalDate(date: SCISO8601Date): string {
 */
 function stringifyLinebreaks<T extends string | unknown[] | unknown>(value: T): T {
  if (typeof value === 'string') {
-    return value.replace(/\r?\n|\r/g, '\\n') as T;
+    return value.replaceAll(/\r?\n|\r/g, '\\n') as T;
  }
  if (Array.isArray(value)) {
    return value.map(stringifyLinebreaks) as T;
@@ -33,7 +33,6 @@ export class CatalogProvider {
  /**
   * Get news messages
   * TODO: make dates sortable on the backend side and then adjust this method
-   *
   * @param offset TODO
   * @param superCatalog TODO
   * @param semesterUID TODO
@@ -64,7 +64,6 @@ export class ConfigProvider {

  /**
   * Constructor, initialise api client
-   *
   * @param storageProvider StorageProvider to load persistent configuration
   * @param swHttpClient Api client
   * @param logger An angular logger
@@ -90,7 +89,6 @@ export class ConfigProvider {

  /**
   * Returns the value of an app configuration
-   *
   * @param attribute requested attribute from app configuration
   */
  public getValue(attribute: keyof SCAppConfiguration) {
@@ -102,7 +100,6 @@ export class ConfigProvider {

  /**
   * Returns a value of the configuration (not only app configuration)
-   *
   * @param attribute requested attribute from the configuration
   */
  public getAnyValue(attribute: keyof SCIndexResponse) {
@@ -114,7 +111,6 @@ export class ConfigProvider {

  /**
   * Initialises the ConfigProvider
-   *
   * @throws ConfigInitError if no configuration could be loaded.
   * @throws WrongConfigVersionInStorage if fetch failed and saved config has wrong SCVersion
   */
@@ -154,7 +150,6 @@ export class ConfigProvider {

  /**
   * Returns saved configuration from StorageModule
-   *
   * @throws SavedConfigNotAvailable if no configuration could be loaded
   */
  async loadLocal(): Promise<SCIndexResponse> {
@@ -167,7 +162,6 @@ export class ConfigProvider {

  /**
   * Saves the configuration from the provider
-   *
   * @param config configuration to save
   */
  async save(config: SCIndexResponse): Promise<void> {
@@ -176,7 +170,6 @@ export class ConfigProvider {

  /**
   * Sets the configuration in the module and writes it into app storage
-   *
   * @param config SCIndexResponse to set
   */
  async set(config: SCIndexResponse): Promise<void> {
@@ -32,7 +32,6 @@ export class DashboardProvider {

  /**
   * Get news messages
-   *
   * @param size How many messages/news to fetch
   * @param from From which (results) page to start
   * @param filters Additional filters to apply
@@ -13,7 +13,7 @@
 * this program. If not, see <https://www.gnu.org/licenses/>.
 */
 import {ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {ModalController, PopoverController} from '@ionic/angular';
+import {ModalController} from '@ionic/angular';
 import {SCDateSeries} from '@openstapps/core';
 import {
  DateSeriesRelevantData,
@@ -21,7 +21,6 @@ import {
  toDateSeriesRelevantData,
 } from '../../calendar/schedule.provider';
 import {CalendarService} from '../../calendar/calendar.service';
-import {ThingTranslatePipe} from '../../../translation/thing-translate.pipe';
 import {groupBy, groupByProperty} from '../../../_helpers/collections/group-by';
 import {mapValues} from '../../../_helpers/collections/map-values';
 import {stringSortBy} from '../../../_helpers/collections/string-sort';
@@ -59,10 +58,8 @@ export class EditEventSelectionComponent implements OnInit {
  constructor(
    readonly ref: ChangeDetectorRef,
    readonly scheduleProvider: ScheduleProvider,
-    readonly popoverController: PopoverController,
    readonly calendar: CalendarService,
    readonly modalController: ModalController,
-    readonly thingTranslatePipe: ThingTranslatePipe,
  ) {}

  ngOnInit() {
@@ -13,32 +13,35 @@
  ~ this program. If not, see <https://www.gnu.org/licenses/>.
  -->

-<ion-item (click)="modified.emit(); selection.click()" class="list-header" lines="none">
-  <ion-list-header>
-    <ion-label>{{ 'data.chips.add_events.popover.ALL' | translate }}</ion-label>
-  </ion-list-header>
-  <ion-checkbox slot="end" [checked]="selection.checked" [indeterminate]="selection.indeterminate">
+<ion-item class="list-header" lines="none">
+  <ion-checkbox
+    [checked]="selection.checked"
+    [indeterminate]="selection.indeterminate"
+    (ionChange)="modified.emit(); selection.click()"
+  >
+    <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">
  <ion-list inset="true" lines="full">
-    <ion-item lines="none" (click)="modified.emit(); frequency.click()" class="list-header">
-      <ion-list-header>
-        <ion-label
-          >{{ frequency.children[0].item.repeatFrequency ? (frequency.children[0].item.repeatFrequency |
+    <ion-item lines="none" class="list-header">
+      <ion-checkbox
+        [checked]="frequency.checked"
+        [indeterminate]="frequency.indeterminate"
+        (ionChange)="modified.emit(); frequency.click()"
+      >
+        <ion-list-header>
+          {{ frequency.children[0].item.repeatFrequency ? (frequency.children[0].item.repeatFrequency |
          durationLocalized: true | sentencecase) : ('data.chips.add_events.popover.SINGLE' | translate |
-          titlecase) }}</ion-label
-        >
-        <ion-button></ion-button>
-      </ion-list-header>
-      <ion-checkbox slot="end" [checked]="frequency.checked" [indeterminate]="frequency.indeterminate">
+          titlecase) }}
+        </ion-list-header>
      </ion-checkbox>
    </ion-item>
-    <ion-item
-      *ngFor="let date of frequency.children"
-      (click)="modified.emit(); date.selected = !date.selected; frequency.notifyChildChanged()"
-    >
-      <ion-label>
+    <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:
@@ -69,8 +72,7 @@
            <span> {{ 'inPlace.name' | thingTranslate: date.item }}</span>
          </ion-text>
        </ng-container>
-      </ion-label>
-      <ion-checkbox slot="end" [checked]="date.selected"> </ion-checkbox>
+      </ion-checkbox>
    </ion-item>
  </ion-list>
 </ng-container>
@@ -16,17 +16,17 @@
  --padding-start: 0;
  --background: var(--ion-color-primary-shade);

-  > ion-list-header {
-    --color: var(--ion-color-primary-contrast);
-    --background: none;
-  }
-
  > ion-checkbox {
    --background: none;
-    --border-color: rgb(var(--ion-color-primary-contrast-rgb) 0.77);
-    --background-checked: var(--ion-color-primary-contrast);
+    --border-color: var(--ion-color-primary-contrast);
+    --checkbox-background-checked: var(--ion-color-primary-contrast);
    --border-color-checked: var(--ion-color-primary-contrast);
    --checkmark-color: var(--ion-color-primary);
+
+    > ion-list-header {
+      --color: var(--ion-color-primary-contrast);
+      --background: none;
+    }
  }
 }

@@ -27,7 +27,6 @@ export class DataFacetsProvider {
   * Adds buckets to a map of buckets (e.g. if a buckets array is [{foo: 1}, {bar: 3}],
   * its bucketsMap is {foo: 1, bar: 3}), if a field 'bar' is added to it it becomes:
   * {foo: 1, bar: 4}
-   *
   * @param bucketsMap Buckets array transformed into a map
   * @param fields A field that should be added to buckets (its map)
   */
@@ -42,7 +41,6 @@ export class DataFacetsProvider {

  /**
   * Converts a buckets array to a map
-   *
   * @param buckets Buckets from a facet
   */
  // eslint-disable-next-line class-methods-use-this
@@ -57,7 +55,6 @@ export class DataFacetsProvider {

  /**
   * Extract facets from data items, optionally combine them with a list of existing facets
-   *
   * @param items Items to extract facets from
   * @param aggregations Aggregations configuration(s) from backend
   * @param facets Existing facets to be combined with the facets from the items
@@ -103,7 +100,6 @@ export class DataFacetsProvider {

  /**
   * Converts facets array into a map (for quicker operations with facets)
-   *
   * @param facets Array of facets
   */
  facetsToMap(facets: SCFacet[]): {[key: string]: {[key: string]: number}} {
@@ -117,7 +113,6 @@ export class DataFacetsProvider {

  /**
   * Converts a buckets map into buckets array (as it is inside of a facet)
-   *
   * @param bucketsMap A map from a buckets array
   */
  // eslint-disable-next-line class-methods-use-this
@@ -135,7 +130,6 @@ export class DataFacetsProvider {

  /**
   * Converts facets map into an array of facets (as they are provided by backend)
-   *
   * @param facetsMap A map from facets array
   */
  mapToFacets(facetsMap: {[key: string]: {[key: string]: number}}): SCFacet[] {
@@ -32,7 +32,6 @@ export class DataRoutingService {

  /**
   * Provides the thing that was selected
-   *
   * @param thing The selected thing
   */
  emitChildEvent(thing: SCThings) {
@@ -107,7 +107,6 @@ export class DataProvider {

  /**
   * Simplify creation of a value filter
-   *
   * @param field Database field for apply the filter to
   * @param value Value to match with
   */
@@ -123,7 +122,6 @@ export class DataProvider {

  /**
   * Create a facet from data
-   *
   * @param items Data to generate facet for
   * @param field Field for which to generate facet
   */
@@ -145,7 +143,6 @@ export class DataProvider {

  /**
   * TODO
-   *
   * @param stAppsWebHttpClient TODO
   * @param storageProvider TODO
   */
@@ -156,7 +153,6 @@ export class DataProvider {

  /**
   * Create savable thing from an indexable thing
-   *
   * @param item An indexable to create savable thing from
   * @param type The type (falls back to the type of the indexable thing)
   */
@@ -175,7 +171,6 @@ export class DataProvider {

  /**
   * Delete a data item
-   *
   * @param uid Unique identifier of the saved data item
   */
  async delete(uid: string): Promise<void> {
@@ -206,7 +201,6 @@ export class DataProvider {

  /**
   * Provides a thing from the local database only, backend only or both, depending on the scope
-   *
   * @param uid Unique identifier of a thing
   * @param scope From where data should be provided
   */
@@ -246,7 +240,6 @@ export class DataProvider {

  /**
   * Provides key for storing data into the local database
-   *
   * @param uid Unique identifier of a resource
   */
  getDataKey(uid: string): string {
@@ -255,7 +248,6 @@ export class DataProvider {

  /**
   * Provides information if something with an UID is saved as a data item
-   *
   * @param uid Unique identifier of the saved data item
   */
  async isSaved(uid: string): Promise<boolean> {
@@ -264,7 +256,6 @@ export class DataProvider {

  /**
   * Performs multiple searches at once and returns their responses
-   *
   * @param query - query to send to the backend (auto-splits according to the backend limit)
   */
  async multiSearch(query: SCMultiSearchRequest): Promise<SCMultiSearchResponse> {
@@ -281,7 +272,6 @@ export class DataProvider {

  /**
   * Save a data item
-   *
   * @param item An item that needs to be saved
   */
  async put(item: SCIndexableThings): Promise<SCSaveableThing> {
@@ -293,7 +283,6 @@ export class DataProvider {

  /**
   * Send a feedback message (request)
-   *
   * @param feedback Feedback message to be sent to the backend
   */
  async sendFeedback(feedback: SCFeedbackRequest) {
@@ -302,7 +291,6 @@ export class DataProvider {

  /**
   * Searches the backend using the provided query and returns response
-   *
   * @param query - query to send to the backend
   */
  async search(query: SCSearchRequest): Promise<SCSearchResponse> {
@@ -12,7 +12,7 @@
 * 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 '~src/theme/util/mixins';
+@import '../../../../theme/util/mixins';

 stapps-origin-detail {
  // css hack to make the element stick to the bottom of the scroll container even
@@ -65,7 +65,7 @@ describe('DataDetailComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
-        RouterModule.forRoot([], {relativeLinkResolution: 'legacy'}),
+        RouterModule.forRoot([]),
        DataRoutingModule,
        DataModule,
        TranslateModule.forRoot({
@@ -112,7 +112,6 @@ export class DataDetailComponent implements ViewWillEnter {

  /**
   * Provides data item with given UID
-   *
   * @param uid Unique identifier of a thing
   * @param forceReload Indicating whether cached data should be ignored
   */
@@ -60,7 +60,6 @@ export class FavoriteButtonComponent {

  /**
   * Add or remove the thing from favorites (depending on its current status)
-   *
   * @param event A click event
   */
  async toggle(event: Event) {
@@ -12,7 +12,7 @@
 * 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 '~src/theme/util/mixins';
+@import '../../../../theme/util/mixins';

 :host {
  display: block;
@@ -33,6 +33,9 @@ ion-item {

  ion-thumbnail {
    --ion-margin: var(--spacing-xs);
+
+    margin-inline-start: var(--spacing-md);
+    padding: 0;
  }

  ion-label {
@@ -150,7 +150,6 @@ export class SearchPageComponent implements OnInit, OnDestroy {

  /**
   * Injects the providers and creates subscriptions
-   *
   * @param alertController AlertController
   * @param dataProvider DataProvider
   * @param contextMenuService ContextMenuService
@@ -180,7 +179,6 @@ export class SearchPageComponent implements OnInit, OnDestroy {

  /**
   * Fetches items with set query configuration
-   *
   * @param append If true fetched data gets appended to existing, override otherwise (default false)
   */
  protected async fetchAndUpdateItems(append = false): Promise<void> {
@@ -42,7 +42,6 @@ export class StAppsWebHttpClient implements HttpClientInterface {

  /**
   * Make a request
-   *
   * @param requestConfig Configuration of the request
   */
  async request<TYPE_OF_BODY>(requestConfig: HttpClientRequest): Promise<Response<TYPE_OF_BODY>> {
@@ -34,7 +34,6 @@ export class MessageDetailContentComponent {

  /**
   * Open the external link when clicked
-   *
   * @param url Web address to open
   */
  onLinkClick(url: string) {
@@ -46,7 +46,6 @@ export class PlaceDetailContentComponent implements OnInit, OnDestroy {

  /**
   * TODO
-   *
   * @param item TODO
   */
  hasCategories(item: SCThings): item is SCThings & {categories: string[]} {
@@ -55,7 +54,6 @@ export class PlaceDetailContentComponent implements OnInit, OnDestroy {

  /**
   * Helper function as 'typeof' is not accessible in HTML
-   *
   * @param item TODO
   */
  isMensaThing(item: SCThings): boolean {
@@ -28,7 +28,6 @@ export type PlaceTypesWithDistance = PlaceTypes & {

 /**
 * Detects "null island" places, which means places with point coordinates [0, 0]
- *
 * @param place A place to check
 */
 export function hasValidLocation(place: Exclude<PlaceTypes, SCFloor>) {
@@ -37,7 +36,6 @@ export function hasValidLocation(place: Exclude<PlaceTypes, SCFloor>) {

 /**
 * Provide information if a place is a floor
- *
 * @param place A place to check
 */
 export function isSCFloor(place: PlaceTypes): place is SCFloor {
@@ -59,7 +59,6 @@ export class FavoritesService {

  /**
   * Provides the type value from a filter
-   *
   * @param filter Filter to get the type from
   */
  static getFilterType(filter: SCSearchBooleanFilter | SCSearchValueFilter) {
@@ -84,7 +83,6 @@ export class FavoritesService {

  /**
   * Sorts provided items by the provided field
-   *
   * @param items Items to sort
   * @param field The field to use for sorting the items
   * @param sortType In which order to sort the provided textual field
@@ -132,7 +130,6 @@ export class FavoritesService {

  /**
   * Provides key for storing data into the local database
-   *
   * @param uid Unique identifier of a resource
   */
  getStorageKey(uid: string): string {
@@ -141,7 +138,6 @@ export class FavoritesService {

  /**
   * Removes an item from favorites
-   *
   * @param item Data item that needs to be deleted
   */
  async delete(item: SCIndexableThings): Promise<void> {
@@ -151,7 +147,6 @@ export class FavoritesService {

  /**
   * Save an item as a favorite
-   *
   * @param item Data item that needs to be saved
   */
  async put(item: SCIndexableThings): Promise<void> {
@@ -174,7 +169,6 @@ export class FavoritesService {

  /**
   * Search through the (saved) favorites
-   *
   * @param queryText Text to filter the data with
   * @param filterQuery Filters to apply on the data
   * @param sortQuery Sort to apply on the data
@@ -26,17 +26,19 @@
    <ion-card>
      <form #feedbackForm="ngForm" (ngSubmit)="onSubmit()">
        <ion-item>
-          <ion-label position="stacked">{{ 'feedback.form.name.label' | translate }}</ion-label>
          <ion-input
            placeholder="{{ 'feedback.form.name.placeholder' | translate }}"
            [(ngModel)]="author.name"
+            [label]="'feedback.form.name.label' | translate"
+            labelPlacement="stacked"
            name="name"
          ></ion-input>
        </ion-item>
        <ion-item>
-          <ion-label position="stacked">{{ 'feedback.form.type.label' | translate }}</ion-label>
          <ion-select
            [(ngModel)]="message.name"
+            [label]="'feedback.form.type.label' | translate"
+            labelPlacement="stacked"
            value="comment"
            name="title"
            interface="popover"
@@ -51,10 +53,11 @@
          </ion-select>
        </ion-item>
        <ion-item>
-          <ion-label position="stacked">{{ 'feedback.form.email.label' | translate }}</ion-label>
          <ion-input
            placeholder="{{ 'feedback.form.email.placeholder' | translate }}"
            [(ngModel)]="author.email"
+            [label]="'feedback.form.email.label' | translate"
+            labelPlacement="stacked"
            type="email"
            name="email"
            ngModel
@@ -62,12 +65,13 @@
          ></ion-input>
        </ion-item>
        <ion-item>
-          <ion-label position="stacked">{{ 'feedback.form.message.label' | translate }}</ion-label>
          <ion-textarea
            [(ngModel)]="message.messageBody"
            placeholder="{{
              'feedback.form.message.placeholder' | translate: {number: MINIMUM_MESSAGE_SIZE}
            }}"
+            [label]="'feedback.form.message.label' | translate"
+            labelPlacement="stacked"
            name="message"
            required="true"
            minlength="{{ MINIMUM_MESSAGE_SIZE }}"
@@ -75,13 +79,15 @@
          ></ion-textarea>
        </ion-item>
        <ion-item>
-          <ion-label class="ion-text-wrap">{{ 'feedback.form.termsAgree.0' | translate }} </ion-label>
          <ion-checkbox
+            class="ion-text-wrap"
            color="primary"
-            slot="start"
+            label-placement="end"
+            justify="start"
            [(ngModel)]="termsAgree"
            name="termsAgree"
-          ></ion-checkbox>
+            >{{ 'feedback.form.termsAgree.0' | translate }}</ion-checkbox
+          >
        </ion-item>
        <ion-item lines="none">
          <ion-label
@@ -91,13 +97,15 @@
          >
        </ion-item>
        <ion-item>
-          <ion-label class="ion-text-wrap">{{ 'feedback.form.protocolDataAgree' | translate }}</ion-label>
          <ion-checkbox
            color="primary"
-            slot="start"
+            class="ion-text-wrap"
+            label-placement="end"
+            justify="start"
            [(ngModel)]="protocolDataAgree"
            name="protocolDataAgree"
-          ></ion-checkbox>
+            >{{ 'feedback.form.protocolDataAgree' | translate }}</ion-checkbox
+          >
        </ion-item>
        <ion-card>
          <ion-card-title>
@@ -12,7 +12,7 @@
 * 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 '~src/theme/util/mixins';
+@import '../../../theme/util/mixins';

 pre {
  white-space: pre-wrap;
@@ -65,7 +65,7 @@ describe('DaiaAvailabilityComponent', () => {
    configProviderMock = jasmine.createSpyObj('ConfigProvider', ['init', 'getValue', 'getAnyValue']);
    TestBed.configureTestingModule({
      imports: [
-        RouterModule.forRoot([], {relativeLinkResolution: 'legacy'}),
+        RouterModule.forRoot([]),
        HebisRoutingModule,
        HebisModule,
        TranslateModule.forRoot({
@@ -69,7 +69,6 @@ export class DaiaAvailabilityComponent extends DataDetailComponent implements On

  /**
   * Provides data item with given UID
-   *
   * @param uid Unique identifier of a thing
   */
  async getAvailability(uid: SCUuid) {
@@ -46,7 +46,6 @@ export class DaiaDataProvider {

  /**
   * TODO
-   *
   * @param storageProvider TODO
   * @param httpClient TODO
   * @param configProvider TODO
@@ -48,7 +48,6 @@ export class HebisDataProvider extends DataProvider {

  /**
   * TODO
-   *
   * @param stAppsWebHttpClient TODO
   * @param storageProvider TODO
   * @param httpClient TODO
@@ -68,7 +67,6 @@ export class HebisDataProvider extends DataProvider {
   * Send a search request to the backend
   *
   * All results will be returned if no size is set in the request.
-   *
   * @param searchRequest Search request
   * @param options Search options
   * @param options.addPrefix Add HeBIS prefix (useful when having only an ID, e.g. when using PAIA)
@@ -65,7 +65,7 @@ describe('HebisDetailComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
-        RouterModule.forRoot([], {relativeLinkResolution: 'legacy'}),
+        RouterModule.forRoot([]),
        HebisRoutingModule,
        HebisModule,
        IonicModule,
@@ -64,7 +64,6 @@ export class HebisDetailComponent extends DataDetailComponent {

  /**
   * Provides data item with given UID
-   *
   * @param uid Unique identifier of a thing
   * @param _forceReload Ignore any cached data
   */
@@ -32,7 +32,6 @@ import {DaiaDataProvider} from './daia-data.provider';
 import {StAppsWebHttpClient} from '../data/stapps-web-http-client.provider';
 import {HebisRoutingModule} from './hebis-routing.module';
 import {DataModule} from '../data/data.module';
-import {DataListComponent} from '../data/list/data-list.component';
 import {DaiaAvailabilityComponent} from './daia-availability/daia-availability.component';
 import {UtilModule} from '../../util/util.module';
 import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
@@ -49,7 +48,6 @@ import {DaiaHoldingComponent} from './daia-availability/daia-holding.component';
    DaiaAvailabilityComponent,
    DaiaHoldingComponent,
  ],
-  entryComponents: [DataListComponent],
  imports: [
    CommonModule,
    DataModule,
@@ -47,7 +47,6 @@ export class HebisSearchPageComponent extends SearchPageComponent implements OnI

  /**
   * Injects the providers and creates subscriptions
-   *
   * @param alertController AlertController
   * @param dataProvider HebisProvider
   * @param contextMenuService ContextMenuService
@@ -89,7 +88,6 @@ export class HebisSearchPageComponent extends SearchPageComponent implements OnI

  /**
   * Fetches items with set query configuration
-   *
   * @param append If true fetched data gets appended to existing, override otherwise (default false)
   */
  protected async fetchAndUpdateItems(append = false): Promise<void> {
@@ -38,7 +38,6 @@ import {IonIconModule} from '../../util/ion-icon/ion-icon.module';

 /**
 * Initializes the default area to show in advance (before components are initialized)
- *
 * @param configProvider An instance of the ConfigProvider to read the campus polygon from
 * @param mapProvider An instance of the MapProvider to set the default polygon (area to show on the map)
 */
@@ -43,7 +43,6 @@ export class MapProvider {

  /**
   * Provide a point marker for a leaflet map
-   *
   * @param point Point to get marker for
   * @param className CSS class name
   * @param iconSize Size of the position icon
@@ -65,7 +64,6 @@ export class MapProvider {

  /**
   * Provide a position marker for a leaflet map
-   *
   * @param position Current position
   * @param className CSS class name
   * @param iconSize Size of the position icon
@@ -98,7 +96,6 @@ export class MapProvider {

  /**
   * Fixes the issue of missing tiles when map renders before its container element
-   *
   * @param map The initialized map
   * @param element The element containing the map
   * @param interval Interval to clear when map's appearance is corrected
@@ -124,7 +121,6 @@ export class MapProvider {

  /**
   * Provide the specific place by its UID
-   *
   * @param uid UUID of the place to look for
   */
  async searchPlace(uid: SCUuid): Promise<SCSearchResponse> {
@@ -141,7 +137,6 @@ export class MapProvider {

  /**
   * Provide places (buildings and canteens)    const result = await this.dataProvider.search(query);
-   *
   * @param contextFilter Additional contextual filter (e.g. from the context menu)
   * @param queryText Query (text) of the search query
   */
@@ -150,7 +150,6 @@ export class MapPageComponent {

  /**
   * Animate to coordinates
-   *
   * @param latLng Coordinates to animate to
   */
  private focus(latLng?: LatLng) {
@@ -163,7 +162,6 @@ export class MapPageComponent {

  /**
   * Add places to the map
-   *
   * @param items Places to add to the map
   * @param clean Remove everything from the map first
   * @param focus Animate to the item(s)
@@ -213,7 +211,6 @@ export class MapPageComponent {

  /**
   * Fetches items with set query configuration
-   *
   * @param fetchAll Should fetch all items
   * @param animate Should the fly animation be used
   */
@@ -395,7 +392,6 @@ export class MapPageComponent {

  /**
   * On enter key up do the search
-   *
   * @param event Keyboard keyup event
   */
  searchKeyUp(event: KeyboardEvent) {
@@ -406,7 +402,6 @@ export class MapPageComponent {

  /**
   * Search event of search bar
-   *
   * @param queryText New query text to be set
   */
  searchStringChanged(queryText?: string) {
@@ -416,7 +411,6 @@ export class MapPageComponent {

  /**
   * Show an single place
-   *
   * @param uid Uuid of the place
   */
  async showItem(uid: SCUuid) {
@@ -52,7 +52,6 @@ export class PositionService {

  /**
   * Gets current coordinates information of the device
-   *
   * @param options Options which define which data should be provided (e.g. how accurate or how old)
   * @param fake If set, the fake position will be returned
   */
@@ -73,7 +72,6 @@ export class PositionService {

  /**
   * Provides distance from users position
-   *
   * @param point Point to which distance should be calculated
   */
  getDistance(point: Point): number | undefined {
@@ -88,7 +86,6 @@ export class PositionService {

  /**
   * Watches (continuously gets) current coordinates information of the device
-   *
   * @param caller Identifier for later reference. (I.e use of `clearWatcher`)
   * @param options Options which define which data should be provided (e.g. how accurate or how old)
   */
@@ -115,7 +112,6 @@ export class PositionService {

  /**
   * Clears watcher for a certain caller
-   *
   * @param caller Identifier of the caller wanting to clear the watcher
   */
  async clearWatcher(caller: string): Promise<void> {
@@ -56,7 +56,7 @@ describe('ContextMenuComponent', async () => {
        TranslateModule.forRoot(),
        CommonModule,
        SettingsModule,
-        RouterModule.forRoot([], {relativeLinkResolution: 'legacy'}),
+        RouterModule.forRoot([]),
      ],
    }).compileComponents();

@@ -68,8 +68,7 @@ describe('ContextMenuComponent', async () => {
    instance.sortOption = getSortContextType();
    fixture.detectChanges();
    const sort: HTMLElement = fixture.debugElement.nativeElement.querySelector('.context-sort');
-    const sortItem = sort.querySelector('.sort-item');
-    expect(sortItem!.querySelector('ion-label')?.textContent).toContain('relevance');
+    expect(sort!.querySelector('ion-radio')?.textContent).toContain('relevance');
  });

  it('should show items in filter context', () => {
@@ -128,8 +127,7 @@ describe('ContextMenuComponent', async () => {

      expect(filterGroup).toBeDefined();

-      // @ts-expect-error it is defined
-      const filterItems = filterGroup.querySelectorAll('.filter-item-label');
+      const filterItems = filterGroup!.querySelectorAll('.filter-item-label');

      if (filterItems.length !== facet.buckets.length) {
        console.log(JSON.stringify(facet));
@@ -32,14 +32,13 @@
          *ngFor="let value of sortOption.values; index as i"
          (click)="sortChanged(sortOption, sortOption.values[i])"
        >
-          <ion-label
-            >{{ 'menu.context.sort.' + value.value | translate | titlecase }}
+          <ion-radio [value]="i">
+            {{ 'menu.context.sort.' + value.value | translate | titlecase }}
            <span *ngIf="sortOption.value === value.value && value.reversible">
              <ion-icon *ngIf="sortOption.reversed" name="arrow_downward"></ion-icon>
              <ion-icon *ngIf="!sortOption.reversed" name="arrow_upward"></ion-icon>
            </span>
-          </ion-label>
-          <ion-radio slot="end" [value]="i"></ion-radio>
+          </ion-radio>
        </ion-item>
      </ion-radio-group>
    </ion-list>
@@ -69,11 +68,6 @@
                  : facet.buckets
              "
            >
-              <ion-label class="filter-item-label">
-                ({{ bucket.count }}) {{ facet.field === 'type' ? (getTranslatedPropertyValue($any(bucket.key),
-                'type') | titlecase) : (getTranslatedPropertyValue(facet.onlyOnType, facet.field, bucket.key)
-                | titlecase) }}
-              </ion-label>
              <ion-checkbox
                [(ngModel)]="bucket.checked"
                (ngModelChange)="filterChanged()"
@@ -82,7 +76,11 @@
                  value: bucket.key,
                  onlyOnType: facet.onlyOnType
                }"
+                class="filter-item-label"
              >
+                ({{ bucket.count }}) {{ facet.field === 'type' ? (getTranslatedPropertyValue($any(bucket.key),
+                'type') | titlecase) : (getTranslatedPropertyValue(facet.onlyOnType, facet.field, bucket.key)
+                | titlecase) }}
              </ion-checkbox>
            </ion-item>
            <ion-button
@@ -89,7 +89,6 @@ export class ContextMenuService {

  /**
   * Returns SCSearchFilter if filterContext value is set, undefined otherwise
-   *
   * @param filterContext FilterContext to build SCSearchFilter from
   */
  buildFilterQuery = (filterContext: FilterContext): SCSearchFilter | undefined => {
@@ -144,7 +143,6 @@ export class ContextMenuService {

  /**
   * Returns SCSearchSort if sorting value is set, undefined otherwise
-   *
   * @param sortContext SortContext to build SCSearchSort from
   */
  buildSortQuery = (sortContext: SortContext): SCSearchSort[] | undefined => {
@@ -12,7 +12,7 @@
 * 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 '~src/theme/util/mixins';
+@import '../../../../theme/util/mixins';

 stapps-navigation-tabs {
  @include ion-xl-up {
@@ -54,7 +54,6 @@ export class NewsSettingsFilterComponent implements OnInit {

  /**
   * To be executed when a chip filter has been enabled/disabled
-   *
   * @param setting The value of the filter
   */
  stateChanged(setting: SCSetting) {
@@ -65,7 +65,6 @@ export class NewsProvider {

  /**
   * Get news messages
-   *
   * @param size How many messages/news to fetch
   * @param from From which (results) page to start
   * @param filters Additional filters to apply
@@ -108,7 +108,6 @@ export class NewsPageComponent implements OnInit {

  /**
   * Updates the shown list
-   *
   * @param refresher Refresher component that triggers the update
   */
  async refresh(refresher: IonRefresher) {
@@ -123,7 +122,6 @@ export class NewsPageComponent implements OnInit {

  /**
   * Executed when filters have been changed
-   *
   * @param filters Current filters to be used
   */
  toggleFilter(filters: SCSearchValueFilter[]) {
@@ -125,7 +125,7 @@ export class CalendarComponent implements OnInit, OnDestroy {
    let dayString: string | number | null = this.activatedRoute.snapshot.paramMap.get('date');
    if (dayString == undefined || dayString === 'now') {
      const fragments = window.location.href.split('/');
-      const urlFragment: string = fragments[fragments.length - 1] ?? '';
+      const urlFragment: string = fragments.at(-1) ?? '';

      dayString = /^\d{4}-\d{2}-\d{2}$/.test(urlFragment) ? urlFragment : moment.now();
    }
@@ -159,7 +159,6 @@ export class CalendarComponent implements OnInit, OnDestroy {

  /**
   * Get date from baseline date and index of current slide.
-   *
   * @param index number
   * @param delta number - is added to index
   * @param dateFormat string
@@ -210,7 +209,8 @@ export class CalendarComponent implements OnInit, OnDestroy {
    mainSwiper.goToIndex(nextIndex).then(() => {
      this.setDateRange(nextIndex);
    });
-    popoverDateTime.confirm(true);
+
+    void popoverDateTime.cancel(true);
  }

  /**
@@ -102,11 +102,9 @@ export class SchedulePageComponent implements OnInit, AfterViewInit {
  static getDaysToDisplay(width: number): ScheduleResponsiveBreakpoint {
    // the search could be optimized, but probably would have little
    // actual effect with five entries.
-    // we can be sure we get an hit when the last value.until is infinity
+    // we can be sure we get a hit when the last value.until is infinity
    // (unless someone has a display that reaches across the universe)
-    return (
-      responsiveConfig.find(value => width < value.until) ?? responsiveConfig[responsiveConfig.length - 1]
-    );
+    return responsiveConfig.find(value => width < value.until) ?? responsiveConfig.at(-1)!;
  }

  constructor(
@@ -128,11 +126,11 @@ export class SchedulePageComponent implements OnInit, AfterViewInit {
   */
  ionViewWillEnter() {
    this.onInit();
-    this.segmentView.value = this.tabChoreographer.currentValue;
+    this.segmentView.value = this.tabChoreographer.currentValue ?? undefined;
  }

  ngAfterViewInit() {
-    this.segmentView.value = this.tabChoreographer.currentValue;
+    this.segmentView.value = this.tabChoreographer.currentValue ?? undefined;
  }

  onInit() {
@@ -166,7 +164,7 @@ export class SchedulePageComponent implements OnInit, AfterViewInit {
  onSegmentChange() {
    const url = this.router.createUrlTree(['schedule', this.segmentView.value]).toString();
    this.location.go(url);
-    this.tabChoreographer.changeViewForState(this.segmentView.value);
+    this.tabChoreographer.changeViewForState(this.segmentView.value as string | undefined);
  }

  onTodayClick() {
@@ -62,7 +62,6 @@ export class SettingsItemComponent {

  /**
   * Shows alert with given title and message and a 'ok' button
-   *
   * @param title Title of the alert
   * @param message Message of the alert
   */
@@ -33,7 +33,6 @@

    <div [ngSwitch]="setting.inputType" *ngIf="isVisible">
      <ion-item *ngSwitchCase="'number'">
-        <ion-label></ion-label>
        <ion-input
          type="number"
          [(ngModel)]="setting.value"
@@ -43,7 +42,6 @@
      </ion-item>

      <ion-item *ngSwitchCase="'text'">
-        <ion-label></ion-label>
        <ion-input
          type="text"
          [(ngModel)]="setting.value"
@@ -53,7 +51,6 @@
      </ion-item>

      <ion-item *ngSwitchCase="'password'">
-        <ion-label></ion-label>
        <ion-input
          type="password"
          [(ngModel)]="setting.value"
@@ -63,7 +60,6 @@
      </ion-item>

      <ion-item *ngSwitchCase="'single choice'">
-        <ion-label></ion-label>
        <!--    if values are boolean show as toggle    -->
        <ion-toggle
          *ngIf="typeOf(setting.defaultValue) === 'boolean'"
@@ -87,7 +83,6 @@
      </ion-item>

      <ion-item *ngSwitchCase="'multiple choice'">
-        <ion-label></ion-label>
        <ion-select [(ngModel)]="setting.value" multiple="true" (ionChange)="settingChanged()">
          <ion-select-option *ngFor="let val of setting.values; index as i" [value]="val">
            <div *ngIf="typeOf(val) !== 'number'">
@@ -28,6 +28,8 @@
          <ion-toggle
            [disabled]="isWeb"
            [checked]="syncEnabled"
+            label-placement="end"
+            justify="start"
            (ionChange)="
              setSetting({
                sync: $event.detail.checked
@@ -35,12 +37,12 @@
              syncCalendar($event.detail.checked)
            "
          >
+            {{ 'settings.calendar.sync.syncWithCalendar' | translate }}
          </ion-toggle>
-          <ion-label>{{ 'settings.calendar.sync.syncWithCalendar' | translate }}</ion-label>
        </ion-item>
        <!--
        ~ TODO:
-        ~ background fetch is too unreliable to suggest our users that 
+        ~ background fetch is too unreliable to suggest our users that
        ~ they'll get a notification upon change of event/dateseries.
        ~ This has to be a highly reliable service notifing users via APN/GCM.

@@ -12,7 +12,7 @@
 * 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 '~src/theme/util/mixins';
+@import '../../../../theme/util/mixins';

 :host ::ng-deep {
  ion-grid,
@@ -115,7 +115,6 @@ export class SettingsProvider {

  /**
   * Return true if all given values are valid to possible values in given settingInput
-   *
   * @param possibleValues Possible values
   * @param enteredValues Entered value
   */
@@ -138,7 +137,6 @@ export class SettingsProvider {

  /**
   * Returns true if given value is valid to possible values in given settingInput
-   *
   * @param possibleValues  Possible values
   * @param enteredValue Entered value
   */
@@ -157,7 +155,6 @@ export class SettingsProvider {

  /**
   * Validates value for given settings inputType. Returns true if value is valid.
-   *
   * @param setting setting to check value against
   * @param value value to validate
   */
@@ -207,7 +204,6 @@ export class SettingsProvider {

  /**
   * Add an Setting to the Cache if not exist and set undefined value to defaultValue
-   *
   * @param setting Setting with categories, defaultValue, name, input type and valid values
   */
  private addSetting(setting: SCSetting): void {
@@ -244,7 +240,6 @@ export class SettingsProvider {

  /**
   * Add category if not exists
-   *
   * @param category the category to provide
   */
  private provideCategory(category: string): void {
@@ -261,7 +256,6 @@ export class SettingsProvider {

  /**
   * Returns true if category exists
-   *
   * @param category Category key name
   */
  public categoryExists(category: string): boolean {
@@ -286,7 +280,6 @@ export class SettingsProvider {

  /**
   * Returns copy of a setting if exist
-   *
   * @param category the category of requested setting
   * @param name the name of requested setting
   * @throws Exception if setting is not provided
@@ -302,7 +295,6 @@ export class SettingsProvider {

  /**
   * Returns copy of a settings value if exist
-   *
   * @param category the category of requested setting
   * @param name the name of requested setting
   * @throws Exception if setting is not provided
@@ -359,7 +351,6 @@ export class SettingsProvider {

  /**
   * Adds given setting and its category if not exist
-   *
   * @param setting the setting to add
   */
  public provideSetting(setting: SCSetting): void {
@@ -409,7 +400,6 @@ export class SettingsProvider {

  /**
   * Sets the order the given categories show up in the settings page
-   *
   * @param categoryNames the order of the categories
   */
  public setCategoriesOrder(categoryNames: string[]) {
@@ -418,7 +408,6 @@ export class SettingsProvider {

  /**
   * Sets a valid value of a setting and persists changes in storage. Also the changes get published bey Events
-   *
   * @param category Category key name
   * @param name Setting key name
   * @param value Value to be set
@@ -454,7 +443,6 @@ export class SettingsProvider {

  /**
   * Returns true if setting in category exists
-   *
   * @param category Category key name
   * @param setting Setting key name
   */
@@ -13,8 +13,8 @@
 * this program. If not, see <https://www.gnu.org/licenses/>.
 */
 import {NgModule} from '@angular/core';
-import {IonicStorageModule} from '../../util/ionic-storage.module';
 import {StorageProvider} from './storage.provider';
+import {IonicStorageModule} from '@ionic/storage-angular';

 /**
 * Angular storage provider module
@@ -14,7 +14,7 @@
 */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {TestBed} from '@angular/core/testing';
-import {Storage} from '@ionic/storage';
+import {Storage} from '@ionic/storage-angular';
 import {StorageModule} from './storage.module';
 import {StorageProvider} from './storage.provider';

@@ -13,7 +13,7 @@
 *  this program. If not, see <https://www.gnu.org/licenses/>.
 */
 import {Injectable} from '@angular/core';
-import {Storage} from '@ionic/storage';
+import {Storage} from '@ionic/storage-angular';

 /**
 * Provides interaction with the (ionic) storage on the device (in the browser)
@@ -27,7 +27,6 @@ export class StorageProvider {

  /**
   * Deletes storage entries using keys used to save them
-   *
   * @param keys Unique identifiers of the resources for deletion
   */
  async delete(...keys: string[]): Promise<void> {
@@ -45,7 +44,6 @@ export class StorageProvider {

  /**
   * Gets a value from the storage using the provided key
-   *
   * @param key Unique identifier of the wanted resource in storage
   */
  async get<T>(key: string): Promise<T> {
@@ -73,7 +71,6 @@ export class StorageProvider {

  /**
   * Retrieves multiple entries from the storage using their keys
-   *
   * @param keys Unique identifiers of wanted resources from the storage
   */
  async getMultiple(keys: string[]): Promise<Map<string, any>> {
@@ -92,7 +89,6 @@ export class StorageProvider {

  /**
   * Provides information if storage has an entry with the given key
-   *
   * @param key Unique identifier of the resource in storage
   */
  async has(key: string): Promise<boolean> {
@@ -122,7 +118,6 @@ export class StorageProvider {

  /**
   * Puts a value of type T into the storage using provided key
-   *
   * @param key Unique identifier
   * @param value Resource to store under the key
   */
@@ -132,7 +127,6 @@ export class StorageProvider {

  /**
   * Saves multiple entries into the storage
-   *
   * @param entries Resources to be put into the storage
   */
  async putMultiple(entries: Map<string, any>): Promise<Map<string, any>> {
@@ -147,7 +141,6 @@ export class StorageProvider {

  /**
   * Gets values from the storage using the provided pattern
-   *
   * @param pattern Regular expression or text to test existing storage keys with
   */
  async search<T>(pattern: RegExp | string): Promise<Map<string, T>> {
@@ -30,13 +30,13 @@ export abstract class ThingTranslateParser {
 export class ThingTranslateDefaultParser extends ThingTranslateParser {
  getValueFromKeyPath(instance: object, keyPath: string): unknown {
    // keyPath = aproperty[0].anotherproperty["arrayproperty"][42].finalproperty
-    let path = keyPath.replace(/["']'"/gim, '.');
+    let path = keyPath.replaceAll(/["']'"/gim, '.');
    // path = aproperty[0].anotherproperty[.arrayproperty.][42].finalproperty
-    path = path.replace(/[\[\]]/gim, '.');
+    path = path.replaceAll(/[\[\]]/gim, '.');
    // path = aproperty.0..anotherproperty..arrayproperty...42..finalproperty
    // TODO
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    path = path.replace(/\.{2,}/gim, '.');
+    path = path.replaceAll(/\.{2,}/gim, '.');
    // path = aproperty.0.anotherproperty.arrayproperty.42.finalproperty

    const keyPathChain = keyPath.split('.');
@@ -65,7 +65,6 @@ export class ThingTranslateService implements OnDestroy {

  /**
   * Gets the translated value of a key (or an array of keys)
-   *
   * @param thing SCThing to get
   * @param keyPath Path to the key
   * @returns the translated key, or an object of translated keys
@@ -87,7 +86,6 @@ export class ThingTranslateService implements OnDestroy {

  /**
   * Gets the translated value of a key (or an array of keys)
-   *
   * @param type Type of the property
   * @param keyPath Path to the key
   * @returns the translated key, or an object of translated keys
@@ -29,6 +29,6 @@ export class ArrayLastPipe implements PipeTransform {
   */
  // tslint:disable-next-line:prefer-function-over-method
  transform<T>(value: T[]): T | undefined {
-    return value[value.length - 1];
+    return value.at(-1);
  }
 }
@@ -1,105 +0,0 @@
-/* eslint-disable @typescript-eslint/no-empty-function,@typescript-eslint/no-unused-vars,unicorn/no-null,jsdoc/require-jsdoc,@typescript-eslint/no-explicit-any,@typescript-eslint/ban-types */
-/**
- * The MIT License (MIT)
- *
- * Copyright (c) 2021 Drifty, co.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-// This is based on the Ionic Storage 4.0.0 implementation until we can
-// upgrade to Angular 14+ and use the new update.
-// https://github.com/ionic-team/ionic-storage/blob/main/angular/src/index.ts
-import {isPlatformServer} from '@angular/common';
-import type {ModuleWithProviders} from '@angular/core';
-import {InjectionToken, NgModule, PLATFORM_ID} from '@angular/core';
-import {Storage, StorageConfig} from '@ionic/storage';
-
-const StorageConfigToken = new InjectionToken<any>('STORAGE_CONFIG_TOKEN');
-
-export {StorageConfigToken};
-
-class NoopStorage extends Storage {
-  constructor() {
-    super();
-  }
-
-  async create() {
-    return this;
-  }
-
-  async defineDriver() {}
-
-  get driver(): string | null {
-    return 'noop';
-  }
-
-  // @ts-expect-error unused
-  async get(key: string) {
-    return null;
-  }
-
-  // @ts-expect-error unused
-  async set(key: string, value: any) {}
-
-  // @ts-expect-error unused
-  async remove(key: string): Promise<any> {}
-
-  async clear(): Promise<void> {}
-
-  async length(): Promise<number> {
-    return 0;
-  }
-
-  async keys() {
-    return [];
-  }
-
-  // @ts-expect-error unused
-  async forEach(iteratorCallback: (value: any, key: string, iterationNumber: Number) => any): Promise<void> {}
-
-  // @ts-expect-error unused
-  setEncryptionKey(key: string) {}
-}
-
-export function provideStorage(platformId: any, storageConfig: StorageConfig): Storage {
-  if (isPlatformServer(platformId)) {
-    // When running in a server context return the NoopStorage
-    return new NoopStorage();
-  }
-
-  return new Storage(storageConfig);
-}
-
-@NgModule()
-export class IonicStorageModule {
-  // @ts-expect-error unused
-  static forRoot(storageConfig: StorageConfig = null): ModuleWithProviders<IonicStorageModule> {
-    return {
-      ngModule: IonicStorageModule,
-      providers: [
-        {provide: StorageConfigToken, useValue: storageConfig},
-        {
-          provide: Storage,
-          useFactory: provideStorage,
-          deps: [PLATFORM_ID, StorageConfigToken],
-        },
-      ],
-    };
-  }
-}
@@ -12,7 +12,7 @@
 * 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 '~src/theme/util/mixins';
+@import '../../theme/util/mixins';

 a {
  display: contents;
@@ -26,9 +26,9 @@
@import '~@ionic/angular/css/flex-utils.css';
@import '~@ionic/angular/css/display.css';

-// https://swiperjs.com/angular#styles
@import 'swiper/scss';
@import 'swiper/scss/controller';
+@import 'swiper/scss/navigation';

 // @import 'material-symbols/rounded.scss';
@import './theme/material-symbols';
@@ -1,76 +0,0 @@
-/*
- * Copyright (C) 2018, 2019 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/>.
- */
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
- *      file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes recent versions of Safari, Chrome (including
- * Opera), Edge on the desktop, and iOS and Chrome on mobile.
- *
- * Learn more in https://angular.io/guide/browser-support
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/**
- * By default, zone.js will patch all possible macroTask and DomEvents
- * user can disable parts of macroTask/DomEvents patch by setting following flags
- * because those flags need to be set before `zone.js` being loaded, and webpack
- * will put import in the top of bundle, so user need to create a separate file
- * in this directory (for example: zone-flags.ts), and put the following flags
- * into that file, and then add the following code before importing zone.js.
- * import './zone-flags';
- *
- * The flags allowed in zone-flags.ts are listed here.
- *
- * The following flags will work for all browsers.
- *
- * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
- *
- *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- *  with the following flag, it will bypass `zone.js` patch for IE/Edge
- *
- *  (window as any).__Zone_enable_cross_context_check = true;
- *
- */
-
-/***************************************************************************************************
- * Zone JS is required by default for Angular itself.
- */
-import 'zone.js'; // Included with Angular CLI.
-
-/***************************************************************************************************
- * APPLICATION IMPORTS
- */
-
-/**
- * Date, currency, decimal and percent pipes.
- * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
- */
-// import 'intl';  // Run `npm install --save intl`.
-/**
- * Need to import at least one locale-data with intl.
- */
-// import 'intl/locale-data/jsonp/en';
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2018, 2019 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.
@@ -12,7 +12,6 @@
 * You should have received a copy of the GNU General Public License along with
 * this program. If not, see <https://www.gnu.org/licenses/>.
 */
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
 import 'zone.js/testing';
 import {getTestBed} from '@angular/core/testing';
 import {
@@ -20,20 +19,4 @@ import {
  platformBrowserDynamicTesting,
 } from '@angular/platform-browser-dynamic/testing';

-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-declare const __karma__: any;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-declare const require: any;
-
-// prevent Karma from runnint prematurely
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-__karma__.loaded = function () {};
-
-// First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
-
-__karma__.start();
@@ -12,7 +12,7 @@
 * 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 'util/color-system';
+@import './util/color-system';

@include ion-color(primary, #3880ff);
@include ion-color(secondary, #32db64);
@@ -1,4 +1,6 @@
 app-root ion-header[class*='header-'] {
+  box-shadow: unset;
+
  &::after {
    background-image: unset;
  }
@@ -16,8 +16,6 @@
 // http://ionicframework.com/docs/theming/
@import './colors';

-@import '~swiper/css/navigation';
-
 // Import all other styles
@import './fonts';
@import './common/typo';