@dile/ui 3.12.1 → 3.12.3

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

@@ -1,7 +1,7 @@
 import { html, css, LitElement } from "lit";
 import { DileEmmitChange } from '../../../mixins/form/index.js';
 import { switchLeftIcon } from '@dile/icons/index.js';
-import '../../icon/icon.js';
+import '../../button/button-icon.js'
 
 
 export class DileOrderSwitch extends DileEmmitChange(LitElement) {
@@ -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() {
@@ -23,16 +29,23 @@ export class DileOrderSwitch extends DileEmmitChange(LitElement) {
       :host {
         display: block;
         margin-bottom: 10px;
+        --dile-button-border-radius: 2rem;
+        --dile-button-padding-x: 0.15rem;
+        --dile-button-padding-y: 0.15rem;
+        --dile-button-background-color: transparent;
+        --dile-button-icon-color: var(--dile-order-switch-icon-color, var(--dile-link-color, #3399ff));
+        --dile-button-icon-size: var(--dile-order-switch-icon-size, 1.5rem);
+        --dile-button-border-width: 0;
       }
       div {
         align-items: center;
         display: flex;
       }
-      span {
-        cursor: pointer;
+      a {
+        color: inherit;
+        text-decoration: var(--dile-order-switch-text-decoration, none);
       }
-      dile-icon {
-        cursor: pointer;
+      dile-button-icon {
         transform: rotate(-90deg);
         margin-right: 0.4rem;
         transition: transform 0.3s ease-in-out;
@@ -40,20 +53,24 @@ export class DileOrderSwitch extends DileEmmitChange(LitElement) {
       .desc {
         transform: rotate(90deg);
       }
+
+      .text-selected {
+        font-weight: bold;
+      }
     `;
   }
 
   render() {
     return html`
       <div>
-        <dile-icon 
+        <dile-button-icon 
           .icon="${switchLeftIcon}" 
           class="${this.value}"
-           @click=${this.toggle}
-        ></dile-icon>
-        <span @click=${this.onlyChange}>
+          @click=${this.toggle}
+        ></dile-button-icon>
+        <a class="${this.selected ? 'text-selected' : ''}" href="#" @click=${this.onlyChange}>
           ${this.label}
-        </span>
+        </a>
       </div>
     `;
   }
@@ -68,9 +85,13 @@ export class DileOrderSwitch extends DileEmmitChange(LitElement) {
     }
   }
 
-  onlyChange() {
-    console.log('this.onlyChange');
-    this.emmitChange();
+  onlyChange(e) {
+    e.preventDefault();
+    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.3",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "add1124d218762f20cd86bd72bb04562541f9833"
+  "gitHead": "6ae2b6723c619ec22ce949bcb1bd730a596ef45f"
 }