@angular/material 16.2.0 → 17.0.0-next.0

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

@@ -1,149 +0,0 @@
-import { HarnessPredicate } from '@angular/cdk/testing';
-import { CellHarnessFilters as LegacyCellHarnessFilters } from '@angular/material/table/testing';
-import { RowHarnessFilters as LegacyRowHarnessFilters } from '@angular/material/table/testing';
-import { TableHarnessFilters as LegacyTableHarnessFilters } from '@angular/material/table/testing';
-import { _MatCellHarnessBase as _MatLegacyCellHarnessBase } from '@angular/material/table/testing';
-import { _MatRowHarnessBase as _MatLegacyRowHarnessBase } from '@angular/material/table/testing';
-import { MatRowHarnessColumnsText as MatLegacyRowHarnessColumnsText } from '@angular/material/table/testing';
-import { _MatTableHarnessBase as _MatLegacyTableHarnessBase } from '@angular/material/table/testing';
-import { MatTableHarnessColumnsText as MatLegacyTableHarnessColumnsText } from '@angular/material/table/testing';
-
-export { LegacyCellHarnessFilters }
-
-export { LegacyRowHarnessFilters }
-
-export { LegacyTableHarnessFilters }
-
-/**
- * Harness for interacting with a standard Angular Material table cell.
- * @deprecated Use `MatCellHarness` from `@angular/material/table/testing` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
- * @breaking-change 17.0.0
- */
-export declare class MatLegacyCellHarness extends _MatLegacyCellHarnessBase {
-    /** 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(options?: LegacyCellHarnessFilters): HarnessPredicate<MatLegacyCellHarness>;
-}
-
-export { _MatLegacyCellHarnessBase }
-
-/**
- * Harness for interacting with a standard Angular Material table footer cell.
- * @deprecated Use `MatFooterCellHarness` from `@angular/material/table/testing` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
- * @breaking-change 17.0.0
- */
-export declare class MatLegacyFooterCellHarness extends _MatLegacyCellHarnessBase {
-    /** 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(options?: LegacyCellHarnessFilters): HarnessPredicate<MatLegacyFooterCellHarness>;
-}
-
-/**
- * Harness for interacting with a standard Angular Material table footer row.
- * @deprecated Use `MatFooterRowHarness` from `@angular/material/table/testing` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
- * @breaking-change 17.0.0
- */
-export declare class MatLegacyFooterRowHarness extends _MatLegacyRowHarnessBase<typeof MatLegacyFooterCellHarness, MatLegacyFooterCellHarness> {
-    /** The selector for the host element of a `MatFooterRowHarness` instance. */
-    static hostSelector: string;
-    protected _cellHarness: typeof MatLegacyFooterCellHarness;
-    /**
-     * 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(options?: LegacyRowHarnessFilters): HarnessPredicate<MatLegacyFooterRowHarness>;
-}
-
-/**
- * Harness for interacting with a standard Angular Material table header cell.
- * @deprecated Use `MatHeaderCellHarness` from `@angular/material/table/testing` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
- * @breaking-change 17.0.0
- */
-export declare class MatLegacyHeaderCellHarness extends _MatLegacyCellHarnessBase {
-    /** 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(options?: LegacyCellHarnessFilters): HarnessPredicate<MatLegacyHeaderCellHarness>;
-}
-
-/**
- * Harness for interacting with a standard Angular Material table header row.
- * @deprecated Use `MatHeaderRowHarness` from `@angular/material/table/testing` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
- * @breaking-change 17.0.0
- */
-export declare class MatLegacyHeaderRowHarness extends _MatLegacyRowHarnessBase<typeof MatLegacyHeaderCellHarness, MatLegacyHeaderCellHarness> {
-    /** The selector for the host element of a `MatHeaderRowHarness` instance. */
-    static hostSelector: string;
-    protected _cellHarness: typeof MatLegacyHeaderCellHarness;
-    /**
-     * 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(options?: LegacyRowHarnessFilters): HarnessPredicate<MatLegacyHeaderRowHarness>;
-}
-
-/**
- * Harness for interacting with a standard Angular Material table row.
- * @deprecated Use `MatRowHarness` from `@angular/material/table/testing` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
- * @breaking-change 17.0.0
- */
-export declare class MatLegacyRowHarness extends _MatLegacyRowHarnessBase<typeof MatLegacyCellHarness, MatLegacyCellHarness> {
-    /** The selector for the host element of a `MatRowHarness` instance. */
-    static hostSelector: string;
-    protected _cellHarness: typeof MatLegacyCellHarness;
-    /**
-     * 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(options?: LegacyRowHarnessFilters): HarnessPredicate<MatLegacyRowHarness>;
-}
-
-export { _MatLegacyRowHarnessBase }
-
-export { MatLegacyRowHarnessColumnsText }
-
-/**
- * Harness for interacting with a standard mat-table in tests.
- * @deprecated Use `MatTableHarness` from `@angular/material/table/testing` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
- * @breaking-change 17.0.0
- */
-export declare class MatLegacyTableHarness extends _MatLegacyTableHarnessBase<typeof MatLegacyHeaderRowHarness, MatLegacyHeaderRowHarness, typeof MatLegacyRowHarness, MatLegacyRowHarness, typeof MatLegacyFooterRowHarness, MatLegacyFooterRowHarness> {
-    /** The selector for the host element of a `MatTableHarness` instance. */
-    static hostSelector: string;
-    protected _headerRowHarness: typeof MatLegacyHeaderRowHarness;
-    protected _rowHarness: typeof MatLegacyRowHarness;
-    protected _footerRowHarness: typeof MatLegacyFooterRowHarness;
-    /**
-     * 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(options?: LegacyTableHarnessFilters): HarnessPredicate<MatLegacyTableHarness>;
-}
-
-export { _MatLegacyTableHarnessBase }
-
-export { MatLegacyTableHarnessColumnsText }
-
-export { }

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

@@ -1,11 +0,0 @@
-@forward '../core/style/private.import';
-@forward '../core/style/vendor-prefixes.import';
-@forward '../../cdk/a11y/index.import';
-@forward 'tabs-common' hide $tab-animation-duration, $tab-bar-height;
-@forward 'tabs-common' as mat-* hide mat-ink-bar, mat-paginated-tab-header,
-mat-paginated-tab-header-container, mat-paginated-tab-header-item-wrapper, mat-tab-label;
-
-@import '../core/style/variables';
-@import '../core/style/private';
-@import '../core/style/vendor-prefixes';
-@import '../../cdk/a11y';

package/legacy-tabs/_tabs-common.scss

@@ -1,173 +0,0 @@
-@use '@angular/cdk';
-
-@use '../core/style/variables';
-@use '../core/style/private';
-@use '../core/style/vendor-prefixes';
-
-$tab-bar-height: 48px !default;
-$tab-animation-duration: 500ms !default;
-
-// Mixin styles for labels that are contained within the tab header.
-/// @deprecated Use `mat.tabs-tab-label` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
-/// @breaking-change 17.0.0
-@mixin tab-label {
-  height: $tab-bar-height;
-  padding: 0 24px;
-  cursor: pointer;
-  box-sizing: border-box;
-  opacity: 0.6;
-  min-width: 160px;
-  text-align: center;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  white-space: nowrap;
-
-  &:focus {
-    outline: none;
-
-    &:not(.mat-tab-disabled) {
-      opacity: 1;
-    }
-  }
-
-  &.mat-tab-disabled {
-    cursor: default;
-
-    @include cdk.high-contrast(active, off) {
-      opacity: 0.5;
-    }
-  }
-
-  .mat-tab-label-content {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    white-space: nowrap;
-  }
-
-  @include cdk.high-contrast(active, off) {
-    opacity: 1;
-  }
-}
-
-// The ink bar that displays under the active tab label
-/// @deprecated Use `mat.tabs-ink-bar` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
-/// @breaking-change 17.0.0
-@mixin ink-bar {
-  $height: 2px;
-
-  @include private.private-animation-noop();
-  position: absolute;
-  bottom: 0;
-  height: $height;
-  transition: $tab-animation-duration variables.$ease-in-out-curve-function;
-
-  .mat-tab-group-inverted-header & {
-    bottom: auto;
-    top: 0;
-  }
-
-  @include cdk.high-contrast(active, off) {
-    outline: solid $height;
-    height: 0;
-  }
-}
-
-// Structural styles for a tab header. Used by both `mat-tab-header` and `mat-tab-nav-bar`.
-/// @deprecated Use `mat.tabs-paginated-tab-header` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
-/// @breaking-change 17.0.0
-@mixin paginated-tab-header {
-  .mat-tab-header {
-    display: flex;
-    overflow: hidden;
-    position: relative;
-    flex-shrink: 0;
-  }
-
-  .mat-tab-header-pagination {
-    @include vendor-prefixes.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-tab-header-pagination-controls-enabled & {
-      display: flex;
-    }
-  }
-
-  // The pagination control that is displayed on the left side of the tab header.
-  .mat-tab-header-pagination-before, .mat-tab-header-rtl .mat-tab-header-pagination-after {
-    padding-left: 4px;
-    .mat-tab-header-pagination-chevron {
-      transform: rotate(-135deg);
-    }
-  }
-
-  // The pagination control that is displayed on the right side of the tab header.
-  .mat-tab-header-rtl .mat-tab-header-pagination-before, .mat-tab-header-pagination-after {
-    padding-right: 4px;
-    .mat-tab-header-pagination-chevron {
-      transform: rotate(45deg);
-    }
-  }
-
-  .mat-tab-header-pagination-chevron {
-    border-style: solid;
-    border-width: 2px 2px 0 0;
-    height: 8px;
-    width: 8px;
-  }
-
-  .mat-tab-header-pagination-disabled {
-    box-shadow: none;
-    cursor: default;
-  }
-
-  .mat-tab-list {
-    flex-grow: 1;
-    position: relative;
-    transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);
-  }
-}
-
-// Structural styles for the element that wraps the paginated header items.
-/// @deprecated Use `mat.tabs-paginated-tab-header-item-wrapper` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
-/// @breaking-change 17.0.0
-@mixin paginated-tab-header-item-wrapper($parent) {
-  display: flex;
-
-  // 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.
-  [mat-align-tabs='center'] > #{$parent} & {
-    justify-content: center;
-  }
-
-  [mat-align-tabs='end'] > #{$parent} & {
-    justify-content: flex-end;
-  }
-}
-
-/// @deprecated Use `mat.tabs-paginated-tab-header-container` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
-/// @breaking-change 17.0.0
-@mixin paginated-tab-header-container {
-  display: flex;
-  flex-grow: 1;
-  overflow: hidden;
-  z-index: 1;
-}

package/legacy-tabs/_tabs-legacy-index.scss

@@ -1,6 +0,0 @@
-@forward 'tabs-theme' hide color, theme, typography;
-@forward 'tabs-theme' as mat-legacy-tabs-* hide mat-legacy-tabs-background, mat-legacy-tabs-density,
-  mat-legacy-tabs-ink-bar, mat-legacy-tabs-tab-label-focus;
-@forward 'tabs-common' hide $tab-animation-duration, $tab-bar-height;
-@forward 'tabs-common' as mat-* hide mat-ink-bar, mat-paginated-tab-header,
-  mat-paginated-tab-header-container, mat-paginated-tab-header-item-wrapper, mat-tab-label;

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

@@ -1,9 +0,0 @@
-@forward '../core/theming/theming.import';
-@forward '../core/typography/typography-utils.import';
-@forward 'tabs-theme' hide color, theme, typography;
-@forward 'tabs-theme' as mat-legacy-tabs-* hide mat-legacy-tabs-background, mat-legacy-tabs-density,
-  mat-legacy-tabs-ink-bar, mat-legacy-tabs-tab-label-focus;
-
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/typography/typography-utils';

package/legacy-tabs/_tabs-theme.scss

@@ -1,188 +0,0 @@
-@use 'sass:map';
-@use '../core/theming/theming';
-@use '../core/typography/typography';
-@use '../core/typography/typography-utils';
-
-/// @deprecated Use `mat.tabs-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
-/// @breaking-change 17.0.0
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $primary: map.get($config, primary);
-  $accent: map.get($config, accent);
-  $warn: map.get($config, warn);
-  $background: map.get($config, background);
-  $foreground: map.get($config, foreground);
-  $header-border: 1px solid theming.get-color-from-palette($foreground, divider);
-
-  .mat-tab-nav-bar,
-  .mat-tab-header {
-    border-bottom: $header-border;
-  }
-
-  .mat-tab-group-inverted-header {
-    .mat-tab-nav-bar,
-    .mat-tab-header {
-      border-top: $header-border;
-      border-bottom: none;
-    }
-  }
-
-  .mat-tab-label, .mat-tab-link {
-    color: theming.get-color-from-palette($foreground, text);
-
-    &.mat-tab-disabled {
-      color: theming.get-color-from-palette($foreground, disabled-text);
-    }
-  }
-
-  .mat-tab-header-pagination-chevron {
-    border-color: theming.get-color-from-palette($foreground, text);
-  }
-
-  .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
-    border-color: theming.get-color-from-palette($foreground, disabled-text);
-  }
-
-  // Remove header border when there is a background color
-  .mat-tab-group[class*='mat-background-'] > .mat-tab-header,
-  .mat-tab-nav-bar[class*='mat-background-'] {
-    border-bottom: none;
-    border-top: none;
-  }
-
-  .mat-tab-group, .mat-tab-nav-bar {
-    $theme-colors: (
-      primary: $primary,
-      accent: $accent,
-      warn: $warn
-    );
-
-    @each $name, $color in $theme-colors {
-      // Set the foreground color of the tabs
-      &.mat-#{$name} {
-        @include _label-focus-color($foreground, $color);
-        @include _ink-bar-color($color);
-
-        // Override ink bar when background color is the same
-        &.mat-background-#{$name} {
-          > .mat-tab-header, > .mat-tab-link-container {
-            @include _ink-bar-color($color, default-contrast);
-          }
-        }
-      }
-    }
-
-    @each $name, $color in $theme-colors {
-      // Set background color of the tabs and override focus color
-      &.mat-background-#{$name} {
-        @include _label-focus-color($foreground, $color);
-        @include _tabs-background($color);
-      }
-    }
-  }
-}
-
-@mixin _ink-bar-color($color, $hue: default) {
-  .mat-ink-bar {
-    background-color: theming.get-color-from-palette($color, $hue);
-  }
-}
-
-@mixin _label-focus-color($foreground, $tab-focus-color) {
-  .mat-tab-label,
-  .mat-tab-link {
-    &.cdk-keyboard-focused,
-    &.cdk-program-focused {
-      background-color: theming.get-color-from-palette($tab-focus-color, lighter, 0.3);
-
-      &.mat-tab-disabled {
-        background-color: theming.get-color-from-palette($foreground, disabled, 0.1);
-      }
-    }
-  }
-}
-
-@mixin _tabs-background($background-color) {
-  // Note that these selectors target direct descendants so
-  // that the styles don't apply to any nested tab groups.
-
-  // Set background color for the tab group
-  > .mat-tab-header, > .mat-tab-link-container, > .mat-tab-header-pagination {
-    background-color: theming.get-color-from-palette($background-color);
-  }
-
-  // Set labels to contrast against background
-  > .mat-tab-header .mat-tab-label, > .mat-tab-link-container .mat-tab-link {
-    color: theming.get-color-from-palette($background-color, default-contrast);
-
-    &.mat-tab-disabled {
-      color: theming.get-color-from-palette($background-color, default-contrast, 0.4);
-    }
-  }
-
-  // Set pagination chevrons to contrast background
-  > .mat-tab-header .mat-tab-header-pagination-chevron,
-  > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,
-  > .mat-tab-link-container .mat-focus-indicator::before,
-  > .mat-tab-header .mat-focus-indicator::before {
-    border-color: theming.get-color-from-palette($background-color, default-contrast);
-  }
-
-  > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,
-  > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
-    // Set the color opacity via `opacity`, rather than `rgba`, because it may be a CSS variable.
-    border-color: theming.get-color-from-palette($background-color, default-contrast, 1);
-    opacity: 0.4;
-  }
-
-  // Set ripples color to be the contrast color of the new background. Otherwise the ripple
-  // color will be based on the app background color.
-  > .mat-tab-header .mat-ripple-element,
-  > .mat-tab-link-container .mat-ripple-element,
-  > .mat-tab-header-pagination .mat-ripple-element {
-    // Set the color opacity via `opacity`, rather than `rgba`, because it may be a CSS variable.
-    background-color: theming.get-color-from-palette($background-color, default-contrast, 1);
-    opacity: 0.12;
-  }
-}
-
-/// @deprecated Use `mat.tabs-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
-/// @breaking-change 17.0.0
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2014-config(
-      theming.get-typography-config($config-or-theme));
-  .mat-tab-group {
-    font-family: typography-utils.font-family($config);
-  }
-
-  .mat-tab-label, .mat-tab-link {
-    font: {
-      family: typography-utils.font-family($config, button);
-      size: typography-utils.font-size($config, button);
-      weight: typography-utils.font-weight($config, button);
-    }
-  }
-}
-
-@mixin _density($config-or-theme) {}
-
-/// @deprecated Use `mat.tabs-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
-/// @breaking-change 17.0.0
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-tabs') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
-
-    @if $color != null {
-      @include color($color);
-    }
-    @if $density != null {
-      @include _density($density);
-    }
-    @if $typography != null {
-      @include typography($typography);
-    }
-  }
-}