@angular/material 16.2.1 → 17.0.0-next.0

package/form-field/_mdc-text-field-structure-overrides.scss

@@ -154,4 +154,24 @@
     content: none;
   }
 
+  // This fixes an issue where the notch appears to be thicker than the rest of the outline when
+  // zoomed in on Chrome. The border inconsistency seems to be some kind of rendering artifact
+  // that arises from a combination of the fact that the notch contains text, while the leading
+  // and trailing outline do not, combined with the fact that the border is semi-transparent.
+  // Experimentally, I discovered that adding a transparent left border fixes the inconsistency.
+  // Note: class name is repeated to achieve sufficient specificity over the various MDC states.
+  // (hover, focus, etc.)
+  // TODO(mmalerba): port this fix into MDC
+  .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field {
+    &.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
+      border-left: 1px solid transparent;
+    }
+  }
+
+  [dir='rtl'] .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field {
+    &.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
+      border-left: none;
+      border-right: 1px solid transparent;
+    }
+  }
 }

package/form-field/testing/index.d.ts

@@ -1,4 +1,3 @@
-import { AsyncFactoryFn } from '@angular/cdk/testing';
 import { BaseHarnessFilters } from '@angular/cdk/testing';
 import { ComponentHarness } from '@angular/cdk/testing';
 import { ComponentHarnessConstructor } from '@angular/cdk/testing';
@@ -8,11 +7,6 @@ import { MatDateRangeInputHarness } from '@angular/material/datepicker/testing';
 import { MatFormFieldControlHarness } from '@angular/material/form-field/testing/control';
 import { MatInputHarness } from '@angular/material/input/testing';
 import { MatSelectHarness } from '@angular/material/select/testing';
