build: enable eslint member ordering rule

eslint.config.js

@@ -146,6 +146,30 @@ export default [
       // TODO Discuss this with the team
       'lit/no-invalid-html': 'off',
       camelcase: 'off',
+      '@typescript-eslint/member-ordering': [
+        'error',
+        {
+          default: {
+            memberTypes: [
+              // Index signature
+              'signature',
+              'call-signature',
+
+              'static-field',
+
+              // Static initialization
+              'static-initialization',
+
+              ['set', 'get', 'field', 'accessor'],
+
+              'constructor',
+
+              'static-method',
+              ['method', 'decorated-method'],
+            ],
+          },
+        },
+      ],
     },
   },
   {

src/elements/accordion/accordion.ts

@@ -18,6 +18,9 @@ import style from './accordion.scss?lit&inline';
 export class SbbAccordionElement extends SbbHydrationMixin(LitElement) {
   public static override styles: CSSResultGroup = style;
 
+  /** Size variant, either l or s; overrides the size on any projected `sbb-expansion-panel`. */
+  @property({ reflect: true }) public size: 's' | 'l' = 'l';
+
   /**
    * The heading level for the sbb-expansion-panel-headers within the component.
    * @controls SbbExpansionPanelElement.titleLevel
@@ -44,11 +47,22 @@ export class SbbAccordionElement extends SbbHydrationMixin(LitElement) {
   }
   private _multi: boolean = false;
 
-  /** Size variant, either l or s; overrides the size on any projected `sbb-expansion-panel`. */
-  @property({ reflect: true }) public size: 's' | 'l' = 'l';
+  private get _expansionPanels(): SbbExpansionPanelElement[] {
+    return Array.from(this.querySelectorAll?.('sbb-expansion-panel') ?? []);
+  }
 
   private _abort = new SbbConnectedAbortController(this);
 
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    const signal = this._abort.signal;
+    this.addEventListener(
+      SbbExpansionPanelElement.events.willOpen,
+      (e: CustomEvent<void>) => this._closePanels(e),
+      { signal },
+    );
+  }
+
   private _closePanels(e: CustomEvent): void {
     if ((e.target as HTMLElement)?.localName !== 'sbb-expansion-panel' || this.multi) {
       return;
@@ -59,6 +73,14 @@ export class SbbAccordionElement extends SbbHydrationMixin(LitElement) {
       .forEach((panel) => (panel.expanded = false));
   }
 
+  protected override willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+
+    if (changedProperties.has('size')) {
+      this._expansionPanels.forEach((panel: SbbExpansionPanelElement) => (panel.size = this.size));
+    }
+  }
+
   private _resetExpansionPanels(newValue: boolean, oldValue: boolean): void {
     // If it's changing from "multi = true" to "multi = false", open the first panel and close all the others.
     const expansionPanels = this._expansionPanels;
@@ -76,28 +98,6 @@ export class SbbAccordionElement extends SbbHydrationMixin(LitElement) {
     );
   }
 
-  private get _expansionPanels(): SbbExpansionPanelElement[] {
-    return Array.from(this.querySelectorAll?.('sbb-expansion-panel') ?? []);
-  }
-
-  public override connectedCallback(): void {
-    super.connectedCallback();
-    const signal = this._abort.signal;
-    this.addEventListener(
-      SbbExpansionPanelElement.events.willOpen,
-      (e: CustomEvent<void>) => this._closePanels(e),
-      { signal },
-    );
-  }
-
-  protected override willUpdate(changedProperties: PropertyValues<this>): void {
-    super.willUpdate(changedProperties);
-
-    if (changedProperties.has('size')) {
-      this._expansionPanels.forEach((panel: SbbExpansionPanelElement) => (panel.size = this.size));
-    }
-  }
-
   private _handleSlotchange(): void {
     this._expansionPanels.forEach(
       (panel: SbbExpansionPanelElement, index: number, array: SbbExpansionPanelElement[]) => {

src/elements/action-group/action-group.ts

@@ -54,12 +54,6 @@ export class SbbActionGroupElement extends LitElement {
   @property({ attribute: 'link-size', reflect: true })
   public linkSize: SbbLinkSize = 'm';
 
-  private _syncButtons(): void {
-    this.querySelectorAll?.<SbbButtonCommonElement>('[data-sbb-button]').forEach(
-      (b) => (b.size = this.buttonSize),
-    );
-  }
-
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
     super.willUpdate(changedProperties);
 
@@ -71,6 +65,12 @@ export class SbbActionGroupElement extends LitElement {
     }
   }
 
+  private _syncButtons(): void {
+    this.querySelectorAll?.<SbbButtonCommonElement>('[data-sbb-button]').forEach(
+      (b) => (b.size = this.buttonSize),
+    );
+  }
+
   private _syncLinks(): void {
     this.querySelectorAll?.<
       SbbBlockLinkElement | SbbBlockLinkButtonElement | SbbBlockLinkStaticElement

src/elements/alert/alert/alert.ts

@@ -89,12 +89,6 @@ export class SbbAlertElement extends SbbIconNameMixin(SbbOpenCloseBaseElement) {
 
   private _language = new SbbLanguageController(this);
 
-  protected override async firstUpdated(changedProperties: PropertyValues<this>): Promise<void> {
-    super.firstUpdated(changedProperties);
-
-    this.open();
-  }
-
   /** Requests dismissal of the alert.
    * @deprecated in favour of 'willClose' and 'didClose' events
    */
@@ -115,6 +109,12 @@ export class SbbAlertElement extends SbbIconNameMixin(SbbOpenCloseBaseElement) {
     }
   }
 
+  protected override async firstUpdated(changedProperties: PropertyValues<this>): Promise<void> {
+    super.firstUpdated(changedProperties);
+
+    this.open();
+  }
+
   private _onAnimationEnd(event: AnimationEvent): void {
     if (this.state === 'opening' && event.animationName === 'open-opacity') {
       this._handleOpening();

src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts

@@ -47,10 +47,6 @@ export class SbbAutocompleteGridButtonElement extends SbbDisabledMixin(
   /** Whether the component must be set disabled due disabled attribute on sbb-optgroup. */
   private _disabledFromGroup = false;
 
-  protected override isDisabledExternally(): boolean {
-    return this._disabledFromGroup ?? false;
-  }
-
   /** MutationObserver on data attributes. */
   private _optionAttributeObserver = new AgnosticMutationObserver((mutationsList) => {
     for (const mutation of mutationsList) {
@@ -69,6 +65,10 @@ export class SbbAutocompleteGridButtonElement extends SbbDisabledMixin(
     }
   }
 
+  protected override isDisabledExternally(): boolean {
+    return this._disabledFromGroup ?? false;
+  }
+
   protected override renderTemplate(): TemplateResult {
     return super.renderIconSlot();
   }

src/elements/autocomplete/autocomplete-base-element.ts

@@ -87,7 +87,12 @@ export abstract class SbbAutocompleteBaseElement extends SbbNegativeMixin(
 
   /** Opens the autocomplete. */
   public open(): void {
-    if (this.state !== 'closed' || !this._overlay || this.options.length === 0 || this._readonly) {
+    if (
+      this.state !== 'closed' ||
+      !this._overlay ||
+      this.options.length === 0 ||
+      this._readonly()
+    ) {
       return;
     }
     if (!this.willOpen.emit()) {
@@ -187,7 +192,7 @@ export abstract class SbbAutocompleteBaseElement extends SbbNegativeMixin(
   }
 
   /** The autocomplete should inherit 'readonly' state from the trigger. */
-  private get _readonly(): boolean {
+  private _readonly(): boolean {
     return this.triggerElement?.hasAttribute('readonly') ?? false;
   }
 

src/elements/calendar/calendar.ts

@@ -235,8 +235,8 @@ export class SbbCalendarElement<T = Date> extends SbbHydrationMixin(LitElement)
     this._setWeekdays();
   }
 
-  private get _dateFilter(): (date: T) => boolean {
-    return this.dateFilter ?? (() => true);
+  private _dateFilter(date: T): boolean {
+    return this.dateFilter?.(date) ?? true;
   }
 
   /** Resets the active month according to the new state of the calendar. */
@@ -1252,7 +1252,7 @@ export class SbbCalendarElement<T = Date> extends SbbHydrationMixin(LitElement)
     this._startTableTransition();
   }
 
-  private get _getView(): TemplateResult {
+  private _getView(): TemplateResult {
     if (isServer || this.hydrationRequired) {
       // TODO: We disable SSR for calendar for now. Figure our, if there is a way
       // to enable it, while considering i18n and date information.
@@ -1288,7 +1288,7 @@ export class SbbCalendarElement<T = Date> extends SbbHydrationMixin(LitElement)
   }
 
   protected override render(): TemplateResult {
-    return html`<div class="sbb-calendar__wrapper">${this._getView}</div>`;
+    return html`<div class="sbb-calendar__wrapper">${this._getView()}</div>`;
   }
 }
 

src/elements/clock/clock.ts

@@ -77,15 +77,15 @@ export class SbbClockElement extends LitElement {
   /** Seconds value for the current date. */
   private _seconds!: number;
 
+  /** Move the minutes hand every minute. */
+  private _handMovement?: ReturnType<typeof setInterval>;
+
   /** Callback function for hours hand. */
   private _moveHoursHandFn = (): void => this._moveHoursHand();
 
   /** Callback function for minutes hand. */
   private _moveMinutesHandFn = (): void => this._moveMinutesHand();
 
-  /** Move the minutes hand every minute. */
-  private _handMovement?: ReturnType<typeof setInterval>;
-
   protected override async willUpdate(changedProperties: PropertyValues<this>): Promise<void> {
     super.willUpdate(changedProperties);
 

src/elements/core/a11y/focus-visible-within-controller.ts

@@ -4,6 +4,10 @@ import { sbbInputModalityDetector } from './input-modality-detector.js';
 
 // Determine whether the element has a visible focus within.
 export class SbbFocusVisibleWithinController implements ReactiveController {
+  public constructor(private _host: ReactiveControllerHost & HTMLElement) {
+    this._host.addController(this);
+  }
+
   private _focusinHandler = (): void => {
     this._host.toggleAttribute(
       'data-has-visible-focus-within',
@@ -15,10 +19,6 @@ export class SbbFocusVisibleWithinController implements ReactiveController {
     this._host.removeAttribute('data-has-visible-focus-within');
   };
 
-  public constructor(private _host: ReactiveControllerHost & HTMLElement) {
-    this._host.addController(this);
-  }
-
   public hostConnected(): void {
     this._host.addEventListener('focusin', this._focusinHandler);
     this._host.addEventListener('focusout', this._focusoutHandler);

src/elements/core/a11y/input-modality-detector.ts

@@ -80,12 +80,6 @@ class SbbInputModalityDetector {
     return this._mostRecentModality;
   }
 
-  public reset(): void {
-    this._mostRecentModality = 'mouse';
-    this._mostRecentTarget = null;
-    this._lastTouchMs = 0;
-  }
-
   /**
    * The most recent modality must be initialised with the value 'mouse' to cover the case where an action is
    * performed but no mouse or keyboard event has yet occurred on the page (e.g. `sbb-popover` with hover trigger).
@@ -112,6 +106,20 @@ class SbbInputModalityDetector {
    */
   private _lastTouchMs = 0;
 
+  public constructor() {
+    if (!isServer) {
+      document.addEventListener('keydown', this._onKeydown, modalityEventListenerOptions);
+      document.addEventListener('mousedown', this._onMousedown, modalityEventListenerOptions);
+      document.addEventListener('touchstart', this._onTouchstart, modalityEventListenerOptions);
+    }
+  }
+
+  public reset(): void {
+    this._mostRecentModality = 'mouse';
+    this._mostRecentTarget = null;
+    this._lastTouchMs = 0;
+  }
+
   /**
    * Handles keydown events. Must be an arrow function in order to preserve the context when it gets
    * bound.
@@ -165,14 +173,6 @@ class SbbInputModalityDetector {
     this._mostRecentModality = 'touch';
     this._mostRecentTarget = getEventTarget(event);
   };
-
-  public constructor() {
-    if (!isServer) {
-      document.addEventListener('keydown', this._onKeydown, modalityEventListenerOptions);
-      document.addEventListener('mousedown', this._onMousedown, modalityEventListenerOptions);
-      document.addEventListener('touchstart', this._onTouchstart, modalityEventListenerOptions);
-    }
-  }
 }
 
 export const sbbInputModalityDetector = new SbbInputModalityDetector();

src/elements/core/base-elements/button-base-element.ts

@@ -50,6 +50,28 @@ export abstract class SbbButtonBaseElement extends SbbActionBaseElement {
   /** The <form> element to associate the button with. */
   @property() public form?: string;
 
+  public constructor() {
+    super();
+    if (!isServer) {
+      this.setupBaseEventHandlers();
+
+      const passiveOptions = { passive: true };
+      this.addEventListener('click', this._handleButtonClick);
+      this.addEventListener('keydown', this._preventScrollOnSpaceKeydown);
+      this.addEventListener('keyup', this._dispatchClickEventOnSpaceKeyup, passiveOptions);
+      this.addEventListener('blur', this._removeActiveMarker, passiveOptions);
+      this.addEventListener(
+        'keypress',
+        (event: KeyboardEvent): void => {
+          if (event.key === 'Enter' || event.key === '\n') {
+            this._dispatchClickEvent(event);
+          }
+        },
+        passiveOptions,
+      );
+    }
+  }
+
   private _handleButtonClick = async (event: MouseEvent): Promise<void> => {
     if (this.type === 'button' || (await isEventPrevented(event))) {
       return;
@@ -117,28 +139,6 @@ export abstract class SbbButtonBaseElement extends SbbActionBaseElement {
     );
   };
 
-  public constructor() {
-    super();
-    if (!isServer) {
-      this.setupBaseEventHandlers();
-
-      const passiveOptions = { passive: true };
-      this.addEventListener('click', this._handleButtonClick);
-      this.addEventListener('keydown', this._preventScrollOnSpaceKeydown);
-      this.addEventListener('keyup', this._dispatchClickEventOnSpaceKeyup, passiveOptions);
-      this.addEventListener('blur', this._removeActiveMarker, passiveOptions);
-      this.addEventListener(
-        'keypress',
-        (event: KeyboardEvent): void => {
-          if (event.key === 'Enter' || event.key === '\n') {
-            this._dispatchClickEvent(event);
-          }
-        },
-        passiveOptions,
-      );
-    }
-  }
-
   public override attributeChangedCallback(
     name: string,
     old: string | null,