@angular/material 17.0.3 → 17.0.5

package/slider/index.d.ts

@@ -141,7 +141,6 @@ export declare class MatSlider extends _MatSliderMixinBase implements AfterViewI
     /** The radius of the native slider's knob. AFAIK there is no way to avoid hardcoding this. */
     _knobRadius: number;
     _inputPadding: number;
-    _inputOffset: number;
     ngAfterViewInit(): void;
     private _initUINonRange;
     private _initUIRange;
@@ -238,17 +237,6 @@ declare interface _MatSlider {
      * thumb ripple extends past the end of the slider track clickable.
      */
     _inputPadding: number;
-    /**
-     * The offset represents left most translateX of the slider knob. Inversely,
-     * (slider width - offset) = the right most translateX of the slider knob.
-     *
-     * Note:
-     *    * The native slider knob differs from the visual slider. It's knob cannot slide past
-     *      the end of the track AT ALL.
-     *    * The visual slider knob CAN slide past the end of the track slightly. It's knob can slide
-     *      past the end of the track such that it's center lines up with the end of the track.
-     */
-    _inputOffset: number;
     /** The radius of the visual slider's ripple. */
     _rippleRadius: number;
     /** The global configuration for `matRipple` instances. */
@@ -418,6 +406,8 @@ export declare class MatSliderThumb implements _MatSliderThumb, OnDestroy, Contr
     _valuetext: string;
     /** The radius of a native html slider's knob. */
     _knobRadius: number;
+    /** The distance in px from the start of the slider track to the first tick mark. */
+    _tickMarkOffset: number;
     /** Whether user's cursor is currently in a mouse down state on the input. */
     _isActive: boolean;
     /** Whether the input is currently focused (either by tab or after clicking). */
@@ -626,6 +616,7 @@ export declare class MatSliderVisualThumb implements _MatSliderVisualThumb, Afte
     _isValueIndicatorVisible: boolean;
     /** The host native HTML input element. */
     _hostElement: HTMLElement;
+    private _platform;
     constructor(_cdr: ChangeDetectorRef, _ngZone: NgZone, _elementRef: ElementRef<HTMLElement>, _slider: _MatSlider);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;

package/snack-bar/index.d.ts

@@ -256,8 +256,8 @@ export declare class MatSnackBarContainer extends BasePortalOutlet implements On
     /** Makes sure the exit callbacks have been invoked when the element is destroyed. */
     ngOnDestroy(): void;
     /**
-     * Waits for the zone to settle before removing the element. Helps prevent
-     * errors where we end up removing an element which is in the middle of an animation.
+     * Removes the element in a microtask. Helps prevent errors where we end up
+     * removing an element which is in the middle of an animation.
      */
     private _completeExit;
     /**

package/tabs/_tabs-common.scss

@@ -338,11 +338,30 @@ $mat-tab-animation-duration: 500ms !default;
 }
 
 // Structural styles for the element that wraps the paginated container's content.
-@mixin paginated-tab-header-container {
+// Include a selector for an inverted header if the header may be optionally positioned on the
+// bottom of the content.
+@mixin paginated-tab-header-container($inverted-header-selector: null) {
   display: flex;
   flex-grow: 1;
   overflow: hidden;
   z-index: 1;
+  @include token-utils.use-tokens(
+    tokens-mat-tab-header.$prefix,
+    tokens-mat-tab-header.get-token-slots()
+  ) {
+    border-bottom-style: solid;
+    @include token-utils.create-token-slot(border-bottom-width, divider-height);
+    @include token-utils.create-token-slot(border-bottom-color, divider-color);
+
+    @if ($inverted-header-selector) {
+      #{$inverted-header-selector} & {
+        border-bottom: none;
+        border-top-style: solid;
+        @include token-utils.create-token-slot(border-top-width, divider-height);
+        @include token-utils.create-token-slot(border-top-color, divider-color);
+      }
+    }
+  }
 }
 
 @mixin paginated-tab-header-with-background($header-selector, $tab-selector) {

package/tabs/index.d.ts

@@ -166,7 +166,7 @@ export declare class MatInkBar {
  */
 declare interface MatInkBarItem extends OnInit, OnDestroy {
     elementRef: ElementRef<HTMLElement>;
-    activateInkBar(previousIndicatorClientRect?: ClientRect): void;
+    activateInkBar(previousIndicatorClientRect?: DOMRect): void;
     deactivateInkBar(): void;
     fitInkBarToContent: boolean;
 }
@@ -614,7 +614,11 @@ export declare class MatTabGroup extends _MatTabGroupMixinBase implements AfterC
     get preserveContent(): boolean;
     set preserveContent(value: BooleanInput);
     private _preserveContent;
-    /** Background color of the tab group. */
+    /**
+     * Background color of the tab group.
+     * @deprecated The background color should be customized through Sass theming APIs.
+     * @breaking-change 20.0.0 Remove this input
+     */
     get backgroundColor(): ThemePalette;
     set backgroundColor(value: ThemePalette);
     private _backgroundColor;

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

@@ -1,118 +0,0 @@
-@use 'sass:map';
-@use 'sass:math';
-@use '@material/density' as mdc-density;
-@use '@material/textfield' as mdc-textfield;
-@use '../core/theming/inspection';
-
-@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($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: inspection.get-theme-density($theme),
-    $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-text-field-wrapper .mat-mdc-form-field-flex .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/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 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;