import { DtIconPlus as u, DtIconOption as h, DtIconCommand as w, DtIconArrowDown as _, DtIconArrowUp as f, DtIconArrowLeft as S, DtIconArrowRight as g, DtIconLayoutGrid as y } from "@dialpad/dialtone-icons/vue3";
import { createElementBlock as c, openBlock as n, normalizeClass as s, createElementVNode as D, toDisplayString as I, Fragment as l, renderList as A, createBlock as k, createCommentVNode as b, resolveDynamicComponent as C } from "vue";
import { _ as T } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
const i = {
  "{win}": y,
  "{arrow-right}": g,
  "{arrow-left}": S,
  "{arrow-up}": f,
  "{arrow-down}": _,
  "{cmd}": w,
  "{opt}": h
}, p = {
  "{cmd}": "Command",
  "{opt}": "Option",
  "{win}": "Windows",
  "{arrow-right}": "Right Arrow",
  "{arrow-left}": "Left Arrow",
  "{arrow-up}": "Up Arrow",
  "{arrow-down}": "Down Arrow",
  "{plus}": "plus"
}, m = {
  ctrl: "Control",
  alt: "Alt",
  esc: "Escape",
  del: "Delete",
  ins: "Insert",
  pgup: "Page Up",
  pgdn: "Page Down",
  num: "Number",
  caps: "Caps Lock"
}, x = {
  compatConfig: { MODE: 3 },
  name: "DtKeyboardShortcut",
  components: {
    DtIconLayoutGrid: y,
    DtIconArrowRight: g,
    DtIconArrowLeft: S,
    DtIconArrowUp: f,
    DtIconArrowDown: _,
    DtIconCommand: w,
    DtIconOption: h,
    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} {opt} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}
     */
    shortcut: {
      type: String,
      required: !0
    },
    /**
     * Optional text to override the auto-generated accessible text for assistive technology.
     * If not provided, accessible text will be automatically generated from the shortcut.
     */
    screenReaderText: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      separator: /\+/gi
    };
  },
  computed: {
    icons() {
      return {
        ...i,
        "{plus}": u
      };
    },
    shortcutWithSeparator() {
      return this.shortcut.replace(this.separator, "{plus}");
    },
    formattedShortcut() {
      return Object.keys(i).reduce((r, t) => r.replace(new RegExp("{" + t + "}", "gi"), i[t]), this.shortcutWithSeparator);
    },
    // Splits any icon based aliases into their own array items.
    formattedShortcutSplit() {
      const r = Object.keys(this.icons).join("|"), t = new RegExp(`(${r})`, "gi");
      return this.formattedShortcut.split(t).filter(Boolean);
    },
    // Generates accessible text for the keyboard shortcut
    generatedScreenReaderText() {
      return this.formattedShortcutSplit.map((r) => {
        const t = r.trim();
        if (p[t])
          return p[t];
        const e = t.toLowerCase();
        return m[e] ? m[e] : t;
      }).filter((r) => r).join(" ");
    }
  }
}, E = { class: "d-keyboard-shortcut--sr-only" }, L = ["innerHTML"];
function O(r, t, e, R, v, a) {
  return n(), c("kbd", {
    class: s([
      "d-keyboard-shortcut",
      { "d-keyboard-shortcut--inverted": e.inverted }
    ])
  }, [
    D("span", E, I(e.screenReaderText || a.generatedScreenReaderText), 1),
    (n(!0), c(l, null, A(a.formattedShortcutSplit, (o, d) => (n(), c(l, null, [
      a.icons[o] ? (n(), k(C(a.icons[o]), {
        key: `icon-${d}-${o}`,
        size: "100",
        "aria-hidden": "true",
        class: s([
          "d-keyboard-shortcut__icon",
          { "d-keyboard-shortcut__icon--inverted": e.inverted }
        ])
      }, null, 8, ["class"])) : o.trim() ? (n(), c("span", {
        key: `text-${d}-${o}`,
        "aria-hidden": "true",
        class: s([
          "d-keyboard-shortcut__item",
          { "d-keyboard-shortcut__item--inverted": e.inverted }
        ]),
        innerHTML: o
      }, null, 10, L)) : b("", !0)
    ], 64))), 256))
  ], 2);
}
const U = /* @__PURE__ */ T(x, [["render", O]]);
export {
  U as default
};
//# sourceMappingURL=keyboard-shortcut.js.map
