@angular/material 16.2.0 → 17.0.0-next.0

package/legacy-form-field/_form-field-legacy-index.scss

@@ -1,29 +0,0 @@
-@forward 'form-field-fill-theme' hide $fill-dedupe, fill-color, fill-theme, fill-typography,
-  private-form-field-fill-density;
-@forward 'form-field-fill-theme' as mat-legacy-* hide $mat-legacy-fill-dedupe,
-  mat-legacy-fill-color, mat-legacy-fill-label-floating, mat-legacy-fill-theme,
-  mat-legacy-fill-typography;
-@forward 'form-field-fill-theme' as mat-legacy-form-field-* hide
-  mat-legacy-form-field-fill-label-floating, mat-legacy-form-field-private-form-field-fill-density;
-@forward 'form-field-legacy-theme' hide $legacy-dedupe, legacy-color, legacy-theme,
-  legacy-typography, private-form-field-legacy-density;
-@forward 'form-field-legacy-theme' as mat-legacy-* hide $mat-legacy-legacy-dedupe,
-  mat-legacy-legacy-color, mat-legacy-legacy-label-floating, mat-legacy-legacy-label-floating-print,
-  mat-legacy-legacy-theme, mat-legacy-legacy-typography;
-@forward 'form-field-legacy-theme' as mat-legacy-form-field-* hide
-  mat-legacy-form-field-legacy-label-floating, mat-legacy-form-field-legacy-label-floating-print,
-  mat-legacy-form-field-private-form-field-legacy-density;
-@forward 'form-field-outline-theme' hide $outline-dedupe, outline-color, outline-theme,
-  outline-typography, private-form-field-outline-density;
-@forward 'form-field-outline-theme' as mat-legacy-* hide $mat-legacy-outline-dedupe,
-  mat-legacy-outline-color, mat-legacy-outline-label-floating, mat-legacy-outline-theme,
-  mat-legacy-outline-typography;
-@forward 'form-field-outline-theme' as mat-legacy-form-field-* hide
-  mat-legacy-form-field-outline-label-floating,
-  mat-legacy-form-field-private-form-field-outline-density;
-@forward 'form-field-standard-theme' as mat-legacy-* hide mat-legacy-standard-color,
-  mat-legacy-standard-theme, mat-legacy-standard-typography;
-@forward 'form-field-standard-theme' as mat-legacy-form-field-* hide
-  mat-legacy-form-field-private-form-field-standard-density;
-@forward 'form-field-theme' hide $dedupe, color, density, theme, typography;
-@forward 'form-field-theme' as mat-legacy-form-field-* hide mat-legacy-form-field-label-floating;

package/legacy-form-field/_form-field-legacy-theme.import.scss

@@ -1,14 +0,0 @@
-@forward '../core/style/form-common.import';
-@forward '../core/typography/typography-utils.import';
-@forward 'form-field-legacy-theme' hide $legacy-dedupe, legacy-color, legacy-theme,
-  legacy-typography, private-form-field-legacy-density;
-@forward 'form-field-legacy-theme' as mat-* hide $mat-legacy-dedupe, mat-legacy-color,
-  mat-legacy-label-floating, mat-legacy-label-floating-print, mat-legacy-theme,
-  mat-legacy-typography;
-@forward 'form-field-legacy-theme' as mat-form-field-* hide mat-form-field-legacy-label-floating,
-  mat-form-field-legacy-label-floating-print, mat-form-field-private-form-field-legacy-density;
-
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/style/form-common';
-@import '../core/typography/typography-utils';

package/legacy-form-field/_form-field-legacy-theme.scss

