fix(CI): ensure at least build step work

- Comment theme import due to same color palette use

.editorconfig

@@ -11,3 +11,6 @@ trim_trailing_whitespace = true
 [*.md]
 max_line_length = off
 trim_trailing_whitespace = false
+
+[*.yaml]
+indent_style = space

.gitignore

@@ -35,6 +35,7 @@ speed-measure-plugin*.json
 .idea
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

.gitlab-ci.yml

@@ -1,5 +1,5 @@
 # image: weboaks/node-karma-protractor-chrome
-image: node:12.22.5
+image: node:16
 
 stages:
   - build
@@ -42,7 +42,7 @@ build:
   before_script:
     - yarn
   script:
-    - yarn run build:prod:demobliss
+    - yarn run build:prod
   cache:
     policy: pull
 

angular.json

@@ -22,11 +22,9 @@
 						"main": "src/main.ts",
 						"polyfills": "src/polyfills.ts",
 						"tsConfig": "tsconfig.app.json",
-						"assets": [
+						"assets": ["src/favicon.ico", "src/assets"],
-							"src/favicon.ico",
-							"src/assets"
-						],
 						"styles": [
+							"node_modules/prismjs/themes/prism-okaidia.css",
 							"node_modules/fork-awesome/css/fork-awesome.min.css",
 							"node_modules/bulma-switch/dist/css/bulma-switch.min.css",
 							"node_modules/primeicons/primeicons.css",
@@ -35,11 +33,18 @@
 							"src/styles.scss"
 						],
 						"scripts": [
-							"node_modules/chart.js/dist/Chart.min.js",
+							"node_modules/chart.js/dist/chart.umd.js",
-							"node_modules/marked/lib/marked.js",
+							"node_modules/marked/marked.min.js",
 							"node_modules/prismjs/prism.js",
 							"node_modules/prismjs/components/prism-css.min.js"
-						]
+						],
+						"aot": false,
+						"vendorChunk": true,
+						"extractLicenses": false,
+						"buildOptimizer": false,
+						"sourceMap": true,
+						"optimization": false,
+						"namedChunks": true
 					},
 					"configurations": {
 						"production": {
@@ -52,7 +57,6 @@
 							"optimization": true,
 							"outputHashing": "all",
 							"sourceMap": false,
-							"extractCss": true,
 							"namedChunks": false,
 							"aot": true,
 							"extractLicenses": true,
@@ -72,7 +76,8 @@
 								}
 							]
 						}
-					}
+					},
+					"defaultConfiguration": ""
 				},
 				"serve": {
 					"builder": "@angular-devkit/build-angular:dev-server",
@@ -95,19 +100,6 @@
 					"builder": "@angular-builders/jest:run",
 					"options": {}
 				},
-				"lint": {
-					"builder": "@angular-devkit/build-angular:tslint",
-					"options": {
-						"tsConfig": [
-							"tsconfig.app.json",
-							"tsconfig.spec.json",
-							"e2e/tsconfig.json"
-						],
-						"exclude": [
-							"**/node_modules/**"
-						]
-					}
-				},
 				"e2e": {
 					"builder": "@angular-devkit/build-angular:protractor",
 					"options": {
@@ -123,7 +115,6 @@
 			}
 		}
 	},
-	"defaultProject": "framadate",
 	"cli": {
 		"analytics": "0ba9c0a9-850f-4c5f-8124-cbe6f4c79ef1"
 	}

compose.yaml

@@ -0,0 +1,13 @@
+services:
+  date-front:
+    image: node:lts-slim
+    entrypoint:
+      - "bash"
+      - "docker/dev/entrypoint.sh"
+    volumes:
+      - '.:/var/www/html/funky-framadate-front'
+    working_dir: '/var/www/html/funky-framadate-front'
+    environment:
+      - "NODE_OPTIONS=--openssl-legacy-provider"
+    ports:
+      - "4200:4200"

docker/dev/entrypoint.sh

@@ -0,0 +1,2 @@
+yarn install --pure-lockfile
+yarn start_docker

e2e/tsconfig.json

@@ -3,7 +3,7 @@
 	"compilerOptions": {
 		"outDir": "../out-tsc/e2e",
 		"module": "commonjs",
-		"target": "es5",
+		"target": "es2018",
 		"types": ["jasmine", "jasminewd2", "node"]
 	}
 }

package.json

