Merge pull request #1250 from ing-bank/chore/type-annotate-static-get-props

chore: remove @ts-expect-error & add @type {any} to  static get props

.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.

packages/collapsible/demo/CustomCollapsible.js

@@ -8,8 +8,8 @@ const EVENT = {
  * `CustomCollapsible` is a class for custom collapsible element (`<custom-collapsible>` 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<void>} */ (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<void>} */ (new Promise(resolve =>
+      requestAnimationFrame(() => resolve()),
+    ));
     return this._contentHeight; // Expected height i.e. actual size once collapsed after animation
   }
 }

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 {

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 {

packages/form-core/src/FocusMixin.js

@@ -6,9 +6,8 @@ import { FormControlMixin } from './FormControlMixin.js';
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} 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: {

packages/form-core/src/FormatMixin.js

@@ -58,8 +58,8 @@ import { ValidateMixin } from './validate/ValidateMixin.js';
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} 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 {
         /**

packages/form-core/src/InteractionStateMixin.js

@@ -18,8 +18,8 @@ import { FormControlMixin } from './FormControlMixin.js';
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} 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 {
         /**

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: {

packages/form-core/src/choice-group/ChoiceGroupMixin.js

@@ -15,8 +15,8 @@ import { InteractionStateMixin } from '../InteractionStateMixin.js';
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} 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 {
         /**

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<import('@lion/core').LitElement>} 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 {
         /**

packages/form-core/src/form-group/FormGroupMixin.js

@@ -28,10 +28,10 @@ import { FormElementsHaveNoError } from './FormElementsHaveNoError.js';
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} 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 {
         /**

packages/form-core/src/validate/ValidateMixin.js

@@ -32,7 +32,6 @@ function arrayDiff(array1 = [], array2 = []) {
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} 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 },

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 },

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 };
       }

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 {
       /**

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,

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 {
       /**

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: {

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: {

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(
-export class LionInput extends NativeTextFieldMixin(LionField) {
+  /** @type {typeof import('@lion/form-core/types/NativeTextFieldMixinTypes').NativeTextField} */ (LionField),
+) {
+  /** @type {any} */
   static get properties() {
     return {
       /**

packages/select-rich/src/LionSelectRich.js

@@ -24,7 +24,6 @@ function detectInteractionMode() {
 /**
  * LionSelectRich: wraps the <lion-listbox> 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: {

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 {