@dialpad/dialtone/dist/vue3/lib/notice/notice-action.js

Dialpad's Dialtone design system monorepo

import { DtIconClose as r } from "@dialpad/dialtone-icons/vue3";
import m from "../../shared/sr_only_close_button.js";
import { DialtoneLocalization as d } from "../../localization/index.js";
import { resolveComponent as o, createElementBlock as u, openBlock as n, renderSlot as _, createCommentVNode as f, createBlock as l, withCtx as p, createVNode as h } from "vue";
import { _ as C } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import B from "../button/button.js";
const b = {
  compatConfig: { MODE: 3 },
  name: "DtNoticeAction",
  components: {
    DtIconClose: r,
    DtButton: B,
    SrOnlyCloseButton: m
  },
  props: {
    /**
     * Hides the close button from the notice
     * @values true, false
     */
    hideClose: {
      type: Boolean,
      default: !1
    },
    /**
     * Hides the action from the notice
     * @values true, false
     */
    hideAction: {
      type: Boolean,
      default: !1
    }
  },
  emits: [
    /**
     * Close button click event
     *
     * @event close
     */
    "close"
  ],
  data() {
    return {
      i18n: new d()
    };
  },
  computed: {
    closeButtonTitle() {
      return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
    }
  },
  mounted() {
    this.hideClose || (this.lastFocusedElement = document.activeElement);
  },
  beforeUnmount() {
    var t;
    (t = this.lastFocusedElement) == null || t.focus();
  },
  methods: {
    close() {
      this.$emit("close");
    }
  }
}, k = {
  class: "d-notice__actions",
  "data-qa": "notice-content-actions"
};
function y(t, D, c, E, N, e) {
  const s = o("dt-icon-close"), i = o("dt-button"), a = o("sr-only-close-button");
  return n(), u("div", k, [
    c.hideAction ? f("", !0) : _(t.$slots, "default", { key: 0 }),
    c.hideClose ? (n(), l(a, {
      key: 2,
      onClose: e.close
    }, null, 8, ["onClose"])) : (n(), l(i, {
      key: 1,
      ref: "closeButton",
      circle: !0,
      "data-qa": "dt-notice-action-close-button",
      importance: "clear",
      size: "sm",
      "aria-label": e.closeButtonTitle,
      title: e.closeButtonTitle,
      onClick: e.close
    }, {
      icon: p(() => [
        h(s, { size: "200" })
      ]),
      _: 1
    }, 8, ["aria-label", "title", "onClick"]))
  ]);
}
const L = /* @__PURE__ */ C(b, [["render", y]]);
export {
  L as default
};
//# sourceMappingURL=notice-action.js.map