fix(material-experimental/mdc-paginator): allow form-field density to go lower than -4 (#25192)

* fix(material-experimental/mdc-paginator): allow form-field density to go lower than -4

MDC recently added support for -5 form-field density (b/217245308). The
paginator should respect that if requested.

* fixup! fix(material-experimental/mdc-paginator): allow form-field density to go lower than -4

Author: mmalerba

src/material-experimental/mdc-paginator/BUILD.bazel

@@ -34,6 +34,7 @@ sass_library(
     deps = [
         "//:mdc_sass_lib",
         "//src/material:sass_lib",
+        "//src/material-experimental/mdc-form-field:mdc_form_field_scss_lib",
         "//src/material/core:core_scss_lib",
     ],
 )
@@ -43,7 +44,6 @@ sass_binary(
     src = "paginator.scss",
     deps = [
         "//src/cdk:sass_lib",
-        "//src/material-experimental/mdc-form-field:mdc_form_field_scss_lib",
     ],
 )
 

src/material-experimental/mdc-paginator/_paginator-theme.scss

@@ -1,7 +1,9 @@
+@use 'sass:map';
+@use 'sass:meta';
 @use '@angular/material' as mat;
 @use '@material/density' as mdc-density;
 @use '@material/typography' as mdc-typography;
-@use 'sass:map';
+@use '../mdc-form-field/form-field-theme';
 
 @use './paginator-variables';
 
@@ -66,6 +68,18 @@
   $height: mdc-density.prop-value(
       paginator-variables.$density-config, $density-scale, height);
 
+  .mat-mdc-paginator {
+    // We need the form field to be narrower in order to fit into the paginator,
+    // so we set its density to be -4 or denser.
+    @if ((meta.type-of($density-scale) == 'number' and $density-scale >= -4) or
+         $density-scale == maximum) {
+      @include form-field-theme.density(-4);
+    }
+    @else {
+      @include form-field-theme.density($density-scale);
+    }
+  }
+
   .mat-mdc-paginator-container {
     min-height: $height;
   }

src/material-experimental/mdc-paginator/paginator.scss

@@ -1,5 +1,4 @@
 @use '@angular/cdk';
-@use '../mdc-form-field/form-field-theme';
 
 $padding: 0 8px;
 $page-size-margin-right: 8px;
@@ -14,10 +13,6 @@ $button-icon-size: 28px;
 .mat-mdc-paginator {
   display: block;
 
-  // We need the form field to be as narrow as possible in order to fit
-  // into the paginator so we always use the densest layout available.
-  @include form-field-theme.density(minimum);
-
   // This element reserves space for hints and error messages.
   // Hide it since we know that we won't need it.
   .mat-mdc-form-field-subscript-wrapper {