@dialpad/dialtone 9.147.0 → 9.149.0

package/dist/vue2/lib/keyboard-shortcut/keyboard-shortcut-constants.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=["{win}","{arrow-right}","{arrow-left}","{arrow-up}","{arrow-down}","{cmd}"];exports.SHORTCUTS_ALIASES_LIST=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=["{win}","{arrow-right}","{arrow-left}","{arrow-up}","{arrow-down}","{cmd}","{opt}"];exports.SHORTCUTS_ALIASES_LIST=r;
 //# sourceMappingURL=keyboard-shortcut-constants.cjs.map

package/dist/vue2/lib/keyboard-shortcut/keyboard-shortcut-constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-shortcut-constants.cjs","sources":["../../../components/keyboard_shortcut/keyboard_shortcut_constants.js"],"sourcesContent":["export const SHORTCUTS_ALIASES_LIST = [\n  '{win}',\n  '{arrow-right}',\n  '{arrow-left}',\n  '{arrow-up}',\n  '{arrow-down}',\n  '{cmd}',\n];\n"],"names":["SHORTCUTS_ALIASES_LIST"],"mappings":"gFAAY,MAACA,EAAyB,CACpC,QACA,gBACA,eACA,aACA,eACA,OACF"}
+{"version":3,"file":"keyboard-shortcut-constants.cjs","sources":["../../../components/keyboard_shortcut/keyboard_shortcut_constants.js"],"sourcesContent":["export const SHORTCUTS_ALIASES_LIST = [\n  '{win}',\n  '{arrow-right}',\n  '{arrow-left}',\n  '{arrow-up}',\n  '{arrow-down}',\n  '{cmd}',\n  '{opt}',\n];\n"],"names":["SHORTCUTS_ALIASES_LIST"],"mappings":"gFAAY,MAACA,EAAyB,CACpC,QACA,gBACA,eACA,aACA,eACA,QACA,OACF"}

package/dist/vue2/lib/keyboard-shortcut/keyboard-shortcut-constants.js

@@ -4,7 +4,8 @@ const r = [
   "{arrow-left}",
   "{arrow-up}",
   "{arrow-down}",
-  "{cmd}"
+  "{cmd}",
+  "{opt}"
 ];
 export {
   r as SHORTCUTS_ALIASES_LIST

package/dist/vue2/lib/keyboard-shortcut/keyboard-shortcut-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-shortcut-constants.js","sources":["../../../components/keyboard_shortcut/keyboard_shortcut_constants.js"],"sourcesContent":["export const SHORTCUTS_ALIASES_LIST = [\n  '{win}',\n  '{arrow-right}',\n  '{arrow-left}',\n  '{arrow-up}',\n  '{arrow-down}',\n  '{cmd}',\n];\n"],"names":["SHORTCUTS_ALIASES_LIST"],"mappings":"AAAY,MAACA,IAAyB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}
+{"version":3,"file":"keyboard-shortcut-constants.js","sources":["../../../components/keyboard_shortcut/keyboard_shortcut_constants.js"],"sourcesContent":["export const SHORTCUTS_ALIASES_LIST = [\n  '{win}',\n  '{arrow-right}',\n  '{arrow-left}',\n  '{arrow-up}',\n  '{arrow-down}',\n  '{cmd}',\n  '{opt}',\n];\n"],"names":["SHORTCUTS_ALIASES_LIST"],"mappings":"AAAY,MAACA,IAAyB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}

package/dist/vue2/lib/keyboard-shortcut/keyboard-shortcut.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("@dialpad/dialtone-icons/vue2"),a=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),c={"{win}":r.DtIconLayoutGrid,"{arrow-right}":r.DtIconArrowRight,"{arrow-left}":r.DtIconArrowLeft,"{arrow-up}":r.DtIconArrowUp,"{arrow-down}":r.DtIconArrowDown,"{cmd}":r.DtIconCommand},i={name:"DtKeyboardShortcut",components:{DtIconLayoutGrid:r.DtIconLayoutGrid,DtIconArrowRight:r.DtIconArrowRight,DtIconArrowLeft:r.DtIconArrowLeft,DtIconArrowUp:r.DtIconArrowUp,DtIconArrowDown:r.DtIconArrowDown,DtIconCommand:r.DtIconCommand,DtIconPlus:r.DtIconPlus},props:{inverted:{type:Boolean,default:!1},shortcut:{type:String,required:!0},screenReaderText:{type:String,default:null}},data(){return{separator:/\+/gi}},computed:{icons(){return{...c,"{plus}":r.DtIconPlus}},shortcutWithSeparator(){return this.shortcut.replace(this.separator,"{plus}")},formattedShortcut(){return Object.keys(c).reduce((o,t)=>o.replace(new RegExp("{"+t+"}","gi"),c[t]),this.shortcutWithSeparator)},formattedShortcutSplit(){const o=Object.keys(this.icons).join("|"),t=new RegExp(`(${o})`,"gi");return this.formattedShortcut.split(t).filter(Boolean)}}};var d=function(){var t=this,n=t._self._c;return n("kbd",{class:["d-keyboard-shortcut",{"d-keyboard-shortcut--inverted":t.inverted}]},[t.screenReaderText?n("span",{staticClass:"d-keyboard-shortcut--sr-only"},[t._v(" "+t._s(t.screenReaderText)+" ")]):t._e(),t._l(t.formattedShortcutSplit,function(e,s){return[t.icons[e]?n(t.icons[e],{key:`${s}-${e}`,tag:"component",class:["d-keyboard-shortcut__icon",{"d-keyboard-shortcut__icon--inverted":t.inverted}],attrs:{size:"100","aria-hidden":"true"}}):n("span",{key:`${s}-${e}`,class:["d-keyboard-shortcut__item",{"d-keyboard-shortcut__item--inverted":t.inverted}],attrs:{"aria-hidden":"true"},domProps:{innerHTML:t._s(e)}})]})],2)},u=[],l=a.n(i,d,u);const _=l.exports;exports.default=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("@dialpad/dialtone-icons/vue2"),d=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),c={"{win}":r.DtIconLayoutGrid,"{arrow-right}":r.DtIconArrowRight,"{arrow-left}":r.DtIconArrowLeft,"{arrow-up}":r.DtIconArrowUp,"{arrow-down}":r.DtIconArrowDown,"{cmd}":r.DtIconCommand,"{opt}":r.DtIconOption},a={"{cmd}":"Command","{opt}":"Option","{win}":"Windows","{arrow-right}":"Right Arrow","{arrow-left}":"Left Arrow","{arrow-up}":"Up Arrow","{arrow-down}":"Down Arrow","{plus}":"plus"},i={ctrl:"Control",alt:"Alt",esc:"Escape",del:"Delete",ins:"Insert",pgup:"Page Up",pgdn:"Page Down",num:"Number",caps:"Caps Lock"},u={name:"DtKeyboardShortcut",components:{DtIconLayoutGrid:r.DtIconLayoutGrid,DtIconArrowRight:r.DtIconArrowRight,DtIconArrowLeft:r.DtIconArrowLeft,DtIconArrowUp:r.DtIconArrowUp,DtIconArrowDown:r.DtIconArrowDown,DtIconCommand:r.DtIconCommand,DtIconOption:r.DtIconOption,DtIconPlus:r.DtIconPlus},props:{inverted:{type:Boolean,default:!1},shortcut:{type:String,required:!0},screenReaderText:{type:String,default:null}},data(){return{separator:/\+/gi}},computed:{icons(){return{...c,"{plus}":r.DtIconPlus}},shortcutWithSeparator(){return this.shortcut.replace(this.separator,"{plus}")},formattedShortcut(){return Object.keys(c).reduce((e,t)=>e.replace(new RegExp("{"+t+"}","gi"),c[t]),this.shortcutWithSeparator)},formattedShortcutSplit(){const e=Object.keys(this.icons).join("|"),t=new RegExp(`(${e})`,"gi");return this.formattedShortcut.split(t).filter(Boolean)},generatedScreenReaderText(){return this.formattedShortcutSplit.map(e=>{const t=e.trim();if(a[t])return a[t];const o=t.toLowerCase();return i[o]?i[o]:t}).filter(e=>e).join(" ")}}};var p=function(){var t=this,o=t._self._c;return o("kbd",{class:["d-keyboard-shortcut",{"d-keyboard-shortcut--inverted":t.inverted}]},[o("span",{staticClass:"d-keyboard-shortcut--sr-only"},[t._v(" "+t._s(t.screenReaderText||t.generatedScreenReaderText)+" ")]),t._l(t.formattedShortcutSplit,function(n,s){return[t.icons[n]?o(t.icons[n],{key:`icon-${s}-${n}`,tag:"component",class:["d-keyboard-shortcut__icon",{"d-keyboard-shortcut__icon--inverted":t.inverted}],attrs:{size:"100","aria-hidden":"true"}}):n.trim()?o("span",{key:`text-${s}-${n}`,class:["d-keyboard-shortcut__item",{"d-keyboard-shortcut__item--inverted":t.inverted}],attrs:{"aria-hidden":"true"},domProps:{innerHTML:t._s(n)}}):t._e()]})],2)},l=[],w=d.n(u,p,l);const _=w.exports;exports.default=_;
 //# sourceMappingURL=keyboard-shortcut.cjs.map

