@dialpad/dialtone-vue 3.199.0 → 3.199.1

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

@@ -1 +1 @@
-{"version":3,"file":"split-button-alpha.js","sources":["../../../components/split_button/split_button-alpha.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-dt-tooltip=\"tooltipConfig\"\n    data-qa=\"dt-split-button-alpha\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :assertive-on-focus=\"assertiveOnFocus\"\n    :class=\"`d-split-btn__alpha d-split-btn__alpha--${size}`\"\n    :disabled=\"disabled\"\n    :icon-position=\"iconPosition\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :label-class=\"labelClass\"\n    :loading=\"loading\"\n    :size=\"size\"\n  >\n    <template #icon>\n      <slot\n        name=\"icon\"\n        :size=\"BUTTON_ICON_SIZES[size]\"\n      />\n    </template>\n    <slot name=\"default\" />\n  </dt-button>\n</template>\n\n<script>\nimport { BUTTON_ICON_SIZES, DtButton } from '@/components/button';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'SplitButtonAlpha',\n\n  components: {\n    DtButton,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button is in focus.\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_ICON_SIZES,\n    };\n  },\n\n  computed: {\n    tooltipConfig () {\n      return {\n        message: this.tooltipText,\n        inverted: this.kind === 'inverted',\n      };\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","BUTTON_ICON_SIZES","_createBlock","_component_dt_button","$props","_normalizeClass","_renderSlot","_ctx","$data","_withCtx","$options"],"mappings":";;;;AA6BA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,UAAAC;AAAA;EAGF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA;;;;IAMX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA,MACL,mBAAAC;AAAA;EAEJ;AAAA,EAEA,UAAU;AAAA,IACR,gBAAiB;AACf,aAAO;AAAA,QACL,SAAS,KAAK;AAAA,QACd,UAAU,KAAK,SAAS;AAAA;IAE5B;AAAA;AAEJ;;;iBA7IEC,EAsBYC,GAAA;AAAA,IApBV,WAAQ;AAAA,IACP,QAAQC,EAAA;AAAA,IACR,cAAYA,EAAA;AAAA,IACZ,sBAAoBA,EAAA;AAAA,IACpB,OAPLC,4CAOsDD,EAAA,IAAI,EAAA;AAAA,IACrD,UAAUA,EAAA;AAAA,IACV,iBAAeA,EAAA;AAAA,IACf,YAAYA,EAAA;AAAA,IACZ,MAAMA,EAAA;AAAA,IACN,eAAaA,EAAA;AAAA,IACb,SAASA,EAAA;AAAA,IACT,MAAMA,EAAA;AAAA;IAEI,QACT,MAGE;AAAA,MAHFE,EAGEC,EAAA,QAAA,QAAA;AAAA,QADC,MAAMC,EAAA,kBAAkBJ,EAAA,IAAI;AAAA;;IAnBrC,SAAAK,EAsBI,MAAuB;AAAA,MAAvBH,EAAuBC,EAAA,QAAA,SAAA;AAAA;IAtB3B,GAAA;AAAA;QAEkBG,EAAA,aAAa;AAAA;;;"}
+{"version":3,"file":"split-button-alpha.js","sources":["../../../components/split_button/split_button-alpha.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-dt-tooltip=\"tooltipConfig\"\n    data-qa=\"dt-split-button-alpha\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :assertive-on-focus=\"assertiveOnFocus\"\n    :class=\"`d-split-btn__alpha d-split-btn__alpha--${size}`\"\n    :disabled=\"disabled\"\n    :icon-position=\"iconPosition\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :label-class=\"labelClass\"\n    :loading=\"loading\"\n    :size=\"size\"\n  >\n    <template #icon>\n      <slot\n        name=\"icon\"\n        :size=\"BUTTON_ICON_SIZES[size]\"\n      />\n    </template>\n    <slot name=\"default\" />\n  </dt-button>\n</template>\n\n<script>\nimport { BUTTON_ICON_SIZES, DtButton } from '@/components/button';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'SplitButtonAlpha',\n\n  components: {\n    DtButton,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button is in focus.\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_ICON_SIZES,\n    };\n  },\n\n  computed: {\n    tooltipConfig () {\n      return {\n        message: this.tooltipText,\n        inverted: this.kind === 'inverted',\n      };\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","BUTTON_ICON_SIZES","_createBlock","_component_dt_button","$props","_renderSlot","_ctx","$data","$options"],"mappings":";;;;AA6BA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,UAAAC;AAAA;EAGF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA;;;;IAMX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA,MACL,mBAAAC;AAAA;EAEJ;AAAA,EAEA,UAAU;AAAA,IACR,gBAAiB;AACf,aAAO;AAAA,QACL,SAAS,KAAK;AAAA,QACd,UAAU,KAAK,SAAS;AAAA;IAE5B;AAAA;AAEJ;;;iBA7IEC,EAsBYC,GAAA;AAAA,IApBV,WAAQ;AAAA,IACP,QAAQC,EAAA;AAAA,IACR,cAAYA,EAAA;AAAA,IACZ,sBAAoBA,EAAA;AAAA,IACpB,mDAAiDA,EAAA,IAAI,EAAA;AAAA,IACrD,UAAUA,EAAA;AAAA,IACV,iBAAeA,EAAA;AAAA,IACf,YAAYA,EAAA;AAAA,IACZ,MAAMA,EAAA;AAAA,IACN,eAAaA,EAAA;AAAA,IACb,SAASA,EAAA;AAAA,IACT,MAAMA,EAAA;AAAA;IAEI,QACT,MAGE;AAAA,MAHFC,EAGEC,EAAA,QAAA,QAAA;AAAA,QADC,MAAMC,EAAA,kBAAkBH,EAAA,IAAI;AAAA;;eAGjC,MAAuB;AAAA,MAAvBC,EAAuBC,EAAA,QAAA,SAAA;AAAA;;;QApBTE,EAAA,aAAa;AAAA;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"split-button-omega.cjs","sources":["../../../components/split_button/split_button-omega.vue"],"sourcesContent":["<template>\n  <dt-button\n    :id=\"id\"\n    v-dt-tooltip=\"{ message: tooltipText, inverted: kind === 'inverted' }\"\n    data-qa=\"dt-split-button-omega\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :class=\"`d-split-btn__omega d-split-btn__omega--${size}`\"\n    :disabled=\"disabled\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :size=\"size\"\n  >\n    <template #icon>\n      <slot\n        name=\"icon\"\n        :size=\"SPLIT_BUTTON_ICON_SIZES[size]\"\n      >\n        <dt-icon-chevron-down :size=\"SPLIT_BUTTON_ICON_SIZES[size]\" />\n      </slot>\n    </template>\n  </dt-button>\n</template>\n\n<script>\nimport { SPLIT_BUTTON_ICON_SIZES } from './split_button_constants';\nimport { DtButton } from '@/components/button';\nimport { DtIconChevronDown } from '@dialpad/dialtone-icons/vue3';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'SplitButtonOmega',\n  components: {\n    DtButton,\n    DtIconChevronDown,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Element ID, useful in case you need to reference the button\n     * as an external anchor for popover\n     */\n    id: {\n      type: String,\n      default: getUniqueString(),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SPLIT_BUTTON_ICON_SIZES,\n    };\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconChevronDown","getUniqueString","SPLIT_BUTTON_ICON_SIZES","_createBlock","_component_dt_button","$props","_normalizeClass","_renderSlot","_ctx","$data","_createVNode","_component_dt_icon_chevron_down","_directive_dt_tooltip"],"mappings":"6VA8BKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,mBACN,WAAY,CACV,SAAAC,EAAAA,QACA,kBAAAC,EAAAA,mBAGF,MAAO,CAIL,OAAQ,CACN,KAAM,QACN,QAAS,IAMX,UAAW,CACT,KAAM,OACN,QAAS,MAMX,SAAU,CACR,KAAM,QACN,QAAS,IAOX,GAAI,CACF,KAAM,OACN,QAASC,EAAAA,gBAAe,GAM1B,WAAY,CACV,KAAM,OACN,QAAS,WAMX,KAAM,CACJ,KAAM,OACN,QAAS,WAMX,KAAM,CACJ,KAAM,OACN,QAAS,MAMX,YAAa,CACX,KAAM,OACN,QAAS,KAIb,MAAQ,CACN,MAAO,yBACLC,EAAAA,wBAEJ,CACF,yLA7GEC,EAAAA,YAoBYC,EAAA,CAnBT,GAAIC,EAAA,GAEL,UAAQ,wBACP,OAAQA,EAAA,OACR,aAAYA,EAAA,UACZ,MAPLC,EAAAA,yDAOsDD,EAAA,IAAI,EAAA,EACrD,SAAUA,EAAA,SACV,WAAYA,EAAA,WACZ,KAAMA,EAAA,KACN,KAAMA,EAAA,OAEI,eACT,IAKO,CALPE,aAKOC,EAAA,OAAA,OAAA,CAHJ,KAAMC,EAAA,wBAAwBJ,EAAA,IAAI,GAFrC,IAKO,CADLK,EAAAA,YAA8DC,EAAA,CAAvC,KAAMF,EAAA,wBAAwBJ,EAAA,IAAI,wBAlBjE,EAAA,mFAG6B,CAAAO,EAAA,CAAA,QAAAP,EAAA,qBAAuBA,EAAA,OAAI,UAAA,CAAA"}
+{"version":3,"file":"split-button-omega.cjs","sources":["../../../components/split_button/split_button-omega.vue"],"sourcesContent":["<template>\n  <dt-button\n    :id=\"id\"\n    v-dt-tooltip=\"{ message: tooltipText, inverted: kind === 'inverted' }\"\n    data-qa=\"dt-split-button-omega\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :class=\"`d-split-btn__omega d-split-btn__omega--${size}`\"\n    :disabled=\"disabled\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :size=\"size\"\n  >\n    <template #icon>\n      <slot\n        name=\"icon\"\n        :size=\"SPLIT_BUTTON_ICON_SIZES[size]\"\n      >\n        <dt-icon-chevron-down :size=\"SPLIT_BUTTON_ICON_SIZES[size]\" />\n      </slot>\n    </template>\n  </dt-button>\n</template>\n\n<script>\nimport { SPLIT_BUTTON_ICON_SIZES } from './split_button_constants';\nimport { DtButton } from '@/components/button';\nimport { DtIconChevronDown } from '@dialpad/dialtone-icons/vue3';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'SplitButtonOmega',\n  components: {\n    DtButton,\n    DtIconChevronDown,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Element ID, useful in case you need to reference the button\n     * as an external anchor for popover\n     */\n    id: {\n      type: String,\n      default: getUniqueString(),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SPLIT_BUTTON_ICON_SIZES,\n    };\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconChevronDown","getUniqueString","SPLIT_BUTTON_ICON_SIZES","_createBlock","_component_dt_button","$props","_renderSlot","_ctx","$data","_createVNode","_component_dt_icon_chevron_down","_directive_dt_tooltip"],"mappings":"6VA8BKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,mBACN,WAAY,CACV,SAAAC,EAAAA,QACA,kBAAAC,EAAAA,mBAGF,MAAO,CAIL,OAAQ,CACN,KAAM,QACN,QAAS,IAMX,UAAW,CACT,KAAM,OACN,QAAS,MAMX,SAAU,CACR,KAAM,QACN,QAAS,IAOX,GAAI,CACF,KAAM,OACN,QAASC,EAAAA,gBAAe,GAM1B,WAAY,CACV,KAAM,OACN,QAAS,WAMX,KAAM,CACJ,KAAM,OACN,QAAS,WAMX,KAAM,CACJ,KAAM,OACN,QAAS,MAMX,YAAa,CACX,KAAM,OACN,QAAS,KAIb,MAAQ,CACN,MAAO,yBACLC,EAAAA,wBAEJ,CACF,yLA7GEC,EAAAA,YAoBYC,EAAA,CAnBT,GAAIC,EAAA,GAEL,UAAQ,wBACP,OAAQA,EAAA,OACR,aAAYA,EAAA,UACZ,iEAAiDA,EAAA,IAAI,EAAA,EACrD,SAAUA,EAAA,SACV,WAAYA,EAAA,WACZ,KAAMA,EAAA,KACN,KAAMA,EAAA,OAEI,eACT,IAKO,CALPC,aAKOC,EAAA,OAAA,OAAA,CAHJ,KAAMC,EAAA,wBAAwBH,EAAA,IAAI,GAFrC,IAKO,CADLI,EAAAA,YAA8DC,EAAA,CAAvC,KAAMF,EAAA,wBAAwBH,EAAA,IAAI,6GAfpC,CAAAM,EAAA,CAAA,QAAAN,EAAA,qBAAuBA,EAAA,OAAI,UAAA,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"split-button-omega.js","sources":["../../../components/split_button/split_button-omega.vue"],"sourcesContent":["<template>\n  <dt-button\n    :id=\"id\"\n    v-dt-tooltip=\"{ message: tooltipText, inverted: kind === 'inverted' }\"\n    data-qa=\"dt-split-button-omega\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :class=\"`d-split-btn__omega d-split-btn__omega--${size}`\"\n    :disabled=\"disabled\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :size=\"size\"\n  >\n    <template #icon>\n      <slot\n        name=\"icon\"\n        :size=\"SPLIT_BUTTON_ICON_SIZES[size]\"\n      >\n        <dt-icon-chevron-down :size=\"SPLIT_BUTTON_ICON_SIZES[size]\" />\n      </slot>\n    </template>\n  </dt-button>\n</template>\n\n<script>\nimport { SPLIT_BUTTON_ICON_SIZES } from './split_button_constants';\nimport { DtButton } from '@/components/button';\nimport { DtIconChevronDown } from '@dialpad/dialtone-icons/vue3';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'SplitButtonOmega',\n  components: {\n    DtButton,\n    DtIconChevronDown,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Element ID, useful in case you need to reference the button\n     * as an external anchor for popover\n     */\n    id: {\n      type: String,\n      default: getUniqueString(),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SPLIT_BUTTON_ICON_SIZES,\n    };\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconChevronDown","getUniqueString","SPLIT_BUTTON_ICON_SIZES","_createBlock","_component_dt_button","$props","_normalizeClass","_renderSlot","_ctx","$data","_createVNode","_component_dt_icon_chevron_down","_directive_dt_tooltip"],"mappings":";;;;;;AA8BA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EACN,YAAY;AAAA,IACV,UAAAC;AAAA,IACA,mBAAAC;AAAA;EAGF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAASC,EAAe;AAAA;;;;IAM1B,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA,MACL,yBAAAC;AAAA;EAEJ;AACF;;;iBA7GEC,EAoBYC,GAAA;AAAA,IAnBT,IAAIC,EAAA;AAAA,IAEL,WAAQ;AAAA,IACP,QAAQA,EAAA;AAAA,IACR,cAAYA,EAAA;AAAA,IACZ,OAPLC,4CAOsDD,EAAA,IAAI,EAAA;AAAA,IACrD,UAAUA,EAAA;AAAA,IACV,YAAYA,EAAA;AAAA,IACZ,MAAMA,EAAA;AAAA,IACN,MAAMA,EAAA;AAAA;IAEI,QACT,MAKO;AAAA,MALPE,EAKOC,EAAA,QAAA,QAAA;AAAA,QAHJ,MAAMC,EAAA,wBAAwBJ,EAAA,IAAI;AAAA,SAFrC,MAKO;AAAA,QADLK,EAA8DC,GAAA;AAAA,UAAvC,MAAMF,EAAA,wBAAwBJ,EAAA,IAAI;AAAA;;;IAlBjE,GAAA;AAAA;IAG6B,CAAAO,GAAA,EAAA,SAAAP,EAAA,uBAAuBA,EAAA,SAAI,WAAA,CAAA;AAAA;;;"}
+{"version":3,"file":"split-button-omega.js","sources":["../../../components/split_button/split_button-omega.vue"],"sourcesContent":["<template>\n  <dt-button\n    :id=\"id\"\n    v-dt-tooltip=\"{ message: tooltipText, inverted: kind === 'inverted' }\"\n    data-qa=\"dt-split-button-omega\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :class=\"`d-split-btn__omega d-split-btn__omega--${size}`\"\n    :disabled=\"disabled\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :size=\"size\"\n  >\n    <template #icon>\n      <slot\n        name=\"icon\"\n        :size=\"SPLIT_BUTTON_ICON_SIZES[size]\"\n      >\n        <dt-icon-chevron-down :size=\"SPLIT_BUTTON_ICON_SIZES[size]\" />\n      </slot>\n    </template>\n  </dt-button>\n</template>\n\n<script>\nimport { SPLIT_BUTTON_ICON_SIZES } from './split_button_constants';\nimport { DtButton } from '@/components/button';\nimport { DtIconChevronDown } from '@dialpad/dialtone-icons/vue3';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'SplitButtonOmega',\n  components: {\n    DtButton,\n    DtIconChevronDown,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Element ID, useful in case you need to reference the button\n     * as an external anchor for popover\n     */\n    id: {\n      type: String,\n      default: getUniqueString(),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SPLIT_BUTTON_ICON_SIZES,\n    };\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconChevronDown","getUniqueString","SPLIT_BUTTON_ICON_SIZES","_createBlock","_component_dt_button","$props","_renderSlot","_ctx","$data","_createVNode","_component_dt_icon_chevron_down","_directive_dt_tooltip"],"mappings":";;;;;;AA8BA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EACN,YAAY;AAAA,IACV,UAAAC;AAAA,IACA,mBAAAC;AAAA;EAGF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAASC,EAAe;AAAA;;;;IAM1B,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA,MACL,yBAAAC;AAAA;EAEJ;AACF;;;iBA7GEC,EAoBYC,GAAA;AAAA,IAnBT,IAAIC,EAAA;AAAA,IAEL,WAAQ;AAAA,IACP,QAAQA,EAAA;AAAA,IACR,cAAYA,EAAA;AAAA,IACZ,mDAAiDA,EAAA,IAAI,EAAA;AAAA,IACrD,UAAUA,EAAA;AAAA,IACV,YAAYA,EAAA;AAAA,IACZ,MAAMA,EAAA;AAAA,IACN,MAAMA,EAAA;AAAA;IAEI,QACT,MAKO;AAAA,MALPC,EAKOC,EAAA,QAAA,QAAA;AAAA,QAHJ,MAAMC,EAAA,wBAAwBH,EAAA,IAAI;AAAA,SAFrC,MAKO;AAAA,QADLI,EAA8DC,GAAA;AAAA,UAAvC,MAAMF,EAAA,wBAAwBH,EAAA,IAAI;AAAA;;;;;IAfpC,CAAAM,GAAA,EAAA,SAAAN,EAAA,uBAAuBA,EAAA,SAAI,WAAA,CAAA;AAAA;;;"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("./split-button-alpha.cjs"),m=require("./split-button-omega.cjs"),i=require("../../common/utils/index.cjs"),t=require("vue"),f=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),g=require("../dropdown/dropdown.cjs"),l=require("../button/button-constants.cjs");require("./split-button-constants.cjs");const b={compatConfig:{MODE:3},name:"DtSplitButton",components:{SplitButtonOmega:m.default,DtDropdown:g.default,SplitButtonAlpha:h.default},inheritAttrs:!1,props:{alphaActive:{type:Boolean,default:!1},alphaAriaLabel:{type:String,default:null},alphaIconPosition:{type:String,default:"left",validator:e=>Object.keys(l.ICON_POSITION_MODIFIERS).includes(e)},alphaLabelClass:{type:[String,Array,Object],default:""},alphaLoading:{type:Boolean,default:!1},alphaTooltipText:{type:String,default:void 0},assertiveOnFocus:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},dropdownPlacement:{type:String,default:"bottom-end"},importance:{type:String,default:"primary",validator:e=>Object.keys(l.BUTTON_IMPORTANCE_MODIFIERS).includes(e)},kind:{type:String,default:"default",validator:e=>Object.keys(l.BUTTON_KIND_MODIFIERS).includes(e)},omegaActive:{type:Boolean,default:!1},omegaAriaLabel:{type:String,default:null},omegaId:{type:String,default:void 0},omegaTooltipText:{type:String,default:void 0},size:{type:String,default:"md",validator:e=>Object.keys(l.BUTTON_SIZE_MODIFIERS).includes(e)},width:{type:String,default:null},rootClass:{type:[String,Object,Array],default:""}},emits:["alpha-clicked","omega-clicked"],data(){return{isDropdownOpen:!1}},computed:{alphaButtonProps(){return{active:this.alphaActive,ariaLabel:this.alphaAriaLabel,assertiveOnFocus:this.assertiveOnFocus,disabled:this.disabled,iconPosition:this.alphaIconPosition,labelClass:this.alphaLabelClass,loading:this.alphaLoading,importance:this.importance,kind:this.kind,size:this.size,tooltipText:this.alphaTooltipText,class:this.$attrs.class,style:this.$attrs.style}},omegaButtonProps(){return{id:this.omegaId,active:this.omegaActive,ariaLabel:this.omegaAriaLabel,disabled:this.disabled,importance:this.importance,kind:this.kind,size:this.size,tooltipText:this.omegaTooltipText,class:this.$attrs.class,style:this.$attrs.style}}},created(){this.validateProps()},updated(){this.validateProps()},mounted(){i.warnIfUnmounted(i.returnFirstEl(this.$el),this.$options.name)},methods:{validateProps(){this.validateAlphaButtonProps(),this.validateOmegaButtonProps()},validateAlphaButtonProps(){i.hasSlotContent(this.$slots.default)||i.hasSlotContent(this.$slots.alphaIcon)&&!this.alphaTooltipText&&console.warn("alpha-tooltip-text prop must be set if alpha button has an icon only")},validateOmegaButtonProps(){i.hasSlotContent(this.$slots.omega)||this.omegaTooltipText||console.warn("omega-tooltip-text prop is required as it is an icon-only button")}}};function y(e,a,n,v,s,r){const u=t.resolveComponent("split-button-alpha"),p=t.resolveComponent("split-button-omega"),c=t.resolveComponent("dt-dropdown");return t.openBlock(),t.createElementBlock("span",{"data-qa":"dt-split-button",class:t.normalizeClass([n.rootClass,"d-split-btn"]),style:t.normalizeStyle({width:n.width})},[t.createVNode(u,t.mergeProps(r.alphaButtonProps,{ref:"alphaButton",onClick:a[0]||(a[0]=o=>e.$emit("alpha-clicked"))}),{icon:t.withCtx(({size:o})=>[t.renderSlot(e.$slots,"alphaIcon",{size:o})]),default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),_:3},16),t.renderSlot(e.$slots,"omega",{},()=>[e.$slots.dropdownList?(t.openBlock(),t.createBlock(c,{key:0,placement:n.dropdownPlacement,onClick:a[2]||(a[2]=o=>s.isDropdownOpen=!0),onOpened:a[3]||(a[3]=o=>s.isDropdownOpen=o)},{anchor:t.withCtx(o=>[t.createVNode(p,t.mergeProps({...o,...r.omegaButtonProps},{active:s.isDropdownOpen,onClick:a[1]||(a[1]=d=>e.$emit("omega-clicked"))}),{icon:t.withCtx(({size:d})=>[t.renderSlot(e.$slots,"omegaIcon",{size:d})]),_:2},1040,["active"])]),list:t.withCtx(({close:o})=>[t.renderSlot(e.$slots,"dropdownList",{close:o})]),_:3},8,["placement"])):(t.openBlock(),t.createBlock(p,t.mergeProps({key:1},r.omegaButtonProps,{onClick:a[4]||(a[4]=o=>e.$emit("omega-clicked"))}),{icon:t.withCtx(({size:o})=>[t.renderSlot(e.$slots,"omegaIcon",{size:o})]),_:3},16))])],6)}const S=f._(b,[["render",y]]);exports.default=S;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("./split-button-alpha.cjs"),m=require("./split-button-omega.cjs"),l=require("../../common/utils/index.cjs"),t=require("vue"),f=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),g=require("../dropdown/dropdown.cjs"),i=require("../button/button-constants.cjs");require("./split-button-constants.cjs");const b={compatConfig:{MODE:3},name:"DtSplitButton",components:{SplitButtonOmega:m.default,DtDropdown:g.default,SplitButtonAlpha:h.default},inheritAttrs:!1,props:{alphaActive:{type:Boolean,default:!1},alphaAriaLabel:{type:String,default:null},alphaIconPosition:{type:String,default:"left",validator:e=>Object.keys(i.ICON_POSITION_MODIFIERS).includes(e)},alphaLabelClass:{type:[String,Array,Object],default:""},alphaDisabled:{type:Boolean,default:!1},alphaLoading:{type:Boolean,default:!1},alphaTooltipText:{type:String,default:void 0},assertiveOnFocus:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},dropdownPlacement:{type:String,default:"bottom-end"},importance:{type:String,default:"primary",validator:e=>Object.keys(i.BUTTON_IMPORTANCE_MODIFIERS).includes(e)},kind:{type:String,default:"default",validator:e=>Object.keys(i.BUTTON_KIND_MODIFIERS).includes(e)},omegaActive:{type:Boolean,default:!1},omegaAriaLabel:{type:String,default:null},omegaDisabled:{type:Boolean,default:!1},omegaId:{type:String,default:void 0},omegaTooltipText:{type:String,default:void 0},size:{type:String,default:"md",validator:e=>Object.keys(i.BUTTON_SIZE_MODIFIERS).includes(e)},width:{type:String,default:null},rootClass:{type:[String,Object,Array],default:""}},emits:["alpha-clicked","omega-clicked"],data(){return{isDropdownOpen:!1}},computed:{alphaButtonProps(){return{active:this.alphaActive,ariaLabel:this.alphaAriaLabel,assertiveOnFocus:this.assertiveOnFocus,disabled:this.disabled||this.alphaDisabled,iconPosition:this.alphaIconPosition,labelClass:this.alphaLabelClass,loading:this.alphaLoading,importance:this.importance,kind:this.kind,size:this.size,tooltipText:this.alphaTooltipText,class:this.$attrs.class,style:this.$attrs.style}},omegaButtonProps(){return{id:this.omegaId,active:this.omegaActive,ariaLabel:this.omegaAriaLabel,disabled:this.disabled||this.omegaDisabled,importance:this.importance,kind:this.kind,size:this.size,tooltipText:this.omegaTooltipText,class:this.$attrs.class,style:this.$attrs.style}}},created(){this.validateProps()},updated(){this.validateProps()},mounted(){l.warnIfUnmounted(l.returnFirstEl(this.$el),this.$options.name)},methods:{validateProps(){this.validateAlphaButtonProps(),this.validateOmegaButtonProps()},validateAlphaButtonProps(){l.hasSlotContent(this.$slots.default)||l.hasSlotContent(this.$slots.alphaIcon)&&!this.alphaTooltipText&&console.warn("alpha-tooltip-text prop must be set if alpha button has an icon only")},validateOmegaButtonProps(){l.hasSlotContent(this.$slots.omega)||this.omegaTooltipText||console.warn("omega-tooltip-text prop is required as it is an icon-only button")}}};function y(e,a,s,B,n,r){const u=t.resolveComponent("split-button-alpha"),p=t.resolveComponent("split-button-omega"),c=t.resolveComponent("dt-dropdown");return t.openBlock(),t.createElementBlock("span",{"data-qa":"dt-split-button",class:t.normalizeClass([s.rootClass,"d-split-btn"]),style:t.normalizeStyle({width:s.width})},[t.createVNode(u,t.mergeProps(r.alphaButtonProps,{ref:"alphaButton",onClick:a[0]||(a[0]=o=>e.$emit("alpha-clicked"))}),{icon:t.withCtx(({size:o})=>[t.renderSlot(e.$slots,"alphaIcon",{size:o})]),default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),_:3},16),t.renderSlot(e.$slots,"omega",{},()=>[e.$slots.dropdownList?(t.openBlock(),t.createBlock(c,{key:0,placement:s.dropdownPlacement,onClick:a[2]||(a[2]=o=>n.isDropdownOpen=!0),onOpened:a[3]||(a[3]=o=>n.isDropdownOpen=o)},{anchor:t.withCtx(o=>[t.createVNode(p,t.mergeProps({...o,...r.omegaButtonProps},{active:n.isDropdownOpen,onClick:a[1]||(a[1]=d=>e.$emit("omega-clicked"))}),{icon:t.withCtx(({size:d})=>[t.renderSlot(e.$slots,"omegaIcon",{size:d})]),_:3},16,["active"])]),list:t.withCtx(({close:o})=>[t.renderSlot(e.$slots,"dropdownList",{close:o})]),_:3},8,["placement"])):(t.openBlock(),t.createBlock(p,t.mergeProps({key:1},r.omegaButtonProps,{onClick:a[4]||(a[4]=o=>e.$emit("omega-clicked"))}),{icon:t.withCtx(({size:o})=>[t.renderSlot(e.$slots,"omegaIcon",{size:o})]),_:3},16))])],6)}const S=f._(b,[["render",y]]);exports.default=S;
 //# sourceMappingURL=split-button.cjs.map

