@ng-matero/extensions 12.5.3 → 13.0.1

package/column-resize/column-resize-directives/column-resize-flex.d.ts

@@ -10,6 +10,7 @@ import { CdkTable } from '@angular/cdk/table';
 import { ColumnResize } from '../column-resize';
 import { ColumnResizeNotifier, ColumnResizeNotifierSource } from '../column-resize-notifier';
 import { HeaderRowEventDispatcher } from '../event-dispatcher';
+import * as i0 from "@angular/core";
 /**
  * Explicitly enables column resizing for a flexbox-based cdk-table.
  * Individual columns must be annotated specifically.
@@ -22,4 +23,6 @@ export declare class CdkColumnResizeFlex extends ColumnResize {
     protected readonly notifier: ColumnResizeNotifierSource;
     protected readonly table: CdkTable<unknown>;
     constructor(columnResizeNotifier: ColumnResizeNotifier, elementRef: ElementRef<HTMLElement>, eventDispatcher: HeaderRowEventDispatcher, ngZone: NgZone, notifier: ColumnResizeNotifierSource, table: CdkTable<unknown>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<CdkColumnResizeFlex, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkColumnResizeFlex, "cdk-table[columnResize]", never, {}, {}, never>;
 }

package/column-resize/column-resize-directives/column-resize.d.ts

@@ -10,6 +10,7 @@ import { CdkTable } from '@angular/cdk/table';
 import { ColumnResize } from '../column-resize';
 import { ColumnResizeNotifier, ColumnResizeNotifierSource } from '../column-resize-notifier';
 import { HeaderRowEventDispatcher } from '../event-dispatcher';
+import * as i0 from "@angular/core";
 /**
  * Explicitly enables column resizing for a table-based cdk-table.
  * Individual columns must be annotated specifically.
@@ -22,4 +23,6 @@ export declare class CdkColumnResize extends ColumnResize {
     protected readonly notifier: ColumnResizeNotifierSource;
     protected readonly table: CdkTable<unknown>;
     constructor(columnResizeNotifier: ColumnResizeNotifier, elementRef: ElementRef<HTMLElement>, eventDispatcher: HeaderRowEventDispatcher, ngZone: NgZone, notifier: ColumnResizeNotifierSource, table: CdkTable<unknown>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<CdkColumnResize, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkColumnResize, "table[cdk-table][columnResize]", never, {}, {}, never>;
 }

package/column-resize/column-resize-module.d.ts

@@ -1,13 +1,12 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
+import * as i0 from "@angular/core";
+import * as i1 from "./column-resize-directives/column-resize";
+import * as i2 from "./column-resize-directives/column-resize-flex";
 /**
  * One of two NgModules for use with CdkColumnResize.
  * When using this module, columns are not resizable by default.
  */
 export declare class CdkColumnResizeModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CdkColumnResizeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CdkColumnResizeModule, [typeof i1.CdkColumnResize, typeof i2.CdkColumnResizeFlex], never, [typeof i1.CdkColumnResize, typeof i2.CdkColumnResizeFlex]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<CdkColumnResizeModule>;
 }

package/column-resize/column-resize-notifier.d.ts

@@ -1,11 +1,5 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
 import { Observable, Subject } from 'rxjs';
