@angular/material-experimental 14.2.1 → 15.0.0-next.0

package/mdc-dialog/index.d.ts

@@ -1,217 +0,0 @@
-import { AutoFocusTarget } from '@angular/material/dialog';
-import { DialogPosition } from '@angular/material/dialog';
-import { DialogRole } from '@angular/material/dialog';
-import { ElementRef } from '@angular/core';
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { FocusTrapFactory } from '@angular/cdk/a11y';
-import * as i0 from '@angular/core';
-import * as i3 from '@angular/cdk/dialog';
-import * as i4 from '@angular/cdk/overlay';
-import * as i5 from '@angular/cdk/portal';
-import * as i6 from '@angular/material-experimental/mdc-core';
-import { InjectionToken } from '@angular/core';
-import { Injector } from '@angular/core';
-import { InteractivityChecker } from '@angular/cdk/a11y';
-import { Location as Location_2 } from '@angular/common';
-import { MAT_DIALOG_SCROLL_STRATEGY_FACTORY } from '@angular/material/dialog';
-import { matDialogAnimations } from '@angular/material/dialog';
-import { _MatDialogBase } from '@angular/material/dialog';
-import { MatDialogConfig } from '@angular/material/dialog';
-import { _MatDialogContainerBase } from '@angular/material/dialog';
-import { MatDialogRef as MatDialogRef_2 } from '@angular/material/dialog';
-import { MatDialogState } from '@angular/material/dialog';
-import { NgZone } from '@angular/core';
-import { OnChanges } from '@angular/core';
-import { OnDestroy } from '@angular/core';
-import { OnInit } from '@angular/core';
-import { Overlay } from '@angular/cdk/overlay';
-import { OverlayContainer } from '@angular/cdk/overlay';
-import { OverlayRef } from '@angular/cdk/overlay';
-import { ScrollStrategy } from '@angular/cdk/overlay';
-import { SimpleChanges } from '@angular/core';
-
-export { AutoFocusTarget }
-
-export { DialogPosition }
-
-export { DialogRole }
-
-declare namespace i1 {
-    export {
-        MatDialogContainer
-    }
-}
-
-declare namespace i2 {
-    export {
-        MatDialogClose,
-        MatDialogTitle,
-        MatDialogContent,
-        MatDialogActions
-    }
-}
-
-/** Injection token that can be used to access the data that was passed in to a dialog. */
-export declare const MAT_DIALOG_DATA: InjectionToken<any>;
-
-/** Injection token that can be used to specify default dialog options. */
-export declare const MAT_DIALOG_DEFAULT_OPTIONS: InjectionToken<MatDialogConfig<any>>;
-
-/** Injection token that determines the scroll handling while the dialog is open. */
-export declare const MAT_DIALOG_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
-
-export { MAT_DIALOG_SCROLL_STRATEGY_FACTORY }
-
-/** @docs-private */
-export declare const MAT_DIALOG_SCROLL_STRATEGY_PROVIDER: {
-    provide: InjectionToken<() => ScrollStrategy>;
-    deps: (typeof Overlay)[];
-    useFactory: typeof MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY;
-};
-
-/** @docs-private */
-export declare function MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): () => ScrollStrategy;
-
-/**
- * Service to open Material Design modal dialogs.
- */
-export declare class MatDialog extends _MatDialogBase<MatDialogContainer> {
-    constructor(overlay: Overlay, injector: Injector, 
-    /**
-     * @deprecated `_location` parameter to be removed.
-     * @breaking-change 10.0.0
-     */
-    location: Location_2, defaultOptions: MatDialogConfig, scrollStrategy: any, parentDialog: MatDialog, 
-    /**
-     * @deprecated No longer used. To be removed.
-     * @breaking-change 15.0.0
-     */
-    overlayContainer: OverlayContainer, 
-    /**
-     * @deprecated No longer used. To be removed.
-     * @breaking-change 14.0.0
-     */
-    animationMode?: 'NoopAnimations' | 'BrowserAnimations');
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatDialog, [null, null, { optional: true; }, { optional: true; }, null, { optional: true; skipSelf: true; }, null, { optional: true; }]>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<MatDialog>;
-}
-
-/**
- * Container for the bottom action buttons in a dialog.
- * Stays fixed to the bottom when scrolling.
- */
-export declare class MatDialogActions {
-    /**
-     * Horizontal alignment of action buttons.
-     */
-    align?: 'start' | 'center' | 'end';
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogActions, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogActions, "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", never, { "align": "align"; }, {}, never, never, false>;
-}
-
-export { matDialogAnimations }
-
-/**
- * Button that will close the current dialog.
- */
-export declare class MatDialogClose implements OnInit, OnChanges {
-    dialogRef: MatDialogRef<any>;
-    private _elementRef;
-    private _dialog;
-    /** Screen-reader label for the button. */
-    ariaLabel: string;
-    /** Default to "button" to prevents accidental form submits. */
-    type: 'submit' | 'button' | 'reset';
-    /** Dialog close input. */
-    dialogResult: any;
-    _matDialogClose: any;
-    constructor(dialogRef: MatDialogRef<any>, _elementRef: ElementRef<HTMLElement>, _dialog: MatDialog);
-    ngOnInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
-    _onButtonClick(event: MouseEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogClose, [{ optional: true; }, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogClose, "[mat-dialog-close], [matDialogClose]", ["matDialogClose"], { "ariaLabel": "aria-label"; "type": "type"; "dialogResult": "mat-dialog-close"; "_matDialogClose": "matDialogClose"; }, {}, never, never, false>;
-}
-
-export { MatDialogConfig }
-
-/**
- * Internal component that wraps user-provided dialog content in a MDC dialog.
- * @docs-private
- */
-export declare class MatDialogContainer extends _MatDialogContainerBase implements OnDestroy {
-    private _animationMode?;
-    /** Whether animations are enabled. */
-    _animationsEnabled: boolean;
-    /** Host element of the dialog container component. */
-    private _hostElement;
-    /** Duration of the dialog open animation. */
-    private _openAnimationDuration;
-    /** Duration of the dialog close animation. */
-    private _closeAnimationDuration;
-    /** Current timer for dialog animations. */
-    private _animationTimer;
-    constructor(elementRef: ElementRef, focusTrapFactory: FocusTrapFactory, document: any, dialogConfig: MatDialogConfig, checker: InteractivityChecker, ngZone: NgZone, overlayRef: OverlayRef, _animationMode?: string | undefined, focusMonitor?: FocusMonitor);
-    protected _contentAttached(): void;
-    ngOnDestroy(): void;
-    /** Starts the dialog open animation if enabled. */
-    private _startOpenAnimation;
-    /**
-     * Starts the exit animation of the dialog if enabled. This method is
-     * called by the dialog ref.
-     */
-    _startExitAnimation(): void;
-    /**
-     * Completes the dialog open by clearing potential animation classes, trapping
-     * focus and emitting an opened event.
-     */
-    private _finishDialogOpen;
-    /**
-     * Completes the dialog close by clearing potential animation classes, restoring
-     * focus and emitting a closed event.
-     */
-    private _finishDialogClose;
-    /** Clears all dialog animation classes. */
-    private _clearAnimationClasses;
-    private _waitForAnimationToComplete;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogContainer, [null, null, { optional: true; }, null, null, null, null, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatDialogContainer, "mat-dialog-container", never, {}, {}, never, never, false>;
-}
-
-/**
- * Scrollable content container of a dialog.
- */
-export declare class MatDialogContent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogContent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogContent, "[mat-dialog-content], mat-dialog-content, [matDialogContent]", never, {}, {}, never, never, false>;
-}
-
-export declare class MatDialogModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatDialogModule, [typeof i1.MatDialogContainer, typeof i2.MatDialogClose, typeof i2.MatDialogTitle, typeof i2.MatDialogActions, typeof i2.MatDialogContent], [typeof i3.DialogModule, typeof i4.OverlayModule, typeof i5.PortalModule, typeof i6.MatCommonModule], [typeof i1.MatDialogContainer, typeof i2.MatDialogClose, typeof i2.MatDialogTitle, typeof i2.MatDialogContent, typeof i2.MatDialogActions, typeof i6.MatCommonModule]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<MatDialogModule>;
-}
-
-/**
- * Reference to a dialog opened via the MatDialog service.
- */
-export declare class MatDialogRef<T, R = any> extends MatDialogRef_2<T, R> {
-}
-
-export { MatDialogState }
-
-/**
- * Title of a dialog element. Stays fixed to the top of the dialog when scrolling.
- */
-export declare class MatDialogTitle implements OnInit {
-    private _dialogRef;
-    private _elementRef;
-    private _dialog;
-    id: string;
-    constructor(_dialogRef: MatDialogRef<any>, _elementRef: ElementRef<HTMLElement>, _dialog: MatDialog);
-    ngOnInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogTitle, [{ optional: true; }, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogTitle, "[mat-dialog-title], [matDialogTitle]", ["matDialogTitle"], { "id": "id"; }, {}, never, never, false>;
-}
-
-export { }

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

@@ -1,47 +0,0 @@
-import { AsyncFactoryFn } from '@angular/cdk/testing';
-import { ComponentHarnessConstructor } from '@angular/cdk/testing';
-import { ComponentType } from '@angular/cdk/overlay';
-import { DialogHarnessFilters } from '@angular/material/dialog/testing';
-import { HarnessPredicate } from '@angular/cdk/testing';
-import { MatDialog } from '@angular/material-experimental/mdc-dialog';
-import { MatDialogConfig } from '@angular/material-experimental/mdc-dialog';
-import { MatDialogContainer } from '@angular/material-experimental/mdc-dialog';
-import { _MatDialogHarnessBase } from '@angular/material/dialog/testing';
-import { _MatTestDialogOpenerBase } from '@angular/material/dialog/testing';
-import { TestElement } from '@angular/cdk/testing';
-
-export { DialogHarnessFilters }
-
-/** Harness for interacting with a standard `MatDialog` in tests. */
-export declare class MatDialogHarness extends _MatDialogHarnessBase {
-    /** The selector for the host element of a `MatDialog` instance. */
-    static hostSelector: string;
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for a dialog with specific attributes.
-     * @param options Options for filtering which dialog instances are considered a match.
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with<T extends MatDialogHarness>(this: ComponentHarnessConstructor<T>, options?: DialogHarnessFilters): HarnessPredicate<T>;
-    protected _title: AsyncFactoryFn<TestElement | null>;
-    protected _content: AsyncFactoryFn<TestElement | null>;
-    protected _actions: AsyncFactoryFn<TestElement | null>;
-}
-
-/** Selectors for different sections of the mat-dialog that can contain user content. */
-export declare const enum MatDialogSection {
-    TITLE = ".mat-mdc-dialog-title",
-    CONTENT = ".mat-mdc-dialog-content",
-    ACTIONS = ".mat-mdc-dialog-actions"
-}
-
-/** Test component that immediately opens a dialog when bootstrapped. */
-export declare class MatTestDialogOpener<T = unknown, R = unknown> extends _MatTestDialogOpenerBase<MatDialogContainer, T, R> {
-    constructor(dialog: MatDialog);
-    /** Static method that prepares this class to open the provided component. */
-    static withComponent<T = unknown, R = unknown>(component: ComponentType<T>, config?: MatDialogConfig): ComponentType<MatTestDialogOpener<T, R>>;
-}
-
-export declare class MatTestDialogOpenerModule {
-}
-
-export { }

package/mdc-form-field/_form-field-density.scss

@@ -1,119 +0,0 @@
-@use 'sass:map';
-@use 'sass:math';
-@use '@angular/material' as mat;
-@use '@material/density' as mdc-density;
-@use '@material/textfield' as mdc-textfield;
-
-@use './form-field-sizing';
-
-// Mixin that sets the vertical spacing for the infix container of filled form fields.
-// We need to apply spacing to the infix container because we removed the input padding
-// provided by MDC in order to support arbitrary form-field controls.
-@mixin _infix-vertical-spacing-filled($with-label-padding, $no-label-padding) {
-  .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix {
-    padding-top: map.get($with-label-padding, top);
-    padding-bottom: map.get($with-label-padding, bottom);
-  }
-
-  .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea)
-  .mat-mdc-form-field-infix {
-    padding-top: map.get($no-label-padding, top);
-    padding-bottom: map.get($no-label-padding, bottom);
-  }
-}
-
-// Mixin that sets the vertical spacing for the infix container of outlined form fields.
-// We need to apply spacing to the infix container because we removed the input padding
-// provided by MDC in order to support arbitrary form-field controls.
-@mixin _infix-vertical-spacing-outlined($padding) {
-  .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
-    padding-top: map.get($padding, top);
-    padding-bottom: map.get($padding, bottom);
-  }
-}
-
-// Mixin that includes the density styles for form fields. MDC provides their own density
-// styles for MDC text-field which we cannot use. MDC relies on input elements to stretch
-// vertically when the height is reduced as per density scale. This doesn't work for our
-// form field since we support custom form field controls without a fixed height. Instead, we
-// provide spacing that makes arbitrary controls align as specified in the Material Design
-// specification. In order to support density, we need to adjust the vertical spacing to be
-// based on the density scale.
-@mixin private-form-field-density($config-or-theme) {
-  $density-scale: mat.get-density-config($config-or-theme);
-  // Height of the form field that is based on the current density scale.
-  $height: mdc-density.prop-value(
-    $density-config: mdc-textfield.$density-config,
-    $density-scale: $density-scale,
-    $property-name: height,
-  );
-
-  // Whether floating labels for filled form fields should be hidden. MDC hides the label in
-  // their density styles when the height decreases too much. We match their density styles.
-  $hide-filled-floating-label: $height < mdc-textfield.$minimum-height-for-filled-label;
-  // We computed the desired height of the form-field using the density configuration. The
-  // spec only describes vertical spacing/alignment in non-dense mode. This means that we
-  // cannot update the spacing to explicit numbers based on the density scale. Instead, we
-  // determine the height reduction and equally subtract it from the default `top` and `bottom`
-  // padding that is provided by the Material Design specification.
-  $vertical-deduction: math.div(mdc-textfield.$height - $height, 2);
-  // Map that describes the padding for form-fields with label.
-  $with-label-padding: (
-    top: form-field-sizing.$mat-form-field-with-label-input-padding-top - $vertical-deduction,
-    bottom: form-field-sizing.$mat-form-field-with-label-input-padding-bottom - $vertical-deduction,
-  );
-  // Map that describes the padding for form-fields without label.
-  $no-label-padding: (
-    top: form-field-sizing.$mat-form-field-no-label-padding-top - $vertical-deduction,
-    bottom: form-field-sizing.$mat-form-field-no-label-padding-bottom - $vertical-deduction,
-  );
-
-  // We add a minimum height to the infix container in order to ensure that custom controls have
-  // the same default vertical space as text-field inputs (with respect to the vertical padding).
-  .mat-mdc-form-field-infix {
-    min-height: $height;
-  }
-
-  // By default, MDC aligns the label using percentage. This will be overwritten based
-  // on whether a textarea is used. This is not possible in our implementation of the
-  // form-field because we do not know what type of form-field control is set up. Hence
-  // we always use a fixed position for the label. This does not have any implications.
-  .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-floating-label {
-    top: math.div($height, 2);
-  }
-
-  // For the outline appearance, we re-create the active floating label transform. This is
-  // necessary because the transform for docked floating labels can be updated to account for
-  // the width of prefix container.
-  .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded
-  .mdc-floating-label--float-above {
-    --mat-mdc-form-field-label-transform: translateY(
-            -#{mdc-textfield.get-outlined-label-position-y($height)})
-            scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
-    transform: var(--mat-mdc-form-field-label-transform);
-  }
-
-  // Add vertical spacing to the infix to ensure that outlined form fields have their controls
-  // aligned as if there is no label. This is done similarly in MDC and is specified in the
-  // Material Design specification. Outline form fields position the control as if there is no
-  // label. This is because the label overflows the form-field and doesn't need space at the top.
-  @include _infix-vertical-spacing-outlined($no-label-padding);
-
-  // MDC hides labels for filled form fields when the form field height decreases. We match
-  // this behavior in our custom density styles.
-  @if $hide-filled-floating-label {
-    // Update the spacing for filled form fields to account for the hidden floating label.
-    @include _infix-vertical-spacing-filled(
-          $no-label-padding, $no-label-padding);
-    .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-floating-label {
-        display: none;
-    }
-  }
-  @else {
-    // By default, filled form fields align their controls differently based on whether there
-    // is a label or not. MDC does this too, but we cannot rely on their styles as we support
-    // arbitrary form field controls and MDC only applies their spacing to the `<input>` elements.
-    @include _infix-vertical-spacing-filled(
-          $with-label-padding, $no-label-padding);
-  }
-}

package/mdc-form-field/_form-field-focus-overlay.scss

@@ -1,34 +0,0 @@
-@use '@angular/material' as mat;
-@use '@material/ripple/functions' as mdc-ripple-functions;
-@use '@material/textfield' as mdc-textfield;
-
-// MDC text-field uses `@material/ripple` in order to show a focus and hover effect for
-// text-fields. This is unnecessary because the ripples bring in a lot of unnecessary
-// styles and runtime code while the actual goal for the text-field is simply showing a
-// focus and hover effect. The ripples will unnecessarily provide CSS selectors and JS
-// runtime code for launching interaction ripples at pointer location. This is not needed
-// for the text-field, so we create our own minimal focus overlay styles. Our focus overlay
-// uses the exact same logic to compute the colors as in the default MDC text-field ripples.
-@mixin private-form-field-focus-overlay() {
-  .mat-mdc-form-field-focus-overlay {
-    @include mat.private-fill;
-    opacity: 0;
-  }
-}
-
-@mixin private-form-field-focus-overlay-color() {
-  $focus-opacity: mdc-ripple-functions.states-opacity(mdc-textfield.$ink-color, focus);
-  $hover-opacity: mdc-ripple-functions.states-opacity(mdc-textfield.$ink-color, hover);
-
-  .mat-mdc-form-field-focus-overlay {
-    background-color: mdc-textfield.$ink-color;
-  }
-
-  .mat-mdc-form-field:hover .mat-mdc-form-field-focus-overlay {
-    opacity: $hover-opacity;
-  }
-
-  .mat-mdc-form-field.mat-focused .mat-mdc-form-field-focus-overlay {
-    opacity: $focus-opacity;
-  }
-}

package/mdc-form-field/_form-field-high-contrast.scss

@@ -1,39 +0,0 @@
-@use '@angular/cdk';
-
-@mixin private-form-field-high-contrast() {
-  $focus-indicator-width: 3px;
-  $focus-indicator-style: dashed;
-
-  .mat-form-field-appearance-fill {
-    // The outline of the `fill` appearance is achieved through a background color
-    // which won't be visible in high contrast mode. Add an outline to replace it.
-    .mat-mdc-text-field-wrapper {
-      @include cdk.high-contrast(active, off) {
-        outline: solid 1px;
-      }
-    }
-
-    // Use GreyText for the disabled outline color which will account for the user's configuration.
-    &.mat-form-field-disabled .mat-mdc-text-field-wrapper {
-      @include cdk.high-contrast(active, off) {
-        outline-color: GrayText;
-      }
-    }
-  }
-
-  // If a form field with fill appearance is focused, update the outline to be
-  // dashed and thicker to indicate focus.
-  .mat-form-field-appearance-fill.mat-focused .mat-mdc-text-field-wrapper {
-    @include cdk.high-contrast(active, off) {
-      outline: $focus-indicator-style $focus-indicator-width;
-    }
-  }
-
-  // For form fields with outline appearance, we show a dashed thick border on top
-  // of the solid notched-outline border to indicate focus.
-  .mat-mdc-form-field.mat-focused .mdc-notched-outline {
-    @include cdk.high-contrast(active, off) {
-      border: $focus-indicator-style $focus-indicator-width;
-    }
-  }
-}

package/mdc-form-field/_form-field-native-select.scss

@@ -1,133 +0,0 @@
-@use 'sass:map';
-@use 'sass:math';
-@use '@angular/material' as mat;
-@use '@material/theme/theme-color' as mdc-theme-color;
-
-@use '../mdc-core/mdc-helpers/mdc-helpers';
-
-// Width of the Material Design form-field select arrow.
-$mat-form-field-select-arrow-width: 10px;
-// Height of the Material Design form-field select arrow.
-$mat-form-field-select-arrow-height: 5px;
-// Horizontal padding that needs to be applied to the native select in an form-field so
-// that the absolute positioned arrow does not overlap the select content.
-$mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-width + 5px;
-
-// Mixin that creates styles for native select controls in a form-field.
-@mixin private-form-field-native-select() {
-  // Remove the native select down arrow and ensure that the native appearance
-  // does not conflict with the form-field. e.g. Focus indication of the native
-  // select is undesired since we handle focus as part of the form-field.
-  select.mat-mdc-form-field-input-control {
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    background-color: transparent;
-    display: inline-flex;
-    box-sizing: border-box;
-
-    // By default the cursor does not change when hovering over a select. We want to
-    // change this for non-disabled select elements so that it's more obvious that the
-    // control can be clicked.
-    &:not(:disabled) {
-      cursor: pointer;
-    }
-  }
-
-  // Native select elements with the `matInput` directive should have Material Design
-  // styling. This means that we add an arrow to the form-field that is based on the
-  // Material Design specification. We achieve this by adding a pseudo element to the
-  // form-field infix.
-  .mat-mdc-form-field-type-mat-native-select {
-    .mat-mdc-form-field-infix::after {
-      content: '';
-      width: 0;
-      height: 0;
-      border-left: math.div($mat-form-field-select-arrow-width, 2) solid transparent;
-      border-right: math.div($mat-form-field-select-arrow-width, 2) solid transparent;
-      border-top: $mat-form-field-select-arrow-height solid;
-      position: absolute;
-      right: 0;
-
-      // Make the arrow non-clickable so the user can click on the form control under it.
-      pointer-events: none;
-
-      [dir='rtl'] & {
-        right: auto;
-        left: 0;
-      }
-    }
-
-    // Add padding on the end of the native select so that the content does not
-    // overlap with the Material Design arrow.
-    .mat-mdc-form-field-input-control {
-      padding-right: $mat-form-field-select-horizontal-end-padding;
-      [dir='rtl'] & {
-        padding-right: 0;
-        padding-left: $mat-form-field-select-horizontal-end-padding;
-      }
-    }
-  }
-}
-
-// Gets the color to use for some text that is highlighted while a select has focus.
-@function _get-focused-arrow-color($palette) {
-  @return rgba(mdc-theme-color.prop-value($palette), 0.87);
-}
-
-@mixin private-form-field-native-select-color($config) {
-  @include mdc-helpers.mat-using-mdc-theme($config) {
-    // These values are taken from the MDC select implementation:
-    // https://github.com/material-components/material-components-web/blob/master/packages/mdc-select/_select-theme.scss
-    $dropdown-icon-color: rgba(mdc-theme-color.prop-value(on-surface), 0.54);
-    $disabled-dropdown-icon-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38);
-
-    select.mat-mdc-form-field-input-control:not(.mat-mdc-native-select-inline) {
-      // On dark themes we set the native `select` color to some shade of white,
-      // however the color propagates to all of the `option` elements, which are
-      // always on a white background inside the dropdown, causing them to blend in.
-      // Since we can't change background of the dropdown, we need to explicitly
-      // reset the color of the options to something dark.
-      @if (map.get($config, is-dark)) {
-        option {
-          color: mat.$private-dark-primary-text;
-        }
-
-        option:disabled {
-          color: mat.$private-dark-disabled-text;
-        }
-      }
-    }
-
-    .mat-mdc-form-field-type-mat-native-select {
-      .mat-mdc-form-field-infix::after {
-        color: $dropdown-icon-color;
-      }
-
-      &.mat-focused {
-        &.mat-primary {
-          .mat-mdc-form-field-infix::after {
-            color: _get-focused-arrow-color(primary);
-          }
-        }
-
-        &.mat-accent {
-          .mat-mdc-form-field-infix::after {
-            color: _get-focused-arrow-color(secondary);
-          }
-        }
-
-        &.mat-warn {
-          .mat-mdc-form-field-infix::after {
-            color: _get-focused-arrow-color(error);
-          }
-        }
-      }
-
-      &.mat-form-field-disabled {
-        .mat-mdc-form-field-infix::after {
-          color: $disabled-dropdown-icon-color;
-        }
-      }
-    }
-  }
-}

