@angular/material-experimental 14.0.0-next.8 → 14.0.0-rc.1

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

@@ -1,8 +1,43 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-export * from './public-api';
+import { AsyncFactoryFn } from '@angular/cdk/testing';
+import { ComponentHarnessConstructor } from '@angular/cdk/testing';
+import { HarnessPredicate } from '@angular/cdk/testing';
+import { _MatRadioButtonHarnessBase } from '@angular/material/radio/testing';
+import { _MatRadioGroupHarnessBase } from '@angular/material/radio/testing';
+import { RadioButtonHarnessFilters } from '@angular/material/radio/testing';
+import { RadioGroupHarnessFilters } from '@angular/material/radio/testing';
+import { TestElement } from '@angular/cdk/testing';
+
+/** Harness for interacting with an MDC-based mat-radio-button in tests. */
+export declare class MatRadioButtonHarness extends _MatRadioButtonHarnessBase {
+    /** The selector for the host element of a `MatRadioButton` instance. */
+    static hostSelector: string;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a radio button with specific
+     * attributes.
+     * @param options Options for filtering which radio button instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with<T extends MatRadioButtonHarness>(this: ComponentHarnessConstructor<T>, options?: RadioButtonHarnessFilters): HarnessPredicate<T>;
+    protected _textLabel: AsyncFactoryFn<TestElement>;
+    protected _clickLabel: AsyncFactoryFn<TestElement>;
+}
+
+/** Harness for interacting with an MDC-based mat-radio-group in tests. */
+export declare class MatRadioGroupHarness extends _MatRadioGroupHarnessBase<typeof MatRadioButtonHarness, MatRadioButtonHarness, RadioButtonHarnessFilters> {
+    /** The selector for the host element of a `MatRadioGroup` instance. */
+    static hostSelector: string;
+    protected _buttonClass: typeof MatRadioButtonHarness;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a radio group with specific
+     * attributes.
+     * @param options Options for filtering which radio group instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with<T extends MatRadioGroupHarness>(this: ComponentHarnessConstructor<T>, options?: RadioGroupHarnessFilters): HarnessPredicate<T>;
+}
+
+export { RadioButtonHarnessFilters }
+
+export { RadioGroupHarnessFilters }
+
+export { }

package/mdc-select/_select-theme.scss

@@ -1,10 +1,10 @@
+@use '@angular/material' as mat;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/menu-surface' as mdc-menu-surface;
 @use '@material/list/evolution-mixins' as mdc-list;
 @use '@material/typography' as mdc-typography;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/theming/theming';
 
 // Gets the color to use for some text that is highlighted while a select has focus.
 @function _get-mdc-focused-text-color($palette) {
@@ -12,7 +12,7 @@
 }
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
     $disabled-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38);
@@ -62,8 +62,8 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($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-menu-surface.core-styles(mdc-helpers.$mat-typography-styles-query);
 
@@ -80,11 +80,11 @@
 @mixin density($config-or-theme) {}
 
 @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-mdc-select') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-select') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

package/mdc-select/index.d.ts