@@ -1,134 +1,144 @@
 {
-	"name": "framadate-funky-frontend",
+  "name": "framadate-funky-frontend",
-	"version": "0.6.0",
+  "version": "0.6.0",
-	"license": "AGPL-3.0-or-later",
+  "license": "AGPL-3.0-or-later",
-	"engines": {
+  "engines": {
-		"node": ">= 16.0.0"
+    "node": ">= 16.13.0"
-	},
+  },
-	"scripts": {
+  "resolutions": {
-		"ng": "ng",
+    "webpack": "^5.0.0"
-		"start": "ng serve",
+  },
-		"build:prod": "ng build --prod",
+  "scripts": {
-		"build:prod:stats": "ng build --prod --stats-json",
+    "ng": "ng",
-		"build:prod:gitlabpage": "ng build --prod --baseHref=/framadate/funky-framadate-front/",
+    "start": "ng serve",
-		"build:prod:demobliss": "ng build --prod --baseHref=https://framadate-api.cipherbliss.com  --stats-json ",
+    "start_docker": "ng serve --host 0.0.0.0",
-		"test": "jest",
+    "build:prod": "ng build --configuration production",
-		"test:watch": "jest --watch",
+    "build:prod:stats": "ng build --configuration production --stats-json",
-		"test:ci": "jest --ci",
+    "build:prod:gitlabpage": "ng build --configuration production --baseHref=/framadate/funky-framadate-front/",
-		"lint": "prettier --write \"src/**/*.{js,jsx,ts,tsx,md,html,css,scss}\"",
+    "build:prod:demobliss": "ng build --configuration production --baseHref=https://framadate-api.cipherbliss.com  --stats-json ",
-		"e2e": "ng e2e",
+    "test": "jest",
-		"release:major": "changelog -M && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version major && git push origin && git push origin --tags",
+    "test:watch": "jest --watch",
-		"release:minor": "changelog -m && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version minor && git push origin && git push origin --tags",
+    "test:ci": "jest --ci",
-		"release:patch": "changelog -p && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version patch && git push origin && git push origin --tags",
+    "lint": "prettier --write \"src/**/*.{js,jsx,ts,tsx,md,html,css,scss}\"",
-		"format:check": "prettier --list-different \"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\"",
+    "e2e": "ng e2e",
-		"format:all": "prettier --write \"src/**/*.{js,jsx,ts,tsx,md,html,css,scss}\"",
+    "release:major": "changelog -M && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version major && git push origin && git push origin --tags",
-		"trans": "ng xi18n --output-path=src/locale --i18n-locale=fr",
+    "release:minor": "changelog -m && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version minor && git push origin && git push origin --tags",
-		"compodoc": "compodoc -p tsconfig.app.json",
+    "release:patch": "changelog -p && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version patch && git push origin && git push origin --tags",
-		"mock:server": "json-server --port 8000 --watch ./mocks/db.json --routes ./mocks/routes.json",
+    "format:check": "prettier --list-different \"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\"",
-		"start:proxy": "ng serve --proxy-config proxy.conf.json",
+    "format:all": "prettier --write \"src/**/*.{js,jsx,ts,tsx,md,html,css,scss}\"",
-		"start:proxymock": "concurrently --kill-others \"yarn mock:server\" \"yarn start:proxy\"",
+    "trans": "ng xi18n --output-path=src/locale --i18n-locale=fr",
-		"i18n:init": "ngx-translate-extract --input ./src --output ./src/assets/i18n/template.json --key-as-default-value --replace --format json",
+    "compodoc": "compodoc -p tsconfig.app.json",
-		"i18n:extract": "ngx-translate-extract --input ./src --output ./src/assets/i18n/{en,da,de,fi,nb,nl,sv}.json --clean --format json"
+    "mock:server": "json-server --port 8000 --watch ./mocks/db.json --routes ./mocks/routes.json",
-	},
+    "start:proxy": "ng serve --proxy-config proxy.conf.json",
-	"private": false,
+    "start:proxymock": "concurrently --kill-others \"yarn mock:server\" \"yarn start:proxy\"",
-	"dependencies": {
+    "i18n:init": "ngx-translate-extract --input ./src --output ./src/assets/i18n/template.json --key-as-default-value --replace --format json",
-		"@angular/animations": "^9.1.1",
+    "i18n:extract": "ngx-translate-extract --input ./src --output ./src/assets/i18n/{en,da,de,fi,nb,nl,sv}.json --clean --format json"
-		"@angular/cdk": "^9.2.2",
+  },
-		"@angular/common": "^9.0.7",
+  "private": false,
-		"@angular/compiler": "^9.0.7",
+  "dependencies": {
-		"@angular/core": "^9.0.7",
+    "@angular/animations": "^15.2.2",
-		"@angular/forms": "^9.0.7",
+    "@angular/cdk": "^15.2.2",
-		"@angular/localize": "^9.1.1",
+    "@angular/common": "^15.2.2",
-		"@angular/material": "^9.2.4",
+    "@angular/compiler": "^15.2.2",
-		"@angular/platform-browser": "^9.0.7",
+    "@angular/core": "^15.2.2",
-		"@angular/platform-browser-dynamic": "^9.0.7",
+    "@angular/forms": "^15.2.2",
-		"@angular/router": "^9.0.7",
+    "@angular/localize": "^15.2.2",
-		"@biesbjerg/ngx-translate-extract": "^7.0.3",
+    "@angular/material": "^15.2.2",
-		"@biesbjerg/ngx-translate-po-http-loader": "^3.1.0",
+    "@angular/platform-browser": "^15.2.2",
-		"@fullcalendar/core": "^4.4.0",
+    "@angular/platform-browser-dynamic": "^15.2.2",
-		"@ngx-translate/core": "^12.1.2",
+    "@angular/router": "^15.2.2",
-		"@ngx-translate/http-loader": "^5.0.0",
+    "@fullcalendar/core": "^6.1.4",
-		"angular-date-value-accessor": "^1.0.2",
+    "@ngx-translate/core": "^14.0.0",
-		"axios": "^0.19.2",
+    "@ngx-translate/http-loader": "^7.0.0",
-		"bulma": "^0.9.0",
+    "angular-date-value-accessor": "^3.0.0",
-		"bulma-switch": "^2.0.0",
+    "axios": "^1.3.4",
-		"chart.js": "^2.9.3",
+    "bulma": "^0.9.0",
-		"crypto": "^1.0.1",
+    "bulma-switch": "^2.0.0",
-		"crypto-js": "^4.0.0",
+    "chart.js": "^4.2.1",
-		"feather-icons": "^4.28.0",
+    "crypto": "^1.0.1",
-		"fork-awesome": "^1.1.7",
+    "crypto-js": "^4.0.0",
-		"ng-keyboard-shortcuts": "^10.1.17",
+    "feather-icons": "^4.28.0",
-		"ng2-charts": "^2.3.0",
+    "fork-awesome": "^1.1.7",
-		"ngx-clipboard": "^13.0.0",
+    "marked": "^4.2.12",
-		"ngx-markdown": "^9.0.0",
+    "moment": "^2.29.4",
-		"ngx-webstorage": "^5.0.0",
+    "ng-keyboard-shortcuts": "^13.0.8",
-		"node-forge": "^0.10.0",
+    "ng2-charts": "^4.1.1",
-		"primeicons": "^5.0.0",
+    "ngx-clipboard": "^15.1.0",
-		"primeng": "^11.0.0",
+    "ngx-markdown": "^15.1.2",
-		"quill": "^1.3.7",
+    "ngx-webstorage": "^11.1.1",
-		"rxjs": "^6.5.5",
+    "node-forge": "^0.10.0",
-		"rxjs-compat": "^6.5.5",
+    "primeicons": "^6.0.1",
-		"short-unique-id": "^3.0.3",
+    "primeng": "^15.2.0",
-		"stream": "^0.0.2",
+    "prismjs": "^1.29.0",
-		"tslib": "<2.0.0",
+    "quill": "^1.3.7",
-		"zone.js": "^0.10.3"
+    "rxjs": "^6.5.5",
-	},
+    "rxjs-compat": "^6.5.5",
-	"devDependencies": {
+    "short-unique-id": "^4.4.4",
-		"@angular-builders/jest": "^9.0.1",
+    "stream": "^0.0.2",
-		"@angular-devkit/build-angular": "^0.901.2",
+    "tslib": "^2.0.0",
-		"@angular/cli": "^9.1.2",
+    "zone.js": "~0.11.4"
-		"@angular/compiler-cli": "^9.1.1",
+  },
-		"@angular/language-service": "^9.0.7",
+  "devDependencies": {
-		"@babel/core": "^7.9.0",
+    "@angular-builders/jest": "^9.0.1",
-		"@babel/preset-env": "^7.9.5",
+    "@angular-devkit/build-angular": "^15.2.3",
-		"@babel/preset-typescript": "^7.9.0",
+    "@angular/cli": "^15.2.3",
-		"@compodoc/compodoc": "^1.1.11",
+    "@angular/compiler-cli": "^15.2.2",
-		"@types/crypto-js": "^4.0.0",
+    "@angular/language-service": "^15.2.2",
-		"@types/jest": "^26.0.0",
+    "@babel/core": "^7.9.0",
-		"@types/node": "^14.0.1",
+    "@babel/preset-env": "^7.9.5",
-		"@typescript-eslint/eslint-plugin": "^3.0.0",
+    "@babel/preset-typescript": "^7.9.0",
-		"@typescript-eslint/parser": "^3.0.0",
+    "@compodoc/compodoc": "^1.1.11",
-		"babel-jest": "^26.0.0",
+    "@types/crypto-js": "^4.0.0",
-		"concurrently": "^5.2.0",
+    "@types/jest": "^26.0.0",
-		"eslint": "^7.0.0",
+    "@types/marked": "^4.0.8",
-		"eslint-config-prettier": "^6.11.0",
+    "@types/node": "^14.0.1",
-		"eslint-plugin-prettier": "^3.1.3",
+    "@typescript-eslint/eslint-plugin": "^3.0.0",
-		"husky": "^4.2.5",
+    "@typescript-eslint/parser": "^3.0.0",
-		"jest": "^26.0.0",
+    "@vendure/ngx-translate-extract": "^8.1.0",
-		"jest-environment-jsdom-sixteen": "^1.0.3",
+    "babel-jest": "^26.0.0",
-		"jest-preset-angular": "^8.1.3",
+    "concurrently": "^5.2.0",
-		"json-server": "^0.16.1",
+    "eslint": "^7.0.0",
-		"lint-staged": "^10.1.7",
+    "eslint-config-prettier": "^6.11.0",
-		"prettier": "^2.0.5",
+    "eslint-plugin-prettier": "^3.1.3",
-		"protractor": "~7.0.0",
+    "husky": "^4.2.5",
-		"ts-jest": "^26.0.0",
+    "jest": "^26.0.0",
-		"ts-mockito": "^2.5.0",
+    "jest-environment-jsdom-sixteen": "^1.0.3",
-		"ts-node": "^8.10.1",
+    "jest-preset-angular": "^8.1.3",
-		"typescript": "<3.9.0"
+    "json-server": "^0.16.1",
-	},
+    "lint-staged": "^10.1.7",
-	"husky": {
+    "prettier": "^2.0.5",
-		"hooks": {
+    "protractor": "~7.0.0",
-			"pre-commit": "lint-staged"
+    "ts-jest": "^26.0.0",
-		}
+    "ts-mockito": "^2.5.0",
-	},
+    "ts-node": "^8.10.1",
-	"lint-staged": {
+    "typescript": "4.9.5"
-		"src/**/*.{js,jsx,ts,tsx,md,html,css,scss}": [
+  },
-			"prettier --write",
+  "husky": {
-			"git add"
+    "hooks": {
-		],
+      "pre-commit": "lint-staged"
-		"*.js": [
+    }
-			"prettier --write"
+  },
-		]
+  "lint-staged": {
-	},
+    "src/**/*.{js,jsx,ts,tsx,md,html,css,scss}": [
-	"jest": {
+      "prettier --write",
-		"preset": "jest-preset-angular",
+      "git add"
-		"setupFilesAfterEnv": [
+    ],
-			"<rootDir>/src/jest.setup.ts"
+    "*.js": [
-		],
+      "prettier --write"
-		"testEnvironment": "jest-environment-jsdom-sixteen",
+    ]
-		"transform": {
+  },
-			"^.+\\.(ts|html)$": "ts-jest",
+  "jest": {
-			"^.+\\.jsx?$": "babel-jest"
+    "preset": "jest-preset-angular",
-		}
+    "setupFilesAfterEnv": [
-	}
+      "<rootDir>/src/jest.setup.ts"
+    ],
+    "testEnvironment": "jest-environment-jsdom-sixteen",
+    "transform": {
+      "^.+\\.(ts|html)$": "ts-jest",
+      "^.+\\.jsx?$": "babel-jest"
+    }
+  },
+  "browser": {
+    "crypto": false
+  }
 }

