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

package/mdc-checkbox/_checkbox-theme.scss

@@ -1,122 +0,0 @@
-@use '@angular/material' as mat;
-@use '@material/checkbox/checkbox' as mdc-checkbox;
-@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
-@use '@material/form-field' as mdc-form-field;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/theme/theme';
-@use 'sass:map';
-@use 'sass:color';
-
-@use '../mdc-core/mdc-helpers/mdc-helpers';
-@use './checkbox-private';
-
-// Apply ripple colors to the MatRipple element and the MDC ripple element when the
-// checkbox is selected.
-@mixin _selected-ripple-colors($theme, $mdc-color) {
-  .mdc-checkbox--selected ~ {
-    .mat-mdc-checkbox-ripple {
-      @include mat.ripple-color((
-          foreground: (
-              base: mdc-theme-color.prop-value($mdc-color)
-          ),
-      ));
-    }
-
-    .mdc-checkbox__ripple {
-      background: $theme;
-    }
-  }
-}
-
-@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) {
-    .mat-mdc-checkbox {
-      @include mdc-form-field.core-styles($query: mdc-helpers.$mat-theme-styles-query);
-      @include mat.ripple-color((
-        foreground: (
-          base: mdc-theme-color.prop-value(on-surface)
-        ),
-      ));
-
-      .mdc-checkbox__ripple {
-        background: mdc-theme-color.prop-value(on-surface);
-      }
-
-      // MDC's checkbox doesn't support a `color` property. We add support for it by adding a CSS
-      // class for accent and warn style, and applying the appropriate overrides below. Since we
-      // don't use MDC's ripple, we also need to set the color for our replacement ripple.
-      &.mat-primary {
-        @include checkbox-private.private-checkbox-styles-with-color($config, $primary, primary);
-        @include _selected-ripple-colors($primary, primary);
-      }
-
-      &.mat-accent {
-        @include checkbox-private.private-checkbox-styles-with-color($config, $accent, secondary);
-        @include _selected-ripple-colors($accent, secondary);
-      }
-
-      &.mat-warn {
-        @include checkbox-private.private-checkbox-styles-with-color($config, $warn, error);
-        @include _selected-ripple-colors($warn, error);
-      }
-    }
-
-    .mat-mdc-checkbox-disabled label {
-      // MDC should set the disabled color on the label, but doesn't, so we do it here instead.
-      color: mat.get-color-from-palette($foreground, disabled-text);
-    }
-  }
-}
-
-@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-checkbox.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);
-
-  @include mdc-helpers.disable-fallback-declarations {
-    .mat-mdc-checkbox .mdc-checkbox {
-      @include mdc-checkbox-theme.density(
-        $density-scale,
-        $query: mdc-helpers.$mat-base-styles-query
-      );
-    }
-
-    @include mdc-helpers.if-touch-targets-unsupported($density-scale) {
-      .mat-mdc-checkbox-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-checkbox') {
-    $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-checkbox/index.d.ts

@@ -1,87 +0,0 @@
-import { CanColor } from '@angular/material-experimental/mdc-core';
-import { CanDisable } from '@angular/material-experimental/mdc-core';
-import { ChangeDetectorRef } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
-import { ElementRef } from '@angular/core';
-import * as i0 from '@angular/core';
-import * as i2 from '@angular/material-experimental/mdc-core';
-import * as i3 from '@angular/material/checkbox';
-import { MAT_CHECKBOX_DEFAULT_OPTIONS } from '@angular/material/checkbox';
-import { MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY } from '@angular/material/checkbox';
-import { MAT_CHECKBOX_REQUIRED_VALIDATOR } from '@angular/material/checkbox';
-import { _MatCheckboxBase } from '@angular/material/checkbox';
-import { MatCheckboxClickAction } from '@angular/material/checkbox';
-import { MatCheckboxDefaultOptions } from '@angular/material/checkbox';
-import { MatCheckboxRequiredValidator } from '@angular/material/checkbox';
-import { _MatCheckboxRequiredValidatorModule } from '@angular/material/checkbox';
-import { NgZone } from '@angular/core';
-import { TransitionCheckState } from '@angular/material/checkbox';
-
-declare namespace i1 {
-    export {
-        MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR,
-        MatCheckboxChange,
-        MatCheckbox
-    }
-}
-
-export declare const MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR: any;
-
-export { MAT_CHECKBOX_DEFAULT_OPTIONS }
-
-export { MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY }
-
-export { MAT_CHECKBOX_REQUIRED_VALIDATOR }
-
-export declare class MatCheckbox extends _MatCheckboxBase<MatCheckboxChange> implements ControlValueAccessor, CanColor, CanDisable {
-    protected _animationClasses: {
-        uncheckedToChecked: string;
-        uncheckedToIndeterminate: string;
-        checkedToUnchecked: string;
-        checkedToIndeterminate: string;
-        indeterminateToChecked: string;
-        indeterminateToUnchecked: string;
-    };
-    constructor(elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, ngZone: NgZone, tabIndex: string, animationMode?: string, options?: MatCheckboxDefaultOptions);
-    /** Focuses the checkbox. */
-    focus(): void;
-    protected _createChangeEvent(isChecked: boolean): MatCheckboxChange;
-    protected _getAnimationTargetElement(): HTMLInputElement;
-    _onInputClick(): void;
-    /**
-     *  Prevent click events that come from the `<label/>` element from bubbling. This prevents the
-     *  click handler on the host from triggering twice when clicking on the `<label/>` element. After
-     *  the click event on the `<label/>` propagates, the browsers dispatches click on the associated
-     *  `<input/>`. By preventing clicks on the label by bubbling, we ensure only one click event
-     *  bubbles when the label is clicked.
-     */
-    _preventBubblingFromLabel(event: MouseEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatCheckbox, [null, null, null, { attribute: "tabindex"; }, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatCheckbox, "mat-checkbox", ["matCheckbox"], { "disableRipple": "disableRipple"; "color": "color"; "tabIndex": "tabIndex"; }, {}, never, ["*"], false>;
-}
-
-/** Change event object emitted by MatCheckbox. */
-export declare class MatCheckboxChange {
-    /** The source MatCheckbox of the event. */
-    source: MatCheckbox;
-    /** The new `checked` value of the checkbox. */
-    checked: boolean;
-}
-
-export { MatCheckboxClickAction }
-
-export { MatCheckboxDefaultOptions }
-
-export declare class MatCheckboxModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatCheckboxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatCheckboxModule, [typeof i1.MatCheckbox], [typeof i2.MatCommonModule, typeof i2.MatRippleModule, typeof i3._MatCheckboxRequiredValidatorModule], [typeof i1.MatCheckbox, typeof i2.MatCommonModule, typeof i3._MatCheckboxRequiredValidatorModule]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<MatCheckboxModule>;
-}
-
-export { MatCheckboxRequiredValidator }
-
-export { _MatCheckboxRequiredValidatorModule }
-
-export { TransitionCheckState }
-
-export { }

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

@@ -1,28 +0,0 @@
-import { AsyncFactoryFn } from '@angular/cdk/testing';
-import { CheckboxHarnessFilters } from '@angular/material/checkbox/testing';
-import { ComponentHarnessConstructor } from '@angular/cdk/testing';
-import { HarnessPredicate } from '@angular/cdk/testing';
-import { _MatCheckboxHarnessBase } from '@angular/material/checkbox/testing';
-import { TestElement } from '@angular/cdk/testing';
-
-export { CheckboxHarnessFilters }
-
-/** Harness for interacting with a MDC-based mat-checkbox in tests. */
-export declare class MatCheckboxHarness extends _MatCheckboxHarnessBase {
-    static hostSelector: string;
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for a checkbox with specific attributes.
-     * @param options Options for narrowing the search:
-     *   - `selector` finds a checkbox whose host element matches the given selector.
-     *   - `label` finds a checkbox with specific label text.
-     *   - `name` finds a checkbox with specific name.
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with<T extends MatCheckboxHarness>(this: ComponentHarnessConstructor<T>, options?: CheckboxHarnessFilters): HarnessPredicate<T>;
-    protected _input: AsyncFactoryFn<TestElement>;
-    protected _label: AsyncFactoryFn<TestElement>;
-    private _inputContainer;
-    toggle(): Promise<void>;
-}
-
-export { }

package/mdc-chips/_chips-theme.import.scss

@@ -1,8 +0,0 @@
-@forward '../mdc-core/mdc-helpers/mdc-helpers.import';
-@forward '../mdc-core/mdc-helpers/mdc-helpers';
-@forward 'chips-theme' hide color, density, theme, typography;
-@forward 'chips-theme' as mat-mdc-chips-* hide $mat-mdc-chips-mdc-chips-fill-color-default,
-$mat-mdc-chips-mdc-chips-icon-color, $mat-mdc-chips-mdc-chips-ink-color-default,
-mat-mdc-chips-selected-color;
-
-@import '../mdc-core/mdc-helpers/mdc-helpers';

package/mdc-chips/_chips-theme.scss

@@ -1,117 +0,0 @@
-@use '@angular/material' as mat;
-@use '@material/chips/chip-theme' as mdc-chip-theme;
-@use '@material/chips/chip-set' as mdc-chip-set;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/theme/color-palette' as mdc-color-palette;
-@use '@material/typography' as mdc-typography;
-@use 'sass:color';
-@use 'sass:map';
-
-@use '../mdc-core/mdc-helpers/mdc-helpers';
-
-// Customizes the appearance of a chip. Note that ideally we would be doing this using the
-// `theme-styles` mixin, however it has the following problems:
-// 1. Some of MDC's base styles have **very** high specificity. E.g. setting the background of a
-// non-selected, enabled chip uses a selector like `.chip:not(.selected):not(.disabled)` instead of
-// just `.chip`. This specificity increase has a ripple effect over all other components that are
-// built on top of ours, making overrides extremely difficult and brittle.
-// 2. Including the individual mixins allows us to avoid a lot of unnecessary CSS (~35kb in the
-// dev app theme).
-@mixin _chip-variant($background, $foreground) {
-  @include mdc-chip-theme.container-color($background);
-  @include mdc-chip-theme.icon-color($foreground);
-  @include mdc-chip-theme.trailing-action-color($foreground);
-  @include mdc-chip-theme.checkmark-color($foreground);
-  @include mdc-chip-theme.text-label-color($foreground);
-
-  // Technically the avatar is only supposed to have an image, but we also allow for icons.
-  // Set the color so the icons inherit the correct color.
-  .mat-mdc-chip-avatar {
-    color: $foreground;
-  }
-}
-
-@mixin _colored-chip($palette) {
-  $background: mat.get-color-from-palette($palette);
-  $foreground: mat.get-color-from-palette($palette, default-contrast);
-
-  &.mat-mdc-chip-selected,
-  &.mat-mdc-chip-highlighted {
-    @include _chip-variant($background, $foreground);
-  }
-}
-
-@mixin color($config-or-theme) {
-  $config: mat.get-color-config($config-or-theme);
-  $primary: map.get($config, primary);
-  $accent: map.get($config, accent);
-  $warn: map.get($config, warn);
-  $foreground: map.get($config, foreground);
-  $is-dark: map.get($config, is-dark);
-
-  @include mdc-helpers.mat-using-mdc-theme($config) {
-    .mat-mdc-standard-chip {
-      @include _chip-variant(
-        color.mix(mdc-theme-color.prop-value(on-surface), mdc-theme-color.prop-value(surface), 12%),
-        if($is-dark, mdc-color-palette.$grey-50, mdc-color-palette.$grey-900)
-      );
-
-      &.mat-primary {
-        @include _colored-chip($primary);
-      }
-
-      &.mat-accent {
-        @include _colored-chip($accent);
-      }
-
-      &.mat-warn {
-        @include _colored-chip($warn);
-      }
-    }
-  }
-
-  .mat-mdc-chip-focus-overlay {
-    background: map.get($foreground, base);
-  }
-}
-
-@mixin typography($config-or-theme) {
-  $config: mat.private-typography-to-2018-config(
-      mat.get-typography-config($config-or-theme));
-  @include mdc-chip-set.core-styles($query: mdc-helpers.$mat-typography-styles-query);
-  @include mdc-helpers.mat-using-mdc-typography($config) {
-    // Note that we don't go through MDC's typography mixin, because it assigns the styles to
-    // an inner element which makes it difficult for clients to customize. Instead we apply the
-    // same styles ourselves to the root.
-    .mat-mdc-standard-chip {
-      @include mdc-typography.typography(body2, $query: mdc-helpers.$mat-typography-styles-query);
-    }
-  }
-}
-
-@mixin density($config-or-theme) {
-  $density-scale: mat.get-density-config($config-or-theme);
-  .mat-mdc-chip {
-    @include mdc-chip-theme.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
-  }
-}
-
-@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-chips') {
-    $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);
-    }
-  }
-}
-