@@ -1,204 +0,0 @@
-@use 'sass:map';
-@use 'sass:math';
-@use '../core/theming/theming';
-@use '../core/style/form-common';
-@use '../core/typography/typography';
-@use '../core/typography/typography-utils';
-
-
-// Theme styles that only apply to the legacy appearance of the form-field.
-
-/// @deprecated Use `mat.form-field-legacy-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
-/// @breaking-change 17.0.0
-@mixin legacy-color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $foreground: map.get($config, foreground);
-  $is-dark-theme: map.get($config, is-dark);
-
-  $label-color: theming.get-color-from-palette($foreground, secondary-text);
-  $underline-color:
-    theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.7, 0.42));
-
-  .mat-form-field-appearance-legacy {
-    .mat-form-field-label {
-      color: $label-color;
-    }
-
-    .mat-hint {
-      color: $label-color;
-    }
-
-    .mat-form-field-underline {
-      background-color: $underline-color;
-    }
-
-    &.mat-form-field-disabled .mat-form-field-underline {
-      @include form-common.private-control-disabled-underline($underline-color);
-    }
-  }
-}
-
-// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,
-// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
-// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
-// an unknown pseudo-class it will discard the entire rule set.
-$legacy-dedupe: 0;
-
-// Applies a floating label above the form field control itself.
-@mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {
-  // We use perspective to fix the text blurriness as described here:
-  // http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/
-  // This results in a small jitter after the label floats on Firefox, which the
-  // translateZ fixes.
-  transform: translateY(-$infix-margin-top - $infix-padding) scale($font-scale) perspective(100px)
-  translateZ(0.001px + $legacy-dedupe);
-  width: math.div(100%, $font-scale) + $legacy-dedupe;
-
-  $legacy-dedupe: $legacy-dedupe + 0.00001 !global;
-}
-
-// Same as mixin above, but omits the translateZ for printing purposes.
-@mixin _label-floating-print($font-scale, $infix-padding, $infix-margin-top) {
-  // This results in a small jitter after the label floats on Firefox, which the
-  // translateZ fixes.
-  transform: translateY(-$infix-margin-top - $infix-padding + $legacy-dedupe)
-                  scale($font-scale);
-  // The tricks above used to smooth out the animation on chrome and firefox actually make things
-  // worse on IE, so we don't include them in the IE version.
-  $legacy-dedupe: $legacy-dedupe + 0.00001 !global;
-}
-
-/// @deprecated Use `mat.form-field-legacy-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
-/// @breaking-change 17.0.0
-@mixin legacy-typography($config-or-theme) {
-  $config: typography.private-typography-to-2014-config(
-      theming.get-typography-config($config-or-theme));
-  // The unit-less line-height from the font config.
-  $line-height: typography-utils.line-height($config, input);
-  // The amount to scale the font for the floating label and subscript.
-  $subscript-font-scale: 0.75;
-  // The amount of space between the top of the line and the top of the actual text
-  // (as a fraction of the font-size).
-  $line-spacing: math.div($line-height - 1, 2);
-  // The padding on the infix. Mocks show half of the text size, but seem to measure from the edge
-  // of the text itself, not the edge of the line; therefore we subtract off the line spacing.
-  $infix-padding: 0.5em - $line-spacing;
-  // The margin applied to the form-field-infix to reserve space for the floating label.
-  // If the line-height is given as a unitless number, coerce it to `em`.
-  $infix-margin-top:
-      $subscript-font-scale * typography-utils.private-coerce-unitless-to-em($line-height);
-  // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.
-  // Mocks show half of the text size, but this margin is applied to an element with the subscript
-  // text font size, so we need to divide by the scale factor to make it half of the original text
-  // size. We again need to subtract off the line spacing since the mocks measure to the edge of the
-  // text, not the  edge of the line.
-  $subscript-margin-top: math.div(0.5em, $subscript-font-scale) - ($line-spacing * 2);
-  // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's
-  // absolutely positioned. This is a combination of the subscript's margin and line-height, but we
-  // need to multiply by the subscript font scale factor since the wrapper has a larger font size.
-  $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;
-
-  .mat-form-field-appearance-legacy {
-    .mat-form-field-wrapper {
-      padding-bottom: $wrapper-padding-bottom;
-    }
-
-    .mat-form-field-infix {
-      padding: $infix-padding 0;
-    }
-
-    &.mat-form-field-can-float {
-      &.mat-form-field-should-float .mat-form-field-label,
-      .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
-        @include _label-floating(
-                $subscript-font-scale, $infix-padding, $infix-margin-top);
-      }
-
-      // @breaking-change 8.0.0 will rely on AutofillMonitor instead.
-      .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper
-      .mat-form-field-label {
-        @include _label-floating(
-                $subscript-font-scale, $infix-padding, $infix-margin-top);
-      }
-
-      // Server-side rendered matInput with a label attribute but label not shown
-      // (used as a pure CSS stand-in for mat-form-field-should-float).
-      .mat-input-server[label] + .mat-form-field-label-wrapper .mat-form-field-label {
-        @include _label-floating(
-                $subscript-font-scale, $infix-padding, $infix-margin-top);
-      }
-    }
-
-    .mat-form-field-label {
-      top: $infix-margin-top + $infix-padding;
-    }
-
-    .mat-form-field-underline {
-      // We want the underline to start at the end of the content box, not the padding box,
-      // so we move it up by the padding amount.
-      bottom: $wrapper-padding-bottom;
-    }
-
-    .mat-form-field-subscript-wrapper {
-      margin-top: $subscript-margin-top;
-
-      // We want the subscript to start at the end of the content box, not the padding box,
-      // so we move it up by the padding amount (adjusted for the smaller font size);
-      top: calc(100% - #{math.div($wrapper-padding-bottom, $subscript-font-scale)});
-    }
-  }
-
-  // translateZ causes the label to not appear while printing, so we override it to not
-  // apply translateZ while printing
-  @media print {
-    .mat-form-field-appearance-legacy {
-      &.mat-form-field-can-float {
-        &.mat-form-field-should-float .mat-form-field-label,
-        .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
-          @include _label-floating-print(
-                  $subscript-font-scale, $infix-padding, $infix-margin-top);
-        }
-
-        // @breaking-change 8.0.0 will rely on AutofillMonitor instead.
-        .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper
-        .mat-form-field-label {
-          @include _label-floating-print(
-                  $subscript-font-scale, $infix-padding, $infix-margin-top);
-        }
-
-        // Server-side rendered matInput with a label attribute but label not shown
-        // (used as a pure CSS stand-in for mat-form-field-should-float).
-        .mat-input-server[label] + .mat-form-field-label-wrapper
-        .mat-form-field-label {
-          @include _label-floating-print(
-                  $subscript-font-scale, $infix-padding, $infix-margin-top);
-        }
-      }
-    }
-  }
-}
-
-/// @deprecated Use `mat.form-field-private-form-field-legacy-density` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
-/// @breaking-change 17.0.0
-@mixin private-form-field-legacy-density($config-or-theme) {}
-
-/// @deprecated Use `mat.form-field-legacy-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
-/// @breaking-change 17.0.0
-@mixin legacy-theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field-legacy') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
-
-    @if $color != null {
-      @include legacy-color($color);
-    }
-    @if $density != null {
-      @include private-form-field-legacy-density($density);
-    }
-    @if $typography != null {
-      @include legacy-typography($typography);
-    }
-  }
-}

