@dialpad/dialtone 9.133.0-next.2 → 9.133.0

package/dist/vue3/lib/split-button/split-button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"split-button.cjs","sources":["../../../components/split_button/split_button.vue"],"sourcesContent":["<template>\n  <span\n    data-qa=\"dt-split-button\"\n    class=\"d-split-btn\"\n    :style=\"{ width }\"\n  >\n    <split-button-alpha\n      v-bind=\"alphaButtonProps\"\n      ref=\"alphaButton\"\n      @click=\"$emit('alpha-clicked')\"\n    >\n      <template #icon=\"{ size: iconSize }\">\n        <!-- @slot Alpha (left) button icon slot -->\n        <slot\n          name=\"alphaIcon\"\n          :size=\"iconSize\"\n        />\n      </template>\n      <!-- @slot Default content slot -->\n      <slot name=\"default\" />\n    </split-button-alpha>\n    <!-- @slot Omega (right) content slot, overrides omega button styling and functionality completely -->\n    <slot name=\"omega\">\n      <dt-dropdown\n        v-if=\"$slots.dropdownList\"\n        :placement=\"dropdownPlacement\"\n        @click=\"isDropdownOpen = true\"\n        @opened=\"open => isDropdownOpen = open\"\n      >\n        <template #anchor=\"attrs\">\n          <split-button-omega\n            v-bind=\"{ ...attrs, ...omegaButtonProps }\"\n            :active=\"isDropdownOpen\"\n            @click=\"$emit('omega-clicked')\"\n          >\n            <template #icon=\"{ size: iconSize }\">\n              <!-- @slot Omega (right) button icon slot -->\n              <slot\n                name=\"omegaIcon\"\n                :size=\"iconSize\"\n              />\n            </template>\n          </split-button-omega>\n        </template>\n        <template #list=\"{ close }\">\n          <!-- @slot Built-in dropdown content slot, use of dt-list-item is highly recommended here. -->\n          <slot\n            name=\"dropdownList\"\n            :close=\"close\"\n          />\n        </template>\n      </dt-dropdown>\n\n      <split-button-omega\n        v-else\n        v-bind=\"omegaButtonProps\"\n        @click=\"$emit('omega-clicked')\"\n      >\n        <template #icon=\"{ size: iconSize }\">\n          <!-- @slot Omega (right) button icon slot -->\n          <slot\n            name=\"omegaIcon\"\n            :size=\"iconSize\"\n          />\n        </template>\n      </split-button-omega>\n    </slot>\n  </span>\n</template>\n\n<script>\nimport {\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_SIZE_MODIFIERS,\n  ICON_POSITION_MODIFIERS,\n} from '@/components/button';\nimport SplitButtonAlpha from './split_button-alpha.vue';\nimport SplitButtonOmega from './split_button-omega.vue';\nimport { DtDropdown } from '@/components/dropdown';\nimport { hasSlotContent, warnIfUnmounted, returnFirstEl } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSplitButton',\n\n  components: {\n    SplitButtonOmega,\n    DtDropdown,\n    SplitButtonAlpha,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines whether the alpha button should have active styling\n     * @values true, false\n     */\n    alphaActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the alpha button\n     */\n    alphaAriaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The position of the icon slot within the alpha button.\n     * @values left, right, top, bottom\n     */\n    alphaIconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * Used to customize the alpha label container\n     */\n    alphaLabelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the alpha button should display a loading animation or not.\n     * @values true, false\n     */\n    alphaLoading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the alpha button,\n     * required if no content is passed to default slot\n     */\n    alphaTooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\">\n     *  (Reference)\n     * </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The direction the dropdown displays relative to the anchor.\n     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\n     */\n    dropdownPlacement: {\n      type: String,\n      default: 'bottom-end',\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * The color of the button.\n     * @values default, muted, danger, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether the omega button should have active styling\n     * @values true, false\n     */\n    omegaActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the omega button\n     */\n    omegaAriaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Element ID, useful in case you need to reference the button\n     * as an external anchor for popover.\n     */\n    omegaId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the omega button,\n     * required as it is an icon only button\n     */\n    omegaTooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Native alpha button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'alpha-clicked',\n\n    /**\n     * Native omega button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'omega-clicked',\n  ],\n\n  data () {\n    return {\n      isDropdownOpen: false,\n    };\n  },\n\n  computed: {\n    alphaButtonProps () {\n      return {\n        active: this.alphaActive,\n        ariaLabel: this.alphaAriaLabel,\n        assertiveOnFocus: this.assertiveOnFocus,\n        disabled: this.disabled,\n        iconPosition: this.alphaIconPosition,\n        labelClass: this.alphaLabelClass,\n        loading: this.alphaLoading,\n        importance: this.importance,\n        kind: this.kind,\n        size: this.size,\n        tooltipText: this.alphaTooltipText,\n        class: this.$attrs.class,\n        style: this.$attrs.style,\n      };\n    },\n\n    omegaButtonProps () {\n      return {\n        id: this.omegaId,\n        active: this.omegaActive,\n        ariaLabel: this.omegaAriaLabel,\n        disabled: this.disabled,\n        importance: this.importance,\n        kind: this.kind,\n        size: this.size,\n        tooltipText: this.omegaTooltipText,\n        class: this.$attrs.class,\n        style: this.$attrs.style,\n      };\n    },\n  },\n\n  created () {\n    this.validateProps();\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  mounted () {\n    warnIfUnmounted(returnFirstEl(this.$el), this.$options.name);\n  },\n\n  methods: {\n    validateProps () {\n      this.validateAlphaButtonProps();\n      this.validateOmegaButtonProps();\n    },\n\n    validateAlphaButtonProps () {\n      if (hasSlotContent(this.$slots.default)) return;\n\n      if (hasSlotContent(this.$slots.alphaIcon) && !this.alphaTooltipText) {\n        console.warn('alpha-tooltip-text prop must be set if alpha button has an icon only');\n      }\n    },\n\n    validateOmegaButtonProps () {\n      if (hasSlotContent(this.$slots.omega)) return;\n\n      if (!this.omegaTooltipText) {\n        console.warn('omega-tooltip-text prop is required as it is an icon-only button');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","SplitButtonOmega","DtDropdown","SplitButtonAlpha","position","ICON_POSITION_MODIFIERS","i","BUTTON_IMPORTANCE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","s","BUTTON_SIZE_MODIFIERS","warnIfUnmounted","returnFirstEl","hasSlotContent","_createElementBlock","_normalizeStyle","$props","_createVNode","_component_split_button_alpha","_mergeProps","$options","_ctx","_withCtx","iconSize","_renderSlot","_createBlock","_component_dt_dropdown","$data","_cache","open","attrs","_component_split_button_omega","close","_openBlock"],"mappings":"6aAkFA,MAAKA,EAAU,CACb,aAAc,CAAE,KAAM,CAAG,EACzB,KAAM,gBAEN,WAAY,CACV,iBAAAC,EAAgB,mBAChBC,EAAU,QACV,iBAAAC,EAAgB,OACjB,EAED,aAAc,GAEd,MAAO,CAKL,YAAa,CACX,KAAM,QACN,QAAS,EACV,EAKD,eAAgB,CACd,KAAM,OACN,QAAS,IACV,EAMD,kBAAmB,CACjB,KAAM,OACN,QAAS,OACT,UAAYC,GAAa,OAAO,KAAKC,yBAAuB,EAAE,SAASD,CAAQ,CAChF,EAKD,gBAAiB,CACf,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,EAMD,aAAc,CACZ,KAAM,QACN,QAAS,EACV,EAMD,iBAAkB,CAChB,KAAM,OACN,QAAS,MACV,EAQD,iBAAkB,CAChB,KAAM,QACN,QAAS,EACV,EASD,SAAU,CACR,KAAM,QACN,QAAS,EACV,EAMD,kBAAmB,CACjB,KAAM,OACN,QAAS,YACV,EAMD,WAAY,CACV,KAAM,OACN,QAAS,UACT,UAAYE,GAAM,OAAO,KAAKC,6BAA2B,EAAE,SAASD,CAAC,CACtE,EAMD,KAAM,CACJ,KAAM,OACN,QAAS,UACT,UAAYE,GAAM,OAAO,KAAKC,uBAAqB,EAAE,SAASD,CAAC,CAChE,EAMD,YAAa,CACX,KAAM,QACN,QAAS,EACV,EAKD,eAAgB,CACd,KAAM,OACN,QAAS,IACV,EAMD,QAAS,CACP,KAAM,OACN,QAAS,MACV,EAMD,iBAAkB,CAChB,KAAM,OACN,QAAS,MACV,EAMD,KAAM,CACJ,KAAM,OACN,QAAS,KACT,UAAYE,GAAM,OAAO,KAAKC,uBAAqB,EAAE,SAASD,CAAC,CAChE,EASD,MAAO,CACL,KAAM,OACN,QAAS,IACV,CACF,EAED,MAAO,CAOL,gBAQA,eACD,EAED,MAAQ,CACN,MAAO,CACL,eAAgB,GAEnB,EAED,SAAU,CACR,kBAAoB,CAClB,MAAO,CACL,OAAQ,KAAK,YACb,UAAW,KAAK,eAChB,iBAAkB,KAAK,iBACvB,SAAU,KAAK,SACf,aAAc,KAAK,kBACnB,WAAY,KAAK,gBACjB,QAAS,KAAK,aACd,WAAY,KAAK,WACjB,KAAM,KAAK,KACX,KAAM,KAAK,KACX,YAAa,KAAK,iBAClB,MAAO,KAAK,OAAO,MACnB,MAAO,KAAK,OAAO,MAEtB,EAED,kBAAoB,CAClB,MAAO,CACL,GAAI,KAAK,QACT,OAAQ,KAAK,YACb,UAAW,KAAK,eAChB,SAAU,KAAK,SACf,WAAY,KAAK,WACjB,KAAM,KAAK,KACX,KAAM,KAAK,KACX,YAAa,KAAK,iBAClB,MAAO,KAAK,OAAO,MACnB,MAAO,KAAK,OAAO,MAEtB,CACF,EAED,SAAW,CACT,KAAK,cAAa,CACnB,EAED,SAAW,CACT,KAAK,cAAa,CACnB,EAED,SAAW,CACTE,EAAe,gBAACC,EAAa,cAAC,KAAK,GAAG,EAAG,KAAK,SAAS,IAAI,CAC5D,EAED,QAAS,CACP,eAAiB,CACf,KAAK,yBAAwB,EAC7B,KAAK,yBAAwB,CAC9B,EAED,0BAA4B,CACtBC,EAAc,eAAC,KAAK,OAAO,OAAO,GAElCA,EAAAA,eAAe,KAAK,OAAO,SAAS,GAAK,CAAC,KAAK,kBACjD,QAAQ,KAAK,sEAAsE,CAEtF,EAED,0BAA4B,CACtBA,EAAc,eAAC,KAAK,OAAO,KAAK,GAE/B,KAAK,kBACR,QAAQ,KAAK,kEAAkE,CAElF,CACF,CACH,+KA9VEC,EAkEO,mBAAA,OAAA,CAjEL,UAAQ,kBACR,MAAM,cACL,MAJLC,EAAAA,sBAIcC,EAAK,KAAA,CAAA,IAEfC,EAAAA,YAcqBC,EAdrBC,aACUC,EAAgB,iBAAA,CACxB,IAAI,cACH,uBAAOC,EAAK,MAAA,eAAA,MAEF,KAAIC,EAAAA,QAEb,CAGE,CAAA,KALqBC,CAAQ,IAAA,CAE/BC,EAGE,WAAAH,EAAA,OAAA,YAAA,CADC,KAAME,EAAQ,IAfzB,QAAAD,EAAA,QAmBM,IAAuB,CAAvBE,aAAuBH,EAAA,OAAA,SAAA,IAnB7B,EAAA,OAsBIG,EAAAA,WA4COH,oBA5CP,IA4CO,CA1CGA,EAAA,OAAO,4BADfI,EA4Bc,YAAAC,EAAA,CAnDpB,IAAA,EAyBS,UAAWV,EAAiB,kBAC5B,uBAAOW,EAAc,eAAA,IACrB,SAAQC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAQF,EAAA,eAAiBE,KAEvB,OAAMP,EAAAA,QAAEQ,GAAK,CACtBb,EAAA,YAYqBc,EAZrBZ,aAYqB,CAXN,GAAAW,KAAUV,EAAgB,kBAAA,CACtC,OAAQO,EAAc,eACtB,uBAAON,EAAK,MAAA,eAAA,MAEF,KAAIC,EAAAA,QAEb,CAGE,CAAA,KALqBC,CAAQ,IAAA,CAE/BC,EAGE,WAAAH,EAAA,OAAA,YAAA,CADC,KAAME,EAAQ,IAvC/B,EAAA,sBA4CmB,KAAID,EAAA,QAEb,CAGE,CALe,MAAAU,KAAK,CAEtBR,EAGE,WAAAH,EAAA,OAAA,eAAA,CADC,MAAOW,EAAK,IAhDzB,EAAA,sBAqDMC,YAAA,EAAAR,cAYqBM,EAZrBZ,EAAA,WAYqB,CAjE3B,IAAA,GAuDgBC,EAAgB,iBAAA,CACvB,uBAAOC,EAAK,MAAA,eAAA,MAEF,KAAIC,EAAAA,QAEb,CAGE,CAAA,KALqBC,CAAQ,IAAA,CAE/BC,EAGE,WAAAH,EAAA,OAAA,YAAA,CADC,KAAME,EAAQ,IA9D3B,EAAA"}
+{"version":3,"file":"split-button.cjs","sources":["../../../components/split_button/split_button.vue"],"sourcesContent":["<template>\n  <span\n    data-qa=\"dt-split-button\"\n    class=\"d-split-btn\"\n    :style=\"{ width }\"\n  >\n    <split-button-alpha\n      v-bind=\"alphaButtonProps\"\n      ref=\"alphaButton\"\n      @click=\"$emit('alpha-clicked')\"\n    >\n      <template #icon=\"{ size: iconSize }\">\n        <!-- @slot Alpha (left) button icon slot -->\n        <slot\n          name=\"alphaIcon\"\n          :size=\"iconSize\"\n        />\n      </template>\n      <!-- @slot Default content slot -->\n      <slot name=\"default\" />\n    </split-button-alpha>\n    <!-- @slot Omega (right) content slot, overrides omega button styling and functionality completely -->\n    <slot name=\"omega\">\n      <dt-dropdown\n        v-if=\"$slots.dropdownList\"\n        :placement=\"dropdownPlacement\"\n        @click=\"isDropdownOpen = true\"\n        @opened=\"open => isDropdownOpen = open\"\n      >\n        <template #anchor=\"attrs\">\n          <split-button-omega\n            v-bind=\"{ ...attrs, ...omegaButtonProps }\"\n            :active=\"isDropdownOpen\"\n            @click=\"$emit('omega-clicked')\"\n          >\n            <template #icon=\"{ size: iconSize }\">\n              <!-- @slot Omega (right) button icon slot -->\n              <slot\n                name=\"omegaIcon\"\n                :size=\"iconSize\"\n              />\n            </template>\n          </split-button-omega>\n        </template>\n        <template #list=\"{ close }\">\n          <!-- @slot Built-in dropdown content slot, use of dt-list-item is highly recommended here. -->\n          <slot\n            name=\"dropdownList\"\n            :close=\"close\"\n          />\n        </template>\n      </dt-dropdown>\n\n      <split-button-omega\n        v-else\n        v-bind=\"omegaButtonProps\"\n        @click=\"$emit('omega-clicked')\"\n      >\n        <template #icon=\"{ size: iconSize }\">\n          <!-- @slot Omega (right) button icon slot -->\n          <slot\n            name=\"omegaIcon\"\n            :size=\"iconSize\"\n          />\n        </template>\n      </split-button-omega>\n    </slot>\n  </span>\n</template>\n\n<script>\nimport {\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_SIZE_MODIFIERS,\n  ICON_POSITION_MODIFIERS,\n} from '@/components/button';\nimport SplitButtonAlpha from './split_button-alpha.vue';\nimport SplitButtonOmega from './split_button-omega.vue';\nimport { DtDropdown } from '@/components/dropdown';\nimport { hasSlotContent, warnIfUnmounted, returnFirstEl } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSplitButton',\n\n  components: {\n    SplitButtonOmega,\n    DtDropdown,\n    SplitButtonAlpha,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines whether the alpha button should have active styling\n     * @values true, false\n     */\n    alphaActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the alpha button\n     */\n    alphaAriaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The position of the icon slot within the alpha button.\n     * @values left, right, top, bottom\n     */\n    alphaIconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * Used to customize the alpha label container\n     */\n    alphaLabelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the alpha button should display a loading animation or not.\n     * @values true, false\n     */\n    alphaLoading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the alpha button,\n     * required if no content is passed to default slot\n     */\n    alphaTooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\">\n     *  (Reference)\n     * </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The direction the dropdown displays relative to the anchor.\n     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\n     */\n    dropdownPlacement: {\n      type: String,\n      default: 'bottom-end',\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * The color of the button.\n     * @values default, muted, danger, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether the omega button should have active styling\n     * @values true, false\n     */\n    omegaActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the omega button\n     */\n    omegaAriaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Element ID, useful in case you need to reference the button\n     * as an external anchor for popover.\n     */\n    omegaId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the omega button,\n     * required as it is an icon only button\n     */\n    omegaTooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Native alpha button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'alpha-clicked',\n\n    /**\n     * Native omega button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'omega-clicked',\n  ],\n\n  data () {\n    return {\n      isDropdownOpen: false,\n    };\n  },\n\n  computed: {\n    alphaButtonProps () {\n      return {\n        active: this.alphaActive,\n        ariaLabel: this.alphaAriaLabel,\n        assertiveOnFocus: this.assertiveOnFocus,\n        disabled: this.disabled,\n        iconPosition: this.alphaIconPosition,\n        labelClass: this.alphaLabelClass,\n        loading: this.alphaLoading,\n        importance: this.importance,\n        kind: this.kind,\n        size: this.size,\n        tooltipText: this.alphaTooltipText,\n        class: this.$attrs.class,\n        style: this.$attrs.style,\n      };\n    },\n\n    omegaButtonProps () {\n      return {\n        id: this.omegaId,\n        active: this.omegaActive,\n        ariaLabel: this.omegaAriaLabel,\n        disabled: this.disabled,\n        importance: this.importance,\n        kind: this.kind,\n        size: this.size,\n        tooltipText: this.omegaTooltipText,\n        class: this.$attrs.class,\n        style: this.$attrs.style,\n      };\n    },\n  },\n\n  created () {\n    this.validateProps();\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  mounted () {\n    warnIfUnmounted(returnFirstEl(this.$el), this.$options.name);\n  },\n\n  methods: {\n    validateProps () {\n      this.validateAlphaButtonProps();\n      this.validateOmegaButtonProps();\n    },\n\n    validateAlphaButtonProps () {\n      if (hasSlotContent(this.$slots.default)) return;\n\n      if (hasSlotContent(this.$slots.alphaIcon) && !this.alphaTooltipText) {\n        console.warn('alpha-tooltip-text prop must be set if alpha button has an icon only');\n      }\n    },\n\n    validateOmegaButtonProps () {\n      if (hasSlotContent(this.$slots.omega)) return;\n\n      if (!this.omegaTooltipText) {\n        console.warn('omega-tooltip-text prop is required as it is an icon-only button');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","SplitButtonOmega","DtDropdown","SplitButtonAlpha","position","ICON_POSITION_MODIFIERS","i","BUTTON_IMPORTANCE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","s","BUTTON_SIZE_MODIFIERS","warnIfUnmounted","returnFirstEl","hasSlotContent","_createElementBlock","_normalizeStyle","$props","_createVNode","_component_split_button_alpha","_mergeProps","$options","_ctx","_withCtx","iconSize","_renderSlot","_createBlock","_component_dt_dropdown","$data","_cache","open","attrs","_component_split_button_omega","close","_openBlock"],"mappings":"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"}

