@angular/material 17.0.0-next.1 → 17.0.0-next.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/_index.scss +1 -2
- package/autocomplete/_autocomplete-theme.scss +12 -18
- package/autocomplete/index.d.ts +19 -26
- package/badge/_badge-theme.scss +15 -27
- package/badge/index.d.ts +9 -17
- package/bottom-sheet/_bottom-sheet-theme.scss +13 -22
- package/button-toggle/_button-toggle-theme.scss +17 -28
- package/button-toggle/index.d.ts +15 -18
- package/checkbox/index.d.ts +21 -27
- package/chips/_chips-theme.scss +18 -56
- package/core/color/_all-color.scss +7 -15
- package/core/density/private/_all-density.scss +34 -39
- package/core/focus-indicators/_focus-indicators-theme.scss +6 -8
- package/core/focus-indicators/_private.scss +22 -26
- package/core/index.d.ts +7 -11
- package/core/style/_form-common.scss +7 -7
- package/core/style/_private.scss +2 -4
- package/core/testing/index.d.ts +2 -1
- package/core/theming/_all-theme.scss +41 -41
- package/core/theming/_inspection.scss +47 -0
- package/core/theming/_m2-inspection.scss +57 -0
- package/core/theming/_theming.scss +0 -14
- package/core/tokens/m2/mat/_autocomplete.scss +5 -8
- package/core/tokens/m2/mat/_badge.scss +12 -15
- package/core/tokens/m2/mat/_bottom-sheet.scss +11 -17
- package/core/tokens/m2/mat/_datepicker.scss +28 -38
- package/core/tokens/m2/mat/_divider.scss +5 -8
- package/core/tokens/m2/mat/_expansion.scss +24 -28
- package/core/tokens/m2/mat/_grid-list.scss +8 -8
- package/core/tokens/m2/mat/_icon.scss +3 -3
- package/core/tokens/m2/mat/_legacy-button-toggle.scss +15 -19
- package/core/tokens/m2/mat/_menu.scss +12 -17
- package/core/tokens/m2/mat/_select.scss +15 -29
- package/core/tokens/m2/mat/_sidenav.scss +12 -14
- package/core/tokens/m2/mat/_snack-bar.scss +7 -8
- package/core/tokens/m2/mat/_standard-button-toggle.scss +23 -22
- package/core/tokens/m2/mat/_stepper.scss +30 -33
- package/core/tokens/m2/mat/_tab-header-with-background.scss +6 -8
- package/core/tokens/m2/mat/_tab-header.scss +13 -18
- package/core/tokens/m2/mat/_table.scss +19 -23
- package/core/tokens/m2/mat/_toolbar.scss +12 -16
- package/core/tokens/m2/mdc/_chip.scss +38 -24
- package/core/tokens/m2/mdc/_circular-progress.scss +5 -6
- package/core/tokens/m2/mdc/_dialog.scss +16 -30
- package/core/tokens/m2/mdc/_icon-button.scss +2 -2
- package/core/tokens/m2/mdc/_plain-tooltip.scss +9 -22
- package/core/tokens/m2/mdc/_snack-bar.scss +10 -23
- package/core/tokens/m2/mdc/_tab-indicator.scss +5 -8
- package/core/tokens/m2/mdc/_tab.scss +5 -4
- package/core/typography/_all-typography.scss +44 -47
- package/core/typography/_typography.scss +32 -155
- package/core/typography/_versioning.scss +7 -2
- package/datepicker/_datepicker-theme.scss +20 -34
- package/dialog/_dialog-theme.scss +14 -25
- package/dialog/_mdc-dialog-structure-overrides.scss +12 -10
- package/dialog/index.d.ts +2 -0
- package/divider/_divider-theme.scss +12 -18
- package/esm2022/autocomplete/autocomplete-trigger.mjs +13 -19
- package/esm2022/autocomplete/autocomplete.mjs +23 -50
- package/esm2022/badge/badge.mjs +11 -29
- package/esm2022/button-toggle/button-toggle.mjs +25 -33
- package/esm2022/checkbox/checkbox.mjs +32 -39
- package/esm2022/core/option/optgroup.mjs +10 -11
- package/esm2022/core/option/option.mjs +6 -6
- package/esm2022/core/testing/option-harness.mjs +3 -3
- package/esm2022/core/version.mjs +1 -1
- package/esm2022/dialog/dialog-container.mjs +16 -3
- package/esm2022/menu/menu-item.mjs +15 -11
- package/esm2022/menu/menu.mjs +9 -22
- package/esm2022/slide-toggle/slide-toggle.mjs +33 -37
- package/esm2022/tabs/tab-group.mjs +3 -3
- package/expansion/_expansion-theme.scss +16 -24
- package/fesm2022/autocomplete.mjs +33 -65
- package/fesm2022/autocomplete.mjs.map +1 -1
- package/fesm2022/badge.mjs +11 -28
- package/fesm2022/badge.mjs.map +1 -1
- package/fesm2022/button-toggle.mjs +25 -32
- package/fesm2022/button-toggle.mjs.map +1 -1
- package/fesm2022/checkbox.mjs +31 -38
- package/fesm2022/checkbox.mjs.map +1 -1
- package/fesm2022/core/testing.mjs +2 -2
- package/fesm2022/core/testing.mjs.map +1 -1
- package/fesm2022/core.mjs +14 -13
- package/fesm2022/core.mjs.map +1 -1
- package/fesm2022/dialog.mjs +15 -2
- package/fesm2022/dialog.mjs.map +1 -1
- package/fesm2022/menu.mjs +23 -31
- package/fesm2022/menu.mjs.map +1 -1
- package/fesm2022/slide-toggle.mjs +33 -36
- package/fesm2022/slide-toggle.mjs.map +1 -1
- package/fesm2022/tabs.mjs +2 -2
- package/fesm2022/tabs.mjs.map +1 -1
- package/form-field/_form-field-sizing.scss +1 -1
- package/grid-list/_grid-list-theme.scss +12 -19
- package/icon/_icon-theme.scss +17 -25
- package/list/_list-theme.scss +1 -1
- package/menu/_menu-theme.scss +13 -22
- package/menu/index.d.ts +12 -18
- package/package.json +2 -2
- package/prebuilt-themes/deeppurple-amber.css +1 -1
- package/prebuilt-themes/indigo-pink.css +1 -1
- package/prebuilt-themes/pink-bluegrey.css +1 -1
- package/prebuilt-themes/purple-green.css +1 -1
- package/progress-spinner/_progress-spinner-theme.scss +16 -22
- package/schematics/ng-add/index.js +1 -1
- package/schematics/ng-add/index.mjs +1 -1
- package/schematics/ng-generate/mdc-migration/index_bundled.js.map +1 -1
- package/select/_select-theme.scss +17 -31
- package/sidenav/_sidenav-theme.scss +12 -18
- package/slide-toggle/index.d.ts +20 -23
- package/snack-bar/_snack-bar-theme.scss +15 -24
- package/sort/_sort-theme.scss +13 -22
- package/stepper/_stepper-theme.scss +16 -34
- package/table/_table-theme.scss +14 -25
- package/tabs/_tabs-theme.scss +31 -45
- package/toolbar/_toolbar-theme.scss +22 -31
- package/tooltip/_tooltip-theme.scss +15 -23
- package/tree/_tree-theme.scss +20 -29
- package/core/typography/_typography-deprecated.scss +0 -39
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, EventEmitter, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, ViewChild, ContentChildren, Input, Output, Directive, forwardRef, Optional, Host, NgModule } from '@angular/core';
|
|
3
|
-
import {
|
|
2
|
+
import { InjectionToken, EventEmitter, booleanAttribute, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, ViewChild, ContentChildren, Input, Output, Directive, forwardRef, Optional, Host, NgModule } from '@angular/core';
|
|
3
|
+
import { MAT_OPTION_PARENT_COMPONENT, MatOption, MAT_OPTGROUP, MatOptionSelectionChange, _countGroupLabelsBeforeOption, _getOptionScrollPosition, MatOptionModule, MatCommonModule } from '@angular/material/core';
|
|
4
4
|
import * as i2 from '@angular/common';
|
|
5
5
|
import { DOCUMENT, CommonModule } from '@angular/common';
|
|
6
6
|
import * as i3 from '@angular/cdk/scrolling';
|
|
@@ -8,7 +8,7 @@ import { CdkScrollableModule } from '@angular/cdk/scrolling';
|
|
|
8
8
|
import * as i1$1 from '@angular/cdk/overlay';
|
|
9
9
|
import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
|
|
10
10
|
import { ActiveDescendantKeyManager, removeAriaReferencedId, addAriaReferencedId } from '@angular/cdk/a11y';
|
|
11
|
-
import {
|
|
11
|
+
import { coerceStringArray } from '@angular/cdk/coercion';
|
|
12
12
|
import * as i1 from '@angular/cdk/platform';
|
|
13
13
|
import { _getEventTarget } from '@angular/cdk/platform';
|
|
14
14
|
import { trigger, state, style, transition, group, animate } from '@angular/animations';
|
|
@@ -54,10 +54,6 @@ class MatAutocompleteSelectedEvent {
|
|
|
54
54
|
this.option = option;
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
|
-
// Boilerplate for applying mixins to MatAutocomplete.
|
|
58
|
-
/** @docs-private */
|
|
59
|
-
const _MatAutocompleteMixinBase = mixinDisableRipple(class {
|
|
60
|
-
});
|
|
61
57
|
/** Injection token to be used to override the default options for `mat-autocomplete`. */
|
|
62
58
|
const MAT_AUTOCOMPLETE_DEFAULT_OPTIONS = new InjectionToken('mat-autocomplete-default-options', {
|
|
63
59
|
providedIn: 'root',
|
|
@@ -73,7 +69,7 @@ function MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY() {
|
|
|
73
69
|
};
|
|
74
70
|
}
|
|
75
71
|
/** Autocomplete component. */
|
|
76
|
-
class MatAutocomplete
|
|
72
|
+
class MatAutocomplete {
|
|
77
73
|
/** Whether the autocomplete panel is open. */
|
|
78
74
|
get isOpen() {
|
|
79
75
|
return this._isOpen && this.showPanel;
|
|
@@ -83,35 +79,6 @@ class MatAutocomplete extends _MatAutocompleteMixinBase {
|
|
|
83
79
|
this._color = value;
|
|
84
80
|
this._setThemeClasses(this._classList);
|
|
85
81
|
}
|
|
86
|
-
/**
|
|
87
|
-
* Whether the first option should be highlighted when the autocomplete panel is opened.
|
|
88
|
-
* Can be configured globally through the `MAT_AUTOCOMPLETE_DEFAULT_OPTIONS` token.
|
|
89
|
-
*/
|
|
90
|
-
get autoActiveFirstOption() {
|
|
91
|
-
return this._autoActiveFirstOption;
|
|
92
|
-
}
|
|
93
|
-
set autoActiveFirstOption(value) {
|
|
94
|
-
this._autoActiveFirstOption = coerceBooleanProperty(value);
|
|
95
|
-
}
|
|
96
|
-
/** Whether the active option should be selected as the user is navigating. */
|
|
97
|
-
get autoSelectActiveOption() {
|
|
98
|
-
return this._autoSelectActiveOption;
|
|
99
|
-
}
|
|
100
|
-
set autoSelectActiveOption(value) {
|
|
101
|
-
this._autoSelectActiveOption = coerceBooleanProperty(value);
|
|
102
|
-
}
|
|
103
|
-
/**
|
|
104
|
-
* Whether the user is required to make a selection when they're interacting with the
|
|
105
|
-
* autocomplete. If the user moves away from the autocomplete without selecting an option from
|
|
106
|
-
* the list, the value will be reset. If the user opens the panel and closes it without
|
|
107
|
-
* interacting or selecting a value, the initial value will be kept.
|
|
108
|
-
*/
|
|
109
|
-
get requireSelection() {
|
|
110
|
-
return this._requireSelection;
|
|
111
|
-
}
|
|
112
|
-
set requireSelection(value) {
|
|
113
|
-
this._requireSelection = coerceBooleanProperty(value);
|
|
114
|
-
}
|
|
115
82
|
/**
|
|
116
83
|
* Takes classes set on the host mat-autocomplete element and applies them to the panel
|
|
117
84
|
* inside the overlay container to allow for easy styling.
|
|
@@ -135,7 +102,7 @@ class MatAutocomplete extends _MatAutocompleteMixinBase {
|
|
|
135
102
|
return this._hideSingleSelectionIndicator;
|
|
136
103
|
}
|
|
137
104
|
set hideSingleSelectionIndicator(value) {
|
|
138
|
-
this._hideSingleSelectionIndicator =
|
|
105
|
+
this._hideSingleSelectionIndicator = value;
|
|
139
106
|
this._syncParentProperties();
|
|
140
107
|
}
|
|
141
108
|
/** Syncs the parent state with the individual options. */
|
|
@@ -147,7 +114,6 @@ class MatAutocomplete extends _MatAutocompleteMixinBase {
|
|
|
147
114
|
}
|
|
148
115
|
}
|
|
149
116
|
constructor(_changeDetectorRef, _elementRef, _defaults, platform) {
|
|
150
|
-
super();
|
|
151
117
|
this._changeDetectorRef = _changeDetectorRef;
|
|
152
118
|
this._elementRef = _elementRef;
|
|
153
119
|
this._defaults = _defaults;
|
|
@@ -172,7 +138,6 @@ class MatAutocomplete extends _MatAutocompleteMixinBase {
|
|
|
172
138
|
/** Emits whenever an option is activated. */
|
|
173
139
|
this.optionActivated = new EventEmitter();
|
|
174
140
|
this._classList = {};
|
|
175
|
-
this._hideSingleSelectionIndicator = this._defaults.hideSingleSelectionIndicator ?? false;
|
|
176
141
|
/** Unique ID to be used by autocomplete trigger's "aria-owns" property. */
|
|
177
142
|
this.id = `mat-autocomplete-${_uniqueAutocompleteIdCounter++}`;
|
|
178
143
|
// TODO(crisbeto): the problem that the `inertGroups` option resolves is only present on
|
|
@@ -180,9 +145,10 @@ class MatAutocomplete extends _MatAutocompleteMixinBase {
|
|
|
180
145
|
// wasn't resolved in VoiceOver, and if it has, we can remove this and the `inertGroups`
|
|
181
146
|
// option altogether.
|
|
182
147
|
this.inertGroups = platform?.SAFARI || false;
|
|
183
|
-
this.
|
|
184
|
-
this.
|
|
185
|
-
this.
|
|
148
|
+
this.autoActiveFirstOption = !!_defaults.autoActiveFirstOption;
|
|
149
|
+
this.autoSelectActiveOption = !!_defaults.autoSelectActiveOption;
|
|
150
|
+
this.requireSelection = !!_defaults.requireSelection;
|
|
151
|
+
this._hideSingleSelectionIndicator = this._defaults.hideSingleSelectionIndicator ?? false;
|
|
186
152
|
}
|
|
187
153
|
ngAfterContentInit() {
|
|
188
154
|
this._keyManager = new ActiveDescendantKeyManager(this.options)
|
|
@@ -262,11 +228,11 @@ class MatAutocomplete extends _MatAutocompleteMixinBase {
|
|
|
262
228
|
return false;
|
|
263
229
|
}
|
|
264
230
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatAutocomplete, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS }, { token: i1.Platform }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
265
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: MatAutocomplete, selector: "mat-autocomplete", inputs: {
|
|
231
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: MatAutocomplete, selector: "mat-autocomplete", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], displayWith: "displayWith", autoActiveFirstOption: ["autoActiveFirstOption", "autoActiveFirstOption", booleanAttribute], autoSelectActiveOption: ["autoSelectActiveOption", "autoSelectActiveOption", booleanAttribute], requireSelection: ["requireSelection", "requireSelection", booleanAttribute], panelWidth: "panelWidth", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], classList: ["class", "classList"], hideSingleSelectionIndicator: ["hideSingleSelectionIndicator", "hideSingleSelectionIndicator", booleanAttribute] }, outputs: { optionSelected: "optionSelected", opened: "opened", closed: "closed", optionActivated: "optionActivated" }, host: { attributes: { "ngSkipHydration": "" }, classAttribute: "mat-mdc-autocomplete" }, providers: [{ provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatAutocomplete }], queries: [{ propertyName: "options", predicate: MatOption, descendants: true }, { propertyName: "optionGroups", predicate: MAT_OPTGROUP, descendants: true }], viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], exportAs: ["matAutocomplete"], ngImport: i0, template: "<ng-template let-formFieldId=\"id\">\n <div\n class=\"mat-mdc-autocomplete-panel mdc-menu-surface mdc-menu-surface--open\"\n role=\"listbox\"\n [id]=\"id\"\n [ngClass]=\"_classList\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"_getPanelAriaLabelledby(formFieldId)\"\n [@panelAnimation]=\"isOpen ? 'visible' : 'hidden'\"\n (@panelAnimation.done)=\"_animationDone.next($event)\"\n #panel>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: ["div.mat-mdc-autocomplete-panel{box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);width:100%;max-height:256px;visibility:hidden;transform-origin:center top;overflow:auto;padding:8px 0;border-radius:4px;box-sizing:border-box;position:static;background-color:var(--mat-autocomplete-background-color)}.cdk-high-contrast-active div.mat-mdc-autocomplete-panel{outline:solid 1px}.cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) div.mat-mdc-autocomplete-panel{border-top-left-radius:0;border-top-right-radius:0}.mat-mdc-autocomplete-panel-above div.mat-mdc-autocomplete-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;transform-origin:center bottom}div.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{visibility:visible}div.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-hidden{visibility:hidden}mat-autocomplete{display:none}"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [panelAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
266
232
|
}
|
|
267
233
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatAutocomplete, decorators: [{
|
|
268
234
|
type: Component,
|
|
269
|
-
args: [{ selector: 'mat-autocomplete', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'matAutocomplete',
|
|
235
|
+
args: [{ selector: 'mat-autocomplete', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'matAutocomplete', host: {
|
|
270
236
|
'class': 'mat-mdc-autocomplete',
|
|
271
237
|
'ngSkipHydration': '',
|
|
272
238
|
}, providers: [{ provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatAutocomplete }], animations: [panelAnimation], template: "<ng-template let-formFieldId=\"id\">\n <div\n class=\"mat-mdc-autocomplete-panel mdc-menu-surface mdc-menu-surface--open\"\n role=\"listbox\"\n [id]=\"id\"\n [ngClass]=\"_classList\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"_getPanelAriaLabelledby(formFieldId)\"\n [@panelAnimation]=\"isOpen ? 'visible' : 'hidden'\"\n (@panelAnimation.done)=\"_animationDone.next($event)\"\n #panel>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: ["div.mat-mdc-autocomplete-panel{box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);width:100%;max-height:256px;visibility:hidden;transform-origin:center top;overflow:auto;padding:8px 0;border-radius:4px;box-sizing:border-box;position:static;background-color:var(--mat-autocomplete-background-color)}.cdk-high-contrast-active div.mat-mdc-autocomplete-panel{outline:solid 1px}.cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) div.mat-mdc-autocomplete-panel{border-top-left-radius:0;border-top-right-radius:0}.mat-mdc-autocomplete-panel-above div.mat-mdc-autocomplete-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;transform-origin:center bottom}div.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{visibility:visible}div.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-hidden{visibility:hidden}mat-autocomplete{display:none}"] }]
|
|
@@ -294,13 +260,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
|
|
|
294
260
|
}], displayWith: [{
|
|
295
261
|
type: Input
|
|
296
262
|
}], autoActiveFirstOption: [{
|
|
297
|
-
type: Input
|
|
263
|
+
type: Input,
|
|
264
|
+
args: [{ transform: booleanAttribute }]
|
|
298
265
|
}], autoSelectActiveOption: [{
|
|
299
|
-
type: Input
|
|
266
|
+
type: Input,
|
|
267
|
+
args: [{ transform: booleanAttribute }]
|
|
300
268
|
}], requireSelection: [{
|
|
301
|
-
type: Input
|
|
269
|
+
type: Input,
|
|
270
|
+
args: [{ transform: booleanAttribute }]
|
|
302
271
|
}], panelWidth: [{
|
|
303
272
|
type: Input
|
|
273
|
+
}], disableRipple: [{
|
|
274
|
+
type: Input,
|
|
275
|
+
args: [{ transform: booleanAttribute }]
|
|
304
276
|
}], optionSelected: [{
|
|
305
277
|
type: Output
|
|
306
278
|
}], opened: [{
|
|
@@ -313,7 +285,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
|
|
|
313
285
|
type: Input,
|
|
314
286
|
args: ['class']
|
|
315
287
|
}], hideSingleSelectionIndicator: [{
|
|
316
|
-
type: Input
|
|
288
|
+
type: Input,
|
|
289
|
+
args: [{ transform: booleanAttribute }]
|
|
317
290
|
}] } });
|
|
318
291
|
|
|
319
292
|
/**
|
|
@@ -369,16 +342,6 @@ const MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER = {
|
|
|
369
342
|
};
|
|
370
343
|
/** Base class with all of the `MatAutocompleteTrigger` functionality. */
|
|
371
344
|
class MatAutocompleteTrigger {
|
|
372
|
-
/**
|
|
373
|
-
* Whether the autocomplete is disabled. When disabled, the element will
|
|
374
|
-
* act as a regular input and the user won't be able to open the panel.
|
|
375
|
-
*/
|
|
376
|
-
get autocompleteDisabled() {
|
|
377
|
-
return this._autocompleteDisabled;
|
|
378
|
-
}
|
|
379
|
-
set autocompleteDisabled(value) {
|
|
380
|
-
this._autocompleteDisabled = coerceBooleanProperty(value);
|
|
381
|
-
}
|
|
382
345
|
constructor(_element, _overlay, _viewContainerRef, _zone, _changeDetectorRef, scrollStrategy, _dir, _formField, _document, _viewportRuler, _defaults) {
|
|
383
346
|
this._element = _element;
|
|
384
347
|
this._overlay = _overlay;
|
|
@@ -391,7 +354,6 @@ class MatAutocompleteTrigger {
|
|
|
391
354
|
this._viewportRuler = _viewportRuler;
|
|
392
355
|
this._defaults = _defaults;
|
|
393
356
|
this._componentDestroyed = false;
|
|
394
|
-
this._autocompleteDisabled = false;
|
|
395
357
|
/** Whether or not the label state is being overridden. */
|
|
396
358
|
this._manuallyFloatingLabel = false;
|
|
397
359
|
/** Subscription to viewport size changes. */
|
|
@@ -745,6 +707,7 @@ class MatAutocompleteTrigger {
|
|
|
745
707
|
// of the available options,
|
|
746
708
|
// - if a valid string is entered after an invalid one.
|
|
747
709
|
if (this.panelOpen) {
|
|
710
|
+
this._captureValueOnAttach();
|
|
748
711
|
this._emitOpened();
|
|
749
712
|
}
|
|
750
713
|
else {
|
|
@@ -764,9 +727,12 @@ class MatAutocompleteTrigger {
|
|
|
764
727
|
* the state of the trigger right before the opening sequence was finished.
|
|
765
728
|
*/
|
|
766
729
|
_emitOpened() {
|
|
767
|
-
this._valueOnOpen = this._element.nativeElement.value;
|
|
768
730
|
this.autocomplete.opened.emit();
|
|
769
731
|
}
|
|
732
|
+
/** Intended to be called when the panel is attached. Captures the current value of the input. */
|
|
733
|
+
_captureValueOnAttach() {
|
|
734
|
+
this._valueOnAttach = this._element.nativeElement.value;
|
|
735
|
+
}
|
|
770
736
|
/** Destroys the autocomplete suggestion panel. */
|
|
771
737
|
_destroyPanel() {
|
|
772
738
|
if (this._overlayRef) {
|
|
@@ -812,7 +778,8 @@ class MatAutocompleteTrigger {
|
|
|
812
778
|
panel._emitSelectEvent(toSelect);
|
|
813
779
|
this._element.nativeElement.focus();
|
|
814
780
|
}
|
|
815
|
-
else if (panel.requireSelection &&
|
|
781
|
+
else if (panel.requireSelection &&
|
|
782
|
+
this._element.nativeElement.value !== this._valueOnAttach) {
|
|
816
783
|
this._clearPreviousSelectedOption(null);
|
|
817
784
|
this._assignOptionValue(null);
|
|
818
785
|
// Wait for the animation to finish before clearing the form control value, otherwise
|
|
@@ -869,6 +836,7 @@ class MatAutocompleteTrigger {
|
|
|
869
836
|
this.autocomplete._setColor(this._formField?.color);
|
|
870
837
|
this._updatePanelState();
|
|
871
838
|
this._applyModalPanelOwnership();
|
|
839
|
+
this._captureValueOnAttach();
|
|
872
840
|
// We need to do an extra `panelOpen` check in here, because the
|
|
873
841
|
// autocomplete won't be shown if there are no options.
|
|
874
842
|
if (this.panelOpen && wasOpen !== this.panelOpen) {
|
|
@@ -991,7 +959,7 @@ class MatAutocompleteTrigger {
|
|
|
991
959
|
/** Determines whether the panel can be opened. */
|
|
992
960
|
_canOpen() {
|
|
993
961
|
const element = this._element.nativeElement;
|
|
994
|
-
return !element.readOnly && !element.disabled && !this.
|
|
962
|
+
return !element.readOnly && !element.disabled && !this.autocompleteDisabled;
|
|
995
963
|
}
|
|
996
964
|
/** Use defaultView of injected document if available or fallback to global window reference */
|
|
997
965
|
_getWindow() {
|
|
@@ -1070,7 +1038,7 @@ class MatAutocompleteTrigger {
|
|
|
1070
1038
|
}
|
|
1071
1039
|
}
|
|
1072
1040
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatAutocompleteTrigger, deps: [{ token: i0.ElementRef }, { token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: MAT_AUTOCOMPLETE_SCROLL_STRATEGY }, { token: i2$1.Directionality, optional: true }, { token: MAT_FORM_FIELD, host: true, optional: true }, { token: DOCUMENT, optional: true }, { token: i3.ViewportRuler }, { token: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1073
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: { autocomplete: ["matAutocomplete", "autocomplete"], position: ["matAutocompletePosition", "position"], connectedTo: ["matAutocompleteConnectedTo", "connectedTo"], autocompleteAttribute: ["autocomplete", "autocompleteAttribute"], autocompleteDisabled: ["matAutocompleteDisabled", "autocompleteDisabled"] }, host: { listeners: { "focusin": "_handleFocus()", "blur": "_onTouched()", "input": "_handleInput($event)", "keydown": "_handleKeydown($event)", "click": "_handleClick()" }, properties: { "attr.autocomplete": "autocompleteAttribute", "attr.role": "autocompleteDisabled ? null : \"combobox\"", "attr.aria-autocomplete": "autocompleteDisabled ? null : \"list\"", "attr.aria-activedescendant": "(panelOpen && activeOption) ? activeOption.id : null", "attr.aria-expanded": "autocompleteDisabled ? null : panelOpen.toString()", "attr.aria-controls": "(autocompleteDisabled || !panelOpen) ? null : autocomplete?.id", "attr.aria-haspopup": "autocompleteDisabled ? null : \"listbox\"" }, classAttribute: "mat-mdc-autocomplete-trigger" }, providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR], exportAs: ["matAutocompleteTrigger"], usesOnChanges: true, ngImport: i0 }); }
|
|
1041
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: { autocomplete: ["matAutocomplete", "autocomplete"], position: ["matAutocompletePosition", "position"], connectedTo: ["matAutocompleteConnectedTo", "connectedTo"], autocompleteAttribute: ["autocomplete", "autocompleteAttribute"], autocompleteDisabled: ["matAutocompleteDisabled", "autocompleteDisabled", booleanAttribute] }, host: { listeners: { "focusin": "_handleFocus()", "blur": "_onTouched()", "input": "_handleInput($event)", "keydown": "_handleKeydown($event)", "click": "_handleClick()" }, properties: { "attr.autocomplete": "autocompleteAttribute", "attr.role": "autocompleteDisabled ? null : \"combobox\"", "attr.aria-autocomplete": "autocompleteDisabled ? null : \"list\"", "attr.aria-activedescendant": "(panelOpen && activeOption) ? activeOption.id : null", "attr.aria-expanded": "autocompleteDisabled ? null : panelOpen.toString()", "attr.aria-controls": "(autocompleteDisabled || !panelOpen) ? null : autocomplete?.id", "attr.aria-haspopup": "autocompleteDisabled ? null : \"listbox\"" }, classAttribute: "mat-mdc-autocomplete-trigger" }, providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR], exportAs: ["matAutocompleteTrigger"], usesOnChanges: true, ngImport: i0 }); }
|
|
1074
1042
|
}
|
|
1075
1043
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatAutocompleteTrigger, decorators: [{
|
|
1076
1044
|
type: Directive,
|
|
@@ -1132,7 +1100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
|
|
|
1132
1100
|
args: ['autocomplete']
|
|
1133
1101
|
}], autocompleteDisabled: [{
|
|
1134
1102
|
type: Input,
|
|
1135
|
-
args: ['matAutocompleteDisabled']
|
|
1103
|
+
args: [{ alias: 'matAutocompleteDisabled', transform: booleanAttribute }]
|
|
1136
1104
|
}] } });
|
|
1137
1105
|
|
|
1138
1106
|
class MatAutocompleteModule {
|