@ng-matero/extensions 17.3.5 → 18.0.0

package/README.md

@@ -57,6 +57,17 @@ You can also [using a pre-built theme](https://material.angular.io/guide/theming
 @import '@ng-matero/extensions/prebuilt-themes/indigo-pink.css'
 ```
 
+## Development
+
+```bash
+$ git clone git@github.com:ng-matero/extensions.git
+$ cd extensions
+$ yarn
+$ yarn run start
+```
+
+Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
 ## License
 
 MIT

package/_index.scss

@@ -23,7 +23,13 @@ split-color, split-typography, split-density, split-base;
 @forward './tooltip/tooltip-theme' as tooltip-* show tooltip-theme,
 tooltip-color, tooltip-typography, tooltip-density, tooltip-base;
 
+@forward './core/theming/definition' show define-theme, define-colors, define-typography,
+  define-density;
+@forward './core/theming/color-api-backwards-compatibility' show
+  color-variants-backwards-compatibility;
+
 @forward './core/tokens/m2' show m2-tokens-from-theme;
+@forward './core/tokens/m3-tokens' show system-level-colors, system-level-typography;
 
 @forward './core/theming/all-theme' show all-component-themes, all-component-bases;
 @forward './core/color/all-color' show all-component-colors;

package/alert/_alert-theme.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '../core/style/sass-utils';
 @use '../core/theming/inspection';
 @use '../core/theming/validation';
 @use '../core/tokens/token-utils';
@@ -11,7 +10,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
   @else {
-    @include sass-utils.current-selector-or-root() {
+    @include mat.private-current-selector-or-root() {
       @include token-utils.create-token-values(tokens-mtx-alert.$prefix,
         tokens-mtx-alert.get-unthemable-tokens());
     }
@@ -23,7 +22,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   }
   @else {
-    @include sass-utils.current-selector-or-root() {
+    @include mat.private-current-selector-or-root() {
       @include token-utils.create-token-values(tokens-mtx-alert.$prefix,
         tokens-mtx-alert.get-color-tokens($theme));
     }

package/colorpicker/_colorpicker-theme.scss

@@ -1,7 +1,6 @@
 @use 'sass:color';
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '../core/style/sass-utils';
 @use '../core/theming/inspection';
 @use '../core/theming/validation';
 @use '../core/tokens/token-utils';
@@ -12,7 +11,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
   @else {
-    @include sass-utils.current-selector-or-root() {
+    @include mat.private-current-selector-or-root() {
       @include token-utils.create-token-values(tokens-mtx-colorpicker.$prefix,
         tokens-mtx-colorpicker.get-unthemable-tokens());
     }
@@ -24,7 +23,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   }
   @else {
-    @include sass-utils.current-selector-or-root() {
+    @include mat.private-current-selector-or-root() {
       @include token-utils.create-token-values(tokens-mtx-colorpicker.$prefix,
         tokens-mtx-colorpicker.get-color-tokens($theme));
     }

package/colorpicker/colorpicker.d.ts

@@ -1,6 +1,6 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';
-import { ChangeDetectorRef, EventEmitter, InjectionToken, NgZone, OnChanges, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter, InjectionToken, OnChanges, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
 import { ThemePalette } from '@angular/material/core';
 import { Subject } from 'rxjs';
 import { ColorEvent } from 'ngx-color';
@@ -35,7 +35,6 @@ export declare class MtxColorpickerContent implements OnDestroy {
 }
 export declare class MtxColorpicker implements OnChanges, OnDestroy {
     private _overlay;
-    private _ngZone;
     private _viewContainerRef;
     private _dir;
     private _document;
@@ -92,7 +91,8 @@ export declare class MtxColorpicker implements OnChanges, OnDestroy {
     readonly _disabledChange: Subject<boolean>;
     /** Emits new selected color when selected color changes. */
     readonly _selectedChanged: Subject<string>;
-    constructor(_overlay: Overlay, _ngZone: NgZone, _viewContainerRef: ViewContainerRef, scrollStrategy: any, _dir: Directionality, _document: any);
+    private _injector;
+    constructor(_overlay: Overlay, _viewContainerRef: ViewContainerRef, scrollStrategy: any, _dir: Directionality, _document: any);
     ngOnChanges(): void;
     ngOnDestroy(): void;
     /** Selects the given color. */
@@ -118,7 +118,7 @@ export declare class MtxColorpicker implements OnChanges, OnDestroy {
     private _setConnectedPositions;
     /** Gets an observable that will emit when the overlay is supposed to be closed. */
     private _getCloseStream;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MtxColorpicker, [null, null, null, null, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxColorpicker, [null, null, null, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MtxColorpicker, "mtx-colorpicker", ["mtxColorpicker"], { "content": { "alias": "content"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "xPosition": { "alias": "xPosition"; "required": false; }; "yPosition": { "alias": "yPosition"; "required": false; }; "restoreFocus": { "alias": "restoreFocus"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; "color": { "alias": "color"; "required": false; }; "format": { "alias": "format"; "required": false; }; }, { "openedStream": "opened"; "closedStream": "closed"; }, never, never, true, never>;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_restoreFocus: unknown;

package/{experimental/theming/_color-api-back-compat.scss → core/theming/_color-api-backwards-compatibility.scss}

@@ -31,7 +31,7 @@ $_overrides-only: true;
   }
 }
 
-@mixin color-variants-back-compat($theme) {
+@mixin color-variants-backwards-compatibility($theme) {
   .mat-primary {
     @include color-variant-styles($theme, primary);
   }

package/{experimental → core}/theming/_config-validation.scss

@@ -3,7 +3,6 @@
 @use 'sass:meta';
 @use 'sass:string';
 @use '@angular/material' as mat;
-@use '@angular/material-experimental' as matx;
 
 /// Creates an error message by finding `$config` in the existing message and appending a suffix to
 /// it.
@@ -34,13 +33,13 @@
     @return true;
   }
   $keys: map.keys($palette);
-  $expected-keys: map.keys(matx.$m3-red-palette);
+  $expected-keys: map.keys(mat.$red-palette);
   @if mat.private-validate-allowed-values($keys, $expected-keys...) or
       mat.private-validate-required-values($keys, $expected-keys...) {
     @return true;
   }
   $nv-keys: map.keys(map.get($palette, neutral-variant));
-  $expected-nv-keys: map.keys(map.get(matx.$m3-red-palette, neutral-variant));
+  $expected-nv-keys: map.keys(map.get(mat.$red-palette, neutral-variant));
   @if mat.private-validate-allowed-values($nv-keys, $expected-nv-keys...) or
       mat.private-validate-required-values($nv-keys, $expected-nv-keys...) {
     @return true;
@@ -89,7 +88,7 @@
   @if $err {
     @return (#{'$config should be a color configuration object. Got:'} $config);
   }
-  $allowed: (theme-type, primary, tertiary);
+  $allowed: (theme-type, primary, tertiary, use-system-variables);
   $err: mat.private-validate-allowed-values(map.keys($config or ()), $allowed...);
   @if $err {
     @return (
@@ -128,7 +127,14 @@
   @if $err {
     @return (#{'$config should be a typography configuration object. Got:'} $config);
   }
-  $allowed: (brand-family, plain-family, bold-weight, medium-weight, regular-weight);
+  $allowed: (
+    brand-family,
+    plain-family,
+    bold-weight,
+    medium-weight,
+    regular-weight,
+    use-system-variables
+  );
   $err: mat.private-validate-allowed-values(map.keys($config or ()), $allowed...);
   @if $err {
     @return (

package/{experimental → core}/theming/_definition.scss

@@ -3,7 +3,7 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 @use '@angular/material-experimental' as matx;
-@use './m3-tokens';
+@use '../tokens/m3-tokens';
 @use './config-validation';
 
 /// Map key used to store internals of theme config.
@@ -38,8 +38,9 @@ $theme-version: 1;
   }
 
   $type: map.get($config, theme-type) or light;
-  $primary: map.get($config, primary) or matx.$m3-violet-palette;
+  $primary: map.get($config, primary) or mat.$violet-palette;
   $tertiary: map.get($config, tertiary) or $primary;
+  // mat.$private-use-system-color-variables: map.get($config, use-system-variables) or false;
 
   @return (
     $internals: (
@@ -73,6 +74,7 @@ $theme-version: 1;
   $bold: map.get($config, bold-weight) or 700;
   $medium: map.get($config, medium-weight) or 500;
   $regular: map.get($config, regular-weight) or 400;
+  // mat.$private-use-system-typography-variables: map.get($config, use-system-variables) or false;
 
   @return (
     $internals: (

package/core/theming/prebuilt/azure-blue.scss

@@ -0,0 +1,26 @@
+@use '@angular/material' as mat;
+@use '../definition' as mtx;
+@use '../color-api-backwards-compatibility';
+@use '../all-theme';
+
+$config: (
+  color: (
+    theme-type: light,
+    primary: mat.$azure-palette,
+    tertiary: mat.$blue-palette,
+  ),
+  density: (
+    scale: 0,
+  )
+);
+
+$theme: mat.private-deep-merge-all(
+  mat.define-theme($config),
+  mtx.define-theme($config),
+);
+
+html {
+  @include all-theme.all-component-themes($theme);
+}
+
+@include color-api-backwards-compatibility.color-variants-backwards-compatibility($theme);

package/core/theming/prebuilt/cyan-orange.scss

@@ -0,0 +1,26 @@
+@use '@angular/material' as mat;
+@use '../definition' as mtx;
+@use '../color-api-backwards-compatibility';
+@use '../all-theme';
+
+$config: (
+  color: (
+    theme-type: dark,
+    primary: mat.$cyan-palette,
+    tertiary: mat.$orange-palette,
+  ),
+  density: (
+    scale: 0,
+  )
+);
+
+$theme: mat.private-deep-merge-all(
+  mat.define-theme($config),
+  mtx.define-theme($config),
+);
+
+html {
+  @include all-theme.all-component-themes($theme);
+}
+
+@include color-api-backwards-compatibility.color-variants-backwards-compatibility($theme);

package/core/theming/prebuilt/deeppurple-amber.scss

@@ -2,16 +2,16 @@
 @use '../all-theme';
 
 // Define a theme.
-$primary: mat.define-palette(mat.$deep-purple-palette);
-$accent:  mat.define-palette(mat.$amber-palette, A200, A100, A400);
+$primary: mat.m2-define-palette(mat.$m2-deep-purple-palette);
+$accent:  mat.m2-define-palette(mat.$m2-amber-palette, A200, A100, A400);
 
-$theme: mat.define-light-theme(
+$theme: mat.m2-define-light-theme(
   (
     color: (
       primary: $primary,
       accent: $accent,
     ),
-    typography: mat.define-typography-config(),
+    typography: mat.m2-define-typography-config(),
     density: 0,
   )
 );

package/core/theming/prebuilt/indigo-pink.scss

@@ -2,16 +2,16 @@
 @use '../all-theme';
 
 // Define a theme.
-$primary: mat.define-palette(mat.$indigo-palette);
-$accent:  mat.define-palette(mat.$pink-palette, A200, A100, A400);
+$primary: mat.m2-define-palette(mat.$m2-indigo-palette);
+$accent:  mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
 
-$theme: mat.define-light-theme(
+$theme: mat.m2-define-light-theme(
   (
     color: (
       primary: $primary,
       accent: $accent
     ),
-    typography: mat.define-typography-config(),
+    typography: mat.m2-define-typography-config(),
     density: 0,
   )
 );

package/core/theming/prebuilt/magenta-violet.scss

@@ -0,0 +1,26 @@
+@use '@angular/material' as mat;
+@use '../definition' as mtx;
+@use '../color-api-backwards-compatibility';
+@use '../all-theme';
+
+$config: (
+  color: (
+    theme-type: dark,
+    primary: mat.$magenta-palette,
+    tertiary: mat.$violet-palette,
+  ),
+  density: (
+    scale: 0,
+  )
+);
+
+$theme: mat.private-deep-merge-all(
+  mat.define-theme($config),
+  mtx.define-theme($config),
+);
+
+html {
+  @include all-theme.all-component-themes($theme);
+}
+
+@include color-api-backwards-compatibility.color-variants-backwards-compatibility($theme);

package/core/theming/prebuilt/pink-bluegrey.scss

@@ -2,16 +2,16 @@
 @use '../all-theme';
 
 // Define a theme.
-$primary: mat.define-palette(mat.$pink-palette, 700, 500, 900);
-$accent:  mat.define-palette(mat.$blue-grey-palette, A200, A100, A400);
+$primary: mat.m2-define-palette(mat.$m2-pink-palette, 700, 500, 900);
+$accent:  mat.m2-define-palette(mat.$m2-blue-grey-palette, A200, A100, A400);
 
-$theme: mat.define-dark-theme(
+$theme: mat.m2-define-dark-theme(
   (
     color: (
       primary: $primary,
       accent: $accent
     ),
-    typography: mat.define-typography-config(),
+    typography: mat.m2-define-typography-config(),
     density: 0,
   )
 );

package/core/theming/prebuilt/purple-green.scss

@@ -2,16 +2,16 @@
 @use '../all-theme';
 
 // Define a theme.
-$primary: mat.define-palette(mat.$purple-palette, 700, 500, 800);
-$accent:  mat.define-palette(mat.$green-palette, A200, A100, A400);
+$primary: mat.m2-define-palette(mat.$m2-purple-palette, 700, 500, 800);
+$accent:  mat.m2-define-palette(mat.$m2-green-palette, A200, A100, A400);
 
-$theme: mat.define-dark-theme(
+$theme: mat.m2-define-dark-theme(
   (
     color: (
       primary: $primary,
       accent: $accent
     ),
-    typography: mat.define-typography-config(),
+    typography: mat.m2-define-typography-config(),
     density: 0,
   )
 );

package/core/theming/prebuilt/rose-red.scss

@@ -0,0 +1,26 @@
+@use '@angular/material' as mat;
+@use '../definition' as mtx;
+@use '../color-api-backwards-compatibility';
+@use '../all-theme';
+
+$config: (
+  color: (
+    theme-type: light,
+    primary: mat.$rose-palette,
+    tertiary: mat.$red-palette,
+  ),
+  density: (
+    scale: 0,
+  )
+);
+
+$theme: mat.private-deep-merge-all(
+  mat.define-theme($config),
+  mtx.define-theme($config),
+);
+
+html {
+  @include all-theme.all-component-themes($theme);
+}
+
+@include color-api-backwards-compatibility.color-variants-backwards-compatibility($theme);

package/{experimental/theming/_m3-density.scss → core/tokens/_density.scss}

@@ -13,7 +13,6 @@
 ///   ),
 ///   ...
 /// )
-// TODO(mmalerba): Add density tokens for remaining components.
 $_density-tokens: (
 );