Skip to content

Commit 1703db2

Browse files
crisbetocrisbeto
committed
main - 32353fb fix(multiple): resolve directive host binding issues (#30606)
1 parent fa6ec69 commit 1703db2

13 files changed

+35
-36
lines changed

‎autocomplete/index.d.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -365,8 +365,8 @@ export declare class MatAutocompleteTrigger implements ControlValueAccessor, Aft
365365
registerOnChange(fn: (value: any) => {}): void;
366366
registerOnTouched(fn: () => {}): void;
367367
setDisabledState(isDisabled: boolean): void;
368-
_handleKeydown(event: KeyboardEvent): void;
369-
_handleInput(event: KeyboardEvent): void;
368+
_handleKeydown(e: Event): void;
369+
_handleInput(event: Event): void;
370370
_handleFocus(): void;
371371
_handleClick(): void;
372372
/**

‎chips/index.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -521,7 +521,7 @@ export declare class MatChipInput implements MatChipTextControl, OnChanges, OnDe
521521
/** Register input for chip list */
522522
get chipGrid(): MatChipGrid;
523523
set chipGrid(value: MatChipGrid);
524-
private _chipGrid;
524+
protected _chipGrid: MatChipGrid;
525525
/**
526526
* Whether or not the chipEnd event will be emitted when the input is blurred.
527527
*/

‎datepicker/index.d.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1052,7 +1052,7 @@ declare abstract class MatDatepickerInputBase<S, D = ExtractDateTypeFromSelectio
10521052
registerOnTouched(fn: () => void): void;
10531053
setDisabledState(isDisabled: boolean): void;
10541054
_onKeydown(event: KeyboardEvent): void;
1055-
_onInput(value: string): void;
1055+
_onInput(event: Event): void;
10561056
_onChange(): void;
10571057
/** Handles blur events on the input. */
10581058
_onBlur(): void;
@@ -1391,7 +1391,7 @@ declare abstract class MatDateRangeInputPartBase<D> extends MatDatepickerInputBa
13911391
/** Refreshes the error state of the input. */
13921392
updateErrorState(): void;
13931393
/** Handles `input` events on the input element. */
1394-
_onInput(value: string): void;
1394+
_onInput(event: Event): void;
13951395
/** Opens the datepicker associated with the input. */
13961396
protected _openPopup(): void;
13971397
/** Gets the minimum date from the range input. */

‎fesm2022/autocomplete.mjs

+2-1
Original file line numberDiff line numberDiff line change
@@ -593,7 +593,8 @@ class MatAutocompleteTrigger {
593593
setDisabledState(isDisabled) {
594594
this._element.nativeElement.disabled = isDisabled;
595595
}
596-
_handleKeydown(event) {
596+
_handleKeydown(e) {
597+
const event = e;
597598
const keyCode = event.keyCode;
598599
const hasModifier = hasModifierKey(event);
599600
// Prevent the default action on all escape key presses. This is here primarily to bring IE

‎fesm2022/autocomplete.mjs.map

+1-1
Large diffs are not rendered by default.

‎fesm2022/chips.mjs.map

+1-1
Large diffs are not rendered by default.

‎fesm2022/datepicker.mjs

+16-19
Original file line numberDiff line numberDiff line change
@@ -3298,7 +3298,8 @@ class MatDatepickerInputBase {
32983298
event.preventDefault();
32993299
}
33003300
}
3301-
_onInput(value) {
3301+
_onInput(event) {
3302+
const value = event.target.value;
33023303
const lastValueWasValid = this._lastValueValid;
33033304
let date = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);
33043305
this._lastValueValid = this._isValidValue(date);
@@ -3545,7 +3546,7 @@ class MatDatepickerInput extends MatDatepickerInputBase {
35453546
return event.source !== this;
35463547
}
35473548
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0-next.1", ngImport: i0, type: MatDatepickerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
3548-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0-next.1", type: MatDatepickerInput, isStandalone: true, selector: "input[matDatepicker]", inputs: { matDatepicker: "matDatepicker", min: "min", max: "max", dateFilter: ["matDatepickerFilter", "dateFilter"] }, host: { listeners: { "input": "_onInput($event.target.value)", "change": "_onChange()", "blur": "_onBlur()", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-haspopup": "_datepicker ? \"dialog\" : null", "attr.aria-owns": "_ariaOwns()", "attr.min": "min ? _dateAdapter.toIso8601(min) : null", "attr.max": "max ? _dateAdapter.toIso8601(max) : null", "attr.data-mat-calendar": "_datepicker ? _datepicker.id : null", "disabled": "disabled" }, classAttribute: "mat-datepicker-input" }, providers: [
3549+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0-next.1", type: MatDatepickerInput, isStandalone: true, selector: "input[matDatepicker]", inputs: { matDatepicker: "matDatepicker", min: "min", max: "max", dateFilter: ["matDatepickerFilter", "dateFilter"] }, host: { listeners: { "input": "_onInput($event)", "change": "_onChange()", "blur": "_onBlur()", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-haspopup": "_datepicker ? \"dialog\" : null", "attr.aria-owns": "_ariaOwns()", "attr.min": "min ? _dateAdapter.toIso8601(min) : null", "attr.max": "max ? _dateAdapter.toIso8601(max) : null", "attr.data-mat-calendar": "_datepicker ? _datepicker.id : null", "disabled": "disabled" }, classAttribute: "mat-datepicker-input" }, providers: [
35493550
MAT_DATEPICKER_VALUE_ACCESSOR,
35503551
MAT_DATEPICKER_VALIDATORS,
35513552
{ provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: MatDatepickerInput },
@@ -3570,7 +3571,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0-next.1",
35703571
// `aria-owns` for this, because it's only defined while the calendar is open.
35713572
'[attr.data-mat-calendar]': '_datepicker ? _datepicker.id : null',
35723573
'[disabled]': 'disabled',
3573-
'(input)': '_onInput($event.target.value)',
3574+
'(input)': '_onInput($event)',
35743575
'(change)': '_onChange()',
35753576
'(blur)': '_onBlur()',
35763577
'(keydown)': '_onKeydown($event)',
@@ -4273,8 +4274,8 @@ class MatDateRangeInputPartBase extends MatDatepickerInputBase {
42734274
this._errorStateTracker.updateErrorState();
42744275
}
42754276
/** Handles `input` events on the input element. */
4276-
_onInput(value) {
4277-
super._onInput(value);
4277+
_onInput(event) {
4278+
super._onInput(event);
42784279
this._rangeInput._handleChildValueChange();
42794280
}
42804281
/** Opens the datepicker associated with the input. */
@@ -4376,7 +4377,7 @@ class MatStartDate extends MatDateRangeInputPartBase {
43764377
}
43774378
}
43784379
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0-next.1", ngImport: i0, type: MatStartDate, deps: null, target: i0.ɵɵFactoryTarget.Directive });
4379-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0-next.1", type: MatStartDate, isStandalone: true, selector: "input[matStartDate]", outputs: { dateChange: "dateChange", dateInput: "dateInput" }, host: { attributes: { "type": "text" }, listeners: { "input": "_onInput($event.target.value)", "change": "_onChange()", "keydown": "_onKeydown($event)", "blur": "_onBlur()" }, properties: { "disabled": "disabled", "attr.aria-haspopup": "_rangeInput.rangePicker ? \"dialog\" : null", "attr.aria-owns": "_rangeInput._ariaOwns\n ? _rangeInput._ariaOwns()\n : (_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null", "attr.min": "_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()) : null", "attr.max": "_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()) : null" }, classAttribute: "mat-start-date mat-date-range-input-inner" }, providers: [
4380+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0-next.1", type: MatStartDate, isStandalone: true, selector: "input[matStartDate]", outputs: { dateChange: "dateChange", dateInput: "dateInput" }, host: { attributes: { "type": "text" }, listeners: { "input": "_onInput($event)", "change": "_onChange()", "keydown": "_onKeydown($event)", "blur": "_onBlur()" }, properties: { "disabled": "disabled", "attr.aria-haspopup": "_rangeInput.rangePicker ? \"dialog\" : null", "attr.aria-owns": "_rangeInput._ariaOwns() || null", "attr.min": "_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()!) : null", "attr.max": "_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()!) : null" }, classAttribute: "mat-start-date mat-date-range-input-inner" }, providers: [
43804381
{ provide: NG_VALUE_ACCESSOR, useExisting: MatStartDate, multi: true },
43814382
{ provide: NG_VALIDATORS, useExisting: MatStartDate, multi: true },
43824383
], usesInheritance: true, ngImport: i0 });
@@ -4388,15 +4389,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0-next.1",
43884389
host: {
43894390
'class': 'mat-start-date mat-date-range-input-inner',
43904391
'[disabled]': 'disabled',
4391-
'(input)': '_onInput($event.target.value)',
4392+
'(input)': '_onInput($event)',
43924393
'(change)': '_onChange()',
43934394
'(keydown)': '_onKeydown($event)',
43944395
'[attr.aria-haspopup]': '_rangeInput.rangePicker ? "dialog" : null',
4395-
'[attr.aria-owns]': `_rangeInput._ariaOwns
4396-
? _rangeInput._ariaOwns()
4397-
: (_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null`,
4398-
'[attr.min]': '_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()) : null',
4399-
'[attr.max]': '_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()) : null',
4396+
'[attr.aria-owns]': '_rangeInput._ariaOwns() || null',
4397+
'[attr.min]': '_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()!) : null',
4398+
'[attr.max]': '_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()!) : null',
44004399
'(blur)': '_onBlur()',
44014400
'type': 'text',
44024401
},
@@ -4471,7 +4470,7 @@ class MatEndDate extends MatDateRangeInputPartBase {
44714470
}
44724471
}
44734472
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0-next.1", ngImport: i0, type: MatEndDate, deps: null, target: i0.ɵɵFactoryTarget.Directive });
4474-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0-next.1", type: MatEndDate, isStandalone: true, selector: "input[matEndDate]", outputs: { dateChange: "dateChange", dateInput: "dateInput" }, host: { attributes: { "type": "text" }, listeners: { "input": "_onInput($event.target.value)", "change": "_onChange()", "keydown": "_onKeydown($event)", "blur": "_onBlur()" }, properties: { "disabled": "disabled", "attr.aria-haspopup": "_rangeInput.rangePicker ? \"dialog\" : null", "attr.aria-owns": "_rangeInput._ariaOwns\n ? _rangeInput._ariaOwns()\n : (_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null", "attr.min": "_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()) : null", "attr.max": "_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()) : null" }, classAttribute: "mat-end-date mat-date-range-input-inner" }, providers: [
4473+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0-next.1", type: MatEndDate, isStandalone: true, selector: "input[matEndDate]", outputs: { dateChange: "dateChange", dateInput: "dateInput" }, host: { attributes: { "type": "text" }, listeners: { "input": "_onInput($event)", "change": "_onChange()", "keydown": "_onKeydown($event)", "blur": "_onBlur()" }, properties: { "disabled": "disabled", "attr.aria-haspopup": "_rangeInput.rangePicker ? \"dialog\" : null", "attr.aria-owns": "_rangeInput._ariaOwns() || null", "attr.min": "_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()!) : null", "attr.max": "_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()!) : null" }, classAttribute: "mat-end-date mat-date-range-input-inner" }, providers: [
44754474
{ provide: NG_VALUE_ACCESSOR, useExisting: MatEndDate, multi: true },
44764475
{ provide: NG_VALIDATORS, useExisting: MatEndDate, multi: true },
44774476
], usesInheritance: true, ngImport: i0 });
@@ -4483,15 +4482,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0-next.1",
44834482
host: {
44844483
'class': 'mat-end-date mat-date-range-input-inner',
44854484
'[disabled]': 'disabled',
4486-
'(input)': '_onInput($event.target.value)',
4485+
'(input)': '_onInput($event)',
44874486
'(change)': '_onChange()',
44884487
'(keydown)': '_onKeydown($event)',
44894488
'[attr.aria-haspopup]': '_rangeInput.rangePicker ? "dialog" : null',
4490-
'[attr.aria-owns]': `_rangeInput._ariaOwns
4491-
? _rangeInput._ariaOwns()
4492-
: (_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null`,
4493-
'[attr.min]': '_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()) : null',
4494-
'[attr.max]': '_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()) : null',
4489+
'[attr.aria-owns]': '_rangeInput._ariaOwns() || null',
4490+
'[attr.min]': '_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()!) : null',
4491+
'[attr.max]': '_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()!) : null',
44954492
'(blur)': '_onBlur()',
44964493
'type': 'text',
44974494
},

