feat(SignalVisibilityController): Predicate and value information is …

…now attached to the events fired to the DOM. Allows for easier debugging, and can be used in other controllers if desired.
Sub-Xaero · Feb 16, 2022 · fc02e05 · fc02e05
1 parent fccc822
commit fc02e05
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/docs/docs/controllers/signal/signal_visibility_controller.mdx b/docs/docs/controllers/signal/signal_visibility_controller.mdx
@@ -42,11 +42,16 @@ the same `nameValue` as the `nameValue` of this controller.
 
 
 ## Events
-| Event                    | When                                                                              | Dispatched on               | `event.detail`                         |
-|--------------------------|-----------------------------------------------------------------------------------|-----------------------------|----------------------------------------|
-| `signal-visibility:show` | When a signalled value matches the predicate expression and this element is shown | The controller root element | `element`: the controller root element |
-| `signal-visibility:hide` | When a signalled value fails the predicate expression and this element is hidden  | The controller root element | `element`: the controller root element |
-
+| Event                    | When                                                                              | Dispatched on               | `event.detail` |                                                               |
+|--------------------------|-----------------------------------------------------------------------------------|-----------------------------|----------------|---------------------------------------------------------------|
+| `signal-visibility:show` | When a signalled value matches the predicate expression and this element is shown | The controller root element |                |                                                               |
+|                          |                                                                                   |                             | `element`      | the controller root element                                   |
+|                          |                                                                                   |                             | `predicate`    | the expression the controller used to try and match the value |
+|                          |                                                                                   |                             | `value`        | the value that was received                                   |
+| `signal-visibility:hide` | When a signalled value fails the predicate expression and this element is hidden  | The controller root element |                |                                                               |
+|                          |                                                                                   |                             | `element`      | the controller root element                                   |
+|                          |                                                                                   |                             | `predicate`    | the expression the controller used to try and match the value |
+|                          |                                                                                   |                             | `value`        | the value that was received                                   |
 
 ## Side Effects
 <NoSideEffects/>

diff --git a/src/controllers/signal/signal_visibility_controller.ts b/src/controllers/signal/signal_visibility_controller.ts
@@ -45,10 +45,10 @@ export class SignalVisibilityController extends BaseController {
       return;
     }
     if (this._predicates.every(predicate => predicate(value))) {
-      this.dispatchEvent(this.el, "signal-visibility:show");
+      this.dispatchEvent(this.el, "signal-visibility:show", {detail: {predicate: this.showValue, value}});
       this.removeHideClasses(this.el);
     } else {
-      this.dispatchEvent(this.el, "signal-visibility:hide");
+      this.dispatchEvent(this.el, "signal-visibility:hide", {detail: {predicate: this.showValue, value}});
       this.addHideClasses(this.el);
     }
   }