package/mdc-form-field/_form-field-sizing.scss

@@ -1,40 +0,0 @@
-// Top spacing of the form-field outline. MDC does not have a variable for this
-// and just hard-codes it into their styles.
-$mat-form-field-outline-top-spacing: 12px;
-
-// Infix stretches to fit the container, but naturally wants to be this wide. We set
-// this in order to have a a consistent natural size for the various types of controls
-// that can go in a form field.
-$mat-form-field-default-infix-width: 180px !default;
-
-// Minimum amount of space between start and end hints in the subscript. MDC does not
-// have built-in support for hints.
-$mat-form-field-hint-min-space: 1em !default;
-
-// Vertical spacing of the text-field if there is no label. MDC hard-codes the spacing
-// into their styles, but their spacing variables would not work for our form-field
-// structure anyway. This is because MDC's input elements are larger than the text, and
-// their padding variables are calculated with respect to the vertical empty space of the
-// inputs. We take the explicit numbers provided by the Material Design specification.
-// https://material.io/components/text-fields/#specs
-
-// Vertical spacing of the text-field if there is a label. MDC hard-codes the spacing into
-// their styles, but their spacing variables would not work for our form-field structure anyway.
-// This is because MDC's alignment depends on the input element to expand to full infix height.
-// We allow for arbitrary form controls and support dynamic height, so we manage the control
-// infix alignment through padding on the infix that works for any control. We manually measure
-// spacing as provided by the Material Design specification. The outlined dimensions in the
-// spec section do not match with the text fields shown in the overview or the ones implemented
-// by MDC. Note that we need to account for the input box offset. See above for more context.
-$mat-form-field-with-label-input-padding-top: 24px;
-$mat-form-field-with-label-input-padding-bottom: 8px;
-
-// Vertical spacing of the text-field if there is no label. We manually measure the
-// spacing in the specs. See comment above for padding for text fields with label. The
-// same reasoning applies to the padding for text fields without label.
-$mat-form-field-no-label-padding-bottom: 16px;
-$mat-form-field-no-label-padding-top: 16px;
-
-// The amount of padding between the icon prefix/suffix and the infix.
-// This assumes that the icon will be a 24px square with 12px padding.
-$mat-form-field-icon-prefix-infix-padding: 4px;