Skip to content

Commit

Permalink
feat(focus,ripple): allow setting element.control = elementRef
Browse files Browse the repository at this point in the history
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
  • Loading branch information
asyncLiz authored and copybara-github committed Aug 24, 2023
1 parent 027ca9c commit 1e7aff5
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 4 deletions.
3 changes: 3 additions & 0 deletions focus/internal/focus-ring.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand Down
15 changes: 11 additions & 4 deletions internal/controller/attachable-controller.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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;

Expand Down
4 changes: 4 additions & 0 deletions ripple/internal/ripple.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 1e7aff5

Please sign in to comment.