Merge pull request #1189 from valadas/toggle-label

Allows toggle to be wrapped in label
DNNCommunity · Sep 30, 2024 · ea64b87 · ea64b87
2 parents f5ec637 + 810bf5e
commit ea64b87
Showing 1 changed file with 6 additions and 6 deletions.
diff --git a/packages/stencil-library/src/components/dnn-toggle/dnn-toggle.tsx b/packages/stencil-library/src/components/dnn-toggle/dnn-toggle.tsx
@@ -1,4 +1,4 @@
-import { Component, h, Element, Prop, Event, EventEmitter, Watch, Host, AttachInternals, State } from "@stencil/core";
+import { Component, h, Element, Prop, Event, EventEmitter, Watch, Host, AttachInternals, State, Listen } from "@stencil/core";
 import { DnnToggleChangeEventDetail } from "./toggle-interface";
 
 
@@ -27,6 +27,11 @@ export class DnnToggle {
     /** Fires when the toggle changed */
     @Event() checkChanged!: EventEmitter<DnnToggleChangeEventDetail>;
 
+    @Listen("click", { capture: true })
+    handleClick() {
+        this.checked = !this.checked;
+    }
+
     @AttachInternals() internals: ElementInternals;
 
     @Watch("checked")
@@ -76,11 +81,6 @@ export class DnnToggle {
                     ref={el => this.button = el}
                     disabled={this.disabled}
                     class={{ 'checked': this.checked }}
-                    onClick={() => {
-                        if (!this.disabled) {
-                            this.checked = !this.checked;
-                        }
-                    }}
                     onFocus={() => this.focused = true}
                     onBlur={() => this.focused = false}
                 >