@ng-matero/extensions 16.3.1 → 17.0.0

package/select/select.scss

@@ -1,4 +1,4 @@
-@use '../core/style/elevation';
+@use '@angular/material' as mat;
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mtx/select' as tokens-mtx-select;
 
@@ -11,175 +11,150 @@ $_tokens: tokens-mtx-select.$prefix, tokens-mtx-select.get-token-slots();
 }
 
 .ng-select {
-  padding-right: 16px;
-  padding-left: 16px;
-  margin-right: -16px;
-  margin-left: -16px;
+  @include token-utils.use-tokens($_tokens...) {
+    $filled-padding-top: token-utils.get-token-variable(filled-padding-top);
+    $filled-padding-bottom: token-utils.get-token-variable(filled-padding-bottom);
+    $vertical-padding: token-utils.get-token-variable(vertical-padding);
+
+    // TODO: use `mat-form-field` token
+    padding: var($filled-padding-top) 16px var($filled-padding-bottom);
+    margin: calc(var($filled-padding-top) * -1) -16px calc(var($filled-padding-bottom) * -1);
+
+    .mdc-text-field--outlined &,
+    .mdc-text-field--no-label & {
+      padding-top: var($vertical-padding);
+      padding-bottom: var($vertical-padding);
+      margin-top: calc(var($vertical-padding) * -1);
+      margin-bottom: calc(var($vertical-padding) * -1);
+    }
 
-  .ng-select-container {
-    align-items: center;
+    .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-value-container {
+        align-items: center;
 
-      .ng-input {
-        >input {
+        .ng-input>input {
           padding: 0;
           color: inherit;
           font: inherit;
         }
       }
-    }
 
-    .ng-clear-wrapper {
-      width: 24px;
-      text-align: center;
+      .ng-clear-wrapper {
+        width: 24px;
+        text-align: center;
+      }
     }
-  }
 
-  .ng-placeholder {
-    transition: opacity 200ms;
-    opacity: 1;
+    .ng-placeholder {
+      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;
+      .mat-form-field-hide-placeholder & {
+        opacity: 0;
+      }
     }
-  }
 
-  .ng-has-value .ng-placeholder {
-    display: none;
-  }
+    .ng-has-value .ng-placeholder {
+      display: none;
+    }
 
-  .ng-clear-wrapper {
-    @include token-utils.use-tokens($_tokens...) {
+    .ng-clear-wrapper {
       @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...) {
+    &.ng-select-disabled {
+      .ng-value {
         @include token-utils.create-token-slot(color, disabled-text-color);
       }
     }
-  }
 
-  &.ng-select-opened {
-    .ng-arrow-wrapper {
-      .ng-arrow {
+    &.ng-select-opened {
+      .ng-arrow-wrapper .ng-arrow {
         top: -2px;
         border-width: 0 5px 5px;
       }
     }
-  }
 
-  &.ng-select-single {
-    // vertical align with material form field
-    &.ng-select-filtered {
-      .ng-placeholder {
+    &.ng-select-single {
+      &.ng-select-filtered .ng-placeholder {
         display: initial;
         visibility: hidden;
       }
     }
 
-    .ng-select-container {
-      .ng-value-container {
-        // vertical align with material form field
-        .ng-placeholder,
-        .ng-value {
-          &::after {
-            display: inline-block;
-            content: '';
-          }
-        }
-      }
-    }
-  }
-
-  &.ng-select-multiple {
-    .ng-select-container {
-      .ng-value-container {
-        .ng-value {
-          margin: 2px 4px 2px 0;
-          border-radius: 16px;
-          font-size: .875em;
-          line-height: 18px;
+    &.ng-select-multiple {
+      .ng-select-container .ng-value-container .ng-value {
+        margin: 2px 4px 2px 0;
+        border-radius: 16px;
+        font-size: .875em;
+        line-height: 18px;
 
-          @include token-utils.use-tokens($_tokens...) {
-            @include token-utils.create-token-slot(background-color, multiple-value-background-color);
+        @include token-utils.create-token-slot(background-color, multiple-value-background-color);
 
-            $border-color: token-utils.get-token-variable(multiple-value-border-color);
+        $border-color: token-utils.get-token-variable(multiple-value-border-color);
 
-            border: 1px solid var($border-color);
-          }
+        border: 1px solid var($border-color);
 
-          @include rtl {
-            margin-right: auto;
-            margin-left: 4px;
-          }
+        @include rtl {
+          margin-right: auto;
+          margin-left: 4px;
+        }
 
-          &.ng-value-disabled {
-            opacity: .4;
-          }
+        &.ng-value-disabled {
+          opacity: .4;
+        }
 
-          .ng-value-label {
-            display: inline-block;
-            margin: 0 8px;
-          }
+        .ng-value-label {
+          display: inline-block;
+          margin: 0 8px;
+        }
 
-          .ng-value-icon {
-            display: inline-block;
-            width: 18px;
-            height: 18px;
-            border-radius: 100%;
-            text-align: center;
+        .ng-value-icon {
+          display: inline-block;
+          width: 18px;
+          height: 18px;
+          border-radius: 100%;
+          text-align: center;
 
-            &.left {
-              margin-right: -4px;
+          &.left {
+            margin-right: -4px;
 
-              @include rtl {
-                margin-left: -4px;
-                margin-right: auto;
-              }
+            @include rtl {
+              margin-left: -4px;
+              margin-right: auto;
             }
+          }
 
-            &.right {
-              margin-left: -4px;
+          &.right {
+            margin-left: -4px;
 
-              @include rtl {
-                margin-right: -4px;
-                margin-left: auto;
-              }
+            @include rtl {
+              margin-right: -4px;
+              margin-left: auto;
             }
+          }
 
-            &:hover {
-              @include token-utils.use-tokens($_tokens...) {
-                @include token-utils.create-token-slot(background-color, multiple-value-icon-hover-background-color);
-              }
-            }
+          &:hover {
+            @include token-utils.create-token-slot(background-color, multiple-value-icon-hover-background-color);
           }
         }
       }
     }
-  }
 
-  .ng-arrow-wrapper {
-    width: 10px;
-  }
+    .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);
@@ -209,28 +184,30 @@ $_tokens: tokens-mtx-select.$prefix, tokens-mtx-select.get-token-slots();
 }
 
 .ng-dropdown-panel {
-  &.ng-select-bottom {
-    top: 100%;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
+  @include token-utils.use-tokens($_tokens...) {
+    &.ng-select-bottom {
+      top: 100%;
 
-    @include elevation.elevation(8);
-  }
+      @include token-utils.create-token-slot(border-bottom-left-radius, container-shape);
+      @include token-utils.create-token-slot(border-bottom-right-radius, container-shape);
 
-  &.ng-select-top {
-    bottom: 100%;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
+      @include mat.elevation(8);
+    }
 
-    @include elevation.elevation(8);
-  }
+    &.ng-select-top {
+      bottom: 100%;
 
-  .ng-dropdown-header,
-  .ng-dropdown-footer {
-    padding: 14px 16px;
-  }
+      @include token-utils.create-token-slot(border-top-left-radius, container-shape);
+      @include token-utils.create-token-slot(border-top-right-radius, container-shape);
+
+      @include mat.elevation(8);
+    }
+
+    .ng-dropdown-header,
+    .ng-dropdown-footer {
+      padding: 14px 16px;
+    }
 
-  @include token-utils.use-tokens($_tokens...) {
     @include token-utils.create-token-slot(background-color, panel-background-color);
 
     $border-color: token-utils.get-token-variable(panel-divider-color);

package/split/_split-theme.scss

@@ -1,51 +1,81 @@
-@use '../core/theming/theming';
+@use '@angular/material' as mat;
 @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);
-
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mtx-split.$prefix,
-      tokens-mtx-split.get-color-tokens($config));
+@mixin base($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, base));
   }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mtx-split.$prefix,
+        tokens-mtx-split.get-unthemable-tokens());
+    }
+  }
+}
 
-  .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);
+@mixin color($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, color));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mtx-split.$prefix,
+        tokens-mtx-split.get-color-tokens($theme));
     }
 
-    &.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);
+    .mtx-split>.mtx-split-gutter {
+      &.mat-accent:hover {
+        $accent-tokens: tokens-mtx-split.private-get-color-palette-color-tokens($theme, accent);
+        @include token-utils.create-token-values(tokens-mtx-split.$prefix, $accent-tokens);
+      }
+
+      &.mat-warn:hover {
+        $warn-tokens: tokens-mtx-split.private-get-color-palette-color-tokens($theme, warn);
+        @include token-utils.create-token-values(tokens-mtx-split.$prefix, $warn-tokens);
+      }
     }
   }
 }
 
-@mixin typography($config-or-theme) {}
-
-@mixin density($config-or-theme) {}
-
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+@mixin typography($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, typography));
+  }
+  @else {}
+}
 
