Merge pull request #4819 from tsiegleauq/angular-8.0.6

Update to Angular 8.0.6

.travis.yml

@@ -60,12 +60,12 @@ matrix:
     - language: node_js
       name: "Client: Linting"
       node_js:
-        - "10.5"
+        - "10.9"
       cache:
         directories:
           - node_modules
       before_install:
-        - npm install -g @angular/cli@~7.3.8
+        - npm install -g @angular/cli@~8.0.6
         - ng --version
         - cd client
       install:
@@ -76,12 +76,12 @@ matrix:
     - language: node_js
       name: "Client: Code Formatting Check"
       node_js:
-        - "10.5"
+        - "10.9"
       cache:
         directories:
           - node_modules
       before_install:
-        - npm install -g @angular/cli@~7.3.8
+        - npm install -g @angular/cli@~8.0.6
         - ng --version
         - cd client
       install:
@@ -93,7 +93,7 @@ matrix:
     - language: node_js
       name: "Client: Testing"
       node_js:
-        - "10.5"
+        - "10.9"
       apt:
         sources:
           - google-chrome
@@ -107,7 +107,7 @@ matrix:
       before_install:
         - export CHROME_BIN=/usr/bin/google-chrome
         - export DISPLAY=:99.0
-        - npm install -g @angular/cli@~7.3.8
+        - npm install -g @angular/cli@~8.0.6
         - ng --version
         - cd client
       install:
@@ -118,12 +118,12 @@ matrix:
     - language: node_js
       name: "Client: Build"
       node_js:
-        - "10.5"
+        - "10.9"
       cache:
         directories:
           - node_modules
       before_install:
-        - npm install -g @angular/cli@~7.3.8
+        - npm install -g @angular/cli@~8.0.6
         - ng --version
         - cd client
       install:
@@ -134,12 +134,12 @@ matrix:
     - language: node_js
       name: "Client: Production Build"
       node_js:
-        - "10.5"
+        - "10.9"
       cache:
         directories:
           - node_modules
       before_install:
-        - npm install -g @angular/cli@~7.3.8
+        - npm install -g @angular/cli@~8.0.6
         - ng --version
         - cd client
       install:

client/README.md

@@ -59,62 +59,63 @@ Language files can be found in `/src/assets/i18n`.
 
 OpenSlides uses the following software or parts of them:
 
