@lion/ui 0.18.0-menu-system.5 → 0.18.0

package/components/switch/src/LionSwitchButton.js

@@ -13,6 +13,7 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
         type: Boolean,
         reflect: true,
       },
+      readOnly: { type: Boolean, attribute: 'readonly', reflect: true },
     };
   }
 
@@ -76,7 +77,7 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
     super();
     // inputNode = this, which always requires a value prop
     this.value = '';
-
+    this.readOnly = false;
     this.checked = false;
     this.__initialized = false;
     /** @protected */
@@ -105,7 +106,7 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
 
   /** @protected */
   _toggleChecked() {
-    if (this.disabled) {
+    if (this.disabled || this.readOnly) {
       return;
     }
     // Force IE11 to focus the component.
@@ -151,6 +152,9 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
     if (changedProperties.has('disabled')) {
       this.setAttribute('aria-disabled', `${this.disabled}`); // create mixin if we need it in more places
     }
+    if (changedProperties.has('readOnly')) {
+      this.setAttribute('aria-readonly', `${this.readOnly}`);
+    }
   }
 
   /**
@@ -166,7 +170,8 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
       this.isConnected &&
       name === 'checked' &&
       this.checked !== oldValue &&
-      !this.disabled
+      !this.disabled &&
+      !this.readOnly
     ) {
       this.__checkedStateChange();
     }

package/components/switch/test/lion-switch-button.test.js

@@ -78,6 +78,20 @@ describe('lion-switch-button', () => {
     expect(el.hasAttribute('checked')).to.be.true;
   });
 
+  it('can be readonly', async () => {
+    el.readOnly = true;
+    expect(el.checked).to.be.false;
+    el.click();
+    await el.updateComplete;
+    expect(el.checked).to.be.false;
+    expect(el.hasAttribute('checked')).to.be.false;
+    el.checked = true;
+    el.click();
+    await el.updateComplete;
+    expect(el.checked).to.be.true;
+    expect(el.hasAttribute('checked')).to.be.true;
+  });
+
   it('should dispatch "checked-changed" event when toggled', () => {
     const handlerSpy = sinon.spy();
     el.addEventListener('checked-changed', handlerSpy);
@@ -118,6 +132,14 @@ describe('lion-switch-button', () => {
     expect(handlerSpy.called).to.be.false;
   });
 
+  it('should not dispatch "checked-changed" event if readonly', () => {
+    const handlerSpy = sinon.spy();
+    el.readOnly = true;
+    el.addEventListener('checked-changed', handlerSpy);
+    el.click();
+    expect(handlerSpy.called).to.be.false;
+  });
+
   it('should not dispatch "checked-changed" event if disabled on update', () => {
     const handlerSpy = sinon.spy();
     el.disabled = true;
@@ -126,6 +148,14 @@ describe('lion-switch-button', () => {
     expect(handlerSpy.called).to.be.false;
   });
 
+  it('should not dispatch "checked-changed" event if readonly on update', () => {
+    const handlerSpy = sinon.spy();
+    el.readOnly = true;
+    el.addEventListener('checked-changed', handlerSpy);
+    el.checked = !el.checked;
+    expect(handlerSpy.called).to.be.false;
+  });
+
   it('should not dispatch "checked-changed" event if not initialized on update', async () => {
     const handlerSpy = sinon.spy();
     const elSync = /** @type {LionSwitchButton} */ (
@@ -175,4 +205,12 @@ describe('lion-switch-button', () => {
     await el.updateComplete;
     expect(el.getAttribute('aria-disabled')).to.equal('false');
   });
+  it('should manage "aria-readonly"', async () => {
+    el.readOnly = true;
+    await el.updateComplete;
+    expect(el.getAttribute('aria-readonly')).to.equal('true');
+    el.readOnly = false;
+    await el.updateComplete;
+    expect(el.getAttribute('aria-readonly')).to.equal('false');
+  });
 });