@lion/switch - npm Package Compare versions

Comparing version 0.17.0 to 0.17.1

CHANGELOG.md

 # Change Log
 
+## 0.17.1
+
+### Patch Changes
+
+- f320b8b4: use customElementRegistry from component registry for slots used via SlotMixin
+- 077113ba: Stop checked-changed event from propagating when caught by lion-switch element.
+- Updated dependencies [f320b8b4]
+  - @lion/form-core@0.14.1
+
 ## 0.17.0
@@ -4,0 +13,0 @@

custom-elements.json

@@ -233,3 +233,11 @@ {
               "name": "__handleButtonSwitchCheckedChanged",
-              "privacy": "private"
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "ev",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
@@ -236,0 +244,0 @@ {

docs/overview.md

@@ -7,3 +7,3 @@ # Interaction >> Switch >> Overview ||10
 import { html } from '@lion/core';
-import '@lion/switch/define';
+import '@lion/switch/define-switch';
 ```
@@ -30,3 +30,3 @@
 // or
-import '@lion/switch/define';
+import '@lion/switch/define-switch';
 ```

package.json

 {
   "name": "@lion/switch",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "description": "A Switch is used for switching a property or feature on and off",
@@ -42,3 +42,3 @@ "license": "MIT",
     "@lion/core": "0.18.0",
-    "@lion/form-core": "0.14.0",
+    "@lion/form-core": "0.14.1",
     "@lion/helpers": "0.9.0"
@@ -45,0 +45,0 @@ },

README.md

@@ -7,3 +7,3 @@ # Interaction >> Switch >> Overview ||10
 import { html } from '@lion/core';
-import '@lion/switch/define';
+import '@lion/switch/define-switch';
 ```
@@ -30,3 +30,3 @@
 // or
-import '@lion/switch/define';
+import '@lion/switch/define-switch';
 ```

src/LionSwitch.d.ts

@@ -8,3 +8,6 @@ declare const LionSwitch_base: typeof LionField & import("@open-wc/dedupe-mixin").Constructor<import("@lion/form-core/types/choice-group/ChoiceInputMixinTypes").ChoiceInputHost> & Pick<typeof import("@lion/form-core/types/choice-group/ChoiceInputMixinTypes").ChoiceInputHost, "prototype" | "styles"> & import("@open-wc/dedupe-mixin").Constructor<import("@lion/form-core/types/FormatMixinTypes").FormatHost> & Pick<typeof import("@lion/form-core/types/FormatMixinTypes").FormatHost, "prototype"> & Pick<typeof import("@lion/core").LitElement, "prototype" | "_$litElement$" | "enabledWarnings" | "enableWarning" | "disableWarning" | "addInitializer" | "_initializers" | "elementProperties" | "properties" | "elementStyles" | "styles" | "observedAttributes" | "createProperty" | "shadowRootOptions"> & import("@open-wc/dedupe-mixin").Constructor<import("@lion/core/node_modules/@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
     role: string;
-    /** @private */
+    /**
+     * @private
+     * @param {Event} ev
+     */
     private __handleButtonSwitchCheckedChanged;
@@ -11,0 +14,0 @@ /** @protected */

src/LionSwitch.js

@@ -45,7 +45,4 @@ import { css, html, ScopedElementsMixin } from '@lion/core';
       input: () => {
-        const btnEl = document.createElement(
-          /** @type {typeof LionSwitch} */ (this.constructor).getScopedTagName(
-            'lion-switch-button',
-          ),
-        );
+        // @ts-ignore we load a polyfill to support createElement on shadowRoot
+        const btnEl = this.shadowRoot.createElement('lion-switch-button');
         btnEl.setAttribute('data-tag-name', 'lion-switch-button');
@@ -88,5 +85,3 @@ return btnEl;
     super.connectedCallback();
-    if (this._inputNode) {
-      this._inputNode.addEventListener('checked-changed', this.__handleButtonSwitchCheckedChanged);
-    }
+    this.addEventListener('checked-changed', this.__handleButtonSwitchCheckedChanged);
     if (this._labelNode) {
@@ -100,6 +95,3 @@ this._labelNode.addEventListener('click', this._toggleChecked);
     if (this._inputNode) {
-      this._inputNode.removeEventListener(
-        'checked-changed',
-        this.__handleButtonSwitchCheckedChanged,
-      );
+      this.removeEventListener('checked-changed', this.__handleButtonSwitchCheckedChanged);
     }
@@ -126,4 +118,8 @@ if (this._labelNode) {
 
-  /** @private */
-  __handleButtonSwitchCheckedChanged() {
+  /**
+   * @private
+   * @param {Event} ev
+   */
+  __handleButtonSwitchCheckedChanged(ev) {
+    ev.stopPropagation();
     this._isHandlingUserInput = true;
@@ -130,0 +126,0 @@ this.checked = this._inputNode.checked;

src/LionSwitchButton.js

@@ -117,3 +117,2 @@ import { html, css, LitElement, DisabledWithTabIndexMixin } from '@lion/core';
       new Event('checked-changed', {
-        composed: true,
         bubbles: true,
@@ -120,0 +119,0 @@ }),

test/lion-switch-button.test.js

@@ -79,3 +79,2 @@ import { expect, fixture as _fixture } from '@open-wc/testing';
       expect(e.bubbles).to.be.true;
-      expect(e.composed).to.be.true;
     };
@@ -97,3 +96,2 @@ checkCall(handlerSpy.getCall(0));
       expect(e.bubbles).to.be.true;
-      expect(e.composed).to.be.true;
     };
@@ -100,0 +98,0 @@ checkCall(handlerSpy.getCall(0));

test/lion-switch.test.js

@@ -145,3 +145,2 @@ import { expect, fixture as _fixture } from '@open-wc/testing';
       expect(e.bubbles).to.be.true;
-      expect(e.composed).to.be.true;
     };
@@ -161,2 +160,19 @@ checkCall(handlerSpy.getCall(0));
 
+  it('should not propagate the "checked-changed" event further up when caught by switch', async () => {
+    const handlerSpy = sinon.spy();
+    const parentHandlerSpy = sinon.spy();
+    const el = await fixture(
+      html`
+        <div @checked-changed=${parentHandlerSpy}>
+          <lion-switch @checked-changed=${handlerSpy} .choiceValue=${'foo'}></lion-switch>
+        </div>
+      `,
+    );
+    const switchEl = /** @type {LionSwitch} */ (el.firstElementChild);
+    switchEl.checked = true;
+    await switchEl.updateComplete;
+    expect(handlerSpy.callCount).to.equal(1);
+    expect(parentHandlerSpy.callCount).to.equal(0);
+  });
+
   it('can be configured to show feedback messages immediately', async () => {
@@ -163,0 +179,0 @@ const tagName = 'custom-switch';

No alert changes

Improved metrics

Total package byte prevSize

66801

increased by1.5%

Lines of code

1134

increased by1.7%

Dependency changes

• + Added@lion/form-core@0.14.1(transitive)

• + Added@lion/localize@0.20.1(transitive)

• - Removed@lion/form-core@0.14.0(transitive)

• - Removed@lion/localize@0.20.0(transitive)

• Updated@lion/form-core@0.14.1