(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(".pl-dialog-modal{--padding-top: 24px;--border-radius: 16px;--title-padding: 24px 24px 0 24px;min-height:400px;max-height:calc(100vh - 48px);max-width:calc(100% - 48px);min-width:448px;position:absolute;top:50%;left:50%;transform:translateY(-50%) translate(-50%);background-color:#fff;padding-top:var(--padding-top);display:flex;flex-direction:column;box-shadow:0 2px 8px #24223d1f;border-radius:var(--border-radius)}.pl-dialog-modal.has-title{--padding-top: 0}.pl-dialog-modal.has-content{--title-padding: 24px}.pl-dialog-modal__title{display:flex;align-items:center;font-family:var(--font-family-base);font-size:28px;font-style:normal;font-weight:500;line-height:32px;letter-spacing:-.56px;padding:var(--title-padding)}.pl-dialog-modal__content{flex:1;display:flex;flex-direction:column;gap:24px;padding:16px 24px 40px;min-height:0;line-height:20px;--thumb-color: var(--ic-02);overflow-y:auto}.pl-dialog-modal__content::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-dialog-modal__content::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-dialog-modal__content::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-dialog-modal__content.no-content-gutters{padding:0}.pl-dialog-modal__content.no-top-content-gutter{padding-top:0}.pl-dialog-modal__actions{display:flex;align-items:center;gap:6px;min-height:88px;padding:0 24px}.pl-dialog-modal__actions button{min-width:160px}.pl-dialog-modal__actions.has-top-border{border-top:1px solid var(--border-color-div-grey)}.pl-dialog-modal .alert-error{background-color:var(--txt-error);color:#fff;font-weight:500;padding:12px;border-radius:6px}.pl-dialog-modal .alert-warning{background-color:#fee0a3;font-weight:500;padding:12px;border-radius:6px}.pl-dialog-modal__shadow{position:absolute;z-index:var(--z-dialog);top:var(--title-bar-height);left:0;right:0;bottom:0;background-color:#000000a3}.pl-dialog-modal .close-modal-btn{position:absolute;top:4px;right:4px}")),document.head.appendChild(o)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
import { defineComponent as B, useSlots as H, ref as x, computed as v, createBlock as p, openBlock as o, Teleport as V, createVNode as w, Transition as b, withCtx as T, createElementBlock as r, createCommentVNode as i, createElementVNode as f, mergeProps as _, withModifiers as $, renderSlot as m, normalizeClass as h } from "vue";
import { useEventListener as E } from "../../composition/useEventListener.js";

import G from "../../utils/PlCloseModalBtn.vue.js";
const O = {
  key: 1,
  class: "pl-dialog-modal__title"
}, z = {
  inheritAttrs: !1
}, A = /* @__PURE__ */ B({
  ...z,
  __name: "PlDialogModal",
  props: {
    modelValue: { type: Boolean },
    width: { default: "448px" },
    height: { default: "auto" },
    minHeight: { default: "auto" },
    maxHeight: { default: "auto" },
    closable: { type: Boolean, default: !0 },
    noContentGutters: { type: Boolean, default: !1 },
    noTopContentGutter: { type: Boolean },
    actionsHasTopBorder: { type: Boolean, default: !0 },
    closeOnOutsideClick: { type: Boolean },
    size: { default: void 0 }
  },
  emits: ["update:modelValue"],
  setup(t, { emit: g }) {
    const a = H(), n = g, s = t, d = x(), y = v(() => {
      const { width: e, height: l, minHeight: c, maxHeight: C, size: u } = s;
      return u === "small" ? {
        width: "448px",
        height: "440px",
        minHeight: "auto",
        maxHeight: "auto"
      } : u === "medium" ? {
        width: "720px",
        height: "720px",
        minHeight: "auto",
        maxHeight: "auto"
      } : u === "large" ? {
        width: "1080px",
        height: "880px",
        minHeight: "auto",
        maxHeight: "auto"
      } : { width: e, height: l, minHeight: c, maxHeight: C };
    });
    function k(e) {
      d.value && s.closeOnOutsideClick && document.contains(e.target) && !d.value.contains(e.target) && n("update:modelValue", !1);
    }
    return E(document.body, "keyup", (e) => {
      s.modelValue && e.code === "Escape" && n("update:modelValue", !1);
    }), (e, l) => (o(), p(V, { to: "body" }, [
      w(b, { name: "dialog" }, {
        default: T(() => [
          t.modelValue ? (o(), r("div", {
            key: 0,
            class: "pl-dialog-modal__shadow",
            onClick: k
          }, [
            f("div", _(e.$attrs, {
              ref_key: "modal",
              ref: d,
              class: ["pl-dialog-modal", { "has-title": a.title, "has-content": a.default }],
              style: y.value
            }), [
              t.closable ? (o(), p(G, {
                key: 0,
                class: "close-modal-btn",
                onClick: l[0] || (l[0] = $((c) => n("update:modelValue", !1), ["stop"]))
              })) : i("", !0),
              a.title ? (o(), r("div", O, [
                m(e.$slots, "title")
              ])) : i("", !0),
              f("div", {
                class: h(["pl-dialog-modal__content", { "no-content-gutters": t.noContentGutters, "no-top-content-gutter": t.noTopContentGutter }])
              }, [
                m(e.$slots, "default")
              ], 2),
              a.actions ? (o(), r("div", {
                key: 2,
                class: h(["pl-dialog-modal__actions", { "has-top-border": t.actionsHasTopBorder }])
              }, [
                m(e.$slots, "actions")
              ], 2)) : i("", !0)
            ], 16)
          ])) : i("", !0)
        ]),
        _: 3
      })
    ]));
  }
});
export {
  A as default
};
//# sourceMappingURL=PlDialogModal.vue.js.map