package/dist/vue3/lib/split-button/split-button.js

@@ -1,10 +1,10 @@
 import b from "./split-button-alpha.js";
 import O from "./split-button-omega.js";
-import { warnIfUnmounted as v, returnFirstEl as B, hasSlotContent as n } from "../../common/utils/index.js";
-import { resolveComponent as p, openBlock as r, createElementBlock as S, normalizeStyle as k, createVNode as c, mergeProps as d, withCtx as a, renderSlot as i, createBlock as f } from "vue";
+import { hasSlotContent as n, warnIfUnmounted as v, returnFirstEl as B } from "../../common/utils/index.js";
+import { resolveComponent as p, createElementBlock as S, openBlock as r, normalizeStyle as k, createVNode as c, renderSlot as a, mergeProps as d, withCtx as i, createBlock as f } from "vue";
 import { _ as I } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 import T from "../dropdown/dropdown.js";
-import { ICON_POSITION_MODIFIERS as P, BUTTON_IMPORTANCE_MODIFIERS as $, BUTTON_KIND_MODIFIERS as w, BUTTON_SIZE_MODIFIERS as A } from "../button/button-constants.js";
+import { BUTTON_SIZE_MODIFIERS as P, BUTTON_KIND_MODIFIERS as $, BUTTON_IMPORTANCE_MODIFIERS as w, ICON_POSITION_MODIFIERS as A } from "../button/button-constants.js";
 import "./split-button-constants.js";
 const C = {
   compatConfig: { MODE: 3 },
@@ -38,7 +38,7 @@ const C = {
     alphaIconPosition: {
       type: String,
       default: "left",
-      validator: (t) => Object.keys(P).includes(t)
+      validator: (t) => Object.keys(A).includes(t)
     },
     /**
      * Used to customize the alpha label container
@@ -99,7 +99,7 @@ const C = {
     importance: {
       type: String,
       default: "primary",
-      validator: (t) => Object.keys($).includes(t)
+      validator: (t) => Object.keys(w).includes(t)
     },
     /**
      * The color of the button.
@@ -108,7 +108,7 @@ const C = {
     kind: {
       type: String,
       default: "default",
-      validator: (t) => Object.keys(w).includes(t)
+      validator: (t) => Object.keys($).includes(t)
     },
     /**
      * Determines whether the omega button should have active styling
@@ -148,7 +148,7 @@ const C = {
     size: {
       type: String,
       default: "md",
-      validator: (t) => Object.keys(A).includes(t)
+      validator: (t) => Object.keys(P).includes(t)
     },
     /**
      * Button width, accepts
@@ -248,41 +248,41 @@ function D(t, o, m, _, s, l) {
       ref: "alphaButton",
       onClick: o[0] || (o[0] = (e) => t.$emit("alpha-clicked"))
     }), {
-      icon: a(({ size: e }) => [
-        i(t.$slots, "alphaIcon", { size: e })
+      icon: i(({ size: e }) => [
+        a(t.$slots, "alphaIcon", { size: e })
       ]),
-      default: a(() => [
-        i(t.$slots, "default")
+      default: i(() => [
+        a(t.$slots, "default")
       ]),
       _: 3
     }, 16),
-    i(t.$slots, "omega", {}, () => [
+    a(t.$slots, "omega", {}, () => [
       t.$slots.dropdownList ? (r(), f(y, {
         key: 0,
         placement: m.dropdownPlacement,
         onClick: o[2] || (o[2] = (e) => s.isDropdownOpen = !0),
         onOpened: o[3] || (o[3] = (e) => s.isDropdownOpen = e)
       }, {
-        anchor: a((e) => [
+        anchor: i((e) => [
           c(u, d({ ...e, ...l.omegaButtonProps }, {
             active: s.isDropdownOpen,
             onClick: o[1] || (o[1] = (h) => t.$emit("omega-clicked"))
           }), {
-            icon: a(({ size: h }) => [
-              i(t.$slots, "omegaIcon", { size: h })
+            icon: i(({ size: h }) => [
+              a(t.$slots, "omegaIcon", { size: h })
             ]),
             _: 2
           }, 1040, ["active"])
         ]),
-        list: a(({ close: e }) => [
-          i(t.$slots, "dropdownList", { close: e })
+        list: i(({ close: e }) => [
+          a(t.$slots, "dropdownList", { close: e })
         ]),
         _: 3
       }, 8, ["placement"])) : (r(), f(u, d({ key: 1 }, l.omegaButtonProps, {
         onClick: o[4] || (o[4] = (e) => t.$emit("omega-clicked"))
       }), {
-        icon: a(({ size: e }) => [
-          i(t.$slots, "omegaIcon", { size: e })
+        icon: i(({ size: e }) => [
+          a(t.$slots, "omegaIcon", { size: e })
         ]),
         _: 3
       }, 16))

package/dist/vue3/lib/split-button/split-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-button.js","sources":["../../../components/split_button/split_button.vue"],"sourcesContent":["<template>\n  <span\n    data-qa=\"dt-split-button\"\n    class=\"d-split-btn\"\n    :style=\"{ width }\"\n  >\n    <split-button-alpha\n      v-bind=\"alphaButtonProps\"\n      ref=\"alphaButton\"\n      @click=\"$emit('alpha-clicked')\"\n    >\n      <template #icon=\"{ size: iconSize }\">\n        <!-- @slot Alpha (left) button icon slot -->\n        <slot\n          name=\"alphaIcon\"\n          :size=\"iconSize\"\n        />\n      </template>\n      <!-- @slot Default content slot -->\n      <slot name=\"default\" />\n    </split-button-alpha>\n    <!-- @slot Omega (right) content slot, overrides omega button styling and functionality completely -->\n    <slot name=\"omega\">\n      <dt-dropdown\n        v-if=\"$slots.dropdownList\"\n        :placement=\"dropdownPlacement\"\n        @click=\"isDropdownOpen = true\"\n        @opened=\"open => isDropdownOpen = open\"\n      >\n        <template #anchor=\"attrs\">\n          <split-button-omega\n            v-bind=\"{ ...attrs, ...omegaButtonProps }\"\n            :active=\"isDropdownOpen\"\n            @click=\"$emit('omega-clicked')\"\n          >\n            <template #icon=\"{ size: iconSize }\">\n              <!-- @slot Omega (right) button icon slot -->\n              <slot\n                name=\"omegaIcon\"\n                :size=\"iconSize\"\n              />\n            </template>\n          </split-button-omega>\n        </template>\n        <template #list=\"{ close }\">\n          <!-- @slot Built-in dropdown content slot, use of dt-list-item is highly recommended here. -->\n          <slot\n            name=\"dropdownList\"\n            :close=\"close\"\n          />\n        </template>\n      </dt-dropdown>\n\n      <split-button-omega\n        v-else\n        v-bind=\"omegaButtonProps\"\n        @click=\"$emit('omega-clicked')\"\n      >\n        <template #icon=\"{ size: iconSize }\">\n          <!-- @slot Omega (right) button icon slot -->\n          <slot\n            name=\"omegaIcon\"\n            :size=\"iconSize\"\n          />\n        </template>\n      </split-button-omega>\n    </slot>\n  </span>\n</template>\n\n<script>\nimport {\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_SIZE_MODIFIERS,\n  ICON_POSITION_MODIFIERS,\n} from '@/components/button';\nimport SplitButtonAlpha from './split_button-alpha.vue';\nimport SplitButtonOmega from './split_button-omega.vue';\nimport { DtDropdown } from '@/components/dropdown';\nimport { hasSlotContent, warnIfUnmounted, returnFirstEl } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSplitButton',\n\n  components: {\n    SplitButtonOmega,\n    DtDropdown,\n    SplitButtonAlpha,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines whether the alpha button should have active styling\n     * @values true, false\n     */\n    alphaActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the alpha button\n     */\n    alphaAriaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The position of the icon slot within the alpha button.\n     * @values left, right, top, bottom\n     */\n    alphaIconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * Used to customize the alpha label container\n     */\n    alphaLabelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the alpha button should display a loading animation or not.\n     * @values true, false\n     */\n    alphaLoading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the alpha button,\n     * required if no content is passed to default slot\n     */\n    alphaTooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\">\n     *  (Reference)\n     * </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The direction the dropdown displays relative to the anchor.\n     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\n     */\n    dropdownPlacement: {\n      type: String,\n      default: 'bottom-end',\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * The color of the button.\n     * @values default, muted, danger, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether the omega button should have active styling\n     * @values true, false\n     */\n    omegaActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the omega button\n     */\n    omegaAriaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Element ID, useful in case you need to reference the button\n     * as an external anchor for popover.\n     */\n    omegaId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the omega button,\n     * required as it is an icon only button\n     */\n    omegaTooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Native alpha button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'alpha-clicked',\n\n    /**\n     * Native omega button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'omega-clicked',\n  ],\n\n  data () {\n    return {\n      isDropdownOpen: false,\n    };\n  },\n\n  computed: {\n    alphaButtonProps () {\n      return {\n        active: this.alphaActive,\n        ariaLabel: this.alphaAriaLabel,\n        assertiveOnFocus: this.assertiveOnFocus,\n        disabled: this.disabled,\n        iconPosition: this.alphaIconPosition,\n        labelClass: this.alphaLabelClass,\n        loading: this.alphaLoading,\n        importance: this.importance,\n        kind: this.kind,\n        size: this.size,\n        tooltipText: this.alphaTooltipText,\n        class: this.$attrs.class,\n        style: this.$attrs.style,\n      };\n    },\n\n    omegaButtonProps () {\n      return {\n        id: this.omegaId,\n        active: this.omegaActive,\n        ariaLabel: this.omegaAriaLabel,\n        disabled: this.disabled,\n        importance: this.importance,\n        kind: this.kind,\n        size: this.size,\n        tooltipText: this.omegaTooltipText,\n        class: this.$attrs.class,\n        style: this.$attrs.style,\n      };\n    },\n  },\n\n  created () {\n    this.validateProps();\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  mounted () {\n    warnIfUnmounted(returnFirstEl(this.$el), this.$options.name);\n  },\n\n  methods: {\n    validateProps () {\n      this.validateAlphaButtonProps();\n      this.validateOmegaButtonProps();\n    },\n\n    validateAlphaButtonProps () {\n      if (hasSlotContent(this.$slots.default)) return;\n\n      if (hasSlotContent(this.$slots.alphaIcon) && !this.alphaTooltipText) {\n        console.warn('alpha-tooltip-text prop must be set if alpha button has an icon only');\n      }\n    },\n\n    validateOmegaButtonProps () {\n      if (hasSlotContent(this.$slots.omega)) return;\n\n      if (!this.omegaTooltipText) {\n        console.warn('omega-tooltip-text prop is required as it is an icon-only button');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","SplitButtonOmega","DtDropdown","SplitButtonAlpha","position","ICON_POSITION_MODIFIERS","i","BUTTON_IMPORTANCE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","s","BUTTON_SIZE_MODIFIERS","warnIfUnmounted","returnFirstEl","hasSlotContent","_createElementBlock","_normalizeStyle","$props","_createVNode","_component_split_button_alpha","_mergeProps","$options","_ctx","_withCtx","iconSize","_renderSlot","_createBlock","_component_dt_dropdown","$data","_cache","open","attrs","_component_split_button_omega","close","_openBlock"],"mappings":"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"}
+{"version":3,"file":"split-button.js","sources":["../../../components/split_button/split_button.vue"],"sourcesContent":["<template>\n  <span\n    data-qa=\"dt-split-button\"\n    class=\"d-split-btn\"\n    :style=\"{ width }\"\n  >\n    <split-button-alpha\n      v-bind=\"alphaButtonProps\"\n      ref=\"alphaButton\"\n      @click=\"$emit('alpha-clicked')\"\n    >\n      <template #icon=\"{ size: iconSize }\">\n        <!-- @slot Alpha (left) button icon slot -->\n        <slot\n          name=\"alphaIcon\"\n          :size=\"iconSize\"\n        />\n      </template>\n      <!-- @slot Default content slot -->\n      <slot name=\"default\" />\n    </split-button-alpha>\n    <!-- @slot Omega (right) content slot, overrides omega button styling and functionality completely -->\n    <slot name=\"omega\">\n      <dt-dropdown\n        v-if=\"$slots.dropdownList\"\n        :placement=\"dropdownPlacement\"\n        @click=\"isDropdownOpen = true\"\n        @opened=\"open => isDropdownOpen = open\"\n      >\n        <template #anchor=\"attrs\">\n          <split-button-omega\n            v-bind=\"{ ...attrs, ...omegaButtonProps }\"\n            :active=\"isDropdownOpen\"\n            @click=\"$emit('omega-clicked')\"\n          >\n            <template #icon=\"{ size: iconSize }\">\n              <!-- @slot Omega (right) button icon slot -->\n              <slot\n                name=\"omegaIcon\"\n                :size=\"iconSize\"\n              />\n            </template>\n          </split-button-omega>\n        </template>\n        <template #list=\"{ close }\">\n          <!-- @slot Built-in dropdown content slot, use of dt-list-item is highly recommended here. -->\n          <slot\n            name=\"dropdownList\"\n            :close=\"close\"\n          />\n        </template>\n      </dt-dropdown>\n\n      <split-button-omega\n        v-else\n        v-bind=\"omegaButtonProps\"\n        @click=\"$emit('omega-clicked')\"\n      >\n        <template #icon=\"{ size: iconSize }\">\n          <!-- @slot Omega (right) button icon slot -->\n          <slot\n            name=\"omegaIcon\"\n            :size=\"iconSize\"\n          />\n        </template>\n      </split-button-omega>\n    </slot>\n  </span>\n</template>\n\n<script>\nimport {\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_SIZE_MODIFIERS,\n  ICON_POSITION_MODIFIERS,\n} from '@/components/button';\nimport SplitButtonAlpha from './split_button-alpha.vue';\nimport SplitButtonOmega from './split_button-omega.vue';\nimport { DtDropdown } from '@/components/dropdown';\nimport { hasSlotContent, warnIfUnmounted, returnFirstEl } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSplitButton',\n\n  components: {\n    SplitButtonOmega,\n    DtDropdown,\n    SplitButtonAlpha,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines whether the alpha button should have active styling\n     * @values true, false\n     */\n    alphaActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the alpha button\n     */\n    alphaAriaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The position of the icon slot within the alpha button.\n     * @values left, right, top, bottom\n     */\n    alphaIconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * Used to customize the alpha label container\n     */\n    alphaLabelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the alpha button should display a loading animation or not.\n     * @values true, false\n     */\n    alphaLoading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the alpha button,\n     * required if no content is passed to default slot\n     */\n    alphaTooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\">\n     *  (Reference)\n     * </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The direction the dropdown displays relative to the anchor.\n     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\n     */\n    dropdownPlacement: {\n      type: String,\n      default: 'bottom-end',\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * The color of the button.\n     * @values default, muted, danger, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether the omega button should have active styling\n     * @values true, false\n     */\n    omegaActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the omega button\n     */\n    omegaAriaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Element ID, useful in case you need to reference the button\n     * as an external anchor for popover.\n     */\n    omegaId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the omega button,\n     * required as it is an icon only button\n     */\n    omegaTooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Native alpha button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'alpha-clicked',\n\n    /**\n     * Native omega button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'omega-clicked',\n  ],\n\n  data () {\n    return {\n      isDropdownOpen: false,\n    };\n  },\n\n  computed: {\n    alphaButtonProps () {\n      return {\n        active: this.alphaActive,\n        ariaLabel: this.alphaAriaLabel,\n        assertiveOnFocus: this.assertiveOnFocus,\n        disabled: this.disabled,\n        iconPosition: this.alphaIconPosition,\n        labelClass: this.alphaLabelClass,\n        loading: this.alphaLoading,\n        importance: this.importance,\n        kind: this.kind,\n        size: this.size,\n        tooltipText: this.alphaTooltipText,\n        class: this.$attrs.class,\n        style: this.$attrs.style,\n      };\n    },\n\n    omegaButtonProps () {\n      return {\n        id: this.omegaId,\n        active: this.omegaActive,\n        ariaLabel: this.omegaAriaLabel,\n        disabled: this.disabled,\n        importance: this.importance,\n        kind: this.kind,\n        size: this.size,\n        tooltipText: this.omegaTooltipText,\n        class: this.$attrs.class,\n        style: this.$attrs.style,\n      };\n    },\n  },\n\n  created () {\n    this.validateProps();\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  mounted () {\n    warnIfUnmounted(returnFirstEl(this.$el), this.$options.name);\n  },\n\n  methods: {\n    validateProps () {\n      this.validateAlphaButtonProps();\n      this.validateOmegaButtonProps();\n    },\n\n    validateAlphaButtonProps () {\n      if (hasSlotContent(this.$slots.default)) return;\n\n      if (hasSlotContent(this.$slots.alphaIcon) && !this.alphaTooltipText) {\n        console.warn('alpha-tooltip-text prop must be set if alpha button has an icon only');\n      }\n    },\n\n    validateOmegaButtonProps () {\n      if (hasSlotContent(this.$slots.omega)) return;\n\n      if (!this.omegaTooltipText) {\n        console.warn('omega-tooltip-text prop is required as it is an icon-only button');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","SplitButtonOmega","DtDropdown","SplitButtonAlpha","position","ICON_POSITION_MODIFIERS","i","BUTTON_IMPORTANCE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","s","BUTTON_SIZE_MODIFIERS","warnIfUnmounted","returnFirstEl","hasSlotContent","_createElementBlock","_normalizeStyle","$props","_createVNode","_component_split_button_alpha","_mergeProps","$options","_ctx","_withCtx","iconSize","_renderSlot","_createBlock","_component_dt_dropdown","$data","_cache","open","attrs","_component_split_button_omega","close","_openBlock"],"mappings":"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"}

