import { DtIconLayoutGrid as h, DtIconArrowRight as p, DtIconArrowLeft as m, DtIconArrowUp as _, DtIconArrowDown as y, DtIconCommand as f, DtIconPlus as u } from "@dialpad/dialtone-icons/vue3";
import { openBlock as t, createElementBlock as n, normalizeClass as s, toDisplayString as S, createCommentVNode as k, Fragment as l, renderList as g, createBlock as w, resolveDynamicComponent as D } from "vue";
import { _ as b } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
const d = {
  "{win}": h,
  "{arrow-right}": p,
  "{arrow-left}": m,
  "{arrow-up}": _,
  "{arrow-down}": y,
  "{cmd}": f
}, x = {
  compatConfig: { MODE: 3 },
  name: "DtKeyboardShortcut",
  components: {
    DtIconLayoutGrid: h,
    DtIconArrowRight: p,
    DtIconArrowLeft: m,
    DtIconArrowUp: _,
    DtIconArrowDown: y,
    DtIconCommand: f,
    DtIconPlus: u
  },
  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 {
        ...d,
        "{plus}": u
      };
    },
    shortcutWithSeparator() {
      return this.shortcut.replace(this.separator, "{plus}");
    },
    formattedShortcut() {
      return Object.keys(d).reduce((c, e) => c.replace(new RegExp("{" + e + "}", "gi"), d[e]), this.shortcutWithSeparator);
    },
    // Splits any icon based aliases into their own array items.
    formattedShortcutSplit() {
      const c = Object.keys(this.icons).join("|"), e = new RegExp(`(${c})`, "gi");
      return this.formattedShortcut.split(e).filter(Boolean);
    }
  }
}, I = {
  key: 0,
  class: "d-keyboard-shortcut--sr-only"
}, v = ["innerHTML"];
function A(c, e, r, C, R, a) {
  return t(), n("kbd", {
    class: s([
      "d-keyboard-shortcut",
      { "d-keyboard-shortcut--inverted": r.inverted }
    ])
  }, [
    r.screenReaderText ? (t(), n("span", I, S(r.screenReaderText), 1)) : k("", !0),
    (t(!0), n(l, null, g(a.formattedShortcutSplit, (o, i) => (t(), n(l, null, [
      a.icons[o] ? (t(), w(D(a.icons[o]), {
        key: `${i}-${o}`,
        size: "100",
        "aria-hidden": "true",
        class: s([
          "d-keyboard-shortcut__icon",
          { "d-keyboard-shortcut__icon--inverted": r.inverted }
        ])
      }, null, 8, ["class"])) : (t(), n("span", {
        key: `${i}-${o}`,
        "aria-hidden": "true",
        class: s([
          "d-keyboard-shortcut__item",
          { "d-keyboard-shortcut__item--inverted": r.inverted }
        ]),
        innerHTML: o
      }, null, 10, v))
    ], 64))), 256))
  ], 2);
}
const E = /* @__PURE__ */ b(x, [["render", A]]);
export {
  E as default
};
//# sourceMappingURL=keyboard-shortcut.js.map
