@dialpad/dialtone/dist/vue3/lib/keyboard-shortcut/keyboard-shortcut.cjs.map

Dialpad's Dialtone design system monorepo

{"version":3,"file":"keyboard-shortcut.cjs","names":[],"sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span class=\"d-keyboard-shortcut--sr-only\">\n      {{ screenReaderText || generatedScreenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <component\n        :is=\"icons[item]\"\n        v-if=\"icons[item]\"\n        :key=\"`icon-${i}-${item}`\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <span\n        v-else-if=\"item.trim()\"\n        :key=\"`text-${i}-${item}`\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n        v-html=\"item\"\n      />\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport {\n  DtIconLayoutGrid,\n  DtIconArrowRight,\n  DtIconArrowLeft,\n  DtIconArrowUp,\n  DtIconArrowDown,\n  DtIconCommand,\n  DtIconOption,\n  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue3';\n\nconst SHORTCUTS_ICON_ALIASES = {\n  '{win}': DtIconLayoutGrid,\n  '{arrow-right}': DtIconArrowRight,\n  '{arrow-left}': DtIconArrowLeft,\n  '{arrow-up}': DtIconArrowUp,\n  '{arrow-down}': DtIconArrowDown,\n  '{cmd}': DtIconCommand,\n  '{opt}': DtIconOption,\n};\n\n// Mapping of icon aliases to readable text for accessibility\nconst ICON_ALIAS_TO_TEXT = {\n  '{cmd}': 'Command',\n  '{opt}': 'Option',\n  '{win}': 'Windows',\n  '{arrow-right}': 'Right Arrow',\n  '{arrow-left}': 'Left Arrow',\n  '{arrow-up}': 'Up Arrow',\n  '{arrow-down}': 'Down Arrow',\n  '{plus}': 'plus',\n};\n\n// Mapping of common key abbreviations to full names for accessibility\nconst KEY_ABBREVIATIONS = {\n  'ctrl': 'Control',\n  'alt': 'Alt',\n  'esc': 'Escape',\n  'del': 'Delete',\n  'ins': 'Insert',\n  'pgup': 'Page Up',\n  'pgdn': 'Page Down',\n  'num': 'Number',\n  'caps': 'Caps Lock',\n};\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\n    DtIconOption,\n    DtIconPlus,\n  },\n\n  props: {\n    /**\n     * If true, applies inverted styles.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {opt} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Optional text to override the auto-generated accessible text for assistive technology.\n     * If not provided, accessible text will be automatically generated from the shortcut.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return {\n        ...SHORTCUTS_ICON_ALIASES,\n        '{plus}': DtIconPlus,\n      };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n\n    // Generates accessible text for the keyboard shortcut\n    generatedScreenReaderText () {\n      return this.formattedShortcutSplit\n        .map(item => {\n          const trimmedItem = item.trim();\n\n          // Convert icon aliases to readable text\n          if (ICON_ALIAS_TO_TEXT[trimmedItem]) {\n            return ICON_ALIAS_TO_TEXT[trimmedItem];\n          }\n\n          // Convert key abbreviations to full names (case-insensitive)\n          const lowerItem = trimmedItem.toLowerCase();\n          if (KEY_ABBREVIATIONS[lowerItem]) {\n            return KEY_ABBREVIATIONS[lowerItem];\n          }\n\n          // Return the key as-is if it's not an alias or abbreviation\n          return trimmedItem;\n        })\n        .filter(item => item) // Remove empty strings\n        .join(' ');\n    },\n  },\n};\n</script>\n"],"mappings":"kQAmDA,IAAM,EAAyB,CAC7B,QAAS,EAAA,iBACT,gBAAiB,EAAA,iBACjB,eAAgB,EAAA,gBAChB,aAAc,EAAA,cACd,eAAgB,EAAA,gBAChB,QAAS,EAAA,cACT,QAAS,EAAA,aACV,CAGK,EAAqB,CACzB,QAAS,UACT,QAAS,SACT,QAAS,UACT,gBAAiB,cACjB,eAAgB,aAChB,aAAc,WACd,eAAgB,aAChB,SAAU,OACX,CAGK,EAAoB,CACxB,KAAQ,UACR,IAAO,MACP,IAAO,SACP,IAAO,SACP,IAAO,SACP,KAAQ,UACR,KAAQ,YACR,IAAO,SACP,KAAQ,YACT,CAMI,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,qBAEN,WAAY,CACV,iBAAA,EAAA,iBACA,iBAAA,EAAA,iBACA,gBAAA,EAAA,gBACA,cAAA,EAAA,cACA,gBAAA,EAAA,gBACA,cAAA,EAAA,cACA,aAAA,EAAA,aACA,WAAA,EAAA,WACD,CAED,MAAO,CAKL,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,OACN,SAAU,GACX,CAMD,iBAAkB,CAChB,KAAM,OACN,QAAS,KACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,UAAW,OACZ,EAGH,SAAU,CACR,OAAS,CACP,MAAO,CACL,GAAG,EACH,SAAU,EAAA,WACX,EAGH,uBAAyB,CACvB,OAAO,KAAK,SAAS,QAAQ,KAAK,UAAW,SAAS,EAGxD,mBAAqB,CACnB,OAAO,OAAO,KAAK,EAAuB,CAAC,QAAQ,EAAQ,IAClD,EAAO,QAAY,OAAO,IAAM,EAAM,IAAK,KAAK,CAAE,EAAuB,GAAK,CACpF,KAAK,sBAAsB,EAIhC,wBAA0B,CACxB,IAAM,EAAkB,OAAO,KAAK,KAAK,MAAM,CAAC,KAAK,IAAI,CAOnD,EAAY,OAAO,IAAI,EAAgB,GAAI,KAAK,CACtD,OAAO,KAAK,kBAAkB,MAAM,EAAM,CAAC,OAAO,QAAQ,EAI5D,2BAA6B,CAC3B,OAAO,KAAK,uBACT,IAAI,GAAQ,CACX,IAAM,EAAc,EAAK,MAAM,CAG/B,GAAI,EAAmB,GACrB,OAAO,EAAmB,GAI5B,IAAM,EAAY,EAAY,aAAa,CAM3C,OALI,EAAkB,GACb,EAAkB,GAIpB,GACR,CACA,OAAO,GAAQ,EAAI,CACnB,KAAK,IAAI,EAEf,CACF,IA3LS,MAAM,+BAA8B,0FA4BtC,MAAA,CAjCH,OAAA,EAAA,EAAA,gBAAK,CAAA,sBAAA,CAAA,gCAA0E,EAAA,SAAQ,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,oBAOjF,OAFP,GAAA,EAAA,EAAA,iBACK,EAAA,kBAAoB,EAAA,0BAAyB,CAAA,EAAA,GAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,EAAA,oBA0BvC,EAAA,SAAA,MAAA,EAAA,EAAA,YAvBW,EAAA,wBAAZ,EAAM,iEAIN,EAAA,MAAM,KAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBADP,EAAA,MAAM,GAAI,CAAA,CAEd,IAAG,QAAU,EAAC,GAAI,IACnB,KAAK,MACL,cAAY,OACX,OAAA,EAAA,EAAA,gBAAK,CAAA,4BAAA,CAAA,sCAA8F,EAAA,SAAQ,CAAA,CAAA,qBAMjG,EAAK,MAAI,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAQpB,OAAA,CAPC,IAAG,QAAU,EAAC,GAAI,IACnB,cAAY,OACX,OAAA,EAAA,EAAA,gBAAK,CAAA,4BAAA,CAAA,sCAA8F,EAAA,SAAQ,CAAA,CAAA,CAI5G,UAAQ"}