package/dist/vue3/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,EAElHC,EAAA,CACb,mBAAAH,EACA,gCAAAC,EACA,aAAAC,CACF"}
+{"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"}

package/dist/vue3/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,GAElHC,IAAA;AAAA,EACb,oBAAAH;AAAA,EACA,iCAAAC;AAAA,EACA,cAAAC;AACF;"}
+{"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;"}

package/dist/vue3/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  compatConfig: { MODE: 3 },\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","_createBlock","_resolveDynamicComponent","$props","_normalizeClass","$options","_withCtx","_renderSlot","_ctx"],"mappings":"uRAoBKA,EAAU,CACb,aAAc,CAAE,KAAM,CAAG,EACzB,KAAM,UAEN,MAAO,CASL,UAAW,CACT,KAAM,CAAC,OAAQ,MAAM,EACrB,QAAS,SACT,UAAYC,GAAcC,EAAkB,mBAACD,CAAS,CACvD,EAKD,GAAI,CACF,KAAM,OACN,QAAS,KACV,EAUD,IAAK,CACH,KAAM,CAAC,OAAQ,MAAM,EACrB,QAAS,IACT,UAAYE,GAAQC,EAAY,aAACD,CAAG,CACrC,CACF,EAED,MAAQ,CACN,MAAO,CACL,mBAAAE,EAAkB,gCAClBC,EAAY,aACZ,gCAAAC,EAA+B,gCAElC,EAED,SAAU,CACR,YAAc,CACZ,OAAOC,EAAkB,mBAAC,KAAK,GAAG,CACnC,EAED,kBAAoB,CAClB,OAAOC,EAAwB,yBAAC,KAAK,SAAS,CAC/C,EAED,iBAAmB,CACjB,OAAOC,EAAoB,qBAAC,KAAK,UAAW,KAAK,GAAG,CACrD,CACF,CACH,+CAlFEC,EAWY,YAZdC,0BAESC,EAAE,EAAA,EAAA,CACN,MAHLC,EAAAA,eAAA,WAGqCC,EAAgB,iBAAQA,EAAU,WAAQA,EAAe,oBAH9F,QAAAC,EAAA,QAWI,IAAQ,CAARC,aAAQC,EAAA,OAAA,SAAA,IAXZ,EAAA"}
+{"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  compatConfig: { MODE: 3 },\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","_createBlock","_resolveDynamicComponent","$props","_normalizeClass","$options","_withCtx","_renderSlot","_ctx"],"mappings":"uRAoBKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,UAEN,MAAO,CASL,UAAW,CACT,KAAM,CAAC,OAAQ,MAAM,EACrB,QAAS,SACT,UAAYC,GAAcC,EAAAA,mBAAmBD,CAAS,GAMxD,GAAI,CACF,KAAM,OACN,QAAS,OAWX,IAAK,CACH,KAAM,CAAC,OAAQ,MAAM,EACrB,QAAS,IACT,UAAYE,GAAQC,EAAAA,aAAaD,CAAG,IAIxC,MAAQ,CACN,MAAO,CACL,mBAAAE,EAAAA,gCACAC,EAAAA,aACA,gCAAAC,EAAAA,gCAEJ,EAEA,SAAU,CACR,YAAc,CACZ,OAAOC,EAAAA,mBAAmB,KAAK,GAAG,CACpC,EAEA,kBAAoB,CAClB,OAAOC,EAAAA,yBAAyB,KAAK,SAAS,CAChD,EAEA,iBAAmB,CACjB,OAAOC,EAAAA,qBAAqB,KAAK,UAAW,KAAK,GAAG,CACtD,EAEJ,+CAlFEC,EAAAA,YADFC,EAAAA,wBAESC,EAAA,EAAE,EAAA,CACN,MAHLC,EAAAA,eAAA,WAGqCC,EAAA,iBAAwBA,EAAA,WAAkBA,EAAA,oBAH/E,QAAAC,EAAAA,QAWI,IAAQ,CAARC,aAAQC,EAAA,OAAA,SAAA,IAXZ,EAAA"}

