@ng-matero/extensions 16.3.2 → 17.1.0

package/core/mdc-helpers/_mdc-helpers.scss

@@ -1,242 +0,0 @@
-// TODO(mmalerba): this file should be split into separate cohesive partials for things like
-//  "theming", "typography", "core".
-
-@use '../theming/theming';
-@use '../typography/typography';
-@use '../typography/typography-utils';
-@use '@material/feature-targeting' as mdc-feature-targeting;
-@use '@material/typography' as mdc-typography;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/theme/css' as mdc-theme-css;
-@use 'sass:map';
-@use 'sass:meta';
-
-// A set of standard queries to use with MDC's queryable mixins.
-$mdc-base-styles-query: mdc-feature-targeting.without(mdc-feature-targeting.any(color, typography));
-$mdc-base-styles-without-animation-query:
-    mdc-feature-targeting.all($mdc-base-styles-query, mdc-feature-targeting.without(animation));
-$mdc-theme-styles-query: color;
-$mdc-typography-styles-query: typography;
-
-// Mappings from Angular Material's typography levels to MDC's typography levels.
-$mat-typography-mdc-level-mappings: (
-    headline-1: headline1,
-    headline-2: headline2,
-    headline-3: headline3,
-    headline-4: headline4,
-    headline-5: headline5,
-    headline-6: headline6,
-    subtitle-1: subtitle1,
-    subtitle-2: subtitle2,
-    body-1: body1,
-    body-2: body2,
-    caption: caption,
-    button: button,
-    overline: overline
-);
-
-// Converts an Angular Material typography level config to an MDC one.
-@function typography-level-config-to-mdc($mat-config, $mat-level) {
-  $mdc-level: map.get($mat-typography-mdc-level-mappings, $mat-level);
-
-  $result-with-nulls: map.merge(
-      if($mdc-level,
-          map.get(mdc-typography.$styles, $mdc-level),
-          (
-            text-decoration: none,
-            -moz-osx-font-smoothing: grayscale,
-            -webkit-font-smoothing: antialiased
-          )),
-      if($mat-level,
-          (
-            font-size: typography-utils.font-size($mat-config, $mat-level),
-            line-height: typography-utils.line-height($mat-config, $mat-level),
-            font-weight: typography-utils.font-weight($mat-config, $mat-level),
-            letter-spacing: typography-utils.letter-spacing($mat-config, $mat-level),
-            font-family: typography-utils.font-family($mat-config, $mat-level),
-            // Angular Material doesn't use text-transform, so disable it.
-            text-transform: none,
-          ),
-          ()));
-
-  // We need to strip out any keys with a null value. Leaving them in will cause MDC to emit CSS
-  // variables with no fallback value, which breaks some builds.
-  $result: ();
-  @each $property, $value in $result-with-nulls {
-    @if $value != null {
-      $result: map.merge($result, ($property: $value));
-    }
-  }
-  @return $result;
-}
-
-// Converts an Angular Material typography config to an MDC one.
-@function typography-config-to-mdc($mat-config) {
-  $mdc-config: ();
-
-  @each $mat-level, $mdc-level in $mat-typography-mdc-level-mappings {
-    $mdc-config: map.merge(
-        $mdc-config,
-        ($mdc-level: typography-level-config-to-mdc($mat-config, $mat-level)));
-  }
-
-  @return $mdc-config;
-}
-
-// Converts an MDC typography level config to an Angular Material one.
-@function typography-config-level-from-mdc($mdc-level) {
-  $mdc-level-config: map.get(mdc-typography.$styles, $mdc-level);
-
-  // Explicitly set the font family to null since we'll apply it globally
-  // through the `define-typgraphy-config`/`define-legacy-typography-config`.
-  @return typography.define-typography-level(
-    $font-family: null,
-    $font-size: map.get($mdc-level-config, font-size),
-    $line-height: map.get($mdc-level-config, line-height),
-    $font-weight: map.get($mdc-level-config, font-weight),
-    $letter-spacing: map.get($mdc-level-config, letter-spacing)
-  );
-}
-
-// MDC logs a warning if the `contrast-tone` function is called with a CSS variable.
-// This function falls back to determining the tone based on whether the theme is light or dark.
-@function _variable-safe-contrast-tone($value, $is-dark) {
-  @if ($value == 'dark' or $value == 'light' or type-of($value) == 'color') {
-    @return mdc-theme-color.contrast-tone($value);
-  }
-
-  @return if($is-dark, 'light', 'dark');
-}
-
-@function _variable-safe-ink-color-for-fill($text-style, $fill-color, $is-dark) {
-  $contrast-tone: _variable-safe-contrast-tone($fill-color, $is-dark);
-  @return map.get(map.get(mdc-theme-color.$text-colors, $contrast-tone), $text-style);
-}
-
-// Configures MDC's global variables to reflect the given theme, applies the given styles,
-// then resets the global variables to prevent unintended side effects.
-@mixin using-mdc-theme($config) {
-  $primary: theming.get-color-from-palette(map.get($config, primary));
-  $accent: theming.get-color-from-palette(map.get($config, accent));
-  $warn: theming.get-color-from-palette(map.get($config, warn));
-  $background-palette: map.get($config, background);
-  $is-dark: map.get($config, is-dark);
-
-  // Save the original values.
-  $orig-primary: mdc-theme-color.$primary;
-  $orig-on-primary: mdc-theme-color.$on-primary;
-  $orig-secondary: mdc-theme-color.$secondary;
-  $orig-on-secondary: mdc-theme-color.$on-secondary;
-  $orig-background: mdc-theme-color.$background;
-  $orig-surface: mdc-theme-color.$surface;
-  $orig-on-surface: mdc-theme-color.$on-surface;
-  $orig-error: mdc-theme-color.$error;
-  $orig-on-error: mdc-theme-color.$on-error;
-  $orig-property-values: mdc-theme-color.$property-values;
-
-  // Set new values based on the given Angular Material theme.
-  mdc-theme-color.$primary: $primary;
-  mdc-theme-color.$on-primary:
-      if(_variable-safe-contrast-tone(mdc-theme-color.$primary, $is-dark) == 'dark', #000, #fff);
-  mdc-theme-color.$secondary: $accent;
-  mdc-theme-color.$on-secondary:
-      if(_variable-safe-contrast-tone(mdc-theme-color.$secondary, $is-dark) == 'dark', #000, #fff);
-  mdc-theme-color.$background: theming.get-color-from-palette($background-palette, background);
-  mdc-theme-color.$surface: theming.get-color-from-palette($background-palette, card);
-  mdc-theme-color.$on-surface:
-      if(_variable-safe-contrast-tone(mdc-theme-color.$surface, $is-dark) == 'dark', #000, #fff);
-  mdc-theme-color.$error: $warn;
-  mdc-theme-color.$on-error:
-      if(_variable-safe-contrast-tone(mdc-theme-color.$error, $is-dark) == 'dark', #000, #fff);
-  mdc-theme-color.$property-values: (
-      // Primary
-      primary: mdc-theme-color.$primary,
-      // Secondary
-      secondary: mdc-theme-color.$secondary,
-      // Background
-      background: mdc-theme-color.$background,
-      // Surface
-      surface: mdc-theme-color.$surface,
-      // Error
-      error: mdc-theme-color.$error,
-      on-primary: mdc-theme-color.$on-primary,
-      on-secondary: mdc-theme-color.$on-secondary,
-      on-surface: mdc-theme-color.$on-surface,
-      on-error: mdc-theme-color.$on-error,
-      // Text-primary on "background" background
-      text-primary-on-background:
-          _variable-safe-ink-color-for-fill(primary, mdc-theme-color.$background, $is-dark),
-      text-secondary-on-background:
-          _variable-safe-ink-color-for-fill(secondary, mdc-theme-color.$background, $is-dark),
-      text-hint-on-background:
-          _variable-safe-ink-color-for-fill(hint, mdc-theme-color.$background, $is-dark),
-      text-disabled-on-background:
-          _variable-safe-ink-color-for-fill(disabled, mdc-theme-color.$background, $is-dark),
-      text-icon-on-background:
-          _variable-safe-ink-color-for-fill(icon, mdc-theme-color.$background, $is-dark),
-      // Text-primary on "light" background
-      text-primary-on-light: _variable-safe-ink-color-for-fill(primary, light, $is-dark),
-      text-secondary-on-light: _variable-safe-ink-color-for-fill(secondary, light, $is-dark),
-      text-hint-on-light: _variable-safe-ink-color-for-fill(hint, light, $is-dark),
-      text-disabled-on-light: _variable-safe-ink-color-for-fill(disabled, light, $is-dark),
-      text-icon-on-light: _variable-safe-ink-color-for-fill(icon, light, $is-dark),
-      // Text-primary on "dark" background
-      text-primary-on-dark: _variable-safe-ink-color-for-fill(primary, dark, $is-dark),
-      text-secondary-on-dark: _variable-safe-ink-color-for-fill(secondary, dark, $is-dark),
-      text-hint-on-dark: _variable-safe-ink-color-for-fill(hint, dark, $is-dark),
-      text-disabled-on-dark: _variable-safe-ink-color-for-fill(disabled, dark, $is-dark),
-      text-icon-on-dark: _variable-safe-ink-color-for-fill(icon, dark, $is-dark)
-  );
-
-  // Apply given rules.
-  @include disable-mdc-fallback-declarations {
-    @content;
-  }
-
-  // Reset the original values.
-  mdc-theme-color.$primary: $orig-primary;
-  mdc-theme-color.$on-primary: $orig-on-primary;
-  mdc-theme-color.$secondary: $orig-secondary;
-  mdc-theme-color.$on-secondary: $orig-on-secondary;
-  mdc-theme-color.$background: $orig-background;
-  mdc-theme-color.$surface: $orig-surface;
-  mdc-theme-color.$on-surface: $orig-on-surface;
-  mdc-theme-color.$error: $orig-error;
-  mdc-theme-color.$on-error: $orig-on-error;
-  mdc-theme-color.$property-values: $orig-property-values;
-}
-
-// Configures MDC's global variables to reflect the given typography config,
-// applies the given styles, then resets the global variables to prevent unintended side effects.
-@mixin using-mdc-typography($config) {
-  // Save the original values.
-  $orig-mdc-typography-styles: mdc-typography.$styles;
-
-  // Set new values based on the given Angular Material typography configuration.
-  @if $config {
-    mdc-typography.$styles: typography-config-to-mdc($config);
-  }
-
-  // Apply given rules.
-  @include disable-mdc-fallback-declarations {
-    @content;
-  }
-
-  // Reset the original values.
-  mdc-typography.$styles: $orig-mdc-typography-styles;
-}
-
-// Disables MDC's CSS custom property fallbacks for the specified mixin content.
-@mixin disable-mdc-fallback-declarations {
-  $previous-value: mdc-theme-css.$enable-fallback-declarations;
-  mdc-theme-css.$enable-fallback-declarations: false;
-  @content;
-  mdc-theme-css.$enable-fallback-declarations: $previous-value;
-}
-
-// Excludes the passed-in CSS content if the layout is too dense to supports touch targets.
-@mixin if-touch-targets-unsupported($scale) {
-  @if ($scale == 'minimum' or (meta.type-of($scale) == 'number' and $scale < -1)) {
-    @content;
-  }
-}

package/core/style/_elevation.scss

@@ -1,91 +0,0 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use 'variables';
-@use '@material/elevation/elevation-theme' as mdc-elevation;
-
-// A collection of mixins and CSS classes that can be used to apply elevation to a material
-// element.
-// See: https://material.io/design/environment/elevation.html
-// Examples:
-//
-//
-// .mat-foo {
-//   @include $mat-elevation(2);
-//
-//   &:active {
-//     @include $mat-elevation(8);
-//   }
-// }
-//
-// <div id="external-card" class="mat-elevation-z2"><p>Some content</p></div>
-//
-// For an explanation of the design behind how elevation is implemented, see the design doc at
-// https://goo.gl/Kq0k9Z.
-
-// The default duration value for elevation transitions.
-$transition-duration: 280ms !default;
-
-// The default easing value for elevation transitions.
-$transition-timing-function: variables.$fast-out-slow-in-timing-function;
-
-// The default color for elevation shadows.
-$color: black !default;
-
-// Prefix for elevation-related selectors.
-$prefix: 'mat-elevation-z';
-
-// Applies the correct css rules to an element to give it the elevation specified by $zValue.
-// The $zValue must be between 0 and 24.
-@mixin elevation($zValue, $color: $color, $opacity: null) {
-  @if meta.type-of($color) == color and $opacity == null {
-    @include mdc-elevation.elevation($zValue, $color);
-  }
-  @else {
-    // Copied from @material/elevation/_elevation-theme.scss#_box-shadow
-    // TODO(mmalerba): Add support for graceful handling of CSS var color to MDC.
-    $shadow-color:
-      if(meta.type-of($color) == color and $opacity != null, rgba($color, $opacity), $color);
-    $umbra-z-value: map.get(mdc-elevation.$umbra-map, $zValue);
-    $penumbra-z-value: map.get(mdc-elevation.$penumbra-map, $zValue);
-    $ambient-z-value: map.get(mdc-elevation.$ambient-map, $zValue);
-    $box-shadow: (
-      #{'#{$umbra-z-value} #{$shadow-color}'},
-      #{'#{$penumbra-z-value} #{$shadow-color}'},
-      #{$ambient-z-value} $shadow-color
-    );
-    @include mdc-elevation.shadow($box-shadow);
-  }
-}
-
-// Applies the elevation to an element in a manner that allows
-// consumers to override it via the Material elevation classes.
-@mixin overridable-elevation($zValue, $color: $color) {
-  &:not([class*='#{$prefix}']) {
-    @include elevation($zValue, $color);
-  }
-}
-
-// Returns a string that can be used as the value for a transition property for elevation.
-// Calling this function directly is useful in situations where a component needs to transition
-// more than one property.
-//
-// .foo {
-//   transition: mat-elevation-transition-property-value(), opacity 100ms ease;
-// }
-@function private-transition-property-value(
-  $duration: $transition-duration,
-  $easing: $transition-timing-function) {
-  @return box-shadow #{$duration} #{$easing};
-}
-
-// Applies the correct css rules needed to have an element transition between elevations.
-// This mixin should be applied to elements whose elevation values will change depending on their
-// context (e.g. when active or disabled).
-//
-// NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can
-// be used in the same way by clients.
-@mixin elevation-transition(
-  $duration: $transition-duration,
-  $easing: $transition-timing-function) {
-  transition: private-transition-property-value($duration, $easing);
-}

package/core/style/_private.scss

@@ -1,32 +0,0 @@
-@use 'sass:map';
-@use './elevation';
-
-@mixin private-theme-elevation($zValue, $config) {
-  $foreground: map.get($config, foreground);
-  $elevation-color: map.get($foreground, elevation);
-  $elevation-color-or-default: if($elevation-color == null, elevation.$color, $elevation-color);
-
-  @include elevation.elevation($zValue, $elevation-color-or-default);
-}
-
-@mixin private-theme-overridable-elevation($zValue, $config) {
-  $foreground: map.get($config, foreground);
-  $elevation-color: map.get($foreground, elevation);
-  $elevation-color-or-default: if($elevation-color == null, elevation.$color, $elevation-color);
-
-  @include elevation.overridable-elevation($zValue, $elevation-color-or-default);
-}
-
-// If the mat-animation-noop class is present on the components root element,
-// prevent non css animations from running.
-// NOTE: Currently this mixin should only be used with components that do not
-// have any projected content.
-@mixin private-animation-noop() {
-  &._mat-animation-noopable {
-    // Use !important here since we don't know what context this mixin will
-    // be included in and MDC can have some really specific selectors.
-    transition: none !important;
-    animation: none !important;
-    @content;
-  }
-}

package/core/style/_variables.scss

@@ -1,44 +0,0 @@
-// Media queries
-// TODO(josephperrott): Change $mat-xsmall and $mat-small usages to rely on BreakpointObserver,
-$xsmall: 'max-width: 599px';
-$small: 'max-width: 959px';
-
-// TODO: Revisit all z-indices before beta
-// z-index main list
-
-$z-index-fab: 20 !default;
-$z-index-drawer: 100 !default;
-
-// Global constants
-$pi: 3.14159265;
-
-// Padding between input toggles and their labels
-$toggle-padding: 8px !default;
-// Width and height of input toggles
-$toggle-size: 20px !default;
-
-// Easing Curves
-// TODO(jelbourn): all of these need to be revisited
-
-// The default animation curves used by material design.
-$linear-out-slow-in-timing-function: cubic-bezier(0, 0, .2, .1) !default;
-$fast-out-slow-in-timing-function: cubic-bezier(.4, 0, .2, 1) !default;
-$fast-out-linear-in-timing-function: cubic-bezier(.4, 0, 1, 1) !default;
-
-$ease-in-out-curve-function: cubic-bezier(.35, 0, .25, 1) !default;
-
-$swift-ease-out-duration: 400ms !default;
-$swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
-$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
-
-$swift-ease-in-duration: 300ms !default;
-$swift-ease-in-timing-function: cubic-bezier(.55, 0, .55, .2) !default;
-$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;
-
-$swift-ease-in-out-duration: 500ms !default;
-$swift-ease-in-out-timing-function: $ease-in-out-curve-function !default;
-$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
-
-$swift-linear-duration: 80ms !default;
-$swift-linear-timing-function: linear !default;
-$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;

package/core/style/_vendor-prefixes.scss

@@ -1,46 +0,0 @@
-/* stylelint-disable property-no-vendor-prefix */
-/* stylelint-disable selector-no-vendor-prefix */
-@mixin user-select($value) {
-  -webkit-user-select: $value;
-  user-select: $value;
-}
-
-@mixin input-placeholder {
-  &::placeholder {
-    @content;
-  }
-
-  &::-moz-placeholder {
-    @content;
-  }
-
-  &::-webkit-input-placeholder {
-    @content;
-  }
-
-  // Note: this isn't necessary anymore since we don't support
-  // IE, but it caused some presubmit failures in #23416.
-  &:-ms-input-placeholder {
-    @content;
-  }
-}
-
-@mixin backface-visibility($value) {
-  -webkit-backface-visibility: $value;
-  backface-visibility: $value;
-}
-
-@mixin color-adjust($value) {
-  -webkit-print-color-adjust: $value;
-  print-color-adjust: $value;
-}
-
-@mixin private-background-clip($value) {
-  -webkit-background-clip: $value;
-  background-clip: $value;
-}
-
-@mixin clip-path($value) {
-  -webkit-clip-path: $value;
-  clip-path: $value;
-}