-import { TestElement } from '@angular/cdk/testing';
-
-declare interface ErrorBase extends ComponentHarness {
-    getText(): Promise<string>;
-}
 
 /** A set of criteria that can be used to filter a list of error harness instances. */
 export declare interface ErrorHarnessFilters extends BaseHarnessFilters {
@@ -34,7 +28,7 @@ export declare interface FormFieldHarnessFilters extends BaseHarnessFilters {
 }
 
 /** Harness for interacting with an MDC-based `mat-error` in tests. */
-export declare class MatErrorHarness extends _MatErrorHarnessBase {
+export declare class MatErrorHarness extends ComponentHarness {
     static hostSelector: string;
     /**
      * Gets a `HarnessPredicate` that can be used to search for an error with specific
@@ -43,18 +37,24 @@ export declare class MatErrorHarness extends _MatErrorHarnessBase {
      * @return a `HarnessPredicate` configured with the given options.
      */
     static with<T extends MatErrorHarness>(this: ComponentHarnessConstructor<T>, options?: ErrorHarnessFilters): HarnessPredicate<T>;
-}
-
-export declare abstract class _MatErrorHarnessBase extends ComponentHarness {
+    protected static _getErrorPredicate<T extends MatErrorHarness>(type: ComponentHarnessConstructor<T>, options: ErrorHarnessFilters): HarnessPredicate<T>;
     /** Gets a promise for the error's label text. */
     getText(): Promise<string>;
-    protected static _getErrorPredicate<T extends MatErrorHarness>(type: ComponentHarnessConstructor<T>, options: ErrorHarnessFilters): HarnessPredicate<T>;
 }
 
 export { MatFormFieldControlHarness }
 
-/** Harness for interacting with a MDC-based form-field's in tests. */
-export declare class MatFormFieldHarness extends _MatFormFieldHarnessBase<FormFieldControlHarness, typeof MatErrorHarness> {
+export declare class MatFormFieldHarness extends ComponentHarness {
+    private _prefixContainer;
+    private _suffixContainer;
+    private _label;
+    private _hints;
+    private _inputControl;
+    private _selectControl;
+    private _datepickerInputControl;
+    private _dateRangeInputControl;
+    private _textField;
+    private _errorHarness;
     static hostSelector: string;
     /**
      * Gets a `HarnessPredicate` that can be used to search for a form field with specific
@@ -63,42 +63,12 @@ export declare class MatFormFieldHarness extends _MatFormFieldHarnessBase<FormFi
      * @return a `HarnessPredicate` configured with the given options.
      */
     static with<T extends MatFormFieldHarness>(this: ComponentHarnessConstructor<T>, options?: FormFieldHarnessFilters): HarnessPredicate<T>;
-    protected _prefixContainer: AsyncFactoryFn<TestElement | null>;
-    protected _suffixContainer: AsyncFactoryFn<TestElement | null>;
-    protected _label: AsyncFactoryFn<TestElement | null>;
-    protected _hints: AsyncFactoryFn<TestElement[]>;
-    protected _inputControl: AsyncFactoryFn<MatInputHarness | null>;
-    protected _selectControl: AsyncFactoryFn<MatSelectHarness | null>;
-    protected _datepickerInputControl: AsyncFactoryFn<MatDatepickerInputHarness | null>;
-    protected _dateRangeInputControl: AsyncFactoryFn<MatDateRangeInputHarness | null>;
-    protected _errorHarness: typeof MatErrorHarness;
-    private _mdcTextField;
     /** Gets the appearance of the form-field. */
     getAppearance(): Promise<'fill' | 'outline'>;
     /** Whether the form-field has a label. */
     hasLabel(): Promise<boolean>;
     /** Whether the label is currently floating. */
     isLabelFloating(): Promise<boolean>;
-}
-
-export declare abstract class _MatFormFieldHarnessBase<ControlHarness extends MatFormFieldControlHarness, ErrorType extends ComponentHarnessConstructor<ErrorBase> & {
-    with: (options?: ErrorHarnessFilters) => HarnessPredicate<ErrorBase>;
-}> extends ComponentHarness {
-    protected abstract _prefixContainer: AsyncFactoryFn<TestElement | null>;
-    protected abstract _suffixContainer: AsyncFactoryFn<TestElement | null>;
-    protected abstract _label: AsyncFactoryFn<TestElement | null>;
-    protected abstract _hints: AsyncFactoryFn<TestElement[]>;
-    protected abstract _inputControl: AsyncFactoryFn<ControlHarness | null>;
-    protected abstract _selectControl: AsyncFactoryFn<ControlHarness | null>;
-    protected abstract _datepickerInputControl: AsyncFactoryFn<ControlHarness | null>;
-    protected abstract _dateRangeInputControl: AsyncFactoryFn<ControlHarness | null>;
-    protected abstract _errorHarness: ErrorType;
-    /** Gets the appearance of the form-field. */
-    abstract getAppearance(): Promise<string>;
-    /** Whether the label is currently floating. */
-    abstract isLabelFloating(): Promise<boolean>;
-    /** Whether the form-field has a label. */
-    abstract hasLabel(): Promise<boolean>;
     /** Gets the label of the form-field. */
     getLabel(): Promise<string | null>;
     /** Whether the form-field has errors. */
@@ -112,7 +82,7 @@ export declare abstract class _MatFormFieldHarnessBase<ControlHarness extends Ma
      * default controls such as "MatInputHarness" and "MatSelectHarness" are
      * supported.
      */
-    getControl(): Promise<ControlHarness | null>;
+    getControl(): Promise<FormFieldControlHarness | null>;
     /**
      * Gets the harness of the control that is bound to the form-field. Searches
      * for a control that matches the specified harness type.

package/list/_list-theme.scss

@@ -4,6 +4,7 @@
 @use '@material/radio/radio-theme' as mdc-radio-theme;
 @use '@material/list/list-theme' as mdc-list-theme;
 
+@use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox;
 @use '../core/tokens/m2/mdc/radio' as tokens-mdc-radio;
@@ -11,6 +12,13 @@
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 
+@mixin base($config-or-theme) {
+  // Add default values for tokens not related to color, typography, or density.
+  @include sass-utils.current-selector-or-root() {
+    @include mdc-list-theme.theme(tokens-mdc-list.get-unthemable-tokens());
+  }
+}
+
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
   $primary: map.get($config, primary);
@@ -140,6 +148,7 @@
     $density: theming.get-density-config($theme);
     $typography: theming.get-typography-config($theme);
 
+    @include base($theme);
     @if $color != null {
       @include color($color);
     }

package/menu/index.d.ts

@@ -48,7 +48,6 @@ declare namespace i1 {
         MenuCloseReason,
         MatMenuDefaultOptions,
         MAT_MENU_DEFAULT_OPTIONS,
-        _MatMenuBase,
         MatMenu
     }
 }
@@ -62,7 +61,6 @@ declare namespace i2 {
 declare namespace i3 {
     export {
         MAT_MENU_CONTENT,
-        _MatMenuContentBase,
         MatMenuContent
     }
 }
@@ -73,7 +71,6 @@ declare namespace i4 {
         MAT_MENU_SCROLL_STRATEGY,
         MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER,
         MENU_PANEL_TOP_PADDING,
-        _MatMenuTriggerBase,
         MatMenuTrigger
     }
 }
@@ -110,27 +107,7 @@ export declare const MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER: {
     useFactory: typeof MAT_MENU_SCROLL_STRATEGY_FACTORY;
 };
 
-export declare class MatMenu extends _MatMenuBase {
-    protected _elevationPrefix: string;
-    protected _baseElevation: number;
-    constructor(elementRef: ElementRef<HTMLElement>, ngZone: NgZone, defaultOptions: MatMenuDefaultOptions);
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatMenu, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatMenu, "mat-menu", ["matMenu"], {}, {}, never, ["*"], false, never>;
-}
-
-/**
- * Animations used by the mat-menu component.
- * Animation duration and timing values are based on:
- * https://material.io/guidelines/components/menus.html#menus-usage
- * @docs-private
- */
-export declare const matMenuAnimations: {
-    readonly transformMenu: AnimationTriggerMetadata;
-    readonly fadeInItems: AnimationTriggerMetadata;
-};
-
-/** Base class with all of the `MatMenu` functionality. */
-export declare class _MatMenuBase implements AfterContentInit, MatMenuPanel<MatMenuItem>, OnInit, OnDestroy {
+export declare class MatMenu implements AfterContentInit, MatMenuPanel<MatMenuItem>, OnInit, OnDestroy {
     private _elementRef;
     private _ngZone;
     private _changeDetectorRef?;
@@ -139,8 +116,8 @@ export declare class _MatMenuBase implements AfterContentInit, MatMenuPanel<MatM
     private _yPosition;
     private _firstItemFocusSubscription?;
     private _previousElevation;
-    protected _elevationPrefix: string;
-    protected _baseElevation: number;
+    private _elevationPrefix;
+    private _baseElevation;
     /** All items inside the menu. Includes items nested inside another menu. */
     _allItems: QueryList<MatMenuItem>;
     /** Only the direct descendant menu items. */
@@ -280,17 +257,23 @@ export declare class _MatMenuBase implements AfterContentInit, MatMenuPanel<MatM
      * when it comes to maintaining the item order.
      */
     private _updateDirectDescendants;
-    static ɵfac: i0.ɵɵFactoryDeclaration<_MatMenuBase, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatMenuBase, never, never, { "backdropClass": { "alias": "backdropClass"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "xPosition": { "alias": "xPosition"; "required": false; }; "yPosition": { "alias": "yPosition"; "required": false; }; "overlapTrigger": { "alias": "overlapTrigger"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "panelClass": { "alias": "class"; "required": false; }; "classList": { "alias": "classList"; "required": false; }; }, { "closed": "closed"; "close": "close"; }, ["lazyContent", "_allItems", "items"], never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatMenu, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatMenu, "mat-menu", ["matMenu"], { "backdropClass": { "alias": "backdropClass"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "xPosition": { "alias": "xPosition"; "required": false; }; "yPosition": { "alias": "yPosition"; "required": false; }; "overlapTrigger": { "alias": "overlapTrigger"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "panelClass": { "alias": "class"; "required": false; }; "classList": { "alias": "classList"; "required": false; }; }, { "closed": "closed"; "close": "close"; }, ["lazyContent", "_allItems", "items"], ["*"], false, never>;
 }
 
-/** Menu content that will be rendered lazily once the menu is opened. */
-export declare class MatMenuContent extends _MatMenuContentBase {
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatMenuContent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatMenuContent, "ng-template[matMenuContent]", never, {}, {}, never, never, false, never>;
-}
+/**
+ * Animations used by the mat-menu component.
+ * Animation duration and timing values are based on:
+ * https://material.io/guidelines/components/menus.html#menus-usage
+ * @docs-private
+ */
+export declare const matMenuAnimations: {
+    readonly transformMenu: AnimationTriggerMetadata;
+    readonly fadeInItems: AnimationTriggerMetadata;
+};
 
-export declare abstract class _MatMenuContentBase implements OnDestroy {
+/** Menu content that will be rendered lazily once the menu is opened. */
+export declare class MatMenuContent implements OnDestroy {
     private _template;
     private _componentFactoryResolver;
     private _appRef;
@@ -319,8 +302,8 @@ export declare abstract class _MatMenuContentBase implements OnDestroy {
      */
     detach(): void;
     ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<_MatMenuContentBase, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatMenuContentBase, never, never, {}, {}, never, never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatMenuContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatMenuContent, "ng-template[matMenuContent]", never, {}, {}, never, never, false, never>;
 }
 
 /** Default `mat-menu` options that can be overridden. */
@@ -430,12 +413,7 @@ export declare interface MatMenuPanel<T = any> {
 }
 
 /** Directive applied to an element that should trigger a `mat-menu`. */
-export declare class MatMenuTrigger extends _MatMenuTriggerBase {
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatMenuTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatMenuTrigger, "[mat-menu-trigger-for], [matMenuTriggerFor]", ["matMenuTrigger"], {}, {}, never, never, false, never>;
-}
-
-export declare abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy {
+export declare class MatMenuTrigger implements AfterContentInit, OnDestroy {
     private _overlay;
     private _element;
     private _viewContainerRef;
@@ -579,8 +557,8 @@ export declare abstract class _MatMenuTriggerBase implements AfterContentInit, O
     private _handleHover;
     /** Gets the portal that should be attached to the overlay. */
     private _getPortal;
-    static ɵfac: i0.ɵɵFactoryDeclaration<_MatMenuTriggerBase, [null, null, null, null, { optional: true; }, { optional: true; self: true; }, { optional: true; }, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatMenuTriggerBase, never, never, { "_deprecatedMatMenuTriggerFor": { "alias": "mat-menu-trigger-for"; "required": false; }; "menu": { "alias": "matMenuTriggerFor"; "required": false; }; "menuData": { "alias": "matMenuTriggerData"; "required": false; }; "restoreFocus": { "alias": "matMenuTriggerRestoreFocus"; "required": false; }; }, { "menuOpened": "menuOpened"; "onMenuOpen": "onMenuOpen"; "menuClosed": "menuClosed"; "onMenuClose": "onMenuClose"; }, never, never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatMenuTrigger, [null, null, null, null, { optional: true; }, { optional: true; self: true; }, { optional: true; }, null, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatMenuTrigger, "[mat-menu-trigger-for], [matMenuTriggerFor]", ["matMenuTrigger"], { "_deprecatedMatMenuTriggerFor": { "alias": "mat-menu-trigger-for"; "required": false; }; "menu": { "alias": "matMenuTriggerFor"; "required": false; }; "menuData": { "alias": "matMenuTriggerData"; "required": false; }; "restoreFocus": { "alias": "matMenuTriggerRestoreFocus"; "required": false; }; }, { "menuOpened": "menuOpened"; "onMenuOpen": "onMenuOpen"; "menuClosed": "menuClosed"; "onMenuClose": "onMenuClose"; }, never, never, false, never>;
 }
 
 /**

package/menu/testing/index.d.ts

@@ -1,31 +1,20 @@
 import { BaseHarnessFilters } from '@angular/cdk/testing';
-import { ComponentHarness } from '@angular/cdk/testing';
 import { ComponentHarnessConstructor } from '@angular/cdk/testing';
 import { ContentContainerComponentHarness } from '@angular/cdk/testing';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { HarnessPredicate } from '@angular/cdk/testing';
 
 /** Harness for interacting with an MDC-based mat-menu in tests. */
-export declare class MatMenuHarness extends _MatMenuHarnessBase<typeof MatMenuItemHarness, MatMenuItemHarness, MenuItemHarnessFilters> {
+export declare class MatMenuHarness extends ContentContainerComponentHarness<string> {
+    private _documentRootLocator;
     /** The selector for the host element of a `MatMenu` instance. */
     static hostSelector: string;
-    protected _itemClass: typeof MatMenuItemHarness;
     /**
      * Gets a `HarnessPredicate` that can be used to search for a menu with specific attributes.
      * @param options Options for filtering which menu instances are considered a match.
      * @return a `HarnessPredicate` configured with the given options.
      */
     static with<T extends MatMenuHarness>(this: ComponentHarnessConstructor<T>, options?: MenuHarnessFilters): HarnessPredicate<T>;
-}
-
-export declare abstract class _MatMenuHarnessBase<ItemType extends ComponentHarnessConstructor<Item> & {
-    with: (options?: ItemFilters) => HarnessPredicate<Item>;
-}, Item extends ComponentHarness & {
-    click(): Promise<void>;
-    getSubmenu(): Promise<_MatMenuHarnessBase<ItemType, Item, ItemFilters> | null>;
-}, ItemFilters extends BaseHarnessFilters> extends ContentContainerComponentHarness<string> {
-    private _documentRootLocator;
-    protected abstract _itemClass: ItemType;
     /** Whether the menu is disabled. */
     isDisabled(): Promise<boolean>;
     /** Whether the menu is open. */
@@ -46,7 +35,7 @@ export declare abstract class _MatMenuHarnessBase<ItemType extends ComponentHarn
      * Gets a list of `MatMenuItemHarness` representing the items in the menu.
      * @param filters Optionally filters which menu items are included.
      */
-    getItems(filters?: Omit<ItemFilters, 'ancestor'>): Promise<Item[]>;
+    getItems(filters?: Omit<MenuItemHarnessFilters, 'ancestor'>): Promise<MatMenuItemHarness[]>;
     /**
      * Clicks an item in the menu, and optionally continues clicking items in subsequent sub-menus.
      * @param itemFilter A filter used to represent which item in the menu should be clicked. The
@@ -55,7 +44,7 @@ export declare abstract class _MatMenuHarnessBase<ItemType extends ComponentHarn
      *     sub-menus. The first item in the sub-menu matching the corresponding filter in
      *     `subItemFilters` will be clicked.
      */
-    clickItem(itemFilter: Omit<ItemFilters, 'ancestor'>, ...subItemFilters: Omit<ItemFilters, 'ancestor'>[]): Promise<void>;
+    clickItem(itemFilter: Omit<MenuItemHarnessFilters, 'ancestor'>, ...subItemFilters: Omit<MenuItemHarnessFilters, 'ancestor'>[]): Promise<void>;
     protected getRootHarnessLoader(): Promise<HarnessLoader>;
     /** Gets the menu panel associated with this menu. */
     private _getMenuPanel;
@@ -63,21 +52,15 @@ export declare abstract class _MatMenuHarnessBase<ItemType extends ComponentHarn
     private _getPanelId;
 }
 
-/** Harness for interacting with an MDC-based mat-menu-item in tests. */
-export declare class MatMenuItemHarness extends _MatMenuItemHarnessBase<typeof MatMenuHarness, MatMenuHarness> {
+export declare class MatMenuItemHarness extends ContentContainerComponentHarness<string> {
     /** The selector for the host element of a `MatMenuItem` instance. */
     static hostSelector: string;
-    protected _menuClass: typeof MatMenuHarness;
     /**
      * Gets a `HarnessPredicate` that can be used to search for a menu item with specific attributes.
      * @param options Options for filtering which menu item instances are considered a match.
      * @return a `HarnessPredicate` configured with the given options.
      */
     static with<T extends MatMenuItemHarness>(this: ComponentHarnessConstructor<T>, options?: MenuItemHarnessFilters): HarnessPredicate<T>;
-}
-
-export declare abstract class _MatMenuItemHarnessBase<MenuType extends ComponentHarnessConstructor<Menu>, Menu extends ComponentHarness> extends ContentContainerComponentHarness<string> {
-    protected abstract _menuClass: MenuType;
     /** Whether the menu is disabled. */
     isDisabled(): Promise<boolean>;
     /** Gets the text of the menu item. */
@@ -93,7 +76,7 @@ export declare abstract class _MatMenuItemHarnessBase<MenuType extends Component
     /** Whether this item has a submenu. */
     hasSubmenu(): Promise<boolean>;
     /** Gets the submenu associated with this menu item, or null if none. */
-    getSubmenu(): Promise<Menu | null>;
+    getSubmenu(): Promise<MatMenuHarness | null>;
 }
 
 /** A set of criteria that can be used to filter a list of `MatMenuHarness` instances. */