package/dist/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=\"[rootClass, '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     * Additional class name for the root element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    rootClass: {\n      type: [String, Object, Array],\n      default: '',\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","_normalizeClass","$props","_normalizeStyle","_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,GACtB,KAAM,gBAEN,WAAY,CACV,iBAAAC,EAAAA,mBACAC,EAAAA,QACA,iBAAAC,EAAAA,SAGF,aAAc,GAEd,MAAO,CAKL,YAAa,CACX,KAAM,QACN,QAAS,IAMX,eAAgB,CACd,KAAM,OACN,QAAS,MAOX,kBAAmB,CACjB,KAAM,OACN,QAAS,OACT,UAAYC,GAAa,OAAO,KAAKC,yBAAuB,EAAE,SAASD,CAAQ,GAMjF,gBAAiB,CACf,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,IAOX,aAAc,CACZ,KAAM,QACN,QAAS,IAOX,iBAAkB,CAChB,KAAM,OACN,QAAS,QASX,iBAAkB,CAChB,KAAM,QACN,QAAS,IAUX,SAAU,CACR,KAAM,QACN,QAAS,IAOX,kBAAmB,CACjB,KAAM,OACN,QAAS,cAOX,WAAY,CACV,KAAM,OACN,QAAS,UACT,UAAYE,GAAM,OAAO,KAAKC,6BAA2B,EAAE,SAASD,CAAC,GAOvE,KAAM,CACJ,KAAM,OACN,QAAS,UACT,UAAYE,GAAM,OAAO,KAAKC,uBAAqB,EAAE,SAASD,CAAC,GAOjE,YAAa,CACX,KAAM,QACN,QAAS,IAMX,eAAgB,CACd,KAAM,OACN,QAAS,MAOX,QAAS,CACP,KAAM,OACN,QAAS,QAOX,iBAAkB,CAChB,KAAM,OACN,QAAS,QAOX,KAAM,CACJ,KAAM,OACN,QAAS,KACT,UAAYE,GAAM,OAAO,KAAKC,uBAAqB,EAAE,SAASD,CAAC,GAUjE,MAAO,CACL,KAAM,OACN,QAAS,MAQX,UAAW,CACT,KAAM,CAAC,OAAQ,OAAQ,KAAK,EAC5B,QAAS,KAIb,MAAO,CAOL,gBAQA,iBAGF,MAAQ,CACN,MAAO,CACL,eAAgB,GAEpB,EAEA,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,MAEvB,EAEA,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,MAEvB,GAGF,SAAW,CACT,KAAK,cAAa,CACpB,EAEA,SAAW,CACT,KAAK,cAAa,CACpB,EAEA,SAAW,CACTE,EAAAA,gBAAgBC,EAAAA,cAAc,KAAK,GAAG,EAAG,KAAK,SAAS,IAAI,CAC7D,EAEA,QAAS,CACP,eAAiB,CACf,KAAK,yBAAwB,EAC7B,KAAK,yBAAwB,CAC/B,EAEA,0BAA4B,CACtBC,iBAAe,KAAK,OAAO,OAAO,GAElCA,EAAAA,eAAe,KAAK,OAAO,SAAS,GAAK,CAAC,KAAK,kBACjD,QAAQ,KAAK,sEAAsE,CAEvF,EAEA,0BAA4B,CACtBA,iBAAe,KAAK,OAAO,KAAK,GAE/B,KAAK,kBACR,QAAQ,KAAK,kEAAkE,CAEnF,EAEJ,+KAxWEC,EAAAA,mBAkEO,OAAA,CAjEL,UAAQ,kBACP,MAHLC,EAAAA,gBAGaC,EAAA,UAAS,aAAA,CAAA,EACjB,MAJLC,EAAAA,sBAIcD,EAAA,KAAK,CAAA,IAEfE,EAAAA,YAcqBC,EAdrBC,aACUC,EAAA,iBAAgB,CACxB,IAAI,cACH,uBAAOC,EAAA,MAAK,eAAA,MAEF,KAAIC,EAAAA,QAEb,CAGE,CAAA,KALqBC,CAAQ,IAAA,CAE/BC,EAAAA,WAGEH,EAAA,OAAA,YAAA,CADC,KAAME,CAAQ,CAAA,IAfzB,QAAAD,EAAAA,QAmBM,IAAuB,CAAvBE,aAAuBH,EAAA,OAAA,SAAA,IAnB7B,EAAA,OAsBIG,EAAAA,WA4COH,oBA5CP,IA4CO,CA1CGA,EAAA,OAAO,4BADfI,EAAAA,YA4BcC,EAAA,CAnDpB,IAAA,EAyBS,UAAWX,EAAA,kBACX,uBAAOY,EAAA,eAAc,IACrB,SAAMC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAEC,GAAQF,EAAA,eAAiBE,KAEvB,OAAMP,EAAAA,QAAEQ,GAAK,CACtBb,EAAAA,YAYqBc,EAZrBZ,aAYqB,CAAA,GAXNW,KAAUV,EAAA,kBAAgB,CACtC,OAAQO,EAAA,eACR,uBAAON,EAAA,MAAK,eAAA,MAEF,KAAIC,EAAAA,QAEb,CAGE,CAAA,KALqBC,CAAQ,IAAA,CAE/BC,EAAAA,WAGEH,EAAA,OAAA,YAAA,CADC,KAAME,CAAQ,CAAA,IAvC/B,EAAA,sBA4CmB,KAAID,EAAAA,QAEb,CAGE,CALe,MAAAU,KAAK,CAEtBR,EAAAA,WAGEH,EAAA,OAAA,eAAA,CADC,MAAOW,CAAK,CAAA,IAhDzB,EAAA,sBAqDMC,YAAA,EAAAR,cAYqBM,EAZrBZ,EAAAA,WAYqB,CAjE3B,IAAA,GAuDgBC,EAAA,iBAAgB,CACvB,uBAAOC,EAAA,MAAK,eAAA,MAEF,KAAIC,EAAAA,QAEb,CAGE,CAAA,KALqBC,CAAQ,IAAA,CAE/BC,EAAAA,WAGEH,EAAA,OAAA,YAAA,CADC,KAAME,CAAQ,CAAA,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=\"[rootClass, '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     * HTML button disabled attribute for alpha button only\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    alphaDisabled: {\n      type: Boolean,\n      default: false,\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 for both buttons.\n     * Use alphaDisabled or omegaDisabled to disable buttons individually.\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     * HTML button disabled attribute for omega button only\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    omegaDisabled: {\n      type: Boolean,\n      default: false,\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     * Additional class name for the root element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    rootClass: {\n      type: [String, Object, Array],\n      default: '',\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 || this.alphaDisabled,\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 || this.omegaDisabled,\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","$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"],"mappings":"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"}

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

