chore: refactor to not use deprecated EventMixin

packages/choice-input/src/ChoiceInputMixin.js

@@ -16,13 +16,6 @@ export const ChoiceInputMixin = superclass =>
       };
     }
 
-    get events() {
-      return {
-        ...super.events,
-        _toggleChecked: [() => this, 'user-input-changed'],
-      };
-    }
-
     static get syncObservers() {
       return {
         ...super.syncObservers,
@@ -104,9 +97,15 @@ export const ChoiceInputMixin = superclass =>
 
     connectedCallback() {
       if (super.connectedCallback) super.connectedCallback();
+      this.addEventListener('user-input-changed', this._toggleChecked);
       this._reflectCheckedToCssClass();
     }
 
+    disconnectedCallback() {
+      if (super.disconnectedCallback) super.disconnectedCallback();
+      this.removeEventListener('user-input-changed', this._toggleChecked);
+    }
+
     _toggleChecked() {
       this.choiceChecked = !this.choiceChecked;
     }

packages/field/src/FocusMixin.js

@@ -15,13 +15,18 @@ export const FocusMixin = dedupeMixin(
         };
       }
 
-      get events() {
+      connectedCallback() {
-        return {
+        super.connectedCallback();
-          ...super.events,
+        this._onFocus = this._onFocus.bind(this);
-          // Listen to focusin instead of focus, because it blurs
+        this._onBlur = this._onBlur.bind(this);
-          _onFocus: [() => this.inputElement, 'focusin'],
+        this.inputElement.addEventListener('focusin', this._onFocus);
-          _onBlur: [() => this.inputElement, 'focusout'],
+        this.inputElement.addEventListener('focusout', this._onBlur);
-        };
+      }
+
+      disconnectedCallback() {
+        super.disconnectedCallback();
+        this.inputElement.removeEventListener('focusin', this._onFocus);
+        this.inputElement.removeEventListener('focusout', this._onBlur);
       }
 
       /**

packages/field/src/FormatMixin.js

@@ -90,14 +90,6 @@ export const FormatMixin = dedupeMixin(
         };
       }
 
-      get events() {
-        return {
-          ...super.events,
-          _proxyInputEvent: [() => this.inputElement, 'input'],
-          _onUserInputChanged: [() => this, 'user-input-changed'],
-        };
-      }
-
       /**
        * === Formatting and parsing ====
        * To understand all concepts below, please consult the flow diagrams in the documentation.
@@ -288,13 +280,15 @@ export const FormatMixin = dedupeMixin(
       connectedCallback() {
         super.connectedCallback();
         this._reflectBackFormattedValueToUser = this._reflectBackFormattedValueToUser.bind(this);
+
         this._reflectBackFormattedValueDebounced = () => {
           // Make sure this is fired after the change event of inputElement, so that formattedValue
           // is guaranteed to be calculated
           setTimeout(this._reflectBackFormattedValueToUser);
         };
         this.inputElement.addEventListener(this.formatOn, this._reflectBackFormattedValueDebounced);
-
+        this.inputElement.addEventListener('input', this._proxyInputEvent);
+        this.addEventListener('user-input-changed', this._onUserInputChanged);
         // Connect the value found in <input> to the formatting/parsing/serializing loop as a fallback
         // mechanism. Assume the user uses the value property of the <lion-field>(recommended api) as
         // the api (this is a downwards sync).
@@ -308,6 +302,8 @@ export const FormatMixin = dedupeMixin(
 
       disconnectedCallback() {
         super.disconnectedCallback();
+        this.inputElement.removeEventListener('input', this._proxyInputEvent);
+        this.removeEventListener('user-input-changed', this._onUserInputChanged);
         this.inputElement.removeEventListener(
           this.formatOn,
           this._reflectBackFormattedValueDebounced,

packages/field/src/LionField.js

@@ -2,7 +2,6 @@ import { DelegateMixin, SlotMixin } from '@lion/core';
 import { LionLitElement } from '@lion/core/src/LionLitElement.js';
 import { ElementMixin } from '@lion/core/src/ElementMixin.js';
 import { CssClassMixin } from '@lion/core/src/CssClassMixin.js';
-import { EventMixin } from '@lion/core/src/EventMixin.js';
 import { ObserverMixin } from '@lion/core/src/ObserverMixin.js';
 import { ValidateMixin } from '@lion/validate';
 
@@ -32,9 +31,7 @@ export class LionField extends FormControlMixin(
   ValidateMixin(
     InteractionStateMixin(
       FormatMixin(
-        EventMixin(
+        CssClassMixin(ElementMixin(DelegateMixin(SlotMixin(ObserverMixin(LionLitElement))))),
-          CssClassMixin(ElementMixin(DelegateMixin(SlotMixin(ObserverMixin(LionLitElement))))),
-        ),
       ),
     ),
   ),
@@ -55,13 +52,6 @@ export class LionField extends FormControlMixin(
     };
   }
 
-  get events() {
-    return {
-      ...super.events,
-      _onChange: [() => this.inputElement, 'change'],
-    };
-  }
-
   static get properties() {
     return {
       ...super.properties,
@@ -106,6 +96,8 @@ export class LionField extends FormControlMixin(
     Lifecycle  */
   connectedCallback() {
     super.connectedCallback();
+    this._onChange = this._onChange.bind(this);
+    this.inputElement.addEventListener('change', this._onChange);
     this._delegateInitialValueAttr(); // TODO: find a better way to do this
     this._setDisabledClass();
     this.classList.add('form-field');
@@ -120,6 +112,7 @@ export class LionField extends FormControlMixin(
       });
       this.__parentFormGroup.dispatchEvent(event);
     }
+    this.inputElement.removeEventListener('change', this._onChange);
   }
 
   /**

packages/fieldset/src/LionFieldset.js

@@ -1,7 +1,6 @@
 import { SlotMixin, html } from '@lion/core';
 import { LionLitElement } from '@lion/core/src/LionLitElement.js';
 import { CssClassMixin } from '@lion/core/src/CssClassMixin.js';
-import { EventMixin } from '@lion/core/src/EventMixin.js';
 import { ObserverMixin } from '@lion/core/src/ObserverMixin.js';
 import { ValidateMixin } from '@lion/validate';
 import { FormControlMixin } from '@lion/field';
@@ -16,7 +15,7 @@ const pascalCase = str => str.charAt(0).toUpperCase() + str.slice(1);
  * @extends LionLitElement
  */
 export class LionFieldset extends FormControlMixin(
-  ValidateMixin(EventMixin(CssClassMixin(SlotMixin(ObserverMixin(LionLitElement))))),
+  ValidateMixin(CssClassMixin(SlotMixin(ObserverMixin(LionLitElement)))),
 ) {
   static get properties() {
     return {
@@ -43,18 +42,6 @@ export class LionFieldset extends FormControlMixin(
     };
   }
 
-  get events() {
-    return {
-      ...super.events,
-      __validate: [() => this, 'validation-done'],
-      _updateFocusedClass: [() => this, 'focused-changed'], // TODO: currently not available in InteractionStates
-      _updateTouchedClass: [() => this, 'touched-changed'],
-      _updateDirtyClass: [() => this, 'dirty-changed'],
-      __onFormElementRegister: [() => this, 'form-element-register'],
-      __onFormElementUnRegister: [() => this, 'form-element-unregister'],
-    };
-  }
-
   get inputElement() {
     return this;
   }
@@ -118,12 +105,24 @@ export class LionFieldset extends FormControlMixin(
   connectedCallback() {
     // eslint-disable-next-line wc/guard-super-call
     super.connectedCallback();
+    this.addEventListener('validation-done', this.__validate);
+    this.addEventListener('focused-changed', this._updateFocusedClass);
+    this.addEventListener('touched-changed', this._updateTouchedClass);
+    this.addEventListener('dirty-changed', this._updateDirtyClass);
+    this.addEventListener('form-element-register', this.__onFormElementRegister);
+    this.addEventListener('form-element-unregister', this.__onFormElementUnRegister);
     this._setRole();
   }
 
   disconnectedCallback() {
     // eslint-disable-next-line wc/guard-super-call
     super.disconnectedCallback();
+    this.removeEventListener('validation-done', this.__validate);
+    this.removeEventListener('focused-changed', this._updateFocusedClass);
+    this.removeEventListener('touched-changed', this._updateTouchedClass);
+    this.removeEventListener('dirty-changed', this._updateDirtyClass);
+    this.removeEventListener('form-element-register', this.__onFormElementRegister);
+    this.removeEventListener('form-element-unregister', this.__onFormElementUnRegister);
     if (this.__parentFormGroup) {
       const event = new CustomEvent('form-element-unregister', {
         detail: { element: this },

packages/form/src/LionForm.js

@@ -18,12 +18,16 @@ export class LionForm extends DelegateMixin(LionFieldset) {
     };
   }
 
-  get events() {
+  connectedCallback() {
-    return {
+    super.connectedCallback();
-      ...super.events,
+    this.addEventListener('submit', this._submit);
-      _submit: [() => this, 'submit'],
+    this.addEventListener('reset', this._reset);
-      _reset: [() => this, 'reset'],
+  }
-    };
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('submit', this._submit);
+    this.removeEventListener('reset', this._reset);
   }
 
   get formElement() {

packages/radio-group/src/LionRadioGroup.js

@@ -25,13 +25,6 @@ import { LionFieldset } from '@lion/fieldset';
  */
 
 export class LionRadioGroup extends LionFieldset {
-  get events() {
-    return {
-      ...super.events,
-      _checkRadioElements: [() => this, 'model-value-changed'],
-    };
-  }
-
   get checkedValue() {
     const el = this._getCheckedRadioElement();
     return el ? el.modelValue.value : '';
@@ -59,9 +52,15 @@ export class LionRadioGroup extends LionFieldset {
 
   connectedCallback() {
     super.connectedCallback();
+    this.addEventListener('model-value-changed', this._checkRadioElements);
     this._setRole('radiogroup');
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('model-value-changed', this._checkRadioElements);
+  }
+
   _checkRadioElements(ev) {
     const { target } = ev;
     if (target.type !== 'radio' || target.choiceChecked === false) return;

packages/select/src/LionSelect.js

@@ -30,11 +30,14 @@ import { LionField } from '@lion/field';
 
 // eslint-disable-next-line no-unused-vars
 export class LionSelect extends LionField {
-  get events() {
+  connectedCallback() {
-    return {
+    super.connectedCallback();
-      ...super.events,
+    this.addEventListener('change', this._proxyChangeEvent);
-      _proxyChangeEvent: [() => this.inputElement, 'change'],
+  }
-    };
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('change', this._proxyChangeEvent);
   }
 
   _proxyChangeEvent() {