‎fesm2022/datepicker.mjs.map

+1-1
Large diffs are not rendered by default.

‎fesm2022/menu.mjs

+2-2
Original file line numberDiff line numberDiff line change
@@ -1112,7 +1112,7 @@ class MatMenuTrigger {
11121112
return PANELS_TO_TRIGGERS.get(menu) === this;
11131113
}
11141114
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0-next.1", ngImport: i0, type: MatMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1115-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0-next.1", type: MatMenuTrigger, isStandalone: true, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: { _deprecatedMatMenuTriggerFor: ["mat-menu-trigger-for", "_deprecatedMatMenuTriggerFor"], menu: ["matMenuTriggerFor", "menu"], menuData: ["matMenuTriggerData", "menuData"], restoreFocus: ["matMenuTriggerRestoreFocus", "restoreFocus"] }, outputs: { menuOpened: "menuOpened", onMenuOpen: "onMenuOpen", menuClosed: "menuClosed", onMenuClose: "onMenuClose" }, host: { listeners: { "click": "_handleClick($event)", "mousedown": "_handleMousedown($event)", "keydown": "_handleKeydown($event)" }, properties: { "attr.aria-haspopup": "menu ? \"menu\" : null", "attr.aria-expanded": "menuOpen", "attr.aria-controls": "menuOpen ? menu.panelId : null" }, classAttribute: "mat-mdc-menu-trigger" }, exportAs: ["matMenuTrigger"], ngImport: i0 });
1115+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0-next.1", type: MatMenuTrigger, isStandalone: true, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: { _deprecatedMatMenuTriggerFor: ["mat-menu-trigger-for", "_deprecatedMatMenuTriggerFor"], menu: ["matMenuTriggerFor", "menu"], menuData: ["matMenuTriggerData", "menuData"], restoreFocus: ["matMenuTriggerRestoreFocus", "restoreFocus"] }, outputs: { menuOpened: "menuOpened", onMenuOpen: "onMenuOpen", menuClosed: "menuClosed", onMenuClose: "onMenuClose" }, host: { listeners: { "click": "_handleClick($event)", "mousedown": "_handleMousedown($event)", "keydown": "_handleKeydown($event)" }, properties: { "attr.aria-haspopup": "menu ? \"menu\" : null", "attr.aria-expanded": "menuOpen", "attr.aria-controls": "menuOpen ? menu?.panelId : null" }, classAttribute: "mat-mdc-menu-trigger" }, exportAs: ["matMenuTrigger"], ngImport: i0 });
11161116
}
11171117
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0-next.1", ngImport: i0, type: MatMenuTrigger, decorators: [{
11181118
type: Directive,
@@ -1122,7 +1122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0-next.1",
11221122
'class': 'mat-mdc-menu-trigger',
11231123
'[attr.aria-haspopup]': 'menu ? "menu" : null',
11241124
'[attr.aria-expanded]': 'menuOpen',
1125-
'[attr.aria-controls]': 'menuOpen ? menu.panelId : null',
1125+
'[attr.aria-controls]': 'menuOpen ? menu?.panelId : null',
11261126
'(click)': '_handleClick($event)',
11271127
'(mousedown)': '_handleMousedown($event)',
11281128
'(keydown)': '_handleKeydown($event)',