@@ -1,12 +1,12 @@
 import b from "./split-button-alpha.js";
 import O from "./split-button-omega.js";
-import { hasSlotContent as p, warnIfUnmounted as v, returnFirstEl as S } from "../../common/utils/index.js";
-import { resolveComponent as r, createElementBlock as B, openBlock as d, normalizeStyle as k, normalizeClass as I, createVNode as c, renderSlot as a, mergeProps as m, withCtx as i, createBlock as f } from "vue";
+import { hasSlotContent as p, warnIfUnmounted as v, returnFirstEl as B } from "../../common/utils/index.js";
+import { resolveComponent as r, createElementBlock as S, openBlock as d, normalizeStyle as k, normalizeClass as I, createVNode as c, renderSlot as a, mergeProps as m, withCtx as i, createBlock as f } from "vue";
 import { _ as T } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 import P from "../dropdown/dropdown.js";
-import { BUTTON_SIZE_MODIFIERS as w, BUTTON_KIND_MODIFIERS as $, BUTTON_IMPORTANCE_MODIFIERS as C, ICON_POSITION_MODIFIERS as A } from "../button/button-constants.js";
+import { BUTTON_SIZE_MODIFIERS as w, BUTTON_KIND_MODIFIERS as $, BUTTON_IMPORTANCE_MODIFIERS as D, ICON_POSITION_MODIFIERS as C } from "../button/button-constants.js";
 import "./split-button-constants.js";
