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

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

@@ -1,8 +0,0 @@
-@forward '../../../material/core/theming/theming.import';
-@forward '../../../material/core/style/layout-common.import';
-@forward '../../../material/core/typography/typography.import';
-@forward 'mdc-helpers';
-
-@import '../../../material/core/style/layout-common';
-@import '../../../material/core/theming/theming';
-@import '../../../material/core/typography/typography';

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

@@ -1,221 +0,0 @@
-// TODO(mmalerba): this file should be split into separate cohesive partials for things like
-//  "theming", "typography", "core".
-
-@use '@angular/material' as mat;
-@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.
-$mat-base-styles-query: mdc-feature-targeting.without(mdc-feature-targeting.any(color, typography));
-$mat-base-styles-without-animation-query:
-    mdc-feature-targeting.all($mat-base-styles-query, mdc-feature-targeting.without(animation));
-$mat-theme-styles-query: color;
-$mat-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 mat-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: mat.font-size($mat-config, $mat-level),
-            line-height: mat.line-height($mat-config, $mat-level),
-            font-weight: mat.font-weight($mat-config, $mat-level),
-            letter-spacing: mat.letter-spacing($mat-config, $mat-level),
-            font-family: mat.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 mat-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: mat-typography-level-config-to-mdc($mat-config, $mat-level)));
-  }
-
-  @return $mdc-config;
-}
-
-// Converts an MDC typography level config to an Angular Material one.
-@function mat-typography-config-level-from-mdc($mdc-level) {
-  $mdc-level-config: map.get(mdc-typography.$styles, $mdc-level);
-
-  @return mat.define-typography-level(
-      map.get($mdc-level-config, font-size),
-      map.get($mdc-level-config, line-height),
-      map.get($mdc-level-config, font-weight),
-      map.get($mdc-level-config, font-family),
-      map.get($mdc-level-config, letter-spacing));
-}
-
-// 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 mat-using-mdc-theme($config) {
-  $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));
-  $background-palette: map.get($config, background);
-
-  // 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(mdc-theme-color.contrast-tone(mdc-theme-color.$primary) == 'dark', #000, #fff);
-  mdc-theme-color.$secondary: $accent;
-  mdc-theme-color.$on-secondary:
-      if(mdc-theme-color.contrast-tone(mdc-theme-color.$secondary) == 'dark', #000, #fff);
-  mdc-theme-color.$background: mat.get-color-from-palette($background-palette, background);
-  mdc-theme-color.$surface: mat.get-color-from-palette($background-palette, card);
-  mdc-theme-color.$on-surface:
-      if(mdc-theme-color.contrast-tone(mdc-theme-color.$surface) == 'dark', #000, #fff);
-  mdc-theme-color.$error: $warn;
-  mdc-theme-color.$on-error:
-      if(mdc-theme-color.contrast-tone(mdc-theme-color.$error) == '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:
-          mdc-theme-color.ink-color-for-fill_(primary, mdc-theme-color.$background),
-      text-secondary-on-background:
-          mdc-theme-color.ink-color-for-fill_(secondary, mdc-theme-color.$background),
-      text-hint-on-background:
-          mdc-theme-color.ink-color-for-fill_(hint, mdc-theme-color.$background),
-      text-disabled-on-background:
-          mdc-theme-color.ink-color-for-fill_(disabled, mdc-theme-color.$background),
-      text-icon-on-background:
-          mdc-theme-color.ink-color-for-fill_(icon, mdc-theme-color.$background),
-      // Text-primary on "light" background
-      text-primary-on-light: mdc-theme-color.ink-color-for-fill_(primary, light),
-      text-secondary-on-light: mdc-theme-color.ink-color-for-fill_(secondary, light),
-      text-hint-on-light: mdc-theme-color.ink-color-for-fill_(hint, light),
-      text-disabled-on-light: mdc-theme-color.ink-color-for-fill_(disabled, light),
-      text-icon-on-light: mdc-theme-color.ink-color-for-fill_(icon, light),
-      // Text-primary on "dark" background
-      text-primary-on-dark: mdc-theme-color.ink-color-for-fill_(primary, dark),
-      text-secondary-on-dark: mdc-theme-color.ink-color-for-fill_(secondary, dark),
-      text-hint-on-dark: mdc-theme-color.ink-color-for-fill_(hint, dark),
-      text-disabled-on-dark: mdc-theme-color.ink-color-for-fill_(disabled, dark),
-      text-icon-on-dark: mdc-theme-color.ink-color-for-fill_(icon, dark)
-  );
-
-  // Apply given rules.
-  @include disable-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 mat-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: mat-typography-config-to-mdc($config);
-  }
-
-  // Apply given rules.
-  @include disable-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-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/mdc-core/option/_optgroup-theme.import.scss

@@ -1,7 +0,0 @@
-@forward '../../../material/core/theming/theming.import';
-@forward '../mdc-helpers/mdc-helpers.import';
-@forward '../mdc-helpers/mdc-helpers';
-@forward 'optgroup-theme' as mat-mdc-optgroup-*;
-
-@import '../mdc-helpers/mdc-helpers';
-@import '../../../material/core/theming/theming';

package/mdc-core/option/_optgroup-theme.scss

@@ -1,44 +0,0 @@
-@use '@material/theme/theme' as mdc-theme;
-@use '@angular/material' as mat;
-
-@use '../mdc-helpers/mdc-helpers';
-
-@mixin color($config-or-theme) {
-  $config: mat.get-color-config($config-or-theme);
-
-  @include mdc-helpers.mat-using-mdc-theme($config) {
-    .mat-mdc-optgroup-label {
-      // Since this will usually be rendered in an overlay,
-      // we have to explicitly set the default color.
-      @include mdc-theme.prop(color, text-primary-on-background);
-    }
-  }
-}
-
-@mixin typography($config-or-theme) {
-  $config: mat.private-typography-to-2018-config(
-      mat.get-typography-config($config-or-theme));
-}
-
-@mixin density($config-or-theme) {
-  $density-scale: mat.get-density-config($config-or-theme);
-}
-
-@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-optgroup') {
-    $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);
-    }
-  }
-}

