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

package/mdc-radio/_radio-theme.scss

@@ -1,110 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/radio/radio-theme' as mdc-radio-theme;
-@use '@material/radio/radio' as mdc-radio;
-@use '@material/form-field' as mdc-form-field;
-@use '../mdc-core/mdc-helpers/mdc-helpers';
-
-@mixin _color-palette($color-palette) {
-  @include mdc-radio-theme.theme((
-    selected-focus-icon-color: $color-palette,
-    selected-hover-icon-color: $color-palette,
-    selected-icon-color: $color-palette,
-    selected-pressed-icon-color: $color-palette,
-  ));
-
-  --mat-mdc-radio-checked-ripple-color: #{$color-palette};
-}
-
-@mixin color($config-or-theme) {
-  $config: mat.get-color-config($config-or-theme);
-  $primary: mat.get-color-from-palette(map.get($config, primary));
-  $accent: mat.get-color-from-palette(map.get($config, accent));
-  $warn: mat.get-color-from-palette(map.get($config, warn));
-  $foreground: map.get($config, foreground);
-
-  @include mdc-helpers.mat-using-mdc-theme($config) {
-    $on-surface: rgba(mdc-theme-color.$on-surface, 0.54);
-    $is-dark: map-get($config, is-dark);
-    $active-border-color: if(
-            $is-dark,
-            mat.get-color-from-palette(mat.$gray-palette, 200),
-            mat.get-color-from-palette(mat.$gray-palette, 900)
-    );
-
-    .mat-mdc-radio-button {
-      @include mdc-form-field.core-styles($query: mdc-helpers.$mat-theme-styles-query);
-      @include mdc-radio-theme.theme((
-        // The disabled colors don't use the `rgba` version, because
-        // MDC applies a separate opacity to disabled buttons.
-        disabled-selected-icon-color: mdc-theme-color.$on-surface,
-        disabled-unselected-icon-color: mdc-theme-color.$on-surface,
-        unselected-focus-icon-color: $active-border-color,
-        unselected-hover-icon-color: $active-border-color,
-        unselected-icon-color: $on-surface,
-        unselected-pressed-icon-color: $on-surface,
-      ));
-
-      --mat-mdc-radio-ripple-color: #{mdc-theme-color.prop-value(on-surface)};
-
-      // MDC should set the disabled color on the label, but doesn't, so we do it here instead.
-      .mdc-radio--disabled + label {
-        color: mat.get-color-from-palette($foreground, disabled-text);
-      }
-
-      &.mat-primary {
-        @include _color-palette($primary);
-      }
-
-      &.mat-accent {
-        @include _color-palette($accent);
-      }
-
-      &.mat-warn {
-        @include _color-palette($warn);
-      }
-    }
-  }
-}
-
-@mixin typography($config-or-theme) {
-  $config: mat.private-typography-to-2018-config(
-      mat.get-typography-config($config-or-theme));
-  @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-radio.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
-    @include mdc-form-field.core-styles($query: mdc-helpers.$mat-typography-styles-query);
-  }
-}
-
-@mixin density($config-or-theme) {
-  $density-scale: mat.get-density-config($config-or-theme);
-  .mat-mdc-radio-button .mdc-radio {
-    @include mdc-radio-theme.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
-  }
-
-  @include mdc-helpers.if-touch-targets-unsupported($density-scale) {
-    .mat-mdc-radio-touch-target {
-      display: none;
-    }
-  }
-}
-
-@mixin theme($theme-or-color-config) {
-  $theme: mat.private-legacy-get-theme($theme-or-color-config);
-  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-radio') {
-    $color: mat.get-color-config($theme);
-    $density: mat.get-density-config($theme);
-    $typography: mat.get-typography-config($theme);
-
-    @if $color != null {
-      @include color($color);
-    }
-    @if $density != null {
-      @include density($density);
-    }
-    @if $typography != null {
-      @include typography($typography);
-    }
-  }
-}

package/mdc-radio/index.d.ts