package/legacy-form-field/_form-field-outline-theme.import.scss

@@ -1,13 +0,0 @@
-@forward '../core/style/form-common.import';
-@forward '../core/typography/typography-utils.import';
-@forward 'form-field-outline-theme' hide $outline-dedupe, outline-color, outline-theme,
-outline-typography, private-form-field-outline-density;
-@forward 'form-field-outline-theme' as mat-* hide $mat-outline-dedupe, mat-outline-color,
-mat-outline-label-floating, mat-outline-theme, mat-outline-typography;
-@forward 'form-field-outline-theme' as mat-form-field-* hide mat-form-field-outline-label-floating,
-mat-form-field-private-form-field-outline-density;
-
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/style/form-common';
-@import '../core/typography/typography-utils';

package/legacy-form-field/_form-field-outline-theme.scss

@@ -1,167 +0,0 @@
-@use 'sass:map';
-@use 'sass:math';
-@use '../core/theming/theming';
-@use '../core/typography/typography';
-@use '../core/typography/typography-utils';
-
-
-// Theme styles that only apply to the outline appearance of the form-field.
-
-/// @deprecated Use `mat.form-field-outline-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
-/// @breaking-change 17.0.0
-@mixin outline-color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $primary: map.get($config, primary);
-  $accent: map.get($config, accent);
-  $warn: map.get($config, warn);
-  $foreground: map.get($config, foreground);
-  $is-dark-theme: map.get($config, is-dark);
-
-  $label-disabled-color: theming.get-color-from-palette($foreground, disabled-text);
-  $outline-color:
-    theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.3, 0.12));
-  $outline-color-hover:
-    theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 1, 0.87));
-  $outline-color-primary: theming.get-color-from-palette($primary);
-  $outline-color-accent: theming.get-color-from-palette($accent);
-  $outline-color-warn: theming.get-color-from-palette($warn);
-  $outline-color-disabled:
-    theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.15, 0.06));
-
-  .mat-form-field-appearance-outline {
-    .mat-form-field-outline {
-      color: $outline-color;
-    }
-
-    .mat-form-field-outline-thick {
-      color: $outline-color-hover;
-    }
-
-    &.mat-focused {
-      .mat-form-field-outline-thick {
-        color: $outline-color-primary;
-      }
-
-      &.mat-accent .mat-form-field-outline-thick {
-        color: $outline-color-accent;
-      }
-
-      &.mat-warn .mat-form-field-outline-thick {
-        color: $outline-color-warn;
-      }
-    }
-
-    // Class repeated so that rule is specific enough to override focused accent color case.
-    &.mat-form-field-invalid.mat-form-field-invalid {
-      .mat-form-field-outline-thick {
-        color: $outline-color-warn;
-      }
-    }
-
-    &.mat-form-field-disabled {
-      .mat-form-field-label {
-        color: $label-disabled-color;
-      }
-
-      .mat-form-field-outline {
-        color: $outline-color-disabled;
-      }
-    }
-  }
-}
-
-// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,
-// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
-// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
-// an unknown pseudo-class it will discard the entire rule set.
-$outline-dedupe: 0;
-
-// Applies a floating label above the form field control itself.
-@mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {
-  transform: translateY(-$infix-margin-top - $infix-padding + $outline-dedupe)
-  scale($font-scale);
-  width: math.div(100%, $font-scale) + $outline-dedupe;
-
-  $outline-dedupe: $outline-dedupe + 0.00001 !global;
-}
-
-/// @deprecated Use `mat.form-field-outline-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
-/// @breaking-change 17.0.0
-@mixin outline-typography($config-or-theme) {
-  $config: typography.private-typography-to-2014-config(
-      theming.get-typography-config($config-or-theme));
-  // The unit-less line-height from the font config.
-  $line-height: typography-utils.line-height($config, input);
-  // The amount to scale the font for the floating label and subscript.
-  $subscript-font-scale: 0.75;
-  // The padding above and below the infix.
-  $infix-padding: 1em;
-  // The margin applied to the form-field-infix to reserve space for the floating label.
-  $infix-margin-top:
-      $subscript-font-scale * typography-utils.private-coerce-unitless-to-em($line-height);
-  // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.
-  // Mocks show half of the text size, but this margin is applied to an element with the subscript
-  // text font size, so we need to divide by the scale factor to make it half of the original text
-  // size.
-  $subscript-margin-top: math.div(0.5em, $subscript-font-scale);
-  // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's
-  // absolutely positioned. This is a combination of the subscript's margin and line-height, but we
-  // need to multiply by the subscript font scale factor since the wrapper has a larger font size.
-  $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;
-  // The amount we offset the label from the input text in the outline appearance.
-  $outline-appearance-label-offset: -0.25em;
-
-  .mat-form-field-appearance-outline {
-    .mat-form-field-infix {
-      padding: $infix-padding 0 $infix-padding 0;
-    }
-
-    .mat-form-field-label {
-      top: $infix-margin-top + $infix-padding;
-      margin-top: $outline-appearance-label-offset;
-    }
-
-    &.mat-form-field-can-float {
-      &.mat-form-field-should-float .mat-form-field-label,
-      .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
-        @include _label-floating(
-                $subscript-font-scale, $infix-padding + $outline-appearance-label-offset,
-                $infix-margin-top);
-      }
-
-      // Server-side rendered matInput with a label attribute but label not shown
-      // (used as a pure CSS stand-in for mat-form-field-should-float).
-      .mat-input-server[label] + .mat-form-field-label-wrapper .mat-form-field-label {
-        @include _label-floating(
-                $subscript-font-scale, $infix-padding + $outline-appearance-label-offset,
-                $infix-margin-top);
-      }
-    }
-  }
-}
-
-/// @deprecated Use `mat.form-field-private-form-field-outline-density` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
-/// @breaking-change 17.0.0
-@mixin private-form-field-outline-density($config-or-theme) {}
-
-/// @deprecated Use `mat.form-field-outline-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
-/// @breaking-change 17.0.0
-@mixin outline-theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field-outline') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
-
-    @if $color != null {
-      @include outline-color($color);
-    }
-    @if $density != null {
-      @include private-form-field-outline-density($density);
-    }
-    @if $typography != null {
-      @include outline-typography($typography);
-    }
-  }
-}
-

