Move events to constructor

src/accordion/tp-accordion-collapse-all.ts

@@ -8,9 +8,10 @@ import { TPAccordionElement } from './tp-accordion';
  */
 export class TPAccordionCollapseAllElement extends HTMLElement {
 	/**
-	 * Connected callback.
+	 * Constructor.
 	 */
-	connectedCallback(): void {
+	constructor() {
+		super();
 		this.querySelector( 'button' )?.addEventListener( 'click', () => this.collapseAll() );
 	}
 

src/accordion/tp-accordion-expand-all.ts

@@ -8,9 +8,10 @@ import { TPAccordionElement } from './tp-accordion';
  */
 export class TPAccordionExpandAllElement extends HTMLElement {
 	/**
-	 * Connected callback.
+	 * Constructor.
 	 */
-	connectedCallback(): void {
+	constructor() {
+		super();
 		this.querySelector( 'button' )?.addEventListener( 'click', this.expandAll.bind( this ) );
 	}
 

src/accordion/tp-accordion-handle.ts

@@ -8,9 +8,10 @@ import { TPAccordionItemElement } from './tp-accordion-item';
  */
 export class TPAccordionHandleElement extends HTMLElement {
 	/**
-	 * Connected callback.
+	 * Constructor.
 	 */
-	connectedCallback(): void {
+	constructor() {
+		super();
 		this.querySelector( 'button' )?.addEventListener( 'click', this.toggle.bind( this ) );
 	}
 

src/accordion/tp-accordion-item.ts

@@ -9,9 +9,11 @@ import { slideElementDown, slideElementUp } from '../utility';
  */
 export class TPAccordionItemElement extends HTMLElement {
 	/**
-	 * Connected callbacl.
+	 * Constructor.
 	 */
-	connectedCallback(): void {
+	constructor() {
+		super();
+
 		if ( 'yes' === this.getAttribute( 'open-by-default' ) ) {
 			this.setAttribute( 'open', 'yes' );
 		}

src/form/tp-form-field.ts

@@ -8,9 +8,10 @@ import { TPFormErrorElement } from './tp-form-error';
  */
 export class TPFormFieldElement extends HTMLElement {
 	/**
-	 * Connected callback.
+	 * Constructor.
 	 */
-	connectedCallback(): void {
+	constructor() {
+		super();
 		const field = this.getField();
 		field?.addEventListener( 'keyup', this.handleFieldChanged.bind( this ) );
 		field?.addEventListener( 'change', this.handleFieldChanged.bind( this ) );

src/form/tp-form.ts

@@ -19,12 +19,6 @@ export class TPFormElement extends HTMLElement {
 	constructor() {
 		super();
 		this.form = this.querySelector( 'form' );
-	}
-
-	/**
-	 * Connected callback.
-	 */
-	connectedCallback(): void {
 		this.form?.addEventListener( 'submit', this.handleFormSubmit.bind( this ) );
 	}
 

src/modal/tp-modal-close.ts

@@ -8,9 +8,10 @@ import { TPModalElement } from './tp-modal';
  */
 export class TPModalCloseElement extends HTMLElement {
 	/**
-	 * Connected callback.
+	 * Constructor.
 	 */
-	connectedCallback(): void {
+	constructor() {
+		super();
 		const button: HTMLButtonElement | null = this.querySelector( 'button' );
 		button?.addEventListener( 'click', this.closeModal.bind( this ) );
 	}

src/modal/tp-modal.ts

@@ -7,13 +7,11 @@ export class TPModalElement extends HTMLElement {
 	 */
 	constructor() {
 		super();
+
+		// Move modal as a direct descendent of body to avoid z-index issues.
 		document.querySelector( 'body' )?.appendChild( this );
-	}
 
-	/**
-	 * Connected callback.
-	 */
-	connectedCallback(): void {
+		// Event listeners.
 		this.addEventListener( 'click', this.handleClick.bind( this ) );
 	}
 

src/multi-select/tp-multi-select-field.ts

@@ -8,22 +8,10 @@ import { TPMultiSelectElement } from './tp-multi-select';
  */
 export class TPMultiSelectFieldElement extends HTMLElement {
 	/**
-	 * Properties.
+	 * Constructor.
 	 */
-	private initialized: boolean = false;
-
-	/**
-	 * Connected callback.
-	 */
-	connectedCallback(): void {
-		// Return early if already initialized.
-		if ( true === this.initialized ) {
-			return;
-		}
-
-		// Set initialized flag to true.
-		this.initialized = true;
-
+	constructor() {
+		super();
 		this.addEventListener( 'click', this.toggleOpen.bind( this ) );
 	}
 

src/multi-select/tp-multi-select-option.ts

@@ -8,22 +8,10 @@ import { TPMultiSelectElement } from './tp-multi-select';
  */
 export class TPMultiSelectOptionElement extends HTMLElement {
 	/**
-	 * Properties.
+	 * Constructor.
 	 */
-	private initialized: boolean = false;
-
-	/**
-	 * Connected callback.
-	 */
-	connectedCallback(): void {
-		// Return early if already initialized.
-		if ( true === this.initialized ) {
-			return;
-		}
-
-		// Set initialized flag to true.
-		this.initialized = true;
-
+	constructor() {
+		super();
 		this.addEventListener( 'click', this.toggle.bind( this ) );
 	}
 

src/multi-select/tp-multi-select-pill.ts

@@ -8,11 +8,13 @@ import { TPMultiSelectElement } from './tp-multi-select';
  */
 export class TPMultiSelectPillElement extends HTMLElement {
 	/**
-	 * Connected callback.
+	 * Constructor.
 	 */
-	connectedCallback(): void {
+	constructor() {
+		super();
 		this.querySelector( 'button' )?.addEventListener( 'click', this.handleButtonClick.bind( this ) );
 	}
+
 	/**
 	 * Handle button click.
 	 *

src/multi-select/tp-multi-select-pills.ts

@@ -10,9 +10,11 @@ import { TPMultiSelectOptionElement } from './tp-multi-select-option';
  */
 export class TPMultiSelectPillsElement extends HTMLElement {
 	/**
-	 * Connected callback.
+	 * Constructor.
 	 */
-	connectedCallback(): void {
+	constructor() {
+		super();
+
 		// Events.
 		this.closest( 'tp-multi-select' )?.addEventListener( 'change', this.update.bind( this ) );
 		this.closest( 'tp-multi-select' )?.querySelector( 'select' )?.addEventListener( 'change', ( () => this.update() ) as EventListener );

src/multi-select/tp-multi-select-search.ts

@@ -10,9 +10,11 @@ import { TPMultiSelectPillElement } from './tp-multi-select-pill';
  */
 export class TPMultiSelectSearchElement extends HTMLElement {
 	/**
-	 * Connected callback.
+	 * Constructor.
 	 */
-	connectedCallback(): void {
+	constructor() {
+		super();
+
 		const input: HTMLInputElement | null = this.querySelector( 'input' );
 		if ( ! input ) {
 			return;

src/multi-select/tp-multi-select-select-all.ts

@@ -9,9 +9,11 @@ import { TPMultiSelectOptionElement } from './tp-multi-select-option';
  */
 export class TPMultiSelectSelectAllElement extends HTMLElement {
 	/**
-	 * Connected callback.
+	 * Constructor.
 	 */
-	connectedCallback(): void {
+	constructor() {
+		super();
+
 		this.closest( 'tp-multi-select' )?.addEventListener( 'change', this.handleValueChanged.bind( this ) );
 		this.addEventListener( 'click', this.toggleSelectAll.bind( this ) );
 	}

src/multi-select/tp-multi-select.ts

@@ -21,14 +21,9 @@ export class TPMultiSelectElement extends HTMLElement {
 	 */
 	constructor() {
 		super();
-		this.keyboardEventListener = this.handleKeyboardInputs.bind( this ) as EventListener;
-	}
 
-	/**
-	 * Connected callback.
-	 */
-	connectedCallback(): void {
 		// Events.
+		this.keyboardEventListener = this.handleKeyboardInputs.bind( this ) as EventListener;
 		document.addEventListener( 'click', this.handleDocumentClick.bind( this ) );
 		this.addEventListener( 'change', this.update.bind( this ) );
 

src/slider/tp-slider-arrow.ts

@@ -8,9 +8,10 @@ import { TPSliderElement } from './tp-slider';
  */
 export class TPSliderArrowElement extends HTMLElement {
 	/**
-	 * Connected callback.
+	 * Constructor.
 	 */
-	connectedCallback(): void {
+	constructor() {
+		super();
 		this.querySelector( 'button' )?.addEventListener( 'click', this.handleClick.bind( this ) );
 	}
 

src/slider/tp-slider-nav-item.ts

@@ -9,9 +9,10 @@ import { TPSliderNavElement } from './tp-slider-nav';
  */
 export class TPSliderNavItemElement extends HTMLElement {
 	/**
-	 * Connected callback.
+	 * Constructor.
 	 */
-	connectedCallback(): void {
+	constructor() {
+		super();
 		this.querySelector( 'button' )?.addEventListener( 'click', this.handleClick.bind( this ) );
 	}
 

src/slider/tp-slider-slide.ts

@@ -8,9 +8,11 @@ import { TPSliderElement } from './tp-slider';
  */
 export class TPSliderSlideElement extends HTMLElement {
 	/**
-	 * Connected callback.
+	 * Constructor.
 	 */
-	connectedCallback(): void {
+	constructor() {
+		super();
+
 		// Resize observer.
 		if ( 'ResizeObserver' in window ) {
 			new ResizeObserver( this.handleHeightChange.bind( this ) ).observe( this );

src/tabs/tp-tabs-nav-item.ts

@@ -8,9 +8,11 @@ import { TPTabsElement } from './tp-tabs';
  */
 export class TPTabsNavItemElement extends HTMLElement {
 	/**
-	 * Connected callback.
+	 * Constructor.
 	 */
-	connectedCallback(): void {
+	constructor() {
+		super();
+
 		const link: HTMLAnchorElement | null = this.querySelector( 'a' );
 		link?.addEventListener( 'click', this.handleLinkClick.bind( this ) );
 	}

src/tabs/tp-tabs.ts

@@ -10,9 +10,11 @@ import { TPTabsTabElement } from './tp-tabs-tab';
  */
 export class TPTabsElement extends HTMLElement {
 	/**
-	 * Connected callback.
+	 * Constructor.
 	 */
-	connectedCallback(): void {
+	constructor() {
+		super();
+
 		this.updateTabFromUrlHash();
 		window.addEventListener( 'hashchange', this.updateTabFromUrlHash.bind( this ) );
 	}