refactor(material): add density styles for components without MDC equivalents

This commit adds density styles for all Angular Material components that
do not have an equivalent MDC version. The density API for those
components is not public yet.

refactor: expose mdc-density styles in material/core

We need to be able to access the MDC-density styles in
`@angular/material` in order to provide density styles
for components which do not have a MDC equivalent.

feat(material/button-toggle): support density scaling

feat(material/list): support for density scaling

feat(material/paginator): add support for density scaling

feat(material/stepper): support for density scaling

Adds support for density scaling.

feat(material/toolbar): add support for density scaling

feat(material/tree): support for density scaling

refactor: prefix copied mdc-density helpers with underscore

* Prefixes all helper functions that have been copied from `mdc-density`
with an underscore. This should ensure that developers do not consider
these as public API.
* Removes the license from MDC web. The code has been changed enough so
that a license is most likely not needed anymore. Additionally, this is
just a transfer from another Google-owned repository.

Author: devversion

src/dev-app/stepper/stepper-demo.html

@@ -1,5 +1,10 @@
 <mat-checkbox [(ngModel)]="isNonLinear">Disable linear mode</mat-checkbox>
 <mat-checkbox [(ngModel)]="disableRipple">Disable header ripple</mat-checkbox>
+<p>
+  <button mat-stroked-button (click)="showLabelBottom = !showLabelBottom">
+    Toggle label position
+  </button>
+</p>
 
 <h3>Linear Vertical Stepper Demo using a single form</h3>
 <form [formGroup]="formGroup">
@@ -52,7 +57,8 @@ <h3>Linear Vertical Stepper Demo using a single form</h3>
 
 <h3>Linear Horizontal Stepper Demo using a different form for each step</h3>
 <mat-horizontal-stepper #linearHorizontalStepper="matHorizontalStepper" [linear]="!isNonLinear"
-                        [disableRipple]="disableRipple">
+                        [disableRipple]="disableRipple"
+                        [labelPosition]="showLabelBottom ? 'bottom' : 'end'">
   <mat-step [stepControl]="nameFormGroup">
     <form [formGroup]="nameFormGroup">
       <ng-template matStepLabel>Fill out your name</ng-template>

src/dev-app/stepper/stepper-demo.ts

@@ -19,6 +19,7 @@ export class StepperDemo implements OnInit {
   isNonLinear = false;
   isNonEditable = false;
   disableRipple = false;
+  showLabelBottom = false;
 
   nameFormGroup: FormGroup;
   emailFormGroup: FormGroup;

src/material-experimental/mdc-list/_list-theme.scss

@@ -1,3 +1,5 @@
+@import '@material/density/functions.import';
+@import '@material/list/variables.import';
 @import '@material/list/mixins.import';
 @import '@material/ripple/variables.import';
 @import '../mdc-helpers/mdc-helpers';
@@ -35,7 +37,21 @@
   }
 }
 
