diff --git a/src/components/button/button.test.ts b/src/components/button/button.test.ts index 7b711b350..adb75fec7 100644 --- a/src/components/button/button.test.ts +++ b/src/components/button/button.test.ts @@ -302,5 +302,5 @@ describe('', async () => { control.href = 'some-url'; } }) - ]) + ]); }); diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index 3deb8ad16..7d5ec96f9 100644 --- a/src/components/checkbox/checkbox.ts +++ b/src/components/checkbox/checkbox.ts @@ -12,7 +12,6 @@ import { WebAwesomeFormAssociated } from '../../internal/webawesome-element.js'; import componentStyles from '../../styles/component.styles.js'; import styles from './checkbox.styles.js'; import type { CSSResultGroup, PropertyValues } from 'lit'; -import { CustomErrorValidator } from '../../internal/validators/custom-error-validator.js'; /** * @summary Checkboxes allow the user to toggle an option on or off. @@ -57,7 +56,11 @@ export default class WaCheckbox extends WebAwesomeFormAssociated { return [ ...super.validators, GroupRequiredValidator({ - validationElement: Object.assign(document.createElement("input"), { type: "checkbox", required: true, name: "__validationCheckbox__" }) + validationElement: Object.assign(document.createElement('input'), { + type: 'checkbox', + required: true, + name: '__validationCheckbox__' + }) }) ]; } @@ -132,7 +135,7 @@ export default class WaCheckbox extends WebAwesomeFormAssociated { handleDefaultCheckedChange() { if (!this.hasInteracted && this.checked !== this.defaultChecked) { this.checked = this.defaultChecked; - this.handleValueOrCheckedChange() + this.handleValueOrCheckedChange(); } } @@ -153,19 +156,18 @@ export default class WaCheckbox extends WebAwesomeFormAssociated { } protected willUpdate(changedProperties: PropertyValues): void { - super.willUpdate(changedProperties) + super.willUpdate(changedProperties); - if (changedProperties.has("value") || changedProperties.has("checked")) { - this.handleValueOrCheckedChange() + if (changedProperties.has('value') || changedProperties.has('checked')) { + this.handleValueOrCheckedChange(); } - } formResetCallback() { // Evaluate checked before the super call because of our watcher on value. super.formResetCallback(); this.checked = this.defaultChecked; - this.handleValueOrCheckedChange() + this.handleValueOrCheckedChange(); } /** Simulates a click on the checkbox. */ diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts index cbc5a07b4..ccf8e65ce 100644 --- a/src/components/color-picker/color-picker.ts +++ b/src/components/color-picker/color-picker.ts @@ -95,13 +95,10 @@ declare const EyeDropper: EyeDropperConstructor; export default class WaColorPicker extends WebAwesomeFormAssociated { static styles: CSSResultGroup = [componentStyles, styles]; - static shadowRootOptions = {...LitElement.shadowRootOptions, delegatesFocus: true } + static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }; static get validators() { - return [ - ...super.validators, - RequiredValidator() - ]; + return [...super.validators, RequiredValidator()]; } private isSafeValue = false; diff --git a/src/components/input/input.test.ts b/src/components/input/input.test.ts index 53986eacc..a9f184116 100644 --- a/src/components/input/input.test.ts +++ b/src/components/input/input.test.ts @@ -1,9 +1,9 @@ // eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment import { aTimeout, elementUpdated, expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing'; -import { serialize } from '../../../dist/webawesome.js'; import { isSafari } from '../../internal/test.js'; -import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js'; // must come from the same module -import { sendKeys } from '@web/test-runner-commands'; +import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js'; +import { sendKeys } from '@web/test-runner-commands'; // must come from the same module +import { serialize } from '../../../dist/webawesome.js'; import sinon from 'sinon'; import type WaInput from './input.js'; @@ -569,6 +569,4 @@ describe('', async () => { }); await runFormControlBaseTests('wa-input'); - }); - diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 33096bde7..f02920def 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -2,7 +2,7 @@ import '../icon/icon.js'; import { classMap } from 'lit/directives/class-map.js'; import { customElement, property, query, state } from 'lit/decorators.js'; import { HasSlotController } from '../../internal/slot.js'; -import { LitElement, html } from 'lit'; +import { html, LitElement } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { live } from 'lit/directives/live.js'; import { LocalizeController } from '../../utilities/localize.js'; @@ -59,13 +59,10 @@ import type { CSSResultGroup } from 'lit'; export default class WaInput extends WebAwesomeFormAssociated { static styles: CSSResultGroup = [componentStyles, formControlStyles, styles]; - static shadowRootOptions = {...LitElement.shadowRootOptions, delegatesFocus: true } + static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }; static get validators() { - return [ - ...super.validators, - MirrorValidator() - ]; + return [...super.validators, MirrorValidator()]; } assumeInteractionOn = ['wa-blur', 'wa-input']; diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts index c7bb074b3..eacceed72 100644 --- a/src/components/radio-group/radio-group.ts +++ b/src/components/radio-group/radio-group.ts @@ -46,7 +46,11 @@ export default class WaRadioGroup extends WebAwesomeFormAssociated { return [ ...super.validators, RequiredValidator({ - validationElement: Object.assign(document.createElement("input"), { required: true, type: "radio", name: "__validationRadio__" }) + validationElement: Object.assign(document.createElement('input'), { + required: true, + type: 'radio', + name: '__validationRadio__' + }) }) ]; } diff --git a/src/components/range/range.ts b/src/components/range/range.ts index e738b8ce5..44f839c11 100644 --- a/src/components/range/range.ts +++ b/src/components/range/range.ts @@ -48,10 +48,7 @@ export default class WaRange extends WebAwesomeFormAssociated { static styles: CSSResultGroup = [componentStyles, formControlStyles, styles]; static get validators() { - return [ - ...super.validators, - MirrorValidator() - ]; + return [...super.validators, MirrorValidator()]; } private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label'); diff --git a/src/components/select/select.ts b/src/components/select/select.ts index b179f1531..d3bc25f4f 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -82,7 +82,7 @@ export default class WaSelect extends WebAwesomeFormAssociated { return [ ...super.validators, RequiredValidator({ - validationElement: Object.assign(document.createElement("select"), {required: true}) + validationElement: Object.assign(document.createElement('select'), { required: true }) }) ]; } diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts index 0f6dbe44b..fb60c9316 100644 --- a/src/components/switch/switch.ts +++ b/src/components/switch/switch.ts @@ -52,11 +52,8 @@ import type { CSSResultGroup, PropertyValues } from 'lit'; export default class WaSwitch extends WebAwesomeFormAssociated { static styles: CSSResultGroup = [componentStyles, formControlStyles, styles]; - static get validators () { - return [ - ...super.validators, - MirrorValidator() - ] + static get validators() { + return [...super.validators, MirrorValidator()]; } private readonly hasSlotController = new HasSlotController(this, 'help-text'); @@ -97,10 +94,10 @@ export default class WaSwitch extends WebAwesomeFormAssociated { /** The switch's help text. If you need to display HTML, use the `help-text` slot instead. */ @property({ attribute: 'help-text' }) helpText = ''; - firstUpdated (changedProperties: PropertyValues) { - super.firstUpdated(changedProperties) + firstUpdated(changedProperties: PropertyValues) { + super.firstUpdated(changedProperties); - this.handleValueOrCheckedChange() + this.handleValueOrCheckedChange(); } private handleBlur() { @@ -141,7 +138,7 @@ export default class WaSwitch extends WebAwesomeFormAssociated { @watch(['value', 'checked'], { waitUntilFirstUpdate: true }) handleValueOrCheckedChange() { this.value = this.checked ? this.value || 'on' : null; - this.requestUpdate("value") + this.requestUpdate('value'); this.input.checked = this.checked; // force a sync update // These @watch() commands seem to override the base element checks for changes, so we need to setValue for the form and and updateValidity() this.setValue(this.value, this.value); @@ -171,22 +168,22 @@ export default class WaSwitch extends WebAwesomeFormAssociated { setValue(value: string | File | FormData | null, stateValue?: string | File | FormData | null | undefined): void { if (!this.checked) { - this.value = null - this.internals.setFormValue(null, null) - return + this.value = null; + this.internals.setFormValue(null, null); + return; } if (!value) { - value = "on" + value = 'on'; } - this.internals.setFormValue(value, stateValue) + this.internals.setFormValue(value, stateValue); } formResetCallback(): void { - this.checked = this.defaultChecked - this.handleValueOrCheckedChange() - super.formResetCallback() + this.checked = this.defaultChecked; + this.handleValueOrCheckedChange(); + super.formResetCallback(); } render() { diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts index 5c53af0e5..1719adcfc 100644 --- a/src/components/textarea/textarea.ts +++ b/src/components/textarea/textarea.ts @@ -45,10 +45,7 @@ import type { CSSResultGroup } from 'lit'; export default class WaTextarea extends WebAwesomeFormAssociated { static styles: CSSResultGroup = [componentStyles, formControlStyles, styles]; static get validators() { - return [ - ...super.validators, - MirrorValidator() - ]; + return [...super.validators, MirrorValidator()]; } assumeInteractionOn = ['wa-blur', 'wa-input']; diff --git a/src/internal/test/form-control-base-tests.ts b/src/internal/test/form-control-base-tests.ts index 59a36178d..4b4226104 100644 --- a/src/internal/test/form-control-base-tests.ts +++ b/src/internal/test/form-control-base-tests.ts @@ -1,6 +1,5 @@ import { expect, fixture } from '@open-wc/testing'; import type { WebAwesomeFormControl } from '../webawesome-element.js'; -import WaButton from '../../components/button/button.js'; type CreateControlFn = () => Promise; @@ -52,7 +51,7 @@ async function runAllValidityTests( displayName: string, createControl: () => Promise ) { - await new Promise((resolve) => { + await new Promise(resolve => { // will be used later to retrieve meta information about the control describe(`Form validity base test for ${displayName}`, async () => { it('should have a property `validity` of type `object`', async () => { @@ -170,7 +169,6 @@ async function runAllValidityTests( // expect(control.hasInteracted).to.equal(false) // }); - // it('Should be invalid if a `customError` property is passed.', async () => { // const control = await createControl(); // expect(control.validity.valid).to.equal(true) @@ -179,7 +177,6 @@ async function runAllValidityTests( // expect(control.validity.valid).to.equal(false) // expect(control.validationMessage).to.equal("MyError") // }); - } // Run special tests depending on component type @@ -195,9 +192,8 @@ async function runAllValidityTests( } }); - resolve() - - }) + resolve(); + }); } // diff --git a/src/internal/validators/custom-error-validator.ts b/src/internal/validators/custom-error-validator.ts index 2b6349f1f..106dfa624 100644 --- a/src/internal/validators/custom-error-validator.ts +++ b/src/internal/validators/custom-error-validator.ts @@ -6,7 +6,7 @@ import type { Validator } from '../webawesome-element.js'; */ export const CustomErrorValidator = (): Validator => { return { - observedAttributes: ["custom-error"], + observedAttributes: ['custom-error'], checkValidity(element) { const validity: ReturnType = { message: '', @@ -15,12 +15,12 @@ export const CustomErrorValidator = (): Validator => { }; if (element.customError) { - validity.message = element.customError - validity.isValid = false - validity.invalidKeys = ["customError"] + validity.message = element.customError; + validity.isValid = false; + validity.invalidKeys = ['customError']; } - return validity + return validity; } }; }; diff --git a/src/internal/validators/group-required-validator.ts b/src/internal/validators/group-required-validator.ts index 61822ffd2..c2be465c1 100644 --- a/src/internal/validators/group-required-validator.ts +++ b/src/internal/validators/group-required-validator.ts @@ -1,6 +1,5 @@ import type { Validator } from '../webawesome-element.js'; - export interface GroupRequiredValidatorOptions { /** This is a cheap way for us to get translation strings for the user without having proper translations. */ validationElement: HTMLInputElement; @@ -9,7 +8,7 @@ export interface GroupRequiredValidatorOptions { // Used to validate groups of elements and not just a single element. // https://codepen.io/paramagicdev/pen/eYorwrz export const GroupRequiredValidator = (options: GroupRequiredValidatorOptions): Validator => { - const { validationElement } = options + const { validationElement } = options; const obj: Validator = { observedAttributes: ['required'], diff --git a/src/internal/validators/required-validator.ts b/src/internal/validators/required-validator.ts index 353da3a93..b10ed61a5 100644 --- a/src/internal/validators/required-validator.ts +++ b/src/internal/validators/required-validator.ts @@ -6,10 +6,10 @@ export interface RequiredValidatorOptions { } export const RequiredValidator = (options: RequiredValidatorOptions = {}): Validator => { - let { validationElement } = options + let { validationElement } = options; if (!validationElement) { - validationElement = Object.assign(document.createElement("input"), { required: true }) + validationElement = Object.assign(document.createElement('input'), { required: true }); } const obj: Validator = { diff --git a/src/internal/webawesome-element.ts b/src/internal/webawesome-element.ts index f9cbd26ec..10cd0ee73 100644 --- a/src/internal/webawesome-element.ts +++ b/src/internal/webawesome-element.ts @@ -156,9 +156,7 @@ export class WebAwesomeFormAssociated * for changes. Whenever these attributes change, we want to be notified and update the validator. */ static get validators(): Validator[] { - return [ - CustomErrorValidator() - ]; + return [CustomErrorValidator()]; } // Append all Validator "observedAttributes" into the "observedAttributes" so they can run. @@ -201,7 +199,7 @@ export class WebAwesomeFormAssociated @property({ state: true }) hasInteracted: boolean = false; // This works around a limitation in Safari. It is a hacky way for us to preserve customErrors generated by the user. - @property({ attribute: "custom-error", reflect: true }) customError: string | null = null + @property({ attribute: 'custom-error', reflect: true }) customError: string | null = null; private emittedEvents: string[] = []; @@ -245,15 +243,17 @@ export class WebAwesomeFormAssociated if (e.target !== this) return; // An "invalid" event counts as interacted, this is usually triggered by a button "submitting" - this.hasInteracted = true + this.hasInteracted = true; this.emit('wa-invalid'); }; protected willUpdate(changedProperties: PropertyValues) { - if (changedProperties.has("customError")) { + if (changedProperties.has('customError')) { // We use null because it we really don't want it to show up in the attributes because `custom-error` does reflect. - if (!this.customError) { this.customError = null } - this.setCustomValidity(this.customError || "") + if (!this.customError) { + this.customError = null; + } + this.setCustomValidity(this.customError || ''); } if (changedProperties.has('defaultValue')) { @@ -338,7 +338,7 @@ export class WebAwesomeFormAssociated reportValidity() { this.updateValidity(); // This seems reasonable. `reportValidity()` is kind of like "we expect you to have interacted" - this.hasInteracted = true + this.hasInteracted = true; return this.internals.reportValidity(); }