src/app/core/services/date.utilities.service.ts

@@ -68,7 +68,7 @@ export class DateUtilitiesService {
 	parseInputDateToDateObject(inputDate: Date): Date {
 		const boom = inputDate.toISOString().substring(0, 10).split('-');
 
-		const converted = new Date(boom['0'], boom['1'] - 1, boom['2']);
+		const converted = new Date(+boom['0'], +boom['1'] - 1, +boom['2']);
 		console.log('converted', converted);
 		return converted;
 	}

src/app/core/services/poll.service.ts

@@ -13,7 +13,7 @@ import { HttpClient } from '@angular/common/http';
 import { environment } from '../../../environments/environment';
 import { StorageService } from './storage.service';
 import { Title } from '@angular/platform-browser';
-import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 
 import { DOCUMENT } from '@angular/common';
 import { DateChoice, TimeSlices } from '../models/dateChoice.model';
@@ -31,7 +31,7 @@ import { CommentDTO } from '../models/comment.model';
 export class PollService implements Resolve<Poll> {
 	public _poll: BehaviorSubject<Poll | undefined> = new BehaviorSubject<Poll | undefined>(undefined);
 	public readonly poll: Observable<Poll | undefined> = this._poll.asObservable();
-	public form: FormGroup;
+	public form: UntypedFormGroup;
 	public startDateInterval: string;
 	public endDateInterval: string;
 	public intervalDays: number = 1;
@@ -68,7 +68,7 @@ export class PollService implements Resolve<Poll> {
 		private _clipboardService: ClipboardService,
 		private translate: TranslateService,
 		@Inject(DOCUMENT) private document: any,
-		private fb: FormBuilder
+		private fb: UntypedFormBuilder
 	) {
 		this.createFormGroup();
 
@@ -180,7 +180,7 @@ export class PollService implements Resolve<Poll> {
 			description: ['', []],
 			password: ['', []],
 			password_repeat: ['', []],
-			choices: new FormArray([]),
+			choices: new UntypedFormArray([]),
 			whoModifiesAnswers: ['self', [Validators.required]],
 			whoCanChangeAnswers: ['self', [Validators.required]],
 			isAboutDate: [false, [Validators.required]],
@@ -518,8 +518,8 @@ export class PollService implements Resolve<Poll> {
 		}
 	}
 
-	get choices(): FormArray {
+	get choices(): UntypedFormArray {
-		return this.form.get('choices') as FormArray;
+		return this.form.get('choices') as UntypedFormArray;
 	}
 
 	reinitChoices(): void {
@@ -547,7 +547,7 @@ export class PollService implements Resolve<Poll> {
 	 *  make a uniq slug for the current poll creation
 	 * @param form
 	 */
-	makeSlug(form: FormGroup): string {
+	makeSlug(form: UntypedFormGroup): string {
 		let str = '';
 		str =
 			form.value.created_at.getFullYear() +

src/app/features/administration/consultation/consultation.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { PollService } from '../../../core/services/poll.service';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { ApiService } from '../../../core/services/api.service';
-import { FormGroup } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
 import { Poll } from '../../../core/models/poll.model';
 
 @Component({
@@ -12,7 +12,7 @@ import { Poll } from '../../../core/models/poll.model';
 })
 export class AdminConsultationComponent implements OnInit {
 	private admin_key: string;
-	public form: FormGroup;
+	public form: UntypedFormGroup;
 	public poll: any;
 
 	constructor(

src/app/features/administration/form/advanced-config/advanced-config.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Poll } from '../../../../core/models/poll.model';
-import { FormGroup } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
 import { environment } from 'src/environments/environment';
 import { PollService } from '../../../../core/services/poll.service';
 
@@ -16,7 +16,7 @@ export class AdvancedConfigComponent implements OnInit {
 	@Input()
 	public poll?: Poll;
 	@Input()
-	public form: FormGroup;
+	public form: UntypedFormGroup;
 	domain_url: string;
 	display_regen_slug: boolean = environment.display_regen_slug;
 	display_password_clear_button: boolean = environment.display_password_clear_button;

src/app/features/administration/form/base-config/base-config.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectorRef, Component, Inject, Input } from '@angular/core';
 import { ToastService } from '../../../../core/services/toast.service';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { UuidService } from '../../../../core/services/uuid.service';
 import { PollService } from '../../../../core/services/poll.service';
 import { ApiService } from '../../../../core/services/api.service';
@@ -19,10 +19,10 @@ export class BaseConfigComponent {
 	@Input()
 	public poll?: Poll;
 	@Input()
-	public form: FormGroup;
+	public form: UntypedFormGroup;
 
 	constructor(
-		private fb: FormBuilder,
+		private fb: UntypedFormBuilder,
 		private cd: ChangeDetectorRef,
 		private uuidService: UuidService,
 		private toastService: ToastService,

src/app/features/administration/form/date-select/date-select.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
-import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormArray, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { UuidService } from '../../../../core/services/uuid.service';
 import { ToastService } from '../../../../core/services/toast.service';
 import { PollService } from '../../../../core/services/poll.service';
@@ -20,7 +20,7 @@ import { environment } from '../../../../../environments/environment';
 })
 export class DateSelectComponent implements OnInit {
 	@Input()
-	form: FormGroup;
+	form: UntypedFormGroup;
 
 	displaySeveralHoursChoice = true;
 	allowSeveralHours = true;
@@ -35,7 +35,7 @@ export class DateSelectComponent implements OnInit {
 	display: any;
 
 	constructor(
-		private fb: FormBuilder,
+		private fb: UntypedFormBuilder,
 		private cd: ChangeDetectorRef,
 		private uuidService: UuidService,
 		private toastService: ToastService,

src/app/features/administration/form/date/interval/interval.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { environment } from '../../../../../../environments/environment';
 import { DateUtilitiesService } from '../../../../../core/services/date.utilities.service';
-import { FormArray, FormGroup } from '@angular/forms';
+import { UntypedFormArray, UntypedFormGroup } from '@angular/forms';
 import { ToastService } from '../../../../../core/services/toast.service';
 import { DateChoice } from '../../../../../../../mocks/old-stuff/config/defaultConfigs';
 
@@ -12,7 +12,7 @@ import { DateChoice } from '../../../../../../../mocks/old-stuff/config/defaultC
 })
 export class IntervalComponent implements OnInit {
 	@Input()
-	public form: FormGroup;
+	public form: UntypedFormGroup;
 	showDateInterval = true;
 	intervalDays: any;
 	intervalDaysDefault = environment.interval_days_default;
@@ -89,7 +89,7 @@ export class IntervalComponent implements OnInit {
 	}
 
 	get dateChoices() {
-		return this.form.get('dateChoices') as FormArray;
+		return this.form.get('dateChoices') as UntypedFormArray;
 	}
 
 	/**

src/app/features/administration/form/date/list/day/day-list.component.ts

@@ -1,11 +1,10 @@
 import { ChangeDetectorRef, Component, Inject, Input } from '@angular/core';
 import { moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 import { DOCUMENT } from '@angular/common';
-import { FormGroup } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
 import { ToastService } from '../../../../../../core/services/toast.service';
 import { StorageService } from '../../../../../../core/services/storage.service';
 import { MatDialog } from '@angular/material/dialog';
-import { ShortcutsHelpComponent } from '../../../../../shared/components/ui/shortcuts-help/shortcuts-help.component';
 import { DateChoice } from '../../../../../../core/models/dateChoice.model';
 import { PollService } from '../../../../../../core/services/poll.service';
 import { DateUtilitiesService } from '../../../../../../core/services/date.utilities.service';
@@ -16,11 +15,10 @@ import { TranslateService } from '@ngx-translate/core';
 	selector: 'app-day-list',
 	templateUrl: './day-list.component.html',
 	styleUrls: ['./day-list.component.scss'],
-	entryComponents: [ShortcutsHelpComponent],
 })
 export class DayListComponent {
 	@Input()
-	form: FormGroup;
+	form: UntypedFormGroup;
 	public dateChoices: DateChoice[] = [];
 	@Input()
 	public hasSeveralHours: boolean;

src/app/features/administration/form/date/list/time/time-list.component.ts

@@ -15,7 +15,7 @@ export class TimeListComponent implements OnInit {
 	@Input()
 	public timeSlices: TimeSlices[];
 	@Input()
-	public prefix_choice_id = '';
+	public prefix_choice_id: number;
 
 	constructor(
 		@Inject(DOCUMENT) private document: any,

src/app/features/administration/form/date/picker/picker.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
 
 @Component({
 	selector: 'app-picker',
@@ -8,7 +8,7 @@ import { FormGroup } from '@angular/forms';
 })
 export class PickerComponent implements OnInit {
 	@Input()
-	public form: FormGroup;
+	public form: UntypedFormGroup;
 	selectionKind = 'multiple';
 	dateCalendarEnum: any[];
 	today: Date = new Date();

src/app/features/administration/form/form.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
 import { Poll } from '../../../core/models/poll.model';
-import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormArray, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { UuidService } from '../../../core/services/uuid.service';
 import { ApiService } from '../../../core/services/api.service';
 import { ToastService } from '../../../core/services/toast.service';
@@ -17,10 +17,10 @@ import { environment } from '../../../../environments/environment';
 export class FormComponent implements OnInit {
 	@Input()
 	public poll?: Poll;
-	public form: FormGroup;
+	public form: UntypedFormGroup;
 
 	constructor(
-		private fb: FormBuilder,
+		private fb: UntypedFormBuilder,
 		private cd: ChangeDetectorRef,
 		private uuidService: UuidService,
 		private toastService: ToastService,

src/app/features/administration/form/kind-select/kind-select.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Poll } from '../../../../core/models/poll.model';
-import { FormGroup } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
 
 @Component({
 	selector: 'app-kind-select',
@@ -12,7 +12,7 @@ export class KindSelectComponent implements OnInit {
 	@Input()
 	public poll?: Poll;
 	@Input()
-	public form: FormGroup;
+	public form: UntypedFormGroup;
 
 	constructor() {}
 

src/app/features/administration/form/steps/step-five/step-five.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
 import { PollService } from '../../../../../core/services/poll.service';
 import { environment } from '../../../../../../environments/environment';
 
@@ -10,7 +10,7 @@ import { environment } from '../../../../../../environments/environment';
 })
 export class StepFiveComponent implements OnInit {
 	@Input() step_max: any;
-	@Input() public form: FormGroup;
+	@Input() public form: UntypedFormGroup;
 	poll: any;
 	public environment = environment;
 	advancedDisplayEnabled = environment.advanced_options_display;

src/app/features/administration/form/steps/step-one/step-one.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject, Input, OnInit } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
 import { PollService } from '../../../../../core/services/poll.service';
 import { DOCUMENT } from '@angular/common';
 import { ConfirmationService } from 'primeng/api';
@@ -16,7 +16,7 @@ export class StepOneComponent implements OnInit {
 	@Input()
 	step_max: any;
 	@Input()
-	form: FormGroup;
+	form: UntypedFormGroup;
 	public environment = environment;
 
 	constructor(

src/app/features/administration/form/steps/step-three/step-three.component.html

@@ -30,7 +30,7 @@
 			<!--			[minDate]="minDate"-->
 			<p-calendar
 				[(ngModel)]="pollService.calendar"
-				firstDayOfWeek="1"
+				[firstDayOfWeek]="1"
 				selectionMode="multiple"
 				inputId="multiple"
 				[showButtonBar]="true"

src/app/features/administration/form/steps/step-two/step-two.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
-import { FormArray, FormBuilder } from '@angular/forms';
+import { UntypedFormArray, UntypedFormBuilder } from '@angular/forms';
 import { DOCUMENT } from '@angular/common';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { Router } from '@angular/router';
@@ -31,7 +31,7 @@ export class StepTwoComponent implements OnInit {
 	intervalDays: any;
 
 	constructor(
-		private fb: FormBuilder,
+		private fb: UntypedFormBuilder,
 		private cd: ChangeDetectorRef,
 		private uuidService: UuidService,
 		private toastService: ToastService,
@@ -48,8 +48,8 @@ export class StepTwoComponent implements OnInit {
 		this.step_max = this.pollService.step_max;
 	}
 
-	get choices(): FormArray {
+	get choices(): UntypedFormArray {
-		return this.form.get('choices') as FormArray;
+		return this.form.get('choices') as UntypedFormArray;
 	}
 
 	addTime() {}

src/app/features/administration/form/text-select/text-select.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
 
 @Component({
 	selector: 'app-text-select',
@@ -8,7 +8,7 @@ import { FormGroup } from '@angular/forms';
 })
 export class TextSelectComponent implements OnInit {
 	@Input()
-	public form: FormGroup;
+	public form: UntypedFormGroup;
 	public choices = [];
 
 	constructor() {}

src/app/features/consultation/poll-results-dinum/poll-results-dinum.component.html

@@ -1,15 +1,17 @@
 <div class="text-choices rounded-block" *ngIf="poll.kind == 'text'">
-	<div class="text-choice" *ngFor="let choice of poll.choices_grouped; index as ii">
+	<div class="text-choice" *ngFor="let choice_groupe of poll.choices_grouped; index as ii">
 		<div class="choice-label">
-			{{ choice.date_string }}
+			{{ choice_groupe.date_string }}
+		</div>
+		<div *ngFor="let choice of choice_groupe.choices">
+			<app-choice-table [choice]="choice" [detailledDisplay]="detailledDisplay"></app-choice-table>
 		</div>
-		<app-choice-table [choice]="choice" [detailledDisplay]="detailledDisplay"></app-choice-table>
 	</div>
 </div>
 <div class="date-choices" *ngIf="poll.kind == 'date'">
 	<div class="rounded-block" *ngFor="let group of poll.choices_grouped">
 		<div class="date-label">
-			{{ showAsDate(group.date_string) | date: 'fullDate':'Europe/Paris' }}
+			{{ showAsDate(group.date_string) | date : 'fullDate' : 'Europe/Paris' }}
 		</div>
 		<div class="list-of-choices">
 			<div class="date-choices">

src/app/features/shared/components/ui/form/errors-list/errors-list.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject, Input, OnInit } from '@angular/core';
-import { FormGroup, ValidationErrors } from '@angular/forms';
+import { UntypedFormGroup, ValidationErrors } from '@angular/forms';
 import { DOCUMENT } from '@angular/common';
 import { environment } from '../../../../../../../environments/environment';
 
@@ -9,7 +9,7 @@ import { environment } from '../../../../../../../environments/environment';
 	styleUrls: ['./errors-list.component.scss'],
 })
 export class ErrorsListComponent implements OnInit {
-	@Input() form: FormGroup;
+	@Input() form: UntypedFormGroup;
 	public totalErrors = 0;
 	public firstErrorId = '';
 	public messages = [];

src/app/shared/shared.module.ts

@@ -13,7 +13,7 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatStepperModule } from '@angular/material/stepper';
 import { TranslateModule } from '@ngx-translate/core';
-import { ChartsModule } from 'ng2-charts';
+import { NgChartsModule } from 'ng2-charts';
 
 import { ChoiceDetailsComponent } from './components/choice-details/choice-details.component';
 import { CommentsComponent } from './components/comments/comments.component';
@@ -58,7 +58,7 @@ const COMPONENTS = [
 	FooterComponent,
 ];
 
-const ANGULAR_MODULES = [CommonModule, ChartsModule, FormsModule, TranslateModule];
+const ANGULAR_MODULES = [CommonModule, NgChartsModule, FormsModule, TranslateModule];
 
 const MATERIAL_MODULES = [
 	MatButtonModule,

src/environments/endpoints.ts

@@ -4,13 +4,13 @@ export const backendApiUrlsInDev = {
 	local: 'http://localhost:8000/api/v1', // the docker port is this one
 	// local: 'http://www.tk.lan/index.php/api/v1',
 	// local: 'https://framadate-api.cipherbliss.com/api/v1',
-	// remote: 'http://localhost:8000/api/v1',
+	 remote: 'http://localhost:8000/api/v1',
 	// remote: 'http://www.tk.lan/index.php/api/v1',
-	remote: 'https://framadate-api.cipherbliss.com/api/v1',
+	//remote: 'https://framadate-api.cipherbliss.com/api/v1',
 };
 export const apiV1 = {
-	// baseHref: 'http://localhost:8000/api/v1', // local "symfony serve" live server
+	baseHref: 'http://localhost:8000/api/v1', // local "symfony serve" live server
-	baseHref: 'http://www.tk.lan/index.php/api/v1', // local apache2 server
+	// baseHref: 'http://www.tk.lan/index.php/api/v1', // local apache2 server
 	// baseHref: 'http://tktest.lan/api/v1',
 	// baseHref: 'https://framadate-api.cipherbliss.com/api/v1', // demo preprod
 	api_new_poll: '/poll/',

src/environments/environment.ts

@@ -11,7 +11,7 @@ import { poll_conf } from './poll_conf';
  * This import should be commented out in production mode because it will have a negative impact
  * on performance if an error is thrown.
  */
-import 'zone.js/dist/zone-error';
+import 'zone.js/plugins/zone-error';
 
 endpoints.baseHref = apiV1.baseHref;
 

src/polyfills.ts

@@ -22,16 +22,6 @@ import '@angular/localize/init';
  * BROWSER POLYFILLS
  */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags
@@ -59,7 +49,7 @@ import '@angular/localize/init';
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone'; // Included with Angular CLI.
+import 'zone.js'; // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS

src/styles.scss

@@ -1,12 +1,13 @@
 // Custom Theming for Angular Material
+@use '@angular/material' as mat;
 // For more information: https://material.angular.io/guide/theming
-@import '~@angular/material/theming';
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
-@include mat-core();
+@include mat.core();
+@include mat.all-component-typographies();
 
 // import your custom themes
 @import 'theme-light.scss';
@@ -14,14 +15,14 @@
 @import 'theme-contrast.scss';
 
 .theme-light {
-	@include angular-material-theme($theme-light);
+	@include mat.all-component-colors($theme-light);
-}
-.theme-dark {
-	@include angular-material-theme($theme-dark);
-}
-.theme-contrast {
-	@include angular-material-theme($theme-contrast);
 }
+// .theme-dark {
+// 	@include mat.all-component-colors($theme-dark);
+// }
+// .theme-contrast {
+// 	@include mat.all-component-colors($theme-contrast);
+// }
 
 /*
 	You can add global.scss styles to this file, and also import other style files

src/styles/partials/_forms.scss

@@ -70,12 +70,6 @@ textarea {
 }
 
 // radio input structure
-.mat-checkbox-label,
-.mat-checkbox-layout .mat-checkbox-label {
-	max-width: 90vw;
-	overflow-x: auto;
-	@extend .clickable;
-}
 button,
 .button {
 	font-family: 'Helvetica';
@@ -190,16 +184,12 @@ textarea {
 	-moz-border-radius-bottomright: 1em;
 }
 
-.mat-error {
+.mat-mdc-form-field-error {
 	display: block;
 	background: $warning;
 	padding: 1em;
 }
 
-mat-checkbox {
-	display: block;
-}
-
 .cdk-drag {
 	cursor: pointer;
 
@@ -373,7 +363,7 @@ label {
 }
 
 .people {
-	max-width: $main-column-width/2;
+	max-width: calc($main-column-width / 2);
 }
 
 .bar-div {

src/styles/themes/_high-contrast.scss

@@ -1,6 +1,4 @@
-///**
+//__<<ngThemingMigrationEscapedComment0>>__
-//aimed for visual impaired people
-// */
 //$main-theme-color: #00003b;
 //#big_container {
 //	&.theme-high-contrast {

src/theme-contrast.scss

@@ -1,16 +1,25 @@
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
+@use '@angular/material' as mat;
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$theme-contrast-primary: mat-palette($mat-indigo);
+$theme-contrast-primary: mat.define-palette(mat.$indigo-palette);
-$theme-contrast-accent: mat-palette($mat-pink, A200, A100, A400);
+$theme-contrast-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
-$theme-contrast-warn: mat-palette($mat-red);
+$theme-contrast-warn: mat.define-palette(mat.$red-palette);
 
 // Create the theme object (a Sass map containing all of the palettes).
-$theme-contrast: mat-light-theme($theme-contrast-primary, $theme-contrast-accent, $theme-contrast-warn);
+$theme-contrast: mat.define-light-theme(
+	(
+		color: (
+			primary: $theme-contrast-primary,
+			accent: $theme-contrast-accent,
+			warn: $theme-contrast-warn,
+		),
+	)
+);
 
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include angular-material-theme($theme-contrast);
+// @include mat.all-component-themes($theme-contrast);

src/theme-dark.scss

@@ -1,16 +1,25 @@
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
+@use '@angular/material' as mat;
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$theme-dark-primary: mat-palette($mat-indigo);
+$theme-dark-primary: mat.define-palette(mat.$indigo-palette);
-$theme-dark-accent: mat-palette($mat-pink, A200, A100, A400);
+$theme-dark-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
-$theme-dark-warn: mat-palette($mat-red);
+$theme-dark-warn: mat.define-palette(mat.$red-palette);
 
 // Create the theme object (a Sass map containing all of the palettes).
-$theme-dark: mat-dark-theme($theme-dark-primary, $theme-dark-accent, $theme-dark-warn);
+$theme-dark: mat.define-dark-theme(
+	(
+		color: (
+			primary: $theme-dark-primary,
+			accent: $theme-dark-accent,
+			warn: $theme-dark-warn,
+		),
+	)
+);
 
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include angular-material-theme($theme-dark);
+// @include mat.all-component-themes($theme-dark);

src/theme-light.scss

@@ -1,16 +1,25 @@
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
+@use '@angular/material' as mat;
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$theme-light-primary: mat-palette($mat-indigo);
+$theme-light-primary: mat.define-palette(mat.$indigo-palette);
-$theme-light-accent: mat-palette($mat-pink, A200, A100, A400);
+$theme-light-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
-$theme-light-warn: mat-palette($mat-red);
+$theme-light-warn: mat.define-palette(mat.$red-palette);
 
 // Create the theme object (a Sass map containing all of the palettes).
-$theme-light: mat-light-theme($theme-light-primary, $theme-light-accent, $theme-light-warn);
+$theme-light: mat.define-light-theme(
+	(
+		color: (
+			primary: $theme-light-primary,
+			accent: $theme-light-accent,
+			warn: $theme-light-warn,
+		),
+	)
+);
 
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include angular-material-theme($theme-light);
+// @include mat.all-component-themes($theme-light);

tsconfig.json

@@ -1,19 +1,25 @@
 {
 	"compileOnSave": false,
 	"compilerOptions": {
-		"baseUrl": "./",
+    "baseUrl": "./",
-		"outDir": "./dist/out-tsc",
+    "outDir": "./dist/out-tsc",
-		"sourceMap": true,
+    "sourceMap": true,
-		"declaration": false,
+    "declaration": false,
-		"downlevelIteration": true,
+    "downlevelIteration": true,
-		"experimentalDecorators": true,
+    "experimentalDecorators": true,
-		"module": "ESNext",
+    "module": "es2020",
-		"moduleResolution": "node",
+    "moduleResolution": "node",
-		"importHelpers": true,
+    "importHelpers": true,
-		"target": "ES5",
+    "target": "ES2022",
-		"types": ["node", "jest"],
+    "types": [
-		"typeRoots": ["node_modules/@types"]
+      "node",
-	},
+      "jest"
+    ],
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "useDefineForClassFields": false
+  },
 	"angularCompilerOptions": {
 		"fullTemplateTypeCheck": true,
 		"strictInjectionParameters": true,