@@ -1,8 +1,111 @@
+import { AfterViewInit } from '@angular/core';
+import { AnimationTriggerMetadata } from '@angular/animations';
+import { CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { ConnectedPosition } from '@angular/cdk/overlay';
+import { ElementRef } from '@angular/core';
+import * as i0 from '@angular/core';
+import * as i2 from '@angular/common';
+import * as i3 from '@angular/cdk/overlay';
+import * as i4 from '@angular/material-experimental/mdc-core';
+import * as i5 from '@angular/cdk/scrolling';
+import * as i6 from '@angular/material-experimental/mdc-form-field';
+import { MAT_SELECT_CONFIG } from '@angular/material/select';
+import { MAT_SELECT_SCROLL_STRATEGY } from '@angular/material/select';
+import { MAT_SELECT_SCROLL_STRATEGY_PROVIDER } from '@angular/material/select';
+import { MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY } from '@angular/material/select';
+import { MAT_SELECT_TRIGGER } from '@angular/material/select';
+import { MatOptgroup } from '@angular/material-experimental/mdc-core';
+import { MatOption } from '@angular/material-experimental/mdc-core';
+import { _MatSelectBase } from '@angular/material/select';
+import { MatSelectConfig } from '@angular/material/select';
+import { OnInit } from '@angular/core';
+import { QueryList } from '@angular/core';
+
+declare namespace i1 {
+    export {
+        MatSelectChange,
+        MatSelectTrigger,
+        MatSelect
+    }
+}
+
+export { MAT_SELECT_CONFIG }
+
+export { MAT_SELECT_SCROLL_STRATEGY }
+
+export { MAT_SELECT_SCROLL_STRATEGY_PROVIDER }
+
+export { MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY }
+
+export { MAT_SELECT_TRIGGER }
+
+export declare class MatSelect extends _MatSelectBase<MatSelectChange> implements OnInit, AfterViewInit {
+    options: QueryList<MatOption>;
+    optionGroups: QueryList<MatOptgroup>;
+    customTrigger: MatSelectTrigger;
+    _positions: ConnectedPosition[];
+    /** Ideal origin for the overlay panel. */
+    _preferredOverlayOrigin: CdkOverlayOrigin | ElementRef | undefined;
+    /** Width of the overlay panel. */
+    _overlayWidth: number;
+    get shouldLabelFloat(): boolean;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    open(): void;
+    close(): void;
+    /** Scrolls the active option into view. */
+    protected _scrollOptionIntoView(index: number): void;
+    protected _positioningSettled(): void;
+    protected _getChangeEvent(value: any): MatSelectChange;
+    /** Gets how wide the overlay panel should be. */
+    private _getOverlayWidth;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatSelect, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSelect, "mat-select", ["matSelect"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; }, {}, ["customTrigger", "options", "optionGroups"], ["mat-select-trigger", "*"], false>;
+}
+
 /**
- * @license
- * Copyright Google LLC All Rights Reserved.
+ * The following are all the animations for the mat-select component, with each
+ * const containing the metadata for one animation.
  *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * The values below match the implementation of the AngularJS Material mat-select animation.
+ * @docs-private
  */
-export * from './public-api';
+export declare const matSelectAnimations: {
+    /**
+     * @deprecated No longer being used. To be removed.
+     * @breaking-change 12.0.0
+     */
+    readonly transformPanelWrap: AnimationTriggerMetadata;
+    readonly transformPanel: AnimationTriggerMetadata;
+};
+
+/** Change event object that is emitted when the select value has changed. */
+export declare class MatSelectChange {
+    /** Reference to the select that emitted the change event. */
+    source: MatSelect;
+    /** Current value of the select that emitted the event. */
+    value: any;
+    constructor(
+    /** Reference to the select that emitted the change event. */
+    source: MatSelect, 
+    /** Current value of the select that emitted the event. */
+    value: any);
+}
+
+export { MatSelectConfig }
+
+export declare class MatSelectModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatSelectModule, [typeof i1.MatSelect, typeof i1.MatSelectTrigger], [typeof i2.CommonModule, typeof i3.OverlayModule, typeof i4.MatOptionModule, typeof i4.MatCommonModule], [typeof i5.CdkScrollableModule, typeof i6.MatFormFieldModule, typeof i1.MatSelect, typeof i1.MatSelectTrigger, typeof i4.MatOptionModule, typeof i4.MatCommonModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MatSelectModule>;
+}
+
+/**
+ * Allows the user to customize the trigger that is displayed when the select has a value.
+ */
+export declare class MatSelectTrigger {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelectTrigger, "mat-select-trigger", never, {}, {}, never, never, false>;
+}
+
+export { }

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

@@ -1,8 +1,28 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-export * from './public-api';
+import { BaseHarnessFilters } from '@angular/cdk/testing';
+import { ComponentHarnessConstructor } from '@angular/cdk/testing';
+import { HarnessPredicate } from '@angular/cdk/testing';
+import { MatOptgroupHarness } from '@angular/material-experimental/mdc-core/testing';
+import { MatOptionHarness } from '@angular/material-experimental/mdc-core/testing';
+import { _MatSelectHarnessBase } from '@angular/material/select/testing';
+import { OptgroupHarnessFilters } from '@angular/material-experimental/mdc-core/testing';
+import { OptionHarnessFilters } from '@angular/material-experimental/mdc-core/testing';
+
+/** Harness for interacting with an MDC-based mat-select in tests. */
+export declare class MatSelectHarness extends _MatSelectHarnessBase<typeof MatOptionHarness, MatOptionHarness, OptionHarnessFilters, typeof MatOptgroupHarness, MatOptgroupHarness, OptgroupHarnessFilters> {
+    static hostSelector: string;
+    protected _prefix: string;
+    protected _optionClass: typeof MatOptionHarness;
+    protected _optionGroupClass: typeof MatOptgroupHarness;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a select with specific attributes.
+     * @param options Options for filtering which select instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with<T extends MatSelectHarness>(this: ComponentHarnessConstructor<T>, options?: SelectHarnessFilters): HarnessPredicate<T>;
+}
+
+/** A set of criteria that can be used to filter a list of `MatSelectHarness` instances. */
+export declare interface SelectHarnessFilters extends BaseHarnessFilters {
+}
+
+export { }

package/mdc-slide-toggle/_slide-toggle-theme.scss

@@ -1,12 +1,11 @@
 @use 'sass:map';
 @use 'sass:color';
+@use '@angular/material' as mat;
 @use '@material/switch/switch-theme' as mdc-switch-theme;
 @use '@material/theme/color-palette' as mdc-color-palette;
 @use '@material/form-field' as mdc-form-field;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/theming/theming';
-@use '../../material/core/theming/palette';
 
 // Generates all color mapping for the properties that only change based on the theme.
 @function _get-theme-base-map($is-dark) {
@@ -70,10 +69,10 @@
 }
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $primary: theming.get-color-from-palette(map.get($config, primary));
-  $accent: theming.get-color-from-palette(map.get($config, accent));
-  $warn: theming.get-color-from-palette(map.get($config, warn));
+  $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));
   $is-dark: map.get($config, is-dark);
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
@@ -99,27 +98,27 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($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-form-field.core-styles($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($config-or-theme);
   .mat-mdc-slide-toggle {
     @include mdc-switch-theme.theme(mdc-switch-theme.density($density-scale));
   }
 }
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
 
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-slide-toggle') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-slide-toggle') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