+import * as i0 from "@angular/core";
 /** Indicates the width of a column. */
 export interface ColumnSize {
     /** The ID/name of the column, as defined in CdkColumnDef. */
@@ -39,6 +33,8 @@ export declare class ColumnResizeNotifierSource {
     readonly resizeCompleted: Subject<ColumnSize>;
     /** Triggers a resize action. */
     readonly triggerResize: Subject<ColumnSizeAction>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColumnResizeNotifierSource, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ColumnResizeNotifierSource>;
 }
 /** Service for triggering column resizes imperatively or being notified of them. */
 export declare class ColumnResizeNotifier {
@@ -48,4 +44,6 @@ export declare class ColumnResizeNotifier {
     constructor(_source: ColumnResizeNotifierSource);
     /** Instantly resizes the specified column. */
     resize(columnId: string, size: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColumnResizeNotifier, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ColumnResizeNotifier>;
 }

package/column-resize/column-resize.d.ts

@@ -9,6 +9,7 @@ import { AfterViewInit, ElementRef, NgZone, OnDestroy } from '@angular/core';
 import { Subject } from 'rxjs';
 import { ColumnResizeNotifier, ColumnResizeNotifierSource } from './column-resize-notifier';
 import { HeaderRowEventDispatcher } from './event-dispatcher';
+import * as i0 from "@angular/core";
 /**
  * Base class for ColumnResize directives which attach to mat-table elements to
  * provide common events and services for column resizing.
@@ -33,4 +34,6 @@ export declare abstract class ColumnResize implements AfterViewInit, OnDestroy {
     private _listenForRowHoverEvents;
     private _listenForResizeActivity;
     private _listenForHoverActivity;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColumnResize, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ColumnResize, never, never, {}, {}, never>;
 }

package/column-resize/column-size-store.d.ts

@@ -1,10 +1,4 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
+import * as i0 from "@angular/core";
 /**
  * Can be provided by the host application to enable persistence of column resize state.
  */
@@ -13,4 +7,6 @@ export declare abstract class ColumnSizeStore {
     abstract getSize(tableId: string, columnId: string): number;
     /** Persists the size of the specified column in the specified table. */
     abstract setSize(tableId: string, columnId: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColumnSizeStore, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ColumnSizeStore>;
 }

package/column-resize/event-dispatcher.d.ts

@@ -7,6 +7,7 @@
  */
 import { NgZone } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
+import * as i0 from "@angular/core";
 /** Coordinates events between the column resize directives. */
 export declare class HeaderRowEventDispatcher {
     private readonly _ngZone;
@@ -38,4 +39,6 @@ export declare class HeaderRowEventDispatcher {
      */
     resizeOverlayVisibleForHeaderRow(row: Element): Observable<boolean>;
     private _enterZone;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HeaderRowEventDispatcher, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<HeaderRowEventDispatcher>;
 }

package/column-resize/mtxColumnResize.d.ts

@@ -1,4 +1,5 @@
 /**
  * Generated bundle index. Do not edit.
  */
+/// <amd-module name="@ng-matero/extensions/column-resize" />
 export * from './public-api';

package/column-resize/overlay-handle.d.ts

@@ -12,6 +12,7 @@ import { Subject } from 'rxjs';
 import { ColumnResizeNotifierSource } from './column-resize-notifier';
 import { HeaderRowEventDispatcher } from './event-dispatcher';
 import { ResizeRef } from './resize-ref';
+import * as i0 from "@angular/core";
 /**
  * Base class for a component shown over the edge of a resizable column that is responsible
  * for handling column resize mouse events and displaying any visible UI on the column edge.
@@ -37,4 +38,6 @@ export declare abstract class ResizeOverlayHandle implements AfterViewInit, OnDe
     private _updateOverlayOffset;
     private _isLtr;
     private _notifyResizeEnded;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ResizeOverlayHandle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ResizeOverlayHandle, never, never, {}, {}, never>;
 }

package/column-resize/package.json

@@ -1,11 +1,10 @@
 {
-  "main": "../bundles/mtxColumnResize.umd.js",
-  "module": "../fesm2015/mtxColumnResize.js",
-  "es2015": "../fesm2015/mtxColumnResize.js",
-  "esm2015": "../esm2015/column-resize/mtxColumnResize.js",
-  "fesm2015": "../fesm2015/mtxColumnResize.js",
+  "module": "../fesm2015/mtxColumnResize.mjs",
+  "es2020": "../fesm2020/mtxColumnResize.mjs",
+  "esm2020": "../esm2020/column-resize/mtxColumnResize.mjs",
+  "fesm2020": "../fesm2020/mtxColumnResize.mjs",
+  "fesm2015": "../fesm2015/mtxColumnResize.mjs",
   "typings": "mtxColumnResize.d.ts",
-  "metadata": "mtxColumnResize.metadata.json",
   "sideEffects": false,
   "name": "@ng-matero/extensions/column-resize"
 }

package/column-resize/resizable.d.ts

@@ -8,6 +8,7 @@ import { ColumnResize } from './column-resize';
 import { ColumnResizeNotifierSource } from './column-resize-notifier';
 import { HeaderRowEventDispatcher } from './event-dispatcher';
 import { ResizeStrategy } from './resize-strategy';
+import * as i0 from "@angular/core";
 /**
  * Base class for Resizable directives which are applied to column headers to make those columns
  * resizable.
@@ -56,4 +57,6 @@ export declare abstract class Resizable<HandleComponent extends ResizeOverlayHan
     private _applyMinWidthPx;
     private _applyMaxWidthPx;
     private _appendInlineHandle;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Resizable<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<Resizable<any>, never, never, {}, {}, never>;
 }

package/column-resize/resize-strategy.d.ts

@@ -8,6 +8,7 @@
 import { OnDestroy, Provider } from '@angular/core';
 import { CdkTable, _CoalescedStyleScheduler } from '@angular/cdk/table';
 import { ColumnResize } from './column-resize';
+import * as i0 from "@angular/core";
 /**
  * Provides an implementation for resizing a column.
  * The details of how resizing works for tables for flex mat-tables are quite different.
@@ -25,6 +26,8 @@ export declare abstract class ResizeStrategy {
     abstract applyMaxColumnSize(cssFriendlyColumnName: string, columnHeader: HTMLElement, minSizeInPx: number): void;
     /** Adjusts the width of the table element by the specified delta. */
     protected updateTableWidthAndStickyColumns(delta: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ResizeStrategy, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ResizeStrategy>;
 }
 /**
  * The optimially performing resize strategy for &lt;table&gt; elements with table-layout: fixed.
@@ -41,6 +44,8 @@ export declare class TableLayoutFixedResizeStrategy extends ResizeStrategy {
     applyColumnSize(_: string, columnHeader: HTMLElement, sizeInPx: number, previousSizeInPx?: number): void;
     applyMinColumnSize(_: string, columnHeader: HTMLElement, sizeInPx: number): void;
     applyMaxColumnSize(_: string, columnHeader: HTMLElement, sizeInPx: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableLayoutFixedResizeStrategy, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<TableLayoutFixedResizeStrategy>;
 }
 /**
  * The optimally performing resize strategy for flex mat-tables.
@@ -71,6 +76,8 @@ export declare class CdkFlexTableResizeStrategy extends ResizeStrategy implement
     private _getStyleSheet;
     private _getColumnPropertiesMap;
     private _applySizeCss;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CdkFlexTableResizeStrategy, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<CdkFlexTableResizeStrategy>;
 }
 export declare const TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER: Provider;
 export declare const FLEX_RESIZE_STRATEGY_PROVIDER: Provider;

package/core/datetime/datetime.module.d.ts

@@ -1,4 +1,12 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/material/core";
 export declare class NativeDatetimeModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NativeDatetimeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NativeDatetimeModule, never, [typeof i1.NativeDateModule], never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<NativeDatetimeModule>;
 }
 export declare class MtxNativeDatetimeModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxNativeDatetimeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxNativeDatetimeModule, never, [typeof NativeDatetimeModule, typeof i1.MatNativeDateModule], never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MtxNativeDatetimeModule>;
 }

package/core/datetime/native-datetime-adapter.d.ts

@@ -1,5 +1,6 @@
 import { DateAdapter } from '@angular/material/core';
 import { DatetimeAdapter } from './datetime-adapter';
+import * as i0 from "@angular/core";
 export declare class NativeDatetimeAdapter extends DatetimeAdapter<Date> {
     constructor(matDateLocale: string, _delegate: DateAdapter<Date>);
     clone(date: Date): Date;
@@ -33,4 +34,6 @@ export declare class NativeDatetimeAdapter extends DatetimeAdapter<Date> {
     private _2digit;
     /** Creates a date but allows the month and date to overflow. */
     private _createDateWithOverflow;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NativeDatetimeAdapter, [{ optional: true; }, null]>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<NativeDatetimeAdapter>;
 }

package/core/density/private/_compatibility.scss

@@ -0,0 +1,74 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+// Note that this file is called `private`, because the APIs in it aren't public yet.
+// Once they're made available, the code should be moved out into an `index.scss`.
+
+// Taken from mat-density with small modifications to not rely on the new Sass module
+// system, and to support arbitrary properties in a density configuration.
+// https://github.com/material-components/material-components-web/blob/master/packages/mdc-density
+
+$_density-interval: 4px !default;
+$_minimum-scale: minimum !default;
+$_maximum-scale: maximum !default;
+$_supported-scales: (default, $_minimum-scale, $_maximum-scale) !default;
+$_default-scale: 0 !default;
+
+// Whether density should be generated at root. This will be temporarily set to `true`
+// whenever density styles for legacy themes are generated.
+$private-density-generate-at-root: false;
+// Whether density styles should be generated. This will be temporarily set to `false` if
+// duplicate density styles for a legacy theme would be generated. For legacy themes,
+// we always generate the default density **only once** at root.
+$private-density-generate-styles: true;
+
+// Mixin that can be used to wrap density styles of given components. The mixin will
+// move the density styles to root if the `$mat-private-density-generate-at-root` global variable
+// is set. If `$mat-private-density-generate-styles` is set to `false`, generation of density
+// styles wrapped in this mixin is skipped. This mixin exists to improve backwards compatibility
+// of the new theming API where density styles are included as part of themes. Previously,
+// density styles of components were part of their base styles. With the new API, they are
+// part of the theming system. The `<..>-theme` mixins generate density by default unless
+// the density configuration is explicitly specified as per new API. This means, that projects
+// using `<..>-theme` mixins for separate themes (like `.dark-theme`) will cause duplicate
+// density styles. This is breaking as it increases specificity of density styles. This mixin
+// provides an API to control generation of density styles so that we can ensure they are only
+// created *once* and at root.
+@mixin private-density-legacy-compatibility() {
+  @if $private-density-generate-styles and $private-density-generate-at-root {
+    @at-root {
+      @content;
+    }
+  }
+  @else if $private-density-generate-styles {
+    @content;
+  }
+}
+
+@function private-density-prop-value($density-config, $density-scale, $property-name) {
+  @if (meta.type-of($density-scale) == 'string' and
+  list.index($list: $_supported-scales, $value: $density-scale) == null) {
+    @error 'mat-density: Supported density scales #{$_supported-scales}, '  +
+      'but received #{$density-scale}.';
+  }
+
+  $value: null;
+  $property-scale-map: map.get($density-config, $property-name);
+
+  @if map.has-key($property-scale-map, $density-scale) {
+    $value: map.get($property-scale-map, $density-scale);
+  }
+  @else {
+    $value: map.get($property-scale-map, default) + $density-scale * $_density-interval;
+  }
+
+  $min-value: map.get($property-scale-map, $_minimum-scale);
+  $max-value: map.get($property-scale-map, $_maximum-scale);
+
+  @if ($value < $min-value or $value > $max-value) {
+    @error 'mat-density: #{$property-name} must be between #{$min-value} and ' +
+      '#{$max-value} (inclusive), but received #{$value}.';
+  }
+
+  @return $value;
+}

package/core/mtxCore.d.ts

@@ -1,4 +1,5 @@
 /**
  * Generated bundle index. Do not edit.
  */
+/// <amd-module name="@ng-matero/extensions/core" />
 export * from './public-api';

package/core/package.json

@@ -1,11 +1,10 @@
 {
-  "main": "../bundles/mtxCore.umd.js",
-  "module": "../fesm2015/mtxCore.js",
-  "es2015": "../fesm2015/mtxCore.js",
-  "esm2015": "../esm2015/core/mtxCore.js",
-  "fesm2015": "../fesm2015/mtxCore.js",
+  "module": "../fesm2015/mtxCore.mjs",
+  "es2020": "../fesm2020/mtxCore.mjs",
+  "esm2020": "../esm2020/core/mtxCore.mjs",
+  "fesm2020": "../fesm2020/mtxCore.mjs",
+  "fesm2015": "../fesm2015/mtxCore.mjs",
   "typings": "mtxCore.d.ts",
-  "metadata": "mtxCore.metadata.json",
   "sideEffects": false,
   "name": "@ng-matero/extensions/core"
 }

package/core/pipes/pipes.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./to-observable.pipe";
+import * as i2 from "@angular/common";
+export declare class MtxPipesModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxPipesModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxPipesModule, [typeof i1.MtxToObservablePipe], [typeof i2.CommonModule], [typeof i1.MtxToObservablePipe]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MtxPipesModule>;
+}

package/{pipes → core/pipes}/to-observable.pipe.d.ts

@@ -1,5 +1,8 @@
 import { PipeTransform } from '@angular/core';
 import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
 export declare class MtxToObservablePipe implements PipeTransform {
     transform(value: Observable<any> | unknown): Observable<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxToObservablePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<MtxToObservablePipe, "toObservable">;
 }

package/core/public-api.d.ts

@@ -1 +1,2 @@
 export * from './datetime';
+export * from './pipes';

package/core/style/_elevation.scss

@@ -0,0 +1,197 @@
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use 'variables';
+
+// A collection of mixins and CSS classes that can be used to apply elevation to a material
+// element.
+// See: https://material.io/design/environment/elevation.html
+// Examples:
+//
+//
+// .mat-foo {
+//   @include $mat-elevation(2);
+//
+//   &:active {
+//     @include $mat-elevation(8);
+//   }
+// }
+//
+// <div id="external-card" class="mat-elevation-z2"><p>Some content</p></div>
+//
+// For an explanation of the design behind how elevation is implemented, see the design doc at
+// https://goo.gl/Kq0k9Z.
+
+// Colors for umbra, penumbra, and ambient shadows. As described in the design doc, each elevation
+// level is created using a set of 3 shadow values, one for umbra (the shadow representing the
+// space completely obscured by an object relative to its light source), one for penumbra (the
+// space partially obscured by an object), and one for ambient (the space which contains the object
+// itself). For a further explanation of these terms and their meanings, see
+// https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra.
+
+// Maps for the different shadow sets and their values within each z-space. These values were
+// created by taking a few reference shadow sets created by Google's Designers and interpolating
+// all of the values between them.
+
+@function _get-umbra-map($color, $opacity) {
+  $shadow-color: if(meta.type-of($color) == color, rgba($color, $opacity * .2), $color);
+
+  @return (
+    0: '0px 0px 0px 0px #{$shadow-color}',
+    1: '0px 2px 1px -1px #{$shadow-color}',
+    2: '0px 3px 1px -2px #{$shadow-color}',
+    3: '0px 3px 3px -2px #{$shadow-color}',
+    4: '0px 2px 4px -1px #{$shadow-color}',
+    5: '0px 3px 5px -1px #{$shadow-color}',
+    6: '0px 3px 5px -1px #{$shadow-color}',
+    7: '0px 4px 5px -2px #{$shadow-color}',
+    8: '0px 5px 5px -3px #{$shadow-color}',
+    9: '0px 5px 6px -3px #{$shadow-color}',
+    10: '0px 6px 6px -3px #{$shadow-color}',
+    11: '0px 6px 7px -4px #{$shadow-color}',
+    12: '0px 7px 8px -4px #{$shadow-color}',
+    13: '0px 7px 8px -4px #{$shadow-color}',
+    14: '0px 7px 9px -4px #{$shadow-color}',
+    15: '0px 8px 9px -5px #{$shadow-color}',
+    16: '0px 8px 10px -5px #{$shadow-color}',
+    17: '0px 8px 11px -5px #{$shadow-color}',
+    18: '0px 9px 11px -5px #{$shadow-color}',
+    19: '0px 9px 12px -6px #{$shadow-color}',
+    20: '0px 10px 13px -6px #{$shadow-color}',
+    21: '0px 10px 13px -6px #{$shadow-color}',
+    22: '0px 10px 14px -6px #{$shadow-color}',
+    23: '0px 11px 14px -7px #{$shadow-color}',
+    24: '0px 11px 15px -7px #{$shadow-color}'
+  );
+}
+
+@function _get-penumbra-map($color, $opacity) {
+  $shadow-color: if(meta.type-of($color) == color, rgba($color, $opacity * .14), $color);
+
+  @return (
+    0: '0px 0px 0px 0px #{$shadow-color}',
+    1: '0px 1px 1px 0px #{$shadow-color}',
+    2: '0px 2px 2px 0px #{$shadow-color}',
+    3: '0px 3px 4px 0px #{$shadow-color}',
+    4: '0px 4px 5px 0px #{$shadow-color}',
+    5: '0px 5px 8px 0px #{$shadow-color}',
+    6: '0px 6px 10px 0px #{$shadow-color}',
+    7: '0px 7px 10px 1px #{$shadow-color}',
+    8: '0px 8px 10px 1px #{$shadow-color}',
+    9: '0px 9px 12px 1px #{$shadow-color}',
+    10: '0px 10px 14px 1px #{$shadow-color}',
+    11: '0px 11px 15px 1px #{$shadow-color}',
+    12: '0px 12px 17px 2px #{$shadow-color}',
+    13: '0px 13px 19px 2px #{$shadow-color}',
+    14: '0px 14px 21px 2px #{$shadow-color}',
+    15: '0px 15px 22px 2px #{$shadow-color}',
+    16: '0px 16px 24px 2px #{$shadow-color}',
+    17: '0px 17px 26px 2px #{$shadow-color}',
+    18: '0px 18px 28px 2px #{$shadow-color}',
+    19: '0px 19px 29px 2px #{$shadow-color}',
+    20: '0px 20px 31px 3px #{$shadow-color}',
+    21: '0px 21px 33px 3px #{$shadow-color}',
+    22: '0px 22px 35px 3px #{$shadow-color}',
+    23: '0px 23px 36px 3px #{$shadow-color}',
+    24: '0px 24px 38px 3px #{$shadow-color}'
+  );
+}
+
+@function _get-ambient-map($color, $opacity) {
+  $shadow-color: if(meta.type-of($color) == color, rgba($color, $opacity * .12), $color);
+
+  @return (
+    0: '0px 0px 0px 0px #{$shadow-color}',
+    1: '0px 1px 3px 0px #{$shadow-color}',
+    2: '0px 1px 5px 0px #{$shadow-color}',
+    3: '0px 1px 8px 0px #{$shadow-color}',
+    4: '0px 1px 10px 0px #{$shadow-color}',
+    5: '0px 1px 14px 0px #{$shadow-color}',
+    6: '0px 1px 18px 0px #{$shadow-color}',
+    7: '0px 2px 16px 1px #{$shadow-color}',
+    8: '0px 3px 14px 2px #{$shadow-color}',
+    9: '0px 3px 16px 2px #{$shadow-color}',
+    10: '0px 4px 18px 3px #{$shadow-color}',
+    11: '0px 4px 20px 3px #{$shadow-color}',
+    12: '0px 5px 22px 4px #{$shadow-color}',
+    13: '0px 5px 24px 4px #{$shadow-color}',
+    14: '0px 5px 26px 4px #{$shadow-color}',
+    15: '0px 6px 28px 5px #{$shadow-color}',
+    16: '0px 6px 30px 5px #{$shadow-color}',
+    17: '0px 6px 32px 5px #{$shadow-color}',
+    18: '0px 7px 34px 6px #{$shadow-color}',
+    19: '0px 7px 36px 6px #{$shadow-color}',
+    20: '0px 8px 38px 7px #{$shadow-color}',
+    21: '0px 8px 40px 7px #{$shadow-color}',
+    22: '0px 8px 42px 7px #{$shadow-color}',
+    23: '0px 9px 44px 8px #{$shadow-color}',
+    24: '0px 9px 46px 8px #{$shadow-color}'
+  );
+}
+
+// The default duration value for elevation transitions.
+$transition-duration: 280ms !default;
+
+// The default easing value for elevation transitions.
+$transition-timing-function: variables.$fast-out-slow-in-timing-function;
+
+// The default color for elevation shadows.
+$color: black !default;
+
+// The default opacity scaling value for elevation shadows.
+$opacity: 1 !default;
+
+// Prefix for elevation-related selectors.
+$prefix: 'mat-elevation-z';
+
+// Applies the correct css rules to an element to give it the elevation specified by $zValue.
+// The $zValue must be between 0 and 24.
+@mixin elevation($zValue, $color: $color, $opacity: $opacity) {
+  @if meta.type-of($zValue) != number or not math.is-unitless($zValue) {
+    @error '$zValue must be a unitless number';
+  }
+  @if $zValue < 0 or $zValue > 24 {
+    @error '$zValue must be between 0 and 24';
+  }
+
+  box-shadow:
+    #{map.get(_get-umbra-map($color, $opacity), $zValue)},
+    #{map.get(_get-penumbra-map($color, $opacity), $zValue)},
+    #{map.get(_get-ambient-map($color, $opacity), $zValue)};
+}
+
+// Applies the elevation to an element in a manner that allows
+// consumers to override it via the Material elevation classes.
+@mixin overridable-elevation(
+  $zValue,
+  $color: $color,
+  $opacity: $opacity) {
+  &:not([class*='#{$prefix}']) {
+    @include elevation($zValue, $color, $opacity);
+  }
+}
+
+// Returns a string that can be used as the value for a transition property for elevation.
+// Calling this function directly is useful in situations where a component needs to transition
+// more than one property.
+//
+// .foo {
+//   transition: mat-elevation-transition-property-value(), opacity 100ms ease;
+// }
+@function private-transition-property-value(
+  $duration: $transition-duration,
+  $easing: $transition-timing-function) {
+  @return box-shadow #{$duration} #{$easing};
+}
+
+// Applies the correct css rules needed to have an element transition between elevations.
+// This mixin should be applied to elements whose elevation values will change depending on their
+// context (e.g. when active or disabled).
+//
+// NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can
+// be used in the same way by clients.
+@mixin elevation-transition(
+  $duration: $transition-duration,
+  $easing: $transition-timing-function) {
+  transition: private-transition-property-value($duration, $easing);
+}

package/core/style/_private.scss

@@ -0,0 +1,41 @@
+@use 'sass:map';
+@use './elevation';
+
+@mixin private-theme-elevation($zValue, $config, $opacity: elevation.$opacity) {
+  $foreground: map.get($config, foreground);
+  $elevation-color: map.get($foreground, elevation);
+  $elevation-color-or-default: if($elevation-color == null, elevation.$color, $elevation-color);
+
+  @include elevation.elevation($zValue, $elevation-color-or-default, $opacity);
+}
+
+@mixin private-theme-overridable-elevation($zValue, $config, $opacity: elevation.$opacity) {
+  $foreground: map.get($config, foreground);
+  $elevation-color: map.get($foreground, elevation);
+  $elevation-color-or-default: if($elevation-color == null, elevation.$color, $elevation-color);
+
+  @include elevation.overridable-elevation($zValue, $elevation-color-or-default, $opacity);
+}
+
+// If the mat-animation-noop class is present on the components root element,
+// prevent non css animations from running.
+// NOTE: Currently this mixin should only be used with components that do not
+// have any projected content.
+@mixin private-animation-noop() {
+  // @at-root is used to steps outside of the hierarchy of the scss rules. This is
+  // done to allow a class to be added to be added to base of the scss nesting
+  // context.
+  // For example:
+  // .my-root {
+  //   .my-subclass {
+  //      @include mat-private-animation-noop();
+  //    }
+  // }
+  // results in:
+  // ._mat-animation-noopable.my-root .my-subclass { ... }
+  @at-root ._mat-animation-noopable#{&} {
+    transition: none;
+    animation: none;
+    @content;
+  }
+}