-  @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);
+@mixin density($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, density));
+  }
+  @else {}
+}
 
-    @if $color !=null {
-      @include color($color);
+@mixin theme($theme) {
+  @include mat.private-check-duplicate-theme-styles($theme, 'mtx-split') {
+    @if mat.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(mat.get-theme-tokens($theme));
     }
-
-    @if $density !=null {
-      @include density($density);
+    @else {
+      @include base($theme);
+      @if mat.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if mat.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if mat.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
+  }
+}
 
-    @if $typography !=null {
-      @include typography($typography);
-    }
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include token-utils.create-token-values(tokens-mtx-split.$prefix,
+      map.get($tokens, tokens-mtx-split.$prefix));
   }
 }

package/split/split.scss

@@ -41,15 +41,13 @@ $_tokens: tokens-mtx-split.$prefix, tokens-mtx-split.get-token-slots();
   > .mtx-split-pane {
     flex-grow: 0;
     flex-shrink: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
+    overflow: hidden auto;
 
     /* When <mtx-split-pane [visible]="false"> force size to 0. */
 
     &.mtx-split-pane-hidden {
       flex: 0 1 0 !important;
-      overflow-x: hidden;
-      overflow-y: hidden;
+      overflow: hidden hidden;
     }
   }
 

package/tooltip/_tooltip-theme.scss

