constructor(pswp, data) {
    var _container;

    const name = data.name || data.className;
    let elementHTML = data.html; // @ts-expect-error lookup only by `data.name` maybe?

    if (pswp.options[name] === false) {
      // exit if element is disabled from options
      return;
    } // Allow to override SVG icons from options
    // @ts-expect-error lookup only by `data.name` maybe?


    if (typeof pswp.options[name + 'SVG'] === 'string') {
      // arrowPrevSVG
      // arrowNextSVG
      // closeSVG
      // zoomSVG
      // @ts-expect-error lookup only by `data.name` maybe?
      elementHTML = pswp.options[name + 'SVG'];
    }

    pswp.dispatch('uiElementCreate', {
      data
    });
    let className = '';

    if (data.isButton) {
      className += 'pswp__button ';
      className += data.className || `pswp__button--${data.name}`;
    } else {
      className += data.className || `pswp__${data.name}`;
    }

    let tagName = data.isButton ? data.tagName || 'button' : data.tagName || 'div';
    tagName =
    /** @type {keyof HTMLElementTagNameMap} */
    tagName.toLowerCase();
    /** @type {HTMLElement} */

    const element = createElement(className, tagName);

    if (data.isButton) {
      if (tagName === 'button') {
        /** @type {HTMLButtonElement} */
        element.type = 'button';
      }

      let {
        title
      } = data;
      const {
        ariaLabel
      } = data; // @ts-expect-error lookup only by `data.name` maybe?

      if (typeof pswp.options[name + 'Title'] === 'string') {
        // @ts-expect-error lookup only by `data.name` maybe?
        title = pswp.options[name + 'Title'];
      }

      if (title) {
        element.title = title;
      }

      const ariaText = ariaLabel || title;

      if (ariaText) {
        element.setAttribute('aria-label', ariaText);
      }
    }

    element.innerHTML = addElementHTML(elementHTML);

    if (data.onInit) {
      data.onInit(element, pswp);
    }

    if (data.onClick) {
      element.onclick = e => {
        if (typeof data.onClick === 'string') {
          // @ts-ignore
          pswp[data.onClick]();
        } else if (typeof data.onClick === 'function') {
          data.onClick(e, element, pswp);
        }
      };
    } // Top bar is default position


    const appendTo = data.appendTo || 'bar';
    /** @type {HTMLElement | undefined} root element by default */

    let container = pswp.element;

    if (appendTo === 'bar') {
      if (!pswp.topBar) {
        pswp.topBar = createElement('pswp__top-bar pswp__hide-on-close', 'div', pswp.scrollWrap);
      }

      container = pswp.topBar;
    } else {
      // element outside of top bar gets a secondary class
      // that makes element fade out on close
      element.classList.add('pswp__hide-on-close');

      if (appendTo === 'wrapper') {
        container = pswp.scrollWrap;
      }
    }

    (_container = container) === null || _container === void 0 || _container.appendChild(pswp.applyFilters('uiElement', element, data));
  }
@param {PhotoSwipe} pswp
@param {UIElementData} data