@angular/material 20.0.0-next.0 → 20.0.0-next.10

package/core/tokens/m3/_index.scss

@@ -1,163 +1,8 @@
-@use 'sass:meta';
-@use 'sass:map';
-@use './mat/app' as tokens-mat-app;
-@use './mat/autocomplete' as tokens-mat-autocomplete;
-@use './mat/badge' as tokens-mat-badge;
-@use './mat/text-button' as tokens-mat-text-button;
-@use './mat/protected-button' as tokens-mat-protected-button;
-@use './mat/filled-button' as tokens-mat-filled-button;
-@use './mat/outlined-button' as tokens-mat-outlined-button;
-@use './mat/dialog' as tokens-mat-dialog;
-@use './mat/bottom-sheet' as tokens-mat-bottom-sheet;
-@use './mat/card' as tokens-mat-card;
-@use './mat/chip' as tokens-mat-chip;
-@use './mat/datepicker' as tokens-mat-datepicker;
-@use './mat/divider' as tokens-mat-divider;
-@use './mat/expansion' as tokens-mat-expansion;
-@use './mat/fab' as tokens-mat-fab;
-@use './mat/fab-small' as tokens-mat-fab-small;
-@use './mat/form-field' as tokens-mat-form-field;
-@use './mat/grid-list' as tokens-mat-grid-list;
-@use './mat/icon' as tokens-mat-icon;
-@use './mat/icon-button' as tokens-mat-icon-button;
-@use './mat/list' as tokens-mat-list;
-@use './mat/menu' as tokens-mat-menu;
-@use './mat/option' as tokens-mat-option;
-@use './mat/optgroup' as tokens-mat-optgroup;
-@use './mat/paginator' as tokens-mat-paginator;
-@use './mat/checkbox' as tokens-mat-checkbox;
-@use './mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
-@use './mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox;
-@use './mat/radio' as tokens-mat-radio;
-@use './mat/ripple' as tokens-mat-ripple;
-@use './mat/select' as tokens-mat-select;
-@use './mat/sidenav' as tokens-mat-sidenav;
-@use './mat/slider' as tokens-mat-slider;
-@use './mat/switch' as tokens-mat-switch;
-@use './mat/snack-bar' as tokens-mat-snack-bar;
-@use './mat/sort' as tokens-mat-sort;
-@use './mat/standard-button-toggle' as tokens-mat-button-toggle;
-@use './mat/stepper' as tokens-mat-stepper;
-@use './mat/tab-header' as tokens-mat-tab-header;
-@use './mat/table' as tokens-mat-table;
-@use './mat/toolbar' as tokens-mat-toolbar;
-@use './mat/tree' as tokens-mat-tree;
-@use './mat/timepicker' as tokens-mat-timepicker;
-@use './mdc/checkbox' as tokens-mdc-checkbox;
-@use './mdc/text-button' as tokens-mdc-text-button;
-@use './mdc/protected-button' as tokens-mdc-protected-button;
-@use './mdc/filled-button' as tokens-mdc-filled-button;
-@use './mdc/outlined-button' as tokens-mdc-outlined-button;
-@use './mdc/chip' as tokens-mdc-chip;
-@use './mdc/circular-progress' as tokens-mdc-circular-progress;
-@use './mdc/dialog' as tokens-mdc-dialog;
-@use './mdc/elevated-card' as tokens-mdc-elevated-card;
-@use './mdc/extended-fab' as tokens-mdc-extended-fab;
-@use './mdc/fab' as tokens-mdc-fab;
-@use './mdc/fab-small' as tokens-mdc-fab-small;
-@use './mdc/filled-text-field' as tokens-mdc-filled-text-field;
-@use './mdc/icon-button' as tokens-mdc-icon-button;
-@use './mdc/linear-progress' as tokens-mdc-linear-progress;
-@use './mdc/list' as tokens-mdc-list;
-@use './mdc/outlined-card' as tokens-mdc-outlined-card;
-@use './mdc/outlined-text-field' as tokens-mdc-outlined-text-field;
-@use './mdc/plain-tooltip' as tokens-mdc-plain-tooltip;
-@use './mdc/radio' as tokens-mdc-radio;
-@use './mdc/slider' as tokens-mdc-slider;
-@use './mdc/snack-bar' as tokens-mdc-snack-bar;
-@use './mdc/switch' as tokens-mdc-switch;
-@use './mdc/secondary-navigation-tab' as tokens-mdc-secondary-navigation-tab;
-@use './mdc/tab-indicator' as tokens-mdc-tab-indicator;
-
-$_module-names: (
-  // Custom tokens
-  tokens-mat-app,
-  tokens-mat-autocomplete,
-  tokens-mat-badge,
-  tokens-mat-bottom-sheet,
-  tokens-mat-button-toggle,
-  tokens-mat-card,
-  tokens-mat-chip,
-  tokens-mat-datepicker,
-  tokens-mat-dialog,
-  tokens-mat-divider,
-  tokens-mat-expansion,
-  tokens-mat-fab,
-  tokens-mat-fab-small,
-  tokens-mat-filled-button,
-  tokens-mat-form-field,
-  tokens-mat-grid-list,
-  tokens-mat-icon-button,
-  tokens-mat-icon,
-  tokens-mat-menu,
-  tokens-mat-optgroup,
-  tokens-mat-option,
-  tokens-mat-outlined-button,
-  tokens-mat-paginator,
-  tokens-mat-checkbox,
-  tokens-mat-full-pseudo-checkbox,
-  tokens-mat-list,
-  tokens-mat-minimal-pseudo-checkbox,
-  tokens-mat-protected-button,
-  tokens-mat-radio,
-  tokens-mat-ripple,
-  tokens-mat-select,
-  tokens-mat-sidenav,
-  tokens-mat-slider,
-  tokens-mat-switch,
-  tokens-mat-snack-bar,
-  tokens-mat-sort,
-  tokens-mat-stepper,
-  tokens-mat-tab-header,
-  tokens-mat-table,
-  tokens-mat-text-button,
-  tokens-mat-toolbar,
-  tokens-mat-tree,
-  tokens-mat-timepicker,
-  // MDC tokens
-  tokens-mdc-checkbox,
-  tokens-mdc-chip,
-  tokens-mdc-text-button,
-  tokens-mdc-protected-button,
-  tokens-mdc-filled-button,
-  tokens-mdc-outlined-button,
-  tokens-mdc-chip,
-  tokens-mdc-circular-progress,
-  tokens-mdc-dialog,
-  tokens-mdc-elevated-card,
-  tokens-mdc-extended-fab,
-  tokens-mdc-fab,
-  tokens-mdc-fab-small,
-  tokens-mdc-filled-text-field,
-  tokens-mdc-icon-button,
-  tokens-mdc-linear-progress,
-  tokens-mdc-list,
-  tokens-mdc-outlined-card,
-  tokens-mdc-outlined-text-field,
-  tokens-mdc-plain-tooltip,
-  tokens-mdc-radio,
-  tokens-mdc-slider,
-  tokens-mdc-snack-bar,
-  tokens-mdc-switch,
-  tokens-mdc-secondary-navigation-tab,
-  tokens-mdc-tab-indicator
-);
-
-/// Gets the full set of M3 tokens for the given theme object.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} Full set of M3 tokens
-@function get-m3-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: ();
-
-  @each $module-name in $_module-names {
-    $fn: meta.get-function(
-      $name: 'get-tokens',
-      $module: $module-name,
-    );
-    $tokens: map.merge($tokens, meta.call($fn, $systems, $exclude-hardcoded, $token-slots));
-  }
-
-  @return $tokens;
-}
+@forward './md-ref-palette' as md-ref-palette-*;
+@forward './md-ref-typeface' as md-ref-typeface-*;
+@forward './md-sys-color' as md-sys-color-*;
+@forward './md-sys-elevation' as md-sys-elevation-*;
+@forward './md-sys-motion' as md-sys-motion-*;
+@forward './md-sys-shape' as md-sys-shape-*;
+@forward './md-sys-state' as md-sys-state-*;
+@forward './md-sys-typescale' as md-sys-typescale-*;

