@angular/material-experimental 14.2.1 → 15.0.0-next.0

package/mdc-list/_list-option-trailing-avatar-compat.scss

@@ -1,58 +0,0 @@
-@use '@material/typography/typography';
-@use '@material/feature-targeting/feature-targeting';
-@use '@material/density/functions' as density-functions;
-@use '@material/list/evolution-mixins' as mdc-list;
-@use '@material/list/evolution-variables' as mdc-list-variables;
-@use '../mdc-core/mdc-helpers/mdc-helpers';
-
-// For compatibility with the non-MDC selection list, we support avatars that are
-// shown at the end of the list option. This is not supported by the MDC list as the
-// spec only defines avatars at the beginning of a list item. For selection list options,
-// we support changing the checkbox position to `before`. This results in the avatar from
-// the list start being moved to the end. Similar to MDC's `--trailing-icon` class, we
-// implement a `--trailing-avatar` class that is based on the original `--leading-avatar`
-// implementation. See: https://github.com/material-components/material-components-web/blob/3f342c3f4715fd3587f327ce4ea6b5dd314c5c55/packages/mdc-list/_evolution-mixins.scss#L198-L217
-
-@mixin core-styles($query) {
-  $feat-structure: feature-targeting.create-target($query, structure);
-
-  @include mdc-helpers.disable-fallback-declarations {
-    .mat-mdc-list-option-with-trailing-avatar {
-      @include mdc-list.item-end-spacing(16px, $query: $query);
-      @include mdc-list.item-end-size(40px, $query: $query);
-
-      &.mdc-list-item--with-two-lines {
-        .mdc-list-item__primary-text {
-          @include typography.text-baseline($top: 32px, $bottom: 20px, $query: $query);
-        }
-      }
-
-      .mdc-list-item__end {
-        @include feature-targeting.targets($feat-structure) {
-          border-radius: 50%;
-        }
-      }
-    }
-  }
-}
-
-@mixin density-styles($density-scale) {
-  $one-line-tall-height: density-functions.prop-value(
-    $density-config: mdc-list-variables.$one-line-item-tall-density-config,
-    $density-scale: $density-scale,
-    $property-name: height,
-  );
-
-  $two-line-tall-height: density-functions.prop-value(
-    $density-config: mdc-list-variables.$two-line-item-tall-density-config,
-    $density-scale: $density-scale,
-    $property-name: height,
-  );
-
-  @include mdc-helpers.disable-fallback-declarations {
-    .mat-mdc-list-option-with-trailing-avatar {
-      @include mdc-list.one-line-item-height($one-line-tall-height);
-      @include mdc-list.two-line-item-height($two-line-tall-height);
-    }
-  }
-}

package/mdc-list/_list-theme.import.scss

@@ -1,17 +0,0 @@
-@forward '../mdc-core/mdc-helpers/mdc-helpers.import';
-@forward '../mdc-core/mdc-helpers/mdc-helpers';
-@forward '../mdc-checkbox/checkbox-theme' hide color, density, private-checkbox-styles-with-color,
-theme, typography;
-@forward '../mdc-checkbox/checkbox-theme' as mat-mdc-* hide $mat-mdc-mdc-checkbox-border-color,
-$mat-mdc-mdc-checkbox-disabled-color, mat-mdc-color, mat-mdc-density, mat-mdc-theme,
-mat-mdc-typography;
-@forward '../mdc-checkbox/checkbox-theme' as mat-mdc-checkbox-* hide
-$mat-mdc-checkbox-mdc-checkbox-border-color, $mat-mdc-checkbox-mdc-checkbox-disabled-color,
-mat-mdc-checkbox-private-checkbox-styles-with-color;
-@forward 'interactive-list-theme' as mat-mdc-*;
-@forward 'list-option-theme' as mat-mdc-*;
-@forward 'list-theme' as mat-mdc-list-*;
-
-@import './interactive-list-theme';
-@import './list-option-theme';
-@import '../mdc-core/mdc-helpers/mdc-helpers';

package/mdc-list/_list-theme.scss

@@ -1,81 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '@material/list/evolution-mixins' as mdc-list;
-
-@use './interactive-list-theme';
-@use './list-option-theme';
-@use '../mdc-core/mdc-helpers/mdc-helpers';
-
-@mixin color($config-or-theme) {
-  $config: mat.get-color-config($config-or-theme);
-  $primary: mat.get-color-from-palette(map.get($config, primary));
-  $accent: mat.get-color-from-palette(map.get($config, accent));
-  $warn: mat.get-color-from-palette(map.get($config, warn));
-
-  @include mdc-helpers.mat-using-mdc-theme($config) {
-    // MDC's state styles are tied in with their ripple. Since we don't use the MDC
-    // ripple, we need to add the hover, focus and selected states manually.
-    @include interactive-list-theme.private-interactive-list-item-state-colors($config);
-    @include mdc-list.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
-
-    .mat-mdc-list-option {
-      @include list-option-theme.private-list-option-color-override($config, $primary, primary);
-    }
-    .mat-mdc-list-option.mat-accent {
-      @include list-option-theme.private-list-option-color-override($config, $accent, secondary);
-    }
-    .mat-mdc-list-option.mat-warn {
-      @include list-option-theme.private-list-option-color-override($config, $warn, error);
-    }
-  }
-}
-
-@mixin density($config-or-theme) {
-  $density-scale: mat.get-density-config($config-or-theme);
-
-  @include mdc-helpers.disable-fallback-declarations {
-    .mat-mdc-list-item {
-      @include mdc-list.one-line-item-density($density-scale);
-      @include mdc-list.two-line-item-density($density-scale);
-      @include mdc-list.three-line-item-density($density-scale);
-    }
-
-    @include list-option-theme.private-list-option-density-styles($density-scale);
-  }
-}
-
-@mixin typography($config-or-theme) {
-  $config: mat.private-typography-to-2018-config(
-      mat.get-typography-config($config-or-theme));
-  @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-list.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
-    @include list-option-theme.private-list-option-typography-styles();
-  }
-
-  // According to the public spec this should be subtitle-1.
-  // However, body-1 and subtitle-1 are nearly identical in the public spec,
-  // and the Google-specific spec states that it should be body-1.
-  // For consistency, we use body-1 for both public and Google internal.
-  .mat-mdc-list-item .mdc-list-item__primary-text {
-    @include mat.typography-level($config, body-1);
-  }
-}
-
-@mixin theme($theme-or-color-config) {
-  $theme: mat.private-legacy-get-theme($theme-or-color-config);
-  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-list') {
-    $color: mat.get-color-config($theme);
-    $density: mat.get-density-config($theme);
-    $typography: mat.get-typography-config($theme);
-
-    @if $color != null {
-      @include color($color);
-    }
-    @if $density != null {
-      @include density($density);
-    }
-    @if $typography != null {
-      @include typography($typography);
-    }
-  }
-}