@@ -1,53 +1,85 @@
+@use 'sass:map';
 @use '@material/tooltip/plain-tooltip-theme' as mdc-plain-tooltip-theme;
-@use '../core/theming/theming';
-@use '../core/typography/typography';
-@use '../core/tokens/m2/mdc/plain-tooltip' as m2-mdc-plain-tooltip;
+@use '@angular/material' as mat;
+@use '../core/style/sass-utils';
+@use '../core/tokens/m2/mdc/plain-tooltip' as tokens-mdc-plain-tooltip;
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $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 base($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, base));
+  }
+  @else {
+    // Add default values for tokens not related to color, typography, or density.
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-plain-tooltip-theme.theme(tokens-mdc-plain-tooltip.get-unthemable-tokens());
+    }
   }
 }
 
-@mixin typography($config-or-theme) {
-  $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);
+@mixin color($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, color));
+  }
+  @else {
+    $mdc-tooltip-color-tokens: tokens-mdc-plain-tooltip.get-color-tokens($theme);
 
-  // Add values for MDC tooltip tokens.
-  .mtx-mdc-tooltip {
-    @include mdc-plain-tooltip-theme.theme($mdc-tooltip-typography-tokens);
+    // Add values for MDC tooltip tokens.
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-plain-tooltip-theme.theme($mdc-tooltip-color-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);
+@mixin typography($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, typography));
+  }
+  @else {
+    $mdc-tooltip-typography-tokens: tokens-mdc-plain-tooltip.get-typography-tokens($theme);
 
-  // Add values for MDC tooltip tokens.
-  .mtx-mdc-tooltip {
-    @include mdc-plain-tooltip-theme.theme($mdc-tooltip-density-tokens);
+    // Add values for MDC tooltip tokens.
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-plain-tooltip-theme.theme($mdc-tooltip-typography-tokens);
+    }
   }
 }
 
-@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-tooltip') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+@mixin density($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, density));
+  }
+  @else {
+    $mdc-tooltip-density-tokens: tokens-mdc-plain-tooltip.get-density-tokens($theme);
 
-    @if $color != null {
-      @include color($color);
+    // Add values for MDC tooltip tokens.
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-plain-tooltip-theme.theme($mdc-tooltip-density-tokens);
     }
-    @if $density != null {
-      @include density($density);
+  }
+}
+
+@mixin theme($theme) {
+  @include mat.private-check-duplicate-theme-styles($theme, 'mtx-tooltip') {
+    @if mat.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(mat.get-theme-tokens($theme));
     }
-    @if $typography != null {
-      @include typography($typography);
+    @else {
+      @include base($theme);
+      @if mat.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if mat.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if mat.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if $tokens != () {
+    @include mdc-plain-tooltip-theme.theme(map.get($tokens, tokens-mdc-plain-tooltip.$prefix));
+  }
+}

package/_theming.scss

@@ -1,16 +0,0 @@
-@forward './alert/alert-theme.import';
-@forward './button/button-theme.import';
-@forward './colorpicker/colorpicker-theme.import';
-@forward './datetimepicker/datetimepicker-theme.import';
-@forward './drawer/drawer-theme.import';
-@forward './grid/grid-theme.import';
-@forward './loader/loader-theme.import';
-@forward './popover/popover-theme.import';
-@forward './progress/progress-theme.import';
-@forward './select/select-theme.import';
-@forward './split/split-theme.import';
-@forward './tooltip/tooltip-theme.import';
-
-@forward './core/theming/all-theme' show material-extensions-theme;
-@forward './core/color/all-color' show material-extensions-color;
-@forward './core/density/all-density' show material-extensions-density;

package/alert/_alert-theme.import.scss

@@ -1,2 +0,0 @@
-@forward 'alert-theme' hide color, density, theme, typography;
-@forward 'alert-theme' as mtx-alert-*;

package/button/_button-theme.import.scss

@@ -1,2 +0,0 @@
-@forward 'button-theme' hide color, density, theme, typography;
-@forward 'button-theme' as mtx-button-*;

package/colorpicker/_colorpicker-theme.import.scss

@@ -1,2 +0,0 @@
-@forward 'colorpicker-theme' hide color, density, theme, typography;
-@forward 'colorpicker-theme' as mtx-colorpicker-*;