Skip to content

Commit 498b884

Browse files
authored
Revert "chore: update MDC to latest canary" (#17932)
This reverts commit e6b6384.
1 parent e6b6384 commit 498b884

File tree

9 files changed

+533
-560
lines changed

9 files changed

+533
-560
lines changed

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
"@types/youtube": "^0.0.38",
5454
"@webcomponents/custom-elements": "^1.1.0",
5555
"core-js": "^2.6.9",
56-
"material-components-web": "5.0.0-canary.5729943ba.0",
56+
"material-components-web": "^4.0.0",
5757
"rxjs": "^6.5.3",
5858
"systemjs": "0.19.43",
5959
"tslib": "^1.10.0",

packages.bzl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
# all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
33
# version for the placeholders.
44
ANGULAR_PACKAGE_VERSION = "^9.0.0-0 || ^10.0.0-0"
5-
MDC_PACKAGE_VERSION = "5.0.0-canary.5729943ba.0"
5+
MDC_PACKAGE_VERSION = "^4.0.0"
66
VERSION_PLACEHOLDER_REPLACEMENTS = {
77
"0.0.0-MDC": MDC_PACKAGE_VERSION,
88
"0.0.0-NG": ANGULAR_PACKAGE_VERSION,

src/material-experimental/mdc-chips/chip-icons.ts

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,11 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {ChangeDetectorRef, Directive, ElementRef, OnDestroy} from '@angular/core';
9+
import {
10+
ChangeDetectorRef,
11+
Directive,
12+
ElementRef,
13+
} from '@angular/core';
1014
import {
1115
CanDisable,
1216
CanDisableCtor,
@@ -102,32 +106,20 @@ const _MatChipRemoveMixinBase:
102106
'mat-mdc-chip-remove mat-mdc-chip-trailing-icon mdc-chip__icon mdc-chip__icon--trailing',
103107
'[tabIndex]': 'tabIndex',
104108
'role': 'button',
105-
'(click)': '_clicks.next($event)',
106-
'(keydown)': '_keydowns.next($event)',
109+
'(click)': 'interaction.next($event)',
110+
'(keydown)': 'interaction.next($event)',
107111
}
108112
})
109-
export class MatChipRemove extends _MatChipRemoveMixinBase
110-
implements CanDisable, HasTabIndex, OnDestroy {
113+
export class MatChipRemove extends _MatChipRemoveMixinBase implements CanDisable, HasTabIndex {
111114
/**
112-
* Emits when the user clicks the icon.
115+
* Emits when the user interacts with the icon.
113116
* @docs-private
114117
*/
115-
_clicks: Subject<MouseEvent> = new Subject<MouseEvent>();
116-
117-
/**
118-
* Emits when the user presses a key on the icon.
119-
* @docs-private
120-
*/
121-
_keydowns: Subject<KeyboardEvent> = new Subject<KeyboardEvent>();
118+
interaction: Subject<MouseEvent | KeyboardEvent> = new Subject<MouseEvent | KeyboardEvent>();
122119

123120
constructor(_elementRef: ElementRef) {
124121
super(_elementRef);
125122
}
126123

127-
ngOnDestroy() {
128-
this._clicks.complete();
129-
this._keydowns.complete();
130-
}
131-
132124
static ngAcceptInputType_disabled: boolean | string | null | undefined;
133125
}

src/material-experimental/mdc-chips/chip-option.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@ export class MatChipOption extends MatChip {
202202
if (this.disabled) {
203203
event.preventDefault();
204204
} else {
205-
this._handleClick(event);
205+
this._handleInteraction(event);
206206
event.stopPropagation();
207207
}
208208
}
@@ -221,7 +221,7 @@ export class MatChipOption extends MatChip {
221221
event.preventDefault();
222222
break;
223223
default:
224-
this._handleKeydown(event);
224+
this._handleInteraction(event);
225225
}
226226
}
227227

src/material-experimental/mdc-chips/chip-row.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export class MatChipRow extends MatChip implements AfterContentInit, AfterViewIn
6262
cells!: HTMLElement[];
6363

6464
/** Key codes for which this component has a custom handler. */
65-
HANDLED_KEYS = new Set([...NAVIGATION_KEYS, BACKSPACE, DELETE]);
65+
HANDLED_KEYS = NAVIGATION_KEYS.concat([BACKSPACE, DELETE]);
6666

6767
ngAfterContentInit() {
6868
super.ngAfterContentInit();
@@ -145,7 +145,7 @@ export class MatChipRow extends MatChip implements AfterContentInit, AfterViewIn
145145
event.preventDefault();
146146
break;
147147
default:
148-
this._handleKeydown(event);
148+
this._handleInteraction(event);
149149
}
150150
}
151151

src/material-experimental/mdc-chips/chip.ts

Lines changed: 12 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
120120
/** Emits when the chip is blurred. */
121121
readonly _onBlur = new Subject<MatChipEvent>();
122122

123-
readonly HANDLED_KEYS: Set<number> = new Set();
123+
readonly HANDLED_KEYS: number[] = [];
124124