package/dist/vue2/lib/keyboard-shortcut/keyboard-shortcut.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-shortcut.cjs","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\n      v-if=\"screenReaderText\"\n      class=\"d-keyboard-shortcut--sr-only\"\n    >\n      {{ screenReaderText }}\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=\"`${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\n        :key=\"`${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  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue2';\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};\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  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\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} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.\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};\n</script>\n"],"names":["SHORTCUTS_ICON_ALIASES","DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","_sfc_main","DtIconPlus","result","key","iconAliasString","regex"],"mappings":"oNAqDAA,EAAA,CACA,QAAAC,EAAAA,iBACA,gBAAAC,EAAAA,iBACA,eAAAC,EAAAA,gBACA,aAAAC,EAAAA,cACA,eAAAC,EAAAA,gBACA,QAAAC,EAAAA,aACA,EAMAC,EAAA,CACA,KAAA,qBAEA,WAAA,CACA,iBAAAN,EAAAA,iBACA,iBAAAC,EAAAA,iBACA,gBAAAC,EAAAA,gBACA,cAAAC,EAAAA,cACA,gBAAAC,EAAAA,gBACA,cAAAC,EAAAA,cACA,WAAAE,EAAAA,UACA,EAEA,MAAA,CAKA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,SAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,iBAAA,CACA,KAAA,OACA,QAAA,IACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,UAAA,MACA,CACA,EAEA,SAAA,CACA,OAAA,CACA,MAAA,CACA,GAAAR,EACA,SAAAQ,EAAAA,UACA,CACA,EAEA,uBAAA,CACA,OAAA,KAAA,SAAA,QAAA,KAAA,UAAA,QAAA,CACA,EAEA,mBAAA,CACA,OAAA,OAAA,KAAAR,CAAA,EAAA,OAAA,CAAAS,EAAAC,IACAD,EAAA,QAAA,IAAA,OAAA,IAAAC,EAAA,IAAA,IAAA,EAAAV,EAAAU,CAAA,CAAA,EACA,KAAA,qBAAA,CACA,EAGA,wBAAA,CACA,MAAAC,EAAA,OAAA,KAAA,KAAA,KAAA,EAAA,KAAA,GAAA,EAOAC,EAAA,IAAA,OAAA,IAAAD,CAAA,IAAA,IAAA,EACA,OAAA,KAAA,kBAAA,MAAAC,CAAA,EAAA,OAAA,OAAA,CACA,CACA,CACA"}
+{"version":3,"file":"keyboard-shortcut.cjs","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/vue2';\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  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"],"names":["SHORTCUTS_ICON_ALIASES","DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","DtIconOption","ICON_ALIAS_TO_TEXT","KEY_ABBREVIATIONS","_sfc_main","DtIconPlus","result","key","iconAliasString","regex","item","trimmedItem","lowerItem"],"mappings":"oNAmDAA,EAAA,CACA,QAAAC,EAAAA,iBACA,gBAAAC,EAAAA,iBACA,eAAAC,EAAAA,gBACA,aAAAC,EAAAA,cACA,eAAAC,EAAAA,gBACA,QAAAC,EAAAA,cACA,QAAAC,EAAAA,YACA,EAGAC,EAAA,CACA,QAAA,UACA,QAAA,SACA,QAAA,UACA,gBAAA,cACA,eAAA,aACA,aAAA,WACA,eAAA,aACA,SAAA,MACA,EAGAC,EAAA,CACA,KAAA,UACA,IAAA,MACA,IAAA,SACA,IAAA,SACA,IAAA,SACA,KAAA,UACA,KAAA,YACA,IAAA,SACA,KAAA,WACA,EAMAC,EAAA,CACA,KAAA,qBAEA,WAAA,CACA,iBAAAT,EAAAA,iBACA,iBAAAC,EAAAA,iBACA,gBAAAC,EAAAA,gBACA,cAAAC,EAAAA,cACA,gBAAAC,EAAAA,gBACA,cAAAC,EAAAA,cACA,aAAAC,EAAAA,aACA,WAAAI,EAAAA,UACA,EAEA,MAAA,CAKA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,SAAA,CACA,KAAA,OACA,SAAA,EACA,EAMA,iBAAA,CACA,KAAA,OACA,QAAA,IACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,UAAA,MACA,CACA,EAEA,SAAA,CACA,OAAA,CACA,MAAA,CACA,GAAAX,EACA,SAAAW,EAAAA,UACA,CACA,EAEA,uBAAA,CACA,OAAA,KAAA,SAAA,QAAA,KAAA,UAAA,QAAA,CACA,EAEA,mBAAA,CACA,OAAA,OAAA,KAAAX,CAAA,EAAA,OAAA,CAAAY,EAAAC,IACAD,EAAA,QAAA,IAAA,OAAA,IAAAC,EAAA,IAAA,IAAA,EAAAb,EAAAa,CAAA,CAAA,EACA,KAAA,qBAAA,CACA,EAGA,wBAAA,CACA,MAAAC,EAAA,OAAA,KAAA,KAAA,KAAA,EAAA,KAAA,GAAA,EAOAC,EAAA,IAAA,OAAA,IAAAD,CAAA,IAAA,IAAA,EACA,OAAA,KAAA,kBAAA,MAAAC,CAAA,EAAA,OAAA,OAAA,CACA,EAGA,2BAAA,CACA,OAAA,KAAA,uBACA,IAAAC,GAAA,CACA,MAAAC,EAAAD,EAAA,KAAA,EAGA,GAAAR,EAAAS,CAAA,EACA,OAAAT,EAAAS,CAAA,EAIA,MAAAC,EAAAD,EAAA,YAAA,EACA,OAAAR,EAAAS,CAAA,EACAT,EAAAS,CAAA,EAIAD,CACA,CAAA,EACA,OAAAD,GAAAA,CAAA,EACA,KAAA,GAAA,CACA,CACA,CACA"}

package/dist/vue2/lib/keyboard-shortcut/keyboard-shortcut.js

