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

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

@@ -1,83 +0,0 @@
-
-@use '@angular/material' as mat;
-@use '@material/textfield' as mdc-textfield;
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/typography' as mdc-typography;
-@use '@material/textfield/variables' as mdc-textfield-variables;
-
-@use './form-field-sizing';
-@use '../mdc-core/mdc-helpers/mdc-helpers';
-
-@mixin private-form-field-subscript() {
-  // Wrapper for the hints and error messages.
-  .mat-mdc-form-field-subscript-wrapper {
-    box-sizing: border-box;
-    width: 100%;
-    position: relative;
-  }
-
-  .mat-mdc-form-field-hint-wrapper,
-  .mat-mdc-form-field-error-wrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    padding: 0 mdc-textfield-variables.$padding-horizontal;
-  }
-
-  .mat-mdc-form-field-subscript-dynamic-size {
-    .mat-mdc-form-field-hint-wrapper,
-    .mat-mdc-form-field-error-wrapper {
-      position: static;
-    }
-  }
-
-  .mat-mdc-form-field-bottom-align::before {
-    content: '';
-    display: inline-block;
-    height: 16px;
-  }
-
-  .mat-mdc-form-field-bottom-align.mat-mdc-form-field-subscript-dynamic-size::before {
-    content: unset;
-  }
-
-  .mat-mdc-form-field-hint-end {
-    order: 1;
-  }
-
-  // Clears the floats on the hints. This is necessary for the hint animation to work.
-  .mat-mdc-form-field-hint-wrapper {
-    display: flex;
-  }
-
-  // Spacer used to make sure start and end hints have enough space between them.
-  .mat-mdc-form-field-hint-spacer {
-    flex: 1 0 form-field-sizing.$mat-form-field-hint-min-space;
-  }
-
-  // Single error message displayed beneath the form field underline.
-  .mat-mdc-form-field-error {
-    display: block;
-  }
-}
-
-@mixin private-form-field-subscript-color() {
-  // MDC does not have built-in error treatment.
-  .mat-mdc-form-field-error {
-    @include mdc-theme.prop(color, mdc-textfield.$error);
-  }
-}
-
-// We need to define our own typography for the subscript because we don't include MDC's
-// helper text in our MDC based form field
-@mixin private-form-field-subscript-typography($config-or-theme) {
-  $config: mat.get-typography-config($config-or-theme);
-
-  // The subscript wrapper has a minimum height to avoid that the form-field
-  // jumps when hints or errors are displayed.
-  .mat-mdc-form-field-subscript-wrapper,
-  .mat-mdc-form-field-bottom-align::before {
-    @include mdc-typography.typography(caption, $query: mdc-helpers.$mat-typography-styles-query);
-  }
-}

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

