@ng-matero/extensions 16.1.3 → 16.3.0

package/progress/progress.scss

@@ -1,6 +1,11 @@
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mtx/progress' as tokens-mtx-progress;
+
 $progress-height: 1rem !default;
 $progress-fill-animation-timing: 1s linear infinite !default;
 
+$_tokens: tokens-mtx-progress.$prefix, tokens-mtx-progress.get-token-slots();
+
 @mixin gradient-striped($color: rgba(white, .15), $angle: 45deg) {
   background-image:
     linear-gradient(
@@ -22,6 +27,10 @@ $progress-fill-animation-timing: 1s linear infinite !default;
   overflow: hidden;
   font-size: .75rem;
   border-radius: .25rem;
+
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(background-color, track-color);
+  }
 }
 
 .mtx-progress-fill {
@@ -30,6 +39,39 @@ $progress-fill-animation-timing: 1s linear infinite !default;
   justify-content: center;
   text-align: center;
   transition: width .6s ease;
+
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(background-color, indicator-color);
+    @include token-utils.create-token-slot(color, text-color);
+  }
+}
+
+.mtx-progress-fill-info {
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(background-color, info-indicator-color);
+    @include token-utils.create-token-slot(color, info-text-color);
+  }
+}
+
+.mtx-progress-fill-success {
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(background-color, success-indicator-color);
+    @include token-utils.create-token-slot(color, success-text-color);
+  }
+}
+
+.mtx-progress-fill-warning {
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(background-color, warning-indicator-color);
+    @include token-utils.create-token-slot(color, warning-text-color);
+  }
+}
+
+.mtx-progress-fill-danger {
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(background-color, danger-indicator-color);
+    @include token-utils.create-token-slot(color, danger-text-color);
+  }
 }
 
 .mtx-progress-fill-striped {

package/select/_select-theme.scss

@@ -1,144 +1,27 @@
 @use 'sass:map';
-@use '../core/theming/theming';
 @use './select-density';
+@use '../core/theming/theming';
+@use '../core/style/sass-utils';
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mtx/select' as tokens-mtx-select;
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $warn: map.get($config, warn);
-  $background: map.get($config, background);
-  $foreground: map.get($config, foreground);
-
-  .ng-select {
-    .ng-select-container {
-      color: theming.get-color-from-palette($foreground, text);
-
-      .ng-value-container {
-        .ng-placeholder {
-          color: theming.get-color-from-palette($foreground, hint-text);
-        }
-
-        .ng-input {
-          > input {
-            color: theming.get-color-from-palette($foreground, text);
-          }
-        }
-      }
-    }
-
-    &.ng-select-disabled {
-      .ng-value {
-        color: theming.get-color-from-palette($foreground, hint-text);
-      }
-    }
-
-    &.ng-select-multiple {
-      .ng-select-container {
-        .ng-value-container {
-          .ng-value {
-            color: theming.get-color-from-palette($foreground, text);
-            background-color: theming.get-color-from-palette($background, unselected-chip);
-            border: 1px solid theming.get-color-from-palette($foreground, divider);
-
-            &.ng-value-disabled {
-              opacity: .4;
-            }
-
-            .ng-value-icon {
-              &:hover {
-                background-color: theming.get-color-from-palette($foreground, divider);
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .ng-clear-wrapper {
-      color: theming.get-color-from-palette($foreground, secondary-text);
-
-      &:hover .ng-clear {
-        color: theming.get-color-from-palette($warn);
-      }
-    }
-
-    .ng-arrow-wrapper .ng-arrow {
-      border-color: theming.get-color-from-palette($foreground, secondary-text) transparent transparent;
-    }
-
-    &.ng-select-invalid {
-      .ng-arrow-wrapper .ng-arrow {
-        border-color: theming.get-color-from-palette($warn) transparent transparent;
-      }
-    }
 
-    &.ng-select-opened {
-      .ng-arrow-wrapper .ng-arrow {
-        border-color: transparent transparent theming.get-color-from-palette($foreground, secondary-text);
-      }
-    }
-
-    &.ng-select-opened.ng-select-invalid {
-      .ng-arrow-wrapper .ng-arrow {
-        border-color: transparent transparent theming.get-color-from-palette($warn);
-      }
-    }
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mtx-select.$prefix,
+      tokens-mtx-select.get-color-tokens($config));
   }
 
   .ng-dropdown-panel {
-    background-color: theming.get-color-from-palette($background, card);
-
-    &.multiple {
-      .ng-option {
-        &.selected {
-          background: theming.get-color-from-palette($foreground, divider);
-        }
-
-        &.marked {
-          background: theming.get-color-from-palette($background, hover);
-        }
-      }
+    &.mat-accent {
+      $accent-tokens: tokens-mtx-select.private-get-color-palette-color-tokens($config, accent);
+      @include token-utils.create-token-values(tokens-mtx-select.$prefix, $accent-tokens);
     }
 
-    .ng-dropdown-header {
-      border-bottom: 1px solid theming.get-color-from-palette($foreground, divider);
-    }
-
-    .ng-dropdown-footer {
-      border-top: 1px solid theming.get-color-from-palette($foreground, divider);
-    }
-
-    .ng-dropdown-panel-items {
-      .ng-optgroup {
-        color: theming.get-color-from-palette($foreground, secondary-text);
-
-        &.ng-option-marked {
-          background: theming.get-color-from-palette($background, hover);
-        }
-
-        &.ng-option-selected {
-          background: theming.get-color-from-palette($foreground, divider);
-        }
-      }
-
-      .ng-option {
-        color: theming.get-color-from-palette($foreground, text);
-
-        &.ng-option-marked {
-          background: theming.get-color-from-palette($background, hover);
-        }
-
-        &.ng-option-selected {
-          background: theming.get-color-from-palette($foreground, divider);
-        }
-
-        &.ng-option-disabled {
-          color: theming.get-color-from-palette($foreground, hint-text);
-        }
-
-        .ng-tag-label {
-          color: theming.get-color-from-palette($foreground, hint-text);
-        }
-      }
+    &.mat-warn {
+      $warn-tokens: tokens-mtx-select.private-get-color-palette-color-tokens($config, warn);
+      @include token-utils.create-token-values(tokens-mtx-select.$prefix, $warn-tokens);
     }
   }
 }
@@ -151,18 +34,21 @@
 
 @mixin theme($theme-or-color-config) {
   $theme: theming.private-legacy-get-theme($theme-or-color-config);
+
   @include theming.private-check-duplicate-theme-styles($theme, 'mtx-select') {
     $color: theming.get-color-config($theme);
     $density: theming.get-density-config($theme);
     $typography: theming.get-typography-config($theme);
 
-    @if $color != null {
+    @if $color !=null {
       @include color($color);
     }
-    @if $density != null {
+
+    @if $density !=null {
       @include density($density);
     }
-    @if $typography != null {
+
+    @if $typography !=null {
       @include typography($typography);
     }
   }

package/select/select.d.ts

@@ -240,6 +240,7 @@ export declare class MtxSelect extends _MtxSelectMixinBase implements OnInit, On
     close(): void;
     focus(): void;
     blur(): void;
+    openChange(): void;
     static ngAcceptInputType_required: BooleanInput;
     static ngAcceptInputType_disabled: BooleanInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelect, [null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; self: true; }, { optional: true; }, { optional: true; }]>;

package/select/select.scss

@@ -1,4 +1,8 @@
-@use '@angular/material' as mat;
+@use '../core/style/elevation';
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mtx/select' as tokens-mtx-select;
+
+$_tokens: tokens-mtx-select.$prefix, tokens-mtx-select.get-token-slots();
 
 @mixin rtl {
   @at-root [dir='rtl'] #{&} {
@@ -15,13 +19,18 @@
   .ng-select-container {
     align-items: center;
 
+    @include token-utils.use-tokens($_tokens...) {
+      @include token-utils.create-token-slot(color, container-text-color);
+    }
+
     .ng-value-container {
       align-items: center;
 
       .ng-input {
-        > input {
-          font: inherit;
+        >input {
           padding: 0;
+          color: inherit;
+          font: inherit;
         }
       }
     }
@@ -36,6 +45,10 @@
     transition: opacity 200ms;
     opacity: 1;
 
+    @include token-utils.use-tokens($_tokens...) {
+      @include token-utils.create-token-slot(color, placeholder-text-color);
+    }
+
     .mat-form-field-hide-placeholder & {
       opacity: 0;
     }
@@ -45,6 +58,24 @@
     display: none;
   }
 
+  .ng-clear-wrapper {
+    @include token-utils.use-tokens($_tokens...) {
+      @include token-utils.create-token-slot(color, clear-icon-color);
+
+      &:hover .ng-clear {
+        @include token-utils.create-token-slot(color, clear-icon-hover-color);
+      }
+    }
+  }
+
+  &.ng-select-disabled {
+    .ng-value {
+      @include token-utils.use-tokens($_tokens...) {
+        @include token-utils.create-token-slot(color, disabled-text-color);
+      }
+    }
+  }
+
   &.ng-select-opened {
     .ng-arrow-wrapper {
       .ng-arrow {
@@ -86,11 +117,23 @@
           font-size: .875em;
           line-height: 18px;
 
+          @include token-utils.use-tokens($_tokens...) {
+            @include token-utils.create-token-slot(background-color, multiple-value-background-color);
+
+            $border-color: token-utils.get-token-variable(multiple-value-border-color);
+
+            border: 1px solid var($border-color);
+          }
+
           @include rtl {
             margin-right: auto;
             margin-left: 4px;
           }
 
+          &.ng-value-disabled {
+            opacity: .4;
+          }
+
           .ng-value-label {
             display: inline-block;
             margin: 0 8px;
@@ -120,6 +163,12 @@
                 margin-left: auto;
               }
             }
+
+            &:hover {
+              @include token-utils.use-tokens($_tokens...) {
+                @include token-utils.create-token-slot(background-color, multiple-value-icon-hover-background-color);
+              }
+            }
           }
         }
       }
@@ -128,10 +177,33 @@
 
   .ng-arrow-wrapper {
     width: 10px;
+  }
+
+  @include token-utils.use-tokens($_tokens...) {
+    $enabled-arrow-color: token-utils.get-token-variable(enabled-arrow-color);
+    $disabled-arrow-color: token-utils.get-token-variable(disabled-arrow-color);
+    $invalid-arrow-color: token-utils.get-token-variable(invalid-arrow-color);
 
     .ng-arrow {
       border-width: 5px 5px 2px;
       border-style: solid;
+      border-color: var($enabled-arrow-color) transparent transparent;
+    }
+
+    &.ng-select-disabled .ng-arrow {
+      border-color: var($disabled-arrow-color) transparent transparent;
+    }
+
+    &.ng-select-invalid .ng-arrow {
+      border-color: var($invalid-arrow-color) transparent transparent;
+    }
+
+    &.ng-select-opened .ng-arrow {
+      border-color: transparent transparent var($enabled-arrow-color);
+    }
+
+    &.ng-select-opened.ng-select-invalid .ng-arrow {
+      border-color: transparent transparent var($invalid-arrow-color);
     }
   }
 }
@@ -142,7 +214,7 @@
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
 
-    @include mat.elevation(4);
+    @include elevation.elevation(8);
   }
 
   &.ng-select-top {
@@ -150,7 +222,7 @@
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
 
-    @include mat.elevation(4);
+    @include elevation.elevation(8);
   }
 
   .ng-dropdown-header,
@@ -158,48 +230,87 @@
     padding: 14px 16px;
   }
 
-  .ng-dropdown-panel-items {
-    .ng-optgroup {
-      padding: 14px 16px;
-      font-weight: 500;
-      user-select: none;
-      cursor: pointer;
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(background-color, panel-background-color);
 
-      &.ng-option-disabled {
-        cursor: default;
-      }
+    $border-color: token-utils.get-token-variable(panel-divider-color);
+
+    .ng-dropdown-header {
+      border-bottom: 1px solid var($border-color);
     }
 
-    .ng-option {
-      position: relative;
-      padding: 14px 16px;
-      text-overflow: ellipsis;
-      text-decoration: none;
-      text-align: left;
-      white-space: nowrap;
-      overflow: hidden;
+    .ng-dropdown-footer {
+      border-top: 1px solid var($border-color);
+    }
 
-      @include rtl {
-        text-align: right;
-      }
+    .ng-dropdown-panel-items {
+      .ng-optgroup {
+        padding: 14px 16px;
+        font-weight: 500;
+        user-select: none;
+        cursor: pointer;
 
-      &.ng-option-child {
-        padding-left: 32px;
+        @include token-utils.create-token-slot(color, optgroup-label-text-color);
 
-        @include rtl {
-          padding-right: 32px;
-          padding-left: 0;
+        &.ng-option-disabled {
+          cursor: default;
+        }
+
+        &.ng-option-marked {
+          @include token-utils.create-token-slot(background-color, option-hover-state-background-color);
+        }
+
+        &.ng-option-selected {
+          @include token-utils.create-token-slot(background-color, option-selected-state-background-color);
+          @include token-utils.create-token-slot(color, option-selected-state-text-color);
         }
       }
 
-      .ng-tag-label {
-        padding-right: 5px;
-        font-size: 80%;
-        font-weight: 400;
+      .ng-option {
+        position: relative;
+        padding: 14px 16px;
+        text-overflow: ellipsis;
+        text-decoration: none;
+        text-align: left;
+        white-space: nowrap;
+        overflow: hidden;
+
+        @include token-utils.create-token-slot(color, option-label-text-color);
+
+        &.ng-option-marked {
+          @include token-utils.create-token-slot(background-color, option-hover-state-background-color);
+        }
+
+        &.ng-option-selected {
+          @include token-utils.create-token-slot(background-color, option-selected-state-background-color);
+          @include token-utils.create-token-slot(color, option-selected-state-text-color);
+        }
+
+        &.ng-option-disabled {
+          @include token-utils.create-token-slot(color, option-disabled-state-text-color);
+        }
 
         @include rtl {
-          padding-left: 5px;
-          padding-right: 0;
+          text-align: right;
+        }
+
+        &.ng-option-child {
+          padding-left: 32px;
+
+          @include rtl {
+            padding-right: 32px;
+            padding-left: 0;
+          }
+        }
+
+        .ng-tag-label {
+          margin-right: 6px;
+          font-size: 80%;
+
+          @include rtl {
+            margin-left: 6px;
+            margin-right: 0;
+          }
         }
       }
     }

package/split/_split-theme.scss

@@ -1,25 +1,25 @@
-@use 'sass:map';
 @use '../core/theming/theming';
+@use '../core/style/sass-utils';
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mtx/split' as tokens-mtx-split;
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $foreground: map.get($config, foreground);
 
-  .mtx-split {
-    > .mtx-split-gutter {
-      background-color: theming.get-color-from-palette($foreground, divider, .12);
-
-      &:hover {
-        background-color: theming.get-color-from-palette(map.get($config, primary), text);
-      }
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mtx-split.$prefix,
+      tokens-mtx-split.get-color-tokens($config));
+  }
 
-      &.mat-accent:hover {
-        background-color: theming.get-color-from-palette(map.get($config, accent), text);
-      }
+  .mtx-split>.mtx-split-gutter {
+    &.mat-accent:hover {
+      $accent-tokens: tokens-mtx-split.private-get-color-palette-color-tokens($config, accent);
+      @include token-utils.create-token-values(tokens-mtx-split.$prefix, $accent-tokens);
+    }
 
-      &.mat-warn:hover {
-        background-color: theming.get-color-from-palette(map.get($config, warn), text);
-      }
+    &.mat-warn:hover {
+      $warn-tokens: tokens-mtx-split.private-get-color-palette-color-tokens($config, warn);
+      @include token-utils.create-token-values(tokens-mtx-split.$prefix, $warn-tokens);
     }
   }
 }
@@ -30,18 +30,21 @@
 
 @mixin theme($theme-or-color-config) {
   $theme: theming.private-legacy-get-theme($theme-or-color-config);
+
   @include theming.private-check-duplicate-theme-styles($theme, 'mtx-split') {
     $color: theming.get-color-config($theme);
     $density: theming.get-density-config($theme);
     $typography: theming.get-typography-config($theme);
 
-    @if $color != null {
+    @if $color !=null {
       @include color($color);
     }
-    @if $density != null {
+
+    @if $density !=null {
       @include density($density);
     }
-    @if $typography != null {
+
+    @if $typography !=null {
       @include typography($typography);
     }
   }

package/split/split.scss

@@ -1,7 +1,12 @@
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mtx/split' as tokens-mtx-split;
+
 $gutter-size: 4px;
 $handle-size: 8px;
 $handle-offset: ($handle-size - $gutter-size) * .5;
 
+$_tokens: tokens-mtx-split.$prefix, tokens-mtx-split.get-token-slots();
+
 .mtx-split {
   display: flex;
   flex-wrap: nowrap;
@@ -19,6 +24,14 @@ $handle-offset: ($handle-size - $gutter-size) * .5;
     align-items: center;
     justify-content: center;
 
+    @include token-utils.use-tokens($_tokens...) {
+      @include token-utils.create-token-slot(background-color, gutter-background-color);
+
+      &:hover {
+        @include token-utils.create-token-slot(background-color, gutter-hover-state-background-color);
+      }
+    }
+
     > .mtx-split-gutter-handle {
       position: absolute;
       opacity: 0;

package/tooltip/_tooltip-theme.scss

@@ -1,41 +1,36 @@
-@use 'sass:map';
-@use '@material/tooltip/plain-tooltip-theme';
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/typography/typography' as mdc-typography;
+@use '@material/tooltip/plain-tooltip-theme' as mdc-plain-tooltip-theme;
 @use '../core/theming/theming';
-@use '../core/theming/palette';
-@use '../core/mdc-helpers/mdc-helpers';
 @use '../core/typography/typography';
+@use '../core/tokens/m2/mdc/plain-tooltip' as m2-mdc-plain-tooltip;
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  @include mdc-helpers.using-mdc-theme($config) {
-    .mtx-mdc-tooltip {
-      @include plain-tooltip-theme.theme((
-        container-color: map.get(palette.$light-theme-background-palette, tooltip),
-        supporting-text-color: mdc-theme-color.prop-value(text-primary-on-dark)
-      ));
-    }
+  $mdc-tooltip-color-tokens: m2-mdc-plain-tooltip.get-color-tokens($config);
+
+  // Add values for MDC tooltip tokens.
+  .mtx-mdc-tooltip {
+    @include mdc-plain-tooltip-theme.theme($mdc-tooltip-color-tokens);
   }
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-    theming.get-typography-config($config-or-theme));
-  @include mdc-helpers.using-mdc-typography($config) {
-    .mtx-mdc-tooltip {
-      @include plain-tooltip-theme.theme((
-        supporting-text-font: mdc-typography.get-font(caption),
-        supporting-text-size: mdc-typography.get-size(caption),
-        supporting-text-weight: mdc-typography.get-weight(caption),
-        supporting-text-tracking: mdc-typography.get-tracking(caption),
-      ));
-    }
+  $config: typography.private-typography-to-2018-config(theming.get-typography-config($config-or-theme));
+  $mdc-tooltip-typography-tokens: m2-mdc-plain-tooltip.get-typography-tokens($config);
+
+  // Add values for MDC tooltip tokens.
+  .mtx-mdc-tooltip {
+    @include mdc-plain-tooltip-theme.theme($mdc-tooltip-typography-tokens);
   }
 }
 
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
+  $mdc-tooltip-density-tokens: m2-mdc-plain-tooltip.get-density-tokens($density-scale);
+
+  // Add values for MDC tooltip tokens.
+  .mtx-mdc-tooltip {
+    @include mdc-plain-tooltip-theme.theme($mdc-tooltip-density-tokens);
+  }
 }
 
 @mixin theme($theme-or-color-config) {