Skip to content

Commit 3c2334c

Browse files
andrewseguinandrewseguin
authored
feat(material/autocomplete): add panelClass default option (#20429)
* feat(material/autocomplete): add panelClass default option * update goldens * add tests to MDC
1 parent 469f8e2 commit 3c2334c

File tree

5 files changed

+82
-5
lines changed

5 files changed

+82
-5
lines changed

‎src/material-experimental/mdc-autocomplete/autocomplete.spec.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2124,6 +2124,39 @@ describe('MDC-based MatAutocomplete', () => {
21242124
}));
21252125
});
21262126

2127+
describe('with panel classes in the default options', () => {
2128+
it('should apply them if provided as string', fakeAsync(() => {
2129+
const fixture = createComponent(SimpleAutocomplete, [
2130+
{provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
2131+
useValue: {overlayPanelClass: 'default1'}}
2132+
]);
2133+
2134+
fixture.detectChanges();
2135+
fixture.componentInstance.trigger.openPanel();
2136+
fixture.detectChanges();
2137+
2138+
const panelClassList =
2139+
overlayContainerElement.querySelector('.cdk-overlay-pane')!.classList;
2140+
expect(panelClassList).toContain('default1');
2141+
}));
2142+
2143+
it('should apply them if provided as array', fakeAsync(() => {
2144+
const fixture = createComponent(SimpleAutocomplete, [
2145+
{provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
2146+
useValue: {overlayPanelClass: ['default1', 'default2']}}
2147+
]);
2148+
2149+
fixture.detectChanges();
2150+
fixture.componentInstance.trigger.openPanel();
2151+
fixture.detectChanges();
2152+
2153+
const panelClassList =
2154+
overlayContainerElement.querySelector('.cdk-overlay-pane')!.classList;
2155+
expect(panelClassList).toContain('default1');
2156+
expect(panelClassList).toContain('default2');
2157+
}));
2158+
});
2159+
21272160
describe('misc', () => {
21282161

21292162
it('should allow basic use without any forms directives', () => {

‎src/material/autocomplete/autocomplete-trigger.ts

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,11 @@ import {MAT_FORM_FIELD, MatFormField} from '@angular/material/form-field';
4949
import {defer, fromEvent, merge, Observable, of as observableOf, Subject, Subscription} from 'rxjs';
5050
import {delay, filter, map, switchMap, take, tap} from 'rxjs/operators';
5151

52-
import {_MatAutocompleteBase} from './autocomplete';
52+
import {
53+
_MatAutocompleteBase,
54+
MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
55+
MatAutocompleteDefaultOptions
56+
} from './autocomplete';
5357
import {_MatAutocompleteOriginBase} from './autocomplete-origin';
5458

5559

@@ -208,7 +212,9 @@ export abstract class _MatAutocompleteTriggerBase implements ControlValueAccesso
208212
@Optional() private _dir: Directionality,
209213
@Optional() @Inject(MAT_FORM_FIELD) @Host() private _formField: MatFormField,
210214
@Optional() @Inject(DOCUMENT) private _document: any,
211-
private _viewportRuler: ViewportRuler) {
215+
private _viewportRuler: ViewportRuler,
216+
@Optional() @Inject(MAT_AUTOCOMPLETE_DEFAULT_OPTIONS)
217+
private _defaults?: MatAutocompleteDefaultOptions) {
212218
this._scrollStrategy = scrollStrategy;
213219
}
214220

@@ -638,7 +644,8 @@ export abstract class _MatAutocompleteTriggerBase implements ControlValueAccesso
638644
positionStrategy: this._getOverlayPosition(),
639645
scrollStrategy: this._scrollStrategy(),
640646
width: this._getPanelWidth(),
641-
direction: this._dir
647+
direction: this._dir,
648+
panelClass: this._defaults?.overlayPanelClass,
642649
});
643650
}
644651

‎src/material/autocomplete/autocomplete.spec.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2119,6 +2119,39 @@ describe('MatAutocomplete', () => {
21192119
}));
21202120
});
21212121