-- [@angular/animations@7.2.14](https://github.com/angular/angular), License: MIT
+- [@angular/animations@8.0.3](https://github.com/angular/angular), License: MIT
-- [@angular/cdk-experimental@7.3.7](https://github.com/angular/material2), License: MIT
+- [@angular/cdk-experimental@8.0.1](https://github.com/angular/components), License: MIT
-- [@angular/cdk@7.3.7](https://github.com/angular/material2), License: MIT
+- [@angular/cdk@8.0.1](https://github.com/angular/components), License: MIT
-- [@angular/common@7.2.14](https://github.com/angular/angular), License: MIT
+- [@angular/common@8.0.3](https://github.com/angular/angular), License: MIT
-- [@angular/compiler@7.2.14](https://github.com/angular/angular), License: MIT
+- [@angular/compiler@8.0.3](https://github.com/angular/angular), License: MIT
-- [@angular/core@7.2.14](https://github.com/angular/angular), License: MIT
+- [@angular/core@8.0.3](https://github.com/angular/angular), License: MIT
-- [@angular/forms@7.2.14](https://github.com/angular/angular), License: MIT
+- [@angular/forms@8.0.3](https://github.com/angular/angular), License: MIT
-- [@angular/http@7.2.14](https://github.com/angular/angular), License: MIT
+- [@angular/material@8.0.1](https://github.com/angular/components), License: MIT
-- [@angular/material@7.3.7](https://github.com/angular/material2), License: MIT
+- [@angular/platform-browser-dynamic@8.0.3](https://github.com/angular/angular), License: MIT
-- [@angular/platform-browser-dynamic@7.2.14](https://github.com/angular/angular), License: MIT
+- [@angular/platform-browser@8.0.3](https://github.com/angular/angular), License: MIT
-- [@angular/platform-browser@7.2.14](https://github.com/angular/angular), License: MIT
+- [@angular/pwa@0.800.6](https://github.com/angular/angular-cli), License: MIT
-- [@angular/pwa@0.13.8](https://github.com/angular/angular-cli), License: MIT
+- [@angular/router@8.0.3](https://github.com/angular/angular), License: MIT
-- [@angular/router@7.2.14](https://github.com/angular/angular), License: MIT
+- [@angular/service-worker@8.0.3](https://github.com/angular/angular), License: MIT
-- [@angular/service-worker@7.2.14](https://github.com/angular/angular), License: MIT
+- [@ngx-pwa/local-storage@8.0.2](https://github.com/cyrilletuzi/angular-async-local-storage), License: MIT
-- [@ngx-pwa/local-storage@7.4.2](https://github.com/cyrilletuzi/angular-async-local-storage), License: MIT
 - [@ngx-translate/core@11.0.1](https://github.com/ngx-translate/core), License: MIT
 - [@ngx-translate/http-loader@4.0.0](https://github.com/ngx-translate/http-loader), License: MIT
-- [@pebula/ngrid-material@1.0.0-alpha.20](https://github.com/shlomiassaf/ngrid), License: MIT
+- [@pebula/ngrid-material@1.0.0-alpha.26](https://github.com/shlomiassaf/ngrid), License: MIT
-- [@pebula/ngrid@1.0.0-alpha.20](https://github.com/shlomiassaf/ngrid), License: MIT
+- [@pebula/ngrid@1.0.0-alpha.26](https://github.com/shlomiassaf/ngrid), License: MIT
 - [@pebula/utils@1.0.0-alpha.3](https://github.com/shlomiassaf/ngrid), License: MIT
-- [@tinymce/tinymce-angular@3.0.0](https://github.com/tinymce/tinymce-angular), License: Apache-2.0
+- [@tinymce/tinymce-angular@3.2.0](https://github.com/tinymce/tinymce-angular), License: Apache-2.0
-- [core-js@3.0.1](https://github.com/zloirock/core-js), License: MIT
+- [acorn@6.1.1](https://github.com/acornjs/acorn), License: MIT
-- [css-element-queries@1.1.1](https://github.com/marcj/css-element-queries), License: MIT
+- [core-js@3.1.4](https://github.com/zloirock/core-js), License: MIT
-- [exceljs@1.9.1](https://github.com/exceljs/exceljs), License: MIT
+- [css-element-queries@1.2.0](https://github.com/marcj/css-element-queries), License: MIT
-- [file-saver@2.0.1](https://github.com/eligrey/FileSaver.js), License: MIT
+- [exceljs@1.13.0](https://github.com/exceljs/exceljs), License: MIT
+- [file-saver@2.0.2](https://github.com/eligrey/FileSaver.js), License: MIT
 - [hammerjs@2.0.8](https://github.com/hammerjs/hammer.js), License: MIT
 - [lz4js@0.2.0](https://github.com/Benzinga/lz4js), License: ISC
 - [material-icon-font@0.1.0](https://github.com//petergng/svgFontCreator), License: ISC
-- [ng-pick-datetime@7.0.0](https://github.com/DanielYKPan/date-time-picker), License: MIT
 - [ng2-pdf-viewer@5.3.2](git+https://vadimdez@github.com/VadimDez/ng2-pdf-viewer), License: MIT
-- [ngx-file-drop@6.0.0](https://github.com/georgipeltekov/ngx-file-drop), License: MIT
+- [ngx-file-drop@8.0.3](https://github.com/georgipeltekov/ngx-file-drop), License: MIT
-- [ngx-mat-select-search@1.7.2](https://github.com/bithost-gmbh/ngx-mat-select-search), License: MIT
+- [ngx-mat-select-search@1.7.6](https://github.com/bithost-gmbh/ngx-mat-select-search), License: MIT
-- [ngx-papaparse@3.0.2](https://github.com/alberthaff/ngx-papaparse), License: MIT
+- [ngx-papaparse@3.0.3](https://github.com/alberthaff/ngx-papaparse), License: MIT
-- [pdfmake@0.1.54](https://github.com/bpampuch/pdfmake), License: MIT
+- [pdfmake@0.1.57](https://github.com/bpampuch/pdfmake), License: MIT
 - [po2json@1.0.0-alpha](https://github.com/mikeedwards/po2json), License: GNU Library General Public License
-- [rxjs@6.5.1](https://github.com/reactivex/rxjs), License: Apache-2.0
+- [rxjs@6.5.2](https://github.com/reactivex/rxjs), License: Apache-2.0
-- [tinymce@4.9.4](https://github.com/tinymce/tinymce-dist), License: LGPL-2.1
+- [text-encoding@0.7.0](https://github.com/inexorabletash/text-encoding), License: (Unlicense OR Apache-2.0)
+- [tinymce@5.0.9](https://github.com/tinymce/tinymce-dist), License: LGPL-2.1
+- [tslib@1.10.0](https://github.com/Microsoft/tslib), License: Apache-2.0
 - [uuid@3.3.2](https://github.com/kelektiv/node-uuid), License: MIT
-- [zone.js@0.8.29](https://github.com/angular/zone.js), License: MIT
+- [zone.js@0.9.1](https://github.com/angular/zone.js), License: MIT
-- [@angular-devkit/build-angular@0.13.8](https://github.com/angular/angular-cli), License: MIT
+- [@angular-devkit/build-angular@0.800.6](https://github.com/angular/angular-cli), License: MIT
-- [@angular/cli@7.3.8](https://github.com/angular/angular-cli), License: MIT
+- [@angular/cli@8.0.6](https://github.com/angular/angular-cli), License: MIT
-- [@angular/compiler-cli@7.2.14](https://github.com/angular/angular), License: MIT
+- [@angular/compiler-cli@8.0.3](https://github.com/angular/angular), License: MIT
-- [@angular/language-service@7.2.14](https://github.com/angular/angular), License: MIT
+- [@angular/language-service@8.0.3](https://github.com/angular/angular), License: MIT
 - [@biesbjerg/ngx-translate-extract@2.3.4](https://github.com/biesbjerg/ngx-translate-extract), License: MIT
 - [@compodoc/compodoc@1.1.9](https://github.com/compodoc/compodoc), License: MIT
-- [@types/jasmine@3.3.12](https://github.com/DefinitelyTyped/DefinitelyTyped), License: MIT
+- [@types/jasmine@3.3.13](https://github.com/DefinitelyTyped/DefinitelyTyped), License: MIT
 - [@types/jasminewd2@2.0.6](https://github.com/DefinitelyTyped/DefinitelyTyped), License: MIT
-- [@types/node@11.13.7](https://github.com/DefinitelyTyped/DefinitelyTyped), License: MIT
+- [@types/node@8.9.5](https://github.com/DefinitelyTyped/DefinitelyTyped), License: MIT
 - [@types/yargs@13.0.0](https://github.com/DefinitelyTyped/DefinitelyTyped), License: MIT
-- [codelyzer@5.0.1](https://github.com/mgechev/codelyzer), License: MIT
+- [codelyzer@5.1.0](https://github.com/mgechev/codelyzer), License: MIT
-- [husky@1.3.1](https://github.com/typicode/husky), License: MIT
+- [husky@2.7.0](https://github.com/typicode/husky), License: MIT
 - [jasmine-core@3.4.0](https://github.com/jasmine/jasmine), License: MIT
 - [jasmine-spec-reporter@4.2.1](https://github.com/bcaudan/jasmine-spec-reporter), License: Apache-2.0
 - [karma-chrome-launcher@2.2.0](https://github.com/karma-runner/karma-chrome-launcher), License: MIT
 - [karma-coverage-istanbul-reporter@2.0.5](https://github.com/mattlewis92/karma-coverage-istanbul-reporter), License: MIT
-- [karma-jasmine-html-reporter@1.4.0](https://github.com/dfederm/karma-jasmine-html-reporter), License: MIT
+- [karma-jasmine-html-reporter@1.4.2](https://github.com/dfederm/karma-jasmine-html-reporter), License: MIT
 - [karma-jasmine@2.0.1](https://github.com/karma-runner/karma-jasmine), License: MIT
 - [karma@4.1.0](https://github.com/karma-runner/karma), License: MIT
 - [npm-license-crawler@0.2.1](https://github.com/mwittig/npm-license-crawler), License: BSD-3-Clause
@@ -122,8 +123,9 @@ OpenSlides uses the following software or parts of them:
 - [prettier@1.18.2](https://github.com/prettier/prettier), License: MIT
 - [protractor@5.4.2](https://github.com/angular/protractor), License: MIT
 - [resize-observer-polyfill@1.5.1](https://github.com/que-etc/resize-observer-polyfill), License: MIT
-- [source-map-explorer@1.8.0](https://github.com/danvk/source-map-explorer), License: Apache-2.0
+- [source-map-explorer@2.0.1](https://github.com/danvk/source-map-explorer), License: Apache-2.0
-- [ts-node@8.1.0](https://github.com/TypeStrong/ts-node), License: MIT
+- [ts-node@7.0.1](https://github.com/TypeStrong/ts-node), License: MIT
-- [tslint@5.16.0](https://github.com/palantir/tslint), License: Apache-2.0
+- [tslint@5.15.0](https://github.com/palantir/tslint), License: Apache-2.0
-- [tsutils@3.10.0](https://github.com/ajafff/tsutils), License: MIT
+- [tsutils@3.14.0](https://github.com/ajafff/tsutils), License: MIT
+- [typescript@3.4.5](https://github.com/Microsoft/TypeScript), License: Apache-2.0
 - [webpack-bundle-analyzer@3.3.2](https://github.com/webpack-contrib/webpack-bundle-analyzer), License: MIT

client/angular.json

@@ -4,15 +4,15 @@
     "newProjectRoot": "projects",
     "projects": {
         "client": {
-            "root": "",
-            "sourceRoot": "src",
             "projectType": "application",
-            "prefix": "os",
             "schematics": {
                 "@schematics/angular:component": {
                     "styleext": "scss"
                 }
             },
+            "root": "",
+            "sourceRoot": "src",
+            "prefix": "os",
             "architect": {
                 "build": {
                     "builder": "@angular-devkit/build-angular:browser",
@@ -21,26 +21,17 @@
                         "index": "src/index.html",
                         "main": "src/main.ts",
                         "polyfills": "src/polyfills.ts",
-                        "tsConfig": "src/tsconfig.app.json",
+                        "tsConfig": "tsconfig.app.json",
-                        "assets": ["src/assets", "src/manifest.json"],
+                        "aot": false,
+                        "assets": [
+                            "src/assets",
+                            "src/manifest.json",
+                            { "glob": "**/*", "input": "node_modules/tinymce/skins", "output": "/tinymce/skins/" },
+                            { "glob": "**/*", "input": "node_modules/tinymce/themes", "output": "/tinymce/themes/" },
+                            { "glob": "**/*", "input": "node_modules/tinymce/plugins", "output": "/tinymce/plugins/" }
+                        ],
                         "styles": ["src/styles.scss"],
-                        "scripts": [
+                        "scripts": ["node_modules/tinymce/tinymce.min.js"]
-                            "node_modules/tinymce/tinymce.min.js",
-                            "node_modules/tinymce/themes/modern/theme.js",
-                            "node_modules/tinymce/plugins/autolink/plugin.js",
-                            "node_modules/tinymce/plugins/charmap/plugin.js",
-                            "node_modules/tinymce/plugins/code/plugin.js",
-                            "node_modules/tinymce/plugins/colorpicker/plugin.js",
-                            "node_modules/tinymce/plugins/fullscreen/plugin.js",
-                            "node_modules/tinymce/plugins/image/plugin.js",
-                            "node_modules/tinymce/plugins/imagetools/plugin.js",
-                            "node_modules/tinymce/plugins/lists/plugin.js",
-                            "node_modules/tinymce/plugins/link/plugin.js",
-                            "node_modules/tinymce/plugins/paste/plugin.js",
-                            "node_modules/tinymce/plugins/preview/plugin.js",
-                            "node_modules/tinymce/plugins/searchreplace/plugin.js",
-                            "node_modules/tinymce/plugins/textcolor/plugin.js"
-                        ]
                     },
                     "configurations": {
                         "production": {
@@ -59,7 +50,14 @@
                             "extractLicenses": true,
                             "vendorChunk": false,
                             "buildOptimizer": true,
-                            "serviceWorker": true
+                            "serviceWorker": true,
+                            "budgets": [
+                                {
+                                    "type": "initial",
+                                    "maximumWarning": "2mb",
+                                    "maximumError": "5mb"
+                                }
+                            ]
                         }
                     }
                 },
@@ -85,27 +83,27 @@
                     "options": {
                         "main": "src/test.ts",
                         "polyfills": "src/polyfills.ts",
-                        "tsConfig": "src/tsconfig.spec.json",
+                        "tsConfig": "tsconfig.spec.json",
-                        "karmaConfig": "src/karma.conf.js",
+                        "karmaConfig": "karma.conf.js",
                         "styles": ["src/styles.scss"],
                         "scripts": ["node_modules/tinymce/tinymce.min.js"],
-                        "assets": ["src/assets", "src/manifest.json"]
+                        "assets": [
+                            "src/assets",
+                            "src/manifest.json",
+                            { "glob": "**/*", "input": "node_modules/tinymce/skins", "output": "/tinymce/skins/" },
+                            { "glob": "**/*", "input": "node_modules/tinymce/themes", "output": "/tinymce/themes/" },
+                            { "glob": "**/*", "input": "node_modules/tinymce/plugins", "output": "/tinymce/plugins/" }
+                        ]
                     }
                 },
                 "lint": {
                     "builder": "@angular-devkit/build-angular:tslint",
                     "options": {
-                        "tsConfig": "src/tsconfig.spec.json",
+                        "tsConfig": "tsconfig.spec.json",
                         "format": "stylish",
                         "exclude": ["**/node_modules/**"]
                     }
-                }
-            }
                 },
-        "client-e2e": {
-            "root": "e2e/",
-            "projectType": "application",
-            "architect": {
                 "e2e": {
                     "builder": "@angular-devkit/build-angular:protractor",
                     "options": {
@@ -117,13 +115,6 @@
                             "devServerTarget": "client:serve:production"
                         }
                     }
-                },
-                "lint": {
-                    "builder": "@angular-devkit/build-angular:tslint",
-                    "options": {
-                        "tsConfig": "e2e/tsconfig.e2e.json",
-                        "exclude": ["**/node_modules/**"]
-                    }
                 }
             }
         }

client/browserslist

@@ -6,4 +6,4 @@
 last 2 versions
 Firefox ESR
 not dead
-# IE 9-11
+IE 9-11

client/package.json

@@ -25,60 +25,60 @@
         "prettify-write": "prettier --config ./.prettierrc --write \"src/{app,environments}/**/*{.ts,.js,.json,.css,.scss}\""
     },
     "dependencies": {
-        "@angular/animations": "^7.2.14",
+        "@angular/animations": "^8.0.3",
-        "@angular/cdk": "^7.3.7",
+        "@angular/cdk": "^8.0.1",
-        "@angular/cdk-experimental": "^7.3.7",
+        "@angular/cdk-experimental": "^8.0.1",
-        "@angular/common": "^7.2.14",
+        "@angular/common": "^8.0.3",
-        "@angular/compiler": "^7.2.14",
+        "@angular/compiler": "^8.0.3",
-        "@angular/core": "^7.2.14",
+        "@angular/core": "^8.0.3",
-        "@angular/forms": "^7.2.14",
+        "@angular/forms": "^8.0.3",
-        "@angular/http": "^7.2.14",
+        "@angular/material": "^8.0.1",
-        "@angular/material": "^7.3.7",
+        "@angular/platform-browser": "^8.0.3",
-        "@angular/platform-browser": "^7.2.14",
+        "@angular/platform-browser-dynamic": "^8.0.3",
-        "@angular/platform-browser-dynamic": "^7.2.14",
+        "@angular/pwa": "^0.800.6",
-        "@angular/pwa": "^0.13.8",
+        "@angular/router": "^8.0.3",
-        "@angular/router": "^7.2.14",
+        "@angular/service-worker": "^8.0.3",
-        "@angular/service-worker": "^7.2.14",
+        "@ngx-pwa/local-storage": "^8.0.2",
-        "@ngx-pwa/local-storage": "^7.4.1",
         "@ngx-translate/core": "^11.0.1",
         "@ngx-translate/http-loader": "^4.0.0",
-        "@pebula/ngrid": "1.0.0-alpha.20",
+        "@pebula/ngrid": "^1.0.0-alpha.26",
-        "@pebula/ngrid-material": "1.0.0-alpha.20",
+        "@pebula/ngrid-material": "^1.0.0-alpha.26",
-        "@pebula/utils": "1.0.0-alpha.3",
+        "@pebula/utils": "^1.0.0-alpha.3",
-        "@tinymce/tinymce-angular": "^3.0.0",
+        "@tinymce/tinymce-angular": "^3.2.0",
+        "acorn": "^6.1.1",
         "core-js": "^3.0.1",
         "css-element-queries": "^1.1.1",
-        "exceljs": "1.9.1",
+        "exceljs": "1.13.0",
         "file-saver": "^2.0.1",
         "hammerjs": "^2.0.8",
         "lz4js": "^0.2.0",
         "material-icon-font": "git+https://github.com/petergng/materialIconFont.git",
-        "ng-pick-datetime": "^7.0.0",
         "ng2-pdf-viewer": "^5.2.3",
-        "ngx-file-drop": "^6.0.0",
+        "ngx-file-drop": "^8.0.3",
         "ngx-mat-select-search": "^1.7.2",
         "ngx-papaparse": "^3.0.2",
         "pdfmake": "^0.1.53",
         "po2json": "^1.0.0-alpha",
-        "rxjs": "^6.5.1",
+        "rxjs": "^6.5.2",
         "text-encoding": "^0.7.0",
-        "tinymce": "^4.9.2",
+        "tinymce": "^5.0.9",
+        "tslib": "^1.9.0",
         "uuid": "^3.3.2",
-        "zone.js": "~0.8.26"
+        "zone.js": "~0.9.1"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "^0.13.8",
+        "@angular-devkit/build-angular": "~0.800.6",
-        "@angular/cli": "^7.3.8",
+        "@angular/cli": "^8.0.6",
-        "@angular/compiler-cli": "^7.2.14",
+        "@angular/compiler-cli": "^8.0.3",
-        "@angular/language-service": "^7.2.14",
+        "@angular/language-service": "^8.0.3",
         "@biesbjerg/ngx-translate-extract": "^2.3.4",
         "@compodoc/compodoc": "^1.1.8",
         "@types/jasmine": "^3.3.9",
         "@types/jasminewd2": "^2.0.6",
-        "@types/node": "^11.13.7",
+        "@types/node": "~8.9.4",
         "@types/yargs": "^13.0.0",
-        "codelyzer": "~5.0.0",
+        "codelyzer": "^5.0.1",
-        "husky": "^1.3.1",
+        "husky": "^2.7.0",
         "jasmine-core": "~3.4.0",
         "jasmine-spec-reporter": "~4.2.1",
         "karma": "^4.1.0",
@@ -91,11 +91,11 @@
         "prettier": "^1.18.0",
         "protractor": "^5.4.2",
         "resize-observer-polyfill": "^1.5.1",
-        "source-map-explorer": "^1.7.0",
+        "source-map-explorer": "^2.0.1",
-        "ts-node": "~8.1.0",
+        "ts-node": "~7.0.0",
-        "tslint": "~5.16.0",
+        "tslint": "~5.15.0",
-        "tsutils": "3.10.0",
+        "tsutils": "3.14.0",
-        "typescript": "~3.2.0",
+        "typescript": "~3.4.3",
         "webpack-bundle-analyzer": "^3.3.2"
     }
 }

client/src/app/app-routing.module.ts

@@ -25,10 +25,11 @@ const routes: Routes = [
     },
     {
         path: 'projector',
-        loadChildren: './fullscreen-projector/fullscreen-projector.module#FullscreenProjectorModule',
+        loadChildren: () =>
+            import('./fullscreen-projector/fullscreen-projector.module').then(m => m.FullscreenProjectorModule),
         data: { noInterruption: true }
     },
-    { path: '', loadChildren: './site/site.module#SiteModule' },
+    { path: '', loadChildren: () => import('./site/site.module').then(m => m.SiteModule) },
     { path: '**', redirectTo: '' }
 ];
 

client/src/app/base.component.ts

@@ -31,9 +31,11 @@ export abstract class BaseComponent {
      * Settings for the TinyMCE editor selector
      */
     public tinyMceSettings = {
+        base_url: '/tinymce', // Root for resources
+        suffix: '.min', // Suffix to use when loading resources
+        theme: 'silver',
         language: null,
         language_url: null,
-        skin_url: '/assets/tinymce/skins/lightgray',
         inline: false,
         statusbar: false,
         browser_spellcheck: true,
@@ -41,13 +43,17 @@ export abstract class BaseComponent {
         image_description: false,
         link_title: false,
         height: 320,
-        // TODO: image_list: images,
+        plugins: `autolink charmap code fullscreen image imagetools
-        plugins: `autolink charmap code colorpicker fullscreen image imagetools
+            lists link paste searchreplace`,
-            lists link paste searchreplace textcolor`,
+        menubar: false,
-        menubar: '',
+        contextmenu: false,
         toolbar: `styleselect | bold italic underline strikethrough |
             forecolor backcolor removeformat | bullist numlist |
-            link image charmap | code fullscreen`
+            link image charmap | code fullscreen`,
+        mobile: {
+            theme: 'mobile',
+            plugins: ['autosave', 'lists', 'autolink']
+        }
     };
 
     public constructor(protected titleService: Title, protected translate: TranslateService) {

client/src/app/core/core-services/autoupdate.service.ts

@@ -2,9 +2,8 @@ import { Injectable } from '@angular/core';
 
 import { WebsocketService, WEBSOCKET_ERROR_CODES } from './websocket.service';
 import { CollectionStringMapperService } from './collection-string-mapper.service';
-import { DataStoreService } from './data-store.service';
+import { DataStoreService, DataStoreUpdateManagerService } from './data-store.service';
 import { BaseModel } from '../../shared/models/base/base-model';
-import { DataStoreUpdateManagerService } from './data-store-update-manager.service';
 
 interface AutoupdateFormat {
     /**

client/src/app/core/core-services/data-store-update-manager.service.spec.ts

@@ -1,17 +0,0 @@
-import { TestBed, inject } from '@angular/core/testing';
-
-import { E2EImportsModule } from '../../../e2e-imports.module';
-import { DataStoreUpdateManagerService } from './data-store-update-manager.service';
-
-describe('DataStoreUpdateManagerService', () => {
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [E2EImportsModule],
-            providers: [DataStoreUpdateManagerService]
-        });
-    });
-
-    it('should be created', inject([DataStoreUpdateManagerService], (service: DataStoreUpdateManagerService) => {
-        expect(service).toBeTruthy();
-    }));
-});

client/src/app/core/core-services/data-store-update-manager.service.ts

@@ -1,182 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Deferred } from '../deferred';
-import { DataStoreService } from './data-store.service';
-import { CollectionStringMapperService } from './collection-string-mapper.service';
-
-export interface CollectionIds {
-    [collection: string]: number[];
-}
-
-/**
- * Helper class for collecting data during the update phase of the DataStore.
- */
-export class UpdateSlot {
-    /**
-     * Count instnaces of this class to easily compare them.
-     */
-    private static ID_COUTNER = 1;
-
-    /**
-     * Mapping of changed model ids to their collection.
-     */
-    private changedModels: CollectionIds = {};
-
-    /**
-     * Mapping of deleted models to their collection.
-     */
-    private deletedModels: CollectionIds = {};
-
-    /**
-     * The object's id.
-     */
-    private _id: number;
-
-    /**
-     * @param DS Carries the DataStore: TODO (see below `DataStoreUpdateManagerService.getNewUpdateSlot`)
-     */
-    public constructor(public readonly DS: DataStoreService) {
-        this._id = UpdateSlot.ID_COUTNER++;
-    }
-
-    /**
-     * Adds changed model information
-     *
-     * @param collection The collection
-     * @param id The id
-     */
-    public addChangedModel(collection: string, id: number): void {
-        if (!this.changedModels[collection]) {
-            this.changedModels[collection] = [];
-        }
-        this.changedModels[collection].push(id);
-    }
-
-    /**
-     * Adds deleted model information
-     *
-     * @param collection The collection
-     * @param id The id
-     */
-    public addDeletedModel(collection: string, id: number): void {
-        if (!this.deletedModels[collection]) {
-            this.deletedModels[collection] = [];
-        }
-        this.deletedModels[collection].push(id);
-    }
-
-    /**
-     * @param collection The collection
-     * @returns the list of changed model ids for the collection
-     */
-    public getChangedModelIdsForCollection(collection: string): number[] {
-        return this.changedModels[collection] || [];
-    }
-
-    /**
-     * @returns the mapping of all changed models
-     */
-    public getChangedModels(): CollectionIds {
-        return this.changedModels;
-    }
-
-    /**
-     * @param collection The collection
-     * @returns the list of deleted model ids for the collection
-     */
-    public getDeletedModelIdsForCollection(collection: string): number[] {
-        return this.deletedModels[collection] || [];
-    }
-
-    /**
-     * Compares this object to another update slot.
-     */
-    public equal(other: UpdateSlot): boolean {
-        return this._id === other._id;
-    }
-}
-
-/**
- * Manages updates in the DS. Collects all ids for changed and deleted models and bulk-update
- * affected repositories.
- */
-@Injectable({
-    providedIn: 'root'
-})
-export class DataStoreUpdateManagerService {
-    /**
-     * The current update slot
-     */
-    private currentUpdateSlot: UpdateSlot | null = null;
-
-    /**
-     * Requests for getting an update slot.
-     */
-    private updateSlotRequests: Deferred[] = [];
-
-    /**
-     * @param mapperService
-     */
-    public constructor(private mapperService: CollectionStringMapperService) {}
-
-    /**
-     * Retrieve the current update slot.
-     */
-    public getCurrentUpdateSlot(): UpdateSlot | null {
-        return this.currentUpdateSlot;
-    }
-
-    /**
-     * Get a new update slot. Returns a promise that must be awaited, if there is another
-     * update in progress.
-     *
-     * @param DS The DataStore. This is a hack, becuase we cannot use the DataStore
-     * here, because these are cyclic dependencies... --> TODO
-     */
-    public async getNewUpdateSlot(DS: DataStoreService): Promise<UpdateSlot> {
-        if (this.currentUpdateSlot) {
-            const request = new Deferred();
-            this.updateSlotRequests.push(request);
-            await request;
-        }
-        this.currentUpdateSlot = new UpdateSlot(DS);
-        return this.currentUpdateSlot;
-    }
-
-    /**
-     * Commits the given update slot. THis slot must be the current one. If there are requests
-     * for update slots queued, the next one will be served.
-     *
-     * Note: I added this param to make sure, that only the user of the slot
-     * can commit the update and no one else.
-     *
-     * @param slot The slot to commit
-     */
-    public commit(slot: UpdateSlot): void {
-        if (!this.currentUpdateSlot || !this.currentUpdateSlot.equal(slot)) {
-            throw new Error('No or wrong update slot to be finished!');
-        }
-        this.currentUpdateSlot = null;
-
-        // notify repositories in two phases
-        const repositories = this.mapperService.getAllRepositories();
-
-        // Phase 1: deleting and creating of view models (in this order)
-        repositories.forEach(repo => {
-            repo.deleteModels(slot.getDeletedModelIdsForCollection(repo.collectionString));
-            repo.changedModels(slot.getChangedModelIdsForCollection(repo.collectionString));
-        });
-
-        // Phase 2: updating dependencies
-        repositories.forEach(repo => {
-            repo.updateDependencies(slot.getChangedModels());
-        });
-
-        slot.DS.triggerModifiedObservable();
-
-        // serve next slot request
-        if (this.updateSlotRequests.length > 0) {
-            const request = this.updateSlotRequests.pop();
-            request.resolve();
-        }
-    }
-}

client/src/app/core/core-services/data-store.service.ts

@@ -1,11 +1,10 @@
 import { Injectable, EventEmitter } from '@angular/core';
-
 import { Observable, Subject } from 'rxjs';
 
 import { BaseModel, ModelConstructor } from '../../shared/models/base/base-model';
-import { StorageService } from './storage.service';
 import { CollectionStringMapperService } from './collection-string-mapper.service';
-import { DataStoreUpdateManagerService } from './data-store-update-manager.service';
+import { Deferred } from '../deferred';
+import { StorageService } from './storage.service';
 
 /**
  * Represents information about a deleted model.
@@ -17,6 +16,98 @@ export interface DeletedInformation {
     id: number;
 }
 
+export interface CollectionIds {
+    [collection: string]: number[];
+}
+
+/**
+ * Helper class for collecting data during the update phase of the DataStore.
+ */
+export class UpdateSlot {
+    /**
+     * Count instnaces of this class to easily compare them.
+     */
+    private static ID_COUTNER = 1;
+
+    /**
+     * Mapping of changed model ids to their collection.
+     */
+    private changedModels: CollectionIds = {};
+
+    /**
+     * Mapping of deleted models to their collection.
+     */
+    private deletedModels: CollectionIds = {};
+
+    /**
+     * The object's id.
+     */
+    private _id: number;
+
+    /**
+     * @param DS Carries the DataStore: TODO (see below `DataStoreUpdateManagerService.getNewUpdateSlot`)
+     */
+    public constructor(public readonly DS: DataStoreService) {
+        this._id = UpdateSlot.ID_COUTNER++;
+    }
+
+    /**
+     * Adds changed model information
+     *
+     * @param collection The collection
+     * @param id The id
+     */
+    public addChangedModel(collection: string, id: number): void {
+        if (!this.changedModels[collection]) {
+            this.changedModels[collection] = [];
+        }
+        this.changedModels[collection].push(id);
+    }
+
+    /**
+     * Adds deleted model information
+     *
+     * @param collection The collection
+     * @param id The id
+     */
+    public addDeletedModel(collection: string, id: number): void {
+        if (!this.deletedModels[collection]) {
+            this.deletedModels[collection] = [];
+        }
+        this.deletedModels[collection].push(id);
+    }
+
+    /**
+     * @param collection The collection
+     * @returns the list of changed model ids for the collection
+     */
+    public getChangedModelIdsForCollection(collection: string): number[] {
+        return this.changedModels[collection] || [];
+    }
+
+    /**
+     * @returns the mapping of all changed models
+     */
+    public getChangedModels(): CollectionIds {
+        return this.changedModels;
+    }
+
+    /**
+     * @param collection The collection
+     * @returns the list of deleted model ids for the collection
+     */
+    public getDeletedModelIdsForCollection(collection: string): number[] {
+        return this.deletedModels[collection] || [];
+    }
+
+    /**
+     * Compares this object to another update slot.
+     */
+    public equal(other: UpdateSlot): boolean {
+        return this._id === other._id;
+    }
+}
+
 /**
  * represents a collection on the Django server, uses an ID to access a {@link BaseModel}.
  *
@@ -49,6 +140,91 @@ interface JsonStorage {
     [collectionString: string]: JsonCollection;
 }
 
+/**
+ * TODO: Avoid circular dependencies between `DataStoreUpdateManagerService` and `DataStoreService` and split them into two files
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class DataStoreUpdateManagerService {
+    /**
+     * The current update slot
+     */
+    private currentUpdateSlot: UpdateSlot | null = null;
+
+    /**
+     * Requests for getting an update slot.
+     */
+    private updateSlotRequests: Deferred[] = [];
+
+    /**
+     * @param mapperService
+     */
+    public constructor(private mapperService: CollectionStringMapperService) {}
+
+    /**
+     * Retrieve the current update slot.
+     */
+    public getCurrentUpdateSlot(): UpdateSlot | null {
+        return this.currentUpdateSlot;
+    }
+
+    /**
+     * Get a new update slot. Returns a promise that must be awaited, if there is another
+     * update in progress.
+     *
+     * @param DS The DataStore. This is a hack, becuase we cannot use the DataStore
+     * here, because these are cyclic dependencies... --> TODO
+     */
+    public async getNewUpdateSlot(DS: DataStoreService): Promise<UpdateSlot> {
+        if (this.currentUpdateSlot) {
+            const request = new Deferred();
+            this.updateSlotRequests.push(request);
+            await request;
+        }
+        this.currentUpdateSlot = new UpdateSlot(DS);
+        return this.currentUpdateSlot;
+    }
+
+    /**
+     * Commits the given update slot. THis slot must be the current one. If there are requests
+     * for update slots queued, the next one will be served.
+     *
+     * Note: I added this param to make sure, that only the user of the slot
+     * can commit the update and no one else.
+     *
+     * @param slot The slot to commit
+     */
+    public commit(slot: UpdateSlot): void {
+        if (!this.currentUpdateSlot || !this.currentUpdateSlot.equal(slot)) {
+            throw new Error('No or wrong update slot to be finished!');
+        }
+        this.currentUpdateSlot = null;
+
+        // notify repositories in two phases
+        const repositories = this.mapperService.getAllRepositories();
+
+        // Phase 1: deleting and creating of view models (in this order)
+        repositories.forEach(repo => {
+            repo.deleteModels(slot.getDeletedModelIdsForCollection(repo.collectionString));
+            repo.changedModels(slot.getChangedModelIdsForCollection(repo.collectionString));
+        });
+
+        // Phase 2: updating dependencies
+        repositories.forEach(repo => {
+            repo.updateDependencies(slot.getChangedModels());
+        });
+
+        slot.DS.triggerModifiedObservable();
+
+        // serve next slot request
+        if (this.updateSlotRequests.length > 0) {
+            const request = this.updateSlotRequests.pop();
+            request.resolve();
+        }
+    }
+}
+
 /**
  * All mighty DataStore that comes with all OpenSlides components.
  * Use this.DS in an OpenSlides Component to Access the store.

client/src/app/core/core-services/storage.service.ts

@@ -4,7 +4,6 @@ import { LocalStorage } from '@ngx-pwa/local-storage';
 import { Observable } from 'rxjs';
 
 import { OpenSlidesStatusService } from './openslides-status.service';
-import { StoragelockService } from '../local-storage/storagelock.service';
 
 /**
  * Provides an async API to an key-value store using ngx-pwa which is internally
@@ -18,11 +17,7 @@ export class StorageService {
      * Constructor to create the StorageService. Needs the localStorage service.
      * @param localStorage
      */
-    public constructor(
+    public constructor(private localStorage: LocalStorage, private OSStatus: OpenSlidesStatusService) {}
-        private localStorage: LocalStorage,
-        private OSStatus: OpenSlidesStatusService,
-        private lock: StoragelockService
-    ) {}
 
     /**
      * Sets the item into the store asynchronously.
@@ -30,8 +25,6 @@ export class StorageService {
      * @param item
      */
     public async set(key: string, item: any): Promise<void> {
-        await this.lock.promise;
-
         this.assertNotHistoryMode();
         if (item === null || item === undefined) {
             await this.remove(key); // You cannot do a setItem with null or undefined...
@@ -49,8 +42,6 @@ export class StorageService {
      * @returns The requested value to the key
      */
     public async get<T>(key: string): Promise<T> {
-        await this.lock.promise;
-
         return ((await this.localStorage.getItem<T>(key)) as Observable<T>).toPromise();
     }
 
@@ -59,8 +50,6 @@ export class StorageService {
      * @param key The key to remove the value from
      */
     public async remove(key: string): Promise<void> {
-        await this.lock.promise;
-
         this.assertNotHistoryMode();
         if (!(await this.localStorage.removeItem(key).toPromise())) {
             throw new Error('Could not delete the item.');
@@ -71,8 +60,6 @@ export class StorageService {
      * Clear the whole cache
      */
     public async clear(): Promise<void> {
-        await this.lock.promise;
-
         this.assertNotHistoryMode();
         if (!(await this.localStorage.clear().toPromise())) {
             throw new Error('Could not clear the storage.');

client/src/app/core/core-services/time-travel.service.ts

@@ -3,13 +3,12 @@ import { Injectable } from '@angular/core';
 import { environment } from 'environments/environment';
 import { CollectionStringMapperService } from './collection-string-mapper.service';
 import { History } from 'app/shared/models/core/history';
-import { DataStoreService } from './data-store.service';
+import { DataStoreService, DataStoreUpdateManagerService } from './data-store.service';
 import { WebsocketService } from './websocket.service';
 import { BaseModel } from 'app/shared/models/base/base-model';
 import { OpenSlidesStatusService } from './openslides-status.service';
 import { OpenSlidesService } from './openslides.service';
 import { HttpService } from './http.service';
-import { DataStoreUpdateManagerService } from './data-store-update-manager.service';
 
 /**
  * Interface for full history data objects.

client/src/app/core/core-services/websocket.service.ts

@@ -1,5 +1,5 @@
 import { Injectable, NgZone, EventEmitter } from '@angular/core';
-import { MatSnackBar, MatSnackBarRef, SimpleSnackBar } from '@angular/material';
+import { MatSnackBar, MatSnackBarRef, SimpleSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 
 import { TranslateService } from '@ngx-translate/core';

client/src/app/core/core.module.ts

@@ -1,9 +1,7 @@
-import { NgModule, Optional, SkipSelf, Type, PLATFORM_ID } from '@angular/core';
+import { NgModule, Optional, SkipSelf, Type } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Title } from '@angular/platform-browser';
 
-import { LocalDatabase, LOCAL_STORAGE_PREFIX } from '@ngx-pwa/local-storage';
-
 // Shared Components
 import { PromptDialogComponent } from '../shared/components/prompt-dialog/prompt-dialog.component';
 import { ChoiceDialogComponent } from '../shared/components/choice-dialog/choice-dialog.component';
@@ -11,8 +9,6 @@ import { ProjectionDialogComponent } from 'app/shared/components/projection-dial
 
 import { OperatorService } from './core-services/operator.service';
 import { OnAfterAppsLoaded } from './onAfterAppsLoaded';
-import { StoragelockService } from './local-storage/storagelock.service';
-import { customLocalDatabaseFactory } from './local-storage/custom-indexeddb-database';
 
 export const ServicesToLoadOnAppsLoaded: Type<OnAfterAppsLoaded>[] = [OperatorService];
 
@@ -21,15 +17,7 @@ export const ServicesToLoadOnAppsLoaded: Type<OnAfterAppsLoaded>[] = [OperatorSe
  */
 @NgModule({
     imports: [CommonModule],
-    providers: [
+    providers: [Title],
-        Title,
-        // Use our own localStorage wrapper.
-        {
-            provide: LocalDatabase,
-            useFactory: customLocalDatabaseFactory,
-            deps: [PLATFORM_ID, StoragelockService, [new Optional(), LOCAL_STORAGE_PREFIX]]
-        }
-    ],
     entryComponents: [PromptDialogComponent, ChoiceDialogComponent, ProjectionDialogComponent]
 })
 export class CoreModule {

client/src/app/core/local-storage/custom-indexeddb-database.ts

@@ -1,108 +0,0 @@
-import { Optional, Inject, Injectable } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
-
-import {
-    IndexedDBDatabase,
-    LOCAL_STORAGE_PREFIX,
-    LocalStorageDatabase,
-    MockLocalDatabase,
-    LocalDatabase
-} from '@ngx-pwa/local-storage';
-import { fromEvent, race, Observable } from 'rxjs';
-import { first } from 'rxjs/operators';
-
-import { StoragelockService } from './storagelock.service';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class CustomIndexedDBDatabase extends IndexedDBDatabase {
-    public constructor(
-        private storageLock: StoragelockService,
-        @Optional() @Inject(LOCAL_STORAGE_PREFIX) protected prefix: string | null = null
-    ) {
-        super(prefix);
-    }
-
-    /**
-     * Connects to IndexedDB and creates the object store on first time
-     */
-    protected connect(prefix: string | null = null): void {
-        let request: IDBOpenDBRequest;
-
-        // Connecting to IndexedDB
-        try {
-            request = indexedDB.open(this.dbName);
-        } catch (error) {
-            // Fallback storage if IndexedDb connection is failing
-            this.setFallback(prefix);
-            return;
-        }
-
-        // Listening the event fired on first connection, creating the object store for local storage
-        (fromEvent(request, 'upgradeneeded') as Observable<Event>).pipe(first()).subscribe(event => {
-            // Getting the database connection
-            const database = (event.target as IDBRequest).result as IDBDatabase;
-
-            // Checking if the object store already exists, to avoid error
-            if (!database.objectStoreNames.contains(this.objectStoreName)) {
-                // Creating the object store for local storage
-                database.createObjectStore(this.objectStoreName);
-            }
-        });
-
-        // Listening the success event and converting to an RxJS Observable
-        const success = fromEvent(request, 'success') as Observable<Event>;
-
-        // Merging success and errors events
-        (race(success, this.toErrorObservable(request, `connection`)) as Observable<Event>).pipe(first()).subscribe(
-            event => {
-                const db = (event.target as IDBRequest).result as IDBDatabase;
-
-                // CUSTOM: If the indexedDB initialization fails, because 'upgradeneeded' didn't fired
-                // the fallback will be used.
-                if (!db.objectStoreNames.contains(this.objectStoreName)) {
-                    this.setFallback(prefix);
-                } else {
-                    // Storing the database connection for further access
-                    this.database.next(db);
-                    this.storageLock.OK(true);
-                }
-            },
-            () => {
-                // Fallback storage if IndexedDb connection is failing
-                this.setFallback(prefix);
-            }
-        );
-    }
-
-    // CUSTOM: If the fallback is used, unlock the storage service
-    public setFallback(prefix: string): void {
-        console.log('uses localStorage as IndexedDB fallback!');
-        super.setFallback(prefix);
-        this.storageLock.OK(false);
-    }
-}
-
-export function customLocalDatabaseFactory(
-    platformId: Object,
-    storagelock: StoragelockService,
-    prefix: string | null
-): LocalDatabase {
-    if (isPlatformBrowser(platformId) && 'indexedDB' in window && indexedDB !== undefined && indexedDB !== null) {
-        // Try with IndexedDB in modern browsers
-        // CUSTOM: Use our own IndexedDB implementation
-        return new CustomIndexedDBDatabase(storagelock, prefix);
-    } else if (
-        isPlatformBrowser(platformId) &&
-        'localStorage' in window &&
-        localStorage !== undefined &&
-        localStorage !== null
-    ) {
-        // Try with localStorage in old browsers (IE9)
-        return new LocalStorageDatabase(prefix);
-    } else {
-        // Fake database for server-side rendering (Universal)
-        return new MockLocalDatabase();
-    }
-}

client/src/app/core/local-storage/storagelock.service.ts

@@ -1,30 +0,0 @@
-import { Injectable } from '@angular/core';
-
-/**
- * Provides a storage lock for waiting to database to be initialized.
- */
-@Injectable({
-    providedIn: 'root'
-})
-export class StoragelockService {
-    private lock: Promise<void>;
-    private resolve: () => void;
-    private _indexedDBUsed = false;
-
-    public get promise(): Promise<void> {
-        return this.lock;
-    }
-
-    public get indexedDBUsed(): boolean {
-        return this._indexedDBUsed;
-    }
-
-    public constructor() {
-        this.lock = new Promise<void>(resolve => (this.resolve = resolve));
-    }
-
-    public OK(indexedDBUsed: boolean): void {
-        this._indexedDBUsed = indexedDBUsed;
-        this.resolve();
-    }
-}

client/src/app/core/repositories/base-repository.ts

@@ -6,12 +6,11 @@ import { BaseViewModel, TitleInformation } from '../../site/base/base-view-model
 import { BaseModel, ModelConstructor } from '../../shared/models/base/base-model';
 import { CollectionStringMapperService } from '../core-services/collection-string-mapper.service';
 import { DataSendService } from '../core-services/data-send.service';
-import { DataStoreService } from '../core-services/data-store.service';
+import { DataStoreService, CollectionIds } from '../core-services/data-store.service';
 import { Identifiable } from '../../shared/models/base/identifiable';
 import { ViewModelStoreService } from '../core-services/view-model-store.service';
 import { OnAfterAppsLoaded } from '../onAfterAppsLoaded';
 import { Collection } from 'app/shared/models/base/collection';
-import { CollectionIds } from '../core-services/data-store-update-manager.service';
 
 export abstract class BaseRepository<V extends BaseViewModel & T, M extends BaseModel, T extends TitleInformation>
     implements OnAfterAppsLoaded, Collection {

client/src/app/core/repositories/motions/motion-repository.service.ts

@@ -10,7 +10,7 @@ import { ChangeRecoMode, ViewMotion, MotionTitleInformation } from 'app/site/mot
 import { CollectionStringMapperService } from '../../core-services/collection-string-mapper.service';
 import { ConfigService } from 'app/core/ui-services/config.service';
 import { DataSendService } from '../../core-services/data-send.service';
-import { DataStoreService } from '../../core-services/data-store.service';
+import { DataStoreService, CollectionIds } from '../../core-services/data-store.service';
 import { DiffLinesInParagraph, DiffService, LineRange, ModificationType } from '../../ui-services/diff.service';
 import { HttpService } from 'app/core/core-services/http.service';
 import { LinenumberingService, LineNumberRange } from '../../ui-services/linenumbering.service';
@@ -38,7 +38,6 @@ import { ViewMediafile } from 'app/site/mediafiles/models/view-mediafile';
 import { ViewTag } from 'app/site/tags/models/view-tag';
 import { ViewPersonalNote } from 'app/site/users/models/view-personal-note';
 import { OperatorService } from 'app/core/core-services/operator.service';
-import { CollectionIds } from 'app/core/core-services/data-store-update-manager.service';
 import { PersonalNote, PersonalNoteContent } from 'app/shared/models/users/personal-note';
 import { ViewListOfSpeakers } from 'app/site/agenda/models/view-list-of-speakers';
 import { BaseIsAgendaItemAndListOfSpeakersContentObjectRepository } from '../base-is-agenda-item-and-list-of-speakers-content-object-repository';

client/src/app/core/ui-services/base-import.service.ts

@@ -1,6 +1,6 @@
 import { BehaviorSubject, Observable } from 'rxjs';
 import { Injectable, EventEmitter } from '@angular/core';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Papa, PapaParseConfig } from 'ngx-papaparse';
 import { TranslateService } from '@ngx-translate/core';
 

client/src/app/core/ui-services/choice.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
 import {
     ChoiceDialogComponent,

client/src/app/core/ui-services/count-users.service.ts

@@ -4,7 +4,6 @@ import { Observable, Subject } from 'rxjs';
 
 import { NotifyService } from '../core-services/notify.service';
 import { OperatorService } from '../core-services/operator.service';
-import { StoragelockService } from '../local-storage/storagelock.service';
 
 interface CountUserRequest {
     token: string;
@@ -41,11 +40,7 @@ export class CountUsersService {
      * @param notifyService
      * @param operator
      */
-    public constructor(
+    public constructor(private notifyService: NotifyService, operator: OperatorService) {
-        private notifyService: NotifyService,
-        operator: OperatorService,
-        storageLockService: StoragelockService
-    ) {
         // Listen for requests to send an answer.
         this.notifyService.getMessageObservable<CountUserRequest>(REQUEST_NAME).subscribe(request => {
             if (request.content.token) {
@@ -55,7 +50,7 @@ export class CountUsersService {
                         token: request.content.token,
                         data: {
                             userId: this.currentUserId,
-                            usesIndexedDB: storageLockService.indexedDBUsed
+                            usesIndexedDB: true
                         }
                     },
                     request.senderChannelName

client/src/app/core/ui-services/projection-dialog.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
 import { Projectable, ProjectorElementBuildDeskriptor, isProjectable } from 'app/site/base/projectable';
 import {

client/src/app/core/ui-services/prompt.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { PromptDialogComponent } from '../../shared/components/prompt-dialog/prompt-dialog.component';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
 /**
  * A general service for prompting 'yes' or 'cancel' thinks from the user.

client/src/app/fullscreen-projector/fullscreen-projector/fullscreen-projector.component.ts

@@ -56,7 +56,7 @@ export class FullscreenProjectorComponent implements OnInit {
     /**
      * The container to get the window size.
      */
-    @ViewChild('container')
+    @ViewChild('container', { static: true })
     private containerElement: ElementRef;
 
     /**

client/src/app/shared/components/block-tile/block-tile.component.ts

@@ -48,19 +48,19 @@ export class BlockTileComponent extends TileComponent {
     /**
      * Reference to the content of the content part.
      */
-    @ContentChild(TemplateRef)
+    @ContentChild(TemplateRef, { static: true })
     public contentNode: TemplateRef<any>;
 
     /**
      * Reference to the block part, if it is a node.
      */
-    @ContentChild(TemplateRef)
+    @ContentChild(TemplateRef, { static: true })
     public blockNode: TemplateRef<any>;
 
     /**
      * Reference to the action buttons in the content part, if used.
      */
-    @ContentChild(TemplateRef)
+    @ContentChild(TemplateRef, { static: true })
     public actionNode: TemplateRef<any>;
 
     /**

client/src/app/shared/components/choice-dialog/choice-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject, ViewEncapsulation } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 import { Displayable } from 'app/site/base/displayable';
 import { Identifiable } from 'app/shared/models/base/identifiable';

client/src/app/shared/components/copyright-sign/copyright-sign.component.ts

@@ -3,7 +3,7 @@
  */
 
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { MatDialogRef, MatDialog } from '@angular/material';
+import { MatDialogRef, MatDialog } from '@angular/material/dialog';
 import { OperatorService } from 'app/core/core-services/operator.service';
 import { NotifyService, NotifyResponse } from 'app/core/core-services/notify.service';
 import { Subscription } from 'rxjs';

client/src/app/shared/components/list-view-table/list-view-table.component.ts

@@ -83,7 +83,7 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
     /**
      * Declare the table
      */
-    @ViewChild(PblNgridComponent)
+    @ViewChild(PblNgridComponent, { static: false })
     private ngrid: PblNgridComponent;
 
     /**

client/src/app/shared/components/media-upload-content/media-upload-content.component.html

@@ -2,14 +2,14 @@
     <input hidden type="file" #fileInput (change)="onSelectFile($event)" multiple />
 
     <div class="selection-area">
-        <file-drop
+        <ngx-file-drop
             (onFileDrop)="onDropFile($event)"
             (click)="fileInput.click()"
             dropZoneLabel="{{ 'Drop files into this area OR click here to select files' | translate }}"
             contentClassName="file-drop-content-style"
             dropZoneClassName="file-drop-zone-style"
         >
-        </file-drop>
+        </ngx-file-drop>
     </div>
 
     <div class="table-container" *ngIf="uploadList.data.length > 0">

client/src/app/shared/components/media-upload-content/media-upload-content.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, ViewChild, Input, Output, EventEmitter } from '@angular/core';
-import { MatTableDataSource, MatTable } from '@angular/material';
+import { MatTableDataSource, MatTable } from '@angular/material/table';
 
-import { UploadEvent, FileSystemFileEntry } from 'ngx-file-drop';
+import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop';
 
 import { OperatorService } from 'app/core/core-services/operator.service';
 import { MediafileRepositoryService } from 'app/core/repositories/mediafiles/mediafile-repository.service';
@@ -58,7 +58,7 @@ export class MediaUploadContentComponent implements OnInit {
     /**
      * Hold the mat table to manually render new rows
      */
-    @ViewChild(MatTable)
+    @ViewChild(MatTable, { static: false })
     public table: MatTable<any>;
 
     /**
@@ -186,8 +186,8 @@ export class MediaUploadContentComponent implements OnInit {
      *
      * @param event holds the file. Triggered by dropping in the area
      */
-    public onDropFile(event: UploadEvent): void {
+    public onDropFile(event: NgxFileDropEntry[]): void {
-        for (const droppedFile of event.files) {
+        for (const droppedFile of event) {
             // Check if the dropped element is a file. "Else" would be a dir.
             if (droppedFile.fileEntry.isFile) {
                 const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;

client/src/app/shared/components/projection-dialog/projection-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 import { ProjectorElementBuildDeskriptor } from 'app/site/base/projectable';
 import { DataStoreService } from 'app/core/core-services/data-store.service';

client/src/app/shared/components/projector/projector.component.ts

@@ -81,7 +81,7 @@ export class ProjectorComponent extends BaseComponent implements OnDestroy {
      * The container element. THis is neede to get the size of the element,
      * in which the projector must fit and be scaled to.
      */
-    @ViewChild('container')
+    @ViewChild('container', { static: true })
     private containerElement: ElementRef;
 
     /**

client/src/app/shared/components/prompt-dialog/prompt-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 interface PromptDialogData {
     title: string;

client/src/app/shared/components/search-value-selector/search-value-selector.component.spec.ts

@@ -14,7 +14,7 @@ describe('SearchValueSelectorComponent', () => {
         template: '<os-search-value-selector></os-search-value-selector>'
     })
     class TestHostComponent {
-        @ViewChild(SearchValueSelectorComponent)
+        @ViewChild(SearchValueSelectorComponent, { static: true })
         public searchValueSelectorComponent: SearchValueSelectorComponent;
     }
 

client/src/app/shared/components/search-value-selector/search-value-selector.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, Input, ViewChild, OnDestroy } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
-import { MatSelect } from '@angular/material';
+import { MatSelect } from '@angular/material/select';
 
 import { Subject, ReplaySubject, BehaviorSubject, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -122,7 +122,7 @@ export class SearchValueSelectorComponent implements OnInit, OnDestroy {
     /**
      * The MultiSelect Component
      */
-    @ViewChild('thisSelector')
+    @ViewChild('thisSelector', { static: true })
     public thisSelector: MatSelect;
 
     /**

client/src/app/shared/components/slide-container/slide-container.component.ts

@@ -25,7 +25,7 @@ function hasError(obj: object): obj is { error: string } {
 export class SlideContainerComponent extends BaseComponent {
     private previousSlideName: string;
 
-    @ViewChild('slide', { read: ViewContainerRef })
+    @ViewChild('slide', { read: ViewContainerRef, static: true })
     private slide: ViewContainerRef;
     private slideRef: ComponentRef<BaseSlideComponent<object>>;
 

client/src/app/shared/components/sort-filter-bar/sort-bottom-sheet/sort-bottom-sheet.component.ts

@@ -1,5 +1,5 @@
 import { Inject, Component, OnInit } from '@angular/core';
-import { MatBottomSheetRef, MAT_BOTTOM_SHEET_DATA } from '@angular/material';
+import { MatBottomSheetRef, MAT_BOTTOM_SHEET_DATA } from '@angular/material/bottom-sheet';
 
 import { BaseSortListService } from 'app/core/ui-services/base-sort-list.service';
 import { BaseViewModel } from 'app/site/base/base-view-model';

client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.ts

@@ -1,5 +1,5 @@
 import { Input, Output, Component, ViewChild, EventEmitter, ViewEncapsulation } from '@angular/core';
-import { MatBottomSheet } from '@angular/material';
+import { MatBottomSheet } from '@angular/material/bottom-sheet';
 
 import { TranslateService } from '@ngx-translate/core';
 
@@ -69,13 +69,13 @@ export class SortFilterBarComponent<V extends BaseViewModel> {
     /**
      * The filter side drawer
      */
-    @ViewChild('filterMenu')
+    @ViewChild('filterMenu', { static: true })
     public filterMenu: FilterMenuComponent;
 
     /**
      * The bottom sheet used to alter sorting in mobile view
      */
-    @ViewChild('sortBottomSheet')
+    @ViewChild('sortBottomSheet', { static: false })
     public sortBottomSheet: SortBottomSheetComponent<V>;
 
     /**

client/src/app/shared/components/sorting-list/sorting-list.component.spec.ts

@@ -11,7 +11,7 @@ describe('SortingListComponent', () => {
         template: '<os-sorting-list><os-sorting-list>'
     })
     class TestHostComponent {
-        @ViewChild(SortingListComponent)
+        @ViewChild(SortingListComponent, { static: true })
         public sortingListCompononent: SortingListComponent;
     }
 

client/src/app/shared/components/sorting-list/sorting-list.component.ts

@@ -45,7 +45,7 @@ export class SortingListComponent implements OnInit, OnDestroy {
     /**
      * Declare the templateRef to coexist between parent in child
      */
-    @ContentChild(TemplateRef)
+    @ContentChild(TemplateRef, { static: true })
     public templateRef: TemplateRef<Selectable>;
 
     /**

client/src/app/shared/components/sorting-tree/sorting-tree.component.spec.ts

@@ -28,7 +28,7 @@ describe('SortingTreeComponent', () => {
         template: '<os-sorting-tree><os-sorting-tree>'
     })
     class TestHostComponent {
-        @ViewChild(SortingTreeComponent)
+        @ViewChild(SortingTreeComponent, { static: true })
         public sortingTreeCompononent: SortingTreeComponent<TestModel>;
     }
 

client/src/app/shared/components/sorting-tree/sorting-tree.component.ts

@@ -56,7 +56,7 @@ export class SortingTreeComponent<T extends Identifiable & Displayable> implemen
     /**
      * Declare the templateRef to coexist between parent in child
      */
-    @ContentChild(TemplateRef)
+    @ContentChild(TemplateRef, { static: true })
     public templateRef: TemplateRef<T>;
 
     /**
@@ -190,7 +190,7 @@ export class SortingTreeComponent<T extends Identifiable & Displayable> implemen
     /**
      * Reference to the template content.
      */
-    @ContentChild(TemplateRef)
+    @ContentChild(TemplateRef, { static: true })
     public innerNode: TemplateRef<any>;
 
     /**

client/src/app/shared/components/tile/tile.component.ts

@@ -49,7 +49,7 @@ export class TileComponent implements OnInit {
     /**
      * Reference to the dynamic content.
      */
-    @ContentChild(TemplateRef)
+    @ContentChild(TemplateRef, { static: true })
     public tileContext: TemplateRef<any>;
 
     /**

client/src/app/shared/date-adapter.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { NativeDateAdapter } from '@angular/material';
+import { NativeDateAdapter } from '@angular/material/core';
 
 /**
  * A custom DateAdapter for the datetimepicker in the config. This is still not fully working and needs to be done later.

client/src/app/shared/parent-error-state-matcher.ts

@@ -1,4 +1,4 @@
-import { ErrorStateMatcher } from '@angular/material';
+import { ErrorStateMatcher } from '@angular/material/core';
 import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';
 
 /**

client/src/app/shared/shared.module.ts

@@ -2,38 +2,34 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { CommonModule, DecimalPipe } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';
 
 // MaterialUI modules
-import {
+import { MatBadgeModule } from '@angular/material/badge';
-    MatButtonModule,
+import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
-    MatCheckboxModule,
+import { MatButtonModule } from '@angular/material/button';
-    MatToolbarModule,
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
-    MatCardModule,
+import { MatCardModule } from '@angular/material/card';
-    MatInputModule,
+import { MatCheckboxModule } from '@angular/material/checkbox';
-    MatProgressBarModule,
+import { MatNativeDateModule, DateAdapter } from '@angular/material/core';
-    MatProgressSpinnerModule,
+import { MatDatepickerModule } from '@angular/material/datepicker';
-    MatSidenavModule,
+import { MatDividerModule } from '@angular/material/divider';
-    MatSnackBarModule,
+import { MatIconModule } from '@angular/material/icon';
-    MatTableModule,
+import { MatInputModule } from '@angular/material/input';
-    MatPaginatorModule,
+import { MatPaginatorModule } from '@angular/material/paginator';
-    MatSortModule,
+import { MatProgressBarModule } from '@angular/material/progress-bar';
-    MatTooltipModule,
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-    MatDatepickerModule,
+import { MatSidenavModule } from '@angular/material/sidenav';
-    MatNativeDateModule,
+import { MatSliderModule } from '@angular/material/slider';
-    DateAdapter,
+import { MatSnackBarModule } from '@angular/material/snack-bar';
-    MatIconModule,
+import { MatSortModule } from '@angular/material/sort';
-    MatButtonToggleModule,
+import { MatStepperModule } from '@angular/material/stepper';
-    MatBadgeModule,
+import { MatTableModule } from '@angular/material/table';
-    MatStepperModule,
+import { MatTabsModule } from '@angular/material/tabs';
-    MatTabsModule,
+import { MatToolbarModule } from '@angular/material/toolbar';
-    MatBottomSheetModule,
+import { MatTooltipModule } from '@angular/material/tooltip';
-    MatSliderModule,
-    MatDividerModule
-} from '@angular/material';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatChipsModule } from '@angular/material';
+import { MatChipsModule } from '@angular/material/chips';
-import { MatRadioModule } from '@angular/material';
+import { MatRadioModule } from '@angular/material/radio';
 import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatListModule } from '@angular/material/list';
@@ -49,7 +45,7 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
 import { TranslateModule } from '@ngx-translate/core';
 
 // ngx-file-drop
-import { FileDropModule } from 'ngx-file-drop';
+import { NgxFileDropModule } from 'ngx-file-drop';
 
 // TinyMCE
 import { EditorModule } from '@tinymce/tinymce-angular';
@@ -145,13 +141,11 @@ import { AgendaContentObjectFormComponent } from './components/agenda-content-ob
         MatTabsModule,
         MatSliderModule,
         MatDividerModule,
-        OwlDateTimeModule,
-        OwlNativeDateTimeModule,
         DragDropModule,
         OpenSlidesTranslateModule.forChild(),
         RouterModule,
         NgxMatSelectSearchModule,
-        FileDropModule,
+        NgxFileDropModule,
         EditorModule,
         CdkTreeModule,
         ScrollingModule,
@@ -193,7 +187,7 @@ import { AgendaContentObjectFormComponent } from './components/agenda-content-ob
         MatDividerModule,
         DragDropModule,
         NgxMatSelectSearchModule,
-        FileDropModule,
+        NgxFileDropModule,
         TranslateModule,
         OpenSlidesTranslateModule,
         PermsDirective,
@@ -217,8 +211,6 @@ import { AgendaContentObjectFormComponent } from './components/agenda-content-ob
         MetaTextBlockComponent,
         ProjectorComponent,
         SlideContainerComponent,
-        OwlDateTimeModule,
-        OwlNativeDateTimeModule,
         CountdownTimeComponent,
         MediaUploadContentComponent,
         PrecisionPipe,
@@ -278,6 +270,12 @@ import { AgendaContentObjectFormComponent } from './components/agenda-content-ob
         SortBottomSheetComponent,
         DecimalPipe
     ],
-    entryComponents: [SortBottomSheetComponent, C4DialogComponent]
+    entryComponents: [
+        SortBottomSheetComponent,
+        C4DialogComponent,
+        PromptDialogComponent,
+        ChoiceDialogComponent,
+        ProjectionDialogComponent
+    ]
 })
 export class SharedModule {}

client/src/app/site/agenda/components/agenda-import-list/agenda-import-list.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { FormGroup, FormBuilder } from '@angular/forms';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 import { TranslateService } from '@ngx-translate/core';
 

client/src/app/site/agenda/components/agenda-list/agenda-list.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { MatSnackBar, MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 

client/src/app/site/agenda/components/agenda-sort/agenda-sort.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 import { BehaviorSubject, Observable } from 'rxjs';
 import { TranslateService } from '@ngx-translate/core';

client/src/app/site/agenda/components/item-info-dialog/item-info-dialog.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 import { ViewItem } from '../../models/view-item';
 import { ItemVisibilityChoices } from 'app/shared/models/agenda/item';

client/src/app/site/agenda/components/list-of-speakers/list-of-speakers.component.ts

@@ -1,7 +1,7 @@
 import { ActivatedRoute } from '@angular/router';
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormControl } from '@angular/forms';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 
 import { TranslateService } from '@ngx-translate/core';

client/src/app/site/agenda/models/view-list-of-speakers.ts

@@ -17,6 +17,9 @@ export interface ListOfSpeakersTitleInformation {
     title_information: object;
 }
 
+/**
+ * TODO: Resolve potential circular dependencies with {@link BaseViewModelWithListOfSpeakers}.
+ */
 export class ViewListOfSpeakers extends BaseViewModelWithContentObject<ListOfSpeakers, BaseViewModelWithListOfSpeakers>
     implements ListOfSpeakersTitleInformation, Projectable {
     public static COLLECTIONSTRING = ListOfSpeakers.COLLECTIONSTRING;

client/src/app/site/agenda/services/agenda-import.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 import { Papa } from 'ngx-papaparse';
 import { TranslateService } from '@ngx-translate/core';

client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Title, DomSanitizer, SafeHtml } from '@angular/platform-browser';
 

client/src/app/site/assignments/components/assignment-list/assignment-list.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 

client/src/app/site/assignments/components/assignment-poll-dialog/assignment-poll-dialog.component.ts

@@ -1,5 +1,6 @@
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA, MatSnackBar } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { TranslateService } from '@ngx-translate/core';
 
 import { AssignmentPollOption } from 'app/shared/models/assignments/assignment-poll-option';

client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { FormGroup, FormBuilder } from '@angular/forms';
-import { MatDialog, MatSnackBar } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 
 import { TranslateService } from '@ngx-translate/core';

client/src/app/site/base/base-import-list.ts

@@ -1,4 +1,6 @@
-import { MatTableDataSource, MatTable, MatSnackBar, MatSelectChange } from '@angular/material';
+import { MatSelectChange } from '@angular/material/select';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatTableDataSource, MatTable } from '@angular/material/table';
 import { ViewChild, OnInit } from '@angular/core';
 
 import { BaseViewComponent } from './base-view';
@@ -44,7 +46,7 @@ export abstract class BaseImportListComponent<V extends BaseViewModel> extends B
     /**
      * The table itself
      */
-    @ViewChild(MatTable)
+    @ViewChild(MatTable, { static: false })
     protected table: MatTable<NewEntry<V>>;
 
     /**

client/src/app/site/base/base-list-view.ts

@@ -1,4 +1,4 @@
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 import { OnDestroy } from '@angular/core';
 

client/src/app/site/base/base-view-model-with-agenda-item.ts

@@ -1,6 +1,5 @@
 import { BaseProjectableViewModel } from './base-projectable-view-model';
 import { SearchRepresentation } from 'app/core/ui-services/search.service';
-import { ViewItem } from '../agenda/models/view-item';
 import { isDetailNavigable, DetailNavigable } from 'app/shared/models/base/detail-navigable';
 import { isSearchable, Searchable } from './searchable';
 import { BaseModelWithAgendaItem } from 'app/shared/models/base/base-model-with-agenda-item';
@@ -32,7 +31,7 @@ export interface IBaseViewModelWithAgendaItem<M extends BaseModelWithAgendaItem
     extends BaseProjectableViewModel<M>,
         DetailNavigable,
         Searchable {
-    agendaItem: ViewItem | null;
+    agendaItem: any | null;
 
     agenda_item_id: number;
 
@@ -57,13 +56,15 @@ export interface IBaseViewModelWithAgendaItem<M extends BaseModelWithAgendaItem
 
 /**
  * Base view model class for view models with an agenda item.
+ *
+ * TODO: Resolve circular dependencies with `ViewItem` to avoid `any`.
  */
 export abstract class BaseViewModelWithAgendaItem<M extends BaseModelWithAgendaItem = any>
     extends BaseProjectableViewModel<M>
     implements IBaseViewModelWithAgendaItem<M> {
-    protected _item?: ViewItem;
+    protected _item?: any;
 
-    public get agendaItem(): ViewItem | null {
+    public get agendaItem(): any | null {
         return this._item;
     }
 
@@ -85,7 +86,7 @@ export abstract class BaseViewModelWithAgendaItem<M extends BaseModelWithAgendaI
      */
     public getAgendaListTitle: () => string;
 
-    public constructor(collecitonString: string, model: M, item?: ViewItem) {
+    public constructor(collecitonString: string, model: M, item?: any) {
         super(collecitonString, model);
         this._item = item || null; // Explicit set to null instead of undefined, if not given
     }
@@ -108,7 +109,7 @@ export abstract class BaseViewModelWithAgendaItem<M extends BaseModelWithAgendaI
     public updateDependencies(update: BaseViewModel): void {
         // We cannot check with instanceof, because this gives circular dependency issues...
         if (update.collectionString === Item.COLLECTIONSTRING && update.id === this.agenda_item_id) {
-            this._item = update as ViewItem;
+            this._item = update;
         }
     }
 }

client/src/app/site/base/base-view-model-with-list-of-speakers.ts

@@ -1,6 +1,5 @@
 import { BaseProjectableViewModel } from './base-projectable-view-model';
 import { isDetailNavigable, DetailNavigable } from 'app/shared/models/base/detail-navigable';
-import { ViewListOfSpeakers } from '../agenda/models/view-list-of-speakers';
 import { BaseModelWithListOfSpeakers } from 'app/shared/models/base/base-model-with-list-of-speakers';
 import { BaseViewModel } from './base-view-model';
 import { ListOfSpeakers } from 'app/shared/models/agenda/list-of-speakers';
@@ -22,7 +21,7 @@ export function isBaseViewModelWithListOfSpeakers(obj: any): obj is BaseViewMode
 export interface IBaseViewModelWithListOfSpeakers<M extends BaseModelWithListOfSpeakers = any>
     extends BaseProjectableViewModel<M>,
         DetailNavigable {
-    listOfSpeakers: ViewListOfSpeakers | null;
+    listOfSpeakers: any | null;
 
     list_of_speakers_id: number;
 
@@ -33,13 +32,15 @@ export interface IBaseViewModelWithListOfSpeakers<M extends BaseModelWithListOfS
 
 /**
  * Base view model class for models with a list of speakers.
+ *
+ * TODO: Resolve circular dependencies with `ViewListOfSpeakers` to avoid `any`.
  */
 export abstract class BaseViewModelWithListOfSpeakers<M extends BaseModelWithListOfSpeakers = any>
     extends BaseProjectableViewModel<M>
     implements IBaseViewModelWithListOfSpeakers<M> {
-    protected _listOfSpeakers?: ViewListOfSpeakers;
+    protected _listOfSpeakers?: any;
 
-    public get listOfSpeakers(): ViewListOfSpeakers | null {
+    public get listOfSpeakers(): any | null {
         return this._listOfSpeakers;
     }
 
@@ -50,7 +51,7 @@ export abstract class BaseViewModelWithListOfSpeakers<M extends BaseModelWithLis
     public getListOfSpeakersTitle: () => string;
     public getListOfSpeakersSlideTitle: () => string;
 
-    public constructor(collectionString: string, model: M, listOfSpeakers?: ViewListOfSpeakers) {
+    public constructor(collectionString: string, model: M, listOfSpeakers?: any) {
         super(collectionString, model);
         this._listOfSpeakers = listOfSpeakers || null; // Explicit set to null instead of undefined, if not given
     }
@@ -60,7 +61,7 @@ export abstract class BaseViewModelWithListOfSpeakers<M extends BaseModelWithLis
     public updateDependencies(update: BaseViewModel): void {
         // We cannot check with instanceof, becuase this givec circular dependency issues...
         if (update.collectionString === ListOfSpeakers.COLLECTIONSTRING && update.id === this.list_of_speakers_id) {
-            this._listOfSpeakers = update as ViewListOfSpeakers;
+            this._listOfSpeakers = update;
         }
     }
 }

client/src/app/site/base/base-view.ts

@@ -1,6 +1,6 @@
 import { OnDestroy } from '@angular/core';
 import { Title } from '@angular/platform-browser';
-import { MatSnackBar, MatSnackBarRef, SimpleSnackBar } from '@angular/material';
+import { MatSnackBar, MatSnackBarRef, SimpleSnackBar } from '@angular/material/snack-bar';
 
 import { TranslateService } from '@ngx-translate/core';
 

client/src/app/site/base/sort-tree.component.ts

@@ -1,5 +1,5 @@
 import { ViewChild, EventEmitter } from '@angular/core';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 
 import { TranslateService } from '@ngx-translate/core';
@@ -25,7 +25,7 @@ export abstract class SortTreeViewComponent<V extends BaseViewModel> extends Bas
     /**
      * Reference to the view child
      */
-    @ViewChild('osSortedTree')
+    @ViewChild('osSortedTree', { static: true })
     public osSortTree: SortingTreeComponent<V>;
 
     /**

client/src/app/site/common/components/search/search.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormGroup, FormControl } from '@angular/forms';
 import { Title } from '@angular/platform-browser';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 import { Subject } from 'rxjs';
 import { auditTime, debounceTime } from 'rxjs/operators';

client/src/app/site/config/components/config-field/config-field.component.html

@@ -74,12 +74,10 @@
                 <!-- datetimepicker -->
                 <div *ngIf="configItem.inputType === 'datetimepicker'">
                     <input
-                        [owlDateTime]="dt1"
+                        matInput
-                        [owlDateTimeTrigger]="dt1"
-                        (dateTimeChange)="updateTime($event)"
                         [value]="dateValue"
                     />
-                    <owl-date-time #dt1></owl-date-time>
+
                     <mat-label>{{ configItem.label | translate }}</mat-label>
                     <mat-hint *ngIf="configItem.helpText">{{ configItem.helpText | translate }}</mat-hint>
                     <span matSuffix>

client/src/app/site/config/components/config-field/config-field.component.ts

@@ -3,7 +3,6 @@ import { FormGroup, FormBuilder } from '@angular/forms';
 import { Title } from '@angular/platform-browser';
 
 import { distinctUntilChanged } from 'rxjs/operators';
-import { DateTimeAdapter } from 'ng-pick-datetime';
 import { TranslateService } from '@ngx-translate/core';
 
 import { BaseComponent } from 'app/base.component';
@@ -107,11 +106,9 @@ export class ConfigFieldComponent extends BaseComponent implements OnInit {
         protected translate: TranslateService,
         private formBuilder: FormBuilder,
         private cdRef: ChangeDetectorRef,
-        public repo: ConfigRepositoryService,
+        public repo: ConfigRepositoryService
-        dateTimeAdapter: DateTimeAdapter<any>
     ) {
         super(titleService, translate);
-        dateTimeAdapter.setLocale(this.translate.currentLang);
     }
 
     /**

client/src/app/site/history/components/history-list/history-list.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { MatSnackBar, MatTableDataSource } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatTableDataSource } from '@angular/material/table';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 

client/src/app/site/login/components/reset-password-confirm/reset-password-confirm.component.spec.ts

@@ -2,7 +2,7 @@ import { async, ComponentFixture, TestBed, tick, fakeAsync, flush, flushMicrotas
 
 import { ResetPasswordConfirmComponent } from './reset-password-confirm.component';
 import { E2EImportsModule } from 'e2e-imports.module';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 let matSnackBarSpy: jasmine.SpyObj<MatSnackBar>;
 

client/src/app/site/login/components/reset-password-confirm/reset-password-confirm.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 import { TranslateService } from '@ngx-translate/core';
 

client/src/app/site/login/components/reset-password/reset-password.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 
 import { TranslateService } from '@ngx-translate/core';

client/src/app/site/mediafiles/components/media-upload/media-upload.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { Title } from '@angular/platform-browser';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 import { TranslateService } from '@ngx-translate/core';
 

client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
 import { FormGroup, Validators, FormBuilder } from '@angular/forms';
-import { MatSnackBar, MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 
@@ -65,13 +66,13 @@ export class MediafileListComponent extends BaseListViewComponent<ViewMediafile>
     /**
      * The form to edit Files
      */
-    @ViewChild('fileEditForm')
+    @ViewChild('fileEditForm', { static: true })
     public fileEditForm: FormGroup;
 
     /**
      * Reference to the template
      */
-    @ViewChild('fileEditDialog')
+    @ViewChild('fileEditDialog', { static: true })
     public fileEditDialog: TemplateRef<string>;
 
     /**

client/src/app/site/motions/modules/call-list/call-list.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 import { Observable, BehaviorSubject } from 'rxjs';
 import { TranslateService } from '@ngx-translate/core';

client/src/app/site/motions/modules/category/components/categories-sort/categories-sort.component.ts

@@ -1,6 +1,6 @@
 import { Component, ViewChild } from '@angular/core';
 import { Title } from '@angular/platform-browser';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
@@ -24,7 +24,7 @@ export class CategoriesSortComponent extends BaseViewComponent implements CanCom
     /**
      * Reference to the sorting tree.
      */
-    @ViewChild('osSortedTree')
+    @ViewChild('osSortedTree', { static: true })
     private osSortTree: SortingTreeComponent<ViewCategory>;
 
     /**

client/src/app/site/motions/modules/category/components/category-detail/category-detail.component.ts

@@ -1,7 +1,9 @@
 import { ActivatedRoute, Router } from '@angular/router';
 import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
 import { FormGroup, Validators, FormBuilder } from '@angular/forms';
-import { MatSnackBar, MatDialog, MatTableDataSource } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatTableDataSource } from '@angular/material/table';
 import { Title } from '@angular/platform-browser';
 
 import { TranslateService } from '@ngx-translate/core';
@@ -41,13 +43,13 @@ export class CategoryDetailComponent extends BaseViewComponent implements OnInit
     /**
      * The form to edit the selected category
      */
-    @ViewChild('editForm')
+    @ViewChild('editForm', { static: true })
     public editForm: FormGroup;
 
     /**
      * Reference to the template for edit-dialog
      */
-    @ViewChild('editDialog')
+    @ViewChild('editDialog', { static: true })
     private editDialog: TemplateRef<string>;
 
     /**

client/src/app/site/motions/modules/category/components/category-list/category-list.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { Title } from '@angular/platform-browser';
-import { MatSnackBar, MatTableDataSource } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatTableDataSource } from '@angular/material/table';
 
 import { TranslateService } from '@ngx-translate/core';
 

client/src/app/site/motions/modules/category/components/category-motions-sort/category-motions-sort.component.ts

@@ -8,7 +8,7 @@ import { BaseViewComponent } from 'app/site/base/base-view';
 import { CategoryRepositoryService } from 'app/core/repositories/motions/category-repository.service';
 import { CanComponentDeactivate } from 'app/shared/utils/watch-sorting-tree.guard';
 import { ChoiceService } from 'app/core/ui-services/choice.service';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { MotionRepositoryService } from 'app/core/repositories/motions/motion-repository.service';
 import { PromptService } from 'app/core/ui-services/prompt.service';
 import { SortingListComponent } from 'app/shared/components/sorting-list/sorting-list.component';
@@ -71,7 +71,7 @@ export class CategoryMotionsSortComponent extends BaseViewComponent implements O
     /**
      * The Sort Component
      */
-    @ViewChild('sorter')
+    @ViewChild('sorter', { static: true })
     public sortSelector: SortingListComponent;
 
     /**

client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.ts

@@ -1,7 +1,8 @@
 import { ActivatedRoute, Router } from '@angular/router';
 import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
 import { FormGroup, Validators, FormBuilder } from '@angular/forms';
-import { MatSnackBar, MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 
 import { TranslateService } from '@ngx-translate/core';
@@ -74,13 +75,13 @@ export class MotionBlockDetailComponent extends BaseViewComponent implements OnI
     /**
      * The form to edit blocks
      */
-    @ViewChild('blockEditForm')
+    @ViewChild('blockEditForm', { static: true })
     public blockEditForm: FormGroup;
 
     /**
      * Reference to the template for edit-dialog
      */
-    @ViewChild('editDialog')
+    @ViewChild('editDialog', { static: true })
     private editDialog: TemplateRef<string>;
 
     /**

client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { Title } from '@angular/platform-browser';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 import { BehaviorSubject } from 'rxjs';
 import { TranslateService } from '@ngx-translate/core';

client/src/app/site/motions/modules/motion-comment-section/motion-comment-section-list.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 import { TranslateService } from '@ngx-translate/core';
 import { BehaviorSubject } from 'rxjs';

client/src/app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.ts

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 import { TranslateService } from '@ngx-translate/core';
 

client/src/app/site/motions/modules/motion-detail/components/manage-submitters/manage-submitters.component.spec.ts

@@ -13,7 +13,7 @@ describe('ManageSubmittersComponent', () => {
         template: '<os-manage-submitters></os-manage-submitters>'
     })
     class TestHostComponent {
-        @ViewChild(ManageSubmittersComponent)
+        @ViewChild(ManageSubmittersComponent, { static: true })
         public manageSubmitterComponent: ManageSubmittersComponent;
     }
 

client/src/app/site/motions/modules/motion-detail/components/manage-submitters/manage-submitters.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { FormGroup, FormControl } from '@angular/forms';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 import { BehaviorSubject, Observable } from 'rxjs';
 

client/src/app/site/motions/modules/motion-detail/components/motion-change-recommendation/motion-change-recommendation.component.html

@@ -1,9 +1,10 @@
-<h2 mat-dialog-title translate>New change recommendation</h2>
+<h1 mat-dialog-title translate>New change recommendation</h1>
-<mat-dialog-content>
+<div mat-dialog-content>
-    <form class="motion-content" [formGroup]='contentForm' (ngSubmit)='saveChangeRecommendation()'>
+    <form class="motion-content" [formGroup]="contentForm" (ngSubmit)="saveChangeRecommendation()">
-
         <mat-radio-group #rGroup formControlName="diffType">
-            <mat-radio-button *ngFor="let radio of replacementTypes" [value]="radio.value">{{ radio.title }}</mat-radio-button>
+            <mat-radio-button *ngFor="let radio of replacementTypes" [value]="radio.value">{{
+                radio.title
+            }}</mat-radio-button>
         </mat-radio-group>
 
         <!-- The HTML Editor -->
@@ -11,17 +12,17 @@
             <span translate>Changed version in line</span> {{ lineRange.from }}:
         </h4>
         <h4 *ngIf="lineRange.to != lineRange.from + 1">
-            <span translate>Changed version in line</span> {{ lineRange.from }} <span translate>to</span> {{ lineRange.to - 1 }}:
+            <span translate>Changed version in line</span> {{ lineRange.from }} <span translate>to</span>
+            {{ lineRange.to - 1 }}:
         </h4>
-        <editor
+        <div>
-            formControlName='text'
+            <editor formControlName="text" [init]="tinyMceSettings"></editor>
-            [init]="tinyMceSettings"
+        </div>
-        ></editor>
 
         <mat-checkbox formControlName="public">{{ 'Public' | translate }}</mat-checkbox>
     </form>
-</mat-dialog-content>
+</div>
-<mat-dialog-actions>
+<div mat-dialog-actions>
     <!-- The mat-dialog-close directive optionally accepts a value as a result for the dialog. -->
     <button mat-button (click)="saveChangeRecommendation()">
         <span translate>Save</span>
@@ -29,4 +30,4 @@
     <button mat-button mat-dialog-close>
         <span translate>Cancel</span>
     </button>
-</mat-dialog-actions>
+</div>

client/src/app/site/motions/modules/motion-detail/components/motion-change-recommendation/motion-change-recommendation.component.scss

@@ -1,17 +0,0 @@
-::ng-deep h3 {
-    margin-top: 0.3em;
-    margin-bottom: 0.3em;
-    font-size: 1em;
-}
-::ng-deep .mat-dialog-content {
-    overflow: visible;
-}
-.wide-form {
-    textarea {
-        height: 100px;
-    }
-
-    ::ng-deep {
-        width: 100%;
-    }
-}

client/src/app/site/motions/modules/motion-detail/components/motion-change-recommendation/motion-change-recommendation.component.spec.ts

@@ -6,7 +6,7 @@ import {
 } from './motion-change-recommendation.component';
 
 import { E2EImportsModule } from 'e2e-imports.module';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { ModificationType } from 'app/core/ui-services/diff.service';
 import { ViewMotionChangeRecommendation } from 'app/site/motions/models/view-motion-change-recommendation';
 

client/src/app/site/motions/modules/motion-detail/components/motion-change-recommendation/motion-change-recommendation.component.ts

@@ -1,5 +1,6 @@
 import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef, MatSnackBar } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Title } from '@angular/platform-browser';
 
@@ -105,7 +106,6 @@ export class MotionChangeRecommendationComponent extends BaseViewComponent {
         this.changeReco = data.changeRecommendation;
         this.lineRange = data.lineRange;
 
-        this.tinyMceSettings.height = 50;
         this.tinyMceSettings.toolbar = `undo redo | bold italic underline strikethrough
             | removeformat | bullist numlist | outdent indent | link charmap code`;
 

client/src/app/site/motions/modules/motion-detail/components/motion-comments/motion-comments.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title, DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { FormGroup, FormBuilder } from '@angular/forms';
 

client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.ts

@@ -1,5 +1,6 @@
 import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
-import { MatDialog, MatSnackBar } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { DomSanitizer, SafeHtml, Title } from '@angular/platform-browser';
 
 import { TranslateService } from '@ngx-translate/core';
@@ -295,8 +296,10 @@ export class MotionDetailDiffComponent extends BaseViewComponent implements Afte
             changeRecommendation: reco
         };
         this.dialogService.open(MotionChangeRecommendationComponent, {
-            height: '400px',
+            height: '600px',
-            width: '600px',
+            width: '800px',
+            maxHeight: '90vh',
+            maxWidth: '90vw',
             data: data,
             disableClose: true
         });

client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html

@@ -617,6 +617,7 @@
                 <mat-form-field *ngIf="editMotion">
                     <input
                         matInput
+                        autofocus
                         placeholder="{{ 'Identifier' | translate }}"
                         formControlName="identifier"
                         [value]="motionCopy.identifier || ''"
@@ -629,7 +630,6 @@
                 <mat-form-field *ngIf="editMotion">
                     <input
                         matInput
-                        osAutofocus
                         placeholder="{{ 'Title' | translate }}"
                         formControlName="title"
                         [value]="motionCopy.title"

client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.ts

@@ -2,7 +2,10 @@ import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
 import { Component, OnInit, OnDestroy, ElementRef, HostListener, TemplateRef } from '@angular/core';
 import { DomSanitizer, SafeHtml, Title } from '@angular/platform-browser';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
-import { MatDialog, MatSnackBar, MatCheckboxChange, ErrorStateMatcher } from '@angular/material';
+import { MatCheckboxChange } from '@angular/material/checkbox';
+import { ErrorStateMatcher } from '@angular/material/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 import { BehaviorSubject, Subscription } from 'rxjs';
 import { TranslateService } from '@ngx-translate/core';
@@ -1035,8 +1038,10 @@ export class MotionDetailComponent extends BaseViewComponent implements OnInit,
             )
         };
         this.dialogService.open(MotionChangeRecommendationComponent, {
-            height: '400px',
+            height: '600px',
-            width: '600px',
+            width: '800px',
+            maxHeight: '90vh',
+            maxWidth: '90vw',
             data: data,
             disableClose: true
         });

client/src/app/site/motions/modules/motion-detail/components/motion-poll/motion-poll-dialog.component.ts

@@ -1,5 +1,6 @@
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA, MatSnackBar } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { TranslateService } from '@ngx-translate/core';
 
 import { MotionPoll } from 'app/shared/models/motions/motion-poll';

client/src/app/site/motions/modules/motion-detail/components/motion-poll/motion-poll.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
 import { TranslateService } from '@ngx-translate/core';
 

client/src/app/site/motions/modules/motion-import/motion-import-list.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 
 import { TranslateService } from '@ngx-translate/core';

client/src/app/site/motions/modules/motion-list/components/motion-export-dialog/motion-export-dialog.component.spec.ts

@@ -2,7 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { MotionExportDialogComponent } from './motion-export-dialog.component';
 import { E2EImportsModule } from 'e2e-imports.module';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 
 describe('MotionExportDialogComponent', () => {
     let component: MotionExportDialogComponent;

client/src/app/site/motions/modules/motion-list/components/motion-export-dialog/motion-export-dialog.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { FormGroup, FormBuilder } from '@angular/forms';
-import { MatDialogRef, MatButtonToggle } from '@angular/material';
+import { MatButtonToggle } from '@angular/material/button-toggle';
+import { MatDialogRef } from '@angular/material/dialog';
 
 import { ConfigService } from 'app/core/ui-services/config.service';
 import { MotionCommentSectionRepositoryService } from 'app/core/repositories/motions/motion-comment-section-repository.service';
@@ -82,13 +83,13 @@ export class MotionExportDialogComponent implements OnInit {
     /**
      * To deactivate the export-as-diff button
      */
-    @ViewChild('diffVersionButton')
+    @ViewChild('diffVersionButton', { static: true })
     public diffVersionButton: MatButtonToggle;
 
     /**
      * To deactivate the export-as-diff button
      */
-    @ViewChild('votingResultButton')
+    @ViewChild('votingResultButton', { static: true })
     public votingResultButton: MatButtonToggle;
 
     /**

client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Title } from '@angular/platform-browser';
-import { MatSnackBar, MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 import { TranslateService } from '@ngx-translate/core';
 import { PblColumnDefinition } from '@pebula/ngrid';
@@ -76,7 +77,7 @@ export class MotionListComponent extends BaseListViewComponent<ViewMotion> imple
     /**
      * Reference to the dialog for quick editing meta information.
      */
-    @ViewChild('motionInfoDialog')
+    @ViewChild('motionInfoDialog', { static: true })
     private motionInfoDialog: TemplateRef<string>;
 
     /**

client/src/app/site/motions/modules/motion-workflow/components/workflow-detail/workflow-detail.component.ts

@@ -1,6 +1,9 @@
 import { ActivatedRoute } from '@angular/router';
 import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
-import { MatDialog, MatSnackBar, MatTableDataSource, MatCheckboxChange } from '@angular/material';
+import { MatCheckboxChange } from '@angular/material/checkbox';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatTableDataSource } from '@angular/material/table';
 import { Observable } from 'rxjs';
 import { Title } from '@angular/platform-browser';
 
@@ -68,7 +71,7 @@ export class WorkflowDetailComponent extends BaseViewComponent implements OnInit
     /**
      * Reference to the workflow dialog
      */
-    @ViewChild('workflowDialog')
+    @ViewChild('workflowDialog', { static: true })
     private workflowDialog: TemplateRef<string>;
 
     /**