@angular/material-experimental 14.2.0-rc.0 → 15.0.0-next.0

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

@@ -1,32 +0,0 @@
-import { BaseHarnessFilters } from '@angular/cdk/testing';
-import { ComponentHarnessConstructor } from '@angular/cdk/testing';
-import { HarnessPredicate } from '@angular/cdk/testing';
-import { _MatAutocompleteHarnessBase } from '@angular/material/autocomplete/testing';
-import { MatOptgroupHarness } from '@angular/material-experimental/mdc-core/testing';
-import { MatOptionHarness } from '@angular/material-experimental/mdc-core/testing';
-import { OptgroupHarnessFilters } from '@angular/material-experimental/mdc-core/testing';
-import { OptionHarnessFilters } from '@angular/material-experimental/mdc-core/testing';
-
-/** A set of criteria that can be used to filter a list of `MatAutocompleteHarness` instances. */
-export declare interface AutocompleteHarnessFilters extends BaseHarnessFilters {
-    /** Only find instances whose associated input element matches the given value. */
-    value?: string | RegExp;
-}
-
-/** Harness for interacting with an MDC-based mat-autocomplete in tests. */
-export declare class MatAutocompleteHarness extends _MatAutocompleteHarnessBase<typeof MatOptionHarness, MatOptionHarness, OptionHarnessFilters, typeof MatOptgroupHarness, MatOptgroupHarness, OptgroupHarnessFilters> {
-    protected _prefix: string;
-    protected _optionClass: typeof MatOptionHarness;
-    protected _optionGroupClass: typeof MatOptgroupHarness;
-    /** The selector for the host element of a `MatAutocomplete` instance. */
-    static hostSelector: string;
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for an autocomplete with specific
-     * attributes.
-     * @param options Options for filtering which autocomplete instances are considered a match.
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with<T extends MatAutocompleteHarness>(this: ComponentHarnessConstructor<T>, options?: AutocompleteHarnessFilters): HarnessPredicate<T>;
-}
-
-export { }

package/mdc-button/_button-base.import.scss

@@ -1,4 +0,0 @@
-@forward '../../material/core/style/layout-common.import';
-@forward 'button-base';
-
-@import '../../material/core/style/layout-common';

package/mdc-button/_button-base.scss

