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

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

@@ -1,118 +0,0 @@
-import { CellHarnessFilters } from '@angular/material/table/testing';
-import { ComponentHarnessConstructor } from '@angular/cdk/testing';
-import { HarnessPredicate } from '@angular/cdk/testing';
-import { MatCellHarness as MatCellHarness_2 } from '@angular/material/table/testing';
-import { MatFooterCellHarness as MatFooterCellHarness_2 } from '@angular/material/table/testing';
-import { MatHeaderCellHarness as MatHeaderCellHarness_2 } from '@angular/material/table/testing';
-import { _MatRowHarnessBase } from '@angular/material/table/testing';
-import { MatRowHarnessColumnsText } from '@angular/material/table/testing';
-import { _MatTableHarnessBase } from '@angular/material/table/testing';
-import { MatTableHarnessColumnsText } from '@angular/material/table/testing';
-import { RowHarnessFilters } from '@angular/material/table/testing';
-import { TableHarnessFilters } from '@angular/material/table/testing';
-
-export { CellHarnessFilters }
-
-/** Harness for interacting with an MDC-based Angular Material table cell. */
-export declare class MatCellHarness extends MatCellHarness_2 {
-    /** The selector for the host element of a `MatCellHarness` instance. */
-    static hostSelector: string;
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for a table cell with specific attributes.
-     * @param options Options for narrowing the search
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with<T extends MatCellHarness>(this: ComponentHarnessConstructor<T>, options?: CellHarnessFilters): HarnessPredicate<T>;
-}
-
-/** Harness for interacting with an MDC-based Angular Material table footer cell. */
-export declare class MatFooterCellHarness extends MatFooterCellHarness_2 {
-    /** The selector for the host element of a `MatFooterCellHarness` instance. */
-    static hostSelector: string;
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for a table footer cell with specific
-     * attributes.
-     * @param options Options for narrowing the search
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with<T extends MatFooterCellHarness>(this: ComponentHarnessConstructor<T>, options?: CellHarnessFilters): HarnessPredicate<T>;
-}
-
-/** Harness for interacting with an MDC-based Angular Material table footer row. */
-export declare class MatFooterRowHarness extends _MatRowHarnessBase<typeof MatFooterCellHarness, MatFooterCellHarness> {
-    /** The selector for the host element of a `MatFooterRowHarness` instance. */
-    static hostSelector: string;
-    protected _cellHarness: typeof MatFooterCellHarness;
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for a table footer row cell with specific
-     * attributes.
-     * @param options Options for narrowing the search
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with<T extends MatFooterRowHarness>(this: ComponentHarnessConstructor<T>, options?: RowHarnessFilters): HarnessPredicate<T>;
-}
-
-/** Harness for interacting with an MDC-based Angular Material table header cell. */
-export declare class MatHeaderCellHarness extends MatHeaderCellHarness_2 {
-    /** The selector for the host element of a `MatHeaderCellHarness` instance. */
-    static hostSelector: string;
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for a table header cell with specific
-     * attributes.
-     * @param options Options for narrowing the search
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with<T extends MatHeaderCellHarness>(this: ComponentHarnessConstructor<T>, options?: CellHarnessFilters): HarnessPredicate<T>;
-}
-
-/** Harness for interacting with an MDC-based Angular Material table header row. */
-export declare class MatHeaderRowHarness extends _MatRowHarnessBase<typeof MatHeaderCellHarness, MatHeaderCellHarness> {
-    /** The selector for the host element of a `MatHeaderRowHarness` instance. */
-    static hostSelector: string;
-    protected _cellHarness: typeof MatHeaderCellHarness;
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for a table header row with specific
-     * attributes.
-     * @param options Options for narrowing the search
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with<T extends MatHeaderRowHarness>(this: ComponentHarnessConstructor<T>, options?: RowHarnessFilters): HarnessPredicate<T>;
-}
-
-/** Harness for interacting with an MDC-based Angular Material table row. */
-export declare class MatRowHarness extends _MatRowHarnessBase<typeof MatCellHarness, MatCellHarness> {
-    /** The selector for the host element of a `MatRowHarness` instance. */
-    static hostSelector: string;
-    protected _cellHarness: typeof MatCellHarness;
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for a table row with specific attributes.
-     * @param options Options for narrowing the search
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with<T extends MatRowHarness>(this: ComponentHarnessConstructor<T>, options?: RowHarnessFilters): HarnessPredicate<T>;
-}
-
-export { MatRowHarnessColumnsText }
-
-/** Harness for interacting with an MDC-based mat-table in tests. */
-export declare class MatTableHarness extends _MatTableHarnessBase<typeof MatHeaderRowHarness, MatHeaderRowHarness, typeof MatRowHarness, MatRowHarness, typeof MatFooterRowHarness, MatFooterRowHarness> {
-    /** The selector for the host element of a `MatTableHarness` instance. */
-    static hostSelector: string;
-    protected _headerRowHarness: typeof MatHeaderRowHarness;
-    protected _rowHarness: typeof MatRowHarness;
-    protected _footerRowHarness: typeof MatFooterRowHarness;
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for a table with specific attributes.
-     * @param options Options for narrowing the search
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with<T extends MatTableHarness>(this: ComponentHarnessConstructor<T>, options?: TableHarnessFilters): HarnessPredicate<T>;
-}
-
-export { MatTableHarnessColumnsText }
-
-export { RowHarnessFilters }
-
-export { TableHarnessFilters }
-
-export { }

