import { LitElement } from 'lit'
import { property } from 'lit/decorators.js'

/**
 * A base element for all elements in the UI library.
 * This allows to introduce global logic or properties for all elements.
 */
export default class ApiElement extends LitElement {
  /**
   * Whenever the element wants to listen on global object
   * it uses this as a reference to it.
   *
   * @default window
   */
  @property({ type: Object }) accessor eventsTarget: EventTarget

  constructor() {
    super()
    this.eventsTarget = window
  }

  /**
   * A common way for an element to notify a change.
   */
  notifyChange(): void {
    this.dispatchEvent(new Event('change'))
  }
}