@@ -1,95 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '@material/touch-target' as mdc-touch-target;
-
-@use '../mdc-core/mdc-helpers/mdc-helpers';
-
-// Adds styles necessary to provide stateful interactions with the button. This includes providing
-// content for the state container's ::before and ::after so that they can be given a background
-// color and opacity for states like hover, active, and focus. Additionally, adds styles to the
-// ripple and state container so that they fill the button, match the border radius, and avoid
-// pointer events.
-@mixin mat-private-button-interactive() {
-  // The ripple container should match the bounds of the entire button.
-  .mat-mdc-button-ripple,
-  .mat-mdc-button-persistent-ripple,
-  .mat-mdc-button-persistent-ripple::before {
-    @include mat.private-fill;
-
-    // Disable pointer events for the ripple container and state overlay because the container
-    // will overlay the user content and we don't want to disable mouse events on the user content.
-    // Pointer events can be safely disabled because the ripple trigger element is the host element.
-    pointer-events: none;
-
-    // Inherit the border radius from the parent so that state overlay and ripples don't exceed the
-    // parent button boundaries. Note that an inherited border radius does not work properly if
-    // the actual button element does have a border because it causes the inner content to be
-    // smaller. We have special logic for stroked buttons to handle this scenario.
-    border-radius: inherit;
-  }
-
-  // We use ::before so that we can reuse some of MDC's theming.
-  .mat-mdc-button-persistent-ripple::before {
-    content: '';
-    opacity: 0;
-    background-color: var(--mat-mdc-button-persistent-ripple-color);
-  }
-
-  .mat-ripple-element {
-    background-color: var(--mat-mdc-button-ripple-color);
-  }
-
-  // The content should appear over the state and ripple layers, otherwise they may adversely affect
-  // the accessibility of the text content.
-  .mdc-button__label {
-    z-index: 1;
-  }
-
-  // The focus indicator should match the bounds of the entire button.
-  .mat-mdc-focus-indicator {
-    @include mat.private-fill();
-  }
-
-  &:focus .mat-mdc-focus-indicator::before {
-    content: '';
-  }
-}
-
-// MDC's disabled buttons define a default cursor with pointer-events none. However, they select
-// :disabled for this, which does not affect anchor tags.
-// TODO(andrewseguin): Discuss with the MDC team about a mixin we can call for applying this style,
-// and note that having pointer-events may have unintended side-effects, e.g. allowing the user
-// to click the target underneath the button.
-@mixin mat-private-button-disabled() {
-  &[disabled] {
-    cursor: default;
-    pointer-events: none;
-    @content;
-  }
-}
-
-@mixin mat-private-button-touch-target($is-square) {
-  // Element used to ensure that the button has a touch target that meets the required minimum.
-  // Note that we use this, instead of MDC's built-in `mdc-button--touch` class, because the MDC
-  // class is implemented as `margin-top: 6px; margin-bottom: 6px` on the host element which
-  // goes against our rule of not having margins on the host node. Furthermore, having the margin on
-  // the button itself would require us to wrap it in another div. See:
-  // https://github.com/material-components/material-components-web/tree/master/packages/mdc-button#making-buttons-accessible
-  .mat-mdc-button-touch-target {
-    @include mdc-touch-target.touch-target(
-      $set-width: $is-square,
-      $query: mdc-helpers.$mat-base-styles-query);
-  }
-}
-
-// Changes a button theme to exclude the ripple styles.
-@function mat-private-button-remove-ripple($theme) {
-  @return map.merge($theme, (
-    focus-state-layer-color: null,
-    focus-state-layer-opacity: null,
-    hover-state-layer-color: null,
-    hover-state-layer-opacity: null,
-    pressed-state-layer-color: null,
-    pressed-state-layer-opacity: null,
-  ));
-}

package/mdc-button/_button-theme-private.scss

@@ -1,62 +0,0 @@
-@use 'sass:map';
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '../mdc-core/mdc-helpers/mdc-helpers';
-
-@mixin _ripple-color($color) {
-  --mat-mdc-button-persistent-ripple-color: #{$color};
-  --mat-mdc-button-ripple-color: #{rgba($color, 0.1)};
-}
-
-@mixin ripple-theme-styles($config, $is-filled) {
-  $opacities: if(map.get($config, is-dark),
-    mdc-ripple-theme.$light-ink-opacities, mdc-ripple-theme.$dark-ink-opacities);
-
-  // Ideally these styles would be structural, but MDC bases some of the opacities on the theme.
-  &:hover .mat-mdc-button-persistent-ripple::before {
-    opacity: map.get($opacities, hover);
-  }
-
-  &:focus .mat-mdc-button-persistent-ripple::before {
-    opacity: map.get($opacities, focus);
-  }
-
-  &:active .mat-mdc-button-persistent-ripple::before {
-    opacity: map.get($opacities, press);
-  }
-
-  @include _ripple-color(mdc-theme-color.prop-value(on-surface));
-
-  &.mat-primary {
-    @include _ripple-color(mdc-theme-color.prop-value(if($is-filled, on-primary, primary)));
-  }
-
-  &.mat-accent {
-    @include _ripple-color(mdc-theme-color.prop-value(if($is-filled, on-secondary, secondary)));
-  }
-
-  &.mat-warn {
-    @include _ripple-color(mdc-theme-color.prop-value(if($is-filled, on-error, error)));
-  }
-}
-
-// Wraps the content style in a selector for the disabled state.
-// MDC adds theme color by using :not(:disabled), so just using [disabled] once will not
-// override this, neither will it apply to anchor tags. This needs to override the
-// previously set theme color, so it must be ordered after the theme styles.
-// TODO(andrewseguin): Discuss with the MDC team to see if we can avoid the :not(:disabled) by
-// manually styling disabled buttons with a [disabled] selector.
-@mixin apply-disabled-style() {
-  &[disabled][disabled] {
-    @content;
-  }
-}
-
-// Hides the touch target on lower densities.
-@mixin touch-target-density($scale) {
-  @include mdc-helpers.if-touch-targets-unsupported($scale) {
-    .mat-mdc-button-touch-target {
-      display: none;
-    }
-  }
-}

