leaflet-components/src/components/leaflet-popup.ts

import { Popup } from 'leaflet';
import { defineProps, num, on } from '../core/props.ts';
import { WithProps, buildOptions, numAttr, registerWithParent } from '../core/utils.ts';

const PROPS = defineProps({
  lat: num(),
  lng: num(),
  maxWidth: num(300),
  minWidth: num(50),
  maxHeight: num(),
  autoPan: on(),
  closeButton: on(),
  autoClose: on(),
});

export default class LeafletPopup extends WithProps(HTMLElement, PROPS) {
  #obj?: Popup;
  #observer?: MutationObserver;

  connectedCallback() {
    this.#obj = new Popup({
      ...buildOptions(this, PROPS, ['lat', 'lng']),
      content: this.innerHTML,
    });
    if (this.hasAttribute('lat') && this.hasAttribute('lng')) {
      this.#obj.setLatLng([numAttr(this, PROPS, 'lat'), numAttr(this, PROPS, 'lng')]);
    }
    registerWithParent(this, this.#obj);

    this.#observer = new MutationObserver(() => {
      this.#obj?.setContent(this.innerHTML);
    });
    this.#observer.observe(this, {
      childList: true,
      characterData: true,
      subtree: true,
    });
  }

  disconnectedCallback() {
    this.#observer?.disconnect();
    this.#observer = undefined;
    this.#obj?.remove();
    this.#obj = undefined;
  }

  attributeChangedCallback(name: string) {
    if (!this.#obj) return;
    if (name === 'lat' || name === 'lng') {
      this.#obj.setLatLng([numAttr(this, PROPS, 'lat'), numAttr(this, PROPS, 'lng')]);
    }
  }
}

customElements.define('leaflet-popup', LeafletPopup);