@dialpad/dialtone-vue 3.150.0 → 3.150.1

package/dist/lib/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sources":["../../components/skeleton/skeleton_constants.js","../../common/mixins/skeleton.js","../../components/skeleton/skeleton-shape.vue","../../components/skeleton/skeleton-text.vue","../../components/skeleton/skeleton-paragraph.vue","../../components/skeleton/skeleton-list-item.vue","../../components/skeleton/skeleton.vue"],"sourcesContent":["// NOTE: RippleDuration controls how long the delay is for the animation\n// of a skeleton 1000 pixels from the top of the page. Each skeleton\n// from the top down will have a delay duration from 0 to this offset.\n// The delay of each skeleton animation is based on how far down the page\n// the skeleton is rendered. This is a linear relationship. The unit\n// is miliseconds.\nexport const SKELETON_RIPPLE_DURATION = 3000000;\n\nexport const SKELETON_SHAPES = {\n  circle: 'd-bar-circle',\n  square: 'd-bar2',\n};\n\nexport const SKELETON_TEXT_TYPES = [\n  'body',\n  'heading',\n];\n\nexport const SKELETON_SHAPE_SIZES = {\n  sm: '24px',\n  md: '32px',\n  lg: '48px',\n};\n\nexport const SKELETON_HEADING_HEIGHTS = {\n  sm: 'd-h16',\n  md: 'd-h24',\n  lg: 'd-h32',\n};\n\nexport default {\n  SKELETON_RIPPLE_DURATION,\n  SKELETON_SHAPES,\n  SKELETON_TEXT_TYPES,\n  SKELETON_HEADING_HEIGHTS,\n};\n","import { SKELETON_RIPPLE_DURATION } from '@/components/skeleton/skeleton_constants';\n\n/**\n * @displayName Skeleton Animation Mixin\n */\nexport default {\n  computed: {\n    skeletonOffset () {\n      const skeletonText = this.$refs.skeleton;\n      if (!skeletonText) { return this.offset; }\n      const { top, height } = skeletonText.getBoundingClientRect();\n      return top + (height / 2);\n    },\n\n    skeletonStyle () {\n      const style = {};\n\n      if (this.skeletonOffset === -1 || (!this.animate && this.animationDuration === -1)) {\n        return style;\n      }\n      const animationDelay = this.skeletonOffset * SKELETON_RIPPLE_DURATION / 1000;\n      const animationDuration = this.animationDuration === -1 ? 1000 : this.animationDuration;\n      style.animationDelay = `${animationDelay}ms`;\n      style.animationDuration = `${animationDuration}ms`;\n      return style;\n    },\n  },\n};\n","<template>\n  <div\n    ref=\"skeleton\"\n    data-qa=\"skeleton-shape\"\n    :class=\"[\n      'skeleton-placeholder',\n      SKELETON_SHAPES[shape],\n      {\n        'skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"shapeStyles\"\n  />\n</template>\n\n<script>\nimport SkeletonAnimation from '@/common/mixins/skeleton';\nimport {\n  SKELETON_SHAPES,\n  SKELETON_SHAPE_SIZES,\n} from './skeleton_constants';\n\nexport default {\n  name: 'DtSkeletonShape',\n\n  mixins: [SkeletonAnimation],\n\n  props: {\n    /**\n     * Defines the shape of the skeleton, accepts circle or square.\n     * @values circle, square\n     */\n    shape: {\n      type: String,\n      default: 'circle',\n      validator: shape => Object.keys(SKELETON_SHAPES).includes(shape),\n    },\n\n    /**\n     * Size of the shape\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SKELETON_SHAPES,\n    };\n  },\n\n  computed: {\n    shapeStyles () {\n      const size = SKELETON_SHAPE_SIZES[this.size] || this.size;\n      return {\n        ...this.skeletonStyle,\n        'min-width': size,\n        'max-width': size,\n        'min-height': size,\n        'max-height': size,\n      };\n    },\n  },\n};\n</script>\n","<template>\n  <div\n    v-if=\"type === 'body'\"\n    ref=\"skeleton\"\n    data-qa=\"skeleton-text-body\"\n    :class=\"[\n      'd-skeleton-text',\n      'skeleton-placeholder',\n      {\n        'skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"{\n      width,\n      ...skeletonStyle,\n    }\"\n  />\n  <div\n    v-else-if=\"type === 'heading'\"\n    ref=\"skeleton\"\n    data-qa=\"skeleton-text-heading\"\n    :class=\"[\n      SKELETON_HEADING_HEIGHTS[headingHeight],\n      'd-skeleton-text--heading',\n      'skeleton-placeholder',\n      {\n        'skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"{\n      width,\n      ...skeletonStyle,\n    }\"\n  />\n</template>\n\n<script>\nimport { SKELETON_HEADING_HEIGHTS, SKELETON_TEXT_TYPES } from './skeleton_constants';\nimport SkeletonAnimation from '@/common/mixins/skeleton';\n\nexport default {\n  name: 'DtSkeletonText',\n\n  mixins: [SkeletonAnimation],\n\n  props: {\n    /**\n     * Skeleton type\n     * @values body, heading\n     */\n    type: {\n      type: String,\n      default: 'body',\n      validator: type => SKELETON_TEXT_TYPES.includes(type),\n    },\n\n    /**\n     * Heading height\n     * @values sm, md, lg\n     */\n    headingHeight: {\n      type: String,\n      default: 'md',\n      validator: headingHeight => Object.keys(SKELETON_HEADING_HEIGHTS).includes(headingHeight),\n    },\n\n    /**\n     * Width of the skeleton\n     */\n    width: {\n      type: String,\n      default: '100%',\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SKELETON_HEADING_HEIGHTS,\n    };\n  },\n};\n</script>\n","<template>\n  <div\n    :class=\"[\n      'd-skeleton-paragraph',\n      contentClass,\n    ]\"\n    contentClass\n    data-qa=\"skeleton-paragraph\"\n  >\n    <dt-skeleton-text\n      v-for=\"row in integerRows\"\n      :key=\"row\"\n      data-qa=\"skeleton-paragraph-row\"\n      :content-class=\"rowClass\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n      :animation-duration=\"animationDuration\"\n      :width=\"getSizeParagraphRow(row)\"\n    />\n  </div>\n</template>\n\n<script>\nimport DtSkeletonText from './skeleton-text.vue';\n\nconst validator = number => number !== '' && !Number.isNaN(Number(number));\nexport default {\n  name: 'DtSkeletonParagraph',\n  components: {\n    DtSkeletonText,\n  },\n\n  props: {\n    /**\n     * Quantity of rows to display\n     */\n    rows: {\n      type: [Number, String],\n      default: 3,\n      validator,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Controls the min width of paragraphs\n     */\n    minWidth: {\n      type: [Number, String],\n      default: 30,\n      validator,\n    },\n\n    /**\n     * Controls the max width of paragraphs\n     */\n    maxWidth: {\n      type: [Number, String],\n      default: 100,\n      validator,\n    },\n\n    /**\n     * Controls the width of paragraphs\n     */\n    width: {\n      type: [String, Array],\n      default: null,\n    },\n\n    /**\n     * If true, row widths will be random\n     * @values true, false\n     */\n    randomWidth: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the row.\n     */\n    rowClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  computed: {\n    integerRows () {\n      return Number(this.rows);\n    },\n  },\n\n  methods: {\n    randomWidthPercentage () {\n      const min = Math.min(this.minWidth, this.maxWidth);\n      const max = Math.max(this.minWidth, this.maxWidth);\n      return `${Math.round(Math.random() * (max - min)) + min}%`;\n    },\n\n    getSizeParagraphRow (row) {\n      const paragraphWidth = this.width;\n      const isArrayWidth = Array.isArray(paragraphWidth);\n      const currentWidth = paragraphWidth?.[row - 1];\n      const isLastRow = row === this.rows;\n\n      if (this.randomWidth) {\n        return this.randomWidthPercentage();\n      }\n\n      if (paragraphWidth && !isArrayWidth) {\n        return paragraphWidth;\n      }\n\n      if (paragraphWidth && isArrayWidth && currentWidth) {\n        return currentWidth;\n      }\n\n      return isLastRow ? '38%' : '100%';\n    },\n  },\n};\n</script>\n","<template>\n  <div\n    data-qa=\"skeleton-list-item\"\n    :class=\"[\n      'd-skeleton-list-item',\n      {\n        'd-skeleton-list-item--single': paragraphs.rows === 1,\n      },\n      contentClass,\n    ]\"\n  >\n    <dt-skeleton-shape\n      class=\"d-skeleton-list-item__shape\"\n      :size=\"shapeSize\"\n      :shape=\"shape\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n      :content-class=\"shapeClass\"\n    />\n    <div class=\"d-skeleton-list-item__paragraph-container\">\n      <dt-skeleton-paragraph\n        v-bind=\"paragraphs\"\n        :animation-duration=\"animationDuration\"\n        :animate=\"animate\"\n        :offset=\"offset\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { SKELETON_SHAPES } from './skeleton_constants';\nimport DtSkeletonShape from './skeleton-shape.vue';\nimport DtSkeletonParagraph from './skeleton-paragraph.vue';\n\nexport default {\n  name: 'DtSkeletonListItem',\n\n  components: {\n    DtSkeletonShape,\n    DtSkeletonParagraph,\n  },\n\n  props: {\n    /**\n     * Defines the shape of the skeleton, accepts circle or square.\n     * @values circle, square\n     */\n    shape: {\n      type: String,\n      default: 'circle',\n      validator: shape => Object.keys(SKELETON_SHAPES).includes(shape),\n    },\n\n    /**\n     * Size of the shape\n     * @values xs, sm, md, lg, xl\n     */\n    shapeSize: {\n      type: String,\n      default: 'md',\n    },\n\n    /**\n     * Object containing quantity of paragraphs to display\n     * and a randomWidth boolean.\n     */\n    paragraphs: {\n      type: Object,\n      default: () => ({ rows: 3, randomWidth: true }),\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the shape.\n     */\n    shapeClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n  },\n};\n</script>\n","<template>\n  <div\n    aria-busy=\"true\"\n    role=\"status\"\n    :aria-label=\"ariaLabel\"\n  >\n    <dt-skeleton-list-item\n      v-if=\"listItemOption\"\n      v-bind=\"listItemOption === true ? {} : listItemOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-shape\n      v-else-if=\"shapeOption\"\n      v-bind=\"shapeOption === true ? {} : shapeOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-paragraph\n      v-else-if=\"paragraphOption\"\n      v-bind=\"paragraphOption === true ? {} : paragraphOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-text\n      v-else\n      v-bind=\"textOption || {}\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n  </div>\n</template>\n\n<script>\nimport DtSkeletonShape from './skeleton-shape.vue';\nimport DtSkeletonListItem from './skeleton-list-item.vue';\nimport DtSkeletonParagraph from './skeleton-paragraph.vue';\nimport DtSkeletonText from './skeleton-text.vue';\n\n/**\n * Skeleton loader is a non-interactive placeholder that displays a preview of the UI to visually communicate\n * that content is in the process of loading. Skeleton is used to provide a low fidelity\n * representation of the user interface (UI) before content appears on the page.\n * @see https://dialtone.dialpad.com/components/skeleton.html\n */\nexport default {\n  name: 'DtSkeleton',\n  components: {\n    DtSkeletonText,\n    DtSkeletonShape,\n    DtSkeletonListItem,\n    DtSkeletonParagraph,\n  },\n\n  props: {\n    /**\n     * Set this prop to have the skeleton render as multiple lines of text.\n     * Set only one option prop at a time.\n     */\n    paragraphOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a list item with an avatar and wrapping text.\n     * Set only one option prop at a time.\n     */\n    listItemOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a single line of text.\n     * Set only one option prop at a time.\n     */\n    textOption: {\n      type: Object,\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a specific shape.\n     * Set only one option prop at a time.\n     */\n    shapeOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Descriptive label for the content.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n  },\n\n  computed: {\n    validationOptions () {\n      return {\n        paragraphOption: this.paragraphOption,\n        listItemOption: this.listItemOption,\n        textOption: this.textOption,\n        shapeOption: this.shapeOption,\n      };\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      handler: 'validator',\n    },\n  },\n\n  methods: {\n    validator () {\n      const filtered = Object.entries(this.validationOptions)\n        .filter(([_, option]) => option);\n      if (filtered.length >= 2) {\n        const errorMessage = `Use only one of ${filtered.map(([key]) => key).join(' | ')} options at the same time`;\n        console.error(errorMessage);\n      }\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n// The --placeholder-from-color and --placeholder-to-color\n// custom properties can be set on the parent class of the\n// placeholder to control the animation colors.\n.skeleton-placeholder {\n  display: flex;\n  stroke: none;\n  fill: var(--placeholder-from-color, var(--dt-color-black-300));\n  background: var(--placeholder-from-color, var(--dt-color-black-300));\n\n  &--animate {\n    animation-name: placeholder-throb;\n    animation-iteration-count: infinite;\n  }\n}\n\n// the animation is used by the skeleton component\n@keyframes placeholder-throb {\n  10% {\n    fill: var(--placeholder-from-color, var(--dt-color-black-300));\n    background: var(--placeholder-from-color, var(--dt-color-black-300));\n  }\n  50% {\n    fill: var(--placeholder-to-color, var(--dt-color-black-100));\n    background: var(--placeholder-to-color, var(--dt-color-black-100));\n  }\n  90% {\n    fill: var(--placeholder-from-color, var(--dt-color-black-300));\n    background: var(--placeholder-from-color, var(--dt-color-black-300));\n  }\n}\n</style>\n"],"names":["_sfc_main","_createElementBlock","_normalizeClass","_normalizeStyle","_Fragment","_renderList","_createBlock","_hoisted_1","_createVNode","_createElementVNode","_mergeProps","_openBlock"],"mappings":"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"}
+{"version":3,"file":"skeleton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/lib/split-button.cjs

@@ -1,544 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const vue = require("vue");
-const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
-const lib_button = require("./button.cjs");
-const vue3 = require("@dialpad/dialtone-icons/vue3");
-const common_utils = require("../common/utils.cjs");
-const dropdown = require("../chunks/dropdown-p-Azgwov.js");
-require("../chunks/link_constants-x8NwdqmA.js");
-require("../common/constants.cjs");
-require("../chunks/keyboard_list_navigation-fJnl_Iox.js");
-require("../chunks/dropdown_constants-2pGCXy7m.js");
-require("../chunks/sr_only_close_button-xGrHFjwA.js");
-require("./icon.cjs");
-require("../chunks/icon_constants-da57m7BZ.js");
-require("@dialpad/dialtone-icons/icons.js");
-require("./popover.cjs");
-require("../chunks/popover_constants-XnGWXaxX.js");
-require("tippy.js");
-require("../chunks/modal-VgxXAQFP.js");
-require("./lazy-show.cjs");
-require("../chunks/list_item_constants-EiqkqZvP.js");
-const _sfc_main$2 = {
-  name: "SplitButtonAlpha",
-  components: {
-    DtButton: lib_button.DtButton
-  },
-  props: {
-    /**
-     * Determines whether the button should have active styling
-     */
-    active: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Descriptive label for the button
-     */
-    ariaLabel: {
-      type: String,
-      default: null
-    },
-    /**
-     * The position of the icon slot within the button.
-     */
-    iconPosition: {
-      type: String,
-      default: "left"
-    },
-    /**
-     * Used to customize the label container
-     */
-    labelClass: {
-      type: [String, Array, Object],
-      default: ""
-    },
-    /**
-     * Whether the button should display a loading animation or not.
-     */
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Text shown in tooltip when you hover the button
-     */
-    tooltipText: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Determines whether a screenreader reads live updates of
-     * the button content to the user while the button is in focus.
-     */
-    assertiveOnFocus: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * HTML button disabled attribute
-     */
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * The fill and outline of the button associated with its visual importance.
-     */
-    importance: {
-      type: String,
-      default: "primary"
-    },
-    /**
-     * The color of the button.
-     */
-    kind: {
-      type: String,
-      default: "default"
-    },
-    /**
-     * The size of the button.
-     */
-    size: {
-      type: String,
-      default: "md"
-    }
-  },
-  data() {
-    return {
-      BUTTON_ICON_SIZES: lib_button.BUTTON_ICON_SIZES
-    };
-  }
-};
-function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_button = vue.resolveComponent("dt-button");
-  const _directive_dt_tooltip = vue.resolveDirective("dt-tooltip");
-  return vue.withDirectives((vue.openBlock(), vue.createBlock(_component_dt_button, {
-    "data-qa": "dt-split-button-alpha",
-    active: $props.active,
-    "aria-label": $props.ariaLabel,
-    "assertive-on-focus": $props.assertiveOnFocus,
-    class: vue.normalizeClass(`d-split-btn__alpha d-split-btn__alpha--${$props.size}`),
-    disabled: $props.disabled,
-    "icon-position": $props.iconPosition,
-    importance: $props.importance,
-    kind: $props.kind,
-    "label-class": $props.labelClass,
-    loading: $props.loading,
-    size: $props.size
-  }, {
-    icon: vue.withCtx(() => [
-      vue.renderSlot(_ctx.$slots, "icon", {
-        size: $data.BUTTON_ICON_SIZES[$props.size]
-      })
-    ]),
-    default: vue.withCtx(() => [
-      vue.renderSlot(_ctx.$slots, "default")
-    ]),
-    _: 3
-  }, 8, ["active", "aria-label", "assertive-on-focus", "class", "disabled", "icon-position", "importance", "kind", "label-class", "loading", "size"])), [
-    [_directive_dt_tooltip, $props.tooltipText]
-  ]);
-}
-const SplitButtonAlpha = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
-const SPLIT_BUTTON_ICON_SIZES = {
-  xs: "100",
-  sm: "100",
-  md: "200",
-  lg: "200",
-  xl: "300"
-};
-const _sfc_main$1 = {
-  name: "SplitButtonOmega",
-  components: {
-    DtButton: lib_button.DtButton,
-    DtIconChevronDown: vue3.DtIconChevronDown
-  },
-  props: {
-    /**
-     * Determines whether the button should have active styling
-     */
-    active: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Descriptive label for the button
-     */
-    ariaLabel: {
-      type: String,
-      default: null
-    },
-    /**
-     * HTML button disabled attribute
-     */
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Element ID, useful in case you need to reference the button
-     * as an external anchor for popover
-     */
-    id: {
-      type: String,
-      default: common_utils.getUniqueString()
-    },
-    /**
-     * The fill and outline of the button associated with its visual importance.
-     */
-    importance: {
-      type: String,
-      default: "primary"
-    },
-    /**
-     * The color of the button.
-     */
-    kind: {
-      type: String,
-      default: "default"
-    },
-    /**
-     * The size of the button.
-     */
-    size: {
-      type: String,
-      default: "md"
-    },
-    /**
-     * Text shown in tooltip when you hover the button
-     */
-    tooltipText: {
-      type: String,
-      default: ""
-    }
-  },
-  data() {
-    return {
-      SPLIT_BUTTON_ICON_SIZES
-    };
-  }
-};
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon_chevron_down = vue.resolveComponent("dt-icon-chevron-down");
-  const _component_dt_button = vue.resolveComponent("dt-button");
-  const _directive_dt_tooltip = vue.resolveDirective("dt-tooltip");
-  return vue.withDirectives((vue.openBlock(), vue.createBlock(_component_dt_button, {
-    id: $props.id,
-    "data-qa": "dt-split-button-omega",
-    active: $props.active,
-    "aria-label": $props.ariaLabel,
-    class: vue.normalizeClass(`d-split-btn__omega d-split-btn__omega--${$props.size}`),
-    disabled: $props.disabled,
-    importance: $props.importance,
-    kind: $props.kind,
-    size: $props.size
-  }, {
-    icon: vue.withCtx(() => [
-      vue.renderSlot(_ctx.$slots, "icon", {
-        size: $data.SPLIT_BUTTON_ICON_SIZES[$props.size]
-      }, () => [
-        vue.createVNode(_component_dt_icon_chevron_down, {
-          size: $data.SPLIT_BUTTON_ICON_SIZES[$props.size]
-        }, null, 8, ["size"])
-      ])
-    ]),
-    _: 3
-  }, 8, ["id", "active", "aria-label", "class", "disabled", "importance", "kind", "size"])), [
-    [_directive_dt_tooltip, $props.tooltipText]
-  ]);
-}
-const SplitButtonOmega = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
-const _sfc_main = {
-  name: "DtSplitButton",
-  components: {
-    SplitButtonOmega,
-    DtDropdown: dropdown.DtDropdown,
-    SplitButtonAlpha
-  },
-  inheritAttrs: false,
-  props: {
-    /**
-     * Determines whether the alpha button should have active styling
-     * @values true, false
-     */
-    alphaActive: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Descriptive label for the alpha button
-     */
-    alphaAriaLabel: {
-      type: String,
-      default: null
-    },
-    /**
-     * The position of the icon slot within the alpha button.
-     * @values left, right, top, bottom
-     */
-    alphaIconPosition: {
-      type: String,
-      default: "left",
-      validator: (position) => Object.keys(lib_button.ICON_POSITION_MODIFIERS).includes(position)
-    },
-    /**
-     * Used to customize the alpha label container
-     */
-    alphaLabelClass: {
-      type: [String, Array, Object],
-      default: ""
-    },
-    /**
-     * Whether the alpha button should display a loading animation or not.
-     * @values true, false
-     */
-    alphaLoading: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Text shown in tooltip when you hover the alpha button,
-     * required if no content is passed to default slot
-     */
-    alphaTooltipText: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Determines whether a screenreader reads live updates of
-     * the button content to the user while the button
-     * is in focus.
-     * @values true, false
-     */
-    assertiveOnFocus: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * HTML button disabled attribute
-     * <a class="d-link" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled" target="_blank">
-     *  (Reference)
-     * </a>
-     * @values true, false
-     */
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * The direction the dropdown displays relative to the anchor.
-     * @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
-     */
-    dropdownPlacement: {
-      type: String,
-      default: "bottom-end"
-    },
-    /**
-     * The fill and outline of the button associated with its visual importance.
-     * @values clear, outlined, primary
-     */
-    importance: {
-      type: String,
-      default: "primary",
-      validator: (i) => Object.keys(lib_button.BUTTON_IMPORTANCE_MODIFIERS).includes(i)
-    },
-    /**
-     * The color of the button.
-     * @values default, muted, danger, inverted
-     */
-    kind: {
-      type: String,
-      default: "default",
-      validator: (k) => Object.keys(lib_button.BUTTON_KIND_MODIFIERS).includes(k)
-    },
-    /**
-     * Determines whether the omega button should have active styling
-     * @values true, false
-     */
-    omegaActive: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Descriptive label for the omega button
-     */
-    omegaAriaLabel: {
-      type: String,
-      default: null
-    },
-    /**
-     * Element ID, useful in case you need to reference the button
-     * as an external anchor for popover.
-     */
-    omegaId: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Text shown in tooltip when you hover the omega button,
-     * required as it is an icon only button
-     */
-    omegaTooltipText: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * The size of the button.
-     * @values xs, sm, md, lg, xl
-     */
-    size: {
-      type: String,
-      default: "md",
-      validator: (s) => Object.keys(lib_button.BUTTON_SIZE_MODIFIERS).includes(s)
-    },
-    /**
-     * Button width, accepts
-     * <a class="d-link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/width" target="_blank">
-     *   CSS width attribute
-     * </a>
-     * values
-     */
-    width: {
-      type: String,
-      default: null
-    }
-  },
-  emits: [
-    /**
-     * Native alpha button click event
-     *
-     * @event click
-     * @type {PointerEvent | KeyboardEvent}
-     */
-    "alpha-clicked",
-    /**
-     * Native omega button click event
-     *
-     * @event click
-     * @type {PointerEvent | KeyboardEvent}
-     */
-    "omega-clicked"
-  ],
-  data() {
-    return {
-      isDropdownOpen: false
-    };
-  },
-  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
-      };
-    },
-    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
-      };
-    }
-  },
-  created() {
-    this.validateProps();
-  },
-  updated() {
-    this.validateProps();
-  },
-  methods: {
-    validateProps() {
-      this.validateAlphaButtonProps();
-      this.validateOmegaButtonProps();
-    },
-    validateAlphaButtonProps() {
-      if (common_utils.hasSlotContent(this.$slots.default))
-        return;
-      if (common_utils.hasSlotContent(this.$slots.alphaIcon) && !this.alphaTooltipText) {
-        console.warn("alpha-tooltip-text prop must be set if alpha button has an icon only");
-      }
-    },
-    validateOmegaButtonProps() {
-      if (common_utils.hasSlotContent(this.$slots.omega))
-        return;
-      if (!this.omegaTooltipText) {
-        console.warn("omega-tooltip-text prop is required as it is an icon-only button");
-      }
-    }
-  }
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_split_button_alpha = vue.resolveComponent("split-button-alpha");
-  const _component_split_button_omega = vue.resolveComponent("split-button-omega");
-  const _component_dt_dropdown = vue.resolveComponent("dt-dropdown");
-  return vue.openBlock(), vue.createElementBlock("span", {
-    "data-qa": "dt-split-button",
-    class: "d-split-btn",
-    style: vue.normalizeStyle({ width: $props.width })
-  }, [
-    vue.createVNode(_component_split_button_alpha, vue.mergeProps($options.alphaButtonProps, {
-      ref: "alphaButton",
-      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("alpha-clicked"))
-    }), {
-      icon: vue.withCtx(({ size: iconSize }) => [
-        vue.renderSlot(_ctx.$slots, "alphaIcon", { size: iconSize })
-      ]),
-      default: vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "default")
-      ]),
-      _: 3
-    }, 16),
-    vue.renderSlot(_ctx.$slots, "omega", {}, () => [
-      _ctx.$slots.dropdownList ? (vue.openBlock(), vue.createBlock(_component_dt_dropdown, {
-        key: 0,
-        placement: $props.dropdownPlacement,
-        onClick: _cache[2] || (_cache[2] = ($event) => $data.isDropdownOpen = true),
-        onOpened: _cache[3] || (_cache[3] = (open) => $data.isDropdownOpen = open)
-      }, {
-        anchor: vue.withCtx((attrs) => [
-          vue.createVNode(_component_split_button_omega, vue.mergeProps({ ...attrs, ...$options.omegaButtonProps }, {
-            active: $data.isDropdownOpen,
-            onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("omega-clicked"))
-          }), {
-            icon: vue.withCtx(({ size: iconSize }) => [
-              vue.renderSlot(_ctx.$slots, "omegaIcon", { size: iconSize })
-            ]),
-            _: 2
-          }, 1040, ["active"])
-        ]),
-        list: vue.withCtx(({ close }) => [
-          vue.renderSlot(_ctx.$slots, "dropdownList", { close })
-        ]),
-        _: 3
-      }, 8, ["placement"])) : (vue.openBlock(), vue.createBlock(_component_split_button_omega, vue.mergeProps({ key: 1 }, $options.omegaButtonProps, {
-        onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("omega-clicked"))
-      }), {
-        icon: vue.withCtx(({ size: iconSize }) => [
-          vue.renderSlot(_ctx.$slots, "omegaIcon", { size: iconSize })
-        ]),
-        _: 3
-      }, 16))
-    ])
-  ], 4);
-}
-const split_button = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
+const split_button = require("../components/split_button/split_button.vue.cjs");
+const split_button_constants = require("../components/split_button/split_button_constants.cjs");
 exports.DtSplitButton = split_button;
-exports.SPLIT_BUTTON_ICON_SIZES = SPLIT_BUTTON_ICON_SIZES;
+exports.SPLIT_BUTTON_ICON_SIZES = split_button_constants.SPLIT_BUTTON_ICON_SIZES;
 //# sourceMappingURL=split-button.cjs.map

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

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