@ng-matero/extensions 12.7.0 → 13.0.0

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;
+  }
+}

package/core/style/_variables.scss

@@ -0,0 +1,44 @@
+// Media queries
+// TODO(josephperrott): Change $mat-xsmall and $mat-small usages to rely on BreakpointObserver,
+$xsmall: 'max-width: 599px';
+$small: 'max-width: 959px';
+
+// TODO: Revisit all z-indices before beta
+// z-index master list
+
+$z-index-fab: 20 !default;
+$z-index-drawer: 100 !default;
+
+// Global constants
+$pi: 3.14159265;
+
+// Padding between input toggles and their labels
+$toggle-padding: 8px !default;
+// Width and height of input toggles
+$toggle-size: 20px !default;
+
+// Easing Curves
+// TODO(jelbourn): all of these need to be revisited
+
+// The default animation curves used by material design.
+$linear-out-slow-in-timing-function: cubic-bezier(0, 0, .2, .1) !default;
+$fast-out-slow-in-timing-function: cubic-bezier(.4, 0, .2, 1) !default;
+$fast-out-linear-in-timing-function: cubic-bezier(.4, 0, 1, 1) !default;
+
+$ease-in-out-curve-function: cubic-bezier(.35, 0, .25, 1) !default;
+
+$swift-ease-out-duration: 400ms !default;
+$swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
+$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
+
+$swift-ease-in-duration: 300ms !default;
+$swift-ease-in-timing-function: cubic-bezier(.55, 0, .55, .2) !default;
+$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;
+
+$swift-ease-in-out-duration: 500ms !default;
+$swift-ease-in-out-timing-function: $ease-in-out-curve-function !default;
+$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
+
+$swift-linear-duration: 80ms !default;
+$swift-linear-timing-function: linear !default;
+$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;

package/core/style/_vendor-prefixes.scss

@@ -0,0 +1,60 @@
+/* stylelint-disable value-no-vendor-prefix */
+/* stylelint-disable selector-no-vendor-prefix */
+/* stylelint-disable property-no-vendor-prefix */
+// stylelint-disable material/no-prefixes
+@mixin user-select($value) {
+  -webkit-user-select: $value;
+  -moz-user-select: $value;
+  user-select: $value;
+}
+
+@mixin input-placeholder {
+  &::placeholder {
+    @content;
+  }
+
+  &::-moz-placeholder {
+    @content;
+  }
+
+  &::-webkit-input-placeholder {
+    @content;
+  }
+
+  // Note: this isn't necessary anymore since we don't support
+  // IE, but it caused some presubmit failures in #23416.
+  &:-ms-input-placeholder {
+    @content;
+  }
+}
+
+@mixin cursor-grab {
+  cursor: -webkit-grab;
+  cursor: grab;
+}
+
+@mixin cursor-grabbing {
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
+}
+
+@mixin backface-visibility($value) {
+  -webkit-backface-visibility: $value;
+  backface-visibility: $value;
+}
+
+@mixin position-sticky($important: false) {
+  position: -webkit-sticky #{if($important, '!important', '')};
+  position: sticky #{if($important, '!important', '')};
+}
+
+@mixin private-color-adjust($value) {
+  -webkit-print-color-adjust: $value;
+  color-adjust: $value;
+}
+
+@mixin private-background-clip($value) {
+  -webkit-background-clip: $value;
+  background-clip: $value;
+}
+// stylelint-enable