@dialpad/dialtone-vue/dist/lib/message-input/message-input-link.js

Vue component library for Dialpad's design system Dialtone

import { DtIconLink2 as o } from "@dialpad/dialtone-icons/vue2";
import a from "./message-input-button.js";
import { DialtoneLocalization as r } from "../../localization/index.js";
import { n as l } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import s from "../stack/stack.js";
import u from "../button/button.js";
import p from "../input/input.js";
import c from "../popover/popover.js";
const k = {
  name: "MessageInputLink",
  components: {
    DtPopover: c,
    DtInput: p,
    DtButton: u,
    DtStack: s,
    DtIconLink2: o,
    DtRecipeMessageInputButton: a
  },
  props: {
    open: {
      type: Boolean,
      default: !1
    },
    linkButtonOptions: {
      type: Object,
      required: !0
    },
    isSelectionActive: {
      type: Function,
      default: () => {
      }
    }
  },
  emits: ["set-link", "remove-link", "opened"],
  data() {
    return {
      linkText: "",
      linkInput: "",
      isOpen: !1,
      i18n: new r()
    };
  },
  computed: {
    anchorButtonLabel() {
      return this.i18n.$ta("DIALTONE_MESSAGE_INPUT_LINK_BUTTON_LABEL");
    },
    textInputLabel() {
      return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_TEXT_LABEL");
    },
    linkInputLabel() {
      return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_LINK_LABEL");
    },
    linkInputPlaceHolder() {
      return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_LINK_PLACEHOLDER");
    },
    removeButtonLabel() {
      return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_REMOVE_LABEL");
    },
    cancelButtonLabel() {
      return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_CANCEL_LABEL");
    },
    confirmButtonLabel() {
      return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_CONFIRM_LABEL");
    }
  },
  watch: {
    open: {
      immediate: !0,
      handler(i) {
        this.isOpen = i;
      }
    }
  },
  methods: {
    setInitialValues(i, t) {
      this.linkText = i, this.linkInput = t;
    }
  }
};
var _ = function() {
  var t = this, e = t._self._c;
  return e("dt-popover", { attrs: { open: t.isOpen, placement: "bottom-start", "content-class": "d-recipe-message-input__link-popover", "data-qa": "dt-message-input-link-popover", "show-close-button": !1 }, on: { opened: function(n) {
    return t.$emit("opened", n);
  } }, scopedSlots: t._u([{ key: "anchor", fn: function() {
    return [e("dt-recipe-message-input-button", { attrs: { "aria-label": t.anchorButtonLabel["aria-label"], "tooltip-text": t.anchorButtonLabel["tooltip-text"], "keyboard-shortcut-text": t.linkButtonOptions.keyboardShortcutText, "data-qa": "message-input-link-btn", "is-active": t.isSelectionActive("link") }, on: { click: function(n) {
      t.isOpen = !0;
    } }, scopedSlots: t._u([{ key: "icon", fn: function() {
      return [e("dt-icon-link2", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { size: "200" } })];
    }, proxy: !0 }]) })];
  }, proxy: !0 }, { key: "content", fn: function() {
    return [e("dt-stack", { attrs: { gap: "500" } }, [e("div", { staticClass: "d-recipe-message-input__link-dialog-title" }, [t._v(" " + t._s(t.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_DIALOG_TITLE")) + " ")]), e("dt-input", { attrs: { "input-aria-label": t.textInputLabel, size: "xs", "data-qa": "dt-message-input-link-text-input", label: t.textInputLabel, "input-wrapper-class": "d-recipe-message-input__link-input" }, on: { click: function(n) {
      n.stopPropagation();
    }, focus: function(n) {
      n.stopPropagation();
    }, keydown: function(n) {
      return !n.type.indexOf("key") && t._k(n.keyCode, "enter", 13, n.key, "Enter") ? null : t.$emit("set-link", t.linkText, t.linkInput);
    } }, nativeOn: { click: function(n) {
      n.stopPropagation();
    } }, model: { value: t.linkText, callback: function(n) {
      t.linkText = n;
    }, expression: "linkText" } }), e("dt-input", { attrs: { "input-aria-label": t.linkInputLabel, size: "xs", "data-qa": "dt-message-input-link-input", placeholder: t.linkInputPlaceHolder, label: t.linkInputLabel, "input-wrapper-class": "d-recipe-message-input__link-input" }, on: { click: function(n) {
      n.stopPropagation();
    }, focus: function(n) {
      n.stopPropagation();
    }, keydown: function(n) {
      return !n.type.indexOf("key") && t._k(n.keyCode, "enter", 13, n.key, "Enter") ? null : t.$emit("set-link", t.linkText, t.linkInput);
    } }, nativeOn: { click: function(n) {
      n.stopPropagation();
    } }, model: { value: t.linkInput, callback: function(n) {
      t.linkInput = n;
    }, expression: "linkInput" } }), e("dt-stack", { staticClass: "d-recipe-message-input__link-dialog-buttons", attrs: { direction: "row" } }, [e("dt-button", { attrs: { "aria-label": t.removeButtonLabel, title: t.removeButtonLabel, importance: "clear", kind: "danger", size: "md", "data-qa": "dt-message-input-link-remove-btn" }, on: { click: function(n) {
      return t.$emit("remove-link", t.linkText, t.linkInput);
    } } }, [t._v(" " + t._s(t.removeButtonLabel) + " ")]), e("dt-stack", { attrs: { direction: "row", gap: "400" } }, [e("dt-button", { attrs: { "aria-label": t.cancelButtonLabel, title: t.cancelButtonLabel, importance: "clear", kind: "muted", size: "md", "data-qa": "dt-message-input-link-cancel-btn" }, on: { click: function(n) {
      t.isOpen = !1;
    } } }, [t._v(" " + t._s(t.cancelButtonLabel) + " ")]), e("dt-button", { attrs: { size: "md", "aria-label": t.confirmButtonLabel, title: t.confirmButtonLabel, "data-qa": "dt-message-input-link-confirm-btn" }, on: { click: function(n) {
      return t.$emit("set-link", t.linkText, t.linkInput);
    } } }, [t._v(" " + t._s(t.confirmButtonLabel) + " ")])], 1)], 1)], 1)];
  }, proxy: !0 }]) });
}, d = [], m = /* @__PURE__ */ l(
  k,
  _,
  d
);
const v = m.exports;
export {
  v as default
};
//# sourceMappingURL=message-input-link.js.map