package/core/tokens/m3/{definitions/_md-sys-color.scss → _md-sys-color.scss}

@@ -7,12 +7,15 @@
 
 @use './md-ref-palette';
 
+// Indicates whether alternative tokens should be used
+$_alternate-tokens: false;
+
 $_default-dark: (
   'md-ref-palette': md-ref-palette.values(),
 );
 
 @function values-dark($deps: $_default-dark) {
-  @return (
+  $values: (
     'background': map.get($deps, 'md-ref-palette', 'neutral6'),
     'error': map.get($deps, 'md-ref-palette', 'error80'),
     'error-container': map.get($deps, 'md-ref-palette', 'error30'),
@@ -64,6 +67,24 @@ $_default-dark: (
     'tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary90'),
     'tertiary-fixed-dim': map.get($deps, 'md-ref-palette', 'tertiary80')
   );
+
+  @if ($_alternate-tokens) {
+    $values: map.merge($values, (
+      'background': map.get($deps, 'md-ref-palette', 'neutral10'),
+      'on-surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant80'),
+      'surface': map.get($deps, 'md-ref-palette', 'neutral10'),
+      'surface-bright': #37393b,
+      'surface-container': #1e1f20,
+      'surface-container-high': #282a2c,
+      'surface-container-highest': #333537,
+      'surface-container-low': #1b1b1b,
+      'surface-container-lowest': #0e0e0e,
+      'surface-dim': #131313,
+      'surface-tint': #d1e1ff,
+    ));
+  }
+
+  @return $values;
 }
 
 $_default-light: (
@@ -71,7 +92,7 @@ $_default-light: (
 );
 
 @function values-light($deps: $_default-light) {
-  @return (
+  $values: (
     'background': map.get($deps, 'md-ref-palette', 'neutral98'),
     'error': map.get($deps, 'md-ref-palette', 'error40'),
     'error-container': map.get($deps, 'md-ref-palette', 'error90'),
@@ -123,4 +144,25 @@ $_default-light: (
     'tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary90'),
     'tertiary-fixed-dim': map.get($deps, 'md-ref-palette', 'tertiary80')
   );
+
+  @if ($_alternate-tokens) {
+    $values: map.merge($values, (
+      'background': map.get($deps, 'md-ref-palette', 'neutral100'),
+      'on-error-container': map.get($deps, 'md-ref-palette', 'error10'),
+      'on-primary-container': map.get($deps, 'md-ref-palette', 'primary10'),
+      'on-secondary-container': map.get($deps, 'md-ref-palette', 'secondary10'),
+      'on-tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary10'),
+      'surface': map.get($deps, 'md-ref-palette', 'neutral100'),
+      'surface-bright': map.get($deps, 'md-ref-palette', 'neutral100'),
+      'surface-container': #f0f4f9,
+      'surface-container-high': #e9eef6,
+      'surface-container-highest': #dde3ea,
+      'surface-container-low': #f8fafd,
+      'surface-container-lowest': map.get($deps, 'md-ref-palette', 'primary100'),
+      'surface-dim': #d3dbe5,
+      'surface-tint': #6991d6,
+    ));
+  }
+
+  @return $values;
 }

package/core/tokens/m3/{definitions/_md-sys-typescale.scss → _md-sys-typescale.scss}

@@ -7,12 +7,15 @@
 
 @use './md-ref-typeface';
 
+// Indicates whether alternative tokens should be used
+$_alternate-tokens: false;
+
 $_default: (
   'md-ref-typeface': md-ref-typeface.values(),
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
-  @return (
+  $values: (
     // Warning: risk of reduced fidelity from using this composite typography token.
     // Tokens md.sys.typescale.body-large.tracking cannot be represented in the "font"
     // property shorthand. Consider using the discrete properties instead.
@@ -305,4 +308,20 @@ $_default: (
     'title-small-tracking': if($exclude-hardcoded-values, null, 0.006rem),
     'title-small-weight': map.get($deps, 'md-ref-typeface', 'weight-medium')
   );
+
+  @if ($_alternate-tokens) {
+    $values: map.merge($values, (
+      'body-large-tracking': if($exclude-hardcoded-values, null, 0),
+      'body-medium-tracking': if($exclude-hardcoded-values, null, 0),
+      'body-small-tracking': if($exclude-hardcoded-values, null, 0.006rem),
+      'display-large-tracking': if($exclude-hardcoded-values, null, 0),
+      'label-large-tracking': if($exclude-hardcoded-values, null, 0),
+      'label-medium-tracking': if($exclude-hardcoded-values, null, 0.006rem),
+      'label-small-tracking': if($exclude-hardcoded-values, null, 0.006rem),
+      'title-medium-tracking': if($exclude-hardcoded-values, null, 0),
+      'title-small-tracking': if($exclude-hardcoded-values, null, 0),
+    ));
+  }
+
+  @return $values;
 }

package/date-adapter.d-CtKXIxk0.d.ts

@@ -0,0 +1,267 @@
+import { InjectionToken } from '@angular/core';
+import { Subject, Observable } from 'rxjs';
+
+/** InjectionToken for datepicker that can be used to override default locale code. */
+declare const MAT_DATE_LOCALE: InjectionToken<{}>;
+/**
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
+declare function MAT_DATE_LOCALE_FACTORY(): {};
+/** Adapts type `D` to be usable as a date by cdk-based components that work with dates. */
+declare abstract class DateAdapter<D, L = any> {
+    /** The locale to use for all dates. */
+    protected locale: L;
+    protected readonly _localeChanges: Subject<void>;
+    /** A stream that emits when the locale changes. */
+    readonly localeChanges: Observable<void>;
+    /**
+     * Gets the year component of the given date.
+     * @param date The date to extract the year from.
+     * @returns The year component.
+     */
+    abstract getYear(date: D): number;
+    /**
+     * Gets the month component of the given date.
+     * @param date The date to extract the month from.
+     * @returns The month component (0-indexed, 0 = January).
+     */
+    abstract getMonth(date: D): number;
+    /**
+     * Gets the date of the month component of the given date.
+     * @param date The date to extract the date of the month from.
+     * @returns The month component (1-indexed, 1 = first of month).
+     */
+    abstract getDate(date: D): number;
+    /**
+     * Gets the day of the week component of the given date.
+     * @param date The date to extract the day of the week from.
+     * @returns The month component (0-indexed, 0 = Sunday).
+     */
+    abstract getDayOfWeek(date: D): number;
+    /**
+     * Gets a list of names for the months.
+     * @param style The naming style (e.g. long = 'January', short = 'Jan', narrow = 'J').
+     * @returns An ordered list of all month names, starting with January.
+     */
+    abstract getMonthNames(style: 'long' | 'short' | 'narrow'): string[];
+    /**
+     * Gets a list of names for the dates of the month.
+     * @returns An ordered list of all date of the month names, starting with '1'.
+     */
+    abstract getDateNames(): string[];
+    /**
+     * Gets a list of names for the days of the week.
+     * @param style The naming style (e.g. long = 'Sunday', short = 'Sun', narrow = 'S').
+     * @returns An ordered list of all weekday names, starting with Sunday.
+     */
+    abstract getDayOfWeekNames(style: 'long' | 'short' | 'narrow'): string[];
+    /**
+     * Gets the name for the year of the given date.
+     * @param date The date to get the year name for.
+     * @returns The name of the given year (e.g. '2017').
+     */
+    abstract getYearName(date: D): string;
+    /**
+     * Gets the first day of the week.
+     * @returns The first day of the week (0-indexed, 0 = Sunday).
+     */
+    abstract getFirstDayOfWeek(): number;
+    /**
+     * Gets the number of days in the month of the given date.
+     * @param date The date whose month should be checked.
+     * @returns The number of days in the month of the given date.
+     */
+    abstract getNumDaysInMonth(date: D): number;
+    /**
+     * Clones the given date.
+     * @param date The date to clone
+     * @returns A new date equal to the given date.
+     */
+    abstract clone(date: D): D;
+    /**
+     * Creates a date with the given year, month, and date. Does not allow over/under-flow of the
+     * month and date.
+     * @param year The full year of the date. (e.g. 89 means the year 89, not the year 1989).
+     * @param month The month of the date (0-indexed, 0 = January). Must be an integer 0 - 11.
+     * @param date The date of month of the date. Must be an integer 1 - length of the given month.
+     * @returns The new date, or null if invalid.
+     */
+    abstract createDate(year: number, month: number, date: number): D;
+    /**
+     * Gets today's date.
+     * @returns Today's date.
+     */
+    abstract today(): D;
+    /**
+     * Parses a date from a user-provided value.
+     * @param value The value to parse.
+     * @param parseFormat The expected format of the value being parsed
+     *     (type is implementation-dependent).
+     * @returns The parsed date.
+     */
+    abstract parse(value: any, parseFormat: any): D | null;
+    /**
+     * Formats a date as a string according to the given format.
+     * @param date The value to format.
+     * @param displayFormat The format to use to display the date as a string.
+     * @returns The formatted date string.
+     */
+    abstract format(date: D, displayFormat: any): string;
+    /**
+     * Adds the given number of years to the date. Years are counted as if flipping 12 pages on the
+     * calendar for each year and then finding the closest date in the new month. For example when
+     * adding 1 year to Feb 29, 2016, the resulting date will be Feb 28, 2017.
+     * @param date The date to add years to.
+     * @param years The number of years to add (may be negative).
+     * @returns A new date equal to the given one with the specified number of years added.
+     */
+    abstract addCalendarYears(date: D, years: number): D;
+    /**
+     * Adds the given number of months to the date. Months are counted as if flipping a page on the
+     * calendar for each month and then finding the closest date in the new month. For example when
+     * adding 1 month to Jan 31, 2017, the resulting date will be Feb 28, 2017.
+     * @param date The date to add months to.
+     * @param months The number of months to add (may be negative).
+     * @returns A new date equal to the given one with the specified number of months added.
+     */
+    abstract addCalendarMonths(date: D, months: number): D;
+    /**
+     * Adds the given number of days to the date. Days are counted as if moving one cell on the
+     * calendar for each day.
+     * @param date The date to add days to.
+     * @param days The number of days to add (may be negative).
+     * @returns A new date equal to the given one with the specified number of days added.
+     */
+    abstract addCalendarDays(date: D, days: number): D;
+    /**
+     * Gets the RFC 3339 compatible string (https://tools.ietf.org/html/rfc3339) for the given date.
+     * This method is used to generate date strings that are compatible with native HTML attributes
+     * such as the `min` or `max` attribute of an `<input>`.
+     * @param date The date to get the ISO date string for.
+     * @returns The ISO date string date string.
+     */
+    abstract toIso8601(date: D): string;
+    /**
+     * Checks whether the given object is considered a date instance by this DateAdapter.
+     * @param obj The object to check
+     * @returns Whether the object is a date instance.
+     */
+    abstract isDateInstance(obj: any): boolean;
+    /**
+     * Checks whether the given date is valid.
+     * @param date The date to check.
+     * @returns Whether the date is valid.
+     */
+    abstract isValid(date: D): boolean;
+    /**
+     * Gets date instance that is not valid.
+     * @returns An invalid date.
+     */
+    abstract invalid(): D;
+    /**
+     * Sets the time of one date to the time of another.
+     * @param target Date whose time will be set.
+     * @param hours New hours to set on the date object.
+     * @param minutes New minutes to set on the date object.
+     * @param seconds New seconds to set on the date object.
+     */
+    setTime(target: D, hours: number, minutes: number, seconds: number): D;
+    /**
+     * Gets the hours component of the given date.
+     * @param date The date to extract the hours from.
+     */
+    getHours(date: D): number;
+    /**
+     * Gets the minutes component of the given date.
+     * @param date The date to extract the minutes from.
+     */
+    getMinutes(date: D): number;
+    /**
+     * Gets the seconds component of the given date.
+     * @param date The date to extract the seconds from.
+     */
+    getSeconds(date: D): number;
+    /**
+     * Parses a date with a specific time from a user-provided value.
+     * @param value The value to parse.
+     * @param parseFormat The expected format of the value being parsed
+     *     (type is implementation-dependent).
+     */
+    parseTime(value: any, parseFormat: any): D | null;
+    /**
+     * Adds an amount of seconds to the specified date.
+     * @param date Date to which to add the seconds.
+     * @param amount Amount of seconds to add to the date.
+     */
+    addSeconds(date: D, amount: number): D;
+    /**
+     * Given a potential date object, returns that same date object if it is
+     * a valid date, or `null` if it's not a valid date.
+     * @param obj The object to check.
+     * @returns A date or `null`.
+     */
+    getValidDateOrNull(obj: unknown): D | null;
+    /**
+     * Attempts to deserialize a value to a valid date object. This is different from parsing in that
+     * deserialize should only accept non-ambiguous, locale-independent formats (e.g. a ISO 8601
+     * string). The default implementation does not allow any deserialization, it simply checks that
+     * the given value is already a valid date object or null. The `<mat-datepicker>` will call this
+     * method on all of its `@Input()` properties that accept dates. It is therefore possible to
+     * support passing values from your backend directly to these properties by overriding this method
+     * to also deserialize the format used by your backend.
+     * @param value The value to be deserialized into a date object.
+     * @returns The deserialized date object, either a valid date, null if the value can be
+     *     deserialized into a null date (e.g. the empty string), or an invalid date.
+     */
+    deserialize(value: any): D | null;
+    /**
+     * Sets the locale used for all dates.
+     * @param locale The new locale.
+     */
+    setLocale(locale: L): void;
+    /**
+     * Compares two dates.
+     * @param first The first date to compare.
+     * @param second The second date to compare.
+     * @returns 0 if the dates are equal, a number less than 0 if the first date is earlier,
+     *     a number greater than 0 if the first date is later.
+     */
+    compareDate(first: D, second: D): number;
+    /**
+     * Compares the time values of two dates.
+     * @param first First date to compare.
+     * @param second Second date to compare.
+     * @returns 0 if the times are equal, a number less than 0 if the first time is earlier,
+     *     a number greater than 0 if the first time is later.
+     */
+    compareTime(first: D, second: D): number;
+    /**
+     * Checks if two dates are equal.
+     * @param first The first date to check.
+     * @param second The second date to check.
+     * @returns Whether the two dates are equal.
+     *     Null dates are considered equal to other null dates.
+     */
+    sameDate(first: D | null, second: D | null): boolean;
+    /**
+     * Checks if the times of two dates are equal.
+     * @param first The first date to check.
+     * @param second The second date to check.
+     * @returns Whether the times of the two dates are equal.
+     *     Null dates are considered equal to other null dates.
+     */
+    sameTime(first: D | null, second: D | null): boolean;
+    /**
+     * Clamp the given date between min and max dates.
+     * @param date The date to clamp.
+     * @param min The minimum value to allow. If null or omitted no min is enforced.
+     * @param max The maximum value to allow. If null or omitted no max is enforced.
+     * @returns `min` if `date` is less than `min`, `max` if date is greater than `max`,
+     *     otherwise `date`.
+     */
+    clampDate(date: D, min?: D | null, max?: D | null): D;
+}
+
+export { DateAdapter as D, MAT_DATE_LOCALE as M, MAT_DATE_LOCALE_FACTORY as a };