refactor: move events and event emitters in common elememt

src/components/checkbox/checkbox-panel/checkbox-panel.ts

@@ -8,18 +8,12 @@ import {
 import { customElement, state } from 'lit/decorators.js';
 
 import { SbbLanguageController, SbbSlotStateController } from '../../core/controllers.js';
-import { EventEmitter } from '../../core/eventing.js';
 import { i18nCollapsed, i18nExpanded } from '../../core/i18n.js';
 import { SbbUpdateSchedulerMixin } from '../../core/mixins.js';
 import type { SbbSelectionExpansionPanelElement } from '../../selection-expansion-panel.js';
-import {
-  SbbCheckboxCommonElementMixin,
-  commonStyle,
-  type SbbCheckboxStateChange,
-} from '../common.js';
+import { SbbCheckboxCommonElementMixin, commonStyle } from '../common.js';
 
 import '../../screen-reader-only.js';
-import '../../visual-checkbox.js';
 
 import checkboxPanelStyle from './checkbox-panel.scss?lit&inline';
 
@@ -38,11 +32,6 @@ export class SbbCheckboxPanelElement extends SbbCheckboxCommonElementMixin(
   SbbUpdateSchedulerMixin(LitElement),
 ) {
   public static override styles: CSSResultGroup = [commonStyle, checkboxPanelStyle];
-  public static readonly events = {
-    didChange: 'didChange',
-    stateChange: 'stateChange',
-    checkboxLoaded: 'checkboxLoaded',
-  } as const;
 
   /**
    * Whether the input is the main input of a selection panel.
@@ -58,27 +47,6 @@ export class SbbCheckboxPanelElement extends SbbCheckboxCommonElementMixin(
   private _selectionPanelElement: SbbSelectionExpansionPanelElement | null = null;
   private _language = new SbbLanguageController(this);
 
-  /**
-   * @internal
-   * Internal event that emits whenever the state of the checkbox
-   * in relation to the parent selection panel changes.
-   */
-  private _stateChange: EventEmitter<SbbCheckboxStateChange> = new EventEmitter(
-    this,
-    SbbCheckboxPanelElement.events.stateChange,
-    { bubbles: true },
-  );
-
-  /**
-   * @internal
-   * Internal event that emits when the checkbox is loaded.
-   */
-  private _checkboxLoaded: EventEmitter<void> = new EventEmitter(
-    this,
-    SbbCheckboxPanelElement.events.checkboxLoaded,
-    { bubbles: true },
-  );
-
   public constructor() {
     super();
     new SbbSlotStateController(this);
@@ -96,7 +64,7 @@ export class SbbCheckboxPanelElement extends SbbCheckboxCommonElementMixin(
         !this.closest?.('sbb-selection-expansion-panel [slot="content"]'),
     );
 
-    this._checkboxLoaded.emit();
+    this.checkboxLoaded.emit();
 
     // We need to call requestUpdate to update the reflected attributes
     ['disabled', 'required'].forEach((p) => this.requestUpdate(p));
@@ -116,13 +84,13 @@ export class SbbCheckboxPanelElement extends SbbCheckboxCommonElementMixin(
 
     if (changedProperties.has('checked')) {
       if (this.isSelectionPanelInput && this.checked !== changedProperties.get('checked')!) {
-        this._stateChange.emit({ type: 'checked', checked: this.checked });
+        this.stateChange.emit({ type: 'checked', checked: this.checked });
         this._updateExpandedLabel();
       }
     }
     if (changedProperties.has('disabled')) {
       if (this.isSelectionPanelInput && this.disabled !== changedProperties.get('disabled')!) {
-        this._stateChange.emit({ type: 'disabled', disabled: this.disabled });
+        this.stateChange.emit({ type: 'disabled', disabled: this.disabled });
       }
     }
   }

src/components/checkbox/checkbox/checkbox.ts

@@ -2,13 +2,10 @@ import { LitElement, html, type CSSResultGroup, type TemplateResult } from 'lit'
 import { customElement, property } from 'lit/decorators.js';
 
 import { SbbSlotStateController } from '../../core/controllers.js';
-import { EventEmitter } from '../../core/eventing.js';
 import type { SbbIconPlacement } from '../../core/interfaces.js';
 import { SbbIconNameMixin } from '../../icon.js';
 import { SbbCheckboxCommonElementMixin, commonStyle } from '../common.js';
 
-import '../../visual-checkbox.js';
-
 import checkboxStyle from './checkbox.scss?lit&inline';
 
 export type SbbCheckboxSize = 's' | 'm';
@@ -27,10 +24,6 @@ export class SbbCheckboxElement extends SbbCheckboxCommonElementMixin(
   SbbIconNameMixin(LitElement),
 ) {
   public static override styles: CSSResultGroup = [commonStyle, checkboxStyle];
-  public static readonly events = {
-    didChange: 'didChange',
-    checkboxLoaded: 'checkboxLoaded',
-  } as const;
 
   /** Label size variant, either m or s. */
   @property({ reflect: true })
@@ -46,16 +39,6 @@ export class SbbCheckboxElement extends SbbCheckboxCommonElementMixin(
   @property({ attribute: 'icon-placement', reflect: true })
   public iconPlacement: SbbIconPlacement = 'end';
 
-  /**
-   * @internal
-   * Internal event that emits when the checkbox is loaded.
-   */
-  private _checkboxLoaded: EventEmitter<void> = new EventEmitter(
-    this,
-    SbbCheckboxElement.events.checkboxLoaded,
-    { bubbles: true },
-  );
-
   public constructor() {
     super();
     new SbbSlotStateController(this);
@@ -64,7 +47,7 @@ export class SbbCheckboxElement extends SbbCheckboxCommonElementMixin(
   public override connectedCallback(): void {
     super.connectedCallback();
 
-    this._checkboxLoaded.emit();
+    this.checkboxLoaded.emit();
 
     // We need to call requestUpdate to update the reflected attributes
     ['disabled', 'required', 'size'].forEach((p) => this.requestUpdate(p));

src/components/checkbox/common/checkbox-common.ts

@@ -1,6 +1,7 @@
 import type { LitElement, PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
 
+import { EventEmitter } from '../../core/eventing.js';
 import type {
   SbbCheckedStateChange,
   SbbDisabledStateChange,
@@ -17,6 +18,8 @@ import {
 } from '../../core/mixins.js';
 import type { SbbCheckboxGroupElement } from '../checkbox-group.js';
 
+import '../../visual-checkbox.js';
+
 export type SbbCheckboxStateChange = Extract<
   SbbStateChange,
   SbbDisabledStateChange | SbbCheckedStateChange
@@ -37,6 +40,9 @@ export declare class SbbCheckboxCommonElementMixinType
 
   protected recoverSsrState?(): void;
   protected getAndRemoveAttribute(name: string): string | null;
+
+  protected stateChange: EventEmitter<SbbCheckboxStateChange>;
+  protected checkboxLoaded: EventEmitter<void>;
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -47,6 +53,12 @@ export const SbbCheckboxCommonElementMixin = <T extends Constructor<LitElement>>
     extends SbbFormAssociatedCheckboxMixin(SbbHydrationMixin(superClass))
     implements Partial<SbbCheckboxCommonElementMixinType>
   {
+    public static readonly events = {
+      didChange: 'didChange',
+      stateChange: 'stateChange',
+      checkboxLoaded: 'checkboxLoaded',
+    } as const;
+
     /** Whether the checkbox is indeterminate. */
     @property({ type: Boolean }) public indeterminate = false;
 
@@ -56,6 +68,27 @@ export const SbbCheckboxCommonElementMixin = <T extends Constructor<LitElement>>
     }
     private _group: SbbCheckboxGroupElement | null = null;
 
+    /**
+     * @internal
+     * Internal event that emits whenever the state of the checkbox
+     * in relation to the parent selection panel changes.
+     */
+    protected stateChange: EventEmitter<SbbCheckboxStateChange> = new EventEmitter(
+      this,
+      SbbCheckboxCommonElement.events.stateChange,
+      { bubbles: true },
+    );
+
+    /**
+     * @internal
+     * Internal event that emits when the checkbox is loaded.
+     */
+    protected checkboxLoaded: EventEmitter<void> = new EventEmitter(
+      this,
+      SbbCheckboxCommonElement.events.checkboxLoaded,
+      { bubbles: true },
+    );
+
     public override connectedCallback(): void {
       super.connectedCallback();
       this._group = this.closest('sbb-checkbox-group') as SbbCheckboxGroupElement;