diff --git a/src/wizard-checkbox.ts b/src/wizard-checkbox.ts index ecb915a28a..6fa6cf78f0 100644 --- a/src/wizard-checkbox.ts +++ b/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` { this.null = !this.nullSwitch!.checked; }} @@ -114,12 +118,12 @@ export class WizardCheckbox extends LitElement {
diff --git a/src/wizard-select.ts b/src/wizard-select.ts index b97dc0ef15..e3db151602 100644 --- a/src/wizard-select.ts +++ b/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` { this.null = !this.nullSwitch!.checked; }} diff --git a/src/wizard-textfield.ts b/src/wizard-textfield.ts index 9ea5b776b1..284417218f 100644 --- a/src/wizard-textfield.ts +++ b/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`
this.multiplierMenu?.show()} > { this.null = !this.nullSwitch!.checked; }} diff --git a/test/unit/wizard-checkbox.test.ts b/test/unit/wizard-checkbox.test.ts index 2aa5d01260..e3eb3f82f7 100644 --- a/test/unit/wizard-checkbox.test.ts +++ b/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``); @@ -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`` + ); + + 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); + }); + }); }); diff --git a/test/unit/wizard-select.test.ts b/test/unit/wizard-select.test.ts index f2b675f6e4..1bd631bc8f 100644 --- a/test/unit/wizard-select.test.ts +++ b/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`${items.map( + item => html`${item}` + )}`); + + 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); + }); + }); }); diff --git a/test/unit/wizard-textfield.test.ts b/test/unit/wizard-textfield.test.ts index 0d8744942d..55c6f9e8a4 100644 --- a/test/unit/wizard-textfield.test.ts +++ b/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``); + + 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); + }); + }); });