package/mdc-core/option/_option-theme.import.scss

@@ -1,7 +0,0 @@
-@forward '../../../material/core/theming/theming.import';
-@forward '../mdc-helpers/mdc-helpers.import';
-@forward '../mdc-helpers/mdc-helpers';
-@forward 'option-theme' as mat-mdc-option-*;
-
-@import '../mdc-helpers/mdc-helpers';
-@import '../../../material/core/theming/theming';

package/mdc-core/option/_option-theme.scss

@@ -1,87 +0,0 @@
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/list/evolution-mixins' as mdc-list-mixins;
-@use '@material/typography' as mdc-typography;
-@use '@material/ripple' as mdc-ripple;
-@use '@angular/material' as mat;
-
-@use '../mdc-helpers/mdc-helpers';
-
-@mixin color($config-or-theme) {
-  $config: mat.get-color-config($config-or-theme);
-
-  @include mdc-helpers.mat-using-mdc-theme($config) {
-    .mat-mdc-option {
-      // Since this will usually be rendered in an overlay,
-      // we have explicitly set the default color.
-      @include mdc-theme.prop(color, text-primary-on-background);
-
-      &:hover:not(.mdc-list-item--disabled),
-      &:focus:not(.mdc-list-item--disabled),
-      &.mat-mdc-option-active,
-
-      // In multiple mode there is a checkbox to show that the option is selected.
-      &.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) {
-        $color: mdc-theme-color.$on-surface;
-        background: rgba($color, mdc-ripple.states-opacity($color, hover));
-      }
-    }
-
-    .mat-primary {
-      .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
-        @include mdc-list-mixins.list-primary-text-ink-color(primary,
-          $query: mdc-helpers.$mat-theme-styles-query);
-      }
-    }
-
-    .mat-accent {
-      .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
-        @include mdc-list-mixins.list-primary-text-ink-color(secondary,
-          $query: mdc-helpers.$mat-theme-styles-query);
-      }
-    }
-
-    .mat-warn {
-      .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
-        @include mdc-list-mixins.list-primary-text-ink-color(error,
-          $query: mdc-helpers.$mat-theme-styles-query);
-      }
-    }
-  }
-}
-
-@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) {
-    // MDC uses the `subtitle1` level for list items, but
-    // the spec shows `body1` as the correct level.
-    .mat-mdc-option {
-      @include mdc-typography.typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
-    }
-  }
-}
-
-@mixin density($config-or-theme) {
-  $density-scale: mat.get-density-config($config-or-theme);
-}
-
-@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-option') {
-    $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);
-    }
-  }
-}

package/mdc-core/testing/index.d.ts