2122+
describe('with panel classes in the default options', () => {
2123+
it('should apply them if provided as string', fakeAsync(() => {
2124+
const fixture = createComponent(SimpleAutocomplete, [
2125+
{provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
2126+
useValue: {overlayPanelClass: 'default1'}}
2127+
]);
2128+
2129+
fixture.detectChanges();
2130+
fixture.componentInstance.trigger.openPanel();
2131+
fixture.detectChanges();
2132+
2133+
const panelClassList =
2134+
overlayContainerElement.querySelector('.cdk-overlay-pane')!.classList;
2135+
expect(panelClassList).toContain('default1');
2136+
}));
2137+
2138+
it('should apply them if provided as array', fakeAsync(() => {
2139+
const fixture = createComponent(SimpleAutocomplete, [
2140+
{provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
2141+
useValue: {overlayPanelClass: ['default1', 'default2']}}
2142+
]);
2143+
2144+
fixture.detectChanges();
2145+
fixture.componentInstance.trigger.openPanel();
2146+
fixture.detectChanges();
2147+
2148+
const panelClassList =
2149+
overlayContainerElement.querySelector('.cdk-overlay-pane')!.classList;
2150+
expect(panelClassList).toContain('default1');
2151+
expect(panelClassList).toContain('default2');
2152+
}));
2153+
});
2154+
21222155
describe('misc', () => {
21232156

21242157
it('should allow basic use without any forms directives', () => {

‎src/material/autocomplete/autocomplete.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,9 @@ const _MatAutocompleteMixinBase: CanDisableRippleCtor & typeof MatAutocompleteBa
7575
export interface MatAutocompleteDefaultOptions {
7676
/** Whether the first option should be highlighted when an autocomplete panel is opened. */
7777
autoActiveFirstOption?: boolean;
78+
79+
/** Class or list of classes to be applied to the autocomplete's overlay panel. */
80+
overlayPanelClass?: string | string[];
7881
}
7982

8083
/** Injection token to be used to override the default options for `mat-autocomplete`. */

‎tools/public_api_guard/material/autocomplete.d.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export declare abstract class _MatAutocompleteTriggerBase implements ControlValu
5757
get panelClosingActions(): Observable<MatOptionSelectionChange | null>;
5858
get panelOpen(): boolean;
5959
position: 'auto' | 'above' | 'below';
60-
constructor(_element: ElementRef<HTMLInputElement>, _overlay: Overlay, _viewContainerRef: ViewContainerRef, _zone: NgZone, _changeDetectorRef: ChangeDetectorRef, scrollStrategy: any, _dir: Directionality, _formField: MatFormField, _document: any, _viewportRuler: ViewportRuler);
60+
constructor(_element: ElementRef<HTMLInputElement>, _overlay: Overlay, _viewContainerRef: ViewContainerRef, _zone: NgZone, _changeDetectorRef: ChangeDetectorRef, scrollStrategy: any, _dir: Directionality, _formField: MatFormField, _document: any, _viewportRuler: ViewportRuler, _defaults?: MatAutocompleteDefaultOptions | undefined);
6161
_handleFocus(): void;
6262
_handleInput(event: KeyboardEvent): void;
6363
_handleKeydown(event: KeyboardEvent): void;
@@ -73,7 +73,7 @@ export declare abstract class _MatAutocompleteTriggerBase implements ControlValu
7373
writeValue(value: any): void;
7474
static ngAcceptInputType_autocompleteDisabled: BooleanInput;
7575
static ɵdir: i0.ɵɵDirectiveDefWithMeta<_MatAutocompleteTriggerBase, never, never, { "autocomplete": "matAutocomplete"; "position": "matAutocompletePosition"; "connectedTo": "matAutocompleteConnectedTo"; "autocompleteAttribute": "autocomplete"; "autocompleteDisabled": "matAutocompleteDisabled"; }, {}, never>;
76-
static ɵfac: i0.ɵɵFactoryDef<_MatAutocompleteTriggerBase, [null, null, null, null, null, null, { optional: true; }, { optional: true; host: true; }, { optional: true; }, null]>;
76+
static ɵfac: i0.ɵɵFactoryDef<_MatAutocompleteTriggerBase, [null, null, null, null, null, null, { optional: true; }, { optional: true; host: true; }, { optional: true; }, null, { optional: true; }]>;
7777
}
7878

7979
export declare const AUTOCOMPLETE_OPTION_HEIGHT = 48;
@@ -114,6 +114,7 @@ export interface MatAutocompleteActivatedEvent {
114114

115115
export interface MatAutocompleteDefaultOptions {
116116
autoActiveFirstOption?: boolean;
117+
overlayPanelClass?: string | string[];
117118
}
118119

119120
export declare class MatAutocompleteModule {

0 commit comments

Comments
 (0)