package/mdc-slide-toggle/index.d.ts

@@ -1,8 +1,83 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-export * from './public-api';
+import { ChangeDetectorRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { ElementRef } from '@angular/core';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import * as i0 from '@angular/core';
+import * as i2 from '@angular/material/slide-toggle';
+import * as i3 from '@angular/material-experimental/mdc-core';
+import * as i4 from '@angular/common';
+import { InjectionToken } from '@angular/core';
+import { MAT_SLIDE_TOGGLE_REQUIRED_VALIDATOR } from '@angular/material/slide-toggle';
+import { _MatSlideToggleBase } from '@angular/material/slide-toggle';
+import { MatSlideToggleRequiredValidator } from '@angular/material/slide-toggle';
+import { ThemePalette } from '@angular/material-experimental/mdc-core';
+import { Type } from '@angular/core';
+
+declare namespace i1 {
+    export {
+        MAT_SLIDE_TOGGLE_VALUE_ACCESSOR,
+        MatSlideToggleChange,
+        MatSlideToggle
+    }
+}
+
+/** Injection token to be used to override the default options for `mat-slide-toggle`. */
+export declare const MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS: InjectionToken<MatSlideToggleDefaultOptions>;
+
+export { MAT_SLIDE_TOGGLE_REQUIRED_VALIDATOR }
+
+/** @docs-private */
+export declare const MAT_SLIDE_TOGGLE_VALUE_ACCESSOR: {
+    provide: InjectionToken<readonly ControlValueAccessor[]>;
+    useExisting: Type<any>;
+    multi: boolean;
+};
+
+export declare class MatSlideToggle extends _MatSlideToggleBase<MatSlideToggleChange> {
+    /** Unique ID for the label element. */
+    _labelId: string;
+    /** Returns the unique id for the visual hidden button. */
+    get buttonId(): string;
+    /** Reference to the MDC switch element. */
+    _switchElement: ElementRef<HTMLElement>;
+    constructor(elementRef: ElementRef, focusMonitor: FocusMonitor, changeDetectorRef: ChangeDetectorRef, tabIndex: string, defaults: MatSlideToggleDefaultOptions, animationMode?: string);
+    /** Method being called whenever the underlying button is clicked. */
+    _handleClick(): void;
+    /** Focuses the slide-toggle. */
+    focus(): void;
+    protected _createChangeEvent(isChecked: boolean): MatSlideToggleChange;
+    _getAriaLabelledBy(): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatSlideToggle, [null, null, null, { attribute: "tabindex"; }, null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSlideToggle, "mat-slide-toggle", ["matSlideToggle"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; "tabIndex": "tabIndex"; }, {}, never, ["*"], false>;
+}
+
+/** Change event object emitted by a MatSlideToggle. */
+export declare class MatSlideToggleChange {
+    /** The source MatSlideToggle of the event. */
+    source: MatSlideToggle;
+    /** The new `checked` value of the MatSlideToggle. */
+    checked: boolean;
+    constructor(
+    /** The source MatSlideToggle of the event. */
+    source: MatSlideToggle, 
+    /** The new `checked` value of the MatSlideToggle. */
+    checked: boolean);
+}
+
+/** Default `mat-slide-toggle` options that can be overridden. */
+export declare interface MatSlideToggleDefaultOptions {
+    /** Whether toggle action triggers value changes in slide toggle. */
+    disableToggleValue?: boolean;
+    /** Default color for slide toggles. */
+    color?: ThemePalette;
+}
+
+export declare class MatSlideToggleModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatSlideToggleModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatSlideToggleModule, [typeof i1.MatSlideToggle], [typeof i2._MatSlideToggleRequiredValidatorModule, typeof i3.MatCommonModule, typeof i3.MatRippleModule, typeof i4.CommonModule], [typeof i2._MatSlideToggleRequiredValidatorModule, typeof i1.MatSlideToggle, typeof i3.MatCommonModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MatSlideToggleModule>;
+}
+
+export { MatSlideToggleRequiredValidator }
+
+export { }

package/mdc-slide-toggle/testing/index.d.ts

@@ -1,8 +1,27 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-export * from './public-api';
+import { AsyncFactoryFn } from '@angular/cdk/testing';
+import { ComponentHarnessConstructor } from '@angular/cdk/testing';
+import { HarnessPredicate } from '@angular/cdk/testing';
+import { _MatSlideToggleHarnessBase } from '@angular/material/slide-toggle/testing';
+import { SlideToggleHarnessFilters } from '@angular/material/slide-toggle/testing';
+import { TestElement } from '@angular/cdk/testing';
+
+/** Harness for interacting with a MDC-based mat-slide-toggle in tests. */
+export declare class MatSlideToggleHarness extends _MatSlideToggleHarnessBase {
+    protected _nativeElement: AsyncFactoryFn<TestElement>;
+    static hostSelector: string;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a slide-toggle w/ specific attributes.
+     * @param options Options for narrowing the search:
+     *   - `selector` finds a slide-toggle whose host element matches the given selector.
+     *   - `label` finds a slide-toggle with specific label text.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with<T extends MatSlideToggleHarness>(this: ComponentHarnessConstructor<T>, options?: SlideToggleHarnessFilters): HarnessPredicate<T>;
+    toggle(): Promise<void>;
+    isRequired(): Promise<boolean>;
+    isChecked(): Promise<boolean>;
+}
+
+export { SlideToggleHarnessFilters }
+
+export { }

package/mdc-slider/_slider-theme.scss

@@ -1,15 +1,14 @@
 @use 'sass:map';
 
+@use '@angular/material' as mat;
 @use '@material/slider/slider' as mdc-slider;
 @use '@material/slider/slider-theme';
 @use '@material/theme/variables' as theme-variables;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/ripple/ripple-theme';
-@use '../../material/core/theming/theming';
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-theme($config) {
     @include mdc-slider.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
 
@@ -47,8 +46,8 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($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-slider.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
   }
@@ -57,11 +56,11 @@
 @mixin density($config-or-theme) {}
 
 @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-mdc-slider') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-slider') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);
@@ -112,7 +111,7 @@
     $query: mdc-helpers.$mat-theme-styles-query
   );
   $ripple-color: map.get(theme-variables.$property-values, $color);
-  @include ripple-theme.color((
+  @include mat.ripple-color((
     foreground: (
       base: $ripple-color
     ),