package/mdc-tabs/_tabs-common.import.scss

@@ -1,14 +0,0 @@
-@forward '../../material/core/style/private.import';
-@forward '../mdc-core/mdc-helpers/mdc-helpers.import';
-@forward '../mdc-core/mdc-helpers/mdc-helpers';
-@forward '../../material/core/style/vendor-prefixes.import';
-@forward '../../cdk/a11y/index.import';
-@forward 'tabs-common' hide paginated-tab-header, paginated-tab-header-container,
-paginated-tab-header-item-wrapper, tab, tab-ripple;
-@forward 'tabs-common' as mat-mdc-* hide $mat-mdc-mat-tab-animation-duration;
-
-@import '../../material/core/style/variables';
-@import '../../material/core/style/private';
-@import '../../material/core/style/vendor-prefixes';
-@import '../../cdk/a11y';
-@import '../mdc-core/mdc-helpers/mdc-helpers';

package/mdc-tabs/_tabs-common.scss

@@ -1,196 +0,0 @@
-@use '@angular/material' as mat;
-@use '@material/ripple' as mdc-ripple;
-@use '@material/tab' as mdc-tab;
-@use '@material/tab-indicator' as mdc-tab-indicator;
-@use 'sass:map';
-
-@use '../mdc-core/mdc-helpers/mdc-helpers';
-
-$mat-tab-animation-duration: 500ms !default;
-
-// Combines the various structural styles we need for the tab group and tab nav bar.
-@mixin structural-styles {
-  @include mdc-helpers.disable-fallback-declarations {
-    @include mdc-tab.static-styles($query: mdc-helpers.$mat-base-styles-query);
-    @include mdc-tab-indicator.core-styles($query: mdc-helpers.$mat-base-styles-query);
-  }
-
-  .mat-mdc-tab-ripple {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    pointer-events: none;
-  }
-}
-
-@mixin tab {
-  &.mdc-tab {
-    // This is usually included by MDC's tab bar, however we don't
-    // use it because we implement our own pagination.
-    @include mdc-tab.height(mdc-tab.$height, mdc-helpers.$mat-base-styles-query);
-
-    // MDC's tabs stretch to fit the header by default, whereas stretching on our current ones
-    // is an opt-in behavior. Also technically we don't need to combine the two classes, but
-    // we need the extra specificity to avoid issues with CSS insertion order.
-    flex-grow: 0;
-  }
-
-  // Used to render out the background tint when hovered/focused. Usually this is done by
-  // MDC's ripple styles, however we're using our own ripples due to size concerns.
-  .mdc-tab__ripple::before {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  // Required for `fitInkBarToContent` to work. This used to be included with MDC's `without-ripple`
-  // mixin, but that no longer appears to be the case with `static-styles`. Since the latter is
-  // ~10kb smaller, we include this one extra style ourselves.
-  .mdc-tab__content {
-    @include mdc-tab-indicator.surface;
-  }
-
-  // We need to handle the hover and focus indication ourselves, because we don't use MDC's ripple.
-  &:hover .mdc-tab__ripple::before {
-    opacity: map.get(mdc-ripple.$dark-ink-opacities, hover);
-  }
-
-  &.cdk-program-focused,
-  &.cdk-keyboard-focused {
-    .mdc-tab__ripple::before {
-      opacity: map.get(mdc-ripple.$dark-ink-opacities, focus);
-    }
-  }
-
-  .mat-ripple-element {
-    opacity: map.get(mdc-ripple.$dark-ink-opacities, press);
-  }
-}
-
-// Structural styles for a tab header. Used by both `mat-tab-header` and `mat-tab-nav-bar`.
-// We need this styles on top of MDC's, because MDC doesn't support pagination like ours.
-@mixin paginated-tab-header {
-  .mat-mdc-tab-header {
-    display: flex;
-    overflow: hidden;
-    position: relative;
-    flex-shrink: 0;
-  }
-
-  .mat-mdc-tab-header-pagination {
-    @include mat.private-user-select(none);
-    position: relative;
-    display: none;
-    justify-content: center;
-    align-items: center;
-    min-width: 32px;
-    cursor: pointer;
-    z-index: 2;
-    -webkit-tap-highlight-color: transparent;
-    touch-action: none;
-    box-sizing: content-box;
-    background: none;
-    border: none;
-    outline: 0;
-    padding: 0;
-
-    &::-moz-focus-inner {
-      border: 0;
-    }
-
-    .mat-ripple-element {
-      opacity: map.get(mdc-ripple.$dark-ink-opacities, press);
-    }
-
-    .mat-mdc-tab-header-pagination-controls-enabled & {
-      display: flex;
-    }
-  }
-
-  // The pagination control that is displayed on the left side of the tab header.
-  .mat-mdc-tab-header-pagination-before,
-  .mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after {
-    padding-left: 4px;
-    .mat-mdc-tab-header-pagination-chevron {
-      transform: rotate(-135deg);
-    }
-  }
-
-  // The pagination control that is displayed on the right side of the tab header.
-  .mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before,
-  .mat-mdc-tab-header-pagination-after {
-    padding-right: 4px;
-    .mat-mdc-tab-header-pagination-chevron {
-      transform: rotate(45deg);
-    }
-  }
-
-  .mat-mdc-tab-header-pagination-chevron {
-    border-style: solid;
-    border-width: 2px 2px 0 0;
-    height: 8px;
-    width: 8px;
-  }
-
-  .mat-mdc-tab-header-pagination-disabled {
-    box-shadow: none;
-    cursor: default;
-    pointer-events: none;
-
-    .mat-mdc-tab-header-pagination-chevron {
-      opacity: 0.4;
-    }
-  }
-
-  .mat-mdc-tab-list {
-    flex-grow: 1;
-    position: relative;
-    transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);
-
-    ._mat-animation-noopable & {
-      transition: none;
-    }
-  }
-
-  // The `span` is in the selector in order to increase the specificity, ensuring
-  // that it's always higher than the selector that declares the transition.
-  ._mat-animation-noopable {
-    span.mdc-tab-indicator__content,
-    span.mdc-tab__text-label {
-      transition: none;
-    }
-  }
-}
-
-// Structural styles for the element that wraps the paginated header items.
-@mixin paginated-tab-header-item-wrapper($parent) {
-  display: flex;
-  flex: 1 0 auto;
-
-  // We need to set the parent here explicitly, in order to prevent the alignment
-  // from any parent tab groups from propagating down to the children when nesting.
-  // Note that these are used as inputs so they shouldn't be changed to `mat-mdc-`.
-  [mat-align-tabs='center'] > #{$parent} & {
-    justify-content: center;
-  }
-
-  [mat-align-tabs='end'] > #{$parent} & {
-    justify-content: flex-end;
-  }
-}
-
-// Structural styles for the element that wraps the paginated container's content.
-@mixin paginated-tab-header-container {
-  display: flex;
-  flex-grow: 1;
-  overflow: hidden;
-  z-index: 1;
-}

