mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
feat(focus,ripple): allow setting element.control = elementRef
Why? Makes it easier in lit to attach elements in bindings ```html <md-ripple .control=${this}> ``` This is needed to support radio, which needs to make the host element interactive. PiperOrigin-RevId: 559899531
This commit is contained in:
parent
027ca9c562
commit
1e7aff50cf
@ -41,6 +41,9 @@ export class FocusRing extends LitElement implements Attachable {
|
||||
get control() {
|
||||
return this.attachableController.control;
|
||||
}
|
||||
set control(control: HTMLElement|null) {
|
||||
this.attachableController.control = control;
|
||||
}
|
||||
|
||||
private readonly attachableController =
|
||||
new AttachableController(this, this.onControlChange.bind(this));
|
||||
|
@ -4,7 +4,7 @@
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import {ReactiveController, ReactiveControllerHost, isServer} from 'lit';
|
||||
import {isServer, ReactiveController, ReactiveControllerHost} from 'lit';
|
||||
|
||||
/**
|
||||
* An element that can be attached to an associated controlling element.
|
||||
@ -36,15 +36,15 @@ export interface Attachable {
|
||||
htmlFor: string|null;
|
||||
|
||||
/**
|
||||
* The element that controls the visibility of the attachable element. It is
|
||||
* one of:
|
||||
* Gets or sets the element that controls the visibility of the attachable
|
||||
* element. It is one of:
|
||||
*
|
||||
* - The control referenced by the `for` attribute.
|
||||
* - The control provided to `element.attach(control)`
|
||||
* - The element's parent.
|
||||
* - `null` if the element is not controlled.
|
||||
*/
|
||||
readonly control: HTMLElement|null;
|
||||
control: HTMLElement|null;
|
||||
|
||||
/**
|
||||
* Attaches the element to an interactive control.
|
||||
@ -137,6 +137,13 @@ export class AttachableController implements ReactiveController, Attachable {
|
||||
|
||||
return this.currentControl || this.host.parentElement;
|
||||
}
|
||||
set control(control: HTMLElement|null) {
|
||||
if (control) {
|
||||
this.attach(control);
|
||||
} else {
|
||||
this.detach();
|
||||
}
|
||||
}
|
||||
|
||||
private currentControl: HTMLElement|null = null;
|
||||
|
||||
|
@ -99,6 +99,10 @@ export class Ripple extends LitElement implements Attachable {
|
||||
get control() {
|
||||
return this.attachableController.control;
|
||||
}
|
||||
set control(control: HTMLElement|null) {
|
||||
this.attachableController.control = control;
|
||||
}
|
||||
|
||||
|
||||
@state() private hovered = false;
|
||||
@state() private pressed = false;
|
||||
|
Loading…
Reference in New Issue
Block a user