@@ -1,72 +0,0 @@
-import { ChangeDetectorRef } from '@angular/core';
-import { ElementRef } from '@angular/core';
-import { FocusMonitor } from '@angular/cdk/a11y';
-import * as i0 from '@angular/core';
-import * as i2 from '@angular/material-experimental/mdc-core';
-import * as i3 from '@angular/common';
-import { InjectionToken } from '@angular/core';
-import { MAT_RADIO_DEFAULT_OPTIONS } from '@angular/material/radio';
-import { MAT_RADIO_DEFAULT_OPTIONS_FACTORY } from '@angular/material/radio';
-import { _MatRadioButtonBase } from '@angular/material/radio';
-import { MatRadioChange } from '@angular/material/radio';
-import { MatRadioDefaultOptions } from '@angular/material/radio';
-import { _MatRadioGroupBase } from '@angular/material/radio';
-import { QueryList } from '@angular/core';
-import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
-
-declare namespace i1 {
-    export {
-        MatRadioChange,
-        MAT_RADIO_DEFAULT_OPTIONS,
-        MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR,
-        MAT_RADIO_GROUP,
-        MatRadioGroup,
-        MatRadioButton
-    }
-}
-
-export { MAT_RADIO_DEFAULT_OPTIONS }
-
-export { MAT_RADIO_DEFAULT_OPTIONS_FACTORY }
-
-/**
- * Injection token that can be used to inject instances of `MatRadioGroup`. It serves as
- * alternative token to the actual `MatRadioGroup` class which could cause unnecessary
- * retention of the class and its component metadata.
- */
-export declare const MAT_RADIO_GROUP: InjectionToken<_MatRadioGroupBase<_MatRadioButtonBase>>;
-
-/**
- * Provider Expression that allows mat-radio-group to register as a ControlValueAccessor. This
- * allows it to support [(ngModel)] and ngControl.
- * @docs-private
- */
-export declare const MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR: any;
-
-export declare class MatRadioButton extends _MatRadioButtonBase {
-    constructor(radioGroup: MatRadioGroup, elementRef: ElementRef, _changeDetector: ChangeDetectorRef, _focusMonitor: FocusMonitor, _radioDispatcher: UniqueSelectionDispatcher, animationMode?: string, _providerOverride?: MatRadioDefaultOptions, tabIndex?: string);
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatRadioButton, [{ optional: true; }, null, null, null, null, { optional: true; }, { optional: true; }, { attribute: "tabindex"; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatRadioButton, "mat-radio-button", ["matRadioButton"], { "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; }, {}, never, ["*"], false>;
-}
-
-export { MatRadioChange }
-
-export { MatRadioDefaultOptions }
-
-/**
- * A group of radio buttons. May contain one or more `<mat-radio-button>` elements.
- */
-export declare class MatRadioGroup extends _MatRadioGroupBase<MatRadioButton> {
-    /** Child radio buttons. */
-    _radios: QueryList<MatRadioButton>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatRadioGroup, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatRadioGroup, "mat-radio-group", ["matRadioGroup"], {}, {}, ["_radios"], never, false>;
-}
-
-export declare class MatRadioModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatRadioModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatRadioModule, [typeof i1.MatRadioGroup, typeof i1.MatRadioButton], [typeof i2.MatCommonModule, typeof i3.CommonModule, typeof i2.MatRippleModule], [typeof i2.MatCommonModule, typeof i1.MatRadioGroup, typeof i1.MatRadioButton]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<MatRadioModule>;
-}
-
-export { }

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

@@ -1,43 +0,0 @@
-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.import.scss

@@ -1,10 +0,0 @@
-@forward '../mdc-core/mdc-helpers/mdc-helpers.import';
-@forward '../mdc-core/mdc-helpers/mdc-helpers';
-@forward 'select-theme' hide color, density, theme, typography;
-@forward 'select-theme' as mat-mdc-select-* hide
-$mat-mdc-select-mdc-select-disabled-dropdown-icon-color,
-$mat-mdc-select-mdc-select-disabled-label-color, $mat-mdc-select-mdc-select-dropdown-icon-color,
-$mat-mdc-select-mdc-select-ink-color, $mat-mdc-select-mdc-select-label-color,
-mat-mdc-select-get-mdc-focused-text-color;
-
-@import '../mdc-core/mdc-helpers/mdc-helpers';

package/mdc-select/_select-theme.scss

@@ -1,100 +0,0 @@
-@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-core/mdc-helpers/mdc-helpers';
-
-// Gets the color to use for some text that is highlighted while a select has focus.
-@function _get-mdc-focused-text-color($palette) {
-  @return rgba(mdc-theme-color.prop-value($palette), 0.87);
-}
-
-@mixin color($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);
-    @include mdc-menu-surface.core-styles(mdc-helpers.$mat-theme-styles-query);
-    @include mdc-list.without-ripple(mdc-helpers.$mat-theme-styles-query);
-
-    .mat-mdc-select-value {
-      color: rgba(mdc-theme-color.prop-value(on-surface), 0.87);
-    }
-
-    .mat-mdc-select-placeholder {
-      color: rgba(mdc-theme-color.prop-value(on-surface), 0.6);
-    }
-
-    .mat-mdc-select-disabled .mat-mdc-select-value {
-      color: $disabled-color;
-    }
-
-    .mat-mdc-select-arrow {
-      color: rgba(mdc-theme-color.prop-value(on-surface), 0.54);
-    }
-
-    .mat-mdc-form-field {
-      &.mat-focused {
-        &.mat-primary .mat-mdc-select-arrow {
-          color: _get-mdc-focused-text-color(primary);
-        }
-
-        &.mat-accent .mat-mdc-select-arrow {
-          color: _get-mdc-focused-text-color(secondary);
-        }
-
-        &.mat-warn .mat-mdc-select-arrow {
-          color: _get-mdc-focused-text-color(error);
-        }
-      }
-
-      .mat-mdc-select.mat-mdc-select-invalid .mat-mdc-select-arrow {
-        color: _get-mdc-focused-text-color(error);
-      }
-
-      .mat-mdc-select.mat-mdc-select-disabled .mat-mdc-select-arrow {
-        color: $disabled-color;
-      }
-    }
-  }
-}
-
-@mixin typography($config-or-theme) {
-  $config: mat.private-typography-to-2018-config(
-      mat.get-typography-config($config-or-theme));
-  @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-menu-surface.core-styles(mdc-helpers.$mat-typography-styles-query);
-
-    .mat-mdc-select-panel {
-      @include mdc-list.list-base(mdc-helpers.$mat-typography-styles-query);
-    }
-
-    .mat-mdc-select {
-      @include mdc-typography.typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
-    }
-  }
-}
-
-@mixin density($config-or-theme) {}
-
-@mixin theme($theme-or-color-config) {
-  $theme: mat.private-legacy-get-theme($theme-or-color-config);
-  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-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);
-    }
-    @if $density != null {
-      @include density($density);
-    }
-    @if $typography != null {
-      @include typography($typography);
-    }
-  }
-}
-