package/legacy-form-field/_form-field-standard-theme.import.scss

@@ -1,11 +0,0 @@
-@forward '../core/style/form-common.import';
-@forward '../core/typography/typography-utils.import';
-@forward 'form-field-standard-theme' as mat-* hide mat-standard-color, mat-standard-theme,
-mat-standard-typography;
-@forward 'form-field-standard-theme' as mat-form-field-* hide
-mat-form-field-private-form-field-standard-density;
-
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/style/form-common';
-@import '../core/typography/typography-utils';

package/legacy-form-field/_form-field-standard-theme.scss

@@ -1,55 +0,0 @@
-@use 'sass:map';
-@use '../core/theming/theming';
-@use '../core/style/form-common';
-
-
-// Theme styles that only apply to the standard appearance of the form-field.
-
-/// @deprecated Use `mat.form-field-standard-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
-/// @breaking-change 17.0.0
-@mixin standard-color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $foreground: map.get($config, foreground);
-  $is-dark-theme: map.get($config, is-dark);
-  $underline-color:
-    theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.7, 0.42));
-
-  .mat-form-field-appearance-standard {
-    .mat-form-field-underline {
-      background-color: $underline-color;
-    }
-
-    &.mat-form-field-disabled .mat-form-field-underline {
-      @include form-common.private-control-disabled-underline($underline-color);
-    }
-  }
-}
-
-/// @deprecated Use `mat.form-field-standard-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
-/// @breaking-change 17.0.0
-@mixin standard-typography($config-or-theme) {}
-
-/// @deprecated Use `mat.form-field-private-form-field-standard-density` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
-/// @breaking-change 17.0.0
-@mixin private-form-field-standard-density($config-or-theme) {}
-
-/// @deprecated Use `mat.form-field-standard-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
-/// @breaking-change 17.0.0
-@mixin standard-theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field-standard') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
-
-    @if $color != null {
-      @include standard-color($color);
-    }
-    @if $density != null {
-      @include private-form-field-standard-density($density);
-    }
-    @if $typography != null {
-      @include standard-typography($typography);
-    }
-  }
-}

