@ng-matero/extensions 16.3.2 → 17.1.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 ɵcmp: i0.ɵɵComponentDeclaration<MtxOption, "mtx-option", ["mtxOption"], { "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
 }

package/select/select-module.d.ts

@@ -1,12 +1,12 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./select";
-import * as i2 from "./option";
-import * as i3 from "./templates";
-import * as i4 from "@angular/common";
-import * as i5 from "@angular/forms";
-import * as i6 from "@ng-select/ng-select";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+import * as i3 from "@ng-select/ng-select";
+import * as i4 from "./select";
+import * as i5 from "./option";
+import * as i6 from "./templates";
 export declare class MtxSelectModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxSelectModule, [typeof i1.MtxSelect, typeof i2.MtxOption, typeof i3.MtxSelectOptgroupTemplate, typeof i3.MtxSelectOptionTemplate, typeof i3.MtxSelectLabelTemplate, typeof i3.MtxSelectMultiLabelTemplate, typeof i3.MtxSelectHeaderTemplate, typeof i3.MtxSelectFooterTemplate, typeof i3.MtxSelectNotFoundTemplate, typeof i3.MtxSelectTypeToSearchTemplate, typeof i3.MtxSelectLoadingTextTemplate, typeof i3.MtxSelectTagTemplate, typeof i3.MtxSelectLoadingSpinnerTemplate], [typeof i4.CommonModule, typeof i5.FormsModule, typeof i5.ReactiveFormsModule, typeof i6.NgSelectModule], [typeof i1.MtxSelect, typeof i2.MtxOption, typeof i3.MtxSelectOptgroupTemplate, typeof i3.MtxSelectOptionTemplate, typeof i3.MtxSelectLabelTemplate, typeof i3.MtxSelectMultiLabelTemplate, typeof i3.MtxSelectHeaderTemplate, typeof i3.MtxSelectFooterTemplate, typeof i3.MtxSelectNotFoundTemplate, typeof i3.MtxSelectTypeToSearchTemplate, typeof i3.MtxSelectLoadingTextTemplate, typeof i3.MtxSelectTagTemplate, typeof i3.MtxSelectLoadingSpinnerTemplate]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxSelectModule, never, [typeof i1.CommonModule, typeof i2.FormsModule, typeof i2.ReactiveFormsModule, typeof i3.NgSelectModule, typeof i4.MtxSelect, typeof i5.MtxOption, typeof i6.MtxSelectOptgroupTemplate, typeof i6.MtxSelectOptionTemplate, typeof i6.MtxSelectLabelTemplate, typeof i6.MtxSelectMultiLabelTemplate, typeof i6.MtxSelectHeaderTemplate, typeof i6.MtxSelectFooterTemplate, typeof i6.MtxSelectNotFoundTemplate, typeof i6.MtxSelectTypeToSearchTemplate, typeof i6.MtxSelectLoadingTextTemplate, typeof i6.MtxSelectTagTemplate, typeof i6.MtxSelectLoadingSpinnerTemplate], [typeof i4.MtxSelect, typeof i5.MtxOption, typeof i6.MtxSelectOptgroupTemplate, typeof i6.MtxSelectOptionTemplate, typeof i6.MtxSelectLabelTemplate, typeof i6.MtxSelectMultiLabelTemplate, typeof i6.MtxSelectHeaderTemplate, typeof i6.MtxSelectFooterTemplate, typeof i6.MtxSelectNotFoundTemplate, typeof i6.MtxSelectTypeToSearchTemplate, typeof i6.MtxSelectLoadingTextTemplate, typeof i6.MtxSelectTagTemplate, typeof i6.MtxSelectLoadingSpinnerTemplate]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MtxSelectModule>;
 }

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 ɵ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, true, 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,151 +11,149 @@ $_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: var(--mat-form-field-filled-with-label-container-padding-top);
+    $filled-padding-bottom: var(--mat-form-field-filled-with-label-container-padding-bottom);
+    $vertical-padding: var(--mat-form-field-container-vertical-padding);
+
+    padding: $filled-padding-top 16px $filled-padding-bottom;
+    margin: calc($filled-padding-top * -1) -16px calc($filled-padding-bottom * -1);
+
+    .mdc-text-field--outlined &,
+    .mdc-text-field--no-label & {
+      padding-top: $vertical-padding;
+      padding-bottom: $vertical-padding;
+      margin-top: calc($vertical-padding * -1);
+      margin-bottom: calc($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 {
-        padding: 0;
-        color: inherit;
-        font: inherit;
+        .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 {
-      top: -2px;
-      border-width: 0 5px 5px;
+    &.ng-select-opened {
+      .ng-arrow-wrapper .ng-arrow {
+        top: -2px;
+        border-width: 0 5px 5px;
+      }
     }
-  }
 
-  &.ng-select-single {
-    &.ng-select-filtered .ng-placeholder {
-      display: initial;
-      visibility: hidden;
+    &.ng-select-single {
+      &.ng-select-filtered .ng-placeholder {
+        display: initial;
+        visibility: hidden;
+      }
     }
-  }
 
-  &.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);
 
         $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;
-      }
+        @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...) {
+          &: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);
@@ -185,28 +183,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/select/templates.d.ts

@@ -4,65 +4,65 @@ export declare class MtxSelectOptionTemplate {
     template: TemplateRef<any>;
     constructor(template: TemplateRef<any>);
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectOptionTemplate, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectOptionTemplate, "[ng-option-tmp]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectOptionTemplate, "[ng-option-tmp]", never, {}, {}, never, never, true, never>;
 }
 export declare class MtxSelectOptgroupTemplate {
     template: TemplateRef<any>;
     constructor(template: TemplateRef<any>);
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectOptgroupTemplate, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectOptgroupTemplate, "[ng-optgroup-tmp]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectOptgroupTemplate, "[ng-optgroup-tmp]", never, {}, {}, never, never, true, never>;
 }
 export declare class MtxSelectLabelTemplate {
     template: TemplateRef<any>;
     constructor(template: TemplateRef<any>);
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectLabelTemplate, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectLabelTemplate, "[ng-label-tmp]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectLabelTemplate, "[ng-label-tmp]", never, {}, {}, never, never, true, never>;
 }
 export declare class MtxSelectMultiLabelTemplate {
     template: TemplateRef<any>;
     constructor(template: TemplateRef<any>);
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectMultiLabelTemplate, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectMultiLabelTemplate, "[ng-multi-label-tmp]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectMultiLabelTemplate, "[ng-multi-label-tmp]", never, {}, {}, never, never, true, never>;
 }
 export declare class MtxSelectHeaderTemplate {
     template: TemplateRef<any>;
     constructor(template: TemplateRef<any>);
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectHeaderTemplate, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectHeaderTemplate, "[ng-header-tmp]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectHeaderTemplate, "[ng-header-tmp]", never, {}, {}, never, never, true, never>;
 }
 export declare class MtxSelectFooterTemplate {
     template: TemplateRef<any>;
     constructor(template: TemplateRef<any>);
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectFooterTemplate, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectFooterTemplate, "[ng-footer-tmp]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectFooterTemplate, "[ng-footer-tmp]", never, {}, {}, never, never, true, never>;
 }
 export declare class MtxSelectNotFoundTemplate {
     template: TemplateRef<any>;
     constructor(template: TemplateRef<any>);
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectNotFoundTemplate, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectNotFoundTemplate, "[ng-notfound-tmp]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectNotFoundTemplate, "[ng-notfound-tmp]", never, {}, {}, never, never, true, never>;
 }
 export declare class MtxSelectTypeToSearchTemplate {
     template: TemplateRef<any>;
     constructor(template: TemplateRef<any>);
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectTypeToSearchTemplate, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectTypeToSearchTemplate, "[ng-typetosearch-tmp]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectTypeToSearchTemplate, "[ng-typetosearch-tmp]", never, {}, {}, never, never, true, never>;
 }
 export declare class MtxSelectLoadingTextTemplate {
     template: TemplateRef<any>;
     constructor(template: TemplateRef<any>);
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectLoadingTextTemplate, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectLoadingTextTemplate, "[ng-loadingtext-tmp]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectLoadingTextTemplate, "[ng-loadingtext-tmp]", never, {}, {}, never, never, true, never>;
 }
 export declare class MtxSelectTagTemplate {
     template: TemplateRef<any>;
     constructor(template: TemplateRef<any>);
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectTagTemplate, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectTagTemplate, "[ng-tag-tmp]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectTagTemplate, "[ng-tag-tmp]", never, {}, {}, never, never, true, never>;
 }
 export declare class MtxSelectLoadingSpinnerTemplate {
     template: TemplateRef<any>;
     constructor(template: TemplateRef<any>);
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectLoadingSpinnerTemplate, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectLoadingSpinnerTemplate, "[ng-loadingspinner-tmp]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectLoadingSpinnerTemplate, "[ng-loadingspinner-tmp]", never, {}, {}, never, never, true, never>;
 }