@ng-matero/extensions 21.3.1 → 22.0.0

package/select/select.scss

@@ -3,15 +3,16 @@
 @use './m3-select';
 
 $fallbacks: m3-select.get-tokens();
+$filled-padding-top: var(--mat-form-field-filled-with-label-container-padding-top, 24px);
+$filled-padding-bottom: var(--mat-form-field-filled-with-label-container-padding-bottom, 8px);
+$vertical-padding: var(--mat-form-field-container-vertical-padding, 16px);
+$text-line-height: var(
+  --mat-form-field-container-text-line-height,
+  var(--mat-sys-body-large-line-height)
+);
 
 .ng-select {
-  $filled-padding-top: var(--mat-form-field-filled-with-label-container-padding-top, 24px);
-  $filled-padding-bottom: var(--mat-form-field-filled-with-label-container-padding-bottom, 8px);
-  $vertical-padding: var(--mat-form-field-container-vertical-padding, 16px);
-  $text-line-height: var(
-    --mat-form-field-container-text-line-height,
-    var(--mat-sys-body-large-line-height)
-  );
+  --ns-indicator-icon-size: 16px;
 
   .mat-mdc-form-field & {
     padding: $filled-padding-top 16px $filled-padding-bottom;
@@ -25,132 +26,112 @@ $fallbacks: m3-select.get-tokens();
     margin-top: calc($vertical-padding * -1);
     margin-bottom: calc($vertical-padding * -1);
   }
+}
 
