SF-2360 Update Material legacy checkbox (#2317)

src/SIL.XForge.Scripture/ClientApp/src/app/checking/import-questions-dialog/import-questions-dialog.component.spec.ts

@@ -3,7 +3,7 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { NgModule } from '@angular/core';
 import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
-import { MatLegacyCheckbox as MatCheckbox } from '@angular/material/legacy-checkbox';
+import { MatCheckbox } from '@angular/material/checkbox';
 import { MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Canon, VerseRef } from '@sillsdev/scripture';
@@ -670,7 +670,7 @@ class TestEnvironment {
   }
 
   getRowReference(row: HTMLElement): string {
-    return row.querySelector('td .mat-checkbox-label')?.textContent?.trim() || '';
+    return row.querySelector('td mat-checkbox .mdc-label')?.textContent?.trim() || '';
   }
 
   getRowQuestion(row: HTMLElement): string {

src/SIL.XForge.Scripture/ClientApp/src/app/checking/import-questions-dialog/import-questions-dialog.component.ts

@@ -1,6 +1,6 @@
 import { Component, ElementRef, Inject, NgZone, OnDestroy, ViewChild } from '@angular/core';
 import { AbstractControl, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
-import { MatLegacyCheckbox as MatCheckbox } from '@angular/material/legacy-checkbox';
+import { MatCheckbox } from '@angular/material/checkbox';
 import {
   MatLegacyDialogConfig as MatDialogConfig,
   MatLegacyDialogRef as MatDialogRef,

src/SIL.XForge.Scripture/ClientApp/src/app/connect-project/connect-project.component.scss

@@ -62,10 +62,6 @@
       mat-divider + .card-content {
         padding-top: 16px;
       }
-
-      mat-checkbox {
-        padding-bottom: 12px;
-      }
     }
 
     #connect-submit-button {
@@ -94,15 +90,6 @@
     }
   }
 }
-::ng-deep .checkbox-placeholder {
-  .mat-checkbox-inner-container {
-    visibility: hidden;
-  }
-
-  .mat-checkbox-label {
-    color: initial;
-  }
-}
 
 #based-on-field {
   max-width: calc(100% - 44px);

src/SIL.XForge.Scripture/ClientApp/src/app/settings/settings.component.scss

@@ -98,24 +98,14 @@ mat-icon {
   }
 }
 
-.mat-checkbox {
+.mat-mdc-checkbox {
   padding: 3px 0px;
 }
 
-::ng-deep .mat-checkbox-label {
+::ng-deep .mat-mdc-checkbox .mdc-label {
   line-height: normal !important;
 }
 
-::ng-deep .checkbox-placeholder {
-  .mat-checkbox-inner-container {
-    visibility: hidden;
-  }
-
-  .mat-checkbox-label {
-    color: initial;
-  }
-}
-
 #delete-project {
   border: 2px solid red;
   .source-project-msg {

src/SIL.XForge.Scripture/ClientApp/src/app/users/collaborators/collaborators.component.scss

@@ -60,7 +60,7 @@ h3 {
 }
 
 // Allow the questions permission label to wrap on whitespace to prevent layout issues
-.mat-column-questions_permission .mat-column-audio_permission .mat-checkbox ::ng-deep label {
+.mat-column-questions_permission .mat-column-audio_permission .mat-mdc-checkbox ::ng-deep label {
   white-space: initial;
 }
 

src/SIL.XForge.Scripture/ClientApp/src/material-styles.scss

@@ -117,7 +117,7 @@ $material-theme-accent-error: mat.define-light-theme(
 @include mat.legacy-button-theme($material-app-theme);
 @include mat.button-toggle-theme($material-app-theme);
 @include mat.legacy-card-theme($material-app-theme);
-@include mat.legacy-checkbox-theme($material-app-theme);
+@include mat.checkbox-theme($material-app-theme);
 @include mat.chips-theme($material-app-theme);
 @include mat.legacy-dialog-theme($material-app-theme);
 @include mat.divider-theme($material-app-theme);

src/SIL.XForge.Scripture/ClientApp/src/styles.scss

@@ -63,10 +63,34 @@ as-split.is-disabled > .as-split-gutter .as-split-gutter-icon {
   font-family: variables.$languageFonts;
 }
 
-// Allows checkbox label word-wrap
-// https://github.com/angular/components/issues/8416
-.mat-checkbox-layout {
-  white-space: normal !important;
+// Decrease the padding around a checkbox to be 0px as spacing is instead usually applied in other ways e.g. padding on
+// containing element or table row-gap
+.mat-mdc-checkbox {
+  --mdc-checkbox-state-layer-size: 18px;
+
+  .mat-mdc-checkbox-ripple,
+  .mdc-checkbox__ripple {
+    top: -6px;
+    left: -6px;
+    right: -6px;
+    bottom: -6px;
+  }
+
+  label {
+    padding-left: 6px !important;
+  }
+}
+
+// Make checkbox labels inherit parent element's font-weight e.g. if within a table heading
+.mat-mdc-checkbox .mdc-form-field {
+  font-weight: inherit !important;
+}
+
+// Remove the ripple background for checkbox focus state to emulate pre-MDC behavior
+.mat-mdc-checkbox {
+  .mdc-checkbox__native-control:focus ~ .mdc-checkbox__ripple {
+    opacity: 0 !important;
+  }
 }
 
 .mat-progress-bar--closed {

src/SIL.XForge.Scripture/ClientApp/src/xforge-common/feature-flags/feature-flags-dialog.component.spec.ts

@@ -4,7 +4,7 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { DebugElement, NgModule } from '@angular/core';
 import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyCheckbox as MatCheckbox } from '@angular/material/legacy-checkbox';
+import { MatCheckbox } from '@angular/material/checkbox';
 import {
   MatLegacyDialog as MatDialog,
   MatLegacyDialogConfig as MatDialogConfig

src/SIL.XForge.Scripture/ClientApp/src/xforge-common/system-administration/sa-projects.component.spec.ts

@@ -1,7 +1,7 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { DebugElement, getDebugNode } from '@angular/core';
 import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
-import { MatLegacyCheckbox as MatCheckbox } from '@angular/material/legacy-checkbox';
+import { MatCheckbox } from '@angular/material/checkbox';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';

src/SIL.XForge.Scripture/ClientApp/src/xforge-common/ui-common.module.ts

@@ -15,7 +15,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
 import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';