@@ -1,22 +1,43 @@
-import { DtIconPlus as a, DtIconCommand as c, DtIconArrowDown as d, DtIconArrowUp as i, DtIconArrowLeft as u, DtIconArrowRight as p, DtIconLayoutGrid as h } from "@dialpad/dialtone-icons/vue2";
-import { n as _ } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import { DtIconPlus as s, DtIconOption as d, DtIconCommand as u, DtIconArrowDown as p, DtIconArrowUp as l, DtIconArrowLeft as h, DtIconArrowRight as _, DtIconLayoutGrid as m } from "@dialpad/dialtone-icons/vue2";
+import { n as w } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
 const n = {
-  "{win}": h,
-  "{arrow-right}": p,
-  "{arrow-left}": u,
-  "{arrow-up}": i,
-  "{arrow-down}": d,
-  "{cmd}": c
-}, l = {
+  "{win}": m,
+  "{arrow-right}": _,
+  "{arrow-left}": h,
+  "{arrow-up}": l,
+  "{arrow-down}": p,
+  "{cmd}": u,
+  "{opt}": d
+}, c = {
+  "{cmd}": "Command",
+  "{opt}": "Option",
+  "{win}": "Windows",
+  "{arrow-right}": "Right Arrow",
+  "{arrow-left}": "Left Arrow",
+  "{arrow-up}": "Up Arrow",
+  "{arrow-down}": "Down Arrow",
+  "{plus}": "plus"
+}, i = {
+  ctrl: "Control",
+  alt: "Alt",
+  esc: "Escape",
+  del: "Delete",
+  ins: "Insert",
+  pgup: "Page Up",
+  pgdn: "Page Down",
+  num: "Number",
+  caps: "Caps Lock"
+}, f = {
   name: "DtKeyboardShortcut",
   components: {
-    DtIconLayoutGrid: h,
-    DtIconArrowRight: p,
-    DtIconArrowLeft: u,
-    DtIconArrowUp: i,
-    DtIconArrowDown: d,
-    DtIconCommand: c,
-    DtIconPlus: a
+    DtIconLayoutGrid: m,
+    DtIconArrowRight: _,
+    DtIconArrowLeft: h,
+    DtIconArrowUp: l,
+    DtIconArrowDown: p,
+    DtIconCommand: u,
+    DtIconOption: d,
+    DtIconPlus: s
   },
   props: {
     /**
@@ -29,14 +50,15 @@ const n = {
     },
     /**
      * Include any of these tokens in your string to render the corresponding symbol:
-     * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}
+     * {cmd} {opt} {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.
+     * 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,
@@ -52,43 +74,53 @@ const n = {
     icons() {
       return {
         ...n,
-        "{plus}": a
+        "{plus}": s
       };
     },
     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);
+      return Object.keys(n).reduce((r, t) => r.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");
+      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 (c[t])
+          return c[t];
+        const e = t.toLowerCase();
+        return i[e] ? i[e] : t;
+      }).filter((r) => r).join(" ");
     }
   }
 };
-var f = function() {
-  var t = this, o = t._self._c;
-  return o("kbd", { class: [
+var S = function() {
+  var t = this, e = t._self._c;
+  return e("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: [
+  ] }, [e("span", { staticClass: "d-keyboard-shortcut--sr-only" }, [t._v(" " + t._s(t.screenReaderText || t.generatedScreenReaderText) + " ")]), t._l(t.formattedShortcutSplit, function(o, a) {
+    return [t.icons[o] ? e(t.icons[o], { key: `icon-${a}-${o}`, 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: [
+    ], attrs: { size: "100", "aria-hidden": "true" } }) : o.trim() ? e("span", { key: `text-${a}-${o}`, class: [
       "d-keyboard-shortcut__item",
       { "d-keyboard-shortcut__item--inverted": t.inverted }
-    ], attrs: { "aria-hidden": "true" }, domProps: { innerHTML: t._s(r) } })];
+    ], attrs: { "aria-hidden": "true" }, domProps: { innerHTML: t._s(o) } }) : t._e()];
   })], 2);
-}, m = [], y = /* @__PURE__ */ _(
-  l,
+}, g = [], y = /* @__PURE__ */ w(
   f,
-  m
+  S,
+  g
 );
-const w = y.exports;
+const D = y.exports;
 export {
-  w as default
+  D as default
 };
 //# sourceMappingURL=keyboard-shortcut.js.map

package/dist/vue2/lib/keyboard-shortcut/keyboard-shortcut.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-shortcut.js","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\n      v-if=\"screenReaderText\"\n      class=\"d-keyboard-shortcut--sr-only\"\n    >\n      {{ screenReaderText }}\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=\"`${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\n        :key=\"`${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  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue2';\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};\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  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\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} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.\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};\n</script>\n"],"names":["SHORTCUTS_ICON_ALIASES","DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","_sfc_main","DtIconPlus","result","key","iconAliasString","regex"],"mappings":";;AAqDA,MAAAA,IAAA;AAAA,EACA,SAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC;AACA,GAMAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,kBAAAN;AAAA,IACA,kBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAE;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,QAAA;AACA,aAAA;AAAA,QACA,GAAAR;AAAA,QACA,UAAAQ;AAAA,MACA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,aAAA,KAAA,SAAA,QAAA,KAAA,WAAA,QAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA,OAAA,KAAAR,CAAA,EAAA,OAAA,CAAAS,GAAAC,MACAD,EAAA,QAAA,IAAA,OAAA,MAAAC,IAAA,KAAA,IAAA,GAAAV,EAAAU,CAAA,CAAA,GACA,KAAA,qBAAA;AAAA,IACA;AAAA;AAAA,IAGA,yBAAA;AACA,YAAAC,IAAA,OAAA,KAAA,KAAA,KAAA,EAAA,KAAA,GAAA,GAOAC,IAAA,IAAA,OAAA,IAAAD,CAAA,KAAA,IAAA;AACA,aAAA,KAAA,kBAAA,MAAAC,CAAA,EAAA,OAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"keyboard-shortcut.js","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/vue2';\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  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"],"names":["SHORTCUTS_ICON_ALIASES","DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","DtIconOption","ICON_ALIAS_TO_TEXT","KEY_ABBREVIATIONS","_sfc_main","DtIconPlus","result","key","iconAliasString","regex","item","trimmedItem","lowerItem"],"mappings":";;AAmDA,MAAAA,IAAA;AAAA,EACA,SAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AACA,GAGAC,IAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,cAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA;AACA,GAGAC,IAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AACA,GAMAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,kBAAAT;AAAA,IACA,kBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAI;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,QAAA;AACA,aAAA;AAAA,QACA,GAAAX;AAAA,QACA,UAAAW;AAAA,MACA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,aAAA,KAAA,SAAA,QAAA,KAAA,WAAA,QAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA,OAAA,KAAAX,CAAA,EAAA,OAAA,CAAAY,GAAAC,MACAD,EAAA,QAAA,IAAA,OAAA,MAAAC,IAAA,KAAA,IAAA,GAAAb,EAAAa,CAAA,CAAA,GACA,KAAA,qBAAA;AAAA,IACA;AAAA;AAAA,IAGA,yBAAA;AACA,YAAAC,IAAA,OAAA,KAAA,KAAA,KAAA,EAAA,KAAA,GAAA,GAOAC,IAAA,IAAA,OAAA,IAAAD,CAAA,KAAA,IAAA;AACA,aAAA,KAAA,kBAAA,MAAAC,CAAA,EAAA,OAAA,OAAA;AAAA,IACA;AAAA;AAAA,IAGA,4BAAA;AACA,aAAA,KAAA,uBACA,IAAA,CAAAC,MAAA;AACA,cAAAC,IAAAD,EAAA,KAAA;AAGA,YAAAR,EAAAS,CAAA;AACA,iBAAAT,EAAAS,CAAA;AAIA,cAAAC,IAAAD,EAAA,YAAA;AACA,eAAAR,EAAAS,CAAA,IACAT,EAAAS,CAAA,IAIAD;AAAA,MACA,CAAA,EACA,OAAA,CAAAD,MAAAA,CAAA,EACA,KAAA,GAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/lib/stack/stack-constants.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={default:"column",column:"column",row:"row","row-reverse":"row-reverse","column-reverse":"column-reverse"},o=["sm","md","lg","xl"],r=["0","50","100","200","300","350","400","450","500","525","550","600","625","650","700"],T={DT_STACK_DIRECTION:e,DT_STACK_RESPONSIVE_BREAKPOINTS:o,DT_STACK_GAP:r};exports.DT_STACK_DIRECTION=e;exports.DT_STACK_GAP=r;exports.DT_STACK_RESPONSIVE_BREAKPOINTS=o;exports.default=T;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={default:"column",column:"column",row:"row","row-reverse":"row-reverse","column-reverse":"column-reverse"},t=["sm","md","lg","xl"],T=["0","50","100","200","300","350","400","450","500","525","550","600","625","650","700"],_=["normal","start","center","end","stretch","baseline"],n=["start","center","end","around","between","evenly"],r={DT_STACK_DIRECTION:e,DT_STACK_RESPONSIVE_BREAKPOINTS:t,DT_STACK_GAP:T,DT_STACK_ALIGN:_,DT_STACK_JUSTIFY:n};exports.DT_STACK_ALIGN=_;exports.DT_STACK_DIRECTION=e;exports.DT_STACK_GAP=T;exports.DT_STACK_JUSTIFY=n;exports.DT_STACK_RESPONSIVE_BREAKPOINTS=t;exports.default=r;
 //# sourceMappingURL=stack-constants.cjs.map

package/dist/vue2/lib/stack/stack-constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"stack-constants.cjs","sources":["../../../components/stack/stack_constants.js"],"sourcesContent":["export const DT_STACK_DIRECTION = {\n  default: 'column',\n  column: 'column',\n  row: 'row',\n  'row-reverse': 'row-reverse',\n  'column-reverse': 'column-reverse',\n};\n\nexport const DT_STACK_RESPONSIVE_BREAKPOINTS = ['sm', 'md', 'lg', 'xl'];\n\nexport const DT_STACK_GAP = ['0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'];\n\nexport default {\n  DT_STACK_DIRECTION,\n  DT_STACK_RESPONSIVE_BREAKPOINTS,\n  DT_STACK_GAP,\n};\n"],"names":["DT_STACK_DIRECTION","DT_STACK_RESPONSIVE_BREAKPOINTS","DT_STACK_GAP","stack_constants"],"mappings":"4GAAY,MAACA,EAAqB,CAChC,QAAS,SACT,OAAQ,SACR,IAAK,MACL,cAAe,cACf,iBAAkB,gBACpB,EAEaC,EAAkC,CAAC,KAAM,KAAM,KAAM,IAAI,EAEzDC,EAAe,CAAC,IAAK,KAAM,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,KAAK,EAEjIC,EAAe,CACb,mBAAAH,EACA,gCAAAC,EACA,aAAAC,CACF"}
+{"version":3,"file":"stack-constants.cjs","sources":["../../../components/stack/stack_constants.js"],"sourcesContent":["/**\n * Direction values for the stack component.\n * Uses object format for historical compatibility - changing to array would be breaking.\n * The object keys are the valid values, and the values are the CSS class suffixes.\n * @type {Object<string, string>}\n */\nexport const DT_STACK_DIRECTION = {\n  default: 'column',\n  column: 'column',\n  row: 'row',\n  'row-reverse': 'row-reverse',\n  'column-reverse': 'column-reverse',\n};\n\n/**\n * Responsive breakpoint names used for all responsive props.\n * @type {string[]}\n */\nexport const DT_STACK_RESPONSIVE_BREAKPOINTS = ['sm', 'md', 'lg', 'xl'];\n\n/**\n * Gap values for spacing between stack items.\n * Uses array format.\n * @type {string[]}\n */\nexport const DT_STACK_GAP = ['0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'];\n\n/**\n * Align values for the stack component (cross-axis alignment).\n * Uses array format - simpler structure for newer props.\n * @type {string[]}\n */\nexport const DT_STACK_ALIGN = ['normal', 'start', 'center', 'end', 'stretch', 'baseline'];\n\n/**\n * Justify values for the stack component (main-axis distribution).\n * Uses array format - simpler structure for newer props.\n * @type {string[]}\n */\nexport const DT_STACK_JUSTIFY = ['start', 'center', 'end', 'around', 'between', 'evenly'];\n\nexport default {\n  DT_STACK_DIRECTION,\n  DT_STACK_RESPONSIVE_BREAKPOINTS,\n  DT_STACK_GAP,\n  DT_STACK_ALIGN,\n  DT_STACK_JUSTIFY,\n};\n"],"names":["DT_STACK_DIRECTION","DT_STACK_RESPONSIVE_BREAKPOINTS","DT_STACK_GAP","DT_STACK_ALIGN","DT_STACK_JUSTIFY","stack_constants"],"mappings":"4GAMY,MAACA,EAAqB,CAChC,QAAS,SACT,OAAQ,SACR,IAAK,MACL,cAAe,cACf,iBAAkB,gBACpB,EAMaC,EAAkC,CAAC,KAAM,KAAM,KAAM,IAAI,EAOzDC,EAAe,CAAC,IAAK,KAAM,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,KAAK,EAOpHC,EAAiB,CAAC,SAAU,QAAS,SAAU,MAAO,UAAW,UAAU,EAO3EC,EAAmB,CAAC,QAAS,SAAU,MAAO,SAAU,UAAW,QAAQ,EAExFC,EAAe,CACb,mBAAAL,EACA,gCAAAC,EACA,aAAAC,EACA,eAAAC,EACA,iBAAAC,CACF"}