-const z = {
+const A = {
   compatConfig: { MODE: 3 },
   name: "DtSplitButton",
   components: {
@@ -38,7 +38,7 @@ const z = {
     alphaIconPosition: {
       type: String,
       default: "left",
-      validator: (t) => Object.keys(A).includes(t)
+      validator: (t) => Object.keys(C).includes(t)
     },
     /**
      * Used to customize the alpha label container
@@ -47,6 +47,17 @@ const z = {
       type: [String, Array, Object],
       default: ""
     },
+    /**
+     * HTML button disabled attribute for alpha button only
+     * <a class="d-link" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled" target="_blank">
+     *  (Reference)
+     * </a>
+     * @values true, false
+     */
+    alphaDisabled: {
+      type: Boolean,
+      default: !1
+    },
     /**
      * Whether the alpha button should display a loading animation or not.
      * @values true, false
@@ -74,7 +85,8 @@ const z = {
       default: !1
     },
     /**
-     * HTML button disabled attribute
+     * HTML button disabled attribute for both buttons.
+     * Use alphaDisabled or omegaDisabled to disable buttons individually.
      * <a class="d-link" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled" target="_blank">
      *  (Reference)
      * </a>
@@ -99,7 +111,7 @@ const z = {
     importance: {
       type: String,
       default: "primary",
-      validator: (t) => Object.keys(C).includes(t)
+      validator: (t) => Object.keys(D).includes(t)
     },
     /**
      * The color of the button.
@@ -125,6 +137,17 @@ const z = {
       type: String,
       default: null
     },
+    /**
+     * HTML button disabled attribute for omega button only
+     * <a class="d-link" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled" target="_blank">
+     *  (Reference)
+     * </a>
+     * @values true, false
+     */
+    omegaDisabled: {
+      type: Boolean,
+      default: !1
+    },
     /**
      * Element ID, useful in case you need to reference the button
      * as an external anchor for popover.
@@ -198,7 +221,7 @@ const z = {
         active: this.alphaActive,
         ariaLabel: this.alphaAriaLabel,
         assertiveOnFocus: this.assertiveOnFocus,
-        disabled: this.disabled,
+        disabled: this.disabled || this.alphaDisabled,
         iconPosition: this.alphaIconPosition,
         labelClass: this.alphaLabelClass,
         loading: this.alphaLoading,
@@ -215,7 +238,7 @@ const z = {
         id: this.omegaId,
         active: this.omegaActive,
         ariaLabel: this.omegaAriaLabel,
-        disabled: this.disabled,
+        disabled: this.disabled || this.omegaDisabled,
         importance: this.importance,
         kind: this.kind,
         size: this.size,
@@ -232,7 +255,7 @@ const z = {
     this.validateProps();
   },
   mounted() {
-    v(S(this.$el), this.$options.name);
+    v(B(this.$el), this.$options.name);
   },
   methods: {
     validateProps() {
@@ -246,12 +269,12 @@ const z = {
     }
   }
 };
-function D(t, o, s, _, l, n) {
+function z(t, o, l, _, s, n) {
   const g = r("split-button-alpha"), u = r("split-button-omega"), y = r("dt-dropdown");
-  return d(), B("span", {
+  return d(), S("span", {
     "data-qa": "dt-split-button",
-    class: I([s.rootClass, "d-split-btn"]),
-    style: k({ width: s.width })
+    class: I([l.rootClass, "d-split-btn"]),
+    style: k({ width: l.width })
   }, [
     c(g, m(n.alphaButtonProps, {
       ref: "alphaButton",
@@ -268,20 +291,20 @@ function D(t, o, s, _, l, n) {
     a(t.$slots, "omega", {}, () => [
       t.$slots.dropdownList ? (d(), f(y, {
         key: 0,
-        placement: s.dropdownPlacement,
-        onClick: o[2] || (o[2] = (e) => l.isDropdownOpen = !0),
-        onOpened: o[3] || (o[3] = (e) => l.isDropdownOpen = e)
+        placement: l.dropdownPlacement,
+        onClick: o[2] || (o[2] = (e) => s.isDropdownOpen = !0),
+        onOpened: o[3] || (o[3] = (e) => s.isDropdownOpen = e)
       }, {
         anchor: i((e) => [
           c(u, m({ ...e, ...n.omegaButtonProps }, {
-            active: l.isDropdownOpen,
+            active: s.isDropdownOpen,
             onClick: o[1] || (o[1] = (h) => t.$emit("omega-clicked"))
           }), {
             icon: i(({ size: h }) => [
               a(t.$slots, "omegaIcon", { size: h })
             ]),
-            _: 2
-          }, 1040, ["active"])
+            _: 3
+          }, 16, ["active"])
         ]),
         list: i(({ close: e }) => [
           a(t.$slots, "dropdownList", { close: e })
@@ -298,7 +321,7 @@ function D(t, o, s, _, l, n) {
     ])
   ], 6);
 }
-const U = /* @__PURE__ */ T(z, [["render", D]]);
+const U = /* @__PURE__ */ T(A, [["render", z]]);
 export {
   U as default
 };

package/dist/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=\"[rootClass, '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     * Additional class name for the root element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    rootClass: {\n      type: [String, Object, Array],\n      default: '',\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","_normalizeClass","$props","_normalizeStyle","_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=\"[rootClass, '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     * HTML button disabled attribute for alpha button only\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    alphaDisabled: {\n      type: Boolean,\n      default: false,\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 for both buttons.\n     * Use alphaDisabled or omegaDisabled to disable buttons individually.\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     * HTML button disabled attribute for omega button only\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    omegaDisabled: {\n      type: Boolean,\n      default: false,\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     * Additional class name for the root element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    rootClass: {\n      type: [String, Object, Array],\n      default: '',\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 || this.alphaDisabled,\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 || this.omegaDisabled,\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","$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"],"mappings":"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"}

package/dist/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    data-qa=\"dt-stack\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      defaultAlign,\n      defaultJustify,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from './stack_constants';\nimport { directionValidator, gapValidator, alignValidator, justifyValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass, getDefaultAlignClass, getDefaultJustifyClass } from './utils';\n\nexport default {\n  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 overridden\n     * using the `align` and `justify` props.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n\n    /**\n     * The align property controls the alignment of items along the cross axis.\n     * The align can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default align with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * If not specified, alignment uses CSS defaults: stretch for column direction,\n     * center for row/row-reverse directions (set by CSS).\n     * Valid values are 'start', 'center', 'end', 'stretch', 'baseline'.\n     */\n    align: {\n      type: [String, Object],\n      validator: (align) => alignValidator(align),\n    },\n\n    /**\n     * The justify property controls the justification of items along the main axis.\n     * The justify can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default justify with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are 'start', 'center', 'end', 'space-around', 'space-between', 'space-evenly'.\n     */\n    justify: {\n      type: [String, Object],\n      default: 'start',\n      validator: (justify) => justifyValidator(justify),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n      DT_STACK_ALIGN,\n      DT_STACK_JUSTIFY,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    defaultAlign () {\n      return getDefaultAlignClass(this.align);\n    },\n\n    defaultJustify () {\n      return getDefaultJustifyClass(this.justify);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap, this.align, this.justify);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","direction","directionValidator","gap","gapValidator","align","alignValidator","justify","justifyValidator","DT_STACK_DIRECTION","DT_STACK_GAP","DT_STACK_RESPONSIVE_BREAKPOINTS","DT_STACK_ALIGN","DT_STACK_JUSTIFY","getDefaultGapClass","getDefaultDirectionClass","getDefaultAlignClass","getDefaultJustifyClass","getResponsiveClasses","_createBlock","_resolveDynamicComponent","$props","_normalizeClass","$options","_withCtx","_renderSlot","_ctx"],"mappings":"uRAuBKA,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,GAatC,MAAO,CACL,KAAM,CAAC,OAAQ,MAAM,EACrB,UAAYE,GAAUC,EAAAA,eAAeD,CAAK,GAW5C,QAAS,CACP,KAAM,CAAC,OAAQ,MAAM,EACrB,QAAS,QACT,UAAYE,GAAYC,EAAAA,iBAAiBD,CAAO,IAIpD,MAAQ,CACN,MAAO,CACL,mBAAAE,EAAAA,gCACAC,EAAAA,aACA,gCAAAC,EAAAA,gCACA,eAAAC,EAAAA,eACA,iBAAAC,EAAAA,iBAEJ,EAEA,SAAU,CACR,YAAc,CACZ,OAAOC,EAAAA,mBAAmB,KAAK,GAAG,CACpC,EAEA,kBAAoB,CAClB,OAAOC,EAAAA,yBAAyB,KAAK,SAAS,CAChD,EAEA,cAAgB,CACd,OAAOC,EAAAA,qBAAqB,KAAK,KAAK,CACxC,EAEA,gBAAkB,CAChB,OAAOC,EAAAA,uBAAuB,KAAK,OAAO,CAC5C,EAEA,iBAAmB,CACjB,OAAOC,EAAAA,qBAAqB,KAAK,UAAW,KAAK,IAAK,KAAK,MAAO,KAAK,OAAO,CAChF,EAEJ,+CA5HEC,EAAAA,YADFC,EAAAA,wBAESC,EAAA,EAAE,EAAA,CACP,UAAQ,WACP,MAJLC,EAAAA,eAAA,WAIqCC,EAAA,iBAAwBA,EAAA,WAAkBA,EAAA,aAAoBA,EAAA,eAAsBA,EAAA,oBAJzH,QAAAC,EAAAA,QAcI,IAAQ,CAARC,aAAQC,EAAA,OAAA,SAAA,IAdZ,EAAA"}
+{"version":3,"file":"stack.cjs","sources":["../../../components/stack/stack.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    data-qa=\"dt-stack\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      defaultAlign,\n      defaultJustify,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from './stack_constants';\nimport { directionValidator, gapValidator, alignValidator, justifyValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass, getDefaultAlignClass, getDefaultJustifyClass } from './utils';\n\nexport default {\n  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 overridden\n     * using the `align` and `justify` props.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n\n    /**\n     * The align property controls the alignment of items along the cross axis.\n     * The align can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default align with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * If not specified, alignment uses CSS defaults: stretch for column direction,\n     * center for row/row-reverse directions (set by CSS).\n     * Valid values are 'start', 'center', 'end', 'stretch', 'baseline'.\n     */\n    align: {\n      type: [String, Object],\n      validator: (align) => alignValidator(align),\n    },\n\n    /**\n     * The justify property controls the justification of items along the main axis.\n     * The justify can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default justify with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are 'start', 'center', 'end', 'space-around', 'space-between', 'space-evenly'.\n     */\n    justify: {\n      type: [String, Object],\n      default: 'start',\n      validator: (justify) => justifyValidator(justify),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n      DT_STACK_ALIGN,\n      DT_STACK_JUSTIFY,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    defaultAlign () {\n      return getDefaultAlignClass(this.align);\n    },\n\n    defaultJustify () {\n      return getDefaultJustifyClass(this.justify);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap, this.align, this.justify);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","direction","directionValidator","gap","gapValidator","align","alignValidator","justify","justifyValidator","DT_STACK_DIRECTION","DT_STACK_GAP","DT_STACK_RESPONSIVE_BREAKPOINTS","DT_STACK_ALIGN","DT_STACK_JUSTIFY","getDefaultGapClass","getDefaultDirectionClass","getDefaultAlignClass","getDefaultJustifyClass","getResponsiveClasses","_openBlock","_createBlock","_resolveDynamicComponent","$props","_normalizeClass","$options","_renderSlot","_ctx"],"mappings":"uRAuBKA,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,GAatC,MAAO,CACL,KAAM,CAAC,OAAQ,MAAM,EACrB,UAAYE,GAAUC,EAAAA,eAAeD,CAAK,GAW5C,QAAS,CACP,KAAM,CAAC,OAAQ,MAAM,EACrB,QAAS,QACT,UAAYE,GAAYC,EAAAA,iBAAiBD,CAAO,IAIpD,MAAQ,CACN,MAAO,CACL,mBAAAE,EAAAA,gCACAC,EAAAA,aACA,gCAAAC,EAAAA,gCACA,eAAAC,EAAAA,eACA,iBAAAC,EAAAA,iBAEJ,EAEA,SAAU,CACR,YAAc,CACZ,OAAOC,EAAAA,mBAAmB,KAAK,GAAG,CACpC,EAEA,kBAAoB,CAClB,OAAOC,EAAAA,yBAAyB,KAAK,SAAS,CAChD,EAEA,cAAgB,CACd,OAAOC,EAAAA,qBAAqB,KAAK,KAAK,CACxC,EAEA,gBAAkB,CAChB,OAAOC,EAAAA,uBAAuB,KAAK,OAAO,CAC5C,EAEA,iBAAmB,CACjB,OAAOC,EAAAA,qBAAqB,KAAK,UAAW,KAAK,IAAK,KAAK,MAAO,KAAK,OAAO,CAChF,EAEJ,0BA5HE,OAAAC,EAAAA,UAAA,EAAAC,EAAAA,YAcYC,EAAAA,wBAbLC,EAAA,EAAE,EAAA,CACP,UAAQ,WACP,MAAKC,EAAAA,eAAA,WAA2BC,EAAA,iBAAwBA,EAAA,WAAkBA,EAAA,aAAoBA,EAAA,eAAsBA,EAAA,sCAUrH,IAAQ,CAARC,aAAQC,EAAA,OAAA,SAAA"}

