fix: ui-grid styles

Author: Andrei Caleniuc

projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.html

@@ -1,6 +1,6 @@
-<div class="mat-paginator-outer-container">
-    <div class="mat-paginator-container">
-        <div class="mat-paginator-range-label">
+<div class="mat-mdc-paginator-outer-container">
+    <div class="mat-mdc-paginator-container">
+        <div class="mat-mdc-paginator-range-label">
             <ng-container *ngIf="!hideTotalCount">
                 {{_intl.getRangeLabel(pageIndex, pageSize, length)}}
             </ng-container>
@@ -9,7 +9,7 @@
             </ng-container>
         </div>
 
-        <div class="mat-paginator-range-actions">
+        <div class="mat-mdc-paginator-range-actions">
             <button *ngIf="showFirstLastButtons"
                     [attr.aria-label]="_intl.firstPageLabel"
                     [matTooltip]="_intl.firstPageLabel"
@@ -19,8 +19,8 @@
                     (click)="firstPage()"
                     mat-icon-button
                     type="button"
-                    class="mat-paginator-navigation-first">
-                <svg class="mat-paginator-icon"
+                    class="mat-mdc-paginator-navigation-first">
+                <svg class="mat-mdc-paginator-icon"
                      viewBox="0 0 24 24"
                      focusable="false">
                     <path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z" />
@@ -34,14 +34,14 @@
                     (click)="previousPage()"
                     mat-icon-button
                     type="button"
-                    class="mat-paginator-navigation-previous">
-                <svg class="mat-paginator-icon"
+                    class="mat-mdc-paginator-navigation-previous">
+                <svg class="mat-mdc-paginator-icon"
                      viewBox="0 0 24 24"
                      focusable="false">
                     <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
                 </svg>
             </button>
-            <div class="mat-paginator-page-label">
+            <div class="mat-mdc-paginator-page-label">
                 <ng-container *ngIf="!hideTotalCount">
                     {{_intl.getPageLabel(pageIndex+1, pageCount)}}
                 </ng-container>
@@ -57,8 +57,8 @@
                     (click)="nextPage()"
                     mat-icon-button
                     type="button"
-                    class="mat-paginator-navigation-next">
-                <svg class="mat-paginator-icon"
+                    class="mat-mdc-paginator-navigation-next">
+                <svg class="mat-mdc-paginator-icon"
                      viewBox="0 0 24 24"
                      focusable="false">
                     <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
@@ -73,8 +73,8 @@
                     (click)="lastPage()"
                     mat-icon-button
                     type="button"
-                    class="mat-paginator-navigation-last">
-                <svg class="mat-paginator-icon"
+                    class="mat-mdc-paginator-navigation-last">
+                <svg class="mat-mdc-paginator-icon"
                      viewBox="0 0 24 24"
                      focusable="false">
                     <path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z" />
@@ -83,15 +83,15 @@
         </div>
 
         <div *ngIf="!hidePageSize"
-             class="mat-paginator-page-size">
-            <div class="mat-paginator-page-size-label">
+             class="mat-mdc-paginator-page-size">
+            <div class="mat-mdc-paginator-page-size-label">
                 {{_intl.itemsPerPageLabel}}
             </div>
 
             <mat-form-field *ngIf="_displayedPageSizeOptions.length > 1"
                             [appearance]="_formFieldAppearance!"
-                            [color]="color"
-                            class="mat-paginator-page-size-select">
+                            [color]="color ?? 'primary'"
+                            class="mat-mdc-paginator-page-size-select">
                 <mat-select (selectionChange)="_changePageSize($event.value)"
                             [value]="pageSize"
                             [disabled]="disabled"
@@ -104,7 +104,7 @@
             </mat-form-field>
 
             <div *ngIf="_displayedPageSizeOptions.length <= 1"
-                 class="mat-paginator-page-size-value">{{pageSize}}</div>
+                 class="mat-mdc-paginator-page-size-value">{{pageSize}}</div>
         </div>
     </div>
 </div>

projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.scss

@@ -52,8 +52,7 @@ ui-grid-custom-paginator {
     .mat-mdc-paginator-page-size-label {
         margin: $mat-paginator-items-per-page-label-margin;
     }
-    /* TODO(mdc-migration): The following rule targets internal classes of paginator that may no longer apply for the MDC version.*/
-    .mat-paginator-page-size-select {
+    .mat-mdc-paginator-page-size-select {
         margin: $mat-paginator-selector-margin;
         width: $mat-paginator-selector-trigger-width;
 
@@ -65,8 +64,7 @@ ui-grid-custom-paginator {
             width: $mat-paginator-selector-trigger-fill-width;
         }
     }
-    /* TODO(mdc-migration): The following rule targets internal classes of paginator that may no longer apply for the MDC version.*/
-    .mat-mdc-paginator-range-actions .mat-paginator-page-label {
+    .mat-mdc-paginator-range-actions .mat-mdc-paginator-page-label {
         margin: $mat-paginator-page-label-margin;
         min-width: 7em;
         text-align: center;

projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.spec.ts

@@ -66,13 +66,13 @@ describe('Component: UiGrid', () => {
         });
 
         it('should display correct page label', () => {
-            const label = fixture.debugElement.query(By.css('.mat-paginator-page-label'));
+            const label = fixture.debugElement.query(By.css('.mat-mdc-paginator-page-label'));
             expect(label.nativeElement.innerText).toEqual(intl.getPageLabel(1, 12));
         });
 
         it('should update page label on page change', () => {
-            const nextButton = fixture.debugElement.query(By.css('.mat-paginator-navigation-next'));
-            const label = fixture.debugElement.query(By.css('.mat-paginator-page-label'));
+            const nextButton = fixture.debugElement.query(By.css('.mat-mdc-paginator-navigation-next'));
+            const label = fixture.debugElement.query(By.css('.mat-mdc-paginator-page-label'));
 
             component.pageIndex = 0;
             nextButton.nativeElement.dispatchEvent(EventGenerator.click);

projects/angular/components/ui-grid/src/components/ui-grid-custom-paginator/ui-grid-custom-paginator.component.ts

@@ -50,7 +50,7 @@ export class UiGridCustomPaginatorComponent extends _MatPaginatorBase<MatPaginat
         hideTotalCount = false;
 
     @HostBinding('class')
-    hostClass = 'mat-paginator';
+    hostClass = 'mat-mdc-paginator';
 
     get pageCount(): number {
         return Math.ceil(this.length / this.pageSize);

projects/angular/components/ui-grid/src/components/ui-grid-search/ui-grid-search.component.scss

@@ -1,9 +1,10 @@
 ui-grid-search {
     mat-form-field {
         width: 140px;
-        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
-        .mat-form-field-flex {
-            align-items: flex-end;
+        .mat-mdc-form-field-flex {
+            .mat-mdc-form-field-infix {
+                display: flex;
+            }
         }
     }
 

projects/angular/components/ui-grid/src/components/ui-grid-toggle-columns/ui-grid-toggle-columns.component.html

@@ -6,7 +6,7 @@
             mat-button>
         <mat-icon class="material-icons-outlined">table_chart</mat-icon>
         <span>{{togglePlaceholderTitle}}</span>
-        <mat-icon class="material-icons-outlined">keyboard_arrow_down</mat-icon>
+        <mat-icon class="material-icons-outlined" iconPositionEnd>keyboard_arrow_down</mat-icon>
     </button>
 
     <mat-select [value]="selected"

projects/angular/components/ui-grid/src/components/ui-grid-toggle-columns/ui-grid-toggle-columns.component.scss

@@ -10,10 +10,10 @@ $toggle-col-width: 10em;
         height: 32px;
         align-self: center;
     }
-    /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.*/
     mat-select {
         overflow: hidden;
         width: 0;
+        min-width: 0;
         // adjustments in order to match trigger icon with optgroup-label icon
         position: relative;
         top: -10px;

projects/angular/components/ui-grid/src/ui-grid.component.html

@@ -337,10 +337,7 @@
             <ng-container *ngLet="disableSelectionByEntry(row) as disabledReason">
                 <div *ngIf="selectable && !singleSelectable"
                      class="ui-grid-mobile-feature-container ui-grid-mobile-refresh-container">
-                    <mat-checkbox (click)="checkShift($event)"
-                                  (keyup.shift.space)="checkShift($event)"
-                                  (keyup.space)="checkShift($event)"
-                                  (change)="handleSelection(index, row)"
+                    <mat-checkbox (change)="handleSelection(index, row)"
                                   [checked]="selectionManager.isSelected(row)"
                                   [indeterminate]="selectionManager.isIndeterminate(row)"
                                   [matTooltip]="disabledReason || checkboxTooltip(row)"
@@ -385,10 +382,7 @@
                                       (change)="rowSelected(row)"></mat-radio-button>
                 </mat-radio-group>
                 <ng-template #multiSelectable>
-                    <mat-checkbox (click)="checkShift($event)"
-                                  (keyup.shift.space)="checkShift($event)"
-                                  (keyup.space)="checkShift($event)"
-                                  (change)="handleSelection(index, row)"
+                    <mat-checkbox (change)="handleSelection(index, row)"
                                   [checked]="selectionManager.isSelected(row)"
                                   [indeterminate]="selectionManager.isIndeterminate(row)"
                                   [matTooltip]="disabledReason || checkboxTooltip(row)"
@@ -646,7 +640,7 @@
                 class="ui-grid-collapsible-filters-toggle">
             <mat-icon>filter_list</mat-icon>
             <span>{{ intl.filters(filterManager.activeCount$ | async) }}</span>
-            <mat-icon>{{ showFilters ? 'expand_less' : 'expand_more' }}</mat-icon>
+            <mat-icon iconPositionEnd>{{ showFilters ? 'expand_less' : 'expand_more' }}</mat-icon>
         </button>
     </ng-container>
 </ng-template>
@@ -670,7 +664,7 @@
                     {{ !!column.dropdown?.value ? intl.translateDropdownOption(column.dropdown!.value!) :
                     intl.noFilterPlaceholder }}
                 </span>
-                <mat-icon>keyboard_arrow_down</mat-icon>
+                <mat-icon iconPositionEnd>keyboard_arrow_down</mat-icon>
             </button>
             <mat-menu #filterOptions="matMenu"
                       [overlapTrigger]="true">

projects/angular/components/ui-grid/src/ui-grid.component.scss

@@ -208,16 +208,13 @@ ui-grid {
                 &-container {
                     min-height: $ui-grid-header-row-height - 1;
                 }
-                /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.*/
                 .mat-mdc-paginator-page-size-label,
                 .mat-mdc-paginator-range-label,
-                .mat-select-value {
+                .mat-mdc-select-value {
                     font-size: $ui-grid-secondary-font-size;
                     line-height: $ui-grid-secondary-font-size;
                 }
-                /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
-                /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
-                .mat-form-field-infix {
+                .mat-mdc-form-field-infix {
                     padding: 0;
 
                     .mat-mdc-select {
@@ -252,8 +249,7 @@ ui-grid {
                 }
 
                 ui-grid-custom-paginator {
-                    /* TODO(mdc-migration): The following rule targets internal classes of paginator that may no longer apply for the MDC version.*/
-                    .mat-paginator-page-label {
+                    .mat-mdc-paginator-page-label {
                         font-size: $ui-grid-secondary-font-size;
                     }
                     .mat-mdc-paginator-page-size .mat-mdc-form-field {
@@ -398,7 +394,6 @@ ui-grid {
             }
 
             .ui-grid-header {
-                /* TODO(mdc-migration): The following rule targets internal classes of progress-bar that may no longer apply for the MDC version.*/
                 mat-progress-bar {
                     position: absolute;
                     right: 0;