import { DtIconLayoutGrid as c, DtIconArrowRight as d, DtIconArrowLeft as i, DtIconArrowUp as u, DtIconArrowDown as p, DtIconCommand as h, DtIconPlus as a } from "@dialpad/dialtone-icons/vue2";
import { n as _ } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
const n = {
  "{win}": c,
  "{arrow-right}": d,
  "{arrow-left}": i,
  "{arrow-up}": u,
  "{arrow-down}": p,
  "{cmd}": h
}, l = {
  name: "DtKeyboardShortcut",
  components: {
    DtIconLayoutGrid: c,
    DtIconArrowRight: d,
    DtIconArrowLeft: i,
    DtIconArrowUp: u,
    DtIconArrowDown: p,
    DtIconCommand: h,
    DtIconPlus: a
  },
  props: {
    /**
     * If true, applies inverted styles.
     * @values true, false
     */
    inverted: {
      type: Boolean,
      default: !1
    },
    /**
     * Include any of these tokens in your string to render the corresponding symbol:
     * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}
     */
    shortcut: {
      type: String,
      required: !0
    },
    /**
     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.
     */
    screenReaderText: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      separator: /\+/gi
    };
  },
  computed: {
    icons() {
      return {
        ...n,
        "{plus}": a
      };
    },
    shortcutWithSeparator() {
      return this.shortcut.replace(this.separator, "{plus}");
    },
    formattedShortcut() {
      return Object.keys(n).reduce((e, t) => e.replace(new RegExp("{" + t + "}", "gi"), n[t]), this.shortcutWithSeparator);
    },
    // Splits any icon based aliases into their own array items.
    formattedShortcutSplit() {
      const e = Object.keys(this.icons).join("|"), t = new RegExp(`(${e})`, "gi");
      return this.formattedShortcut.split(t).filter(Boolean);
    }
  }
};
var f = function() {
  var t = this, o = t._self._c;
  return o("kbd", { class: [
    "d-keyboard-shortcut",
    { "d-keyboard-shortcut--inverted": t.inverted }
  ] }, [t.screenReaderText ? o("span", { staticClass: "d-keyboard-shortcut--sr-only" }, [t._v(" " + t._s(t.screenReaderText) + " ")]) : t._e(), t._l(t.formattedShortcutSplit, function(r, s) {
    return [t.icons[r] ? o(t.icons[r], { key: `${s}-${r}`, tag: "component", class: [
      "d-keyboard-shortcut__icon",
      { "d-keyboard-shortcut__icon--inverted": t.inverted }
    ], attrs: { size: "100", "aria-hidden": "true" } }) : o("span", { key: `${s}-${r}`, class: [
      "d-keyboard-shortcut__item",
      { "d-keyboard-shortcut__item--inverted": t.inverted }
    ], attrs: { "aria-hidden": "true" }, domProps: { innerHTML: t._s(r) } })];
  })], 2);
}, m = [], y = /* @__PURE__ */ _(
  l,
  f,
  m
);
const w = y.exports;
export {
  w as default
};
//# sourceMappingURL=keyboard-shortcut.js.map
