feat: upgrade to Angular 16.1

.changeset/bright-dryers-act.md

@@ -0,0 +1,5 @@
+---
+'@openstapps/app': major
+---
+
+Update to Angular 16.1

.changeset/config.json

@@ -5,7 +5,7 @@
   "fixed": [],
   "linked": [["@openstapps/*"]],
   "access": "restricted",
-  "baseBranch": "master",
+  "baseBranch": "main",
   "updateInternalDependencies": "patch",
   "ignore": []
 }

.changeset/silent-maps-float.md

@@ -0,0 +1,30 @@
+---
+'@openstapps/projectmanagement': patch
+'@openstapps/prettier-config': patch
+'@openstapps/app-release-template': patch
+'@openstapps/es-mapping-generator': patch
+'@openstapps/backend-config': patch
+'@openstapps/eslint-config': patch
+'@openstapps/minimal-deployment': patch
+'@openstapps/minimal-connector': patch
+'@openstapps/collection-utils': patch
+'@openstapps/minimal-plugin': patch
+'@openstapps/tsconfig': patch
+'@openstapps/node-builder': patch
+'@openstapps/api-plugin': patch
+'@openstapps/core-tools': patch
+'@openstapps/gitlab-api': patch
+'@openstapps/app-builder-image': patch
+'@openstapps/easy-ast': patch
+'@openstapps/database': patch
+'@openstapps/node-base': patch
+'@openstapps/api-cli': patch
+'@openstapps/backend': patch
+'@openstapps/logger': patch
+'@openstapps/proxy': patch
+'@openstapps/core': patch
+'@openstapps/app': patch
+'@openstapps/api': patch
+---
+
+Update to TypeScript 5.1.6

.changeset/smart-ghosts-shout.md

@@ -0,0 +1,8 @@
+---
+'@openstapps/app': minor
+---
+
+Migrate to Ionic 7
+
+- Migrate uses of `<ion-label>` with inputs to new syntax
+- Fix infinite loop in schedule date picker (`datetime.confirm()` to `datetime.cancel()`)

.syncpackrc.cjs

@@ -53,12 +53,6 @@ const config = {
       packages: ['**'],
       pinVersion: 'workspace:*',
     },
-    {
-      label: 'App may have some dependency exceptions',
-      dependencies: ['typescript', '@typescript-eslint/**', 'eslint**'],
-      packages: ['@openstapps/app'],
-      isIgnored: true,
-    },
   ],
 };
 

backend/backend/package.json

@@ -99,7 +99,7 @@
     "supertest": "6.3.3",
     "ts-node": "10.9.1",
     "tsup": "6.7.0",