‎fesm2022/menu.mjs.map

+1-1
Large diffs are not rendered by default.

‎fesm2022/timepicker.mjs

+4-3
Original file line numberDiff line numberDiff line change
@@ -589,7 +589,8 @@ class MatTimepickerInput {
589589
}
590590
};
591591
/** Handles the `input` event. */
592-
_handleInput(value) {
592+
_handleInput(event) {
593+
const value = event.target.value;
593594
const currentValue = this.value();
594595
const date = this._dateAdapter.parseTime(value, this._dateFormats.parse.timeInput);
595596
const hasChanged = !this._dateAdapter.sameTime(date, currentValue);
@@ -742,7 +743,7 @@ class MatTimepickerInput {
742743
]);
743744
}
744745
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0-next.1", ngImport: i0, type: MatTimepickerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
745-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0-next.1", type: MatTimepickerInput, isStandalone: true, selector: "input[matTimepicker]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, timepicker: { classPropertyName: "timepicker", publicName: "matTimepicker", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "matTimepickerMin", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "matTimepickerMax", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "combobox", "type": "text", "aria-haspopup": "listbox" }, listeners: { "blur": "_handleBlur()", "input": "_handleInput($event.target.value)", "keydown": "_handleKeydown($event)" }, properties: { "attr.aria-activedescendant": "_ariaActiveDescendant()", "attr.aria-expanded": "_ariaExpanded()", "attr.aria-controls": "_ariaControls()", "attr.mat-timepicker-id": "timepicker()?.panelId", "disabled": "disabled()" }, classAttribute: "mat-timepicker-input" }, providers: [
746+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0-next.1", type: MatTimepickerInput, isStandalone: true, selector: "input[matTimepicker]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, timepicker: { classPropertyName: "timepicker", publicName: "matTimepicker", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "matTimepickerMin", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "matTimepickerMax", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "combobox", "type": "text", "aria-haspopup": "listbox" }, listeners: { "blur": "_handleBlur()", "input": "_handleInput($event)", "keydown": "_handleKeydown($event)" }, properties: { "attr.aria-activedescendant": "_ariaActiveDescendant()", "attr.aria-expanded": "_ariaExpanded()", "attr.aria-controls": "_ariaControls()", "attr.mat-timepicker-id": "timepicker()?.panelId", "disabled": "disabled()" }, classAttribute: "mat-timepicker-input" }, providers: [
746747
{
747748
provide: NG_VALUE_ACCESSOR,
748749
useExisting: MatTimepickerInput,
@@ -775,7 +776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0-next.1",
775776
'[attr.mat-timepicker-id]': 'timepicker()?.panelId',
776777
'[disabled]': 'disabled()',
777778
'(blur)': '_handleBlur()',
778-
'(input)': '_handleInput($event.target.value)',
779+
'(input)': '_handleInput($event)',
779780
'(keydown)': '_handleKeydown($event)',
780781
},
781782
providers: [

‎fesm2022/timepicker.mjs.map

+1-1
Large diffs are not rendered by default.

‎timepicker/index.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -236,7 +236,7 @@ export declare class MatTimepickerInput<D> implements ControlValueAccessor, Vali
236236
/** Handles clicks on the input or the containing form field. */
237237
private _handleClick;
238238
/** Handles the `input` event. */
239-
protected _handleInput(value: string): void;
239+
protected _handleInput(event: Event): void;
240240
/** Handles the `blur` event. */
241241
protected _handleBlur(): void;
242242
/** Handles the `keydown` event. */

0 commit comments

Comments
 (0)