-  .ng-select-container {
-    align-items: center;
-    color: token-utils.slot(select-container-text-color, $fallbacks);
-  }
-
-  .ng-value-container {
-    align-items: center;
-    gap: 4px;
+.ng-select-multiple {
+  .ng-select-value {
+    box-sizing: border-box;
+    height: $text-line-height;
+    padding: 0 calc(($text-line-height - 16px) / 2);
+    border-radius: 9999px;
+    font-size: 0.875em;
+    background-color: token-utils.slot(select-multiple-value-background-color, $fallbacks);
+    border: 1px solid token-utils.slot(select-multiple-value-outline-color, $fallbacks);
+
+    &.ng-select-value-disabled {
+      opacity: 0.4;
+    }
   }
 
-  .ng-input > input {
-    height: $text-line-height;
-    color: inherit;
-    font: inherit;
+  .ng-select-value-label {
+    display: inline-block;
+    margin: 0 4px;
   }
 
-  .ng-clear-wrapper {
+  .ng-select-value-remove {
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    width: 24px;
-    height: $text-line-height;
-    color: token-utils.slot(select-clear-icon-color, $fallbacks);
-
-    &:hover .ng-clear {
-      color: token-utils.slot(select-clear-icon-hover-color, $fallbacks);
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+
+    &:hover {
+      background-color: token-utils.slot(
+        select-multiple-value-icon-hover-background-color,
+        $fallbacks
+      );
     }
   }
 
-  .ng-placeholder {
-    transition: opacity 200ms;
-    opacity: 1;
-    color: token-utils.slot(select-placeholder-text-color, $fallbacks);
-
-    .mat-form-field-hide-placeholder & {
-      opacity: 0;
-    }
+  &.ng-select-disabled .ng-select-value {
+    border-color: token-utils.slot(select-multiple-value-disabled-outline-color, $fallbacks);
   }
+}
 
-  &.ng-select-disabled {
-    .ng-value {
-      color: token-utils.slot(select-disabled-text-color, $fallbacks);
-    }
-  }
+.ng-select-control {
+  color: token-utils.slot(select-container-text-color, $fallbacks);
+}
 
-  &.ng-select-single {
-    &.ng-select-filtered .ng-placeholder {
-      display: initial;
-      visibility: hidden;
-    }
-  }
+.ng-select-value-container {
+  gap: 4px;
+}
 
-  &.ng-select-multiple {
-    .ng-value {
-      box-sizing: border-box;
-      display: inline-flex;
-      align-items: center;
-      height: $text-line-height;
-      padding: 0 calc(($text-line-height - 16px) / 2);
-      border-radius: 9999px;
-      font-size: 0.875em;
-      background-color: token-utils.slot(select-multiple-value-background-color, $fallbacks);
-      border: 1px solid token-utils.slot(select-multiple-value-outline-color, $fallbacks);
-
-      &.ng-value-disabled {
-        opacity: 0.4;
-      }
-    }
+.ng-select-value {
+  .ng-select-disabled & {
+    color: token-utils.slot(select-disabled-text-color, $fallbacks);
+  }
+}
 
-    .ng-value-label {
-      display: inline-block;
-      margin: 0 4px;
-      line-height: 16px;
-    }
+.ng-select-input {
+  height: $text-line-height;
+  color: inherit;
+  font: inherit;
+}
 
-    .ng-value-remove {
-      width: 16px;
-      height: 16px;
-      line-height: 16px;
-      border-radius: 50%;
-      text-align: center;
-
-      &:hover {
-        background-color: token-utils.slot(
-          select-multiple-value-icon-hover-background-color,
-          $fallbacks
-        );
-      }
-    }
+.ng-select-placeholder {
+  transition: opacity 200ms;
+  opacity: 1;
+  color: token-utils.slot(select-placeholder-text-color, $fallbacks);
 
-    &.ng-select-disabled .ng-value {
-      border-color: token-utils.slot(select-multiple-value-disabled-outline-color, $fallbacks);
-    }
+  .mat-form-field-hide-placeholder & {
+    opacity: 0;
   }
+}
 
-  $enabled-arrow-color: token-utils.slot(select-enabled-arrow-color, $fallbacks);
-  $disabled-arrow-color: token-utils.slot(select-disabled-arrow-color, $fallbacks);
-  $invalid-arrow-color: token-utils.slot(select-invalid-arrow-color, $fallbacks);
+.ng-select-clear,
+.ng-select-arrow {
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+  transition: color 150ms;
+}
 
-  .ng-arrow {
-    border-width: 5px 5px 2px;
-    border-style: solid;
-    border-color: $enabled-arrow-color transparent transparent;
-  }
+.ng-select-clear {
+  color: token-utils.slot(select-clear-icon-color, $fallbacks);
 
-  &.ng-select-disabled .ng-arrow {
-    border-color: $disabled-arrow-color transparent transparent;
+  &:hover {
+    color: token-utils.slot(select-clear-icon-hover-color, $fallbacks);
   }
+}
+
+.ng-select-arrow {
+  color: token-utils.slot(select-enabled-arrow-color, $fallbacks);
 
-  &.ng-select-invalid .ng-arrow {
-    border-color: $invalid-arrow-color transparent transparent;
+  .ng-select-disabled & {
+    color: token-utils.slot(select-disabled-arrow-color, $fallbacks);
   }
 
-  &.ng-select-opened .ng-arrow {
-    top: -2px;
-    border-width: 0 5px 5px;
-    border-color: transparent transparent $enabled-arrow-color;
+  .ng-select-invalid & {
+    color: token-utils.slot(select-invalid-arrow-color, $fallbacks);
   }
 
-  &.ng-select-opened.ng-select-invalid .ng-arrow {
-    border-color: transparent transparent $invalid-arrow-color;
+  .ng-select-opened & {
+    transform: rotate(180deg);
   }
 }
 
-.ng-dropdown-panel {
+.ng-select-panel {
   background-color: token-utils.slot(select-panel-background-color, $fallbacks);
 
   &.ng-select-bottom {
@@ -166,67 +147,67 @@ $fallbacks: m3-select.get-tokens();
     border-top-right-radius: token-utils.slot(select-container-shape, $fallbacks);
     box-shadow: token-utils.slot(select-container-elevation-shadow, $fallbacks);
   }
+}
 
-  .ng-dropdown-header,
-  .ng-dropdown-footer {
-    padding: 14px 16px;
-  }
-
-  .ng-dropdown-header {
-    border-bottom: 1px solid token-utils.slot(select-panel-divider-color, $fallbacks);
-  }
+.ng-select-panel-header,
+.ng-select-panel-footer {
+  padding: 14px 16px;
+}
 
-  .ng-dropdown-footer {
-    border-top: 1px solid token-utils.slot(select-panel-divider-color, $fallbacks);
-  }
+.ng-select-panel-header {
+  border-bottom: 1px solid token-utils.slot(select-panel-divider-color, $fallbacks);
+}
 
-  .ng-optgroup {
-    padding: 14px 16px;
-    font-weight: 500;
-    user-select: none;
-    cursor: pointer;
-    color: token-utils.slot(select-optgroup-label-text-color, $fallbacks);
+.ng-select-panel-footer {
+  border-top: 1px solid token-utils.slot(select-panel-divider-color, $fallbacks);
+}
 
-    &.ng-option-disabled {
-      cursor: default;
-    }
+.ng-select-optgroup {
+  padding: 14px 16px;
+  font-weight: 500;
+  user-select: none;
+  cursor: pointer;
+  color: token-utils.slot(select-optgroup-label-text-color, $fallbacks);
 
-    &.ng-option-marked {
-      background-color: token-utils.slot(select-option-hover-state-background-color, $fallbacks);
-    }
+  &.ng-select-option-disabled {
+    cursor: default;
+  }
 
-    &.ng-option-selected {
-      background-color: token-utils.slot(select-option-selected-state-background-color, $fallbacks);
-      color: token-utils.slot(select-option-selected-state-text-color, $fallbacks);
-    }
+  &.ng-select-option-marked {
+    background-color: token-utils.slot(select-option-hover-state-background-color, $fallbacks);
   }
 
-  .ng-option {
-    position: relative;
-    padding: 14px 16px;
-    color: token-utils.slot(select-option-label-text-color, $fallbacks);
+  &.ng-select-option-selected {
+    background-color: token-utils.slot(select-option-selected-state-background-color, $fallbacks);
+    color: token-utils.slot(select-option-selected-state-text-color, $fallbacks);
+  }
+}
 
-    &.ng-option-marked {
-      background-color: token-utils.slot(select-option-hover-state-background-color, $fallbacks);
-    }
+.ng-select-option {
+  position: relative;
+  padding: 14px 16px;
+  color: token-utils.slot(select-option-label-text-color, $fallbacks);
 
-    &.ng-option-selected {
-      background-color: token-utils.slot(select-option-selected-state-background-color, $fallbacks);
-      color: token-utils.slot(select-option-selected-state-text-color, $fallbacks);
-    }
+  &.ng-select-option-marked {
+    background-color: token-utils.slot(select-option-hover-state-background-color, $fallbacks);
+  }
 
-    &.ng-option-disabled {
-      color: token-utils.slot(select-option-disabled-state-text-color, $fallbacks);
-    }
+  &.ng-select-option-selected {
+    background-color: token-utils.slot(select-option-selected-state-background-color, $fallbacks);
+    color: token-utils.slot(select-option-selected-state-text-color, $fallbacks);
+  }
 
-    &.ng-option-child {
-      padding-inline-start: 32px;
-    }
+  &.ng-select-option-disabled {
+    color: token-utils.slot(select-option-disabled-state-text-color, $fallbacks);
   }
 
-  .ng-tag-label {
-    display: inline-block;
-    margin-inline-end: 6px;
-    font-size: 80%;
+  &.ng-select-option-child {
+    padding-inline-start: 32px;
   }
 }
+
+.ng-select-tag-option {
+  display: inline-block;
+  margin-inline-end: 6px;
+  font-size: 80%;
+}

package/types/mtxCheckboxGroup.d.ts

@@ -48,6 +48,7 @@ declare class MtxCheckboxGroup implements AfterViewInit, OnDestroy, ControlValue
     set items(value: any[]);
     private _items;
     private _originalItems;
+    private _itemsAreUsed;
     bindLabel: string;
     bindValue: string;
     showSelectAll: boolean;
@@ -66,6 +67,10 @@ declare class MtxCheckboxGroup implements AfterViewInit, OnDestroy, ControlValue
     _onChange: (value: MtxCheckboxGroupOption[]) => void;
     _onTouched: () => void;
     ngAfterViewInit(): void;
+    /**
+     * Reads projected `<mat-checkbox>` elements and converts them into items.
+     */
+    private _setItemsFromContentCheckboxes;
     ngOnDestroy(): void;
     /**
      * Finds and selects and option based on its value.

package/types/mtxSelect.d.ts

@@ -4,7 +4,7 @@ import * as i1 from '@angular/common';
 import * as i2 from '@angular/forms';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import * as i3 from '@ng-matero/ng-select';
-import { NgSelect, SearchEvent, ScrollEvent, AddTagFn, CompareWithFn, DropdownPanelPosition, GroupValueFn, SearchFn, TrackByFn } from '@ng-matero/ng-select';
+import { NgSelect, SearchEvent, ScrollEvent, AddTagFn, CompareWithFn, PanelPosition, GroupValueFn, SearchFn, TrackByFn } from '@ng-matero/ng-select';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MatFormFieldControl, MatFormField } from '@angular/material/form-field';
@@ -65,6 +65,7 @@ interface MtxSelectDefaultOptions {
     virtualScroll?: boolean;
     fixedPlaceholder?: boolean;
     deselectOnClick?: boolean;
+    usePopover?: boolean;
 }
 /** Injection token that can be used to specify default select options. */
 declare const MTX_SELECT_DEFAULT_OPTIONS: InjectionToken<MtxSelectDefaultOptions>;
@@ -82,13 +83,13 @@ declare class MtxSelect implements OnDestroy, DoCheck, AfterViewInit, ControlVal
     optgroupTemplate?: TemplateRef<any>;
     labelTemplate?: TemplateRef<any>;
     multiLabelTemplate?: TemplateRef<any>;
-    headerTemplate?: TemplateRef<any>;
-    footerTemplate?: TemplateRef<any>;
+    panelHeaderTemplate?: TemplateRef<any>;
+    panelFooterTemplate?: TemplateRef<any>;
     notFoundTemplate?: TemplateRef<any>;
     typeToSearchTemplate?: TemplateRef<any>;
     loadingTextTemplate?: TemplateRef<any>;
     tagTemplate?: TemplateRef<any>;
-    loadingSpinnerTemplate?: TemplateRef<any>;
+    loadingTemplate?: TemplateRef<any>;
     placeholderTemplate?: TemplateRef<any>;
     clearbuttonTemplate?: TemplateRef<any>;
     blurEvent: EventEmitter<any>;
@@ -102,9 +103,10 @@ declare class MtxSelect implements OnDestroy, DoCheck, AfterViewInit, ControlVal
     removeEvent: EventEmitter<any>;
     scroll: EventEmitter<ScrollEvent>;
     scrollToEnd: EventEmitter<any>;
+    usePopover: boolean;
     addTag: boolean | AddTagFn;
     addTagText?: string;
-    appendTo: string;
+    appendTo: string | undefined;
     bindLabel: string | undefined;
     bindValue: string | undefined;
     closeOnSelect: boolean;
@@ -112,7 +114,7 @@ declare class MtxSelect implements OnDestroy, DoCheck, AfterViewInit, ControlVal
     clearAllText?: string;
     clearOnBackspace: boolean;
     compareWith: CompareWithFn;
-    panelPosition: DropdownPanelPosition;
+    panelPosition: PanelPosition;
     groupBy?: string | ((value: any) => any);
     groupValue?: GroupValueFn;
     bufferAmount: number;
@@ -268,7 +270,8 @@ declare class MtxSelect implements OnDestroy, DoCheck, AfterViewInit, ControlVal
     focus(): void;
     blur(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelect, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MtxSelect, "mtx-select", ["mtxSelect"], { "addTag": { "alias": "addTag"; "required": false; }; "addTagText": { "alias": "addTagText"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "bindLabel": { "alias": "bindLabel"; "required": false; }; "bindValue": { "alias": "bindValue"; "required": false; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "clearAllText": { "alias": "clearAllText"; "required": false; }; "clearOnBackspace": { "alias": "clearOnBackspace"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "panelPosition": { "alias": "panelPosition"; "required": false; }; "groupBy": { "alias": "groupBy"; "required": false; }; "groupValue": { "alias": "groupValue"; "required": false; }; "bufferAmount": { "alias": "bufferAmount"; "required": false; }; "selectableGroup": { "alias": "selectableGroup"; "required": false; }; "selectableGroupAsModel": { "alias": "selectableGroupAsModel"; "required": false; }; "hideSelected": { "alias": "hideSelected"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "loadingText": { "alias": "loadingText"; "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; }; "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; }; "panelDisabled": { "alias": "panelDisabled"; "required": false; }; "fixedPlaceholder": { "alias": "fixedPlaceholder"; "required": false; }; "preventToggleOnRightClick": { "alias": "preventToggleOnRightClick"; "required": false; }; "clearSearchOnAdd": { "alias": "clearSearchOnAdd"; "required": false; }; "deselectOnClick": { "alias": "deselectOnClick"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "inputAttrs": { "alias": "inputAttrs"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "items": { "alias": "items"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "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", "placeholderTemplate", "clearbuttonTemplate", "mtxOptions"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxSelect, "mtx-select", ["mtxSelect"], { "usePopover": { "alias": "usePopover"; "required": false; }; "addTag": { "alias": "addTag"; "required": false; }; "addTagText": { "alias": "addTagText"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "bindLabel": { "alias": "bindLabel"; "required": false; }; "bindValue": { "alias": "bindValue"; "required": false; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "clearAllText": { "alias": "clearAllText"; "required": false; }; "clearOnBackspace": { "alias": "clearOnBackspace"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "panelPosition": { "alias": "panelPosition"; "required": false; }; "groupBy": { "alias": "groupBy"; "required": false; }; "groupValue": { "alias": "groupValue"; "required": false; }; "bufferAmount": { "alias": "bufferAmount"; "required": false; }; "selectableGroup": { "alias": "selectableGroup"; "required": false; }; "selectableGroupAsModel": { "alias": "selectableGroupAsModel"; "required": false; }; "hideSelected": { "alias": "hideSelected"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "loadingText": { "alias": "loadingText"; "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; }; "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; }; "panelDisabled": { "alias": "panelDisabled"; "required": false; }; "fixedPlaceholder": { "alias": "fixedPlaceholder"; "required": false; }; "preventToggleOnRightClick": { "alias": "preventToggleOnRightClick"; "required": false; }; "clearSearchOnAdd": { "alias": "clearSearchOnAdd"; "required": false; }; "deselectOnClick": { "alias": "deselectOnClick"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "inputAttrs": { "alias": "inputAttrs"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "items": { "alias": "items"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "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", "panelHeaderTemplate", "panelFooterTemplate", "notFoundTemplate", "typeToSearchTemplate", "loadingTextTemplate", "tagTemplate", "loadingTemplate", "placeholderTemplate", "clearbuttonTemplate", "mtxOptions"], never, true, never>;
+    static ngAcceptInputType_usePopover: unknown;
     static ngAcceptInputType_closeOnSelect: unknown;
     static ngAcceptInputType_clearable: unknown;
     static ngAcceptInputType_clearOnBackspace: unknown;
@@ -297,74 +300,74 @@ declare class MtxSelect implements OnDestroy, DoCheck, AfterViewInit, ControlVal
 declare class MtxSelectOptionTemplate {
     template: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectOptionTemplate, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectOptionTemplate, "[ng-option-tmp]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectOptionTemplate, "[ngSelectOption]", never, {}, {}, never, never, true, never>;
 }
 declare class MtxSelectOptgroupTemplate {
     template: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectOptgroupTemplate, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectOptgroupTemplate, "[ng-optgroup-tmp]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectOptgroupTemplate, "[ngSelectOptgroup]", never, {}, {}, never, never, true, never>;
 }
 declare class MtxSelectLabelTemplate {
     template: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectLabelTemplate, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectLabelTemplate, "[ng-label-tmp]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectLabelTemplate, "[ngSelectLabel]", never, {}, {}, never, never, true, never>;
 }
 declare class MtxSelectMultiLabelTemplate {
     template: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectMultiLabelTemplate, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectMultiLabelTemplate, "[ng-multi-label-tmp]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectMultiLabelTemplate, "[ngSelectMultiLabel]", never, {}, {}, never, never, true, never>;
 }
-declare class MtxSelectHeaderTemplate {
+declare class MtxSelectPanelHeaderTemplate {
     template: TemplateRef<any>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectHeaderTemplate, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectHeaderTemplate, "[ng-header-tmp]", never, {}, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectPanelHeaderTemplate, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectPanelHeaderTemplate, "[ngSelectPanelHeader]", never, {}, {}, never, never, true, never>;
 }
-declare class MtxSelectFooterTemplate {
+declare class MtxSelectPanelFooterTemplate {
     template: TemplateRef<any>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectFooterTemplate, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectFooterTemplate, "[ng-footer-tmp]", never, {}, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectPanelFooterTemplate, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectPanelFooterTemplate, "[ngSelectPanelFooter]", never, {}, {}, never, never, true, never>;
 }
 declare class MtxSelectNotFoundTemplate {
     template: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectNotFoundTemplate, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectNotFoundTemplate, "[ng-notfound-tmp]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectNotFoundTemplate, "[ngSelectNotFound]", never, {}, {}, never, never, true, never>;
 }
 declare class MtxSelectTypeToSearchTemplate {
     template: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectTypeToSearchTemplate, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectTypeToSearchTemplate, "[ng-typetosearch-tmp]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectTypeToSearchTemplate, "[ngSelectTypeToSearch]", never, {}, {}, never, never, true, never>;
 }
 declare class MtxSelectLoadingTextTemplate {
     template: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectLoadingTextTemplate, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectLoadingTextTemplate, "[ng-loadingtext-tmp]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectLoadingTextTemplate, "[ngSelectLoadingText]", never, {}, {}, never, never, true, never>;
 }
 declare class MtxSelectTagTemplate {
     template: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectTagTemplate, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectTagTemplate, "[ng-tag-tmp]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectTagTemplate, "[ngSelectTag]", never, {}, {}, never, never, true, never>;
 }
-declare class MtxSelectLoadingSpinnerTemplate {
+declare class MtxSelectLoadingTemplate {
     template: TemplateRef<any>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectLoadingSpinnerTemplate, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectLoadingSpinnerTemplate, "[ng-loadingspinner-tmp]", never, {}, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectLoadingTemplate, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectLoadingTemplate, "[ngSelectLoading]", never, {}, {}, never, never, true, never>;
 }
 declare class MtxSelectPlaceholderTemplate {
     template: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectPlaceholderTemplate, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectPlaceholderTemplate, "[ng-placeholder-tmp]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectPlaceholderTemplate, "[ngSelectPlaceholder]", never, {}, {}, never, never, true, never>;
 }
 declare class MtxSelectClearbuttonTemplate {
     template: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectClearbuttonTemplate, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectClearbuttonTemplate, "[ng-clearbutton-tmp]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSelectClearbuttonTemplate, "[ngSelectClearButton]", never, {}, {}, never, never, true, never>;
 }
 
 declare class MtxSelectModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxSelectModule, never, [typeof i1.CommonModule, typeof i2.FormsModule, typeof i3.NgSelectModule, typeof MtxSelect, typeof MtxOption, typeof MtxSelectOptgroupTemplate, typeof MtxSelectOptionTemplate, typeof MtxSelectLabelTemplate, typeof MtxSelectMultiLabelTemplate, typeof MtxSelectHeaderTemplate, typeof MtxSelectFooterTemplate, typeof MtxSelectNotFoundTemplate, typeof MtxSelectTypeToSearchTemplate, typeof MtxSelectLoadingTextTemplate, typeof MtxSelectTagTemplate, typeof MtxSelectLoadingSpinnerTemplate, typeof MtxSelectPlaceholderTemplate, typeof MtxSelectClearbuttonTemplate], [typeof MtxSelect, typeof MtxOption, typeof MtxSelectOptgroupTemplate, typeof MtxSelectOptionTemplate, typeof MtxSelectLabelTemplate, typeof MtxSelectMultiLabelTemplate, typeof MtxSelectHeaderTemplate, typeof MtxSelectFooterTemplate, typeof MtxSelectNotFoundTemplate, typeof MtxSelectTypeToSearchTemplate, typeof MtxSelectLoadingTextTemplate, typeof MtxSelectTagTemplate, typeof MtxSelectLoadingSpinnerTemplate, typeof MtxSelectPlaceholderTemplate, typeof MtxSelectClearbuttonTemplate]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxSelectModule, never, [typeof i1.CommonModule, typeof i2.FormsModule, typeof i3.NgSelectModule, typeof MtxSelect, typeof MtxOption, typeof MtxSelectOptgroupTemplate, typeof MtxSelectOptionTemplate, typeof MtxSelectLabelTemplate, typeof MtxSelectMultiLabelTemplate, typeof MtxSelectPanelHeaderTemplate, typeof MtxSelectPanelFooterTemplate, typeof MtxSelectNotFoundTemplate, typeof MtxSelectTypeToSearchTemplate, typeof MtxSelectLoadingTextTemplate, typeof MtxSelectTagTemplate, typeof MtxSelectLoadingTemplate, typeof MtxSelectPlaceholderTemplate, typeof MtxSelectClearbuttonTemplate], [typeof MtxSelect, typeof MtxOption, typeof MtxSelectOptgroupTemplate, typeof MtxSelectOptionTemplate, typeof MtxSelectLabelTemplate, typeof MtxSelectMultiLabelTemplate, typeof MtxSelectPanelHeaderTemplate, typeof MtxSelectPanelFooterTemplate, typeof MtxSelectNotFoundTemplate, typeof MtxSelectTypeToSearchTemplate, typeof MtxSelectLoadingTextTemplate, typeof MtxSelectTagTemplate, typeof MtxSelectLoadingTemplate, typeof MtxSelectPlaceholderTemplate, typeof MtxSelectClearbuttonTemplate]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MtxSelectModule>;
 }
 
-export { MTX_SELECT_DEFAULT_OPTIONS, MtxOption, MtxSelect, MtxSelectClearbuttonTemplate, MtxSelectFooterTemplate, MtxSelectHeaderTemplate, MtxSelectIntl, MtxSelectLabelTemplate, MtxSelectLoadingSpinnerTemplate, MtxSelectLoadingTextTemplate, MtxSelectModule, MtxSelectMultiLabelTemplate, MtxSelectNotFoundTemplate, MtxSelectOptgroupTemplate, MtxSelectOptionTemplate, MtxSelectPlaceholderTemplate, MtxSelectTagTemplate, MtxSelectTypeToSearchTemplate };
+export { MTX_SELECT_DEFAULT_OPTIONS, MtxOption, MtxSelect, MtxSelectClearbuttonTemplate, MtxSelectIntl, MtxSelectLabelTemplate, MtxSelectLoadingTemplate, MtxSelectLoadingTextTemplate, MtxSelectModule, MtxSelectMultiLabelTemplate, MtxSelectNotFoundTemplate, MtxSelectOptgroupTemplate, MtxSelectOptionTemplate, MtxSelectPanelFooterTemplate, MtxSelectPanelHeaderTemplate, MtxSelectPlaceholderTemplate, MtxSelectTagTemplate, MtxSelectTypeToSearchTemplate };
 export type { MtxSelectDefaultOptions };