package/dist/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    data-qa=\"dt-stack\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      defaultAlign,\n      defaultJustify,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from './stack_constants';\nimport { directionValidator, gapValidator, alignValidator, justifyValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass, getDefaultAlignClass, getDefaultJustifyClass } from './utils';\n\nexport default {\n  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 overridden\n     * using the `align` and `justify` props.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n\n    /**\n     * The align property controls the alignment of items along the cross axis.\n     * The align can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default align with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * If not specified, alignment uses CSS defaults: stretch for column direction,\n     * center for row/row-reverse directions (set by CSS).\n     * Valid values are 'start', 'center', 'end', 'stretch', 'baseline'.\n     */\n    align: {\n      type: [String, Object],\n      validator: (align) => alignValidator(align),\n    },\n\n    /**\n     * The justify property controls the justification of items along the main axis.\n     * The justify can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default justify with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are 'start', 'center', 'end', 'space-around', 'space-between', 'space-evenly'.\n     */\n    justify: {\n      type: [String, Object],\n      default: 'start',\n      validator: (justify) => justifyValidator(justify),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n      DT_STACK_ALIGN,\n      DT_STACK_JUSTIFY,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    defaultAlign () {\n      return getDefaultAlignClass(this.align);\n    },\n\n    defaultJustify () {\n      return getDefaultJustifyClass(this.justify);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap, this.align, this.justify);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","direction","directionValidator","gap","gapValidator","align","alignValidator","justify","justifyValidator","DT_STACK_DIRECTION","DT_STACK_GAP","DT_STACK_RESPONSIVE_BREAKPOINTS","DT_STACK_ALIGN","DT_STACK_JUSTIFY","getDefaultGapClass","getDefaultDirectionClass","getDefaultAlignClass","getDefaultJustifyClass","getResponsiveClasses","_createBlock","_resolveDynamicComponent","$props","_normalizeClass","$options","_withCtx","_renderSlot","_ctx"],"mappings":";;;;;AAuBA,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;;;;;;;;;;;IAatC,OAAO;AAAA,MACL,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,WAAW,CAACE,MAAUC,EAAeD,CAAK;AAAA;;;;;;;;;IAW5C,SAAS;AAAA,MACP,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAW,CAACE,MAAYC,EAAiBD,CAAO;AAAA;;EAIpD,OAAQ;AACN,WAAO;AAAA,MACL,oBAAAE;AAAA,MACA,cAAAC;AAAA,MACA,iCAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;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,eAAgB;AACd,aAAOC,EAAqB,KAAK,KAAK;AAAA,IACxC;AAAA,IAEA,iBAAkB;AAChB,aAAOC,EAAuB,KAAK,OAAO;AAAA,IAC5C;AAAA,IAEA,kBAAmB;AACjB,aAAOC,EAAqB,KAAK,WAAW,KAAK,KAAK,KAAK,OAAO,KAAK,OAAO;AAAA,IAChF;AAAA;AAEJ;;cA5HEC,EADFC,EAESC,EAAA,EAAE,GAAA;AAAA,IACP,WAAQ;AAAA,IACP,OAJLC,EAAA;AAAA;MAIqCC,EAAA;AAAA,MAAwBA,EAAA;AAAA,MAAkBA,EAAA;AAAA,MAAoBA,EAAA;AAAA,MAAsBA,EAAA;AAAA;;IAJzH,SAAAC,EAcI,MAAQ;AAAA,MAARC,EAAQC,EAAA,QAAA,SAAA;AAAA;IAdZ,GAAA;AAAA;;;"}
+{"version":3,"file":"stack.js","sources":["../../../components/stack/stack.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    data-qa=\"dt-stack\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      defaultAlign,\n      defaultJustify,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from './stack_constants';\nimport { directionValidator, gapValidator, alignValidator, justifyValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass, getDefaultAlignClass, getDefaultJustifyClass } from './utils';\n\nexport default {\n  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 overridden\n     * using the `align` and `justify` props.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n\n    /**\n     * The align property controls the alignment of items along the cross axis.\n     * The align can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default align with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * If not specified, alignment uses CSS defaults: stretch for column direction,\n     * center for row/row-reverse directions (set by CSS).\n     * Valid values are 'start', 'center', 'end', 'stretch', 'baseline'.\n     */\n    align: {\n      type: [String, Object],\n      validator: (align) => alignValidator(align),\n    },\n\n    /**\n     * The justify property controls the justification of items along the main axis.\n     * The justify can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default justify with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are 'start', 'center', 'end', 'space-around', 'space-between', 'space-evenly'.\n     */\n    justify: {\n      type: [String, Object],\n      default: 'start',\n      validator: (justify) => justifyValidator(justify),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n      DT_STACK_ALIGN,\n      DT_STACK_JUSTIFY,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    defaultAlign () {\n      return getDefaultAlignClass(this.align);\n    },\n\n    defaultJustify () {\n      return getDefaultJustifyClass(this.justify);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap, this.align, this.justify);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","direction","directionValidator","gap","gapValidator","align","alignValidator","justify","justifyValidator","DT_STACK_DIRECTION","DT_STACK_GAP","DT_STACK_RESPONSIVE_BREAKPOINTS","DT_STACK_ALIGN","DT_STACK_JUSTIFY","getDefaultGapClass","getDefaultDirectionClass","getDefaultAlignClass","getDefaultJustifyClass","getResponsiveClasses","_openBlock","_createBlock","_resolveDynamicComponent","$props","_normalizeClass","$options","_renderSlot","_ctx"],"mappings":";;;;;AAuBA,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;;;;;;;;;;;IAatC,OAAO;AAAA,MACL,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,WAAW,CAACE,MAAUC,EAAeD,CAAK;AAAA;;;;;;;;;IAW5C,SAAS;AAAA,MACP,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAW,CAACE,MAAYC,EAAiBD,CAAO;AAAA;;EAIpD,OAAQ;AACN,WAAO;AAAA,MACL,oBAAAE;AAAA,MACA,cAAAC;AAAA,MACA,iCAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;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,eAAgB;AACd,aAAOC,EAAqB,KAAK,KAAK;AAAA,IACxC;AAAA,IAEA,iBAAkB;AAChB,aAAOC,EAAuB,KAAK,OAAO;AAAA,IAC5C;AAAA,IAEA,kBAAmB;AACjB,aAAOC,EAAqB,KAAK,WAAW,KAAK,KAAK,KAAK,OAAO,KAAK,OAAO;AAAA,IAChF;AAAA;AAEJ;;AA5HE,SAAAC,EAAA,GAAAC,EAcYC,EAbLC,EAAA,EAAE,GAAA;AAAA,IACP,WAAQ;AAAA,IACP,OAAKC,EAAA;AAAA;MAA2BC,EAAA;AAAA,MAAwBA,EAAA;AAAA,MAAkBA,EAAA;AAAA,MAAoBA,EAAA;AAAA,MAAsBA,EAAA;AAAA;;eAUrH,MAAQ;AAAA,MAARC,EAAQC,EAAA,QAAA,SAAA;AAAA;;;;;"}