package/dist/vue3/lib/stack/stack.js

@@ -1,7 +1,7 @@
-import { DT_STACK_DIRECTION as r, DT_STACK_GAP as o, DT_STACK_RESPONSIVE_BREAKPOINTS as i } from "./stack-constants.js";
-import { directionValidator as s, gapValidator as n } from "./validators.js";
-import { getDefaultGapClass as c, getDefaultDirectionClass as l, getResponsiveClasses as d } from "./utils.js";
-import { openBlock as p, createBlock as f, resolveDynamicComponent as u, normalizeClass as m, withCtx as _, renderSlot as D } from "vue";
+import { DT_STACK_RESPONSIVE_BREAKPOINTS as r, DT_STACK_GAP as o, DT_STACK_DIRECTION as i } from "./stack-constants.js";
+import { gapValidator as s, directionValidator as n } from "./validators.js";
+import { getResponsiveClasses as c, getDefaultDirectionClass as l, getDefaultGapClass as d } from "./utils.js";
+import { createBlock as p, openBlock as f, resolveDynamicComponent as u, normalizeClass as m, withCtx as _, renderSlot as D } from "vue";
 import { _ as S } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const g = {
   compatConfig: { MODE: 3 },
@@ -18,7 +18,7 @@ const g = {
     direction: {
       type: [String, Object],
       default: "column",
-      validator: (t) => s(t)
+      validator: (t) => n(t)
     },
     /**
      * Set this prop to render stack as a specific HTML element.
@@ -38,30 +38,30 @@ const g = {
     gap: {
       type: [String, Object],
       default: "0",
-      validator: (t) => n(t)
+      validator: (t) => s(t)
     }
   },
   data() {
     return {
-      DT_STACK_DIRECTION: r,
+      DT_STACK_DIRECTION: i,
       DT_STACK_GAP: o,
-      DT_STACK_RESPONSIVE_BREAKPOINTS: i
+      DT_STACK_RESPONSIVE_BREAKPOINTS: r
     };
   },
   computed: {
     defaultGap() {
-      return c(this.gap);
+      return d(this.gap);
     },
     defaultDirection() {
       return l(this.direction);
     },
     stackResponsive() {
-      return d(this.direction, this.gap);
+      return c(this.direction, this.gap);
     }
   }
 };
 function C(t, T, a, k, v, e) {
-  return p(), f(u(a.as), {
+  return f(), p(u(a.as), {
     class: m([
       "d-stack",
       e.defaultDirection,

package/dist/vue3/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  compatConfig: { MODE: 3 },\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","_createBlock","_resolveDynamicComponent","$props","_normalizeClass","$options","_withCtx","_renderSlot","_ctx"],"mappings":";;;;;AAoBA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASL,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAW,CAACC,MAAcC,EAAmBD,CAAS;AAAA,IACvD;AAAA;AAAA;AAAA;AAAA,IAKD,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUD,KAAK;AAAA,MACH,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAW,CAACE,MAAQC,EAAaD,CAAG;AAAA,IACrC;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,oBAAAE;AAAA,MACA,cAAAC;AAAA,MACA,iCAAAC;AAAA;EAEH;AAAA,EAED,UAAU;AAAA,IACR,aAAc;AACZ,aAAOC,EAAmB,KAAK,GAAG;AAAA,IACnC;AAAA,IAED,mBAAoB;AAClB,aAAOC,EAAyB,KAAK,SAAS;AAAA,IAC/C;AAAA,IAED,kBAAmB;AACjB,aAAOC,EAAqB,KAAK,WAAW,KAAK,GAAG;AAAA,IACrD;AAAA,EACF;AACH;;cAlFEC,EADFC,EAESC,EAAE,EAAA,GAAA;AAAA,IACN,OAHLC,EAAA;AAAA;MAGqCC,EAAgB;AAAA,MAAQA,EAAU;AAAA,MAAQA,EAAe;AAAA;;IAH9F,SAAAC,EAWI,MAAQ;AAAA,MAARC,EAAQC,EAAA,QAAA,SAAA;AAAA;IAXZ,GAAA;AAAA;;;"}
+{"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  compatConfig: { MODE: 3 },\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","_createBlock","_resolveDynamicComponent","$props","_normalizeClass","$options","_withCtx","_renderSlot","_ctx"],"mappings":";;;;;AAoBA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASL,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAW,CAACC,MAAcC,EAAmBD,CAAS;AAAA;;;;IAMxD,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;;;;IAWX,KAAK;AAAA,MACH,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAW,CAACE,MAAQC,EAAaD,CAAG;AAAA;;EAIxC,OAAQ;AACN,WAAO;AAAA,MACL,oBAAAE;AAAA,MACA,cAAAC;AAAA,MACA,iCAAAC;AAAA;EAEJ;AAAA,EAEA,UAAU;AAAA,IACR,aAAc;AACZ,aAAOC,EAAmB,KAAK,GAAG;AAAA,IACpC;AAAA,IAEA,mBAAoB;AAClB,aAAOC,EAAyB,KAAK,SAAS;AAAA,IAChD;AAAA,IAEA,kBAAmB;AACjB,aAAOC,EAAqB,KAAK,WAAW,KAAK,GAAG;AAAA,IACtD;AAAA;AAEJ;;cAlFEC,EADFC,EAESC,EAAA,EAAE,GAAA;AAAA,IACN,OAHLC,EAAA;AAAA;MAGqCC,EAAA;AAAA,MAAwBA,EAAA;AAAA,MAAkBA,EAAA;AAAA;;IAH/E,SAAAC,EAWI,MAAQ;AAAA,MAARC,EAAQC,EAAA,QAAA,SAAA;AAAA;IAXZ,GAAA;AAAA;;;"}

package/dist/vue3/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,EAAkB,mBAAC,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,CAAc,EAAGJ,EAElC,OAAQD,EAAoBK,CAAY,EAAuC,KAAnCH,EAAAA,mBAAmBG,CAAY,CAC/E,KAAW,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,EAAkB,mBAACC,EAAmBF,CAAS,CAAC,CAAC,GAC7D,IACN,CAEA,SAASS,EAA8BT,EAAW,CAChD,OAAIG,EAAkBH,CAAS,IAAM,SAC5B,CACL,GAAGU,EAA+B,gCAAC,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,EAA+B,gCAAC,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,EAAY,aAAC,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 } 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"}

package/dist/vue3/lib/stack/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","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":";AAEA,SAASA,EAAqBC,GAAW;AACvC,SAAOA,MAAcC,EAAmB;AAC1C;AAEA,SAASC,EAAoBF,GAAW;AACtC,MAAIG,EAAkBH,CAAS,MAAM;AACnC,WAAQD,EAAoBC,CAAS,IAAoC,OAAhCC,EAAmBD,CAAS;AAChE,MAAIG,EAAkBH,CAAS,MAAM,UAAU;AACpD,UAAM,EAAE,SAASI,EAAc,IAAGJ;AAElC,WAAQD,EAAoBK,CAAY,IAAuC,OAAnCH,EAAmBG,CAAY;AAAA,EAC/E;AAAW,WAAO;AAClB;AAEA,SAASC,EAAcC,GAAK;AAC1B,SAAI,OAAOA,KAAQ,WACVA,IACE,OAAOA,KAAQ,WACjBA,EAAI,UACG;AAClB;AAEO,SAASH,EAAmBI,GAAO;AACxC,SAAO,OAAOA;AAChB;AAEO,SAASC,EAA0BR,GAAW;AACnD,SAAOE,EAAmBF,CAAS,IAC/B,YAAYC,EAAmBC,EAAmBF,CAAS,CAAC,CAAC,KAC7D;AACN;AAEA,SAASS,EAA8BT,GAAW;AAChD,SAAIG,EAAkBH,CAAS,MAAM,WAC5B;AAAA,IACL,GAAGU,EAAgC,IAAI,CAACC,MAC/BX,EAAUW,CAAU,IACvB,YAAYA,CAAU,IAAIX,EAAUW,CAAU,CAAC,KAC/C,IACL;AAAA,EAAC,IACU,CAAA;AAClB;AAEA,SAASC,EAAwBN,GAAK;AACpC,SAAI,OAAOA,KAAQ,WACV;AAAA,IACL,GAAGI,EAAgC,IAAI,CAACC,MAC/BE,EAAa,SAASP,EAAIK,CAAU,CAAC,IACxC,YAAYA,CAAU,QAAQL,EAAIK,CAAU,CAAC,KAC7C,IACL;AAAA,EAAC,IACU,CAAA;AAClB;AAEO,SAASG,EAAsBd,GAAWM,GAAK;AACpD,SAAO;AAAA,IACL,GAAGG,EAA6BT,CAAS;AAAA,IACzC,GAAGY,EAAuBN,CAAG;AAAA,EACjC;AACA;AAEO,SAASS,EAAoBT,GAAK;AACvC,QAAMU,IAAWX,EAAaC,CAAG;AACjC,SAAOO,EAAa,SAASG,CAAQ,IAAI,gBAAgBA,CAAQ,KAAK;AACxE;"}
+{"version":3,"file":"utils.js","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":";AAEA,SAASA,EAAqBC,GAAW;AACvC,SAAOA,MAAcC,EAAmB;AAC1C;AAEA,SAASC,EAAoBF,GAAW;AACtC,MAAIG,EAAkBH,CAAS,MAAM;AACnC,WAAQD,EAAoBC,CAAS,IAAoC,OAAhCC,EAAmBD,CAAS;AAChE,MAAIG,EAAkBH,CAAS,MAAM,UAAU;AACpD,UAAM,EAAE,SAASI,EAAY,IAAKJ;AAElC,WAAQD,EAAoBK,CAAY,IAAuC,OAAnCH,EAAmBG,CAAY;AAAA,EAC7E;AAAS,WAAO;AAClB;AAEA,SAASC,EAAcC,GAAK;AAC1B,SAAI,OAAOA,KAAQ,WACVA,IACE,OAAOA,KAAQ,WACjBA,EAAI,UACG;AAClB;AAEO,SAASH,EAAmBI,GAAO;AACxC,SAAO,OAAOA;AAChB;AAEO,SAASC,EAA0BR,GAAW;AACnD,SAAOE,EAAmBF,CAAS,IAC/B,YAAYC,EAAmBC,EAAmBF,CAAS,CAAC,CAAC,KAC7D;AACN;AAEA,SAASS,EAA8BT,GAAW;AAChD,SAAIG,EAAkBH,CAAS,MAAM,WAC5B;AAAA,IACL,GAAGU,EAAgC,IAAI,CAACC,MAC/BX,EAAUW,CAAU,IACvB,YAAYA,CAAU,IAAIX,EAAUW,CAAU,CAAC,KAC/C,IACL;AAAA,EAAC,IACU,CAAA;AAClB;AAEA,SAASC,EAAwBN,GAAK;AACpC,SAAI,OAAOA,KAAQ,WACV;AAAA,IACL,GAAGI,EAAgC,IAAI,CAACC,MAC/BE,EAAa,SAASP,EAAIK,CAAU,CAAC,IACxC,YAAYA,CAAU,QAAQL,EAAIK,CAAU,CAAC,KAC7C,IACL;AAAA,EAAC,IACU,CAAA;AAClB;AAEO,SAASG,EAAsBd,GAAWM,GAAK;AACpD,SAAO;AAAA,IACL,GAAGG,EAA6BT,CAAS;AAAA,IACzC,GAAGY,EAAuBN,CAAG;AAAA,EACjC;AACA;AAEO,SAASS,EAAoBT,GAAK;AACvC,QAAMU,IAAWX,EAAaC,CAAG;AACjC,SAAOO,EAAa,SAASG,CAAQ,IAAI,gBAAgBA,CAAQ,KAAK;AACxE;"}

package/dist/vue3/lib/stack/validators.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"validators.cjs","sources":["../../../components/stack/validators.js"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP } from '@/components/stack/stack_constants';\nimport { directionPropType } from './utils';\n\nexport function directionValidator (direction) {\n  if (directionPropType(direction) === 'string') {\n    return Object.keys(DT_STACK_DIRECTION).includes(direction);\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);\n  } else { return null; }\n}\n\nexport function gapValidator (gap) {\n  if (typeof gap === 'string') {\n    return DT_STACK_GAP.includes(gap);\n  }\n  if (typeof gap === 'object') {\n    const { default: defaultStyle } = gap;\n\n    return DT_STACK_GAP.includes(defaultStyle);\n  }\n}\n"],"names":["directionValidator","direction","directionPropType","DT_STACK_DIRECTION","defaultStyle","gapValidator","gap","DT_STACK_GAP"],"mappings":"kJAGO,SAASA,EAAoBC,EAAW,CAC7C,GAAIC,EAAiB,kBAACD,CAAS,IAAM,SACnC,OAAO,OAAO,KAAKE,EAAAA,kBAAkB,EAAE,SAASF,CAAS,EACpD,GAAIC,EAAiB,kBAACD,CAAS,IAAM,SAAU,CACpD,KAAM,CAAE,QAASG,CAAc,EAAGH,EAElC,OAAO,OAAO,KAAKE,EAAAA,kBAAkB,EAAE,SAASC,CAAY,CAChE,KAAW,QAAO,IAClB,CAEO,SAASC,EAAcC,EAAK,CACjC,GAAI,OAAOA,GAAQ,SACjB,OAAOC,EAAY,aAAC,SAASD,CAAG,EAElC,GAAI,OAAOA,GAAQ,SAAU,CAC3B,KAAM,CAAE,QAASF,CAAc,EAAGE,EAElC,OAAOC,EAAY,aAAC,SAASH,CAAY,CAC1C,CACH"}
+{"version":3,"file":"validators.cjs","sources":["../../../components/stack/validators.js"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP } from '@/components/stack/stack_constants';\nimport { directionPropType } from './utils';\n\nexport function directionValidator (direction) {\n  if (directionPropType(direction) === 'string') {\n    return Object.keys(DT_STACK_DIRECTION).includes(direction);\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);\n  } else { return null; }\n}\n\nexport function gapValidator (gap) {\n  if (typeof gap === 'string') {\n    return DT_STACK_GAP.includes(gap);\n  }\n  if (typeof gap === 'object') {\n    const { default: defaultStyle } = gap;\n\n    return DT_STACK_GAP.includes(defaultStyle);\n  }\n}\n"],"names":["directionValidator","direction","directionPropType","DT_STACK_DIRECTION","defaultStyle","gapValidator","gap","DT_STACK_GAP"],"mappings":"kJAGO,SAASA,EAAoBC,EAAW,CAC7C,GAAIC,EAAAA,kBAAkBD,CAAS,IAAM,SACnC,OAAO,OAAO,KAAKE,EAAAA,kBAAkB,EAAE,SAASF,CAAS,EACpD,GAAIC,EAAAA,kBAAkBD,CAAS,IAAM,SAAU,CACpD,KAAM,CAAE,QAASG,CAAY,EAAKH,EAElC,OAAO,OAAO,KAAKE,EAAAA,kBAAkB,EAAE,SAASC,CAAY,CAC9D,KAAS,QAAO,IAClB,CAEO,SAASC,EAAcC,EAAK,CACjC,GAAI,OAAOA,GAAQ,SACjB,OAAOC,EAAAA,aAAa,SAASD,CAAG,EAElC,GAAI,OAAOA,GAAQ,SAAU,CAC3B,KAAM,CAAE,QAASF,CAAY,EAAKE,EAElC,OAAOC,EAAAA,aAAa,SAASH,CAAY,CAC3C,CACF"}

package/dist/vue3/lib/stack/validators.js

@@ -1,20 +1,20 @@
-import { DT_STACK_DIRECTION as r, DT_STACK_GAP as n } from "./stack-constants.js";
+import { DT_STACK_GAP as r, DT_STACK_DIRECTION as n } from "./stack-constants.js";
 import { directionPropType as l } from "./utils.js";
 function f(e) {
   if (l(e) === "string")
-    return Object.keys(r).includes(e);
+    return Object.keys(n).includes(e);
   if (l(e) === "object") {
     const { default: t } = e;
-    return Object.keys(r).includes(t);
+    return Object.keys(n).includes(t);
   } else
     return null;
 }
 function i(e) {
   if (typeof e == "string")
-    return n.includes(e);
+    return r.includes(e);
   if (typeof e == "object") {
     const { default: t } = e;
-    return n.includes(t);
+    return r.includes(t);
   }
 }
 export {

package/dist/vue3/lib/stack/validators.js.map

@@ -1 +1 @@
-{"version":3,"file":"validators.js","sources":["../../../components/stack/validators.js"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP } from '@/components/stack/stack_constants';\nimport { directionPropType } from './utils';\n\nexport function directionValidator (direction) {\n  if (directionPropType(direction) === 'string') {\n    return Object.keys(DT_STACK_DIRECTION).includes(direction);\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);\n  } else { return null; }\n}\n\nexport function gapValidator (gap) {\n  if (typeof gap === 'string') {\n    return DT_STACK_GAP.includes(gap);\n  }\n  if (typeof gap === 'object') {\n    const { default: defaultStyle } = gap;\n\n    return DT_STACK_GAP.includes(defaultStyle);\n  }\n}\n"],"names":["directionValidator","direction","directionPropType","DT_STACK_DIRECTION","defaultStyle","gapValidator","gap","DT_STACK_GAP"],"mappings":";;AAGO,SAASA,EAAoBC,GAAW;AAC7C,MAAIC,EAAkBD,CAAS,MAAM;AACnC,WAAO,OAAO,KAAKE,CAAkB,EAAE,SAASF,CAAS;AACpD,MAAIC,EAAkBD,CAAS,MAAM,UAAU;AACpD,UAAM,EAAE,SAASG,EAAc,IAAGH;AAElC,WAAO,OAAO,KAAKE,CAAkB,EAAE,SAASC,CAAY;AAAA,EAChE;AAAW,WAAO;AAClB;AAEO,SAASC,EAAcC,GAAK;AACjC,MAAI,OAAOA,KAAQ;AACjB,WAAOC,EAAa,SAASD,CAAG;AAElC,MAAI,OAAOA,KAAQ,UAAU;AAC3B,UAAM,EAAE,SAASF,EAAc,IAAGE;AAElC,WAAOC,EAAa,SAASH,CAAY;AAAA,EAC1C;AACH;"}
+{"version":3,"file":"validators.js","sources":["../../../components/stack/validators.js"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP } from '@/components/stack/stack_constants';\nimport { directionPropType } from './utils';\n\nexport function directionValidator (direction) {\n  if (directionPropType(direction) === 'string') {\n    return Object.keys(DT_STACK_DIRECTION).includes(direction);\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);\n  } else { return null; }\n}\n\nexport function gapValidator (gap) {\n  if (typeof gap === 'string') {\n    return DT_STACK_GAP.includes(gap);\n  }\n  if (typeof gap === 'object') {\n    const { default: defaultStyle } = gap;\n\n    return DT_STACK_GAP.includes(defaultStyle);\n  }\n}\n"],"names":["directionValidator","direction","directionPropType","DT_STACK_DIRECTION","defaultStyle","gapValidator","gap","DT_STACK_GAP"],"mappings":";;AAGO,SAASA,EAAoBC,GAAW;AAC7C,MAAIC,EAAkBD,CAAS,MAAM;AACnC,WAAO,OAAO,KAAKE,CAAkB,EAAE,SAASF,CAAS;AACpD,MAAIC,EAAkBD,CAAS,MAAM,UAAU;AACpD,UAAM,EAAE,SAASG,EAAY,IAAKH;AAElC,WAAO,OAAO,KAAKE,CAAkB,EAAE,SAASC,CAAY;AAAA,EAC9D;AAAS,WAAO;AAClB;AAEO,SAASC,EAAcC,GAAK;AACjC,MAAI,OAAOA,KAAQ;AACjB,WAAOC,EAAa,SAASD,CAAG;AAElC,MAAI,OAAOA,KAAQ,UAAU;AAC3B,UAAM,EAAE,SAASF,EAAY,IAAKE;AAElC,WAAOC,EAAa,SAASH,CAAY;AAAA,EAC3C;AACF;"}

package/dist/vue3/lib/tab/tab-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tab-group.cjs","sources":["../../../components/tab/tab_group.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-tab-group\"\n  >\n    <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\n    <div\n      ref=\"tabs\"\n      :class=\"[\n        'd-tablist',\n        TAB_LIST_SIZE_MODIFIERS[size],\n        {\n          [TAB_LIST_KIND_MODIFIERS.inverted]: inverted,\n          [TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: borderless,\n        },\n        tabListClass,\n      ]\"\n      v-bind=\"tabListChildProps\"\n      role=\"tablist\"\n      :aria-label=\"label\"\n      @keyup.left=\"tabLeft\"\n      @keyup.right=\"tabRight\"\n      @keyup.enter=\"selectTab\"\n      @keyup.space=\"selectTab\"\n      @click=\"selectTab\"\n      @keydown.home=\"onHomeButton\"\n      @keydown.end=\"onEndButton\"\n    >\n      <!-- @slot Slot for Tabs -->\n      <slot name=\"tabs\" />\n    </div>\n    <!-- @slot Default slot for Panel -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport {\n  TAB_LIST_SIZES,\n  TAB_LIST_KIND_MODIFIERS,\n  TAB_LIST_IMPORTANCE_MODIFIERS,\n  TAB_LIST_SIZE_MODIFIERS,\n} from './tabs_constants';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtTabGroup',\n\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      setFocus: this.setFocus,\n    };\n  },\n\n  props: {\n    /**\n     * Identifies the tab group\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The id of the selected tab panel which should be displayed\n     */\n    selected: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * If true, disables the tab group\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies inverted styles to the tab group\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies borderless styles to the tab group\n     * @values true, false\n     */\n    borderless: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If provided, applies size styles to the tab group\n     * @values default, sm\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validate (size) {\n        return TAB_LIST_SIZES.includes(size);\n      },\n    },\n\n    /**\n     * Pass through classes, used to customize the tab list\n     */\n    tabListClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through props, used to customize the tab list\n     */\n    tabListChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Change tab event with the arguments: selected id of the current tab and disabled value\n     *\n     * @event change\n     * @type {Object}\n     */\n    'change',\n\n    /**\n     * Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.\n     *\n     * @event before-change\n     * @type {Event}\n     */\n    'before-change',\n  ],\n\n  data () {\n    return {\n      provideObj: {\n        selected: '', // the currently displayed tab id\n        disabled: false, // disable group\n      },\n\n      focusId: null,\n      tabs: [],\n      TAB_LIST_SIZE_MODIFIERS,\n      TAB_LIST_KIND_MODIFIERS,\n      TAB_LIST_IMPORTANCE_MODIFIERS,\n    };\n  },\n\n  watch: {\n    disabled: {\n      immediate: true,\n      handler () {\n        this.provideObj.disabled = this.disabled;\n      },\n    },\n\n    selected: {\n      immediate: true,\n      handler () {\n        this.provideObj.selected = this.selected;\n      },\n    },\n  },\n\n  mounted () {\n    this.updateSelected();\n  },\n\n  beforeUpdate () {\n    this.updateSelected();\n  },\n\n  methods: {\n    updateSelected () {\n      /**\n       * Prevent override tab selected by default\n       */\n      if (!this.provideObj.selected) {\n        this.provideObj.selected = this.selected;\n      }\n      this.tabs = this.getTabChildren();\n    },\n\n    setFocus (focusId) {\n      this.focusId = focusId;\n    },\n\n    getTabChildren () {\n      const tabs = Array.from(this.$refs.tabs.querySelectorAll('.d-tab'));\n      return tabs\n        .map(el => {\n          return ({\n            context: el,\n            panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n            tabId: el.getAttribute('id')?.replace('dt-tab-', ''),\n            isSelected: el.getAttribute('aria-selected') === 'true',\n          });\n        });\n    },\n\n    onChange () {\n      this.$emit('change', { ...this.provideObj });\n    },\n\n    tabLeft () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const indexElement = index - 1 < 0 ? this.tabs.length - 1 : index - 1;\n      this.selectFocusOnTab(indexElement);\n    },\n\n    tabRight () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const indexElement = index + 1 > this.tabs.length - 1 ? 0 : index + 1;\n      this.selectFocusOnTab(indexElement);\n    },\n\n    selectFocusOnTab (index) {\n      const { context } = this.tabs[index];\n      context.focus();\n    },\n\n    selectTab (event) {\n      if (this.isSameTabClicked()) return;\n\n      this.$emit('before-change', event);\n      if (event.defaultPrevented) return;\n\n      const index = this.getFocusedTabIndex();\n\n      this.selectTabByIndex(index);\n      this.onChange();\n    },\n\n    selectTabByIndex (index) {\n      const { context, panelId } = this.tabs[index];\n      this.provideObj.selected = panelId;\n      context.focus();\n    },\n\n    getFocusedTabIndex () {\n      // Hot fix https://github.com/dialpad/dialtone/pull/849\n      // The main issue is that this.tabs is not being updated at the time this is being triggered.\n\n      const index = this.tabs.findIndex((context) =>\n        this.focusId ? context.tabId === `${this.focusId}` : context.isSelected,\n      );\n\n      return index === -1 ? 0 : index;\n    },\n\n    onHomeButton () {\n      if (this.tabs.length === 0) return;\n      this.tabs[0]?.context?.focus();\n    },\n\n    onEndButton () {\n      if (this.tabs.length === 0) return;\n      this.tabs[this.tabs.length - 1]?.context?.focus();\n    },\n\n    isSameTabClicked () {\n      const tab = this.tabs[this.getFocusedTabIndex()];\n      return this.provideObj.selected === tab.panelId;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","size","TAB_LIST_SIZES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS","focusId","el","_a","_b","index","indexElement","context","event","panelId","tab","_hoisted_1","_hoisted_2","_openBlock","_createElementBlock","_createElementVNode","_mergeProps","$data","$props","_cache","_withKeys","args","$options","_renderSlot","_ctx"],"mappings":"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"}
+{"version":3,"file":"tab-group.cjs","sources":["../../../components/tab/tab_group.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-tab-group\"\n  >\n    <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\n    <div\n      ref=\"tabs\"\n      :class=\"[\n        'd-tablist',\n        TAB_LIST_SIZE_MODIFIERS[size],\n        {\n          [TAB_LIST_KIND_MODIFIERS.inverted]: inverted,\n          [TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: borderless,\n        },\n        tabListClass,\n      ]\"\n      v-bind=\"tabListChildProps\"\n      role=\"tablist\"\n      :aria-label=\"label\"\n      @keyup.left=\"tabLeft\"\n      @keyup.right=\"tabRight\"\n      @keyup.enter=\"selectTab\"\n      @keyup.space=\"selectTab\"\n      @click=\"selectTab\"\n      @keydown.home=\"onHomeButton\"\n      @keydown.end=\"onEndButton\"\n    >\n      <!-- @slot Slot for Tabs -->\n      <slot name=\"tabs\" />\n    </div>\n    <!-- @slot Default slot for Panel -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport {\n  TAB_LIST_SIZES,\n  TAB_LIST_KIND_MODIFIERS,\n  TAB_LIST_IMPORTANCE_MODIFIERS,\n  TAB_LIST_SIZE_MODIFIERS,\n} from './tabs_constants';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtTabGroup',\n\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      setFocus: this.setFocus,\n    };\n  },\n\n  props: {\n    /**\n     * Identifies the tab group\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The id of the selected tab panel which should be displayed\n     */\n    selected: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * If true, disables the tab group\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies inverted styles to the tab group\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies borderless styles to the tab group\n     * @values true, false\n     */\n    borderless: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If provided, applies size styles to the tab group\n     * @values default, sm\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validate (size) {\n        return TAB_LIST_SIZES.includes(size);\n      },\n    },\n\n    /**\n     * Pass through classes, used to customize the tab list\n     */\n    tabListClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through props, used to customize the tab list\n     */\n    tabListChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Change tab event with the arguments: selected id of the current tab and disabled value\n     *\n     * @event change\n     * @type {Object}\n     */\n    'change',\n\n    /**\n     * Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.\n     *\n     * @event before-change\n     * @type {Event}\n     */\n    'before-change',\n  ],\n\n  data () {\n    return {\n      provideObj: {\n        selected: '', // the currently displayed tab id\n        disabled: false, // disable group\n      },\n\n      focusId: null,\n      tabs: [],\n      TAB_LIST_SIZE_MODIFIERS,\n      TAB_LIST_KIND_MODIFIERS,\n      TAB_LIST_IMPORTANCE_MODIFIERS,\n    };\n  },\n\n  watch: {\n    disabled: {\n      immediate: true,\n      handler () {\n        this.provideObj.disabled = this.disabled;\n      },\n    },\n\n    selected: {\n      immediate: true,\n      handler () {\n        this.provideObj.selected = this.selected;\n      },\n    },\n  },\n\n  mounted () {\n    this.updateSelected();\n  },\n\n  beforeUpdate () {\n    this.updateSelected();\n  },\n\n  methods: {\n    updateSelected () {\n      /**\n       * Prevent override tab selected by default\n       */\n      if (!this.provideObj.selected) {\n        this.provideObj.selected = this.selected;\n      }\n      this.tabs = this.getTabChildren();\n    },\n\n    setFocus (focusId) {\n      this.focusId = focusId;\n    },\n\n    getTabChildren () {\n      const tabs = Array.from(this.$refs.tabs.querySelectorAll('.d-tab'));\n      return tabs\n        .map(el => {\n          return ({\n            context: el,\n            panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n            tabId: el.getAttribute('id')?.replace('dt-tab-', ''),\n            isSelected: el.getAttribute('aria-selected') === 'true',\n          });\n        });\n    },\n\n    onChange () {\n      this.$emit('change', { ...this.provideObj });\n    },\n\n    tabLeft () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const indexElement = index - 1 < 0 ? this.tabs.length - 1 : index - 1;\n      this.selectFocusOnTab(indexElement);\n    },\n\n    tabRight () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const indexElement = index + 1 > this.tabs.length - 1 ? 0 : index + 1;\n      this.selectFocusOnTab(indexElement);\n    },\n\n    selectFocusOnTab (index) {\n      const { context } = this.tabs[index];\n      context.focus();\n    },\n\n    selectTab (event) {\n      if (this.isSameTabClicked()) return;\n\n      this.$emit('before-change', event);\n      if (event.defaultPrevented) return;\n\n      const index = this.getFocusedTabIndex();\n\n      this.selectTabByIndex(index);\n      this.onChange();\n    },\n\n    selectTabByIndex (index) {\n      const { context, panelId } = this.tabs[index];\n      this.provideObj.selected = panelId;\n      context.focus();\n    },\n\n    getFocusedTabIndex () {\n      // Hot fix https://github.com/dialpad/dialtone/pull/849\n      // The main issue is that this.tabs is not being updated at the time this is being triggered.\n\n      const index = this.tabs.findIndex((context) =>\n        this.focusId ? context.tabId === `${this.focusId}` : context.isSelected,\n      );\n\n      return index === -1 ? 0 : index;\n    },\n\n    onHomeButton () {\n      if (this.tabs.length === 0) return;\n      this.tabs[0]?.context?.focus();\n    },\n\n    onEndButton () {\n      if (this.tabs.length === 0) return;\n      this.tabs[this.tabs.length - 1]?.context?.focus();\n    },\n\n    isSameTabClicked () {\n      const tab = this.tabs[this.getFocusedTabIndex()];\n      return this.provideObj.selected === tab.panelId;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","size","TAB_LIST_SIZES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS","focusId","el","_a","_b","index","indexElement","context","event","panelId","tab","_hoisted_1","_hoisted_2","_openBlock","_createElementBlock","_createElementVNode","_mergeProps","$data","$props","_cache","_withKeys","args","$options","_renderSlot","_ctx"],"mappings":"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"}

package/dist/vue3/lib/tab/tab-group.js

@@ -1,5 +1,5 @@
-import { TAB_LIST_SIZES as b, TAB_LIST_SIZE_MODIFIERS as o, TAB_LIST_KIND_MODIFIERS as u, TAB_LIST_IMPORTANCE_MODIFIERS as c } from "./tabs-constants.js";
-import { openBlock as h, createElementBlock as f, createElementVNode as I, mergeProps as T, withKeys as i, renderSlot as r } from "vue";
+import { TAB_LIST_IMPORTANCE_MODIFIERS as b, TAB_LIST_KIND_MODIFIERS as o, TAB_LIST_SIZE_MODIFIERS as u, TAB_LIST_SIZES as c } from "./tabs-constants.js";
+import { createElementBlock as h, openBlock as f, createElementVNode as I, renderSlot as r, mergeProps as T, withKeys as i } from "vue";
 import { _ as g } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const m = {
   compatConfig: { MODE: 3 },
@@ -57,7 +57,7 @@ const m = {
       type: String,
       default: "default",
       validate(t) {
-        return b.includes(t);
+        return c.includes(t);
       }
     },
     /**
@@ -101,9 +101,9 @@ const m = {
       },
       focusId: null,
       tabs: [],
-      TAB_LIST_SIZE_MODIFIERS: o,
-      TAB_LIST_KIND_MODIFIERS: u,
-      TAB_LIST_IMPORTANCE_MODIFIERS: c
+      TAB_LIST_SIZE_MODIFIERS: u,
+      TAB_LIST_KIND_MODIFIERS: o,
+      TAB_LIST_IMPORTANCE_MODIFIERS: b
     };
   },
   watch: {
@@ -193,7 +193,7 @@ const m = {
   }
 }, S = { "data-qa": "dt-tab-group" }, p = ["aria-label"];
 function O(t, e, d, n, l, s) {
-  return h(), f("div", S, [
+  return f(), h("div", S, [
     I("div", T({
       ref: "tabs",
       class: [