-@mixin mat-mdc-list-density($density-scale) {}
+@mixin mat-mdc-list-density($density-scale) {
+  $height: mdc-density-prop-value(
+    $density-config: $mdc-list-single-line-density-config,
+    $density-scale: $density-scale,
+    $property-name: height,
+  );
+
+  // MDC list provides a mixin called `mdc-list-single-line-density`, but we cannot use
+  // that mixin the generated generated density styles are scoped to `.mdc-list-item`, while
+  // the styles should actually only affect single-line list items. This has been reported as
+  // a bug in the MDC repository: https://github.com/material-components/material-components-web/issues/5737.
+  .mat-mdc-list-item-single-line {
+    @include mdc-list-single-line-height($height);
+  }
+}
 
 @mixin mat-mdc-list-theme($theme) {
   $color: mat-get-color-config($theme);

src/material-experimental/mdc-list/list-base.ts

@@ -76,6 +76,8 @@ export abstract class MatListItemBase implements AfterContentInit, OnDestroy, Ri
     this._ngZone.runOutsideAngular(() => {
       this._subscriptions.add(this.lines.changes.pipe(startWith(this.lines))
           .subscribe((lines: QueryList<ElementRef<Element>>) => {
+            this._element.nativeElement.classList
+                .toggle('mat-mdc-list-item-single-line', lines.length <= 1);
             lines.forEach((line: ElementRef<Element>, index: number) => {
               toggleClass(line.nativeElement,
                   'mdc-list-item__primary-text', index === 0 && lines.length > 1);

src/material/button-toggle/BUILD.bazel

@@ -33,7 +33,10 @@ ng_module(
 sass_library(
     name = "button_toggle_scss_lib",
     srcs = glob(["**/_*.scss"]),
-    deps = ["//src/material/core:core_scss_lib"],
+    deps = [
+        "//src/cdk/a11y:a11y_scss_lib",
+        "//src/material/core:core_scss_lib",
+    ],
 )
 
 sass_binary(

src/material/button-toggle/_button-toggle-theme.scss

@@ -1,7 +1,10 @@
+@import '../../cdk/a11y/a11y';
 @import '../core/style/elevation';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
 @import '../core/typography/typography-utils';
+@import '../core/density/index';
+@import './button-toggle-variables';
 
 @mixin mat-button-toggle-color($config) {
   $foreground: map-get($config, foreground);
@@ -86,7 +89,21 @@
   }
 }
 
-@mixin _mat-button-toggle-density($density-scale) {}
+@mixin _mat-button-toggle-density($density-scale) {
+  $standard-height: _mat-density-prop-value(
+      $mat-button-toggle-standard-density-config, $density-scale, height);
+
+  .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
+    line-height: $standard-height;
+  }
+
+  @include cdk-high-contrast(active, off) {
+    .mat-button-toggle-checked.mat-button-toggle-appearance-standard
+    .mat-button-toggle-focus-overlay {
+      border-bottom: solid $standard-height;
+    }
+  }
+}
 
 @mixin mat-button-toggle-theme($theme) {
   $color: mat-get-color-config($theme);

src/material/button-toggle/_button-toggle-variables.scss

@@ -0,0 +1,14 @@
+$mat-button-toggle-standard-height: 48px !default;
+// Minimum height for highest density can vary based on the content that developers
+// project into button-toggle's. We use a minimum of `24px` though because commonly
+// icons or text are displayed. Icons by default have a size of `24px`.
+$mat-button-toggle-standard-minimum-height: 24px !default;
+$mat-button-toggle-standard-maximum-height: $mat-button-toggle-standard-height !default;
+
+$mat-button-toggle-standard-density-config: (
+  height: (
+    default: $mat-button-toggle-standard-height,
+    maximum: $mat-button-toggle-standard-maximum-height,
+    minimum: $mat-button-toggle-standard-minimum-height,
+  )
+) !default;

src/material/button-toggle/button-toggle.scss

@@ -3,7 +3,6 @@
 @import '../../cdk/a11y/a11y';
 
 $mat-button-toggle-standard-padding: 0 12px !default;
-$mat-button-toggle-standard-height: 48px !default;
 $mat-button-toggle-standard-border-radius: 4px !default;
 
 $mat-button-toggle-legacy-padding: 0 16px !default;
@@ -104,7 +103,6 @@ $mat-button-toggle-legacy-border-radius: 2px !default;
   position: relative;
 
   .mat-button-toggle-appearance-standard & {
-    line-height: $mat-button-toggle-standard-height;
     padding: $mat-button-toggle-standard-padding;
   }
 }
@@ -135,14 +133,6 @@ $mat-button-toggle-legacy-border-radius: 2px !default;
   }
 }
 
-@include cdk-high-contrast(active, off) {
-  .mat-button-toggle-checked {
-    &.mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay {
-      border-bottom: solid $mat-button-toggle-standard-height;
-    }
-  }
-}
-
 // Increase specificity because ripple styles are part of the `mat-core` mixin and can
 // potentially overwrite the absolute position of the container.
 .mat-button-toggle .mat-button-toggle-ripple {

src/material/core/density/README.md

@@ -0,0 +1,3 @@
+Density Sass functions and mixins have been extracted from `@material/density`. We do this to
+avoid adding a new dependency to `@angular/material` until we figured out how dependencies on
+MDC are managed.

src/material/core/density/_index.scss

@@ -0,0 +1,42 @@
+// Taken from mat-density with small modifications to not rely on the new Sass module system.
+// https://github.com/material-components/material-components-web/blob/master/packages/mdc-density
+
+$_mat-density-interval: 4px !default;
+$_mat-density-minimum-scale: minimum !default;
+$_mat-density-maximum-scale: maximum !default;
+$_mat-density-supported-scales: (default, minimum, maximum) !default;
+$_mat-density-supported-properties: (height, size) !default;
+$_mat-density-default-scale: 0 !default;
+
+@function _mat-density-prop-value($density-config, $density-scale, $property-name) {
+  @if (type-of($density-scale) == 'string' and
+      index($list: $_mat-density-supported-scales, $value: $density-scale) == null) {
+    @error 'mat-density: Supported density scales #{$_mat-density-supported-scales}, '  +
+      'but received #{$density-scale}.';
+  }
+
+  @if (index($list: $_mat-density-supported-properties, $value: $property-name) == null) {
+    @error 'mat-density: Supported density properties #{$_mat-density-supported-properties},' +
+      'but received #{$property-name}.';
+  }
+
+  $value: null;
+  $property-scale-map: map_get($density-config, $property-name);
+
+  @if map_has_key($property-scale-map, $density-scale) {
+    $value: map_get($property-scale-map, $density-scale);
+  }
+  @else {
+    $value: map_get($property-scale-map, default) + $density-scale * $_mat-density-interval;
+  }
+
+  $min-value: map_get($property-scale-map, $_mat-density-minimum-scale);
+  $max-value: map_get($property-scale-map, $_mat-density-maximum-scale);
+
+  @if ($value < $min-value or $value > $max-value) {
+    @error 'mat-density: #{$property-name} must be between #{$min-value} and ' +
+      '#{$max-value} (inclusive), but received #{$value}.';
+  }
+
+  @return $value;
+}