@ng-matero/extensions 16.3.0 → 17.0.0

package/select/_select-theme.scss

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

package/select/option.d.ts

@@ -1,13 +1,10 @@
-import { BooleanInput } from '@angular/cdk/coercion';
 import { AfterViewChecked, ElementRef, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare class MtxOption implements OnChanges, AfterViewChecked, OnDestroy {
     elementRef: ElementRef<HTMLElement>;
     value: any;
-    get disabled(): boolean;
-    set disabled(value: boolean);
-    private _disabled;
+    disabled: boolean;
     get label(): string;
     private _previousLabel?;
     readonly stateChange$: Subject<{
@@ -19,7 +16,7 @@ export declare class MtxOption implements OnChanges, AfterViewChecked, OnDestroy
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewChecked(): void;
     ngOnDestroy(): void;
-    static ngAcceptInputType_disabled: BooleanInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxOption, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MtxOption, "mtx-option", ["mtxOption"], { "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ngAcceptInputType_disabled: unknown;
 }

package/select/select.d.ts

@@ -1,5 +1,4 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { BooleanInput } from '@angular/cdk/coercion';
 import { AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, InjectionToken, OnDestroy, OnInit, QueryList, TemplateRef } from '@angular/core';
 import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { CanDisable, ErrorStateMatcher } from '@angular/material/core';
@@ -241,9 +240,8 @@ export declare class MtxSelect extends _MtxSelectMixinBase implements OnInit, On
     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; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MtxSelect, "mtx-select", ["mtxSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "addTag": { "alias": "addTag"; "required": false; }; "addTagText": { "alias": "addTagText"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "bindLabel": { "alias": "bindLabel"; "required": false; }; "bindValue": { "alias": "bindValue"; "required": false; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; }; "clearAllText": { "alias": "clearAllText"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "clearOnBackspace": { "alias": "clearOnBackspace"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "dropdownPosition": { "alias": "dropdownPosition"; "required": false; }; "groupBy": { "alias": "groupBy"; "required": false; }; "groupValue": { "alias": "groupValue"; "required": false; }; "selectableGroup": { "alias": "selectableGroup"; "required": false; }; "selectableGroupAsModel": { "alias": "selectableGroupAsModel"; "required": false; }; "hideSelected": { "alias": "hideSelected"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "loadingText": { "alias": "loadingText"; "required": false; }; "labelForId": { "alias": "labelForId"; "required": false; }; "markFirst": { "alias": "markFirst"; "required": false; }; "maxSelectedItems": { "alias": "maxSelectedItems"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "notFoundText": { "alias": "notFoundText"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "searchFn": { "alias": "searchFn"; "required": false; }; "searchWhileComposing": { "alias": "searchWhileComposing"; "required": false; }; "selectOnTab": { "alias": "selectOnTab"; "required": false; }; "trackByFn": { "alias": "trackByFn"; "required": false; }; "inputAttrs": { "alias": "inputAttrs"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "openOnEnter": { "alias": "openOnEnter"; "required": false; }; "minTermLength": { "alias": "minTermLength"; "required": false; }; "editableSearchTerm": { "alias": "editableSearchTerm"; "required": false; }; "keyDownFn": { "alias": "keyDownFn"; "required": false; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; }; "typeToSearchText": { "alias": "typeToSearchText"; "required": false; }; "typeahead": { "alias": "typeahead"; "required": false; }; "clearSearchOnAdd": { "alias": "clearSearchOnAdd"; "required": false; }; "items": { "alias": "items"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; }, { "blurEvent": "blur"; "focusEvent": "focus"; "changeEvent": "change"; "openEvent": "open"; "closeEvent": "close"; "searchEvent": "search"; "clearEvent": "clear"; "addEvent": "add"; "removeEvent": "remove"; "scroll": "scroll"; "scrollToEnd": "scrollToEnd"; }, ["optionTemplate", "optgroupTemplate", "labelTemplate", "multiLabelTemplate", "headerTemplate", "footerTemplate", "notFoundTemplate", "typeToSearchTemplate", "loadingTextTemplate", "tagTemplate", "loadingSpinnerTemplate", "mtxOptions"], never, false, never>;
+    static ngAcceptInputType_required: unknown;
 }
 export {};

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