Merge branch 'migrate-angular-9-to-15' into 'develop'

Angular migration second part

See merge request framasoft/framadate/funky-framadate-front!80

.gitlab-ci.yml

@@ -42,7 +42,7 @@ build:
   before_script:
     - yarn
   script:
-    - yarn run build:prod:demobliss
+    - yarn run build:prod
   cache:
     policy: pull
 

package.json

@@ -73,7 +73,7 @@
     "quill": "^1.3.7",
     "rxjs": "^6.5.5",
     "rxjs-compat": "^6.5.5",
-    "short-unique-id": "^3.0.3",
+    "short-unique-id": "^4.4.4",
     "stream": "^0.0.2",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.4"

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

@@ -1,9 +1,6 @@
 import { ComponentType } from '@angular/cdk/portal';
 import { Injectable, TemplateRef } from '@angular/core';
-import {
+import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
-	MatLegacyDialog as MatDialog,
-	MatLegacyDialogConfig as MatDialogConfig,
-} from '@angular/material/legacy-dialog';
 
 @Injectable({
 	providedIn: 'root',

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

@@ -1,8 +1,5 @@
 import { Injectable } from '@angular/core';
-import {
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
-	MatLegacySnackBar as MatSnackBar,
-	MatLegacySnackBarConfig as MatSnackBarConfig,
-} from '@angular/material/legacy-snack-bar';
 
 @Injectable({
 	providedIn: 'root',

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

@@ -4,7 +4,7 @@ import { DOCUMENT } from '@angular/common';
 import { UntypedFormGroup } from '@angular/forms';
 import { ToastService } from '../../../../../../core/services/toast.service';
 import { StorageService } from '../../../../../../core/services/storage.service';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { DateChoice } from '../../../../../../core/models/dateChoice.model';
 import { PollService } from '../../../../../../core/services/poll.service';
 import { DateUtilitiesService } from '../../../../../../core/services/date.utilities.service';

src/app/features/consultation/poll-results-compact/poll-results-compact.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { MatLegacyDialogConfig as MatDialogConfig } from '@angular/material/legacy-dialog';
+import { MatDialogConfig } from '@angular/material/dialog';
 
 import { Answer } from '../../../core/enums/answer.enum';
 import { Choice } from '../../../core/models/choice.model';

src/app/shared/components/choice-details/choice-details.component.ts

@@ -1,8 +1,5 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import {
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-	MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-	MatLegacyDialogRef as MatDialogRef,
-} from '@angular/material/legacy-dialog';
 
 import { Answer } from '../../../core/enums/answer.enum';
 import { Choice } from '../../../core/models/choice.model';

src/app/shared/components/settings/settings.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialogRef } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
 
 import { Owner } from '../../../core/models/owner.model';

src/app/shared/shared.module.ts

@@ -1,16 +1,16 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+import { MatDialogModule } from '@angular/material/dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatStepperModule } from '@angular/material/stepper';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgChartsModule } from 'ng2-charts';

src/styles.scss

@@ -6,16 +6,8 @@
 // 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!
-// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
+@include mat.core();
-//  The following line adds:
+@include mat.all-component-typographies();
-//    1. Default typography styles for all components
-//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
-//  If you specify typography styles for the components you use elsewhere, you should delete this line.
-//  If you don't need the default component typographies but still want the hierarchy styles,
-//  you can delete this line and instead use:
-//    `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
-@include mat.all-legacy-component-typographies();
-@include mat.legacy-core();
 
 // import your custom themes
 @import 'theme-light.scss';
@@ -23,14 +15,14 @@
 @import 'theme-contrast.scss';
 
 .theme-light {
-	@include mat.all-legacy-component-themes($theme-light);
+	@include mat.all-component-colors($theme-light);
-}
-.theme-dark {
-	@include mat.all-legacy-component-themes($theme-dark);
-}
-.theme-contrast {
-	@include mat.all-legacy-component-themes($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/theme-contrast.scss

@@ -9,9 +9,17 @@ $theme-contrast-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
 $theme-contrast-warn: mat.define-palette(mat.$red-palette);
 
 // Create the theme object (a Sass map containing all of the palettes).
-$theme-contrast: mat.define-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 mat.all-legacy-component-themes($theme-contrast);
+// @include mat.all-component-themes($theme-contrast);

src/theme-dark.scss

@@ -9,9 +9,17 @@ $theme-dark-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
 $theme-dark-warn: mat.define-palette(mat.$red-palette);
 
 // Create the theme object (a Sass map containing all of the palettes).
-$theme-dark: mat.define-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 mat.all-legacy-component-themes($theme-dark);
+// @include mat.all-component-themes($theme-dark);

src/theme-light.scss

@@ -9,9 +9,17 @@ $theme-light-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
 $theme-light-warn: mat.define-palette(mat.$red-palette);
 
 // Create the theme object (a Sass map containing all of the palettes).
-$theme-light: mat.define-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 mat.all-legacy-component-themes($theme-light);
+// @include mat.all-component-themes($theme-light);

yarn.lock

@@ -11157,10 +11157,10 @@ shellwords@^0.1.1:
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
-short-unique-id@^3.0.3:
+short-unique-id@^4.4.4:
-  version "3.2.3"
+  version "4.4.4"
-  resolved "https://registry.yarnpkg.com/short-unique-id/-/short-unique-id-3.2.3.tgz#c35c8230d4ece9c27a14c41d2ca24730344c6e01"
+  resolved "https://registry.yarnpkg.com/short-unique-id/-/short-unique-id-4.4.4.tgz#a45df68303bbd2dbb5785ed7708e891809c9cb7a"
-  integrity sha512-DaUTmZe2PP34AQ2DmBOjo0W41Br/74EbKmEosfipbMJdJf2MCdzgJBOXn+PRe/ERFnr9uRKnUa6Kb5X+VC3bCQ==
+  integrity sha512-oLF1NCmtbiTWl2SqdXZQbo5KM1b7axdp0RgQLq8qCBBLoq+o3A5wmLrNM6bZIh54/a8BJ3l69kTXuxwZ+XCYuw==
 
 side-channel@^1.0.4:
   version "1.0.4"