refactor: build system

frontend/app/angular.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "defaultProject": "app",
   "newProjectRoot": "projects",

frontend/app/icons.config.ts

@@ -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 type {IconConfig} from './scripts/icon-config.js';
+import type {IconConfig} from './scripts/icon-config';
 
 const config: IconConfig = {
   inputPath: 'node_modules/material-symbols/material-symbols-rounded.woff2',

frontend/app/package.json

@@ -2,6 +2,7 @@
   "name": "@openstapps/app",
   "description": "The generic app tailored to fulfill needs of German universities, written using Ionic Framework.",
   "version": "2.1.0",
+  "type": "module",
   "license": "GPL-3.0-only",
   "author": "Karl-Philipp Wulfert <krlwlfrt@gmail.com>",
   "contributors": [
@@ -20,7 +21,6 @@
     "build:prod": "ng build --configuration=production",
     "build:stats": "ng build --configuration=production --stats-json",
     "changelog": "conventional-changelog -p angular -i src/assets/about/CHANGELOG.md -s -r 0",
-    "check-configuration": "openstapps-configuration",
     "check-icons": "ts-node scripts/check-icon-correctness.ts",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
@@ -30,9 +30,8 @@
     "docker:pull": "sudo docker pull registry.gitlab.com/openstapps/app",
     "docker:run:android": "sudo docker run -v $PWD:/app --privileged -v /dev/bus/usb:/dev/bus/usb --net=host -it registry.gitlab.com/openstapps/app bash -c \"npm run run:android\"",
     "docker:serve": "sudo docker run -p 8100:8100 -p 35729:35729 -p 53703:53703 -v $PWD:/app -it registry.gitlab.com/openstapps/app bash -c \"npm run start:external\"",
-    "documentation": "compodoc -p tsconfig.json -d docs",
     "e2e": "ng e2e",
-    "format:check": "prettier --check .",
+    "format": "prettier .",
     "format:fix": "prettier --write .",
     "licenses": "license-checker --json > src/assets/about/licenses.json && ts-node ./scripts/accumulate-licenses.ts && git add src/assets/about/licenses.json",
     "lint": "ng lint",
@@ -40,8 +39,6 @@
     "minify-icons": "ts-node scripts/minify-icon-font.ts",
     "ng": "ng",
     "postinstall": "npx jetify",
-    "prepublishOnly": "npm ci && npm run build && npm run lint && npm run format:check",
-    "preversion": "npm run prepublishOnly",
     "push": "git push && git push origin \"v$npm_package_version\"",
     "resources:android": "cordova-res android --skip-config --copy",
     "resources:ios": "cordova-res ios --skip-config --copy",
@@ -49,8 +46,7 @@
     "start": "ionic serve",
     "start:external": "ionic serve --external",
     "start:prod": "ionic serve -- --configuration=production",
-    "test": "ng test",
-    "version": "npm run changelog && npm run licenses && npm run format:fix"
+    "test": "ng test"
   },
   "dependencies": {
     "@angular/animations": "13.3.11",
@@ -89,12 +85,11 @@
     "@ngx-translate/http-loader": "7.0.0",
     "@openid/appauth": "1.3.1",
     "@openstapps/api": "workspace:*",
-    "@openstapps/configuration": "workspace:*",
     "@openstapps/core": "workspace:*",
     "@transistorsoft/capacitor-background-fetch": "1.0.2",
     "capacitor-secure-storage-plugin": "0.8.1",
     "cordova-plugin-calendar": "5.1.6",
-    "deepmerge": "4.3.0",
+    "deepmerge": "4.3.1",
     "form-data": "4.0.0",
     "geojson": "0.5.0",
     "ionic-appauth": "0.9.0",
@@ -134,6 +129,7 @@
     "@ionic/angular-toolkit": "6.1.0",
     "@ionic/cli": "6.20.4",
     "@openstapps/prettier-config": "workspace:*",
+    "@openstapps/tsconfig": "workspace:*",
     "@types/fontkit": "1.8.0",
     "@types/geojson": "1.0.6",
     "@types/glob": "8.0.1",
@@ -145,16 +141,14 @@
     "@types/node": "18.15.3",
     "@typescript-eslint/eslint-plugin": "5.49.0",
     "@typescript-eslint/parser": "5.49.0",
-    "conventional-changelog-cli": "2.2.2",
     "cordova-res": "0.15.4",
     "cypress": "12.0.1",
     "eslint": "8.33.0",
-    "eslint-config-prettier": "8.6.0",
     "eslint-plugin-jsdoc": "39.7.4",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-unicorn": "45.0.2",
     "fontkit": "2.0.2",
-    "glob": "8.1.0",
+    "glob": "10.2.1",
     "is-docker": "2.2.1",
     "jasmine-core": "4.5.0",
     "jasmine-spec-reporter": "7.0.0",
@@ -166,13 +160,13 @@
     "karma-jasmine-html-reporter": "2.0.0",
     "karma-mocha-reporter": "2.2.5",
     "license-checker": "25.0.1",
-    "prettier": "2.8.3",
     "protractor": "7.0.0",
     "surge": "0.23.1",
     "ts-node": "10.9.1",
-    "typescript": "4.8.4",
+    "typescript": "4.6.4",
     "webpack-bundle-analyzer": "4.7.0"
   },
+  "prettier": "@openstapps/prettier-config",
   "cordova": {
     "plugins": {},
     "platforms": [
@@ -180,22 +174,5 @@
       "browser",
       "android"
     ]
-  },
-  "openstappsConfiguration": {
-    "forPackaging": false,
-    "hasCli": false,
-    "ignoreCiEntries": [
-      "build",
-      "image",
-      "package",
-      "pages"
-    ],
-    "ignoreScripts": [
-      "prepublishOnly",
-      "compile"
-    ],
-    "serverSide": false,
-    "standardBuild": false,
-    "standardDocumentation": false
   }
 }

frontend/app/scripts/accumulate-licenses.ts

@@ -13,8 +13,8 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import fs from 'fs';
-import {omit} from '../src/app/_helpers/collections/omit.js';
-import {pickBy} from '../src/app/_helpers/collections/pick.js';
+import {omit} from '../src/app/_helpers/collections/omit';
+import {pickBy} from '../src/app/_helpers/collections/pick';
 
 /**
  * accumulate and transform licenses based on two license files

frontend/app/scripts/check-icon-correctness.ts

@@ -15,7 +15,7 @@
 import fontkit, {Font} from 'fontkit';
 import config from '../icons.config';
 import {existsSync} from 'fs';
-import {getUsedIconsHtml, getUsedIconsTS} from './gather-used-icons.js';
+import {getUsedIconsHtml, getUsedIconsTS} from './gather-used-icons';
 
 const commandName = '"npm run minify-icons"';
 const originalFont = fontkit.openSync(config.inputPath);

frontend/app/scripts/gather-used-icons.ts

@@ -14,7 +14,7 @@
  */
 import glob from 'glob';
 import {readFileSync} from 'fs';