125125
/** Whether the chip has focus. */
126126
protected _hasFocusInternal = false;
@@ -330,29 +330,24 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
330330
_initRemoveIcon() {
331331
if (this.removeIcon) {
332332
this._chipFoundation.setShouldRemoveOnTrailingIconClick(true);
333-
this._listenToRemoveIconInteractions();
333+
this._listenToRemoveIconInteraction();
334334
this.removeIcon.disabled = this.disabled;
335335
}
336336
}
337337

338338
/** Handles interaction with the remove icon. */
339-
_listenToRemoveIconInteractions() {
340-
this.removeIcon._clicks
339+
_listenToRemoveIconInteraction() {
340+
this.removeIcon.interaction
341341
.pipe(takeUntil(this._destroyed))
342-
.subscribe(event => {
343-
if (!this.disabled) {
344-
this._chipFoundation.handleClick(event);
345-
}
346-
});
347-
this.removeIcon._keydowns
348-
.pipe(takeUntil(this._destroyed))
349-
.subscribe(event => {
342+
.subscribe((event) => {
350343
// The MDC chip foundation calls stopPropagation() for any trailing icon interaction
351344
// event, even ones it doesn't handle, so we want to avoid passing it keyboard events
352345
// for which we have a custom handler.
353-
if (!this.disabled && !this.HANDLED_KEYS.has(event.keyCode)) {
354-
this._chipFoundation.handleKeydown(event);
346+
if (this.disabled || (event instanceof KeyboardEvent &&
347+
this.HANDLED_KEYS.indexOf(event.keyCode) !== -1)) {
348+
return;
355349
}
350+
this._chipFoundation.handleTrailingIconInteraction(event);
356351
});
357352
}
358353

@@ -396,17 +391,10 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
396391
this._rippleRenderer.setupTriggerEvents(this._elementRef);
397392
}
398393

399-
/** Forwards click events to the MDC chip foundation. */
400-
_handleClick(event: MouseEvent) {
401-
if (!this.disabled) {
402-
this._chipFoundation.handleClick(event);
403-
}
404-
}
405-
406-
/** Forwards keydown events to the MDC chip foundation. */
407-
_handleKeydown(event: KeyboardEvent) {
394+
/** Forwards interaction events to the MDC chip foundation. */
395+
_handleInteraction(event: MouseEvent | KeyboardEvent) {
408396
if (!this.disabled) {
409-
this._chipFoundation.handleKeydown(event);
397+
this._chipFoundation.handleInteraction(event);
410398
}
411399
}
412400

src/material-experimental/mdc-helpers/BUILD.bazel

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ ng_module(
1818
# Add all MDC Sass files that we depend on here. After updating MDC dependencies, use the following
1919
# command to generate an updated list:
2020
#
21-
# `find node_modules/@material/ -name "_*.scss" | sort | sed -r 's/(.*)/"@npm\/\/:\1",/'`
21+
# `find node_modules/@material/ -name "_*.scss" | sort | sed -r 's/(.*\/@material\/[^/]*)\/(.*)/"@npm\/\/\1:\2",/'`
2222
#
2323
# TODO(mmalerba): Find a less tedious way to do this...
2424
sass_library(
@@ -45,7 +45,6 @@ sass_library(
4545
"@npm//:node_modules/@material/dialog/_variables.scss",
4646
"@npm//:node_modules/@material/drawer/_mixins.scss",
4747
"@npm//:node_modules/@material/drawer/_variables.scss",
48-
"@npm//:node_modules/@material/elevation/_functions.scss",
4948
"@npm//:node_modules/@material/elevation/_mixins.scss",
5049
"@npm//:node_modules/@material/elevation/_variables.scss",
5150
"@npm//:node_modules/@material/fab/_mixins.scss",
@@ -109,7 +108,6 @@ sass_library(
109108
"@npm//:node_modules/@material/tab-bar/_variables.scss",
110109
"@npm//:node_modules/@material/tab-indicator/_mixins.scss",
111110
"@npm//:node_modules/@material/tab-scroller/_mixins.scss",
112-
"@npm//:node_modules/@material/tab-scroller/_variables.scss",
113111
"@npm//:node_modules/@material/tab/_mixins.scss",
114112
"@npm//:node_modules/@material/tab/_variables.scss",
115113
"@npm//:node_modules/@material/textfield/_functions.scss",

src/material-experimental/mdc-progress-bar/progress-bar.ts

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -86,10 +86,7 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie
8686
removeClass: (className: string) => this._rootElement.classList.remove(className),
8787
setStyle: (el: HTMLElement, styleProperty: string, value: string) => {
8888
(el.style as any)[styleProperty] = value;
89-
},
90-
removeAttribute: (name: string) => this._elementRef.nativeElement.removeAttribute(name),
91-
setAttribute: (name: string, value: string) =>
92-
this._elementRef.nativeElement.setAttribute(name, value),
89+
}
9390
};
9491

9592
/** Flag that indicates whether NoopAnimations mode is set to true. */

0 commit comments

Comments
 (0)