diff --git a/.changeset/warm-beds-design.md b/.changeset/warm-beds-design.md new file mode 100644 index 000000000..c60c866f8 --- /dev/null +++ b/.changeset/warm-beds-design.md @@ -0,0 +1,15 @@ +--- +'@lion/collapsible': patch +'@lion/combobox': patch +'@lion/form-core': patch +'@lion/input': patch +'@lion/input-amount': patch +'@lion/input-date': patch +'@lion/input-datepicker': patch +'@lion/input-range': patch +'@lion/input-stepper': patch +'@lion/select-rich': patch +'@lion/textarea': patch +--- + +Type static get properties as {any} since the real class fields are typed separately and lit properties are just "configuring". Remove expect error. diff --git a/packages/collapsible/demo/CustomCollapsible.js b/packages/collapsible/demo/CustomCollapsible.js index ebc799b33..dbfcde7d7 100644 --- a/packages/collapsible/demo/CustomCollapsible.js +++ b/packages/collapsible/demo/CustomCollapsible.js @@ -8,8 +8,8 @@ const EVENT = { * `CustomCollapsible` is a class for custom collapsible element (`` web component). * @customElement custom-collapsible */ -// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you. export class CustomCollapsible extends LionCollapsible { + /** @type {any} */ static get properties() { return { transitioning: { @@ -56,7 +56,9 @@ export class CustomCollapsible extends LionCollapsible { contentNode.style.setProperty('opacity', '1'); contentNode.style.setProperty('padding', '12px 0'); contentNode.style.setProperty('max-height', '0px'); - await new Promise(resolve => requestAnimationFrame(() => resolve())); + await /** @type {Promise} */ (new Promise(resolve => + requestAnimationFrame(() => resolve()), + )); contentNode.style.setProperty('max-height', expectedHeight); await this._waitForTransition({ contentNode }); } @@ -105,7 +107,9 @@ export class CustomCollapsible extends LionCollapsible { */ async __calculateHeight(contentNode) { contentNode.style.setProperty('max-height', ''); - await new Promise(resolve => requestAnimationFrame(() => resolve())); + await /** @type {Promise} */ (new Promise(resolve => + requestAnimationFrame(() => resolve()), + )); return this._contentHeight; // Expected height i.e. actual size once collapsed after animation } } diff --git a/packages/combobox/docs/gh-combobox/gh-button.js b/packages/combobox/docs/gh-combobox/gh-button.js index 4892bc1fe..e6512c164 100644 --- a/packages/combobox/docs/gh-combobox/gh-button.js +++ b/packages/combobox/docs/gh-combobox/gh-button.js @@ -1,7 +1,6 @@ import { css, html } from '@lion/core'; import { LionButton } from '@lion/button'; -// @ts-expect-error export class GhButton extends LionButton { static get properties() { return { diff --git a/packages/combobox/docs/gh-combobox/gh-combobox.js b/packages/combobox/docs/gh-combobox/gh-combobox.js index 2aff55895..8e6c6ce33 100644 --- a/packages/combobox/docs/gh-combobox/gh-combobox.js +++ b/packages/combobox/docs/gh-combobox/gh-combobox.js @@ -5,7 +5,6 @@ import { renderLitAsNode } from '@lion/helpers'; import { LionCombobox } from '../../src/LionCombobox.js'; import './gh-button.js'; -// @ts-expect-error export class GhOption extends LionOption { static get properties() { return { diff --git a/packages/form-core/src/FocusMixin.js b/packages/form-core/src/FocusMixin.js index cc016f947..d0f7bd634 100644 --- a/packages/form-core/src/FocusMixin.js +++ b/packages/form-core/src/FocusMixin.js @@ -6,9 +6,8 @@ import { FormControlMixin } from './FormControlMixin.js'; * @param {import('@open-wc/dedupe-mixin').Constructor} superclass */ const FocusMixinImplementation = superclass => - // @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you. - // eslint-disable-next-line no-unused-vars, max-len, no-shadow class FocusMixin extends FormControlMixin(superclass) { + /** @type {any} */ static get properties() { return { focused: { diff --git a/packages/form-core/src/FormatMixin.js b/packages/form-core/src/FormatMixin.js index c14c75192..8c0b8b45f 100644 --- a/packages/form-core/src/FormatMixin.js +++ b/packages/form-core/src/FormatMixin.js @@ -58,8 +58,8 @@ import { ValidateMixin } from './validate/ValidateMixin.js'; * @param {import('@open-wc/dedupe-mixin').Constructor} superclass */ const FormatMixinImplementation = superclass => - // @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you. class FormatMixin extends ValidateMixin(FormControlMixin(superclass)) { + /** @type {any} */ static get properties() { return { /** diff --git a/packages/form-core/src/InteractionStateMixin.js b/packages/form-core/src/InteractionStateMixin.js index e7fb9e590..c1a5d4b26 100644 --- a/packages/form-core/src/InteractionStateMixin.js +++ b/packages/form-core/src/InteractionStateMixin.js @@ -18,8 +18,8 @@ import { FormControlMixin } from './FormControlMixin.js'; * @param {import('@open-wc/dedupe-mixin').Constructor} superclass */ const InteractionStateMixinImplementation = superclass => - // @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you. class InteractionStateMixin extends FormControlMixin(superclass) { + /** @type {any} */ static get properties() { return { /** diff --git a/packages/form-core/src/LionField.js b/packages/form-core/src/LionField.js index 5b83594be..db67966ac 100644 --- a/packages/form-core/src/LionField.js +++ b/packages/form-core/src/LionField.js @@ -22,10 +22,10 @@ import { InteractionStateMixin } from './InteractionStateMixin.js'; // applies F * * @customElement lion-field */ -// @ts-expect-error lit properties false positive export class LionField extends FormControlMixin( InteractionStateMixin(FocusMixin(FormatMixin(ValidateMixin(SlotMixin(LitElement))))), ) { + /** @type {any} */ static get properties() { return { autocomplete: { diff --git a/packages/form-core/src/choice-group/ChoiceGroupMixin.js b/packages/form-core/src/choice-group/ChoiceGroupMixin.js index d609370de..3595f5b68 100644 --- a/packages/form-core/src/choice-group/ChoiceGroupMixin.js +++ b/packages/form-core/src/choice-group/ChoiceGroupMixin.js @@ -15,8 +15,8 @@ import { InteractionStateMixin } from '../InteractionStateMixin.js'; * @param {import('@open-wc/dedupe-mixin').Constructor} superclass */ const ChoiceGroupMixinImplementation = superclass => - // @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you. class ChoiceGroupMixin extends FormRegistrarMixin(InteractionStateMixin(superclass)) { + /** @type {any} */ static get properties() { return { /** diff --git a/packages/form-core/src/choice-group/ChoiceInputMixin.js b/packages/form-core/src/choice-group/ChoiceInputMixin.js index c1bbf0277..de629f464 100644 --- a/packages/form-core/src/choice-group/ChoiceInputMixin.js +++ b/packages/form-core/src/choice-group/ChoiceInputMixin.js @@ -21,8 +21,8 @@ const hasChanged = (nw, old = {}) => nw.value !== old.value || nw.checked !== ol * @param {import('@open-wc/dedupe-mixin').Constructor} superclass */ const ChoiceInputMixinImplementation = superclass => - // @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you. class ChoiceInputMixin extends FormatMixin(superclass) { + /** @type {any} */ static get properties() { return { /** diff --git a/packages/form-core/src/form-group/FormGroupMixin.js b/packages/form-core/src/form-group/FormGroupMixin.js index 0bc8f89be..eed4dea46 100644 --- a/packages/form-core/src/form-group/FormGroupMixin.js +++ b/packages/form-core/src/form-group/FormGroupMixin.js @@ -28,10 +28,10 @@ import { FormElementsHaveNoError } from './FormElementsHaveNoError.js'; * @param {import('@open-wc/dedupe-mixin').Constructor} superclass */ const FormGroupMixinImplementation = superclass => - // @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you. class FormGroupMixin extends FormRegistrarMixin( FormControlMixin(ValidateMixin(DisabledMixin(SlotMixin(superclass)))), ) { + /** @type {any} */ static get properties() { return { /** diff --git a/packages/form-core/src/validate/ValidateMixin.js b/packages/form-core/src/validate/ValidateMixin.js index 83d04884c..9fa844b61 100644 --- a/packages/form-core/src/validate/ValidateMixin.js +++ b/packages/form-core/src/validate/ValidateMixin.js @@ -32,7 +32,6 @@ function arrayDiff(array1 = [], array2 = []) { * @param {import('@open-wc/dedupe-mixin').Constructor} superclass */ export const ValidateMixinImplementation = superclass => - // @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you. class extends FormControlMixin( SyncUpdatableMixin(DisabledMixin(SlotMixin(ScopedElementsMixin(superclass)))), ) { @@ -45,6 +44,7 @@ export const ValidateMixinImplementation = superclass => }; } + /** @type {any} */ static get properties() { return { validators: { attribute: false }, diff --git a/packages/form-core/test-suites/ValidateMixin.suite.js b/packages/form-core/test-suites/ValidateMixin.suite.js index b78e3346b..b6973ea08 100644 --- a/packages/form-core/test-suites/ValidateMixin.suite.js +++ b/packages/form-core/test-suites/ValidateMixin.suite.js @@ -1115,8 +1115,8 @@ export function runValidateMixinSuite(customConfig) { // TODO: add this test on FormControl layer it('reconsiders feedback visibility when interaction states changed', async () => { const elTagString = defineCE( - // @ts-expect-error lit properties false positive, they get merged with parent properties by lit automatically class extends ValidateMixin(LitElement) { + /** @type {any} */ static get properties() { return { modelValue: String, @@ -1160,12 +1160,12 @@ export function runValidateMixinSuite(customConfig) { it('filters feedback visibility according interaction states', async () => { const elTagString = defineCE( - // @ts-expect-error lit properties false positive, they get merged with parent properties by lit automatically class extends ValidateMixin(LitElement) { static get validationTypes() { return ['error', 'info']; } + /** @type {any} */ static get properties() { return { modelValue: { type: String }, diff --git a/packages/form-core/test/validate/Validator.test.js b/packages/form-core/test/validate/Validator.test.js index 8e0e0e5b9..66d72d597 100644 --- a/packages/form-core/test/validate/Validator.test.js +++ b/packages/form-core/test/validate/Validator.test.js @@ -134,8 +134,8 @@ describe('Validator', () => { it('has access to FormControl', async () => { const lightDom = ''; - // @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you. class ValidateElement extends ValidateMixin(LitElement) { + /** @type {any} */ static get properties() { return { modelValue: String }; } diff --git a/packages/input-amount/src/LionInputAmount.js b/packages/input-amount/src/LionInputAmount.js index 1068d9718..928172916 100644 --- a/packages/input-amount/src/LionInputAmount.js +++ b/packages/input-amount/src/LionInputAmount.js @@ -10,8 +10,8 @@ import { parseAmount } from './parsers.js'; * * @customElement lion-input-amount */ -// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you. export class LionInputAmount extends LocalizeMixin(LionInput) { + /** @type {any} */ static get properties() { return { /** diff --git a/packages/input-date/src/LionInputDate.js b/packages/input-date/src/LionInputDate.js index 6d27b5fe4..b1f292036 100644 --- a/packages/input-date/src/LionInputDate.js +++ b/packages/input-date/src/LionInputDate.js @@ -18,8 +18,8 @@ function isValidDate(date) { * * @customElement lion-input-date */ -// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you. export class LionInputDate extends LocalizeMixin(LionInput) { + /** @type {any} */ static get properties() { return { modelValue: Date, diff --git a/packages/input-datepicker/src/LionInputDatepicker.js b/packages/input-datepicker/src/LionInputDatepicker.js index d9d5298ea..4d532fb97 100644 --- a/packages/input-datepicker/src/LionInputDatepicker.js +++ b/packages/input-datepicker/src/LionInputDatepicker.js @@ -12,7 +12,6 @@ import { LionCalendarOverlayFrame } from './LionCalendarOverlayFrame.js'; /** * @customElement lion-input-datepicker */ -// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you. export class LionInputDatepicker extends ScopedElementsMixin( ArrowMixin(OverlayMixin(LionInputDate)), ) { @@ -24,6 +23,7 @@ export class LionInputDatepicker extends ScopedElementsMixin( }; } + /** @type {any} */ static get properties() { return { /** diff --git a/packages/input-range/src/LionInputRange.js b/packages/input-range/src/LionInputRange.js index 1b9cc5bd0..985def360 100644 --- a/packages/input-range/src/LionInputRange.js +++ b/packages/input-range/src/LionInputRange.js @@ -12,8 +12,8 @@ import { formatNumber } from '@lion/localize'; * * @customElement `lion-input-range` */ -// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you. export class LionInputRange extends LionInput { + /** @type {any} */ static get properties() { return { min: { diff --git a/packages/input-stepper/src/LionInputStepper.js b/packages/input-stepper/src/LionInputStepper.js index face6c110..6ec6800f8 100644 --- a/packages/input-stepper/src/LionInputStepper.js +++ b/packages/input-stepper/src/LionInputStepper.js @@ -7,7 +7,6 @@ import { IsNumber, MinNumber, MaxNumber } from '@lion/form-core'; * * @customElement lion-input-stepper */ -// @ts-expect-error false positive, lit-element already merges properties for you export class LionInputStepper extends LionInput { static get styles() { return [ @@ -20,6 +19,7 @@ export class LionInputStepper extends LionInput { ]; } + /** @type {any} */ static get properties() { return { min: { diff --git a/packages/input/src/LionInput.js b/packages/input/src/LionInput.js index 3d37fe5da..38b0064da 100644 --- a/packages/input/src/LionInput.js +++ b/packages/input/src/LionInput.js @@ -5,8 +5,10 @@ import { LionField, NativeTextFieldMixin } from '@lion/form-core'; * * @customElement lion-input */ -// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you. -export class LionInput extends NativeTextFieldMixin(LionField) { +export class LionInput extends NativeTextFieldMixin( + /** @type {typeof import('@lion/form-core/types/NativeTextFieldMixinTypes').NativeTextField} */ (LionField), +) { + /** @type {any} */ static get properties() { return { /** diff --git a/packages/select-rich/src/LionSelectRich.js b/packages/select-rich/src/LionSelectRich.js index 89ae599e3..6acd24eff 100644 --- a/packages/select-rich/src/LionSelectRich.js +++ b/packages/select-rich/src/LionSelectRich.js @@ -24,7 +24,6 @@ function detectInteractionMode() { /** * LionSelectRich: wraps the element */ -// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you. export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(LionListbox))) { static get scopedElements() { return { @@ -33,6 +32,7 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L }; } + /** @type {any} */ static get properties() { return { navigateWithinInvoker: { diff --git a/packages/textarea/src/LionTextarea.js b/packages/textarea/src/LionTextarea.js index f9f9726cd..8418d0a8c 100644 --- a/packages/textarea/src/LionTextarea.js +++ b/packages/textarea/src/LionTextarea.js @@ -20,7 +20,6 @@ class LionFieldWithTextArea extends LionField { * * @customElement lion-textarea */ -// @ts-expect-error false positive, parent properties get merged by lit-element already export class LionTextarea extends NativeTextFieldMixin(LionFieldWithTextArea) { static get properties() { return {