package/mdc-button/_button-theme.import.scss

@@ -1,16 +0,0 @@
-@forward '../mdc-core/mdc-helpers/mdc-helpers.import';
-@forward '../../material/core/ripple/ripple.import';
-@forward '../mdc-core/mdc-helpers/mdc-helpers';
-@forward 'button-theme' hide color, density, theme, typography;
-@forward 'button-theme' as mat-mdc-* hide $mat-mdc-mat-button-state-target, mat-mdc-color,
-mat-mdc-density, mat-mdc-mat-button-apply-disabled-style, mat-mdc-mat-button-disabled-background,
-mat-mdc-mat-button-disabled-color, mat-mdc-mat-button-ripple-ink-color, mat-mdc-theme,
-mat-mdc-typography;
-@forward 'button-theme' as mat-mdc-button-* hide $mat-mdc-button-mat-button-state-target,
-mat-mdc-button-mat-button-apply-disabled-style, mat-mdc-button-mat-button-disabled-background,
-mat-mdc-button-mat-button-disabled-color, mat-mdc-button-mat-button-ripple-ink-color;
-@forward 'fab-theme' as mat-mdc-fab-*;
-@forward 'icon-button-theme' as mat-mdc-icon-button-*;
-
-@import '../../material/core/ripple/ripple';
-@import '../mdc-core/mdc-helpers/mdc-helpers';

package/mdc-button/_button-theme.scss

