Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit 810e22d

Browse files
material-web-copybaraasyncLiz
material-web-copybara
authored and
asyncLiz
committed
chore: internal change
PiperOrigin-RevId: 683793498
1 parent 2123067 commit 810e22d

File tree

4 files changed

+176
-92
lines changed

4 files changed

+176
-92
lines changed

‎packages/mdc-base/component.ts

Lines changed: 46 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
*/
2323

2424
import {safeAttrPrefix} from 'safevalues';
25-
import {safeElement} from 'safevalues/dom';
25+
import {setElementPrefixedAttribute} from 'safevalues/dom';
2626

2727
import {MDCFoundation} from './foundation';
2828
import {CustomEventListener, EventType, SpecificEventListener} from './types';
@@ -46,14 +46,16 @@ export class MDCComponent<FoundationType extends MDCFoundation> {
4646
protected foundation: FoundationType;
4747

4848
constructor(
49-
public root: HTMLElement, foundation?: FoundationType,
50-
...args: unknown[]) {
49+
public root: HTMLElement,
50+
foundation?: FoundationType,
51+
...args: unknown[]
52+
) {
5153
this.initialize(...args);
5254
// Note that we initialize foundation here and not within the constructor's
5355
// default param so that this.root is defined and can be used within the
5456
// foundation class.
5557
this.foundation =
56-
foundation === undefined ? this.getDefaultFoundation() : foundation;
58+
foundation === undefined ? this.getDefaultFoundation() : foundation;
5759
this.foundation.init();
5860
this.initialSyncWithDOM();
5961
}
@@ -72,8 +74,9 @@ export class MDCComponent<FoundationType extends MDCFoundation> {
7274
// Subclasses must override this method to return a properly configured
7375
// foundation class for the component.
7476
throw new Error(
75-
'Subclasses must override getDefaultFoundation to return a properly configured ' +
76-
'foundation class');
77+
'Subclasses must override getDefaultFoundation to return a properly configured ' +
78+
'foundation class',
79+
);
7780
}
7881

7982
initialSyncWithDOM() {
@@ -97,14 +100,20 @@ export class MDCComponent<FoundationType extends MDCFoundation> {
97100
* This is most useful when listening for custom events.
98101
*/
99102
listen<K extends EventType>(
100-
eventType: K, handler: SpecificEventListener<K>,
101-
options?: AddEventListenerOptions|boolean): void;
103+
eventType: K,
104+
handler: SpecificEventListener<K>,
105+
options?: AddEventListenerOptions | boolean,
106+
): void;
102107
listen<E extends Event>(
103-
eventType: string, handler: CustomEventListener<E>,
104-
options?: AddEventListenerOptions|boolean): void;
108+
eventType: string,
109+
handler: CustomEventListener<E>,
110+
options?: AddEventListenerOptions | boolean,
111+
): void;
105112
listen(
106-
eventType: string, handler: EventListener,
107-
options?: AddEventListenerOptions|boolean) {
113+
eventType: string,
114+
handler: EventListener,
115+
options?: AddEventListenerOptions | boolean,
116+
) {
108117
this.root.addEventListener(eventType, handler, options);
109118
}
110119

@@ -113,22 +122,32 @@ export class MDCComponent<FoundationType extends MDCFoundation> {
113122
* This is most useful when unlistening for custom events.
114123
*/
115124
unlisten<K extends EventType>(
116-
eventType: K, handler: SpecificEventListener<K>,
117-
options?: AddEventListenerOptions|boolean): void;
125+
eventType: K,
126+
handler: SpecificEventListener<K>,
127+
options?: AddEventListenerOptions | boolean,
128+
): void;
118129
unlisten<E extends Event>(
119-
eventType: string, handler: CustomEventListener<E>,
120-
options?: AddEventListenerOptions|boolean): void;
130+
eventType: string,
131+
handler: CustomEventListener<E>,
132+
options?: AddEventListenerOptions | boolean,
133+
): void;
121134
unlisten(
122-
eventType: string, handler: EventListener,
123-
options?: AddEventListenerOptions|boolean) {
135+
eventType: string,
136+
handler: EventListener,
137+
options?: AddEventListenerOptions | boolean,
138+
) {
124139
this.root.removeEventListener(eventType, handler, options);
125140
}
126141