-import {matchPropertyContent, matchTagProperties} from '../src/app/util/ion-icon/icon-match.js';
+import {matchPropertyContent, matchTagProperties} from '../src/app/util/ion-icon/icon-match';
 
 const globPromise = (pattern: string) =>
   new Promise<string[]>((resolve, reject) =>

frontend/app/scripts/minify-icon-font.ts

@@ -18,7 +18,7 @@ import fontkit from 'fontkit';
 import {exec} from 'child_process';
 import config from '../icons.config';
 import {statSync} from 'fs';
-import {getUsedIconsHtml, getUsedIconsTS} from './gather-used-icons.js';
+import {getUsedIconsHtml, getUsedIconsTS} from './gather-used-icons';
 
 /**
  *

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

@@ -13,7 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {chunk} from './chunk.js';
+import {chunk} from './chunk';
 
 describe('chunk', function () {
   it('should chunk items in the correct sizes', function () {

frontend/app/src/app/_helpers/collections/difference.spec.ts

@@ -13,7 +13,7 @@
  *  this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {differenceBy} from './difference.js';
+import {differenceBy} from './difference';
 
 describe('differenceBy', function () {
   it('should return the difference of two arrays', function () {

frontend/app/src/app/_helpers/collections/get.spec.ts

@@ -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 {get} from './get.js';
+import {get} from './get';
 
 describe('get', function () {
   it('should get a simple path', function () {

frontend/app/src/app/_helpers/collections/group-by.spec.ts

@@ -13,7 +13,7 @@
  *  this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {groupBy, groupByStable, groupByProperty} from './group-by.js';
+import {groupBy, groupByStable, groupByProperty} from './group-by';
 
 describe('groupBy', () => {
   it('should group an array by a key', () => {

frontend/app/src/app/_helpers/collections/key-by.spec.ts

@@ -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 {keyBy} from './key-by.js';
+import {keyBy} from './key-by';
 
 describe('keyBy', function () {
   it('should key objects', function () {

frontend/app/src/app/_helpers/collections/map-values.spec.ts

@@ -13,7 +13,7 @@
  *  this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {mapValues} from './map-values.js';
+import {mapValues} from './map-values';
 
 describe('map-values', () => {
   it('should map values', () => {

frontend/app/src/app/_helpers/collections/min.spec.ts

@@ -13,7 +13,7 @@
  *  this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {minBy} from './min.js';
+import {minBy} from './min';
 
 describe('minBy', function () {
   it('should pick the minimum value based on transform', function () {

frontend/app/src/app/_helpers/collections/omit.spec.ts

@@ -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 {omit} from './omit.js';
+import {omit} from './omit';
 
 describe('omit', function () {
   it('should omit keys', function () {

frontend/app/src/app/_helpers/collections/partition.spec.ts

@@ -13,7 +13,7 @@
  *  this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {partition} from './partition.js';
+import {partition} from './partition';
 
 describe('partition', function () {
   it('should partition an array', function () {

frontend/app/src/app/_helpers/collections/pick.spec.ts

@@ -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 {pick} from './pick.js';
+import {pick} from './pick';
 
 describe('pick', function () {
   it('should pick properties', function () {

frontend/app/src/app/_helpers/collections/shuffle.spec.ts

@@ -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 {shuffle} from './shuffle.js';
+import {shuffle} from './shuffle';
 
 describe('shuffle', function () {
   it('should shuffle an array', function () {

frontend/app/src/app/_helpers/collections/string-sort.spec.ts

@@ -13,7 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {stringSort, stringSortBy} from './string-sort.js';
+import {stringSort, stringSortBy} from './string-sort';
 
 describe('stringSort', () => {
   it('should sort an array of strings', () => {

frontend/app/src/app/_helpers/collections/sum.spec.ts

@@ -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 {sum, sumBy} from './sum.js';
+import {sum, sumBy} from './sum';
 
 describe('sum', () => {
   it('should return the sum of all elements in the collection', () => {

frontend/app/src/app/_helpers/collections/tree-group.spec.ts

@@ -13,7 +13,7 @@
  *  this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {Tree, treeGroupBy} from './tree-group.js';
+import {Tree, treeGroupBy} from './tree-group';
 
 interface TestItem {
   id: number;

frontend/app/src/app/_helpers/collections/uniq.spec.ts

@@ -13,7 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {uniqBy} from './uniq.js';
+import {uniqBy} from './uniq';
 
 describe('uniq', function () {
   it('should return an array with unique values', function () {

frontend/app/src/app/_helpers/collections/zip.spec.ts

@@ -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 {zip} from './zip.js';
+import {zip} from './zip';
 
 describe('zip', function () {
   it('should zip arrays together', function () {

frontend/app/src/app/_helpers/data/filters.ts

@@ -14,7 +14,7 @@
  */
 
 import {SCSearchBooleanFilter, SCSearchFilter, SCSearchValueFilter, SCThing} from '@openstapps/core';
-import {logger} from '../ts-logger.js';
+import {logger} from '../ts-logger';
 
 /**
  * Checks if any filter applies to an SCThing

frontend/app/src/app/_helpers/data/sample-things.ts

@@ -34,8 +34,8 @@ import {
   SCToDoPriority,
 } from '@openstapps/core';
 import {Observable, of} from 'rxjs';
-import {checkFilter} from './filters.js';
-import {sampleResources} from './resources/test-resources.js';
+import {checkFilter} from './filters';
+import {sampleResources} from './resources/test-resources';
 
 /* eslint-disable */
 const sampleMessages: SCMessage[] = [

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

@@ -13,7 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {SHARED_AXIS_DIRECTIONS} from './material-motion.js';
+import {SHARED_AXIS_DIRECTIONS} from './material-motion';
 
 /**
  * /**

frontend/app/src/app/app.component.spec.ts

@@ -29,7 +29,7 @@ import {SettingsProvider} from './modules/settings/settings.provider';
 import {NGXLogger} from 'ngx-logger';
 import {RouterTestingModule} from '@angular/router/testing';
 import {ScheduleSyncService} from './modules/background/schedule/schedule-sync.service';
-import {sampleAuthConfiguration} from './_helpers/data/sample-configuration.js';
+import {sampleAuthConfiguration} from './_helpers/data/sample-configuration';
 import {StorageProvider} from './modules/storage/storage.provider';
 import {SimpleBrowser} from './util/browser.factory';
 

frontend/app/src/app/app.component.ts

@@ -18,7 +18,7 @@ import {App, URLOpenListenerEvent} from '@capacitor/app';
 import {Platform, ToastController} from '@ionic/angular';
 import {SettingsProvider} from './modules/settings/settings.provider';
 import {AuthHelperService} from './modules/auth/auth-helper.service';
-import {environment} from '../environments/environment.js';
+import {environment} from '../environments/environment';
 import {StatusBar, Style} from '@capacitor/status-bar';
 import {Capacitor} from '@capacitor/core';
 import {ScheduleSyncService} from './modules/background/schedule/schedule-sync.service';

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

@@ -26,7 +26,7 @@ import 'moment/min/locales';
 import {LoggerModule, NGXLogger, NgxLoggerLevel} from 'ngx-logger';
 import SwiperCore, {FreeMode, Navigation} from 'swiper';
 
-import {environment} from '../environments/environment.js';
+import {environment} from '../environments/environment';
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
 import {CatalogModule} from './modules/catalog/catalog.module';
@@ -44,7 +44,7 @@ import {SettingsProvider} from './modules/settings/settings.provider';
 import {StorageModule} from './modules/storage/storage.module';
 import {ThingTranslateModule} from './translation/thing-translate.module';
 import {UtilModule} from './util/util.module';
-import {initLogger} from './_helpers/ts-logger.js';
+import {initLogger} from './_helpers/ts-logger';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {AboutModule} from './modules/about/about.module';
 import {FavoritesModule} from './modules/favorites/favorites.module';

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

@@ -18,8 +18,8 @@ import {ConfigProvider} from '../config/config.provider';
 import {SCAssessment, SCUuid} from '@openstapps/core';
 import {DefaultAuthService} from '../auth/default-auth.service';
 import {HttpClient} from '@angular/common/http';
-import {uniqBy} from '../../_helpers/collections/uniq.js';
-import {keyBy} from '../../_helpers/collections/key-by.js';
+import {uniqBy} from '../../_helpers/collections/uniq';
+import {keyBy} from '../../_helpers/collections/key-by';
 
 /**
  *

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

@@ -19,12 +19,12 @@ import {SCAssessment, SCCourseOfStudy} from '@openstapps/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Subscription} from 'rxjs';
 import {NGXLogger} from 'ngx-logger';
-import {materialSharedAxisX} from '../../../animation/material-motion.js';
-import {SharedAxisChoreographer} from '../../../animation/animation-choreographer.js';
+import {materialSharedAxisX} from '../../../animation/material-motion';
+import {SharedAxisChoreographer} from '../../../animation/animation-choreographer';
 import {DataProvider, DataScope} from '../../data/data.provider';
 import {DataRoutingService} from '../../data/data-routing.service';
-import {groupBy} from '../../../_helpers/collections/group-by.js';
-import {mapValues} from '../../../_helpers/collections/map-values.js';
+import {groupBy} from '../../../_helpers/collections/group-by';
+import {mapValues} from '../../../_helpers/collections/map-values';
 
 @Component({
   selector: 'app-assessments-page',

frontend/app/src/app/modules/assessments/types/assessment/assessment-base-info.html

@@ -14,16 +14,8 @@
   -->
 
 <ion-label [color]="passed ? undefined : 'danger'"
-  >{{
-    (_item.grade | isNumeric)
-      ? (_item.grade | numberLocalized : 'minimumFractionDigits:1,maximumFractionDigits:1')
-      : ''
-  }}
-  {{ 'status' | thingTranslate : _item | titlecase }},
-  {{ 'attempt' | propertyNameTranslate : _item }}
-  {{ _item.attempt }}
+  >{{ (_item.grade | isNumeric) ? (_item.grade | numberLocalized :
+  'minimumFractionDigits:1,maximumFractionDigits:1') : '' }} {{ 'status' | thingTranslate : _item | titlecase
+  }}, {{ 'attempt' | propertyNameTranslate : _item }} {{ _item.attempt }}
 </ion-label>
-<ion-note>
-  {{ _item.ects }}
-  {{ 'ects' | propertyNameTranslate : _item }}</ion-note
->
+<ion-note> {{ _item.ects }} {{ 'ects' | propertyNameTranslate : _item }}</ion-note>

frontend/app/src/app/modules/assessments/types/assessment/assessment-detail.html

@@ -16,9 +16,8 @@
 <ion-card>
   <ion-card-content>
     <ion-note *ngIf="item.courseOfStudy as courseOfStudy">
-      {{ $any('courseOfStudy' | propertyNameTranslate : item) | titlecase }}:
-      {{ 'name' | thingTranslate : $any(courseOfStudy) }}
-      ({{ 'academicDegree' | thingTranslate : $any(courseOfStudy) }})
+      {{ $any('courseOfStudy' | propertyNameTranslate : item) | titlecase }}: {{ 'name' | thingTranslate :
+      $any(courseOfStudy) }} ({{ 'academicDegree' | thingTranslate : $any(courseOfStudy) }})
     </ion-note>
   </ion-card-content>
 </ion-card>

frontend/app/src/app/modules/assessments/types/assessment/assessment-list-item.html

@@ -14,9 +14,6 @@
   -->
 
 <div class="container">
-  <h2 class="name">
-    {{ 'name' | thingTranslate : item }}
-    {{ item.date ? (item.date | amDateFormat) : '' }}
-  </h2>
+  <h2 class="name">{{ 'name' | thingTranslate : item }} {{ item.date ? (item.date | amDateFormat) : '' }}</h2>
   <assessment-base-info [item]="item"></assessment-base-info>
 </div>

frontend/app/src/app/modules/assessments/types/course-of-study/course-of-study-assessment.html

@@ -14,9 +14,7 @@
   -->
 
 <section>
-  <h3>
-    {{ 'assessments.courseOfStudyAssessments.ASSESSMENTS' | translate }}
-  </h3>
+  <h3>{{ 'assessments.courseOfStudyAssessments.ASSESSMENTS' | translate }}</h3>
 
   <assessments-tree-list [items]="_assessments" [singleType]="true" [groupingKey]="'superAssessments'">
   </assessments-tree-list>

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

@@ -14,7 +14,7 @@
  */
 
 import {Injectable} from '@angular/core';
-import {IPAIAAuthAction} from './paia/paia-auth-action.js';
+import {IPAIAAuthAction} from './paia/paia-auth-action';
 import {AuthActions, IAuthAction} from 'ionic-appauth';
 import {TranslateService} from '@ngx-translate/core';
 import {JSONPath} from 'jsonpath-plus';

frontend/app/src/app/modules/auth/auth-routing.module.ts

@@ -15,7 +15,7 @@
 
 import {RouterModule, Routes} from '@angular/router';
 import {NgModule} from '@angular/core';
-import {authPaths} from './auth-paths.js';
+import {authPaths} from './auth-paths';
 import {AuthCallbackPageComponent} from './auth-callback/page/auth-callback-page.component';
 import {PAIAAuthCallbackPageComponent} from './paia/auth-callback/page/paiaauth-callback-page.component';
 

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

@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {Platform} from '@ionic/angular';
 import {Requestor, StorageBackend} from '@openid/appauth';
-import {storageFactory} from './factories.js';
+import {storageFactory} from './factories';
 import {Browser} from 'ionic-appauth';
 import {CapacitorBrowser} from 'ionic-appauth/lib/capacitor';
 import {httpFactory} from './factories/http.factory';

frontend/app/src/app/modules/auth/auth.provider.methods.ts

@@ -17,8 +17,8 @@ import {AuthorizationServiceConfigurationJson} from '@openid/appauth';
 import {IAuthConfig} from 'ionic-appauth';
 import {SCAuthorizationProvider, SCAuthorizationProviderType} from '@openstapps/core';
 import {Capacitor} from '@capacitor/core';
-import {authPaths} from './auth-paths.js';
-import {environment} from '../../../environments/environment.js';
+import {authPaths} from './auth-paths';
+import {environment} from '../../../environments/environment';
 
 /**
  * Get configuration of an OAuth2 client

frontend/app/src/app/modules/auth/factories/http.factory.ts

@@ -15,7 +15,7 @@
 
 import {HttpClient} from '@angular/common/http';
 import {Platform} from '@ionic/angular';
-import {CapacitorRequestor} from '../capacitor-requestor.js';
+import {CapacitorRequestor} from '../capacitor-requestor';
 import {NgHttpService} from '../ng-http.service';
 
 export const httpFactory = (platform: Platform, httpClient: HttpClient) => {

frontend/app/src/app/modules/auth/factories/storage.factory.ts

@@ -15,7 +15,7 @@
 
 import {Platform} from '@ionic/angular';
 import {IonicStorage} from 'ionic-appauth/lib';
-import {SafeCapacitorSecureStorage} from '../../storage/capacitor-secure-storage.js';
+import {SafeCapacitorSecureStorage} from '../../storage/capacitor-secure-storage';
 
 export const storageFactory = (platform: Platform) => {
   return platform.is('capacitor') ? new SafeCapacitorSecureStorage() : new IonicStorage();

frontend/app/src/app/modules/auth/paia/authorization-request-handler.ts

@@ -25,9 +25,9 @@ import {
   BUILT_IN_PARAMETERS,
 } from '@openid/appauth';
 import {Browser} from 'ionic-appauth';
-import {PAIAAuthorizationNotifier} from './paia-authorization-notifier.js';
-import {PAIAAuthorizationRequestResponse} from './authorization-request-response.js';
-import {PAIAAuthorizationResponse, PAIAAuthorizationResponseJson} from './paia-authorization-response.js';
+import {PAIAAuthorizationNotifier} from './paia-authorization-notifier';
+import {PAIAAuthorizationRequestResponse} from './authorization-request-response';
+import {PAIAAuthorizationResponse, PAIAAuthorizationResponseJson} from './paia-authorization-response';
 
 /** key for authorization request. */
 const authorizationRequestKey = (handle: string) => {

frontend/app/src/app/modules/auth/paia/authorization-request-response.ts

@@ -14,7 +14,7 @@
  */
 
 import {AuthorizationError, AuthorizationRequest} from '@openid/appauth';
-import {PAIAAuthorizationResponse} from './paia-authorization-response.js';
+import {PAIAAuthorizationResponse} from './paia-authorization-response';
 
 /**
  * Represents a structural type holding both authorization request and response.

frontend/app/src/app/modules/auth/paia/paia-auth-action.ts

@@ -13,7 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {PAIATokenResponse} from './paia-token-response.js';
+import {PAIATokenResponse} from './paia-token-response';
 import {AuthActionBuilder, IAuthAction} from 'ionic-appauth';
 
 export interface IPAIAAuthAction extends IAuthAction {

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

@@ -40,13 +40,13 @@ import {
   UserInfoHandler,
 } from 'ionic-appauth';
 import {BehaviorSubject, Observable} from 'rxjs';
-import {PAIATokenRequestHandler} from './token-request-handler.js';
-import {PAIAAuthorizationRequestHandler} from './authorization-request-handler.js';
-import {PAIATokenRequest, PAIATokenRequestJson} from './paia-token-request.js';
-import {PAIAAuthorizationResponse} from './paia-authorization-response.js';
-import {PAIAAuthorizationNotifier} from './paia-authorization-notifier.js';
-import {PAIATokenResponse} from './paia-token-response.js';
-import {IPAIAAuthAction, PAIAAuthActionBuilder} from './paia-auth-action.js';
+import {PAIATokenRequestHandler} from './token-request-handler';
+import {PAIAAuthorizationRequestHandler} from './authorization-request-handler';
+import {PAIATokenRequest, PAIATokenRequestJson} from './paia-token-request';
+import {PAIAAuthorizationResponse} from './paia-authorization-response';
+import {PAIAAuthorizationNotifier} from './paia-authorization-notifier';
+import {PAIATokenResponse} from './paia-token-response';
+import {IPAIAAuthAction, PAIAAuthActionBuilder} from './paia-auth-action';
 import {SCAuthorizationProvider} from '@openstapps/core';
 import {ConfigProvider} from '../../config/config.provider';
 import {getClientConfig, getEndpointsConfig} from '../auth.provider.methods';

frontend/app/src/app/modules/auth/paia/paia-authorization-listener.ts

@@ -14,7 +14,7 @@
  */
 
 import {AuthorizationError, AuthorizationRequest} from '@openid/appauth';
-import {PAIAAuthorizationResponse} from './paia-authorization-response.js';
+import {PAIAAuthorizationResponse} from './paia-authorization-response';
 
 export type PAIAAuthorizationListener = (
   request: AuthorizationRequest,

frontend/app/src/app/modules/auth/paia/paia-authorization-notifier.ts

@@ -12,9 +12,9 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {PAIAAuthorizationListener} from './paia-authorization-listener.js';
+import {PAIAAuthorizationListener} from './paia-authorization-listener';
 import {AuthorizationError, AuthorizationRequest} from '@openid/appauth';
-import {PAIAAuthorizationResponse} from './paia-authorization-response.js';
+import {PAIAAuthorizationResponse} from './paia-authorization-response';
 
 export class PAIAAuthorizationNotifier {
   // eslint-disable-next-line unicorn/no-null

frontend/app/src/app/modules/auth/paia/paia-user-info-handler.ts

@@ -13,7 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {AuthorizationServiceConfiguration, Requestor} from '@openid/appauth';
-import {PAIATokenResponse} from './paia-token-response.js';
+import {PAIATokenResponse} from './paia-token-response';
 
 export interface UserInfoHandler {
   performUserInfoRequest(

frontend/app/src/app/modules/auth/paia/token-request-handler.ts

@@ -23,8 +23,8 @@ import {
   AppAuthError,
   TokenError,
 } from '@openid/appauth';
-import {PAIATokenRequest} from './paia-token-request.js';
-import {PAIATokenResponse, PAIATokenResponseJson} from './paia-token-response.js';
+import {PAIATokenRequest} from './paia-token-request';
+import {PAIATokenResponse, PAIATokenResponseJson} from './paia-token-response';
 
 export class PAIATokenRequestHandler {
   constructor(

frontend/app/src/app/modules/background/schedule/schedule-sync.service.ts

@@ -27,15 +27,15 @@ import {DateFormatPipe, DurationPipe} from 'ngx-moment';
 import {BackgroundFetch} from '@transistorsoft/capacitor-background-fetch';
 import {StorageProvider} from '../../storage/storage.provider';
 import {CalendarService} from '../../calendar/calendar.service';
-import {toICal} from '../../calendar/ical/ical.js';
+import {toICal} from '../../calendar/ical/ical';
 import {Subscription} from 'rxjs';
-import {ChangesOf} from './changes.js';
-import {hashStringToInt} from './hash.js';
+import {ChangesOf} from './changes';
+import {hashStringToInt} from './hash';
 import {
   CALENDAR_NOTIFICATIONS_ENABLED_KEY,
   CALENDAR_SYNC_ENABLED_KEY,
   getCalendarSetting,
-} from '../../settings/page/calendar-sync-settings-keys.js';
+} from '../../settings/page/calendar-sync-settings-keys';
 import {filter} from 'rxjs/operators';
 import {Capacitor} from '@capacitor/core';
 

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

@@ -20,7 +20,7 @@ import {
   serializeICal,
   toICal,
   toICalUpdates,
-} from './ical/ical.js';
+} from './ical/ical';
 import moment from 'moment';
 import {Share} from '@capacitor/share';
 import {Directory, Encoding, Filesystem} from '@capacitor/filesystem';
@@ -30,7 +30,7 @@ import {Dialog} from '@capacitor/dialog';
 import {SCDateSeries} from '@openstapps/core';
 import {ThingTranslateService} from '../../translation/thing-translate.service';
 import {TranslateService} from '@ngx-translate/core';
-import {NewShareData, NewShareNavigator} from './new-share.js';
+import {NewShareData, NewShareNavigator} from './new-share';
 
 interface ICalInfo {
   title: string;
@@ -68,7 +68,7 @@ export class AddEventReviewModalComponent implements OnInit {
     });
 
     this.iCalEvents = this.dateSeries.map(event => ({
-      title: this.translator.translator.translatedAccess(event).event.name() ?? 'error',
+      title: this.translator.translator.translatedAccess(event).event?.name ?? 'error',
       events: toICal(event, this.translator.translator, {
         allowRRuleExceptions: true,
         excludeCancelledEvents: false,

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

@@ -34,13 +34,10 @@
             <s *ngIf="iCalEvent.cancelled; else date"
               ><ng-container [ngTemplateOutlet]="date"></ng-container>
             </s>
-            <ng-template #date>
-              {{ moment(iCalEvent.start) | amDateFormat : 'll, HH:mm' }}
-            </ng-template>
+            <ng-template #date> {{ moment(iCalEvent.start) | amDateFormat : 'll, HH:mm' }} </ng-template>
           </ion-label>
           <ion-note *ngIf="iCalEvent.rrule">
-            {{ iCalEvent.rrule.interval }}
-            {{ iCalEvent.rrule.freq | sentencecase }}
+            {{ iCalEvent.rrule.interval }} {{ iCalEvent.rrule.freq | sentencecase }}
           </ion-note>
           <ion-icon *ngIf="iCalEvent.rrule" name="event_repeat"></ion-icon>
         </ion-item>

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

@@ -15,10 +15,10 @@
 
 import {Calendar} from '@awesome-cordova-plugins/calendar/ngx';
 import {Injectable} from '@angular/core';
-import {ICalEvent} from './ical/ical.js';
+import {ICalEvent} from './ical/ical';
 import moment, {duration, Moment, unitOfTime} from 'moment';
 import {Dialog} from '@capacitor/dialog';
-import {CalendarInfo} from './calendar-info.js';
+import {CalendarInfo} from './calendar-info';
 import {Subject} from 'rxjs';
 import {ConfigProvider} from '../config/config.provider';
 

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

@@ -13,10 +13,10 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {findRRules, RRule} from './ical.js';
+import {findRRules, RRule} from './ical';
 import moment, {unitOfTime} from 'moment';
 import {SCISO8601Date} from '@openstapps/core';
-import {shuffle} from '../../../_helpers/collections/shuffle.js';
+import {shuffle} from '../../../_helpers/collections/shuffle';
 
 /**
  *

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

@@ -21,8 +21,8 @@ import {
   SCUuid,
 } from '@openstapps/core';
 import moment, {unitOfTime} from 'moment';
-import {minBy} from '../../../_helpers/collections/min.js';
-import {mapValues} from '../../../_helpers/collections/map-values.js';
+import {minBy} from '../../../_helpers/collections/min';
+import {mapValues} from '../../../_helpers/collections/map-values';
 
 export interface ICalEvent {
   name?: string;
@@ -165,14 +165,11 @@ function getICalData(
   const translated = translator.translatedAccess(dateSeries);
 
   return {
-    name: translated.event()?.name,
+    name: translated.event?.name,
     uuid: dateSeries.uid,
-    categories: [
-      'stapps',
-      ...((translated.event() as SCThingWithCategories<string, never>)?.categories ?? []),
-    ],
-    description: translated.event()?.description ?? translated.description(),
-    geo: translated.inPlace()?.name,
+    categories: ['stapps', ...((translated.event as SCThingWithCategories<string, never>)?.categories ?? [])],
+    description: translated.event?.description ?? translated.description,
+    geo: translated.inPlace?.name,
   };
 }
 

frontend/app/src/app/modules/calendar/schedule.provider.ts

@@ -28,7 +28,7 @@ import {BehaviorSubject, Observable, Subscription} from 'rxjs';
 import {DataProvider} from '../data/data.provider';
 import {map} from 'rxjs/operators';
 import {DateFormatPipe, DurationPipe} from 'ngx-moment';
-import {pick} from '../../_helpers/collections/pick.js';
+import {pick} from '../../_helpers/collections/pick';
 
 /**
  *

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

@@ -21,9 +21,9 @@ import {
   ConfigInitError,
   SavedConfigNotAvailable,
   WrongConfigVersionInStorage,
-} from './errors.js';
+} from './errors';
 import {NGXLogger} from 'ngx-logger';
-import {sampleIndexResponse} from '../../_helpers/data/sample-configuration.js';
+import {sampleIndexResponse} from '../../_helpers/data/sample-configuration';
 
 describe('ConfigProvider', () => {
   let configProvider: ConfigProvider;

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

@@ -13,11 +13,11 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {Injectable} from '@angular/core';
-import {Client} from '@openstapps/api/lib/client';
+import {Client} from '@openstapps/api';
 import {SCAppConfiguration, SCIndexResponse} from '@openstapps/core';
 import {NGXLogger} from 'ngx-logger';
 import packageJson from '../../../../package.json';
-import {environment} from '../../../environments/environment.js';
+import {environment} from '../../../environments/environment';
 import {StAppsWebHttpClient} from '../data/stapps-web-http-client.provider';
 import {StorageProvider} from '../storage/storage.provider';
 import {
@@ -26,7 +26,7 @@ import {
   ConfigValueNotAvailable,
   SavedConfigNotAvailable,
   WrongConfigVersionInStorage,
-} from './errors.js';
+} from './errors';
 
 /**
  * Key to store config in storage module

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

@@ -13,7 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {AppError} from '../../_helpers/errors.js';
+import {AppError} from '../../_helpers/errors';
 
 /**
  * Error that is thrown when fetching from backend fails

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

@@ -23,7 +23,7 @@ import {SplashScreen} from '@capacitor/splash-screen';
 import {DataRoutingService} from '../data/data-routing.service';
 import {ScheduleProvider} from '../calendar/schedule.provider';
 import {AnimationController, IonContent} from '@ionic/angular';
-import {DashboardCollapse} from './dashboard-collapse.js';
+import {DashboardCollapse} from './dashboard-collapse';
 import {BreakpointObserver} from '@angular/cdk/layout';
 
 // const scrollTimeline = new ScrollTimeline();

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

@@ -23,7 +23,7 @@ import {CoordinatedSearchProvider} from '../../coordinated-search.provider';
 import {
   chipSkeletonTransition,
   chipTransition,
-} from '../../../../animation/skeleton-transitions/chip-loading-transition.js';
+} from '../../../../animation/skeleton-transitions/chip-loading-transition';
 import {AddEventStates, AddEventStatesMap} from './add-event-action-chip.config';
 import {EditEventSelectionComponent} from '../edit-event-selection.component';
 import {AddEventReviewModalComponent} from '../../../calendar/add-event-review-modal.component';

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

@@ -13,7 +13,7 @@
  *  this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {SCIcon} from '../../../../util/ion-icon/icon.js';
+import {SCIcon} from '../../../../util/ion-icon/icon';
 
 export enum AddEventStates {
   ADDED_ALL,

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

@@ -22,12 +22,12 @@ import {
 } 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.js';
-import {mapValues} from '../../../_helpers/collections/map-values.js';
-import {stringSortBy} from '../../../_helpers/collections/string-sort.js';
-import {uniqBy} from '../../../_helpers/collections/uniq.js';
-import {differenceBy} from '../../../_helpers/collections/difference.js';
-import {SelectionValue, TreeNode} from './tree-node.js';
+import {groupBy, groupByProperty} from '../../../_helpers/collections/group-by';
+import {mapValues} from '../../../_helpers/collections/map-values';
+import {stringSortBy} from '../../../_helpers/collections/string-sort';
+import {uniqBy} from '../../../_helpers/collections/uniq';
+import {differenceBy} from '../../../_helpers/collections/difference';
+import {SelectionValue, TreeNode} from './tree-node';
 
 /**
  * Shows a horizontal list of action chips

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

@@ -14,8 +14,8 @@
  */
 import {TestBed} from '@angular/core/testing';
 import {SCFacet, SCThing, SCFacetBucket} from '@openstapps/core';
-import {sampleAggregations} from '../../_helpers/data/sample-configuration.js';
-import {sampleThingsMap} from '../../_helpers/data/sample-things.js';
+import {sampleAggregations} from '../../_helpers/data/sample-configuration';
+import {sampleThingsMap} from '../../_helpers/data/sample-things';
 import {DataFacetsProvider} from './data-facets.provider';
 import {DataModule} from './data.module';
 import {DataProvider} from './data.provider';

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

@@ -14,7 +14,7 @@
  */
 
 import {SCThingType} from '@openstapps/core';
-import {SCIcon} from '../../util/ion-icon/icon.js';
+import {SCIcon} from '../../util/ion-icon/icon';
 
 export const DataIcons: Record<SCThingType, string> = {
   'academic event': SCIcon`school`,

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

@@ -26,7 +26,7 @@ import {
   SCThingOriginType,
   SCThingType,
 } from '@openstapps/core';
-import {sampleThingsMap} from '../../_helpers/data/sample-things.js';
+import {sampleThingsMap} from '../../_helpers/data/sample-things';
 import {StorageProvider} from '../storage/storage.provider';
 import {DataModule} from './data.module';
 import {DataProvider, DataScope} from './data.provider';

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

@@ -13,7 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {Injectable} from '@angular/core';
-import {Client} from '@openstapps/api/lib/client';
+import {Client} from '@openstapps/api';
 import {
   SCFacet,
   SCIndexableThings,
@@ -32,10 +32,10 @@ import {
   SCFeedbackResponse,
   SCUuid,
 } from '@openstapps/core';
-import {environment} from '../../../environments/environment.js';
+import {environment} from '../../../environments/environment';
 import {StorageProvider} from '../storage/storage.provider';
 import {StAppsWebHttpClient} from './stapps-web-http-client.provider';
-import {chunk} from '../../_helpers/collections/chunk.js';
+import {chunk} from '../../_helpers/collections/chunk';
 
 export enum DataScope {
   Local = 'local',

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

@@ -19,7 +19,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {ActivatedRoute, RouterModule} from '@angular/router';
 import {IonTitle} from '@ionic/angular';
 import {TranslateLoader, TranslateModule, TranslateService} from '@ngx-translate/core';
-import {sampleThingsMap} from '../../../_helpers/data/sample-things.js';
+import {sampleThingsMap} from '../../../_helpers/data/sample-things';
 import {DataRoutingModule} from '../data-routing.module';
 import {DataModule} from '../data.module';
 import {DataProvider} from '../data.provider';

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

@@ -35,17 +35,13 @@
     <ng-container *ngSwitchCase="!item && (isDisconnected | async)">
       <div class="centeredMessageContainer">
         <ion-icon name="signal_disconnected"></ion-icon>
-        <ion-label>
-          {{ 'data.detail.COULD_NOT_CONNECT' | translate }}
-        </ion-label>
+        <ion-label> {{ 'data.detail.COULD_NOT_CONNECT' | translate }} </ion-label>
       </div>
     </ng-container>
     <ng-container *ngSwitchCase="item === null">
       <div class="centeredMessageContainer">
         <ion-icon name="link_off"></ion-icon>
-        <ion-label>
-          {{ 'data.detail.NOT_FOUND' | translate }}
-        </ion-label>
+        <ion-label> {{ 'data.detail.NOT_FOUND' | translate }} </ion-label>
       </div>
     </ng-container>
     <ng-container *ngSwitchCase="!item && item !== null">

frontend/app/src/app/modules/data/elements/address-detail.html

@@ -19,39 +19,27 @@
     <ion-grid>
       <ion-row>
         <ion-col>{{ 'data.detail.address.STREET' | translate | titlecase }}:</ion-col>
-        <ion-col width-60 text-right>
-          {{ address.streetAddress }}
-        </ion-col>
+        <ion-col width-60 text-right> {{ address.streetAddress }} </ion-col>
       </ion-row>
       <ion-row>
         <ion-col>{{ 'data.detail.address.POSTCODE' | translate | titlecase }}:</ion-col>
-        <ion-col width-60 text-right>
-          {{ address.postalCode }}
-        </ion-col>
+        <ion-col width-60 text-right> {{ address.postalCode }} </ion-col>
       </ion-row>
       <ion-row>
         <ion-col>{{ 'data.detail.address.CITY' | translate | titlecase }}:</ion-col>
-        <ion-col width-60 text-right>
-          {{ address.addressLocality }}
-        </ion-col>
+        <ion-col width-60 text-right> {{ address.addressLocality }} </ion-col>
       </ion-row>
       <ion-row *ngIf="address.addressRegion">
         <ion-col>{{ 'data.detail.address.REGION' | translate | titlecase }}:</ion-col>
-        <ion-col width-60 text-right>
-          {{ address.addressRegion }}
-        </ion-col>
+        <ion-col width-60 text-right> {{ address.addressRegion }} </ion-col>
       </ion-row>
       <ion-row>
         <ion-col>{{ 'data.detail.address.COUNTRY' | translate | titlecase }}:</ion-col>
-        <ion-col width-60 text-right>
-          {{ address.addressCountry }}
-        </ion-col>
+        <ion-col width-60 text-right> {{ address.addressCountry }} </ion-col>
       </ion-row>
       <ion-row *ngIf="address.postOfficeBoxNumber">
         <ion-col>{{ 'data.detail.address.POST_OFFICE_BOX' | translate | titlecase }}</ion-col>
-        <ion-col width-60 text-right>
-          {{ address.postOfficeBoxNumber }}
-        </ion-col>
+        <ion-col width-60 text-right> {{ address.postOfficeBoxNumber }} </ion-col>
       </ion-row>
     </ion-grid>
   </ion-card-content>

frontend/app/src/app/modules/data/elements/offers-detail.html

@@ -29,10 +29,8 @@
             <span
               *ngIf="offer.availabilityRange.gt ? offer.availabilityRange.gt : offer.availabilityRange.gte"
             >
-              {{
-                (offer.availabilityRange.gt ? offer.availabilityRange.gt : offer.availabilityRange.gte)
-                  | amDateFormat : 'll'
-              }}
+              {{ (offer.availabilityRange.gt ? offer.availabilityRange.gt : offer.availabilityRange.gte) |
+              amDateFormat : 'll' }}
             </span>
           </ion-col>
         </ion-row>
@@ -41,9 +39,7 @@
         <ion-row *ngFor="let group of objectKeys(offer.prices)">
           <ion-col *ngIf="group !== 'default'">{{ 'data.detail.offers.' + group | translate }} </ion-col>
           <ion-col *ngIf="group !== 'default'" width-20 text-right>
-            <p>
-              {{ offer.prices[group] | currency : 'EUR' : 'symbol' : undefined : 'de' }}
-            </p>
+            <p>{{ offer.prices[group] | currency : 'EUR' : 'symbol' : undefined : 'de' }}</p>
           </ion-col>
         </ion-row>
       </ion-grid>
@@ -52,9 +48,7 @@
           <ion-col></ion-col>
           <ion-col width-20 text-right>
             <ion-text color="danger">
-              <p>
-                {{ 'data.detail.offers.sold_out' | translate }}
-              </p>
+              <p>{{ 'data.detail.offers.sold_out' | translate }}</p>
             </ion-text>
           </ion-col>
         </ion-row>

frontend/app/src/app/modules/data/elements/origin-detail.html

@@ -15,21 +15,21 @@
 
 <ion-card *ngIf="origin.type === 'user'">
   <ion-card-header
-    >{{ 'data.types.origin.TITLE' | translate | titlecase }}:
-    {{ 'data.types.origin.USER' | translate | titlecase }}</ion-card-header
+    >{{ 'data.types.origin.TITLE' | translate | titlecase }}: {{ 'data.types.origin.USER' | translate |
+    titlecase }}</ion-card-header
   >
   <ion-card-content>
     <p>
-      {{ 'data.types.origin.detail.CREATED' | translate | titlecase }}:
-      {{ origin.created | amDateFormat : 'll' }}
+      {{ 'data.types.origin.detail.CREATED' | translate | titlecase }}: {{ origin.created | amDateFormat :
+      'll' }}
     </p>
     <p *ngIf="origin.updated">
-      {{ 'data.types.origin.detail.UPDATED' | translate | titlecase }}:
-      {{ origin.updated | amDateFormat : 'll' }}
+      {{ 'data.types.origin.detail.UPDATED' | translate | titlecase }}: {{ origin.updated | amDateFormat :
+      'll' }}
     </p>
     <p *ngIf="origin.modified">
-      {{ 'data.types.origin.detail.MODIFIED' | translate | titlecase }}:
-      {{ origin.modified | amDateFormat : 'll' }}
+      {{ 'data.types.origin.detail.MODIFIED' | translate | titlecase }}: {{ origin.modified | amDateFormat :
+      'll' }}
     </p>
     <p *ngIf="origin.name">{{ 'data.types.origin.detail.MAINTAINER' | translate }}: {{ origin.name }}</p>
     <p *ngIf="origin.maintainer">
@@ -41,17 +41,17 @@
 
 <ion-card *ngIf="origin.type === 'remote'">
   <ion-card-header
-    >{{ 'data.types.origin.TITLE' | translate | titlecase }}:
-    {{ 'data.types.origin.REMOTE' | translate | titlecase }}</ion-card-header
+    >{{ 'data.types.origin.TITLE' | translate | titlecase }}: {{ 'data.types.origin.REMOTE' | translate |
+    titlecase }}</ion-card-header
   >
   <ion-card-content>
     <p>
-      {{ 'data.types.origin.detail.INDEXED' | translate | titlecase }}:
-      {{ origin.indexed | amDateFormat : 'll' }}
+      {{ 'data.types.origin.detail.INDEXED' | translate | titlecase }}: {{ origin.indexed | amDateFormat :
+      'll' }}
     </p>
     <p *ngIf="origin.modified">
-      {{ 'data.types.origin.detail.MODIFIED' | translate | titlecase }}:
-      {{ origin.modified | amDateFormat : 'll' }}
+      {{ 'data.types.origin.detail.MODIFIED' | translate | titlecase }}: {{ origin.modified | amDateFormat :
+      'll' }}
     </p>
     <p *ngIf="origin.name">{{ 'data.types.origin.detail.MAINTAINER' | translate }}: {{ origin.name }}</p>
     <p *ngIf="origin.maintainer">

frontend/app/src/app/modules/data/elements/title-card.component.ts

@@ -15,7 +15,7 @@
 
 import {Component, ElementRef, HostListener, Input, OnChanges, OnInit, ViewChild} from '@angular/core';
 import {SCThings} from '@openstapps/core';
-import {SCIcon} from '../../../util/ion-icon/icon.js';
+import {SCIcon} from '../../../util/ion-icon/icon';
 
 const AccordionButtonState = {
   collapsed: SCIcon`expand_more`,

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

@@ -13,9 +13,7 @@
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
-<h2>
-  {{ 'name' | thingTranslate : item }}
-</h2>
+<h2>{{ 'name' | thingTranslate : item }}</h2>
 <p *ngIf="item.description">
   <stapps-long-inline-text
     [text]="'description' | thingTranslate : item"

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

@@ -15,7 +15,7 @@
 
 import {Directive, forwardRef, Input, Output, ViewChild} from '@angular/core';
 import {CdkVirtualForOf, VIRTUAL_SCROLL_STRATEGY} from '@angular/cdk/scrolling';
-import {ScThingListItemVirtualScrollStrategy} from './sc-thing-list-item-virtual-scroll-strategy.js';
+import {ScThingListItemVirtualScrollStrategy} from './sc-thing-list-item-virtual-scroll-strategy';
 
 /**
  *

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

@@ -34,7 +34,7 @@ import {DataRoutingService} from '../data-routing.service';
 import {DataProvider} from '../data.provider';
 import {PositionService} from '../../map/position.service';
 import {ConfigProvider} from '../../config/config.provider';
-import {searchPageSwitchAnimation} from './search-page-switch-animation.js';
+import {searchPageSwitchAnimation} from './search-page-switch-animation';
 
 /**
  * SearchPageComponent queries things and shows list of things as search results and filter as context menu

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

@@ -22,9 +22,9 @@
       ></ng-container>
     </ng-container>
   </ion-list>
-  <ion-label class="empty-list-message" *ngIf="emptyListMessage && (items | async)?.length === 0">{{
-    emptyListMessage
-  }}</ion-label>
+  <ion-label class="empty-list-message" *ngIf="emptyListMessage && (items | async)?.length === 0"
+    >{{ emptyListMessage }}</ion-label
+  >
 </ng-container>
 <ng-template #loading>
   <ion-list>
@@ -38,9 +38,7 @@
 <ng-template #header>
   <ion-list-header lines="inset">
     <ion-text color="dark">
-      <h3>
-        {{ listHeader }}
-      </h3>
+      <h3>{{ listHeader }}</h3>
     </ion-text>
   </ion-list-header>
 </ng-template>

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

@@ -14,7 +14,7 @@
  */
 import {Component, Input, TemplateRef} from '@angular/core';
 import {SCThings, SCThingWithoutReferences, SCUuid} from '@openstapps/core';
-import {Tree} from '../../../_helpers/collections/tree-group.js';
+import {Tree} from '../../../_helpers/collections/tree-group';
 import {DataListContext} from './data-list.component';
 
 @Component({

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

@@ -15,7 +15,7 @@
 import {Component, ContentChild, Input, TemplateRef} from '@angular/core';
 import {DataListContext} from './data-list.component';
 import {SCThings, SCThingWithoutReferences, SCUuid} from '@openstapps/core';
-import {Tree, treeGroupBy} from '../../../_helpers/collections/tree-group.js';
+import {Tree, treeGroupBy} from '../../../_helpers/collections/tree-group';
 
 @Component({
   selector: 'tree-list',

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

@@ -14,7 +14,7 @@
  */
 import {HttpClient, HttpResponse} from '@angular/common/http';
 import {Injectable} from '@angular/core';
-import {HttpClientInterface, HttpClientRequest} from '@openstapps/api/lib/http-client-interface';
+import {HttpClientInterface, HttpClientRequest} from '@openstapps/api';
 import {map, retry} from 'rxjs/operators';
 import {lastValueFrom, Observable} from 'rxjs';
 import {InternetConnectionService} from '../../util/internet-connection.service';

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

@@ -64,9 +64,8 @@
   <ion-card-header>{{ 'publications' | propertyNameTranslate : item | sentencecase }}</ion-card-header>
   <ion-card-content>
     <p *ngFor="let publication of item.publications">
-      {{ publication.locations | join : ', ' }}
-      {{ publication.locations && publication.publisher ? ':' : '' }}
-      {{ publication.publisher }}
+      {{ publication.locations | join : ', ' }} {{ publication.locations && publication.publisher ? ':' : ''
+      }} {{ publication.publisher }}
     </p>
   </ion-card-content>
 </ion-card>

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

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

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

@@ -75,9 +75,8 @@
   <ion-card-header>{{ 'publications' | propertyNameTranslate : item | sentencecase }}</ion-card-header>
   <ion-card-content>
     <p *ngFor="let publication of item.publications">
-      {{ publication.locations | join : ', ' }}
-      {{ publication.locations && publication.publisher ? ':' : '' }}
-      {{ publication.publisher }}
+      {{ publication.locations | join : ', ' }} {{ publication.locations && publication.publisher ? ':' : ''
+      }} {{ publication.publisher }}
     </p>
   </ion-card-content>
 </ion-card>

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

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

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

@@ -2,12 +2,8 @@
   <ion-row>
     <ion-col>
       <div class="ion-text-wrap">
-        <ion-label class="title">
-          {{ 'name' | thingTranslate : item }}
-        </ion-label>
-        <p *ngIf="item.academicTerm" class="title-sub">
-          {{ item.academicTerm.name }}
-        </p>
+        <ion-label class="title"> {{ 'name' | thingTranslate : item }} </ion-label>
+        <p *ngIf="item.academicTerm" class="title-sub">{{ item.academicTerm.name }}</p>
       </div>
     </ion-col>
   </ion-row>

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

@@ -13,17 +13,13 @@
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 <ion-card>
-  <ion-card-header>
-    {{ 'event' | propertyNameTranslate : item | titlecase }}
-  </ion-card-header>
+  <ion-card-header> {{ 'event' | propertyNameTranslate : item | titlecase }} </ion-card-header>
   <ion-card-content>
     <a [routerLink]="['/data-detail', item.event.uid]">{{ 'name' | thingTranslate : item.event }}</a>
   </ion-card-content>
 </ion-card>
 <ion-card *ngIf="item.inPlace">
-  <ion-card-header>
-    {{ 'inPlace' | propertyNameTranslate : item | titlecase }}
-  </ion-card-header>
+  <ion-card-header> {{ 'inPlace' | propertyNameTranslate : item | titlecase }} </ion-card-header>
   <ion-card-content>
     <ion-icon name="pin_drop"> </ion-icon>
     <a [routerLink]="['/data-detail', item.inPlace.uid]">{{ 'name' | thingTranslate : item.inPlace }}</a>

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

@@ -22,17 +22,17 @@
           <ion-icon name="calendar_today"></ion-icon>
           <span *ngIf="item.dates[0] && item.dates[item.dates.length - 1]">
             <span *ngIf="item.repeatFrequency">
-              {{ item.repeatFrequency | durationLocalized : true | sentencecase }},
-              {{ item.dates[0] | dateFormat : 'weekday:long' }}
+              {{ item.repeatFrequency | durationLocalized : true | sentencecase }}, {{ item.dates[0] |
+              dateFormat : 'weekday:long' }}
             </span>
             <span>
               ({{ item.dates[0] | dateFormat }} - {{ item.dates[item.dates.length - 1] | dateFormat }})
             </span>
           </span>
         </p>
-        <ion-note *ngIf="item.event.type === 'academic event'">{{
-          'categories' | thingTranslate : item.event | join : ', '
-        }}</ion-note>
+        <ion-note *ngIf="item.event.type === 'academic event'"
+          >{{ 'categories' | thingTranslate : item.event | join : ', ' }}</ion-note
+        >
       </div>
     </ion-col>
     <ion-col width-20 text-right>

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

@@ -39,9 +39,9 @@
   [content]="item.majors"
 ></stapps-simple-card>
 <ion-card *ngIf="item.catalogs">
-  <ion-card-header>{{
-    $any('superCatalogs' | propertyNameTranslate : 'catalog') | titlecase
-  }}</ion-card-header>
+  <ion-card-header
+    >{{ $any('superCatalogs' | propertyNameTranslate : 'catalog') | titlecase }}</ion-card-header
+  >
   <ion-card-content>
     <event-route-path
       *ngFor="let item of item.catalogs"

frontend/app/src/app/modules/data/types/event/event-route-path.html

@@ -20,9 +20,9 @@
   [itemsBeforeCollapse]="itemsBeforeCollapse"
 >
   <ion-breadcrumb *ngFor="let item of items">
-    <ion-label class="crumb-label" *ngIf="item" [routerLink]="['/data-detail', item.uid]">{{
-      'name' | thingTranslate : $any(item)
-    }}</ion-label>
+    <ion-label class="crumb-label" *ngIf="item" [routerLink]="['/data-detail', item.uid]"
+      >{{ 'name' | thingTranslate : $any(item) }}</ion-label
+    >
   </ion-breadcrumb>
 </ion-breadcrumbs>
 <ion-popover #popover>

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

@@ -18,8 +18,7 @@
     <ion-col>
       <div class="ion-text-wrap">
         <ion-label class="title">
-          {{ 'name' | thingTranslate : item }}:
-          {{ 'name' | thingTranslate : item.data }}
+          {{ 'name' | thingTranslate : item }}: {{ 'name' | thingTranslate : item.data }}
         </ion-label>
         <p *ngIf="item.data.description" class="title-sub">
           <stapps-long-inline-text

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

@@ -54,9 +54,7 @@
   ></stapps-simple-card>
   <stapps-simple-card content="{{ item.messageBody }}"></stapps-simple-card>
   <ion-card *ngIf="item.sameAs">
-    <ion-card-header>
-      {{ 'sameAs' | propertyNameTranslate : item | titlecase }}
-    </ion-card-header>
+    <ion-card-header> {{ 'sameAs' | propertyNameTranslate : item | titlecase }} </ion-card-header>
     <ion-card-content>
       <stapps-external-link [link]="item.sameAs" [text]="item.name"></stapps-external-link>
     </ion-card-content>

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

@@ -14,9 +14,7 @@
   -->
 
 <ion-card *ngIf="item.inPlace">
-  <ion-card-header>
-    {{ 'inPlace' | propertyNameTranslate : item | titlecase }}
-  </ion-card-header>
+  <ion-card-header> {{ 'inPlace' | propertyNameTranslate : item | titlecase }} </ion-card-header>
   <ion-card-content>
     <ion-icon name="pin_drop"></ion-icon>
     <a [routerLink]="['/data-detail', item.inPlace.uid]">{{ 'name' | thingTranslate : item.inPlace }}</a>

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

@@ -18,9 +18,7 @@
     <ion-col>
       <div class="ion-text-wrap">
         <ion-label class="title">{{ 'name' | thingTranslate : item }}</ion-label>
-        <p *ngIf="item.description" class="title-sub">
-          {{ 'description' | thingTranslate : item }}
-        </p>
+        <p *ngIf="item.description" class="title-sub">{{ 'description' | thingTranslate : item }}</p>
         <ion-note>{{ 'type' | thingTranslate : item }}</ion-note>
       </div>
     </ion-col>

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

@@ -62,9 +62,8 @@
   <ion-card-header>{{ 'publications' | propertyNameTranslate : item | sentencecase }}</ion-card-header>
   <ion-card-content>
     <p *ngFor="let publication of item.publications">
-      {{ publication.locations | join : ', ' }}
-      {{ publication.locations && publication.publisher ? ':' : '' }}
-      {{ publication.publisher }}
+      {{ publication.locations | join : ', ' }} {{ publication.locations && publication.publisher ? ':' : ''
+      }} {{ publication.publisher }}
     </p>
   </ion-card-content>
 </ion-card>

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

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

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

@@ -29,12 +29,10 @@
         <a [href]="'mailto:' + contactPoint.email">{{ contactPoint.email }}</a>
       </p>
       <p *ngIf="contactPoint.faxNumber">
-        {{ 'faxNumber' | propertyNameTranslate : contactPoint | titlecase }}:
-        {{ contactPoint.faxNumber }}
+        {{ 'faxNumber' | propertyNameTranslate : contactPoint | titlecase }}: {{ contactPoint.faxNumber }}
       </p>
       <p *ngIf="contactPoint.officeHours">
-        {{ 'officeHours' | propertyNameTranslate : contactPoint | titlecase }}:
-        {{ contactPoint.officeHours }}
+        {{ 'officeHours' | propertyNameTranslate : contactPoint | titlecase }}: {{ contactPoint.officeHours }}
       </p>
       <p *ngIf="contactPoint.url">
         {{ 'url' | propertyNameTranslate : contactPoint | titlecase }}:

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

@@ -17,7 +17,7 @@ import moment, {Moment} from 'moment';
 
 import {AfterViewInit, Component, Input, OnDestroy} from '@angular/core';
 import {SCDish, SCISO8601Date, SCPlace} from '@openstapps/core';
-import {PlaceMensaService} from './place-mensa-service.js';
+import {PlaceMensaService} from './place-mensa-service';
 import {Router} from '@angular/router';
 import {Subscription} from 'rxjs';
 import {IonRouterOutlet} from '@ionic/angular';

frontend/app/src/app/modules/data/types/place/special/mensa/place-mensa-service.ts

@@ -17,7 +17,7 @@ import {Injectable} from '@angular/core';
 import {SCDish, SCISO8601Date, SCPlace, SCSearchQuery, SCThingType} from '@openstapps/core';
 import moment from 'moment';
 import {DataProvider} from '../../../../data.provider';
-import {mapValues} from '../../../../../../_helpers/collections/map-values.js';
+import {mapValues} from '../../../../../../_helpers/collections/map-values';
 import {SettingsProvider} from '../../../../../settings/settings.provider';
 
 /**

frontend/app/src/app/modules/data/types/place/special/mensa/place-mensa.html

@@ -18,12 +18,12 @@
     <ng-container *ngIf="(dishes | json) !== '{}'; else empty">
       <ion-segment [(ngModel)]="selectedDay" mode="md">
         <ion-segment-button *ngFor="let day of dishes | keyvalue" [value]="day.key">
-          <ion-label class="ion-hide-sm-down">{{
-            day.key | dateFormat : 'weekday:long,month:numeric,day:numeric'
-          }}</ion-label>
-          <ion-label class="ion-hide-sm-up">{{
-            day.key | dateFormat : 'weekday:short,month:numeric,day:numeric'
-          }}</ion-label>
+          <ion-label class="ion-hide-sm-down"
+            >{{ day.key | dateFormat : 'weekday:long,month:numeric,day:numeric' }}</ion-label
+          >
+          <ion-label class="ion-hide-sm-up"
+            >{{ day.key | dateFormat : 'weekday:short,month:numeric,day:numeric' }}</ion-label
+          >
         </ion-segment-button>
       </ion-segment>
       <ng-container [ngSwitch]="selectedDay">
@@ -33,10 +33,8 @@
               <ng-container *ngFor="let section of date.value | keyvalue">
                 <ion-list-header *ngIf="section.value[0].menuSection" lines="inset">
                   <ion-label class="title">
-                    {{
-                      'data.types.dish.detail.' + section.value[0].menuSection.name | translate | titlecase
-                    }}
-                    {{ section.value[0].menuSection.servingHours }}
+                    {{ 'data.types.dish.detail.' + section.value[0].menuSection.name | translate | titlecase
+                    }} {{ section.value[0].menuSection.servingHours }}
                   </ion-label>
                 </ion-list-header>
                 <ng-container *ngFor="let dish of section.value; index as j">
@@ -60,9 +58,7 @@
   <ng-template #empty>
     <ion-card>
       <ion-card-header>
-        <ion-label class="title">
-          {{ 'data.types.dish.EMPTY_DISHES' | translate }}
-        </ion-label>
+        <ion-label class="title"> {{ 'data.types.dish.EMPTY_DISHES' | translate }} </ion-label>
       </ion-card-header>
     </ion-card>
   </ng-template>

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

@@ -10,8 +10,8 @@
           ></stapps-long-inline-text>
         </p>
         <p *ngIf="item.duration">
-          {{ 'duration' | propertyNameTranslate : item | titlecase }}:
-          {{ item.duration | amDuration : 'seconds' }}
+          {{ 'duration' | propertyNameTranslate : item | titlecase }}: {{ item.duration | amDuration :
+          'seconds' }}
         </p>
         <ion-note>{{ 'type' | thingTranslate : item }}</ion-note>
       </div>