package/dist/vue2/lib/stack/stack-constants.js

@@ -4,15 +4,19 @@ const e = {
   row: "row",
   "row-reverse": "row-reverse",
   "column-reverse": "column-reverse"
-}, o = ["sm", "md", "lg", "xl"], r = ["0", "50", "100", "200", "300", "350", "400", "450", "500", "525", "550", "600", "625", "650", "700"], s = {
+}, n = ["sm", "md", "lg", "xl"], t = ["0", "50", "100", "200", "300", "350", "400", "450", "500", "525", "550", "600", "625", "650", "700"], r = ["normal", "start", "center", "end", "stretch", "baseline"], o = ["start", "center", "end", "around", "between", "evenly"], s = {
   DT_STACK_DIRECTION: e,
-  DT_STACK_RESPONSIVE_BREAKPOINTS: o,
-  DT_STACK_GAP: r
+  DT_STACK_RESPONSIVE_BREAKPOINTS: n,
+  DT_STACK_GAP: t,
+  DT_STACK_ALIGN: r,
+  DT_STACK_JUSTIFY: o
 };
 export {
+  r as DT_STACK_ALIGN,
   e as DT_STACK_DIRECTION,
-  r as DT_STACK_GAP,
-  o as DT_STACK_RESPONSIVE_BREAKPOINTS,
+  t as DT_STACK_GAP,
+  o as DT_STACK_JUSTIFY,
+  n as DT_STACK_RESPONSIVE_BREAKPOINTS,
   s as default
 };
 //# sourceMappingURL=stack-constants.js.map

package/dist/vue2/lib/stack/stack-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack-constants.js","sources":["../../../components/stack/stack_constants.js"],"sourcesContent":["export const DT_STACK_DIRECTION = {\n  default: 'column',\n  column: 'column',\n  row: 'row',\n  'row-reverse': 'row-reverse',\n  'column-reverse': 'column-reverse',\n};\n\nexport const DT_STACK_RESPONSIVE_BREAKPOINTS = ['sm', 'md', 'lg', 'xl'];\n\nexport const DT_STACK_GAP = ['0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'];\n\nexport default {\n  DT_STACK_DIRECTION,\n  DT_STACK_RESPONSIVE_BREAKPOINTS,\n  DT_STACK_GAP,\n};\n"],"names":["DT_STACK_DIRECTION","DT_STACK_RESPONSIVE_BREAKPOINTS","DT_STACK_GAP","stack_constants"],"mappings":"AAAY,MAACA,IAAqB;AAAA,EAChC,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,eAAe;AAAA,EACf,kBAAkB;AACpB,GAEaC,IAAkC,CAAC,MAAM,MAAM,MAAM,IAAI,GAEzDC,IAAe,CAAC,KAAK,MAAM,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,KAAK,GAEjIC,IAAe;AAAA,EACb,oBAAAH;AAAA,EACA,iCAAAC;AAAA,EACA,cAAAC;AACF;"}
+{"version":3,"file":"stack-constants.js","sources":["../../../components/stack/stack_constants.js"],"sourcesContent":["/**\n * Direction values for the stack component.\n * Uses object format for historical compatibility - changing to array would be breaking.\n * The object keys are the valid values, and the values are the CSS class suffixes.\n * @type {Object<string, string>}\n */\nexport const DT_STACK_DIRECTION = {\n  default: 'column',\n  column: 'column',\n  row: 'row',\n  'row-reverse': 'row-reverse',\n  'column-reverse': 'column-reverse',\n};\n\n/**\n * Responsive breakpoint names used for all responsive props.\n * @type {string[]}\n */\nexport const DT_STACK_RESPONSIVE_BREAKPOINTS = ['sm', 'md', 'lg', 'xl'];\n\n/**\n * Gap values for spacing between stack items.\n * Uses array format.\n * @type {string[]}\n */\nexport const DT_STACK_GAP = ['0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'];\n\n/**\n * Align values for the stack component (cross-axis alignment).\n * Uses array format - simpler structure for newer props.\n * @type {string[]}\n */\nexport const DT_STACK_ALIGN = ['normal', 'start', 'center', 'end', 'stretch', 'baseline'];\n\n/**\n * Justify values for the stack component (main-axis distribution).\n * Uses array format - simpler structure for newer props.\n * @type {string[]}\n */\nexport const DT_STACK_JUSTIFY = ['start', 'center', 'end', 'around', 'between', 'evenly'];\n\nexport default {\n  DT_STACK_DIRECTION,\n  DT_STACK_RESPONSIVE_BREAKPOINTS,\n  DT_STACK_GAP,\n  DT_STACK_ALIGN,\n  DT_STACK_JUSTIFY,\n};\n"],"names":["DT_STACK_DIRECTION","DT_STACK_RESPONSIVE_BREAKPOINTS","DT_STACK_GAP","DT_STACK_ALIGN","DT_STACK_JUSTIFY","stack_constants"],"mappings":"AAMY,MAACA,IAAqB;AAAA,EAChC,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,eAAe;AAAA,EACf,kBAAkB;AACpB,GAMaC,IAAkC,CAAC,MAAM,MAAM,MAAM,IAAI,GAOzDC,IAAe,CAAC,KAAK,MAAM,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,KAAK,GAOpHC,IAAiB,CAAC,UAAU,SAAS,UAAU,OAAO,WAAW,UAAU,GAO3EC,IAAmB,CAAC,SAAS,UAAU,OAAO,UAAU,WAAW,QAAQ,GAExFC,IAAe;AAAA,EACb,oBAAAL;AAAA,EACA,iCAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AACF;"}