@@ -1,224 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '@material/button/button' as mdc-button;
-@use '@material/button/button-theme' as mdc-button-theme;
-@use '@material/button/button-text-theme' as mdc-button-text-theme;
-@use '@material/button/button-filled-theme' as mdc-button-filled-theme;
-@use '@material/button/button-protected-theme' as mdc-button-protected-theme;
-@use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
-@use '@material/theme/theme-color' as mdc-theme-color;
-
-@use '../mdc-core/mdc-helpers/mdc-helpers';
-@use './button-theme-private';
-
-@mixin _button-variant($color) {
-  @include mdc-button-text-theme.theme((
-    label-text-color: $color,
-  ));
-}
-
-@mixin _unelevated-button-variant($foreground, $background) {
-  @include mdc-button-filled-theme.theme((
-    container-color: $background,
-    label-text-color: $foreground,
-  ));
-}
-
-@mixin _raised-button-variant($foreground, $background) {
-  @include mdc-button-protected-theme.theme((
-    container-color: $background,
-    label-text-color: $foreground,
-  ));
-}
-
-@mixin _outlined-button-variant($color) {
-  @include mdc-button-outlined-theme.theme((
-    label-text-color: $color,
-  ));
-}
-
-@mixin color($config-or-theme) {
-  $config: mat.get-color-config($config-or-theme);
-  @include mdc-helpers.mat-using-mdc-theme($config) {
-    $is-dark: map.get($config, is-dark);
-    $on-surface: mdc-theme-color.prop-value(on-surface);
-    $surface: mdc-theme-color.prop-value(surface);
-    $disabled-ink-color: rgba($on-surface, if($is-dark, 0.5, 0.38));
-    $disabled-container-color: rgba($on-surface, 0.12);
-    $primary: mdc-theme-color.prop-value(primary);
-    $on-primary: mdc-theme-color.prop-value(on-primary);
-    $secondary: mdc-theme-color.prop-value(secondary);
-    $on-secondary: mdc-theme-color.prop-value(on-secondary);
-    $error: mdc-theme-color.prop-value(error);
-    $on-error: mdc-theme-color.prop-value(on-error);
-
-    .mat-mdc-button {
-      &.mat-unthemed {
-        @include _button-variant($on-surface);
-      }
-
-      &.mat-primary {
-        @include _button-variant($primary);
-      }
-
-      &.mat-accent {
-        @include _button-variant($secondary);
-      }
-
-      &.mat-warn {
-        @include _button-variant($error);
-      }
-
-      @include button-theme-private.apply-disabled-style() {
-        @include mdc-button-text-theme.theme((
-          // We need to pass both the disabled and enabled values, because the enabled
-          // ones apply to anchors while the disabled ones are for buttons.
-          disabled-label-text-color: $disabled-ink-color,
-          label-text-color: $disabled-ink-color
-        ));
-      }
-    }
-
-    .mat-mdc-unelevated-button {
-      &.mat-unthemed {
-        @include _unelevated-button-variant($on-surface, $surface);
-      }
-
-      &.mat-primary {
-        @include _unelevated-button-variant($on-primary, $primary);
-      }
-
-      &.mat-accent {
-        @include _unelevated-button-variant($on-secondary, $secondary);
-      }
-
-      &.mat-warn {
-        @include _unelevated-button-variant($on-error, $error);
-      }
-
-      @include button-theme-private.apply-disabled-style() {
-        @include mdc-button-filled-theme.theme((
-          // We need to pass both the disabled and enabled values, because the enabled
-          // ones apply to anchors while the disabled ones are for buttons.
-          disabled-container-color: $disabled-container-color,
-          disabled-label-text-color: $disabled-ink-color,
-          container-color: $disabled-container-color,
-          label-text-color: $disabled-ink-color,
-        ));
-      }
-    }
-
-    .mat-mdc-raised-button {
-      &.mat-unthemed {
-        @include _raised-button-variant($on-surface, $surface);
-      }
-
-      &.mat-primary {
-        @include _raised-button-variant($on-primary, $primary);
-      }
-
-      &.mat-accent {
-        @include _raised-button-variant($on-secondary, $secondary);
-      }
-
-      &.mat-warn {
-        @include _raised-button-variant($on-error, $error);
-      }
-
-      @include button-theme-private.apply-disabled-style() {
-        @include mdc-button-protected-theme.theme((
-          // We need to pass both the disabled and enabled values, because the enabled
-          // ones apply to anchors while the disabled ones are for buttons.
-          disabled-container-color: $disabled-container-color,
-          disabled-label-text-color: $disabled-ink-color,
-          container-color: $disabled-container-color,
-          label-text-color: $disabled-ink-color,
-          container-elevation: 0,
-        ));
-      }
-    }
-
-    .mat-mdc-outlined-button {
-      @include mdc-button-outlined-theme.theme((
-        outline-color: rgba(mdc-theme-color.prop-value(on-surface), 0.12)
-      ));
-
-      &.mat-unthemed {
-        @include _outlined-button-variant($on-surface);
-      }
-
-      &.mat-primary {
-        @include _outlined-button-variant($primary);
-      }
-
-      &.mat-accent {
-        @include _outlined-button-variant($secondary);
-      }
-
-      &.mat-warn {
-        @include _outlined-button-variant($error);
-      }
-
-      @include button-theme-private.apply-disabled-style() {
-        @include mdc-button-outlined-theme.theme((
-          // We need to pass both the disabled and enabled values, because the enabled
-          // ones apply to anchors while the disabled ones are for buttons.
-          label-text-color: $disabled-ink-color,
-          disabled-label-text-color: $disabled-ink-color,
-          outline-color: rgba($on-surface, 0.12),
-          disabled-outline-color: rgba($on-surface, 0.12),
-        ));
-      }
-    }
-
-    // Ripple colors
-    .mat-mdc-button, .mat-mdc-outlined-button {
-      @include button-theme-private.ripple-theme-styles($config, false);
-    }
-
-    .mat-mdc-raised-button, .mat-mdc-unelevated-button {
-      @include button-theme-private.ripple-theme-styles($config, true);
-    }
-  }
-}
-
-@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-button.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
-  }
-}
-
-@mixin density($config-or-theme) {
-  $density-scale: mat.get-density-config($config-or-theme);
-  .mat-mdc-button,
-  .mat-mdc-raised-button,
-  .mat-mdc-unelevated-button,
-  .mat-mdc-outlined-button {
-    // Use `mat-mdc-button-base` to increase the specificity over the button's structural styles.
-    &.mat-mdc-button-base {
-      @include mdc-button-theme.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
-      @include button-theme-private.touch-target-density($density-scale);
-    }
-  }
-}
-
-@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-button') {
-    $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-button/_fab-theme.scss