package/dist/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  updated () {\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  updated () {\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","_openBlock","_createElementBlock","_createElementVNode","_mergeProps","$data","$props","$options","args","_renderSlot","_ctx"],"mappings":"+NA+CKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,aAEN,SAAW,CACT,MAAO,CACL,aAAc,KAAK,WACnB,SAAU,KAAK,SAEnB,EAEA,MAAO,CAIL,MAAO,CACL,KAAM,OACN,QAAS,IAMX,SAAU,CACR,KAAM,OACN,QAAS,IAOX,SAAU,CACR,KAAM,QACN,QAAS,IAOX,SAAU,CACR,KAAM,QACN,QAAS,IAOX,WAAY,CACV,KAAM,QACN,QAAS,IAOX,KAAM,CACJ,KAAM,OACN,QAAS,UACT,SAAUC,EAAM,CACd,OAAOC,EAAAA,eAAe,SAASD,CAAI,CACrC,GAMF,aAAc,CACZ,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,IAMX,kBAAmB,CACjB,KAAM,OACN,QAAS,KAAO,CAAA,KAIpB,MAAO,CAOL,SAQA,iBAGF,MAAQ,CACN,MAAO,CACL,WAAY,CACV,SAAU,GACV,SAAU,IAGZ,QAAS,KACT,KAAM,CAAA,0BACNE,EAAAA,gDACAC,EAAAA,sDACAC,EAAAA,8BAEJ,EAEA,MAAO,CACL,SAAU,CACR,UAAW,GACX,SAAW,CACT,KAAK,WAAW,SAAW,KAAK,QAClC,GAGF,SAAU,CACR,UAAW,GACX,SAAW,CACT,KAAK,WAAW,SAAW,KAAK,QAClC,IAIJ,SAAW,CACT,KAAK,eAAc,CACrB,EAEA,SAAW,CACT,KAAK,eAAc,CACrB,EAEA,QAAS,CACP,gBAAkB,CAIX,KAAK,WAAW,WACnB,KAAK,WAAW,SAAW,KAAK,UAElC,KAAK,KAAO,KAAK,eAAc,CACjC,EAEA,SAAUC,EAAS,CACjB,KAAK,QAAUA,CACjB,EAEA,gBAAkB,CAEhB,OADa,MAAM,KAAK,KAAK,MAAM,KAAK,iBAAiB,QAAQ,CAAC,EAE/D,IAAIC,GAAM,SACT,MAAQ,CACN,QAASA,EACT,SAASC,EAAAD,EAAG,aAAa,eAAe,IAA/B,YAAAC,EAAkC,QAAQ,YAAa,IAChE,OAAOC,EAAAF,EAAG,aAAa,IAAI,IAApB,YAAAE,EAAuB,QAAQ,UAAW,IACjD,WAAYF,EAAG,aAAa,eAAe,IAAM,MACnD,CACF,CAAC,CACL,EAEA,UAAY,CACV,KAAK,MAAM,SAAU,CAAE,GAAG,KAAK,UAAS,CAAG,CAC7C,EAEA,SAAW,CACT,MAAMG,EAAQ,KAAK,mBAAkB,EACrC,GAAIA,IAAU,GAAI,OAElB,MAAMC,EAAeD,EAAQ,EAAI,EAAI,KAAK,KAAK,OAAS,EAAIA,EAAQ,EACpE,KAAK,iBAAiBC,CAAY,CACpC,EAEA,UAAY,CACV,MAAMD,EAAQ,KAAK,mBAAkB,EACrC,GAAIA,IAAU,GAAI,OAElB,MAAMC,EAAeD,EAAQ,EAAI,KAAK,KAAK,OAAS,EAAI,EAAIA,EAAQ,EACpE,KAAK,iBAAiBC,CAAY,CACpC,EAEA,iBAAkBD,EAAO,CACvB,KAAM,CAAE,QAAAE,CAAM,EAAM,KAAK,KAAKF,CAAK,EACnCE,EAAQ,MAAK,CACf,EAEA,UAAWC,EAAO,CAIhB,GAHI,KAAK,qBAET,KAAK,MAAM,gBAAiBA,CAAK,EAC7BA,EAAM,kBAAkB,OAE5B,MAAMH,EAAQ,KAAK,mBAAkB,EAErC,KAAK,iBAAiBA,CAAK,EAC3B,KAAK,SAAQ,CACf,EAEA,iBAAkBA,EAAO,CACvB,KAAM,CAAE,QAAAE,EAAS,QAAAE,CAAM,EAAM,KAAK,KAAKJ,CAAK,EAC5C,KAAK,WAAW,SAAWI,EAC3BF,EAAQ,MAAK,CACf,EAEA,oBAAsB,CAIpB,MAAMF,EAAQ,KAAK,KAAK,UAAWE,GACjC,KAAK,QAAUA,EAAQ,QAAU,GAAG,KAAK,OAAO,GAAKA,EAAQ,YAG/D,OAAOF,IAAU,GAAK,EAAIA,CAC5B,EAEA,cAAgB,SACV,KAAK,KAAK,SAAW,KACzBD,GAAAD,EAAA,KAAK,KAAK,CAAC,IAAX,YAAAA,EAAc,UAAd,MAAAC,EAAuB,QACzB,EAEA,aAAe,SACT,KAAK,KAAK,SAAW,KACzBA,GAAAD,EAAA,KAAK,KAAK,KAAK,KAAK,OAAS,CAAC,IAA9B,YAAAA,EAAiC,UAAjC,MAAAC,EAA0C,QAC5C,EAEA,kBAAoB,CAClB,MAAMM,EAAM,KAAK,KAAK,KAAK,mBAAkB,CAAE,EAC/C,OAAO,KAAK,WAAW,WAAaA,EAAI,OAC1C,EAEJ,EA3RIC,EAAA,CAAA,UAAQ,cAAc,2CADxB,OAAAC,YAAA,EAAAC,qBA+BM,MA/BNF,EA+BM,CA3BJG,EAAAA,mBAwBM,MAxBNC,aAwBM,CAvBJ,IAAI,OACH,MAAK,aAAiCC,EAAA,wBAAwBC,EAAA,IAAI,IAAwBD,EAAA,wBAAwB,QAAQ,EAAGC,EAAA,UAAqBD,EAAA,8BAA8B,UAAU,EAAGC,EAAA,YAA+BA,EAAA,eASrNA,EAAA,kBAAiB,CACzB,KAAK,UACJ,aAAYA,EAAA,MACZ,QAAK,gCAAOC,EAAA,SAAAA,EAAA,QAAA,GAAAC,CAAA,EAAO,CAAA,MAAA,CAAA,kCACND,EAAA,UAAAA,EAAA,SAAA,GAAAC,CAAA,EAAQ,CAAA,OAAA,CAAA,kCACRD,EAAA,WAAAA,EAAA,UAAA,GAAAC,CAAA,EAAS,CAAA,OAAA,CAAA,kCACTD,EAAA,WAAAA,EAAA,UAAA,GAAAC,CAAA,EAAS,CAAA,OAAA,CAAA,IACtB,4BAAOD,EAAA,WAAAA,EAAA,UAAA,GAAAC,CAAA,GACP,UAAO,gCAAOD,EAAA,cAAAA,EAAA,aAAA,GAAAC,CAAA,EAAY,CAAA,MAAA,CAAA,kCACbD,EAAA,aAAAA,EAAA,YAAA,GAAAC,CAAA,EAAW,CAAA,KAAA,CAAA,OAGzBC,aAAoBC,EAAA,OAAA,MAAA,SAGtBD,aAAQC,EAAA,OAAA,SAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"tab-group.js","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  updated () {\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.js","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  updated () {\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","_openBlock","_createElementBlock","_createElementVNode","_mergeProps","$data","$props","$options","args","_renderSlot","_ctx"],"mappings":"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"}