@ng-matero/extensions 20.4.2 → 20.5.0

package/select/index.d.ts

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { OnChanges, AfterViewChecked, OnDestroy, ElementRef, SimpleChanges, OnInit, DoCheck, AfterViewInit, ChangeDetectorRef, TemplateRef, QueryList, EventEmitter, InjectionToken } from '@angular/core';
+import { OnChanges, AfterViewChecked, OnDestroy, ElementRef, SimpleChanges, DoCheck, AfterViewInit, ChangeDetectorRef, QueryList, TemplateRef, EventEmitter, InjectionToken } from '@angular/core';
 import * as i1 from '@angular/common';
 import * as i2 from '@angular/forms';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
-import * as i3 from '@ng-select/ng-select';
-import { NgSelectComponent } from '@ng-select/ng-select';
+import * as i3 from '@ng-matero/ng-select';
+import { NgSelect, SearchEvent, ScrollEvent, AddTagFn, CompareWithFn, DropdownPanelPosition, 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';
@@ -46,12 +46,6 @@ declare class MtxSelectIntl {
     static ɵprov: i0.ɵɵInjectableDeclaration<MtxSelectIntl>;
 }
 
-type DropdownPosition = 'bottom' | 'top' | 'auto';
-type AddTagFn = (term: string) => any;
-type CompareWithFn = (a: any, b: any) => boolean;
-type GroupValueFn = (key: string | Record<string, any>, children: any[]) => string | Record<string, any>;
-type SearchFn = (term: string, item: any) => boolean;
-type TrackByFn = (item: any) => any;
 /**
  * Represents the default options for the select that can be configured
  * using the `MTX_SELECT_DEFAULT_OPTIONS` injection token.
@@ -74,7 +68,7 @@ interface MtxSelectDefaultOptions {
 }
 /** Injection token that can be used to specify default select options. */
 declare const MTX_SELECT_DEFAULT_OPTIONS: InjectionToken<MtxSelectDefaultOptions>;
-declare class MtxSelect implements OnInit, OnDestroy, DoCheck, AfterViewInit, ControlValueAccessor, MatFormFieldControl<any> {
+declare class MtxSelect implements OnDestroy, DoCheck, AfterViewInit, ControlValueAccessor, MatFormFieldControl<any> {
     protected _intl: MtxSelectIntl;
     protected _changeDetectorRef: ChangeDetectorRef;
     protected _elementRef: ElementRef<any>;
@@ -82,45 +76,53 @@ declare class MtxSelect implements OnInit, OnDestroy, DoCheck, AfterViewInit, Co
     ngControl: NgControl | null;
     protected _parentFormField?: MatFormField | null | undefined;
     protected _defaultOptions?: MtxSelectDefaultOptions | null | undefined;
-    private _document;
-    ngSelect: NgSelectComponent;
-    optionTemplate: TemplateRef<any>;
-    optgroupTemplate: TemplateRef<any>;
-    labelTemplate: TemplateRef<any>;
-    multiLabelTemplate: TemplateRef<any>;
-    headerTemplate: TemplateRef<any>;
-    footerTemplate: TemplateRef<any>;
-    notFoundTemplate: TemplateRef<any>;
-    typeToSearchTemplate: TemplateRef<any>;
-    loadingTextTemplate: TemplateRef<any>;
-    tagTemplate: TemplateRef<any>;
-    loadingSpinnerTemplate: TemplateRef<any>;
-    placeholderTemplate: TemplateRef<any>;
-    clearbuttonTemplate: TemplateRef<any>;
-    mtxOptions: QueryList<MtxOption>;
+    ngSelect: NgSelect;
+    mtxOptions?: QueryList<MtxOption>;
+    optionTemplate?: TemplateRef<any>;
+    optgroupTemplate?: TemplateRef<any>;
+    labelTemplate?: TemplateRef<any>;
+    multiLabelTemplate?: TemplateRef<any>;
+    headerTemplate?: TemplateRef<any>;
+    footerTemplate?: TemplateRef<any>;
+    notFoundTemplate?: TemplateRef<any>;
+    typeToSearchTemplate?: TemplateRef<any>;
+    loadingTextTemplate?: TemplateRef<any>;
+    tagTemplate?: TemplateRef<any>;
+    loadingSpinnerTemplate?: TemplateRef<any>;
+    placeholderTemplate?: TemplateRef<any>;
+    clearbuttonTemplate?: TemplateRef<any>;
+    blurEvent: EventEmitter<any>;
+    focusEvent: EventEmitter<any>;
+    changeEvent: EventEmitter<any>;
+    openEvent: EventEmitter<any>;
+    closeEvent: EventEmitter<any>;
+    searchEvent: EventEmitter<SearchEvent>;
+    clearEvent: EventEmitter<any>;
+    addEvent: EventEmitter<any>;
+    removeEvent: EventEmitter<any>;
+    scroll: EventEmitter<ScrollEvent>;
+    scrollToEnd: EventEmitter<any>;
     addTag: boolean | AddTagFn;
     addTagText?: string;
-    appearance: string;
     appendTo: string;
     bindLabel: string | undefined;
     bindValue: string | undefined;
     closeOnSelect: boolean;
-    clearAllText?: string;
     clearable: boolean;
+    clearAllText?: string;
     clearOnBackspace: boolean;
     compareWith: CompareWithFn;
-    dropdownPosition: DropdownPosition;
-    groupBy: string | ((value: any) => any);
-    groupValue: GroupValueFn;
+    panelPosition: DropdownPanelPosition;
+    groupBy?: string | ((value: any) => any);
+    groupValue?: GroupValueFn;
     bufferAmount: number;
     selectableGroup: boolean;
     selectableGroupAsModel: boolean;
     hideSelected: boolean;
     loading: boolean;
     loadingText?: string;
-    labelForId: string | null;
     markFirst: boolean;
-    maxSelectedItems: number;
+    maxSelectedItems?: number;
     multiple: boolean;
     notFoundText?: string;
     searchable: boolean;
@@ -129,40 +131,24 @@ declare class MtxSelect implements OnInit, OnDestroy, DoCheck, AfterViewInit, Co
     searchWhileComposing: boolean;
     selectOnTab: boolean;
     trackByFn: TrackByFn | null;
-    inputAttrs: {
-        [key: string]: string;
-    };
-    tabIndex: number;
-    openOnEnter: boolean;
+    openOnEnter: boolean | undefined;
     minTermLength: number;
     editableSearchTerm: boolean;
     keyDownFn: (_: KeyboardEvent) => boolean;
-    virtualScroll: boolean;
+    virtualScroll: boolean | undefined;
     typeToSearchText?: string;
-    typeahead: Subject<string>;
-    isOpen?: boolean;
+    typeahead?: Subject<string>;
+    panelDisabled: boolean;
     fixedPlaceholder: boolean;
-    deselectOnClick: boolean;
-    blurEvent: EventEmitter<any>;
-    focusEvent: EventEmitter<any>;
-    changeEvent: EventEmitter<any>;
-    openEvent: EventEmitter<any>;
-    closeEvent: EventEmitter<any>;
-    searchEvent: EventEmitter<{
-        term: string;
-        items: any[];
-    }>;
-    clearEvent: EventEmitter<any>;
-    addEvent: EventEmitter<any>;
-    removeEvent: EventEmitter<any>;
-    scroll: EventEmitter<{
-        start: number;
-        end: number;
-    }>;
-    scrollToEnd: EventEmitter<any>;
-    get clearSearchOnAdd(): boolean;
-    set clearSearchOnAdd(value: boolean);
-    private _clearSearchOnAdd;
+    preventToggleOnRightClick: boolean;
+    clearSearchOnAdd: boolean | undefined;
+    deselectOnClick: boolean | undefined;
+    tabIndex?: number;
+    inputId?: string | null;
+    inputAttrs: {
+        [key: string]: string;
+    };
+    panelClass?: string | string[] | Record<string, any>;
     get items(): any[];
     set items(value: any[]);
     private _items;
@@ -204,11 +190,13 @@ declare class MtxSelect implements OnInit, OnDestroy, DoCheck, AfterViewInit, Co
     /** Object used to control when error messages are shown. */
     get errorStateMatcher(): ErrorStateMatcher;
     set errorStateMatcher(value: ErrorStateMatcher);
-    /** Aria label of the select. */
-    ariaLabel: string;
-    /** Input that can be used to specify the `aria-labelledby` attribute. */
+    /** `aria-label` of the ng-select input. */
+    ariaLabel: string | null;
+    /** `aria-labelledby` of the ng-select input. */
     ariaLabelledby: string | null;
-    /** The aria-describedby attribute on the select for improved a11y. */
+    /** `aria-describedby` of the ng-select input. */
+    ariaDescribedby: string | null;
+    /** The aria-describedby attribute on the ng-select input for improved a11y. */
     _ariaDescribedby: string | null;
     /** A name for this control that can be used by `mat-form-field`. */
     controlType: string;
@@ -218,8 +206,6 @@ declare class MtxSelect implements OnInit, OnDestroy, DoCheck, AfterViewInit, Co
     _onTouched: () => void;
     /** ID for the DOM node containing the select's value. */
     _valueId: string;
-    /** Whether or not the overlay panel is open. */
-    get panelOpen(): boolean;
     /**
      * Keeps track of the previous form control assigned to the select.
      * Used to detect if it has changed.
@@ -232,7 +218,6 @@ declare class MtxSelect implements OnInit, OnDestroy, DoCheck, AfterViewInit, Co
     set errorState(value: boolean);
     private _intlChangesSubscription;
     constructor();
-    ngOnInit(): void;
     ngAfterViewInit(): void;
     ngDoCheck(): void;
     ngOnDestroy(): void;
@@ -282,9 +267,8 @@ declare class MtxSelect implements OnInit, OnDestroy, DoCheck, AfterViewInit, Co
     close(): void;
     focus(): void;
     blur(): void;
-    openChange(): 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; }; "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; }; "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; }; "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; }; "isOpen": { "alias": "isOpen"; "required": false; }; "fixedPlaceholder": { "alias": "fixedPlaceholder"; "required": false; }; "deselectOnClick": { "alias": "deselectOnClick"; "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; }; "disabled": { "alias": "disabled"; "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", "placeholderTemplate", "clearbuttonTemplate", "mtxOptions"], never, true, 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 ngAcceptInputType_closeOnSelect: unknown;
     static ngAcceptInputType_clearable: unknown;
     static ngAcceptInputType_clearOnBackspace: unknown;
@@ -301,7 +285,10 @@ declare class MtxSelect implements OnInit, OnDestroy, DoCheck, AfterViewInit, Co
     static ngAcceptInputType_openOnEnter: unknown;
     static ngAcceptInputType_editableSearchTerm: unknown;
     static ngAcceptInputType_virtualScroll: unknown;
+    static ngAcceptInputType_panelDisabled: unknown;
     static ngAcceptInputType_fixedPlaceholder: unknown;
+    static ngAcceptInputType_preventToggleOnRightClick: unknown;
+    static ngAcceptInputType_clearSearchOnAdd: unknown;
     static ngAcceptInputType_deselectOnClick: unknown;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_required: unknown;
@@ -375,9 +362,9 @@ declare class MtxSelectClearbuttonTemplate {
 
 declare class MtxSelectModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelectModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxSelectModule, never, [typeof i1.CommonModule, typeof i2.FormsModule, typeof i2.ReactiveFormsModule, 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 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 ɵ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 type { AddTagFn, CompareWithFn, DropdownPosition, GroupValueFn, MtxSelectDefaultOptions, SearchFn, TrackByFn };
+export type { MtxSelectDefaultOptions };

package/select/select.scss

@@ -4,20 +4,19 @@
 
 $fallbacks: m3-select.get-tokens();
 
-@mixin rtl {
-  @at-root [dir='rtl'] #{&} {
-    @content;
-  }
-}
-
 .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));
+  $text-line-height: var(
+    --mat-form-field-container-text-line-height,
+    var(--mat-sys-body-large-line-height)
+  );
 
-  padding: $filled-padding-top 16px $filled-padding-bottom;
-  margin: calc($filled-padding-top * -1) -16px calc($filled-padding-bottom * -1);
+  .mat-mdc-form-field & {
+    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 & {
@@ -30,24 +29,29 @@ $fallbacks: m3-select.get-tokens();
   .ng-select-container {
     align-items: center;
     color: token-utils.slot(select-container-text-color, $fallbacks);
+  }
 
-    .ng-value-container {
-      align-items: center;
-      gap: 4px;
+  .ng-value-container {
+    align-items: center;
+    gap: 4px;
+  }
 
-      .ng-input > input {
-        height: $text-line-height;
-        color: inherit;
-        font: inherit;
-      }
-    }
+  .ng-input > input {
+    height: $text-line-height;
+    color: inherit;
+    font: inherit;
+  }
 
-    .ng-clear-wrapper {
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      width: 24px;
-      height: $text-line-height;
+  .ng-clear-wrapper {
+    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);
     }
   }
 
@@ -61,31 +65,12 @@ $fallbacks: m3-select.get-tokens();
     }
   }
 
-  .ng-has-value .ng-placeholder {
-    display: none;
-  }
-
-  .ng-clear-wrapper {
-    color: token-utils.slot(select-clear-icon-color, $fallbacks);
-
-    &:hover .ng-clear {
-      color: token-utils.slot(select-clear-icon-hover-color, $fallbacks);
-    }
-  }
-
   &.ng-select-disabled {
     .ng-value {
       color: token-utils.slot(select-disabled-text-color, $fallbacks);
     }
   }
 
-  &.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;
@@ -94,7 +79,8 @@ $fallbacks: m3-select.get-tokens();
   }
 
   &.ng-select-multiple {
-    .ng-select-container .ng-value-container .ng-value {
+    .ng-value {
+      box-sizing: border-box;
       display: inline-flex;
       align-items: center;
       height: $text-line-height;
@@ -107,35 +93,34 @@ $fallbacks: m3-select.get-tokens();
       &.ng-value-disabled {
         opacity: 0.4;
       }
+    }
 
-      .ng-value-label {
-        display: inline-block;
-        margin: 0 4px;
-        line-height: 16px;
-      }
-
-      .ng-value-icon {
-        width: 16px;
-        height: 16px;
-        line-height: 16px;
-        border-radius: 50%;
-        text-align: center;
+    .ng-value-label {
+      display: inline-block;
+      margin: 0 4px;
+      line-height: 16px;
+    }
 
-        &:hover {
-          background-color: token-utils.slot(select-multiple-value-icon-hover-background-color, $fallbacks);
-        }
+    .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-disabled .ng-select-container .ng-value-container .ng-value {
+    &.ng-select-disabled .ng-value {
       border-color: token-utils.slot(select-multiple-value-disabled-outline-color, $fallbacks);
     }
   }
 
-  .ng-arrow-wrapper {
-    width: 10px;
-  }
-
   $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);
@@ -155,6 +140,8 @@ $fallbacks: m3-select.get-tokens();
   }
 
   &.ng-select-opened .ng-arrow {
+    top: -2px;
+    border-width: 0 5px 5px;
     border-color: transparent transparent $enabled-arrow-color;
   }
 
@@ -193,73 +180,53 @@ $fallbacks: m3-select.get-tokens();
     border-top: 1px solid token-utils.slot(select-panel-divider-color, $fallbacks);
   }
 
-  .ng-dropdown-panel-items {
-    .ng-optgroup {
-      padding: 14px 16px;
-      font-weight: 500;
-      user-select: none;
-      cursor: pointer;
-      color: token-utils.slot(select-optgroup-label-text-color, $fallbacks);
-
-      &.ng-option-disabled {
-        cursor: default;
-      }
-
-      &.ng-option-marked {
-        background-color: token-utils.slot(select-option-hover-state-background-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-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-disabled {
+      cursor: default;
     }
 
-    .ng-option {
-      position: relative;
-      padding: 14px 16px;
-      text-overflow: ellipsis;
-      text-decoration: none;
-      text-align: left;
-      white-space: nowrap;
-      overflow: hidden;
-      color: token-utils.slot(select-option-label-text-color, $fallbacks);
-
-      &.ng-option-marked {
-        background-color: token-utils.slot(select-option-hover-state-background-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-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-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);
+    }
+  }
 
-      @include rtl {
-        text-align: right;
-      }
+  .ng-option {
+    position: relative;
+    padding: 14px 16px;
+    color: token-utils.slot(select-option-label-text-color, $fallbacks);
 
-      &.ng-option-child {
-        padding-left: 32px;
+    &.ng-option-marked {
+      background-color: token-utils.slot(select-option-hover-state-background-color, $fallbacks);
+    }
 
-        @include rtl {
-          padding-right: 32px;
-          padding-left: 0;
-        }
-      }
+    &.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-tag-label {
-        margin-right: 6px;
-        font-size: 80%;
+    &.ng-option-disabled {
+      color: token-utils.slot(select-option-disabled-state-text-color, $fallbacks);
+    }
 
-        @include rtl {
-          margin-left: 6px;
-          margin-right: 0;
-        }
-      }
+    &.ng-option-child {
+      padding-inline-start: 32px;
     }
   }
+
+  .ng-tag-label {
+    display: inline-block;
+    margin-inline-end: 6px;
+    font-size: 80%;
+  }
 }