package/dist/vue2/lib/stack/stack.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("./stack-constants.cjs"),s=require("./validators.cjs"),r=require("./utils.cjs"),n=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),_={name:"DtStack",props:{direction:{type:[String,Object],default:"column",validator:e=>s.directionValidator(e)},as:{type:String,default:"div"},gap:{type:[String,Object],default:"0",validator:e=>s.gapValidator(e)}},data(){return{DT_STACK_DIRECTION:a.DT_STACK_DIRECTION,DT_STACK_GAP:a.DT_STACK_GAP,DT_STACK_RESPONSIVE_BREAKPOINTS:a.DT_STACK_RESPONSIVE_BREAKPOINTS}},computed:{defaultGap(){return r.getDefaultGapClass(this.gap)},defaultDirection(){return r.getDefaultDirectionClass(this.direction)},stackResponsive(){return r.getResponsiveClasses(this.direction,this.gap)}}};var c=function(){var t=this,i=t._self._c;return i(t.as,{tag:"component",class:["d-stack",t.defaultDirection,t.defaultGap,t.stackResponsive]},[t._t("default")],2)},o=[],l=n.n(_,c,o);const u=l.exports;exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("./stack-constants.cjs"),s=require("./validators.cjs"),i=require("./utils.cjs"),n=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),l={name:"DtStack",props:{direction:{type:[String,Object],default:"column",validator:t=>s.directionValidator(t)},as:{type:String,default:"div"},gap:{type:[String,Object],default:"0",validator:t=>s.gapValidator(t)},align:{type:[String,Object],default:"normal",validator:t=>s.alignValidator(t)},justify:{type:[String,Object],default:"start",validator:t=>s.justifyValidator(t)}},data(){return{DT_STACK_DIRECTION:a.DT_STACK_DIRECTION,DT_STACK_GAP:a.DT_STACK_GAP,DT_STACK_RESPONSIVE_BREAKPOINTS:a.DT_STACK_RESPONSIVE_BREAKPOINTS,DT_STACK_ALIGN:a.DT_STACK_ALIGN,DT_STACK_JUSTIFY:a.DT_STACK_JUSTIFY}},computed:{defaultGap(){return i.getDefaultGapClass(this.gap)},defaultDirection(){return i.getDefaultDirectionClass(this.direction)},defaultAlign(){return i.getDefaultAlignClass(this.align)},defaultJustify(){return i.getDefaultJustifyClass(this.justify)},stackResponsive(){return i.getResponsiveClasses(this.direction,this.gap,this.align,this.justify)}}};var u=function(){var e=this,r=e._self._c;return r(e.as,{tag:"component",class:["d-stack",e.defaultDirection,e.defaultGap,e.defaultAlign,e.defaultJustify,e.stackResponsive],attrs:{"data-qa":"dt-stack"}},[e._t("default")],2)},_=[],o=n.n(l,u,_);const c=o.exports;exports.default=c;
 //# sourceMappingURL=stack.cjs.map

package/dist/vue2/lib/stack/stack.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"stack.cjs","sources":["../../../components/stack/stack.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from './stack_constants';\nimport { directionValidator, gapValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass } from './utils';\n\nexport default {\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overriden\n     * by utility classes.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","direction","directionValidator","gap","gapValidator","DT_STACK_DIRECTION","DT_STACK_GAP","DT_STACK_RESPONSIVE_BREAKPOINTS","getDefaultGapClass","getDefaultDirectionClass","getResponsiveClasses"],"mappings":"oQAoBAA,EAAA,CACA,KAAA,UAEA,MAAA,CASA,UAAA,CACA,KAAA,CAAA,OAAA,MAAA,EACA,QAAA,SACA,UAAAC,GAAAC,EAAAA,mBAAAD,CAAA,CACA,EAKA,GAAA,CACA,KAAA,OACA,QAAA,KACA,EAUA,IAAA,CACA,KAAA,CAAA,OAAA,MAAA,EACA,QAAA,IACA,UAAAE,GAAAC,EAAAA,aAAAD,CAAA,CACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,mBAAAE,EAAAA,mBACA,aAAAC,EAAAA,aACA,gCAAAC,EAAAA,+BACA,CACA,EAEA,SAAA,CACA,YAAA,CACA,OAAAC,EAAAA,mBAAA,KAAA,GAAA,CACA,EAEA,kBAAA,CACA,OAAAC,EAAAA,yBAAA,KAAA,SAAA,CACA,EAEA,iBAAA,CACA,OAAAC,EAAAA,qBAAA,KAAA,UAAA,KAAA,GAAA,CACA,CACA,CACA"}
+{"version":3,"file":"stack.cjs","sources":["../../../components/stack/stack.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    data-qa=\"dt-stack\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      defaultAlign,\n      defaultJustify,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from './stack_constants';\nimport { directionValidator, gapValidator, alignValidator, justifyValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass, getDefaultAlignClass, getDefaultJustifyClass } from './utils';\n\nexport default {\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overridden\n     * using the `align` and `justify` props.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n\n    /**\n     * The align property controls the alignment of items along the cross axis.\n     * The align can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default align with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are 'normal', 'start', 'center', 'end', 'stretch', 'baseline'.\n     */\n    align: {\n      type: [String, Object],\n      default: 'normal',\n      validator: (align) => alignValidator(align),\n    },\n\n    /**\n     * The justify property controls the justification of items along the main axis.\n     * The justify can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default justify with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are 'start', 'center', 'end', 'around', 'between', 'evenly'.\n     */\n    justify: {\n      type: [String, Object],\n      default: 'start',\n      validator: (justify) => justifyValidator(justify),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n      DT_STACK_ALIGN,\n      DT_STACK_JUSTIFY,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    defaultAlign () {\n      return getDefaultAlignClass(this.align);\n    },\n\n    defaultJustify () {\n      return getDefaultJustifyClass(this.justify);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap, this.align, this.justify);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","direction","directionValidator","gap","gapValidator","align","alignValidator","justify","justifyValidator","DT_STACK_DIRECTION","DT_STACK_GAP","DT_STACK_RESPONSIVE_BREAKPOINTS","DT_STACK_ALIGN","DT_STACK_JUSTIFY","getDefaultGapClass","getDefaultDirectionClass","getDefaultAlignClass","getDefaultJustifyClass","getResponsiveClasses"],"mappings":"oQAuBAA,EAAA,CACA,KAAA,UAEA,MAAA,CASA,UAAA,CACA,KAAA,CAAA,OAAA,MAAA,EACA,QAAA,SACA,UAAAC,GAAAC,EAAAA,mBAAAD,CAAA,CACA,EAKA,GAAA,CACA,KAAA,OACA,QAAA,KACA,EAUA,IAAA,CACA,KAAA,CAAA,OAAA,MAAA,EACA,QAAA,IACA,UAAAE,GAAAC,EAAAA,aAAAD,CAAA,CACA,EAUA,MAAA,CACA,KAAA,CAAA,OAAA,MAAA,EACA,QAAA,SACA,UAAAE,GAAAC,EAAAA,eAAAD,CAAA,CACA,EAUA,QAAA,CACA,KAAA,CAAA,OAAA,MAAA,EACA,QAAA,QACA,UAAAE,GAAAC,EAAAA,iBAAAD,CAAA,CACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,mBAAAE,EAAAA,mBACA,aAAAC,EAAAA,aACA,gCAAAC,EAAAA,gCACA,eAAAC,EAAAA,eACA,iBAAAC,EAAAA,gBACA,CACA,EAEA,SAAA,CACA,YAAA,CACA,OAAAC,EAAAA,mBAAA,KAAA,GAAA,CACA,EAEA,kBAAA,CACA,OAAAC,EAAAA,yBAAA,KAAA,SAAA,CACA,EAEA,cAAA,CACA,OAAAC,EAAAA,qBAAA,KAAA,KAAA,CACA,EAEA,gBAAA,CACA,OAAAC,EAAAA,uBAAA,KAAA,OAAA,CACA,EAEA,iBAAA,CACA,OAAAC,EAAAA,qBAAA,KAAA,UAAA,KAAA,IAAA,KAAA,MAAA,KAAA,OAAA,CACA,CACA,CACA"}

