@dile/ui 3.12.1 → 3.12.2

package/components/order-switch/order-switch.spec.js

@@ -28,4 +28,30 @@ describe('dile-order-switch', () => {
 
     expect(el.value).toBe('desc');
   });
+
+  it('clicking the label re-announces the current value without toggling when not selected', async () => {
+    const el = await renderOrderSwitch('<dile-order-switch name="name" label="Name" value="asc"></dile-order-switch>');
+
+    let receivedDetail = null;
+    el.addEventListener('element-changed', (e) => { receivedDetail = e.detail; });
+
+    el.shadowRoot.querySelector('span').click();
+    await el.updateComplete;
+
+    expect(el.value).toBe('asc'); // unchanged
+    expect(receivedDetail).toEqual({ name: 'name', value: 'asc' });
+  });
+
+  it('clicking the label toggles the order when selected', async () => {
+    const el = await renderOrderSwitch('<dile-order-switch name="name" label="Name" value="asc" selected></dile-order-switch>');
+
+    let receivedDetail = null;
+    el.addEventListener('element-changed', (e) => { receivedDetail = e.detail; });
+
+    el.shadowRoot.querySelector('span').click();
+    await el.updateComplete;
+
+    expect(el.value).toBe('desc'); // toggled
+    expect(receivedDetail).toEqual({ name: 'name', value: 'desc' });
+  });
 });

package/components/order-switch/src/DileOrderSwitch.js

@@ -10,12 +10,18 @@ export class DileOrderSwitch extends DileEmmitChange(LitElement) {
       value: { type: String },
       name: { type: String },
       label: { type: String },
+      /** Marks this switch as the one currently in effect, e.g. inside a group of
+       * order options where only one applies at a time. When true, clicking the
+       * label toggles the order (same as clicking the icon) instead of just
+       * re-announcing the current value. */
+      selected: { type: Boolean },
     };
   }
 
   constructor() {
     super();
     this.value = "asc";
+    this.selected = false;
   }
 
   static get styles() {
@@ -69,8 +75,11 @@ export class DileOrderSwitch extends DileEmmitChange(LitElement) {
   }
 
   onlyChange() {
-    console.log('this.onlyChange');
-    this.emmitChange();
+    if (this.selected) {
+      this.toggle();
+    } else {
+      this.emmitChange();
+    }
   }
 
   toggle() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.12.1",
+  "version": "3.12.2",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "add1124d218762f20cd86bd72bb04562541f9833"
+  "gitHead": "27dbd2411bd5856021209c49da6aed285c3fae28"
 }