@@ -1,90 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '@material/fab/fab' as mdc-fab;
-@use '@material/fab/fab-theme' as mdc-fab-theme;
-@use '@material/theme/theme-color' as mdc-theme-color;
-
-@use '../mdc-core/mdc-helpers/mdc-helpers';
-@use './button-theme-private';
-
-@mixin _fab-variant($foreground, $background) {
-  @include mdc-fab-theme.theme((
-    container-color: $background,
-    icon-color: $foreground,
-  ));
-
-  --mat-mdc-fab-color: #{$foreground};
-}
-
-@mixin color($config-or-theme) {
-  $config: mat.get-color-config($config-or-theme);
-  @include mdc-helpers.mat-using-mdc-theme($config) {
-    $on-surface: mdc-theme-color.prop-value(on-surface);
-    $is-dark: map.get($config, is-dark);
-
-    .mat-mdc-fab, .mat-mdc-mini-fab {
-      @include button-theme-private.ripple-theme-styles($config, true);
-
-      &.mat-unthemed {
-        @include _fab-variant($on-surface, mdc-theme-color.prop-value(surface));
-      }
-
-      &.mat-primary {
-        @include _fab-variant(
-          mdc-theme-color.prop-value(on-primary),
-          mdc-theme-color.prop-value(primary)
-        );
-      }
-
-      &.mat-accent {
-        @include _fab-variant(
-          mdc-theme-color.prop-value(on-secondary),
-          mdc-theme-color.prop-value(secondary)
-        );
-      }
-
-      &.mat-warn {
-        @include _fab-variant(
-          mdc-theme-color.prop-value(on-error),
-          mdc-theme-color.prop-value(error)
-        );
-      }
-
-      @include button-theme-private.apply-disabled-style() {
-        @include _fab-variant(
-          rgba($on-surface, if(map.get($config, is-dark), 0.5, 0.38)),
-          rgba($on-surface, 0.12)
-        );
-      }
-    }
-  }
-}
-
-@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-fab.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
-  }
-}
-
-@mixin density($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-fab') {
-    $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-button/_icon-button-theme.scss

@@ -1,76 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '@material/icon-button/mixins' as mdc-icon-button;
-@use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme;
-@use '@material/theme/theme-color' as mdc-theme-color;
-
-@use '../mdc-core/mdc-helpers/mdc-helpers';
-@use './button-theme-private';
-
-@mixin color($config-or-theme) {
-  $config: mat.get-color-config($config-or-theme);
-  @include mdc-helpers.mat-using-mdc-theme($config) {
-    $is-dark: map.get($config, is-dark);
-    $on-surface: mdc-theme-color.prop-value(on-surface);
-    $disabled-color: rgba($on-surface, if($is-dark, 0.5, 0.38));
-
-    .mat-mdc-icon-button {
-      @include button-theme-private.ripple-theme-styles($config, false);
-
-      &.mat-primary {
-        @include mdc-icon-button-theme.theme((icon-color: mdc-theme-color.prop-value(primary)));
-      }
-
-      &.mat-accent {
-        @include mdc-icon-button-theme.theme((icon-color: mdc-theme-color.prop-value(secondary)));
-      }
-
-      &.mat-warn {
-        @include mdc-icon-button-theme.theme((icon-color: (mdc-theme-color.prop-value(error))));
-      }
-
-      @include button-theme-private.apply-disabled-style() {
-        @include mdc-icon-button-theme.theme((
-          icon-color: $disabled-color,
-          disabled-icon-color: $disabled-color,
-        ));
-      }
-    }
-  }
-}
-
-@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-icon-button.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
-  }
-}
-
-@mixin density($config-or-theme) {
-  $density-scale: mat.get-density-config($config-or-theme);
-    // Use `mat-mdc-button-base` to increase the specificity over the button's structural styles.
-  .mat-mdc-icon-button.mat-mdc-button-base {
-    @include mdc-icon-button.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
-    @include button-theme-private.touch-target-density($density-scale);
-  }
-}
-
-@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-icon-button') {
-    $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);
-    }
-  }
-}