@@ -1,64 +0,0 @@
-import { BaseHarnessFilters } from '@angular/cdk/testing';
-import { ComponentHarness } from '@angular/cdk/testing';
-import { ComponentHarnessConstructor } from '@angular/cdk/testing';
-import { HarnessPredicate } from '@angular/cdk/testing';
-
-/** Harness for interacting with an MDC-based `mat-optgroup` in tests. */
-export declare class MatOptgroupHarness extends ComponentHarness {
-    /** Selector used to locate option group instances. */
-    static hostSelector: string;
-    private _label;
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for a option group with specific
-     * attributes.
-     * @param options Options for filtering which option instances are considered a match.
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with<T extends MatOptgroupHarness>(this: ComponentHarnessConstructor<T>, options?: OptgroupHarnessFilters): HarnessPredicate<T>;
-    /** Gets the option group's label text. */
-    getLabelText(): Promise<string>;
-    /** Gets whether the option group is disabled. */
-    isDisabled(): Promise<boolean>;
-    /**
-     * Gets the options that are inside the group.
-     * @param filter Optionally filters which options are included.
-     */
-    getOptions(filter?: OptionHarnessFilters): Promise<MatOptionHarness[]>;
-}
-
-/** Harness for interacting with an MDC-based `mat-option` in tests. */
-export declare class MatOptionHarness extends ComponentHarness {
-    /** Selector used to locate option instances. */
-    static hostSelector: string;
-    /** Element containing the option's text. */
-    private _text;
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for an option with specific attributes.
-     * @param options Options for filtering which option instances are considered a match.
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with<T extends MatOptionHarness>(this: ComponentHarnessConstructor<T>, options?: OptionHarnessFilters): HarnessPredicate<T>;
-    /** Clicks the option. */
-    click(): Promise<void>;
-    /** Gets the option's label text. */
-    getText(): Promise<string>;
-    /** Gets whether the option is disabled. */
-    isDisabled(): Promise<boolean>;
-    /** Gets whether the option is selected. */
-    isSelected(): Promise<boolean>;
-    /** Gets whether the option is active. */
-    isActive(): Promise<boolean>;
-    /** Gets whether the option is in multiple selection mode. */
-    isMultiple(): Promise<boolean>;
-}
-
-export declare interface OptgroupHarnessFilters extends BaseHarnessFilters {
-    labelText?: string | RegExp;
-}
-
-export declare interface OptionHarnessFilters extends BaseHarnessFilters {
-    text?: string | RegExp;
-    isSelected?: boolean;
-}
-
-export { }

package/mdc-core/theming/_all-theme.scss

@@ -1,61 +0,0 @@
-@use '@angular/material' as mat;
-
-@use '../core-theme';
-@use '../../mdc-autocomplete/autocomplete-theme';
-@use '../../mdc-button/button-theme';
-@use '../../mdc-button/fab-theme';
-@use '../../mdc-button/icon-button-theme';
-@use '../../mdc-card/card-theme';
-@use '../../mdc-checkbox/checkbox-theme';
-@use '../../mdc-chips/chips-theme';
-@use '../../mdc-dialog/dialog-theme';
-@use '../../mdc-list/list-theme';
-@use '../../mdc-menu/menu-theme';
-@use '../../mdc-radio/radio-theme';
-@use '../../mdc-select/select-theme';
-@use '../../mdc-slide-toggle/slide-toggle-theme';
-@use '../../mdc-slider/slider-theme';
-@use '../../mdc-snack-bar/snack-bar-theme';
-@use '../../mdc-tabs/tabs-theme';
-@use '../../mdc-table/table-theme';
-@use '../../mdc-tooltip/tooltip-theme';
-@use '../../mdc-paginator/paginator-theme';
-@use '../../mdc-progress-bar/progress-bar-theme';
-@use '../../mdc-progress-spinner/progress-spinner-theme';
-@use '../../mdc-input/input-theme';
-@use '../../mdc-form-field/form-field-theme';
-
-@mixin all-mdc-component-themes($theme-or-color-config) {
-  $dedupe-key: 'angular-material-mdc-theme';
-  @include mat.private-check-duplicate-theme-styles($theme-or-color-config, $dedupe-key) {
-    @include core-theme.theme($theme-or-color-config);
-    @include autocomplete-theme.theme($theme-or-color-config);
-    @include button-theme.theme($theme-or-color-config);
-    @include dialog-theme.theme($theme-or-color-config);
-    @include fab-theme.theme($theme-or-color-config);
-    @include icon-button-theme.theme($theme-or-color-config);
-    @include card-theme.theme($theme-or-color-config);
-    @include checkbox-theme.theme($theme-or-color-config);
-    @include chips-theme.theme($theme-or-color-config);
-    @include list-theme.theme($theme-or-color-config);
-    @include menu-theme.theme($theme-or-color-config);
-    @include paginator-theme.theme($theme-or-color-config);
-    @include progress-bar-theme.theme($theme-or-color-config);
-    @include progress-spinner-theme.theme($theme-or-color-config);
-    @include radio-theme.theme($theme-or-color-config);
-    @include select-theme.theme($theme-or-color-config);
-    @include slide-toggle-theme.theme($theme-or-color-config);
-    @include slider-theme.theme($theme-or-color-config);
-    @include snack-bar-theme.theme($theme-or-color-config);
-    @include table-theme.theme($theme-or-color-config);
-    @include form-field-theme.theme($theme-or-color-config);
-    @include input-theme.theme($theme-or-color-config);
-    @include tabs-theme.theme($theme-or-color-config);
-    @include tooltip-theme.theme($theme-or-color-config);
-  }
-}
-
-// @deprecated Use `all-mdc-component-themes`.
-@mixin angular-material-mdc-theme($theme-or-color-config) {
-  @include all-mdc-component-themes($theme-or-color-config);
-}