package/dist/vue2/lib/stack/stack.js

@@ -1,8 +1,8 @@
-import { DT_STACK_RESPONSIVE_BREAKPOINTS as r, DT_STACK_GAP as i, DT_STACK_DIRECTION as n } from "./stack-constants.js";
-import { gapValidator as o, directionValidator as s } from "./validators.js";
-import { getResponsiveClasses as c, getDefaultDirectionClass as p, getDefaultGapClass as d } from "./utils.js";
-import { n as l } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
-const _ = {
+import { DT_STACK_JUSTIFY as i, DT_STACK_ALIGN as r, DT_STACK_RESPONSIVE_BREAKPOINTS as s, DT_STACK_GAP as n, DT_STACK_DIRECTION as l } from "./stack-constants.js";
+import { justifyValidator as o, alignValidator as d, gapValidator as u, directionValidator as f } from "./validators.js";
+import { getResponsiveClasses as c, getDefaultJustifyClass as p, getDefaultAlignClass as _, getDefaultDirectionClass as g, getDefaultGapClass as m } from "./utils.js";
+import { n as S } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+const D = {
   name: "DtStack",
   props: {
     /**
@@ -10,13 +10,13 @@ const _ = {
      * You can override the default direction with 'default' key.
      * All the undefined breakpoints will have 'default' value.
      * By default, for the column direction it will have `justify-content: flex-start`
-     * and for the row direction `align-items: center`. This can be overriden
-     * by utility classes.
+     * and for the row direction `align-items: center`. This can be overridden
+     * using the `align` and `justify` props.
      */
     direction: {
       type: [String, Object],
       default: "column",
-      validator: (e) => s(e)
+      validator: (t) => f(t)
     },
     /**
      * Set this prop to render stack as a specific HTML element.
@@ -36,43 +36,79 @@ const _ = {
     gap: {
       type: [String, Object],
       default: "0",
-      validator: (e) => o(e)
+      validator: (t) => u(t)
+    },
+    /**
+     * The align property controls the alignment of items along the cross axis.
+     * The align can be set to a string, or object with breakpoints.
+     * All the undefined breakpoints will have the 'default' value.
+     * You can override the default align with 'default' key.
+     * In case of string, it will be applied to all the breakpoints.
+     * Valid values are 'normal', 'start', 'center', 'end', 'stretch', 'baseline'.
+     */
+    align: {
+      type: [String, Object],
+      default: "normal",
+      validator: (t) => d(t)
+    },
+    /**
+     * The justify property controls the justification of items along the main axis.
+     * The justify can be set to a string, or object with breakpoints.
+     * All the undefined breakpoints will have the 'default' value.
+     * You can override the default justify with 'default' key.
+     * In case of string, it will be applied to all the breakpoints.
+     * Valid values are 'start', 'center', 'end', 'around', 'between', 'evenly'.
+     */
+    justify: {
+      type: [String, Object],
+      default: "start",
+      validator: (t) => o(t)
     }
   },
   data() {
     return {
-      DT_STACK_DIRECTION: n,
-      DT_STACK_GAP: i,
-      DT_STACK_RESPONSIVE_BREAKPOINTS: r
+      DT_STACK_DIRECTION: l,
+      DT_STACK_GAP: n,
+      DT_STACK_RESPONSIVE_BREAKPOINTS: s,
+      DT_STACK_ALIGN: r,
+      DT_STACK_JUSTIFY: i
     };
   },
   computed: {
     defaultGap() {
-      return d(this.gap);
+      return m(this.gap);
     },
     defaultDirection() {
-      return p(this.direction);
+      return g(this.direction);
+    },
+    defaultAlign() {
+      return _(this.align);
+    },
+    defaultJustify() {
+      return p(this.justify);
     },
     stackResponsive() {
-      return c(this.direction, this.gap);
+      return c(this.direction, this.gap, this.align, this.justify);
     }
   }
 };
-var f = function() {
-  var t = this, a = t._self._c;
-  return a(t.as, { tag: "component", class: [
+var v = function() {
+  var a = this, e = a._self._c;
+  return e(a.as, { tag: "component", class: [
     "d-stack",
-    t.defaultDirection,
-    t.defaultGap,
-    t.stackResponsive
-  ] }, [t._t("default")], 2);
-}, u = [], m = /* @__PURE__ */ l(
-  _,
-  f,
-  u
+    a.defaultDirection,
+    a.defaultGap,
+    a.defaultAlign,
+    a.defaultJustify,
+    a.stackResponsive
+  ], attrs: { "data-qa": "dt-stack" } }, [a._t("default")], 2);
+}, T = [], y = /* @__PURE__ */ S(
+  D,
+  v,
+  T
 );
-const C = m.exports;
+const O = y.exports;
 export {
-  C as default
+  O as default
 };
 //# sourceMappingURL=stack.js.map

package/dist/vue2/lib/stack/stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack.js","sources":["../../../components/stack/stack.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from './stack_constants';\nimport { directionValidator, gapValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass } from './utils';\n\nexport default {\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overriden\n     * by utility classes.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","direction","directionValidator","gap","gapValidator","DT_STACK_DIRECTION","DT_STACK_GAP","DT_STACK_RESPONSIVE_BREAKPOINTS","getDefaultGapClass","getDefaultDirectionClass","getResponsiveClasses"],"mappings":";;;;AAoBA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,WAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAAC,EAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,KAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAE,MAAAC,EAAAD,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,oBAAAE;AAAA,MACA,cAAAC;AAAA,MACA,iCAAAC;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAAC,EAAA,KAAA,GAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAAC,EAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAAC,EAAA,KAAA,WAAA,KAAA,GAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"stack.js","sources":["../../../components/stack/stack.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    data-qa=\"dt-stack\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      defaultAlign,\n      defaultJustify,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from './stack_constants';\nimport { directionValidator, gapValidator, alignValidator, justifyValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass, getDefaultAlignClass, getDefaultJustifyClass } from './utils';\n\nexport default {\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overridden\n     * using the `align` and `justify` props.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n\n    /**\n     * The align property controls the alignment of items along the cross axis.\n     * The align can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default align with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are 'normal', 'start', 'center', 'end', 'stretch', 'baseline'.\n     */\n    align: {\n      type: [String, Object],\n      default: 'normal',\n      validator: (align) => alignValidator(align),\n    },\n\n    /**\n     * The justify property controls the justification of items along the main axis.\n     * The justify can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default justify with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are 'start', 'center', 'end', 'around', 'between', 'evenly'.\n     */\n    justify: {\n      type: [String, Object],\n      default: 'start',\n      validator: (justify) => justifyValidator(justify),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n      DT_STACK_ALIGN,\n      DT_STACK_JUSTIFY,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    defaultAlign () {\n      return getDefaultAlignClass(this.align);\n    },\n\n    defaultJustify () {\n      return getDefaultJustifyClass(this.justify);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap, this.align, this.justify);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","direction","directionValidator","gap","gapValidator","align","alignValidator","justify","justifyValidator","DT_STACK_DIRECTION","DT_STACK_GAP","DT_STACK_RESPONSIVE_BREAKPOINTS","DT_STACK_ALIGN","DT_STACK_JUSTIFY","getDefaultGapClass","getDefaultDirectionClass","getDefaultAlignClass","getDefaultJustifyClass","getResponsiveClasses"],"mappings":";;;;AAuBA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,WAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAAC,EAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,KAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAE,MAAAC,EAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,OAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAE,MAAAC,EAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,SAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAE,MAAAC,EAAAD,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,oBAAAE;AAAA,MACA,cAAAC;AAAA,MACA,iCAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAAC,EAAA,KAAA,GAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAAC,EAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAAC,EAAA,KAAA,KAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAAC,EAAA,KAAA,OAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAAC,EAAA,KAAA,WAAA,KAAA,KAAA,KAAA,OAAA,KAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}

package/dist/vue2/lib/stack/utils.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./stack-constants.cjs");function l(e){return e===n.DT_STACK_DIRECTION.default}function u(e){if(s(e)==="string")return l(e)?null:n.DT_STACK_DIRECTION[e];if(s(e)==="object"){const{default:t}=e;return l(t)?null:n.DT_STACK_DIRECTION[t]}else return null}function r(e){return typeof e=="string"?e:typeof e=="object"?e.default:null}function s(e){return typeof e}function a(e){return u(e)?`d-stack--${n.DT_STACK_DIRECTION[u(e)]}`:null}function f(e){return s(e)==="object"?[...n.DT_STACK_RESPONSIVE_BREAKPOINTS.map(t=>e[t]?`d-stack--${t}-${e[t]}`:null)]:[]}function i(e){return typeof e=="object"?[...n.DT_STACK_RESPONSIVE_BREAKPOINTS.map(t=>n.DT_STACK_GAP.includes(e[t])?`d-stack--${t}-gap-${e[t]}`:null)]:[]}function o(e,t){return[...f(e),...i(t)]}function c(e){const t=r(e);return n.DT_STACK_GAP.includes(t)?`d-stack--gap-${t}`:null}exports.directionPropType=s;exports.getDefaultDirectionClass=a;exports.getDefaultGapClass=c;exports.getResponsiveClasses=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./stack-constants.cjs");function f(t){return t===n.DT_STACK_DIRECTION.default}function a(t){return typeof t=="string"?t:typeof t=="object"&&t!==null?t.default:null}function c(t){if(typeof t=="string")return f(t)?null:n.DT_STACK_DIRECTION[t];if(typeof t=="object"){const{default:e}=t;return f(e)?null:n.DT_STACK_DIRECTION[e]}else return null}function i(t,e,s,u="d-stack"){return typeof t!="object"||t===null?[]:n.DT_STACK_RESPONSIVE_BREAKPOINTS.map(r=>{const l=t[r];if(!l)return null;const o=Array.isArray(s)?s.includes(l):l in s,C=e===""?`${u}--${r}-${l}`:`${u}--${r}-${e}-${l}`;return o?C:null})}function T(t){return c(t)?`d-stack--${n.DT_STACK_DIRECTION[c(t)]}`:null}function D(t){return i(t,"",n.DT_STACK_DIRECTION)}function _(t){return i(t,"gap",n.DT_STACK_GAP)}function g(t){return i(t,"align",n.DT_STACK_ALIGN)}function A(t){return i(t,"justify",n.DT_STACK_JUSTIFY)}function S(t,e,s,u){return[...D(t),..._(e),...g(s),...A(u)]}function y(t){const e=a(t);return n.DT_STACK_GAP.includes(e)?`d-stack--gap-${e}`:null}function I(t){const e=a(t);return n.DT_STACK_ALIGN.includes(e)?`d-stack--align-${e}`:null}function R(t){const e=a(t);return n.DT_STACK_JUSTIFY.includes(e)?`d-stack--justify-${e}`:null}exports.getDefaultAlignClass=I;exports.getDefaultDirectionClass=T;exports.getDefaultGapClass=y;exports.getDefaultJustifyClass=R;exports.getResponsiveClasses=S;
 //# sourceMappingURL=utils.cjs.map

package/dist/vue2/lib/stack/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../../components/stack/utils.js"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n  return direction === DT_STACK_DIRECTION.default;\n}\n\nfunction _getValidDirection (direction) {\n  if (directionPropType(direction) === 'string') {\n    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n  } else { return null; }\n}\n\nfunction _getValidGap (gap) {\n  if (typeof gap === 'string') {\n    return gap;\n  } else if (typeof gap === 'object') {\n    return gap.default;\n  } else { return null; }\n}\n\nexport function directionPropType (value) {\n  return typeof value;\n}\n\nexport function getDefaultDirectionClass (direction) {\n  return _getValidDirection(direction)\n    ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n    : null;\n}\n\nfunction getResposiveDirectionClasses (direction) {\n  if (directionPropType(direction) === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return direction[breakpoint]\n          ? `d-stack--${breakpoint}-${direction[breakpoint]}`\n          : null;\n      })];\n  } else { return []; }\n}\n\nfunction getResposiveGapClasses (gap) {\n  if (typeof gap === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return DT_STACK_GAP.includes(gap[breakpoint])\n          ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}`\n          : null;\n      })];\n  } else { return []; }\n}\n\nexport function getResponsiveClasses (direction, gap) {\n  return [\n    ...getResposiveDirectionClasses(direction),\n    ...getResposiveGapClasses(gap),\n  ];\n}\n\nexport function getDefaultGapClass (gap) {\n  const validGap = _getValidGap(gap);\n  return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;\n}\n"],"names":["_isDefaultDirection","direction","DT_STACK_DIRECTION","_getValidDirection","directionPropType","defaultStyle","_getValidGap","gap","value","getDefaultDirectionClass","getResposiveDirectionClasses","DT_STACK_RESPONSIVE_BREAKPOINTS","breakpoint","getResposiveGapClasses","DT_STACK_GAP","getResponsiveClasses","getDefaultGapClass","validGap"],"mappings":"yHAEA,SAASA,EAAqBC,EAAW,CACvC,OAAOA,IAAcC,EAAAA,mBAAmB,OAC1C,CAEA,SAASC,EAAoBF,EAAW,CACtC,GAAIG,EAAkBH,CAAS,IAAM,SACnC,OAAQD,EAAoBC,CAAS,EAAoC,KAAhCC,EAAAA,mBAAmBD,CAAS,EAChE,GAAIG,EAAkBH,CAAS,IAAM,SAAU,CACpD,KAAM,CAAE,QAASI,CAAY,EAAKJ,EAElC,OAAQD,EAAoBK,CAAY,EAAuC,KAAnCH,EAAAA,mBAAmBG,CAAY,CAC7E,KAAS,QAAO,IAClB,CAEA,SAASC,EAAcC,EAAK,CAC1B,OAAI,OAAOA,GAAQ,SACVA,EACE,OAAOA,GAAQ,SACjBA,EAAI,QACG,IAClB,CAEO,SAASH,EAAmBI,EAAO,CACxC,OAAO,OAAOA,CAChB,CAEO,SAASC,EAA0BR,EAAW,CACnD,OAAOE,EAAmBF,CAAS,EAC/B,YAAYC,EAAAA,mBAAmBC,EAAmBF,CAAS,CAAC,CAAC,GAC7D,IACN,CAEA,SAASS,EAA8BT,EAAW,CAChD,OAAIG,EAAkBH,CAAS,IAAM,SAC5B,CACL,GAAGU,EAAAA,gCAAgC,IAAKC,GAC/BX,EAAUW,CAAU,EACvB,YAAYA,CAAU,IAAIX,EAAUW,CAAU,CAAC,GAC/C,IACL,CAAC,EACU,CAAA,CAClB,CAEA,SAASC,EAAwBN,EAAK,CACpC,OAAI,OAAOA,GAAQ,SACV,CACL,GAAGI,EAAAA,gCAAgC,IAAKC,GAC/BE,eAAa,SAASP,EAAIK,CAAU,CAAC,EACxC,YAAYA,CAAU,QAAQL,EAAIK,CAAU,CAAC,GAC7C,IACL,CAAC,EACU,CAAA,CAClB,CAEO,SAASG,EAAsBd,EAAWM,EAAK,CACpD,MAAO,CACL,GAAGG,EAA6BT,CAAS,EACzC,GAAGY,EAAuBN,CAAG,CACjC,CACA,CAEO,SAASS,EAAoBT,EAAK,CACvC,MAAMU,EAAWX,EAAaC,CAAG,EACjC,OAAOO,EAAAA,aAAa,SAASG,CAAQ,EAAI,gBAAgBA,CAAQ,GAAK,IACxE"}
+{"version":3,"file":"utils.cjs","sources":["../../../components/stack/utils.js"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n  return direction === DT_STACK_DIRECTION.default;\n}\n\n/**\n * Generic helper to extract default value from string or object props\n * @param {string|Object} value - The prop value\n * @returns {string|null} The default value or null\n */\nfunction _getDefaultValue (value) {\n  if (typeof value === 'string') return value;\n  if (typeof value === 'object' && value !== null) return value.default;\n  return null;\n}\n\nfunction _getValidDirection (direction) {\n  if (typeof direction === 'string') {\n    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n  } else if (typeof direction === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n  } else { return null; }\n}\n\n/**\n * Generic helper to generate responsive classes for any prop\n * @param {Object} propValue - The prop value object with breakpoint keys\n * @param {string} propName - The name of the prop (e.g., 'gap', 'align')\n * @param {Array|Object} validValues - Valid values (array or object for direction)\n * @param {string} classPrefix - CSS class prefix (default: 'd-stack')\n * @returns {Array} Array of CSS class names\n */\nfunction _getResponsiveClasses (propValue, propName, validValues, classPrefix = 'd-stack') {\n  if (typeof propValue !== 'object' || propValue === null) return [];\n\n  return DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n    const value = propValue[breakpoint];\n    if (!value) return null;\n\n    // Handle both array (gap, align, justify) and object (direction) validValues\n    const isValid = Array.isArray(validValues)\n      ? validValues.includes(value)\n      : value in validValues;\n\n    // For direction, we don't need the prop name in the class\n    const className = propName === ''\n      ? `${classPrefix}--${breakpoint}-${value}`\n      : `${classPrefix}--${breakpoint}-${propName}-${value}`;\n\n    return isValid ? className : null;\n  });\n}\n\nexport function getDefaultDirectionClass (direction) {\n  return _getValidDirection(direction)\n    ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n    : null;\n}\n\nfunction getResponsiveDirectionClasses (direction) {\n  return _getResponsiveClasses(direction, '', DT_STACK_DIRECTION);\n}\n\nfunction getResponsiveGapClasses (gap) {\n  return _getResponsiveClasses(gap, 'gap', DT_STACK_GAP);\n}\n\nfunction getResponsiveAlignClasses (align) {\n  return _getResponsiveClasses(align, 'align', DT_STACK_ALIGN);\n}\n\nfunction getResponsiveJustifyClasses (justify) {\n  return _getResponsiveClasses(justify, 'justify', DT_STACK_JUSTIFY);\n}\n\nexport function getResponsiveClasses (direction, gap, align, justify) {\n  return [\n    ...getResponsiveDirectionClasses(direction),\n    ...getResponsiveGapClasses(gap),\n    ...getResponsiveAlignClasses(align),\n    ...getResponsiveJustifyClasses(justify),\n  ];\n}\n\nexport function getDefaultGapClass (gap) {\n  const validGap = _getDefaultValue(gap);\n  return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;\n}\n\nexport function getDefaultAlignClass (align) {\n  const validAlign = _getDefaultValue(align);\n  return DT_STACK_ALIGN.includes(validAlign) ? `d-stack--align-${validAlign}` : null;\n}\n\nexport function getDefaultJustifyClass (justify) {\n  const validJustify = _getDefaultValue(justify);\n  return DT_STACK_JUSTIFY.includes(validJustify) ? `d-stack--justify-${validJustify}` : null;\n}"],"names":["_isDefaultDirection","direction","DT_STACK_DIRECTION","_getDefaultValue","value","_getValidDirection","defaultStyle","_getResponsiveClasses","propValue","propName","validValues","classPrefix","DT_STACK_RESPONSIVE_BREAKPOINTS","breakpoint","isValid","className","getDefaultDirectionClass","getResponsiveDirectionClasses","getResponsiveGapClasses","gap","DT_STACK_GAP","getResponsiveAlignClasses","align","DT_STACK_ALIGN","getResponsiveJustifyClasses","justify","DT_STACK_JUSTIFY","getResponsiveClasses","getDefaultGapClass","validGap","getDefaultAlignClass","validAlign","getDefaultJustifyClass","validJustify"],"mappings":"yHAEA,SAASA,EAAqBC,EAAW,CACvC,OAAOA,IAAcC,EAAAA,mBAAmB,OAC1C,CAOA,SAASC,EAAkBC,EAAO,CAChC,OAAI,OAAOA,GAAU,SAAiBA,EAClC,OAAOA,GAAU,UAAYA,IAAU,KAAaA,EAAM,QACvD,IACT,CAEA,SAASC,EAAoBJ,EAAW,CACtC,GAAI,OAAOA,GAAc,SACvB,OAAQD,EAAoBC,CAAS,EAAoC,KAAhCC,EAAAA,mBAAmBD,CAAS,EAChE,GAAI,OAAOA,GAAc,SAAU,CACxC,KAAM,CAAE,QAASK,CAAY,EAAKL,EAElC,OAAQD,EAAoBM,CAAY,EAAuC,KAAnCJ,EAAAA,mBAAmBI,CAAY,CAC7E,KAAS,QAAO,IAClB,CAUA,SAASC,EAAuBC,EAAWC,EAAUC,EAAaC,EAAc,UAAW,CACzF,OAAI,OAAOH,GAAc,UAAYA,IAAc,KAAa,CAAA,EAEzDI,EAAAA,gCAAgC,IAAKC,GAAe,CACzD,MAAMT,EAAQI,EAAUK,CAAU,EAClC,GAAI,CAACT,EAAO,OAAO,KAGnB,MAAMU,EAAU,MAAM,QAAQJ,CAAW,EACrCA,EAAY,SAASN,CAAK,EAC1BA,KAASM,EAGPK,EAAYN,IAAa,GAC3B,GAAGE,CAAW,KAAKE,CAAU,IAAIT,CAAK,GACtC,GAAGO,CAAW,KAAKE,CAAU,IAAIJ,CAAQ,IAAIL,CAAK,GAEtD,OAAOU,EAAUC,EAAY,IAC/B,CAAC,CACH,CAEO,SAASC,EAA0Bf,EAAW,CACnD,OAAOI,EAAmBJ,CAAS,EAC/B,YAAYC,EAAAA,mBAAmBG,EAAmBJ,CAAS,CAAC,CAAC,GAC7D,IACN,CAEA,SAASgB,EAA+BhB,EAAW,CACjD,OAAOM,EAAsBN,EAAW,GAAIC,oBAAkB,CAChE,CAEA,SAASgB,EAAyBC,EAAK,CACrC,OAAOZ,EAAsBY,EAAK,MAAOC,cAAY,CACvD,CAEA,SAASC,EAA2BC,EAAO,CACzC,OAAOf,EAAsBe,EAAO,QAASC,gBAAc,CAC7D,CAEA,SAASC,EAA6BC,EAAS,CAC7C,OAAOlB,EAAsBkB,EAAS,UAAWC,kBAAgB,CACnE,CAEO,SAASC,EAAsB1B,EAAWkB,EAAKG,EAAOG,EAAS,CACpE,MAAO,CACL,GAAGR,EAA8BhB,CAAS,EAC1C,GAAGiB,EAAwBC,CAAG,EAC9B,GAAGE,EAA0BC,CAAK,EAClC,GAAGE,EAA4BC,CAAO,CAC1C,CACA,CAEO,SAASG,EAAoBT,EAAK,CACvC,MAAMU,EAAW1B,EAAiBgB,CAAG,EACrC,OAAOC,EAAAA,aAAa,SAASS,CAAQ,EAAI,gBAAgBA,CAAQ,GAAK,IACxE,CAEO,SAASC,EAAsBR,EAAO,CAC3C,MAAMS,EAAa5B,EAAiBmB,CAAK,EACzC,OAAOC,EAAAA,eAAe,SAASQ,CAAU,EAAI,kBAAkBA,CAAU,GAAK,IAChF,CAEO,SAASC,EAAwBP,EAAS,CAC/C,MAAMQ,EAAe9B,EAAiBsB,CAAO,EAC7C,OAAOC,EAAAA,iBAAiB,SAASO,CAAY,EAAI,oBAAoBA,CAAY,GAAK,IACxF"}