127142
/**
128143
* Fires a cross-browser-compatible custom event from the component root of
129144
* the given type, with the given data.
130145
*/
131-
emit<T extends object>(eventType: string, eventData: T, shouldBubble = false) {
146+
emit<T extends object>(
147+
eventType: string,
148+
eventData: T,
149+
shouldBubble = false,
150+
) {
132151
let event: CustomEvent<T>;
133152
if (typeof CustomEvent === 'function') {
134153
event = new CustomEvent<T>(eventType, {
@@ -153,21 +172,21 @@ export class MDCComponent<FoundationType extends MDCFoundation> {
153172
* caller can't set any attribute.
154173
*/
155174
protected safeSetAttribute(
156-
element: HTMLElement,
157-
attribute: string,
158-
value: string,
175+
element: HTMLElement,
176+
attribute: string,
177+
value: string,
159178
) {
160179
if (attribute.toLowerCase() === 'tabindex') {
161180
element.tabIndex = Number(value);
162181
} else if (attribute.indexOf('data-') === 0) {
163182
const dataKey = toCamelCase(attribute.replace(/^data-/, ''));
164183
element.dataset[dataKey] = value;
165184
} else {
166-
safeElement.setPrefixedAttribute(
167-
[safeAttrPrefix`aria-`, safeAttrPrefix`role`],
168-
element,
169-
attribute,
170-
value,
185+
setElementPrefixedAttribute(
186+
[safeAttrPrefix`aria-`, safeAttrPrefix`role`],
187+
element,
188+
attribute,
189+
value,
171190
);
172191
}
173192
}

‎packages/mdc-chips/action/component.ts

Lines changed: 41 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,18 @@ import {MDCRipple, MDCRippleFactory} from '@material/ripple/component';
2929
import {MDCRippleFoundation} from '@material/ripple/foundation';
3030
import {MDCRippleCapableSurface} from '@material/ripple/types';
3131
import {safeAttrPrefix} from 'safevalues';
32-
import {safeElement} from 'safevalues/dom';
32+
import {setElementPrefixedAttribute} from 'safevalues/dom';
3333

3434
import {MDCChipActionAdapter} from './adapter';
35-
import {computePrimaryActionRippleClientRect, GRAPHIC_SELECTED_WIDTH_STYLE_PROP} from './component-ripple';
36-
import {MDCChipActionCssClasses, MDCChipActionFocusBehavior, MDCChipActionType} from './constants';
35+
import {
36+
computePrimaryActionRippleClientRect,
37+
GRAPHIC_SELECTED_WIDTH_STYLE_PROP,
38+
} from './component-ripple';
39+
import {
40+
MDCChipActionCssClasses,
41+
MDCChipActionFocusBehavior,
42+
MDCChipActionType,
43+
} from './constants';
3744
import {MDCChipActionFoundation} from './foundation';
3845
import {MDCChipPrimaryActionFoundation} from './primary-foundation';
3946
import {MDCChipTrailingActionFoundation} from './trailing-foundation';
@@ -42,9 +49,10 @@ import {MDCChipTrailingActionFoundation} from './trailing-foundation';
4249
* MDCChipActionFactory is used by the parent MDCChip component to initialize
4350
* chip actions.
4451
*/
45-
export type MDCChipActionFactory =
46-
(el: HTMLElement, foundation?: MDCChipActionFoundation) => MDCChipAction;
47-
52+
export type MDCChipActionFactory = (
53+
el: HTMLElement,
54+
foundation?: MDCChipActionFoundation,
55+
) => MDCChipAction;
4856

4957
const ALLOWED_ATTR_PREFIXES = [
5058
safeAttrPrefix`aria-`,
@@ -58,8 +66,10 @@ const ALLOWED_ATTR_PREFIXES = [
5866
* MDCChipAction provides component encapsulation of the different foundation
5967
* implementations.
6068
*/
61-
export class MDCChipAction extends
62-
MDCComponent<MDCChipActionFoundation> implements MDCRippleCapableSurface {
69+
export class MDCChipAction
70+
extends MDCComponent<MDCChipActionFoundation>
71+
implements MDCRippleCapableSurface
72+
{
6373
static override attachTo(root: HTMLElement): MDCChipAction {
6474
return new MDCChipAction(root);
6575
}
@@ -77,14 +87,17 @@ export class MDCChipAction extends
7787
}
7888

7989
override initialize(
80-
rippleFactory: MDCRippleFactory = (el, foundation) =>
81-
new MDCRipple(el, foundation)) {
90+
rippleFactory: MDCRippleFactory = (el, foundation) =>
91+
new MDCRipple(el, foundation),
92+
) {
8293
const rippleAdapter: MDCRippleAdapter = {
8394
...MDCRipple.createAdapter(this),
8495
computeBoundingRect: () => this.computeRippleClientRect(),
8596
};
86-
this.rippleInstance =
87-
rippleFactory(this.root, new MDCRippleFoundation(rippleAdapter));
97+
this.rippleInstance = rippleFactory(
98+
this.root,
99+
new MDCRippleFoundation(rippleAdapter),
100+
);
88101
}
89102

90103
override initialSyncWithDOM() {
@@ -124,8 +137,12 @@ export class MDCChipAction extends
124137
this.root.removeAttribute(name);
125138
},
126139
setAttribute: (name, value) => {
127-
safeElement.setPrefixedAttribute(
128-
ALLOWED_ATTR_PREFIXES, this.root, name, value);
140+
setElementPrefixedAttribute(
141+
ALLOWED_ATTR_PREFIXES,
142+
this.root,
143+
name,
144+
value,
145+
);
129146
},
130147
};
131148

@@ -171,14 +188,19 @@ export class MDCChipAction extends
171188

172189
private computeRippleClientRect(): DOMRect {
173190
if (this.root.classList.contains(MDCChipActionCssClasses.PRIMARY_ACTION)) {
174-
const chipRoot =
175-
closest(this.root, `.${MDCChipActionCssClasses.CHIP_ROOT}`);
191+
const chipRoot = closest(
192+
this.root,
193+
`.${MDCChipActionCssClasses.CHIP_ROOT}`,
194+
);
176195
// Return the root client rect since it's better than nothing
177196
if (!chipRoot) return this.root.getBoundingClientRect();
178-
const graphicWidth = window.getComputedStyle(chipRoot).getPropertyValue(
179-
GRAPHIC_SELECTED_WIDTH_STYLE_PROP);
197+
const graphicWidth = window
198+
.getComputedStyle(chipRoot)
199+
.getPropertyValue(GRAPHIC_SELECTED_WIDTH_STYLE_PROP);
180200
return computePrimaryActionRippleClientRect(
181-
chipRoot.getBoundingClientRect(), graphicWidth);
201+
chipRoot.getBoundingClientRect(),
202+
graphicWidth,
203+
);
182204
}
183205

184206
return this.root.getBoundingClientRect();

‎packages/mdc-switch/deprecated/component.ts

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,16 @@ import {MDCRipple} from '@material/ripple/component';
3030
import {MDCRippleFoundation} from '@material/ripple/foundation';
3131
import {MDCRippleCapableSurface} from '@material/ripple/types';
3232
import {safeAttrPrefix} from 'safevalues';
33-
import {safeElement} from 'safevalues/dom';
33+
import {setElementPrefixedAttribute} from 'safevalues/dom';
3434

3535
import {MDCSwitchAdapter} from './adapter';
3636
import {MDCSwitchFoundation} from './foundation';
3737

3838
/** MDC Switch */
39-
export class MDCSwitch extends MDCComponent<MDCSwitchFoundation> implements
40-
MDCRippleCapableSurface {
39+
export class MDCSwitch
40+
extends MDCComponent<MDCSwitchFoundation>
41+
implements MDCRippleCapableSurface
42+
{
4143
static override attachTo(root: HTMLElement) {
4244
return new MDCSwitch(root);
4345
}
@@ -76,13 +78,17 @@ export class MDCSwitch extends MDCComponent<MDCSwitchFoundation> implements
7678
removeClass: (className) => {
7779
this.root.classList.remove(className);
7880
},
79-
setNativeControlChecked: (checked) => this.nativeControl.checked =
80-
checked,
81-
setNativeControlDisabled: (disabled) => this.nativeControl.disabled =
82-
disabled,
81+
setNativeControlChecked: (checked) =>
82+
(this.nativeControl.checked = checked),
83+
setNativeControlDisabled: (disabled) =>
84+
(this.nativeControl.disabled = disabled),
8385
setNativeControlAttr: (attr, value) => {
84-
safeElement.setPrefixedAttribute(
85-
[safeAttrPrefix`aria-`], this.nativeControl, attr, value);
86+
setElementPrefixedAttribute(
87+
[safeAttrPrefix`aria-`],
88+
this.nativeControl,
89+
attr,
90+
value,
91+
);
8692
},
8793
};
8894
return new MDCSwitchFoundation(adapter);
@@ -110,8 +116,9 @@ export class MDCSwitch extends MDCComponent<MDCSwitchFoundation> implements
110116

111117
private createRipple(): MDCRipple {
112118
const {RIPPLE_SURFACE_SELECTOR} = MDCSwitchFoundation.strings;
113-
const rippleSurface =
114-
this.root.querySelector<HTMLElement>(RIPPLE_SURFACE_SELECTOR)!;
119+
const rippleSurface = this.root.querySelector<HTMLElement>(
120+
RIPPLE_SURFACE_SELECTOR,
121+
)!;
115122

116123
// DO NOT INLINE this variable. For backward compatibility, foundations take
117124
// a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
@@ -123,14 +130,21 @@ export class MDCSwitch extends MDCComponent<MDCSwitchFoundation> implements
123130
},
124131
computeBoundingRect: () => rippleSurface.getBoundingClientRect(),
125132
deregisterInteractionHandler: <K extends EventType>(
126-
eventType: K, handler: SpecificEventListener<K>) => {
133+
eventType: K,
134+
handler: SpecificEventListener<K>,
135+
) => {
127136
this.nativeControl.removeEventListener(
128-
eventType, handler, applyPassive());
137+
eventType,
138+
handler,
139+
applyPassive(),
140+
);
129141
},
130142
isSurfaceActive: () => matches(this.nativeControl, ':active'),
131143
isUnbounded: () => true,
132144
registerInteractionHandler: <K extends EventType>(
133-
eventType: K, handler: SpecificEventListener<K>) => {
145+
eventType: K,
146+
handler: SpecificEventListener<K>,
147+
) => {
134148
this.nativeControl.addEventListener(eventType, handler, applyPassive());
135149
},
136150
removeClass: (className: string) => {

0 commit comments

Comments
 (0)