import { DtIconClose as _ } from "@dialpad/dialtone-icons/vue3";
import { returnFirstEl as u, hasSlotContent as f } from "../../common/utils/index.js";
import { DialtoneLocalization as m } from "../../localization/index.js";
import { resolveComponent as l, createElementBlock as s, openBlock as n, normalizeClass as r, createCommentVNode as c, createBlock as v, renderSlot as h, withCtx as C, createVNode as y } from "vue";
import { _ as B } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import b from "../button/button.js";
const k = {
  compatConfig: { MODE: 3 },
  name: "PopoverHeaderFooter",
  components: {
    DtButton: b,
    DtIconClose: _
  },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    type: {
      type: String,
      validator: function(e) {
        return ["header", "footer"].includes(e);
      }
    },
    /**
     * Additional class name for the content wrapper element.
     */
    contentClass: {
      type: [String, Array, Object],
      default: ""
    },
    /**
     * Determines visibility for close button
     * @values true, false
     */
    showCloseButton: {
      type: Boolean,
      default: !1
    }
  },
  emits: [
    /**
     * Emitted when popover is closed
     *
     * @event close
     * @type { Boolean }
     */
    "close"
  ],
  data() {
    return {
      hasSlotContent: f,
      i18n: new m()
    };
  },
  computed: {
    closeButtonTitle() {
      return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
    }
  },
  methods: {
    focusCloseButton() {
      var o;
      const e = u((o = this.$refs["popover__close-button"]) == null ? void 0 : o.$el);
      e == null || e.focus();
    }
  }
};
function S(e, o, t, T, d, a) {
  const i = l("dt-icon-close"), p = l("dt-button");
  return n(), s("div", {
    "data-qa": "dt-popover-header-footer",
    class: r({
      "d-popover__header": t.type === "header",
      "d-popover__footer": t.type === "footer"
    })
  }, [
    d.hasSlotContent(e.$slots.content) ? (n(), s("div", {
      key: 0,
      "data-qa": "dt-popover-header-footer-content",
      class: r([{
        "d-popover__header__content": t.type === "header",
        "d-popover__footer__content": t.type === "footer"
      }, t.contentClass])
    }, [
      h(e.$slots, "content")
    ], 2)) : c("", !0),
    t.showCloseButton ? (n(), v(p, {
      key: 1,
      ref: "popover__close-button",
      "data-qa": "dt-popover-close",
      class: r({
        "d-popover__header__close-button": t.type === "header",
        "d-popover__footer__close-button": t.type === "footer"
      }),
      importance: "outlined",
      kind: "muted",
      circle: "",
      "aria-label": a.closeButtonTitle,
      title: a.closeButtonTitle,
      onClick: o[0] || (o[0] = (D) => e.$emit("close"))
    }, {
      icon: C(() => [
        y(i, { size: "300" })
      ]),
      _: 1
    }, 8, ["class", "aria-label", "title"])) : c("", !0)
  ], 2);
}
const z = /* @__PURE__ */ B(k, [["render", S]]);
export {
  z as default
};
//# sourceMappingURL=popover-header-footer.js.map