-    "typescript": "4.9.5"
+    "typescript": "5.1.6"
   },
   "tsup": {
     "entry": [

backend/proxy/package.json

@@ -51,7 +51,7 @@
     "is-cidr": "4.0.2",
     "mustache": "4.2.0",
     "semver": "7.3.8",
-    "typescript": "4.9.5"
+    "typescript": "5.1.6"
   },
   "devDependencies": {
     "@openstapps/api-cli": "workspace:*",

configuration/eslint-config/package.json

@@ -19,7 +19,7 @@
     "@openstapps/tsconfig": "workspace:*",
     "@types/node": "18.15.3",
     "eslint": "8.43.0",
-    "typescript": "4.9.5"
+    "typescript": "5.1.6"
   },
   "peerDependencies": {
     "@typescript-eslint/eslint-plugin": "5.60.1",

configuration/projectmanagement/package.json

@@ -65,7 +65,7 @@
     "mocha-junit-reporter": "2.2.0",
     "ts-node": "10.9.1",
     "tsup": "6.7.0",
-    "typescript": "4.9.5"
+    "typescript": "5.1.6"
   },
   "tsup": {
     "entry": [

configuration/tsconfig/tsconfig.json

@@ -1,12 +1,12 @@
 {
   "compilerOptions": {
     "alwaysStrict": true,
-    "charset": "utf8",
     "declaration": true,
     "esModuleInterop": true,
     "experimentalDecorators": true,
     "forceConsistentCasingInFileNames": true,
     "skipLibCheck": true,
+    "downlevelIteration": true,
     "inlineSourceMap": true,
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
@@ -21,9 +21,9 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "outDir": "../../../lib/",
-    "lib": ["ES2021", "DOM"],
+    "lib": ["ES2022", "DOM"],
     "strict": true,
-    "target": "ES2021"
+    "target": "ES2022"
   },
   "ts-node": {
     "transpileOnly": true

examples/minimal-connector/package.json

@@ -55,7 +55,7 @@
     "nock": "13.3.1",
     "ts-node": "10.9.1",
     "tsup": "6.7.0",
-    "typescript": "4.9.5"
+    "typescript": "5.1.6"
   },
   "tsup": {
     "entry": [

examples/minimal-plugin/package.json

@@ -44,7 +44,7 @@
     "@types/express": "4.17.17",
     "@types/node": "18.15.3",
     "tsup": "6.7.0",
-    "typescript": "4.9.5"
+    "typescript": "5.1.6"
   },
   "tsup": {
     "entry": [

frontend/app/.browserslistrc

@@ -9,4 +9,6 @@
 last 2 versions
 Firefox ESR
 not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.
+not kaios 2.5
+not op_mini all
+not IE 9-11

frontend/app/.editorconfig

@@ -1,17 +0,0 @@
-# EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false

frontend/app/.eslintrc.json

@@ -33,6 +33,7 @@
         "unicorn/prefer-object-from-entries": "off",
         "unicorn/prefer-node-protocol": "off",
         "unicorn/no-process-exit": "off",
+        "unicorn/prefer-event-target": "off",
         "unicorn/prevent-abbreviations": [
           "warn",
           {

frontend/app/.gitlab-ci.yml.old

@@ -1,30 +0,0 @@
-build:
-  stage: build
-  script:
-    - npm run build
-  artifacts:
-    paths:
-      - www
-  except:
-    - schedules
-
-scheduled-build:
-  stage: build
-  script:
-    - npm run build
-  only:
-    - schedules
-
-unit:
-  stage: test
-  script:
-    - npm run check-icons
-    - npm run test -- --watch=false --no-progress --code-coverage
-  coverage: '/Statements[^:]*\:[^:]*\s+([\d\.]+)%/'
-  artifacts:
-    paths:
-      - coverage
-    reports:
-      coverage_report:
-        coverage_format: cobertura
-        path: coverage/cobertura-coverage.xml

frontend/app/.npmignore

@@ -1,11 +0,0 @@
-# Ignore all files/folders by default
-# See https://stackoverflow.com/a/29932318
-/*
-# Except these files/folders
-!docs
-!lib
-!LICENSE
-!package.json
-!package-lock.json
-!README.md
-!src

frontend/app/angular.json

@@ -1,7 +1,6 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
-  "defaultProject": "app",
   "newProjectRoot": "projects",
   "projects": {
     "app": {
@@ -17,10 +16,17 @@
             "outputPath": "www",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": "zone.js",
             "tsConfig": "tsconfig.app.json",
+            "allowedCommonJsDependencies": [
+              "moment",
+              "opening_hours",
+              "leaflet",
+              "leaflet.markercluster",
+              "localforge",
+              "guid-typescript"
+            ],
             "aot": true,
-            "allowedCommonJsDependencies": ["moment", "opening_hours"],
             "assets": [
               {
                 "glob": "**/*",
@@ -44,8 +50,7 @@
               },
               "./node_modules/leaflet/dist/leaflet.css",
               "./node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css"
-            ],
+            ]
-            "scripts": []
           },
           "configurations": {
             "production": {
@@ -102,7 +107,6 @@
               "browserTarget": "app:build:development"
             },
             "ci": {
-              "progress": false,
               "browserTarget": "app:build"
             },
             "fake": {
@@ -111,21 +115,13 @@
           },
           "defaultConfiguration": "development"
         },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "app:build"
-          }
-        },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "src/test.ts",
+            "polyfills": ["zone.js", "zone.js/testing"],
-            "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "styles": [],
+            "main": "src/test.ts",
-            "scripts": [],
             "assets": [
               {
                 "glob": "favicon.ico",
@@ -143,12 +139,6 @@
                 "output": "assets/"
               }
             ]
-          },
-          "configurations": {
-            "ci": {
-              "progress": false,
-              "watch": false
-            }
           }
         },
         "lint": {
@@ -206,7 +196,6 @@
   },
   "cli": {
     "packageManager": "pnpm",
-    "defaultCollection": "@ionic/angular-toolkit",
     "analytics": false
   },
   "schematics": {

frontend/app/karma.conf.js

@@ -1,3 +1,4 @@
+// @ts-check
 /*
  * Copyright (C) 2022 StApps
  * This program is free software: you can redistribute it and/or modify it
@@ -13,10 +14,13 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-// Karma configuration file, see link for more information
+// Karma configuration file, see the link for more information
 // https://karma-runner.github.io/1.0/config/configuration-file.html
 var isDocker = require('is-docker');
 
+/**
+ * @param config {import('karma').Config}
+ */
 module.exports = function (config) {
   config.set({
     basePath: '',
@@ -25,9 +29,9 @@ module.exports = function (config) {
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma'),
       require('karma-mocha-reporter'),
       require('karma-junit-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma'),
     ],
     client: {
       clearContext: false, // leave Jasmine Spec Runner output visible in browser
@@ -44,19 +48,18 @@ module.exports = function (config) {
       useBrowserName: false,
     },
     reporters: ['mocha', 'junit', 'coverage'],
+    singleRun: true,
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
-    autoWatch: true,
     browsers: ['ChromeNoSandbox'],
     customLaunchers: {
       ChromeNoSandbox: {
         base: 'ChromeHeadless',
         // We must disable the Chrome sandbox when running Chrome inside Docker,
         // see https://hackernoon.com/running-karma-tests-with-headless-chrome-inside-docker-ae4aceb06ed3
-        flags: isDocker ? ['--no-sandbox'] : [],
+        flags: isDocker() ? ['--no-sandbox'] : [],
       },
     },
-    singleRun: false,
   });
 };

frontend/app/ngcc-postinstall.mjs

@@ -1,11 +0,0 @@
-import {process} from '@angular/compiler-cli/ngcc';
-import path from 'path';
-
-const legacyViewEngineLibraries = [
-  ['@awesome-cordova-plugins', 'calendar'],
-  ['@ionic-native', 'core'],
-];
-
-for (const basePath of legacyViewEngineLibraries) {
-  process({basePath: path.resolve(path.join('node_modules', ...basePath))});
-}

frontend/app/package.json

@@ -37,8 +37,7 @@
     "lint": "ng lint && stylelint \"**/*.scss\"",
     "lint:fix": "eslint --fix -c .eslintrc.json --ignore-path .eslintignore --ext .ts,.html src/ && stylelint --fix \"**/*.scss\"",
     "minify-icons": "ts-node-esm scripts/minify-icon-font.ts",
-    "ng": "ng",
+    "postinstall": "jetify && echo \"skipping jetify in production mode\"",
-    "postinstall": "(jetify && node ngcc-postinstall.mjs) || echo \"skipping jetify in production mode\"",
     "preview": "http-server www --p 8101 -o",
     "push": "git push && git push origin \"v$npm_package_version\"",
     "resources:android": "cordova-res android --skip-config --copy",
@@ -47,19 +46,19 @@
     "start": "ionic serve",
     "start:external": "ionic serve --external",
     "start:prod": "ionic serve --prod",
-    "test": "ng test --watch=false --code-coverage",
+    "test": "ng test --code-coverage",
     "test:integration": "sh integration-test.sh"
   },
   "dependencies": {
-    "@angular/animations": "13.4.0",
+    "@angular/animations": "16.1.4",
-    "@angular/cdk": "13.3.9",
+    "@angular/cdk": "16.1.4",
-    "@angular/common": "13.4.0",
+    "@angular/common": "16.1.4",
-    "@angular/core": "13.4.0",
+    "@angular/core": "16.1.4",
-    "@angular/forms": "13.4.0",
+    "@angular/forms": "16.1.4",
-    "@angular/platform-browser": "13.4.0",
+    "@angular/platform-browser": "16.1.4",
-    "@angular/router": "13.4.0",
+    "@angular/router": "16.1.4",
-    "@asymmetrik/ngx-leaflet": "13.0.2",
+    "@asymmetrik/ngx-leaflet": "16.0.1",
-    "@asymmetrik/ngx-leaflet-markercluster": "13.0.1",
+    "@asymmetrik/ngx-leaflet-markercluster": "16.0.0",
     "@awesome-cordova-plugins/calendar": "5.45.0",
     "@awesome-cordova-plugins/core": "5.45.0",
     "@capacitor/app": "4.1.1",
@@ -79,10 +78,10 @@
     "@capacitor/status-bar": "4.1.1",
     "@hugotomazi/capacitor-navigation-bar": "2.0.0",
     "@ionic-native/core": "5.36.0",
-    "@ionic/angular": "6.7.5",
+    "@ionic/angular": "7.1.3",
-    "@ionic/storage": "4.0.0",
+    "@ionic/storage-angular": "4.0.0",
-    "@ngx-translate/core": "14.0.0",
+    "@ngx-translate/core": "15.0.0",
-    "@ngx-translate/http-loader": "7.0.0",
+    "@ngx-translate/http-loader": "8.0.0",
     "@openid/appauth": "1.3.1",
     "@openstapps/api": "workspace:*",
     "@openstapps/core": "workspace:*",
@@ -99,36 +98,36 @@
     "material-symbols": "0.10.0",
     "moment": "2.29.4",
     "ngx-logger": "5.0.12",
-    "ngx-markdown": "13.1.0",
+    "ngx-markdown": "16.0.0",
     "ngx-moment": "6.0.2",
     "opening_hours": "3.8.0",
-    "rxjs": "7.8.0",
+    "rxjs": "7.8.1",
     "swiper": "8.4.5",
     "tslib": "2.4.1",
-    "zone.js": "0.12.0"
+    "zone.js": "0.13.1"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "0.1303.11",
+    "@angular-devkit/architect": "0.1601.4",
-    "@angular-devkit/build-angular": "13.3.11",
+    "@angular-devkit/build-angular": "16.1.4",
-    "@angular-devkit/core": "13.3.11",
+    "@angular-devkit/core": "16.1.4",
-    "@angular-devkit/schematics": "13.3.11",
+    "@angular-devkit/schematics": "16.1.4",
-    "@angular-eslint/builder": "13.5.0",
+    "@angular-eslint/builder": "16.1.0",
-    "@angular-eslint/eslint-plugin": "13.5.0",
+    "@angular-eslint/eslint-plugin": "16.1.0",
-    "@angular-eslint/eslint-plugin-template": "13.5.0",
+    "@angular-eslint/eslint-plugin-template": "16.1.0",
-    "@angular-eslint/schematics": "13.5.0",
+    "@angular-eslint/schematics": "16.1.0",
-    "@angular-eslint/template-parser": "13.5.0",
+    "@angular-eslint/template-parser": "16.1.0",
-    "@angular/cli": "13.3.11",
+    "@angular/cli": "16.1.4",
-    "@angular/compiler": "13.4.0",
+    "@angular/compiler": "16.1.4",
-    "@angular/compiler-cli": "13.4.0",
+    "@angular/compiler-cli": "16.1.4",
-    "@angular/language-service": "13.4.0",
+    "@angular/language-service": "16.1.4",
-    "@angular/platform-browser-dynamic": "13.3.11",
+    "@angular/platform-browser-dynamic": "16.1.4",
     "@capacitor/android": "4.6.1",
     "@capacitor/cli": "4.6.1",
     "@capacitor/ios": "4.6.1",
     "@compodoc/compodoc": "1.1.19",
     "@cypress/schematic": "1.7.0",
-    "@ionic/angular-toolkit": "6.1.0",
+    "@ionic/angular-toolkit": "10.0.0",
-    "@ionic/cli": "6.20.4",
+    "@ionic/cli": "7.1.1",
     "@openstapps/prettier-config": "workspace:*",
     "@openstapps/tsconfig": "workspace:*",
     "@types/fontkit": "1.8.0",
@@ -137,33 +136,35 @@
     "@types/jasmine": "4.3.1",
     "@types/jasminewd2": "2.0.10",
     "@types/jsonpath": "0.2.0",
+    "@types/karma": "6.3.4",
+    "@types/karma-coverage": "2.0.1",
+    "@types/karma-jasmine": "4.0.2",
     "@types/leaflet": "1.9.0",
     "@types/leaflet.markercluster": "1.5.1",
     "@types/node": "18.15.3",
-    "@typescript-eslint/eslint-plugin": "5.49.0",
+    "@typescript-eslint/eslint-plugin": "5.60.1",
-    "@typescript-eslint/parser": "5.49.0",
+    "@typescript-eslint/parser": "5.60.1",
     "cordova-res": "0.15.4",
-    "cypress": "12.0.1",
+    "cypress": "12.17.1",
-    "eslint": "8.33.0",
+    "eslint": "8.43.0",
-    "eslint-plugin-jsdoc": "39.7.4",
+    "eslint-plugin-jsdoc": "46.4.2",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-unicorn": "45.0.2",
+    "eslint-plugin-unicorn": "47.0.0",
     "fontkit": "2.0.2",
     "glob": "10.2.7",
     "http-server": "14.1.1",
     "is-docker": "2.2.1",
-    "jasmine-core": "4.5.0",
+    "jasmine-core": "5.0.1",
     "jasmine-spec-reporter": "7.0.0",
     "jetifier": "2.0.0",
     "junit-report-merger": "6.0.2",
-    "karma": "6.4.1",
+    "karma": "6.4.2",
-    "karma-chrome-launcher": "3.1.1",
+    "karma-chrome-launcher": "3.2.0",
     "karma-coverage": "2.2.1",
     "karma-jasmine": "5.1.0",
     "karma-junit-reporter": "2.0.1",
     "karma-mocha-reporter": "2.2.5",
     "license-checker": "25.0.1",
-    "protractor": "7.0.0",
     "stylelint": "15.10.1",
     "stylelint-config-clean-order": "5.0.1",
     "stylelint-config-prettier-scss": "1.0.0",
@@ -171,7 +172,7 @@
     "stylelint-config-standard-scss": "10.0.0",
     "surge": "0.23.1",
     "ts-node": "10.9.1",
-    "typescript": "4.6.4",
+    "typescript": "5.1.6",
     "webpack-bundle-analyzer": "4.7.0"
   },
   "prettier": "@openstapps/prettier-config",

frontend/app/src/app/_helpers/collections/chunk.ts

@@ -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.
  */

frontend/app/src/app/_helpers/errors.ts

@@ -19,7 +19,6 @@
 export class AppError extends Error {
   /**
    * TODO
-   *
    * @param name Name of the error
    * @param message Message of the error
    */

frontend/app/src/app/animation/animation-choreographer.ts

@@ -25,13 +25,12 @@ import {SHARED_AXIS_DIRECTIONS} from './material-motion';
  *
  * ```html
  * <div [ngSwitch]='choreographer.state'
- *      [@animation]='choreographer.animationState'
+ * [@animation]='choreographer.animationState'
- *      [@animation.done]='choreographer.done()'>
+ * [@animation.done]='choreographer.done()'>
- *      <div *ngSwitchCase='"a"'/>
+ * <div *ngSwitchCase='"a"'/>
- *      <div *ngSwitchCase='"b"'/>
+ * <div *ngSwitchCase='"b"'/>
  * </div>
  * ```
- *
  * @see {@link https://material.io/design/motion/the-motion-system.html#shared-axis}
  */
 export class SharedAxisChoreographer<T> {

frontend/app/src/app/animation/material-motion.ts

@@ -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}
  */

frontend/app/src/app/app.module.ts

@@ -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) {

frontend/app/src/app/modules/about/about-page/about-page-content.html

@@ -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>

frontend/app/src/app/modules/about/about-page/about-page.scss

@@ -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);

frontend/app/src/app/modules/auth/auth-helper.service.ts

@@ -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) {

frontend/app/src/app/modules/calendar/add-event-review-modal.html

@@ -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"
-      <ion-checkbox [(ngModel)]="includeCancelled" slot="end"></ion-checkbox>
+        >{{ 'schedule.toCalendar.reviewModal.INCLUDE_CANCELLED' | translate }}</ion-checkbox
+      >
     </ion-item>
   </div>
   <div class="horizontal-flex">

frontend/app/src/app/modules/calendar/calendar.service.ts

@@ -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) {

frontend/app/src/app/modules/calendar/ical/ical.ts

@@ -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;

frontend/app/src/app/modules/catalog/catalog.provider.ts

@@ -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

frontend/app/src/app/modules/config/config.provider.ts

@@ -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> {

frontend/app/src/app/modules/dashboard/dashboard.provider.ts

@@ -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

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

@@ -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() {

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

@@ -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-item class="list-header" lines="none">
-  <ion-list-header>
+  <ion-checkbox
-    <ion-label>{{ 'data.chips.add_events.popover.ALL' | translate }}</ion-label>
+    [checked]="selection.checked"
-  </ion-list-header>
+    [indeterminate]="selection.indeterminate"
-  <ion-checkbox slot="end" [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-item lines="none" class="list-header">
-      <ion-list-header>
+      <ion-checkbox
-        <ion-label
+        [checked]="frequency.checked"
-          >{{ frequency.children[0].item.repeatFrequency ? (frequency.children[0].item.repeatFrequency |
+        [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
+          titlecase) }}
-        >
+        </ion-list-header>
-        <ion-button></ion-button>
-      </ion-list-header>
-      <ion-checkbox slot="end" [checked]="frequency.checked" [indeterminate]="frequency.indeterminate">
       </ion-checkbox>
     </ion-item>
-    <ion-item
+    <ion-item *ngFor="let date of frequency.children">
-      *ngFor="let date of frequency.children"
+      <ion-checkbox
-      (click)="modified.emit(); date.selected = !date.selected; frequency.notifyChildChanged()"
+        [checked]="date.selected"
-    >
+        (ionChange)="modified.emit(); date.selected = !date.selected; frequency.notifyChildChanged()"
-      <ion-label>
+      >
         <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>
-      <ion-checkbox slot="end" [checked]="date.selected"> </ion-checkbox>
     </ion-item>
   </ion-list>
 </ng-container>

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

@@ -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);
+    --border-color: var(--ion-color-primary-contrast);
-    --background-checked: 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;
+    }
   }
 }
 

frontend/app/src/app/modules/data/data-facets.provider.ts

@@ -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[] {

frontend/app/src/app/modules/data/data-routing.service.ts

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

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

@@ -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> {

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

@@ -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

frontend/app/src/app/modules/data/detail/data-detail.component.spec.ts

@@ -65,7 +65,7 @@ describe('DataDetailComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
-        RouterModule.forRoot([], {relativeLinkResolution: 'legacy'}),
+        RouterModule.forRoot([]),
         DataRoutingModule,
         DataModule,
         TranslateModule.forRoot({

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

@@ -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
    */

frontend/app/src/app/modules/data/elements/favorite-button.component.ts

@@ -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) {

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

@@ -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 {

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

@@ -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> {

frontend/app/src/app/modules/data/stapps-web-http-client.provider.ts

@@ -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>> {

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

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

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

@@ -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 {

frontend/app/src/app/modules/data/types/place/place-types.ts

@@ -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 {

frontend/app/src/app/modules/favorites/favorites.service.ts

@@ -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

frontend/app/src/app/modules/feedback/feedback-page.html

@@ -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>

frontend/app/src/app/modules/feedback/feedback-page.scss

@@ -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;

frontend/app/src/app/modules/hebis/daia-availability/daia-availability.component.spec.ts

@@ -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({

frontend/app/src/app/modules/hebis/daia-availability/daia-availability.component.ts

@@ -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) {

frontend/app/src/app/modules/hebis/daia-data.provider.ts

@@ -46,7 +46,6 @@ export class DaiaDataProvider {
 
   /**
    * TODO
-   *
    * @param storageProvider TODO
    * @param httpClient TODO
    * @param configProvider TODO

frontend/app/src/app/modules/hebis/hebis-data.provider.ts

@@ -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)

frontend/app/src/app/modules/hebis/hebis-detail/hebis-detail.component.spec.ts

@@ -65,7 +65,7 @@ describe('HebisDetailComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
-        RouterModule.forRoot([], {relativeLinkResolution: 'legacy'}),
+        RouterModule.forRoot([]),
         HebisRoutingModule,
         HebisModule,
         IonicModule,

frontend/app/src/app/modules/hebis/hebis-detail/hebis-detail.component.ts

@@ -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
    */

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

@@ -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,

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

@@ -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> {

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

@@ -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)
  */

frontend/app/src/app/modules/map/map.provider.ts

@@ -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
    */

frontend/app/src/app/modules/map/page/map-page.component.ts

@@ -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) {

frontend/app/src/app/modules/map/position.service.ts

@@ -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> {

frontend/app/src/app/modules/menu/context/context-menu.component.spec.ts

@@ -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(sort!.querySelector('ion-radio')?.textContent).toContain('relevance');
-    expect(sortItem!.querySelector('ion-label')?.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));

frontend/app/src/app/modules/menu/context/context-menu.html

@@ -32,14 +32,13 @@
           *ngFor="let value of sortOption.values; index as i"
           (click)="sortChanged(sortOption, sortOption.values[i])"
         >
-          <ion-label
+          <ion-radio [value]="i">
-            >{{ 'menu.context.sort.' + value.value | translate | titlecase }}
+            {{ '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>
-          <ion-radio slot="end" [value]="i"></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

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

@@ -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 => {

frontend/app/src/app/modules/menu/navigation/navigation.scss

@@ -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 {

frontend/app/src/app/modules/news/elements/news-filter-settings/news-settings-filter.component.ts

@@ -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) {

frontend/app/src/app/modules/news/news.provider.ts

@@ -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

frontend/app/src/app/modules/news/page/news-page.component.ts

@@ -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[]) {

frontend/app/src/app/modules/schedule/page/components/calendar.component.ts

@@ -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);
   }
 
   /**

frontend/app/src/app/modules/schedule/page/schedule-page.component.ts

@@ -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 (
+    return responsiveConfig.find(value => width < value.until) ?? responsiveConfig.at(-1)!;
-      responsiveConfig.find(value => width < value.until) ?? responsiveConfig[responsiveConfig.length - 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() {

frontend/app/src/app/modules/settings/item/settings-item.component.ts

@@ -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
    */

frontend/app/src/app/modules/settings/item/settings-item.html

@@ -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'">

frontend/app/src/app/modules/settings/page/calendar-sync-settings.html

@@ -28,6 +28,8 @@
           <ion-toggle
             [disabled]="isWeb"
             [checked]="syncEnabled"
+            label-placement="end"
+            justify="start"
             (ionChange)="
               setSetting({
                 sync: $event.detail.checked
@@ -35,8 +37,8 @@
               syncCalendar($event.detail.checked)
             "
           >
+            {{ 'settings.calendar.sync.syncWithCalendar' | translate }}
           </ion-toggle>
-          <ion-label>{{ 'settings.calendar.sync.syncWithCalendar' | translate }}</ion-label>
         </ion-item>
         <!--
         ~ TODO:

frontend/app/src/app/modules/settings/page/settings-page.scss

@@ -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,

frontend/app/src/app/modules/settings/settings.provider.ts

@@ -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
    */

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

@@ -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

frontend/app/src/app/modules/storage/storage.provider.spec.ts

@@ -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';
 

frontend/app/src/app/modules/storage/storage.provider.ts

@@ -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>> {

frontend/app/src/app/translation/thing-translate.parser.ts

@@ -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('.');

frontend/app/src/app/translation/thing-translate.service.ts

@@ -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

frontend/app/src/app/util/array-last.pipe.ts

@@ -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);
   }
 }

frontend/app/src/app/util/ionic-storage.module.ts

@@ -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],
-        },
-      ],
-    };
-  }
-}

frontend/app/src/app/util/section.component.scss

@@ -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;

frontend/app/src/global.scss

@@ -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';

frontend/app/src/polyfills.ts

@@ -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';

frontend/app/src/test.ts

@@ -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();

frontend/app/src/theme/colors.scss

@@ -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);

frontend/app/src/theme/common/_ion-header.scss

@@ -1,4 +1,6 @@
 app-root ion-header[class*='header-'] {
+  box-shadow: unset;
+
   &::after {
     background-image: unset;
   }

frontend/app/src/theme/variables.scss

@@ -16,8 +16,6 @@
 // http://ionicframework.com/docs/theming/
 @import './colors';
 
-@import '~swiper/css/navigation';
-
 // Import all other styles
 @import './fonts';
 @import './common/typo';

frontend/app/tsconfig.app.json

@@ -3,6 +3,6 @@
   "compilerOptions": {
     "outDir": "../out-tsc/app"
   },
-  "files": ["src/main.ts", "src/polyfills.ts"],
+  "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"]
 }

frontend/app/tsconfig.json

@@ -7,11 +7,13 @@
     "declaration": false,
     "emitDecoratorMetadata": true,
     "skipLibCheck": false,
+    "isolatedModules": false,
     "strictPropertyInitialization": false,
     "resolveJsonModule": true,
     "downlevelIteration": true,
     "importHelpers": true,
-    "module": "ES2020",
+    "useDefineForClassFields": false,
+    "module": "ES2022",
     "moduleResolution": "Node"
   },
   "exclude": ["**/*.spec.ts"]

frontend/app/tsconfig.spec.json

@@ -2,7 +2,6 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/spec",
-    "baseUrl": "./",
     "types": ["jasmine", "node"],
     "paths": {
       "@capacitor/*": ["__mocks__/@capacitor/*"]
@@ -10,5 +9,5 @@
   },
   "files": ["src/test.ts"],
   "exclude": ["cypress"],
-  "include": ["src/polyfills.ts", "**/*.spec.ts", "**/*.d.ts"]
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
 }

package.json

@@ -39,6 +39,6 @@
     "turbo": "1.10.3",
     "turbo-ignore": "1.10.6",
     "typedoc": "0.24.8",
-    "typescript": "4.9.5"
+    "typescript": "5.1.6"
   }
 }

packages/api-cli/package.json

@@ -69,7 +69,7 @@
     "nock": "13.3.1",
     "ts-node": "10.9.1",
     "tsup": "6.7.0",
-    "typescript": "4.9.5"
+    "typescript": "5.1.6"
   },
   "tsup": {
     "entry": [

packages/api-cli/src/e2e.ts

@@ -26,6 +26,9 @@ import junit from 'junit-report-builder';
 const localItemMap: Map<string, SCThings> = new Map();
 const remoteItemMap: Map<string, SCThings> = new Map();
 
+/**
+ *
+ */
 async function runTest(name: string, scope: () => Promise<void>, suite: junit.TestSuite, errors: string[]) {
   const testCase = suite.testCase().name(name);
   process.stdout.addListener('data', testCase.standardOutput);