@ng-matero/extensions 16.1.2 → 16.2.0

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) {

package/tooltip/tooltip.scss

@@ -1,20 +1,21 @@
-@use '@material/tooltip/tooltip';
-@use '@material/tooltip/tooltip-theme';
-@use '@material/tooltip/plain-tooltip-theme';
-@use '../core/mdc-helpers/mdc-helpers';
-
-@include mdc-helpers.disable-mdc-fallback-declarations {
-  // Only include the structural styles, because we handle the animation ourselves.
-  @include tooltip.static-styles($query: structure);
-  @include plain-tooltip-theme.theme-styles((
-    container-shape: tooltip-theme.$border-radius,
-    container-color: #fff,
-    supporting-text-color: #000,
-    supporting-text-font: inherit,
-    supporting-text-size: inherit,
-    supporting-text-tracking: inherit,
-    supporting-text-weight: inherit,
-  ));
+@use '@material/theme/custom-properties' as mdc-custom-properties;
+@use '@material/tooltip/tooltip' as mdc-tooltip;
+@use '@material/tooltip/plain-tooltip-theme' as mdc-plain-tooltip-theme;
+@use '../core/tokens/m2/mdc/plain-tooltip' as m2-mdc-plain-tooltip;
+
+@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
+  $mdc-tooltip-token-slots: m2-mdc-plain-tooltip.get-token-slots();
+
+  // Add the MDC tooltip static styles.
+  @include mdc-tooltip.static-styles();
+
+  .mtx-mdc-tooltip {
+    // Add the official slots for the MDC tooltip.
+    @include mdc-plain-tooltip-theme.theme-styles($mdc-tooltip-token-slots);
+
+    // Add default values for MDC tooltip tokens that aren't outputted by the theming API.
+    @include mdc-plain-tooltip-theme.theme(m2-mdc-plain-tooltip.get-unthemable-tokens());
+  }
 }
 
 // Fix tooltip' positioning when mat-tooltip and mtx-tooltip coexist.

package/esm2022/slider/mtxSlider.mjs

@@ -1,5 +0,0 @@
-/**
- * Generated bundle index. Do not edit.
- */
-export * from './public-api';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXR4U2xpZGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvZXh0ZW5zaW9ucy9zbGlkZXIvbXR4U2xpZGVyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxjQUFjLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vcHVibGljLWFwaSc7XG4iXX0=

package/esm2022/slider/public-api.mjs

@@ -1,3 +0,0 @@
-export * from './slider-module';
-export * from './slider';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2V4dGVuc2lvbnMvc2xpZGVyL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLFVBQVUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vc2xpZGVyLW1vZHVsZSc7XG5leHBvcnQgKiBmcm9tICcuL3NsaWRlcic7XG4iXX0=

package/esm2022/slider/slider-module.mjs

@@ -1,19 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { MatCommonModule } from '@angular/material/core';
-import { MtxSlider } from './slider';
-import * as i0 from "@angular/core";
-export class MtxSliderModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: MtxSliderModule, declarations: [MtxSlider], imports: [CommonModule, MatCommonModule], exports: [MtxSlider, MatCommonModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxSliderModule, imports: [CommonModule, MatCommonModule, MatCommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxSliderModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, MatCommonModule],
-                    exports: [MtxSlider, MatCommonModule],
-                    declarations: [MtxSlider],
-                }]
-        }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGVyLW1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2V4dGVuc2lvbnMvc2xpZGVyL3NsaWRlci1tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3pELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxVQUFVLENBQUM7O0FBT3JDLE1BQU0sT0FBTyxlQUFlO2lJQUFmLGVBQWU7a0lBQWYsZUFBZSxpQkFGWCxTQUFTLGFBRmQsWUFBWSxFQUFFLGVBQWUsYUFDN0IsU0FBUyxFQUFFLGVBQWU7a0lBR3pCLGVBQWUsWUFKaEIsWUFBWSxFQUFFLGVBQWUsRUFDbEIsZUFBZTs7MkZBR3pCLGVBQWU7a0JBTDNCLFFBQVE7bUJBQUM7b0JBQ1IsT0FBTyxFQUFFLENBQUMsWUFBWSxFQUFFLGVBQWUsQ0FBQztvQkFDeEMsT0FBTyxFQUFFLENBQUMsU0FBUyxFQUFFLGVBQWUsQ0FBQztvQkFDckMsWUFBWSxFQUFFLENBQUMsU0FBUyxDQUFDO2lCQUMxQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTWF0Q29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvY29yZSc7XG5pbXBvcnQgeyBNdHhTbGlkZXIgfSBmcm9tICcuL3NsaWRlcic7XG5cbkBOZ01vZHVsZSh7XG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIE1hdENvbW1vbk1vZHVsZV0sXG4gIGV4cG9ydHM6IFtNdHhTbGlkZXIsIE1hdENvbW1vbk1vZHVsZV0sXG4gIGRlY2xhcmF0aW9uczogW010eFNsaWRlcl0sXG59KVxuZXhwb3J0IGNsYXNzIE10eFNsaWRlck1vZHVsZSB7fVxuIl19