@shopware-ag/meteor-component-library/dist/esm/MtPopoverDeprecated.js

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

import '../mt-popover-deprecated.css';
import { defineComponent, resolveDirective, openBlock, createElementBlock, withDirectives, normalizeClass, normalizeStyle, renderSlot } from "vue";
import { _ as _export_sfc } from "../_plugin-vue_export-helper-cc2b3d55.mjs";
const virtualScrollingElements = /* @__PURE__ */ new Map();
const outsideClasses = {
  top: "--placement-top-outside",
  right: "--placement-right-outside",
  bottom: "--placement-bottom-outside",
  left: "--placement-left-outside"
};
const defaultConfig = {
  active: false,
  targetSelector: "",
  resizeWidth: false,
  style: {}
};
const customStylingBlacklist = ["width", "position", "top", "left", "right", "bottom"];
function calculateOutsideEdges(el, vnode) {
  var _a;
  const orientationElement = (_a = vnode.$parent) == null ? void 0 : _a.$el;
  const boundingClientRect = orientationElement.getBoundingClientRect();
  const windowHeight = window.innerHeight || document.documentElement.clientHeight;
  const windowWidth = window.innerWidth || document.documentElement.clientWidth;
  const visibleEdges = {
    topSpace: boundingClientRect.top,
    rightSpace: windowWidth - boundingClientRect.right,
    bottomSpace: windowHeight - boundingClientRect.bottom,
    leftSpace: boundingClientRect.left
  };
  el.classList.remove(...Object.values(outsideClasses));
  const placementClasses = [
    visibleEdges.bottomSpace < visibleEdges.topSpace ? outsideClasses.bottom : outsideClasses.top,
    visibleEdges.rightSpace > visibleEdges.leftSpace ? outsideClasses.left : outsideClasses.right
  ];
  el.classList.add(...placementClasses);
}
function setElementPosition(element, refElement, config) {
  const originElement = refElement ? refElement : element;
  const elementPosition = originElement.getBoundingClientRect();
  let targetElement = originElement;
  let targetPosition = {
    top: 0,
    left: 0
  };
  if (config.targetSelector && config.targetSelector.length > 0) {
    targetElement = originElement.closest(config.targetSelector);
    targetPosition = targetElement.getBoundingClientRect();
  }
  Object.entries(config.style).forEach(([key, value]) => {
    if (customStylingBlacklist.includes(key)) {
      return;
    }
    element.style[key] = value;
  });
  element.style.position = "fixed";
  element.style.top = `${elementPosition.top - targetPosition.top + originElement.clientHeight}px`;
  element.style.left = `${elementPosition.left - targetPosition.left}px`;
}
function startVirtualScrolling() {
  window.addEventListener("scroll", virtualScrollingHandler, true);
  window.addEventListener("resize", virtualScrollingHandler, true);
}
function stopVirtualScrolling() {
  window.removeEventListener("scroll", virtualScrollingHandler, true);
  window.removeEventListener("resize", virtualScrollingHandler, true);
}
function virtualScrollingHandler() {
  if (virtualScrollingElements.size <= 0) {
    stopVirtualScrolling();
    return;
  }
  virtualScrollingElements.forEach((entry) => {
    setElementPosition(entry.el, entry.ref, entry.config);
    if (entry.config.resizeWidth) {
      entry.el.style.width = `${entry.ref.clientWidth}px`;
    }
  });
}
function registerVirtualScrollingElement(modifiedElement, vnodeContext, config) {
  var _a;
  const uid = (_a = vnodeContext == null ? void 0 : vnodeContext._) == null ? void 0 : _a.uid;
  if (!uid) {
    return;
  }
  if (virtualScrollingElements.size <= 0) {
    startVirtualScrolling();
  }
  virtualScrollingElements.set(uid, {
    el: modifiedElement,
    // @ts-expect-error - $el exists on the context but is private
    ref: vnodeContext.$el,
    config
  });
}
function unregisterVirtualScrollingElement(uid) {
  if (!uid) {
    return;
  }
  virtualScrollingElements.delete(uid);
  if (virtualScrollingElements.size <= 0) {
    stopVirtualScrolling();
  }
}
const PopoverDirective = {
  mounted(element, binding) {
    var _a, _b;
    if (!binding.value) {
      return false;
    }
    const config = { ...defaultConfig, ...binding.value };
    if (!config.active) {
      return false;
    }
    let targetElement = document.body;
    if (config.targetSelector && config.targetSelector.length > 0) {
      targetElement = element.closest(config.targetSelector);
    }
    targetElement.appendChild(element);
    setElementPosition(element, (_a = binding.instance) == null ? void 0 : _a.$el, config);
    if (config.resizeWidth) {
      element.style.width = `${(_b = binding.instance) == null ? void 0 : _b.$el.clientWidth}px`;
    }
    calculateOutsideEdges(element, binding.instance);
    registerVirtualScrollingElement(element, binding.instance, config);
  },
  unmounted(element, binding, vnode) {
    var _a;
    if (element.parentNode) {
      element.parentNode.removeChild(element);
    }
    unregisterVirtualScrollingElement((_a = vnode.context) == null ? void 0 : _a._uid);
  }
};
const MtPopoverDirective = PopoverDirective;
const _sfc_main = defineComponent({
  name: "MtPopoverDeprecated",
  directives: {
    popover: MtPopoverDirective
  },
  props: {
    zIndex: {
      type: [Number, null],
      required: false,
      default: null
    },
    resizeWidth: {
      type: Boolean,
      required: false,
      default: false
    },
    popoverClass: {
      type: [String, Array, Object],
      required: false,
      default: ""
    }
  },
  computed: {
    componentStyle() {
      return {
        "z-Index": this.zIndex
      };
    },
    popoverConfig() {
      return {
        active: true,
        resizeWidth: this.resizeWidth
      };
    }
  }
});
const mtPopoverDeprecated_vue_vue_type_style_index_0_lang = "";
const _hoisted_1 = { class: "mt-popover-deprecated" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _directive_popover = resolveDirective("popover");
  return openBlock(), createElementBlock("div", _hoisted_1, [
    withDirectives((openBlock(), createElementBlock("div", {
      class: normalizeClass(["mt-popover-deprecated__wrapper", _ctx.popoverClass]),
      style: normalizeStyle(_ctx.componentStyle)
    }, [
      renderSlot(_ctx.$slots, "default")
    ], 6)), [
      [_directive_popover, _ctx.popoverConfig]
    ])
  ]);
}
const MtPopoverDeprecated = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  MtPopoverDeprecated as default
};
//# sourceMappingURL=MtPopoverDeprecated.js.map