package/mdc-select/index.d.ts

@@ -1,111 +0,0 @@
-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>;
-}
-
-/**
- * The following are all the animations for the mat-select component, with each
- * const containing the metadata for one animation.
- *
- * The values below match the implementation of the AngularJS Material mat-select animation.
- * @docs-private
- */
-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,28 +0,0 @@
-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.import.scss

@@ -1,11 +0,0 @@
-@forward '../mdc-core/mdc-helpers/mdc-helpers.import';
-@forward '../mdc-core/mdc-helpers/mdc-helpers';
-@forward 'slide-toggle-theme' hide color, density, theme, typography;
-@forward 'slide-toggle-theme' as mat-mdc-slide-toggle-* hide
-$mat-mdc-slide-toggle-mdc-switch-baseline-theme-color,
-$mat-mdc-slide-toggle-mdc-switch-disabled-thumb-color,
-$mat-mdc-slide-toggle-mdc-switch-disabled-track-color,
-$mat-mdc-slide-toggle-mdc-switch-toggled-off-thumb-color,
-$mat-mdc-slide-toggle-mdc-switch-toggled-off-track-color;
-
-@import '../mdc-core/mdc-helpers/mdc-helpers';

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

@@ -1,140 +0,0 @@
-@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-core/mdc-helpers/mdc-helpers';
-
-// Generates all color mapping for the properties that only change based on the theme.
-@function _get-theme-base-map($is-dark) {
-  $on-surface: if($is-dark, mdc-color-palette.$grey-100, mdc-color-palette.$grey-800);
-  $hairline: if($is-dark, mdc-color-palette.$grey-500, mdc-color-palette.$grey-300);
-  $on-surface-variant: if($is-dark, mdc-color-palette.$grey-200, mdc-color-palette.$grey-700);
-  $on-surface-state-content: if($is-dark, mdc-color-palette.$grey-50, mdc-color-palette.$grey-900);
-  $disabled-handle-color: mdc-color-palette.$grey-800;
-  $selected-icon-color: mdc-color-palette.$grey-100;
-  $icon-color: if($is-dark, mdc-color-palette.$grey-800, mdc-color-palette.$grey-100);
-
-  @return (
-    disabled-selected-handle-color: $disabled-handle-color,
-    disabled-unselected-handle-color: $disabled-handle-color,
-
-    disabled-selected-track-color: $on-surface,
-    disabled-unselected-track-color: $on-surface,
-    unselected-focus-state-layer-color: $on-surface,
-    unselected-pressed-state-layer-color: $on-surface,
-    unselected-hover-state-layer-color: $on-surface,
-
-    unselected-focus-track-color: $hairline,
-    unselected-hover-track-color: $hairline,
-    unselected-pressed-track-color: $hairline,
-    unselected-track-color: $hairline,
-
-    unselected-focus-handle-color: $on-surface-state-content,
-    unselected-hover-handle-color: $on-surface-state-content,
-    unselected-pressed-handle-color: $on-surface-state-content,
-
-    handle-surface-color: surface,
-    unselected-handle-color: $on-surface-variant,
-
-    selected-icon-color: $selected-icon-color,
-    disabled-selected-icon-color: $icon-color,
-    disabled-unselected-icon-color: $icon-color,
-    unselected-icon-color: $icon-color,
-  );
-}
-
-// Generates the mapping for the properties that change based on the slide toggle color.
-@function _get-theme-color-map($color-palette) {
-  $state-content: color.scale($color-palette, $blackness: 50%);
-  $inverse: color.scale($color-palette, $lightness: 75%);
-
-  @return (
-    selected-focus-state-layer-color: $color-palette,
-    selected-handle-color: $color-palette,
-    selected-hover-state-layer-color: $color-palette,
-    selected-pressed-state-layer-color: $color-palette,
-
-    selected-focus-handle-color: $state-content,
-    selected-hover-handle-color: $state-content,
-    selected-pressed-handle-color: $state-content,
-
-    selected-focus-track-color: $inverse,
-    selected-hover-track-color: $inverse,
-    selected-pressed-track-color: $inverse,
-    selected-track-color: $inverse,
-  );
-}
-
-@mixin color($config-or-theme) {
-  $config: mat.get-color-config($config-or-theme);
-  $primary: mat.get-color-from-palette(map.get($config, primary));
-  $accent: mat.get-color-from-palette(map.get($config, accent));
-  $warn: mat.get-color-from-palette(map.get($config, warn));
-  $is-dark: map.get($config, is-dark);
-  $foreground: map.get($config, foreground);
-
-  @include mdc-helpers.mat-using-mdc-theme($config) {
-    // MDC's switch doesn't support a `color` property. We add support
-    // for it by adding a CSS class for accent and warn style.
-    .mat-mdc-slide-toggle {
-      @include mdc-form-field.core-styles($query: mdc-helpers.$mat-theme-styles-query);
-      @include mdc-switch-theme.theme(_get-theme-base-map($is-dark));
-
-      // MDC should set the disabled color on the label, but doesn't, so we do it here instead.
-      .mdc-switch--disabled + label {
-        color: mat.get-color-from-palette($foreground, disabled-text);
-      }
-
-      &.mat-primary {
-        @include mdc-switch-theme.theme(_get-theme-color-map($primary));
-      }
-
-      &.mat-accent {
-        @include mdc-switch-theme.theme(_get-theme-color-map($accent));
-      }
-
-      &.mat-warn {
-        @include mdc-switch-theme.theme(_get-theme-color-map($warn));
-      }
-    }
-  }
-}
-
-@mixin typography($config-or-theme) {
-  $config: mat.private-typography-to-2018-config(
-      mat.get-typography-config($config-or-theme));
-  @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-form-field.core-styles($query: mdc-helpers.$mat-typography-styles-query);
-  }
-}
-
-@mixin density($config-or-theme) {
-  $density-scale: mat.get-density-config($config-or-theme);
-  .mat-mdc-slide-toggle {
-    @include mdc-switch-theme.theme(mdc-switch-theme.density($density-scale));
-  }
-}
-
-@mixin theme($theme-or-color-config) {
-  $theme: mat.private-legacy-get-theme($theme-or-color-config);
-
-  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-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);
-    }
-    @if $density != null {
-      @include density($density);
-    }
-    @if $typography != null {
-      @include typography($typography);
-    }
-  }
-}
-