TSK-1754: Dependency updates

.run/Test E2E.run.xml

@@ -10,10 +10,10 @@
     <option name="selectedOptions">
       <list />
     </option>
-    <option name="workingDirectory" value="C:\Users\te\Documents\taskana\web" />
+    <option name="workingDirectory" value="$PROJECT_DIR$/web" />
     <option name="textRange" />
     <option name="allNames" />
-    <option name="specsDir" value="C:\Users\te\Documents\taskana\web\cypress" />
+    <option name="specsDir" value="$PROJECT_DIR$/web/cypress/integration" />
     <option name="specFile" />
     <option name="testName" />
     <option name="workingDirectory" value="file://$PROJECT_DIR$/web" />

web/cypress/support/commands.js

@@ -22,9 +22,9 @@ Cypress.Commands.add('visitTestWorkbasket', () => {
   cy.visit(Cypress.env('appUrl') + Cypress.env('adminUrl') + '/workbaskets');
   cy.verifyPageLoad('/workbaskets');
 
-  // since the list is loaded dynamically, we need to explicitly wait 400ms for the results
+  // since the list is loaded dynamically, we need to explicitly wait 700ms for the results
   // in order to avoid errors regarding detached DOM elements although it is a bad practice
-  cy.wait(400);
+  cy.wait(700);
   cy.get('mat-selection-list').contains(Cypress.env('testValueWorkbasketSelectionName')).should('exist').click();
   cy.visitWorkbasketsInformationPage();
 });

web/package.json

@@ -22,54 +22,54 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "12.2.7",
-    "@angular/cdk": "12.2.7",
-    "@angular/common": "12.2.7",
-    "@angular/core": "12.2.7",
-    "@angular/forms": "12.2.7",
-    "@angular/material": "12.2.7",
-    "@angular/platform-browser": "12.2.7",
-    "@angular/platform-browser-dynamic": "12.2.7",
-    "@angular/router": "12.2.7",
+    "@angular/animations": "12.2.10",
+    "@angular/cdk": "12.2.10",
+    "@angular/common": "12.2.10",
+    "@angular/core": "12.2.10",
+    "@angular/forms": "12.2.10",
+    "@angular/material": "12.2.10",
+    "@angular/platform-browser": "12.2.10",
+    "@angular/platform-browser-dynamic": "12.2.10",
+    "@angular/router": "12.2.10",
     "@circlon/angular-tree-component": "11.0.4",
-    "@ngneat/hot-toast": "3.1.0",
-    "@ngneat/overview": "2.0.2",
+    "@ngneat/hot-toast": "3.4.1",
+    "@ngneat/overview": "2.0.4",
     "@ngxs/store": "3.7.2",
     "angular-svg-icon": "12.0.0",
     "chart.js": "2.9.4",
-    "core-js": "3.15.1",
+    "core-js": "3.18.3",
     "file-saver": "2.0.5",
-    "ng2-charts": "2.4.2",
-    "ngx-bootstrap": "6.2.0",
+    "ng2-charts": "2.4.3",
+    "ngx-bootstrap": "7.1.0",
     "ngx-infinite-scroll": "10.0.1",
-    "rxjs": "7.1.0",
-    "tslib": "2.3.0",
+    "rxjs": "7.4.0",
+    "tslib": "2.3.1",
     "zone.js": "0.11.4"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "12.1.2",
-    "@angular-devkit/build-angular": "12.2.7",
-    "@angular/cli": "12.2.7",
-    "@angular/compiler": "12.2.7",
-    "@angular/compiler-cli": "12.2.7",
+    "@angular-builders/custom-webpack": "12.1.3",
+    "@angular-devkit/build-angular": "12.2.10",
+    "@angular/cli": "12.2.10",
+    "@angular/compiler": "12.2.10",
+    "@angular/compiler-cli": "12.2.10",
     "@ngxs/devtools-plugin": "3.7.2",
     "@types/jest": "26.0.23",
-    "@types/node": "15.12.4",
-    "@typescript-eslint/eslint-plugin": "4.28.0",
-    "@typescript-eslint/eslint-plugin-tslint": "4.28.0",
-    "@typescript-eslint/parser": "4.28.0",
-    "compression-webpack-plugin": "8.0.0",
-    "cypress": "7.5.0",
+    "@types/node": "16.11.1",
+    "@typescript-eslint/eslint-plugin": "5.1.0",
+    "@typescript-eslint/eslint-plugin-tslint": "5.1.0",
+    "@typescript-eslint/parser": "5.1.0",
+    "compression-webpack-plugin": "9.0.0",
+    "cypress": "7.7.0",
     "cypress-intellij-reporter": "0.0.6",
-    "eslint": "7.29.0",
+    "eslint": "8.0.1",
     "eslint-config-prettier": "8.3.0",
-    "eslint-plugin-import": "2.23.4",
-    "eslint-plugin-prettier": "3.4.0",
+    "eslint-plugin-import": "2.25.2",
+    "eslint-plugin-prettier": "4.0.0",
     "jest": "27.0.5",
     "jest-preset-angular": "9.0.4",
-    "prettier": "2.3.1",
-    "sass": "1.35.1",
-    "ts-jest": "27.0.3",
+    "prettier": "2.4.1",
+    "sass": "1.43.2",
+    "ts-jest": "27.0.7",
     "tslint": "6.1.3",
     "typescript": "4.2.4"
   }

web/src/app/shared/components/sidenav-list/sidenav-list.component.html

@@ -25,5 +25,5 @@
     <a mat-list-item class="navlist__item navlist__history" [routerLink]=[historyUrl] [routerLinkActive]="['active']"
         *ngIf="historyAccess" (click)="toggleSidenav()">History</a>
   <a mat-list-item class="navlist__item navlist__setting" [routerLink]=[settingsURL] [routerLinkActive]="['active']"
-     *ngIf="settingsAccess" (click)="toggleSidenav()">UI Settings</a>
+     *ngIf="settingsAccess" (click)="toggleSidenav()">Settings</a>
 </mat-nav-list>

web/src/theme/_progress-bar.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import 'colors';
 .item {
   margin-bottom: 20px;
@@ -26,8 +28,8 @@
 
 $step: 1; // step of % for created classes
 $loops: 100;
-$increment: (360 / $loops);
-$half: round($loops / 2);
+$increment: math.div(360, $loops);
+$half: round(math.div($loops, 2));
 @for $i from 0 through $loops {
   .progress-#{$i*$step} {
     @if $i < 50 {