package/legacy-form-field/_form-field-theme.import.scss

@@ -1,29 +0,0 @@
-@forward '../core/style/form-common.import';
-@forward 'form-field-fill-theme' as mat-* hide $mat-fill-dedupe, mat-fill-color, mat-fill-theme,
-mat-fill-typography;
-@forward 'form-field-fill-theme' as mat-form-field-* hide
-mat-form-field-private-form-field-fill-density;
-@forward 'form-field-legacy-theme' as mat-* hide $mat-legacy-dedupe, mat-legacy-color,
-mat-legacy-theme, mat-legacy-typography;
-@forward 'form-field-legacy-theme' as mat-form-field-* hide
-mat-form-field-private-form-field-legacy-density;
-@forward 'form-field-outline-theme' as mat-* hide $mat-outline-dedupe, mat-outline-color,
-mat-outline-theme, mat-outline-typography;
-@forward 'form-field-outline-theme' as mat-form-field-* hide
-mat-form-field-private-form-field-outline-density;
-@forward '../core/typography/typography-utils.import';
-@forward 'form-field-standard-theme' as mat-* hide mat-standard-color, mat-standard-theme,
-mat-standard-typography;
-@forward 'form-field-standard-theme' as mat-form-field-* hide
-mat-form-field-private-form-field-standard-density;
-@forward 'form-field-theme' hide $dedupe, color, density, theme, typography;
-@forward 'form-field-theme' as mat-form-field-* hide mat-form-field-label-floating;
-
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/style/form-common';
-@import '../core/typography/typography-utils';
-@import './form-field-fill-theme.scss';
-@import './form-field-legacy-theme.scss';
-@import './form-field-outline-theme.scss';
-@import './form-field-standard-theme.scss';