fix(wizard-diagram, wizard-select, wizard-checkbox): disabled attribute

src/wizard-checkbox.ts

@@ -40,6 +40,9 @@ export class WizardCheckbox extends LitElement {
       this.checked = check === 'true' ? true : false;
     }
   }
+  /** Disables component including null switch */
+  @property({ type: Boolean })
+  disabled = false;
 
   private isNull = false;
 
@@ -66,7 +69,7 @@ export class WizardCheckbox extends LitElement {
   }
 
   @state()
-  disabled = false;
+  private deactivateCheckbox = false;
   @state()
   get formfieldLabel(): string {
     return this.helper ? `${this.helper} (${this.label})` : this.label;
@@ -81,14 +84,14 @@ export class WizardCheckbox extends LitElement {
     if (this.nulled === null) return;
     this.checked = this.nulled;
     this.nulled = null;
-    this.disabled = false;
+    this.deactivateCheckbox = false;
   }
 
   private disable(): void {
     if (this.nulled !== null) return;
     this.nulled = this.checked;
     this.checked = this.defaultChecked;
-    this.disabled = true;
+    this.deactivateCheckbox = true;
   }
 
   firstUpdated(): void {
@@ -100,6 +103,7 @@ export class WizardCheckbox extends LitElement {
       return html`<mwc-switch
         style="margin-left: 12px;"
         ?checked=${!this.null}
+        ?disabled=${this.disabled}
         @change=${() => {
           this.null = !this.nullSwitch!.checked;
         }}
@@ -114,12 +118,12 @@ export class WizardCheckbox extends LitElement {
         <div style="flex: auto;">
           <mwc-formfield
             label="${this.formfieldLabel}"
-            style="${this.disabled
+            style="${this.deactivateCheckbox || this.disabled
               ? `--mdc-theme-text-primary-on-background:rgba(0, 0, 0, 0.38)`
               : ``}"
             ><mwc-checkbox
               ?checked=${this.initChecked}
-              ?disabled=${this.disabled}
+              ?disabled=${this.deactivateCheckbox || this.disabled}
             ></mwc-checkbox
           ></mwc-formfield>
         </div>

src/wizard-select.ts

@@ -49,6 +49,9 @@ export class WizardSelect extends Select {
   @property({ type: Array })
   reservedValues: string[] = [];
 
+  // FIXME: workaround to allow disable of the whole component - need basic refactor
+  private disabledSwitch = false;
+
   @query('mwc-switch') nullSwitch?: Switch;
 
   private nulled: string | null = null;
@@ -76,11 +79,18 @@ export class WizardSelect extends Select {
     return super.checkValidity();
   }
 
+  constructor() {
+    super();
+
+    this.disabledSwitch = this.hasAttribute('disabled');
+  }
+
   renderSwitch(): TemplateResult {
     if (this.nullable) {
       return html`<mwc-switch
         style="margin-left: 12px;"
         ?checked=${!this.null}
+        ?disabled=${this.disabledSwitch}
         @change=${() => {
           this.null = !this.nullSwitch!.checked;
         }}

src/wizard-textfield.ts

@@ -77,6 +77,9 @@ export class WizardTextField extends TextField {
   @property({ type: Array })
   reservedValues: string[] = [];
 
+  // FIXME: workaround to allow disable of the whole component - need basic refactor
+  private disabledSwitch = false;
+
   @query('mwc-switch') nullSwitch?: Switch;
   @query('mwc-menu') multiplierMenu?: Menu;
   @query('mwc-icon-button') multiplierButton?: IconButton;
@@ -121,13 +124,19 @@ export class WizardTextField extends TextField {
     return super.checkValidity();
   }
 
+  constructor() {
+    super();
+
+    this.disabledSwitch = this.hasAttribute('disabled');
+  }
+
   renderUnitSelector(): TemplateResult {
     if (this.multipliers.length && this.unit)
       return html`<div style="position:relative;">
         <mwc-icon-button
           style="margin:5px;"
           icon="more"
-          ?disabled=${this.null}
+          ?disabled=${this.null || this.disabledSwitch}
           @click=${() => this.multiplierMenu?.show()}
         ></mwc-icon-button>
         <mwc-menu
@@ -156,6 +165,7 @@ export class WizardTextField extends TextField {
       return html`<mwc-switch
         style="margin-left: 12px;"
         ?checked=${!this.null}
+        ?disabled=${this.disabledSwitch}
         @change=${() => {
           this.null = !this.nullSwitch!.checked;
         }}

test/unit/wizard-checkbox.test.ts

@@ -3,7 +3,7 @@ import { html, fixture, expect } from '@open-wc/testing';
 import '../../src/wizard-checkbox.js';
 import { WizardCheckbox } from '../../src/wizard-checkbox.js';
 
-describe('wizard-textfield', () => {
+describe('wizard-checkbox', () => {
   let element: WizardCheckbox;
   beforeEach(async () => {
     element = await fixture(html`<wizard-checkbox></wizard-checkbox>`);
@@ -13,7 +13,8 @@ describe('wizard-textfield', () => {
     it('does not render a null value switch', () =>
       expect(element.nullSwitch).to.not.exist);
 
-    it('is enabled', () => expect(element).to.have.property('disabled', false));
+    it('is enabled', () =>
+      expect(element.checkbox).to.have.property('disabled', false));
 
     it('is un-checked', () =>
       expect(element.checkbox).to.have.property('checked', false));
@@ -45,11 +46,11 @@ describe('wizard-textfield', () => {
 
     it('disables itself on switch toggle', async () => {
       expect(element).to.have.property('maybeValue', 'false');
-      expect(element).to.have.property('disabled', false);
+      expect(element.checkbox).to.have.property('disabled', false);
       element.nullSwitch!.click();
       await element.updateComplete;
       expect(element).to.have.property('maybeValue', null);
-      expect(element).to.have.property('disabled', true);
+      expect(element.checkbox).to.have.property('disabled', true);
     });
 
     it('remembers its previous value on switch toggle', async () => {
@@ -59,7 +60,7 @@ describe('wizard-textfield', () => {
       await element.updateComplete;
       element.nullSwitch!.click();
       await element.updateComplete;
-      expect(element).to.have.property('disabled', false);
+      expect(element.checkbox).to.have.property('disabled', false);
       expect(element).to.have.property('maybeValue', 'true');
     });
 
@@ -72,11 +73,11 @@ describe('wizard-textfield', () => {
       it('enables itself on switch toggle', async () => {
         element.nullSwitch?.click();
         await element.updateComplete;
-        expect(element).to.have.property('disabled', false);
+        expect(element.checkbox).to.have.property('disabled', false);
       });
 
       it('has a disabled checkbox', () =>
-        expect(element).to.have.property('disabled', true));
+        expect(element.checkbox).to.have.property('disabled', true));
 
       it('is false per default', () =>
         expect(element.checkbox).to.have.property('checked', false));
@@ -99,4 +100,33 @@ describe('wizard-textfield', () => {
         expect(element).to.have.property('maybeValue', null));
     });
   });
+
+  describe('disabled', () => {
+    beforeEach(async () => {
+      element = await fixture(
+        html`<wizard-checkbox
+          value=${'true'}
+          nullable
+          disabled
+        ></wizard-checkbox>`
+      );
+
+      await element.updateComplete;
+    });
+
+    it('disables checkbox', () =>
+      expect(element.checkbox).to.have.property('disabled', true));
+
+    it('disables null switch', () =>
+      expect(element.nullSwitch).to.have.property('disabled', true));
+
+    it('turns off null switch', async () => {
+      element.nullSwitch?.click();
+      await element.updateComplete;
+      element.nullSwitch?.click();
+      await element.updateComplete;
+
+      expect(element.checkbox).to.have.property('disabled', true);
+    });
+  });
 });

test/unit/wizard-select.test.ts

@@ -80,4 +80,34 @@ describe('wizard-select', () => {
         expect(element).to.have.property('maybeValue', null));
     });
   });
+
+  describe('disabled', () => {
+    beforeEach(async () => {
+      element = await fixture(html`<wizard-select
+        .maybeValue=${'three'}
+        nullable
+        disabled
+        >${items.map(
+          item => html`<mwc-list-item value="${item}">${item}</mwc-list-item>`
+        )}</wizard-select
+      >`);
+
+      await element.updateComplete;
+    });
+
+    it('disables select', () =>
+      expect(element).to.have.property('disabled', true));
+
+    it('disables null switch', () =>
+      expect(element.nullSwitch).to.have.property('disabled', true));
+
+    it('turns off null switch', async () => {
+      element.nullSwitch?.click();
+      await element.updateComplete;
+      element.nullSwitch?.click();
+      await element.updateComplete;
+
+      expect(element).to.have.property('disabled', true);
+    });
+  });
 });

test/unit/wizard-textfield.test.ts

@@ -199,4 +199,37 @@ describe('wizard-textfield', () => {
         expect(element).to.have.property('maybeValue', null));
     });
   });
+
+  describe('disabled', () => {
+    beforeEach(async () => {
+      element = await fixture(html`<wizard-textfield
+        .maybeValue=${'someValue'}
+        .multipliers=${[null, 'G', 'M', 'k', '', 'm']}
+        .multiplier=${'k'}
+        .unit=${'V'}
+        nullable
+        disabled
+      ></wizard-textfield>`);
+
+      await element.updateComplete;
+    });
+
+    it('disables text field', () =>
+      expect(element).to.have.property('disabled', true));
+
+    it('disables null switch', () =>
+      expect(element.nullSwitch).to.have.property('disabled', true));
+
+    it('disables null button', () =>
+      expect(element.multiplierButton).to.have.property('disabled', true));
+
+    it('turns off null switch', async () => {
+      element.nullSwitch?.click();
+      await element.updateComplete;
+      element.nullSwitch?.click();
+      await element.updateComplete;
+
+      expect(element).to.have.property('disabled', true);
+    });
+  });
 });