@@ -1,148 +0,0 @@
-@use '@angular/material' as mat;
-@use '@material/textfield' as mdc-textfield;
-@use '@material/floating-label' as mdc-floating-label;
-@use '@material/notched-outline' as mdc-notched-outline;
-@use '@material/line-ripple' as mdc-line-ripple;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/typography/typography' as mdc-typography;
-
-@use '../mdc-core/mdc-helpers/mdc-helpers';
-@use './form-field-density';
-@use './form-field-subscript';
-@use './form-field-focus-overlay';
-@use './form-field-native-select';
-@use './mdc-text-field-theme-variable-refresh';
-
-
-// Mixin that overwrites the default MDC text-field color styles to be based on
-// the given theme palette. The MDC text-field is styled using `primary` by default.
-@mixin _color-styles($palette-name,
-  $query: mdc-helpers.$mat-theme-styles-query) {
-  $orig-focused-label-color: mdc-textfield.$focused-label-color;
-  mdc-textfield.$focused-label-color: rgba(mdc-theme-color.prop-value($palette-name), 0.87);
-
-  @include mdc-textfield.caret-color($palette-name, $query);
-  @include mdc-textfield.line-ripple-color($palette-name, $query);
-
-  .mdc-text-field--focused {
-    @include mdc-textfield.focused_($query);
-  }
-
-  .mdc-text-field--invalid {
-    @include mdc-textfield.invalid_($query);
-  }
-
-  .mdc-text-field--outlined {
-    @include mdc-textfield.focused-outline-color($palette-name, $query);
-  }
-
-  mdc-textfield.$focused-label-color: $orig-focused-label-color;
-}
-
-@mixin color($config-or-theme) {
-  $config: mat.get-color-config($config-or-theme);
-  @include mdc-helpers.mat-using-mdc-theme($config) {
-    @include mdc-text-field-theme-variable-refresh.private-text-field-refresh-theme-variables() {
-      @include mdc-textfield.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
-      @include mdc-floating-label.core-styles($query: mdc-helpers.$mat-theme-styles-query);
-      @include mdc-notched-outline.core-styles($query: mdc-helpers.$mat-theme-styles-query);
-      @include mdc-line-ripple.core-styles($query: mdc-helpers.$mat-theme-styles-query);
-      @include form-field-subscript.private-form-field-subscript-color();
-      @include form-field-focus-overlay.private-form-field-focus-overlay-color();
-      @include form-field-native-select.private-form-field-native-select-color($config);
-
-      .mat-mdc-form-field.mat-accent {
-        @include _color-styles(secondary);
-      }
-
-      .mat-mdc-form-field.mat-warn {
-        @include _color-styles(error);
-      }
-
-      // This fixes an issue where the notch appears to be thicker than the rest of the outline when
-      // zoomed in on Chrome. The border inconsistency seems to be some kind of rendering artifact
-      // that arises from a combination of the fact that the notch contains text, while the leading
-      // and trailing outline do not, combined with the fact that the border is semi-transparent.
-      // Experimentally, I discovered that adding a transparent left border fixes the inconsistency.
-      // Note: class name is repeated to achieve sufficient specificity over the various MDC states.
-      // (hover, focus, etc.)
-      // TODO(mmalerba): port this fix into MDC
-      .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field {
-        &.mat-mdc-form-field .mdc-notched-outline__notch {
-          border-left: 1px solid transparent;
-        }
-      }
-
-      [dir='rtl'] {
-        .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field {
-          &.mat-mdc-form-field .mdc-notched-outline__notch {
-            border-left: none;
-            border-right: 1px solid transparent;
-          }
-        }
-      }
-    }
-  }
-}
-
-@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-textfield.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
-    @include mdc-floating-label.core-styles($query: mdc-helpers.$mat-typography-styles-query);
-    @include mdc-notched-outline.core-styles($query: mdc-helpers.$mat-typography-styles-query);
-    @include mdc-line-ripple.core-styles($query: mdc-helpers.$mat-typography-styles-query);
-    @include form-field-subscript.private-form-field-subscript-typography($config);
-
-    // MDC uses `subtitle1` for the input value, placeholder and floating label. The spec
-    // shows `body1` for text fields though, so we manually override the typography.
-    // Note: Form controls inherit the typography from the parent form field.
-    .mat-mdc-form-field,
-    .mat-mdc-floating-label {
-      @include mdc-typography.typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
-    }
-
-    // Above, we updated the floating label to use the `body1` typography level. The MDC notched
-    // outline overrides this accidentally (only when the label floats) to a `rem`-based value.
-    // This results in different label widths when floated/docked and ultimately breaks the notch
-    // width as it has been measured in the docked state (where `body1` is applied). We try to
-    // unset these styles set by the `mdc-notched-outline`:
-    // https://github.com/material-components/material-components-web/blob/master/packages/mdc-notched-outline/_mixins.scss#L272-L292.
-    .mat-mdc-form-field .mdc-text-field--outlined {
-      // For the non-upgraded notch label (i.e. when rendered on the server), also
-      // use the correct `body1` typography level.
-      .mdc-floating-label--float-above {
-        font-size: calc(#{
-            mdc-typography.get-size(body1)} * var(--mat-mdc-form-field-floating-label-scale, 0.75));
-      }
-      .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
-        font-size: mdc-typography.get-size(body1);
-      }
-    }
-  }
-}
-
-@mixin density($config-or-theme) {
-  $density-scale: mat.get-density-config($config-or-theme);
-  @include form-field-density.private-form-field-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-form-field') {
-    $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-form-field/_mdc-text-field-structure-overrides.scss

@@ -1,129 +0,0 @@
-@use '@material/textfield/variables' as mdc-textfield-variables;
-
-// Mixin that can be included to override the default MDC text-field
-// styles to fit our needs. See individual comments for context on why
-// certain MDC styles need to be modified.
-@mixin private-text-field-structure-overrides() {
-  // Unset the border set by MDC. We move the border (which serves as the Material Design
-  // text-field bottom line) into its own element. This is necessary because we want the
-  // bottom-line to span across the whole form-field (including prefixes and suffixes). Also
-  // we ensure that font styles are inherited for input elements. We do this because inputs by
-  // default have explicit font styles from the user agent, and we set the desired font styles
-  // in the parent `mat-form-field` element (for better custom form-field control support).
-  // Note: We increase specificity here because the MDC textfield seems to override this,
-  // depending on the CSS order, with an affix selector joint with the input.
-  .mat-mdc-form-field-input-control.mat-mdc-form-field-input-control {
-    font: inherit;
-    border: none;
-  }
-
-  // In order to ensure proper alignment of the floating label, we reset its line-height.
-  // The line-height is not important as the element is absolutely positioned and only has one line
-  // of text.
-  .mat-mdc-form-field .mat-mdc-floating-label.mdc-floating-label {
-    line-height: normal;
-  }
-
-  // Reset the height that MDC sets on native input elements. We cannot rely on their
-  // fixed height as we handle vertical spacing differently. MDC sets a fixed height for
-  // inputs and modifies the baseline so that the textfield matches the spec. This does
-  // not work for us since we support arbitrary form field controls which don't necessarily
-  // use an `input` element. We organize the vertical spacing on the infix container.
-  .mdc-text-field--no-label:not(.mdc-text-field--textarea)
-    .mat-mdc-form-field-input-control.mdc-text-field__input,
-  .mat-mdc-text-field-wrapper .mat-mdc-form-field-input-control {
-    height: auto;
-  }
-
-  // Color inputs are a special case, because setting their height to
-  // `auto` will collapse them. The height value is an arbitrary number
-  // which was extracted from the user agent styles of Chrome and Firefox.
-  .mat-mdc-text-field-wrapper
-    .mat-mdc-form-field-input-control.mdc-text-field__input[type='color'] {
-    height: 23px;
-  }
-
-  // Root element of the mdc-text-field. As explained in the height overwrites above, MDC
-  // sets a default height on the text-field root element. This is not desired since we
-  // want the element to be able to expand as needed.
-  .mat-mdc-text-field-wrapper {
-    height: auto;
-    flex: auto;
-  }
-
-  // The icon prefix/suffix is closer to the edge of the form-field than the infix is in a
-  // form-field with no prefix/suffix. Therefore the standard padding has to be removed when showing
-  // an icon prefix or suffix. We can't rely on MDC's styles for this because we use a different
-  // structure for our form-field in order to support arbitrary height input elements.
-  .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper {
-    padding-left: 0;
-  }
-  .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper {
-    padding-right: 0;
-  }
-  [dir='rtl'] {
-    // Undo the above padding removals which only apply in LTR languages.
-    .mat-mdc-text-field-wrapper {
-      padding-left: mdc-textfield-variables.$padding-horizontal;
-      padding-right: mdc-textfield-variables.$padding-horizontal;
-    }
-    // ...and apply the correct padding resets for RTL languages.
-    .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper {
-      padding-left: 0;
-    }
-    .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper {
-      padding-right: 0;
-    }
-  }
-
-  // The default MDC text-field implementation does not support labels which always float.
-  // MDC only renders the placeholder if the input is focused. We extend this to show the
-  // placeholder if the form-field label is set to always float.
-  // TODO(devversion): consider getting a mixin or variables for this (currently not available).
-  // Stylelint no-prefixes rule disabled because MDC text-field only uses "::placeholder" too.
-  // stylelint-disable-next-line material/no-prefixes
-  .mat-mdc-form-field-label-always-float .mdc-text-field__input::placeholder {
-    transition-delay: 40ms;
-    transition-duration: 110ms;
-    opacity: 1;
-  }
-
-  // Since we moved the horizontal spacing from the input to the form-field flex container
-  // and the MDC floating label tries to account for the horizontal spacing, we need to reset
-  // the shifting since there is no padding the label needs to account for. Note that we do not
-  // want do this for labels in the notched-outline since MDC keeps those labels relative to
-  // the notched outline container, and already applies a specific horizontal spacing which
-  // we do not want to overwrite. *Note*: We need to have increased specificity for this
-  // override because the `right` property will be set with higher specificity in RTL mode.
-  .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .mat-mdc-floating-label {
-    left: auto;
-    right: auto;
-  }
-
-  // MDC sets the input elements in outline appearance to "display: flex". There seems to
-  // be no particular reason why this is needed. We set it to "inline-block", as it otherwise
-  // could shift the baseline.
-  .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-text-field__input {
-    display: inline-block;
-  }
-
-  // As mentioned in the override before, MDC aligns the label using percentage. This means that
-  // MDC tries to offset the label when the parent element changes in the notched-outline. For
-  // example, the outline stroke width changes on focus. Since we updated the label to use a fixed
-  // position, we don't need the vertical offsetting (that will shift the label incorrectly now).
-  // Note: Increased specificity needed here since MDC overwrites the padding on `:focus`.
-  .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field .mdc-notched-outline__notch {
-    padding-top: 0;
-  }
-
-  // Unset the baseline adjustment styles that are applied to the `.mdc-text-field` before
-  // pseudo element. We control the vertical alignment of form field controls using infix
-  // spacing since we support custom form-field controls. Those don't necessarily have an
-  // explicit height that matches with the Material Design specification. If the height isn't
-  // explicitly set to a specific value by MDC, the control will not align correctly vertically.
-  // e.g. No vertical spacing to the bottom-line if the control is too large.
-  .mat-mdc-text-field-wrapper::before {
-    content: none;
-  }
-
-}

package/mdc-form-field/_mdc-text-field-textarea-overrides.scss

@@ -1,36 +0,0 @@
-// MDCs default textarea styles cannot be used because they only apply if a special
-// class is applied to the "mdc-text-field" wrapper. Since we cannot know whether the
-// registered form-field control is a textarea and MDC by default does not have styles
-// for textareas in the fill appearance, we add our own minimal textarea styles
-// which are scoped to the actual textarea element (i.e. not require a class in the
-// text-field wrapper) and integrate better with the any configured appearance.
-
-// Mixin that can be included to override the default MDC text-field styles
-// to properly support textareas.
-@mixin private-text-field-textarea-overrides() {
-  // Ensures that textarea elements inside of the form-field have proper vertical spacing
-  // to account for the floating label. Also ensures that there is no vertical text overflow.
-  // **Note**: Before changing this selector, make sure the `cdk-textarea-autosize` class is
-  // still able to override the `resize` property to `none`.
-  .mat-mdc-form-field-textarea-control {
-    // Set the vertical alignment for textareas inside form fields to be the middle. This
-    // ensures that textareas do not stretch the infix container vertically without having
-    // multiple rows of text. See: https://github.com/angular/components/pull/22089.
-    vertical-align: middle;
-    // Textareas by default also allow users to resize the textarea horizontally. This
-    // causes the textarea to overflow the form-field. We only allow vertical resizing.
-    resize: vertical;
-    box-sizing: border-box;
-    height: auto;
-    // Using padding for textareas causes a bad user experience because the text outside
-    // of the text box will overflow vertically. Also, the vertical spacing for controls
-    // is set through the infix container to allow for arbitrary form-field controls.
-    margin: 0;
-    padding: 0;
-    border: none;
-
-    // By default IE always renders scrollbars on textarea.
-    // This brings it in line with other browsers.
-    overflow: auto;
-  }
-}

package/mdc-form-field/_mdc-text-field-theme-variable-refresh.scss

@@ -1,63 +0,0 @@
-@use '@material/textfield' as mdc-textfield;
-@use '@material/theme/variables' as mdc-theme-variables;
-@use 'sass:color';
-
-// Mixin that refreshes the MDC text-field theming variables. This mixin should be used when
-// the base MDC theming variables have been explicitly updated, but the component specific
-// theming-based variables are still based on the old MDC base theming variables. The mixin
-// restores the previous values for the variables to avoid unexpected global side effects.
-@mixin private-text-field-refresh-theme-variables() {
-  $_disabled-border: mdc-textfield.$disabled-border;
-  mdc-textfield.$disabled-border: rgba(mdc-theme-variables.prop-value(on-surface), 0.06);
-  $_bottom-line-hover: mdc-textfield.$bottom-line-hover;
-  mdc-textfield.$bottom-line-hover: rgba(mdc-theme-variables.prop-value(on-surface), 0.87);
-  $_bottom-line-idle: mdc-textfield.$bottom-line-idle;
-  mdc-textfield.$bottom-line-idle: rgba(mdc-theme-variables.prop-value(on-surface), 0.42);
-  $_label: mdc-textfield.$label;
-  mdc-textfield.$label: rgba(mdc-theme-variables.prop-value(on-surface), 0.6);
-  $_ink-color: mdc-textfield.$ink-color;
-  mdc-textfield.$ink-color: rgba(mdc-theme-variables.prop-value(on-surface), 0.87);
-  $_focused-label-color: mdc-textfield.$focused-label-color;
-  mdc-textfield.$focused-label-color: rgba(mdc-theme-variables.prop-value(primary), 0.87);
-  $_placeholder-ink-color: mdc-textfield.$placeholder-ink-color;
-  mdc-textfield.$placeholder-ink-color: rgba(mdc-theme-variables.prop-value(on-surface), 0.6);
-  $_disabled-label-color: mdc-textfield.$disabled-label-color;
-  mdc-textfield.$disabled-label-color: rgba(mdc-theme-variables.prop-value(on-surface), 0.38);
-  $_disabled-ink-color: mdc-textfield.$disabled-ink-color;
-  mdc-textfield.$disabled-ink-color: rgba(mdc-theme-variables.prop-value(on-surface), 0.38);
-  $_disabled-placeholder-ink-color: mdc-textfield.$disabled-placeholder-ink-color;
-  mdc-textfield.$disabled-placeholder-ink-color:
-      rgba(mdc-theme-variables.prop-value(on-surface), 0.38);
-  $_background: mdc-textfield.$background;
-  mdc-textfield.$background: color.mix(mdc-theme-variables.prop-value(on-surface),
-    mdc-theme-variables.prop-value(surface), 4%);
-  $_disabled-background: mdc-textfield.$disabled-background;
-  mdc-textfield.$disabled-background: color.mix(mdc-theme-variables.prop-value(on-surface),
-    mdc-theme-variables.prop-value(surface), 2%);
-  $_outlined-idle-border: mdc-textfield.$outlined-idle-border;
-  mdc-textfield.$outlined-idle-border: rgba(mdc-theme-variables.prop-value(on-surface), 0.38);
-  $_outlined-disabled-border: mdc-textfield.$outlined-disabled-border;
-  mdc-textfield.$outlined-disabled-border: rgba(mdc-theme-variables.prop-value(on-surface), 0.06);
-  $_outlined-hover-border: mdc-textfield.$outlined-hover-border;
-  mdc-textfield.$outlined-hover-border: rgba(mdc-theme-variables.prop-value(on-surface), 0.87);
-
-  // The content will be generated with the refreshed MDC text-field theming variables.
-  @content;
-
-  // Reset all variables to ensure that this mixin does not cause unexpected side effects.
-  mdc-textfield.$disabled-border: $_disabled-border;
-  mdc-textfield.$bottom-line-hover: $_bottom-line-hover;
-  mdc-textfield.$bottom-line-idle: $_bottom-line-idle;
-  mdc-textfield.$label: $_label;
-  mdc-textfield.$ink-color: $_ink-color;
-  mdc-textfield.$focused-label-color: $_focused-label-color;
-  mdc-textfield.$placeholder-ink-color: $_placeholder-ink-color;
-  mdc-textfield.$disabled-label-color: $_disabled-label-color;
-  mdc-textfield.$disabled-ink-color: $_disabled-ink-color;
-  mdc-textfield.$disabled-placeholder-ink-color: $_disabled-placeholder-ink-color;
-  mdc-textfield.$background: $_background;
-  mdc-textfield.$disabled-background: $_disabled-background;
-  mdc-textfield.$outlined-idle-border: $_outlined-idle-border;
-  mdc-textfield.$outlined-disabled-border: $_outlined-disabled-border;
-  mdc-textfield.$outlined-hover-border: $_outlined-hover-border;
-}