package/mdc-tabs/_tabs-theme.import.scss

@@ -1,8 +0,0 @@
-@forward '../mdc-core/mdc-helpers/mdc-helpers.import';
-@forward '../mdc-core/mdc-helpers/mdc-helpers';
-@forward 'tabs-theme' hide color, density, theme, typography;
-@forward 'tabs-theme' as mat-mdc-tabs-* hide $mat-mdc-tabs-mdc-tab-icon-color-active,
-$mat-mdc-tabs-mdc-tab-text-label-color-active, $mat-mdc-tabs-mdc-tab-text-label-color-default,
-mat-mdc-tabs-background, mat-mdc-tabs-palette-styles;
-
-@import '../mdc-core/mdc-helpers/mdc-helpers';

package/mdc-tabs/_tabs-theme.scss

@@ -1,146 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/tab-indicator' as mdc-tab-indicator;
-@use '@material/tab-indicator/tab-indicator-theme' as mdc-tab-indicator-theme;
-@use '@material/tab' as mdc-tab;
-@use '@material/tab/mixins' as mdc-tab-mixins;
-@use '@material/tab-bar' as mdc-tab-bar;
-
-@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) {
-    .mat-mdc-tab, .mat-mdc-tab-link {
-      &:not(.mat-mdc-tab-disabled) {
-        @include mdc-tab-mixins.text-label-color(rgba(mdc-theme-color.$on-surface, 0.6));
-      }
-
-      // MDC seems to include a background color on tabs which only stands out on dark themes.
-      // Disable for now for backwards compatibility. These styles are inside the theme in order
-      // to avoid CSS specificity issues.
-      background-color: transparent;
-    }
-
-    @include _palette-styles($primary);
-
-    .mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
-      &.mat-accent {
-        @include _palette-styles($accent);
-      }
-
-      &.mat-warn {
-        @include _palette-styles($warn);
-      }
-    }
-
-    .mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
-      &.mat-background-primary {
-        @include _background(primary, on-primary);
-      }
-
-      &.mat-background-accent {
-        @include _background(secondary, on-secondary);
-      }
-
-      &.mat-background-warn {
-        @include _background(error, on-error);
-      }
-    }
-
-    .mat-mdc-tab-header-pagination-chevron {
-      @include mdc-theme.prop(border-color, on-surface);
-    }
-  }
-}
-
-@mixin _background($background-color, $foreground-color) {
-  // Note that these selectors target direct descendants so
-  // that the styles don't apply to any nested tab groups.
-
-  > .mat-mdc-tab-header, > .mat-mdc-tab-link-container, > .mat-mdc-tab-header-pagination {
-    // Set background color for the tab group
-    @include mdc-theme.prop(background-color, $background-color);
-  }
-
-  > .mat-mdc-tab-header, > .mat-mdc-tab-link-container {
-    // Set labels to contrast against background
-    .mat-mdc-tab .mdc-tab__text-label, .mat-mdc-tab-link .mdc-tab__text-label {
-      @include mdc-theme.prop(color, $foreground-color);
-    }
-
-    .mdc-tab-indicator__content--underline,
-    .mat-mdc-tab-header-pagination-chevron,
-    .mat-mdc-focus-indicator::before {
-      @include mdc-theme.prop(border-color, $foreground-color);
-    }
-  }
-
-  > .mat-mdc-tab-header, > .mat-mdc-tab-link-container, > .mat-mdc-tab-header-pagination {
-    .mat-ripple-element, .mdc-tab__ripple::before {
-      @include mdc-theme.prop(background-color, $foreground-color);
-    }
-
-    .mat-mdc-tab-header-pagination-chevron {
-      @include mdc-theme.prop(border-color, $foreground-color);
-    }
-  }
-}
-
-@mixin _palette-styles($color) {
-  .mat-mdc-tab, .mat-mdc-tab-link {
-    &:not(.mat-mdc-tab-disabled) {
-      @include mdc-tab-mixins.active-text-label-color($color);
-      @include mdc-tab-indicator-theme.theme-styles((active-indicator-color: $color));
-    }
-  }
-
-  .mdc-tab__ripple::before,
-  .mat-mdc-tab .mat-ripple-element,
-  .mat-mdc-tab-header-pagination .mat-ripple-element,
-  .mat-mdc-tab-link .mat-ripple-element {
-    @include mdc-theme.prop(background-color, $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-tab.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
-    @include mdc-tab-indicator.core-styles($query: mdc-helpers.$mat-typography-styles-query);
-  }
-}
-
-@mixin density($config-or-theme) {
-  $density-scale: mat.get-density-config($config-or-theme);
-  .mat-mdc-tab-header {
-    @include mdc-tab-bar.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
-  }
-}
-
-@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-tabs') {
-    $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);
-    }
-  }
-}
-