@dialpad/dialtone-vue 3.146.0 → 3.147.0

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":["SKELETON_RIPPLE_DURATION","SKELETON_SHAPES","circle","square","SKELETON_TEXT_TYPES","SKELETON_SHAPE_SIZES","sm","md","lg","SKELETON_HEADING_HEIGHTS","computed","skeletonOffset","skeletonText","$refs","skeleton","offset","top","height","getBoundingClientRect","skeletonStyle","style","animate","animationDuration","animationDelay","_sfc_main","name","mixins","SkeletonAnimation","props","shape","type","String","default","validator","Object","keys","includes","size","Number","Boolean","contentClass","Array","data","shapeStyles","_createElementBlock","ref","class","_normalizeClass","$data","$props","$options","headingHeight","width","_normalizeStyle","_ctx","number","isNaN","components","DtSkeletonText","rows","minWidth","maxWidth","randomWidth","rowClass","integerRows","methods","randomWidthPercentage","min","Math","max","round","random","getSizeParagraphRow","row","paragraphWidth","isArrayWidth","isArray","currentWidth","isLastRow","_Fragment","_renderList","_createBlock","_component_dt_skeleton_text","key","DtSkeletonShape","DtSkeletonParagraph","shapeSize","paragraphs","shapeClass","_hoisted_1","_createVNode","_component_dt_skeleton_shape","_createElementVNode","_component_dt_skeleton_paragraph","_mergeProps","DtSkeletonListItem","paragraphOption","listItemOption","textOption","shapeOption","ariaLabel","validationOptions","watch","immediate","handler","filtered","entries","filter","_","option","length","errorMessage","map","join","console","error","role","_openBlock","_component_dt_skeleton_list_item"],"mappings":"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"}
+{"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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"}

package/dist/lib/split-button.cjs

@@ -5,19 +5,19 @@ const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhn
 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-QNvAb160.js");
+const dropdown = require("../chunks/dropdown-p-Azgwov.js");
 require("../chunks/link_constants-x8NwdqmA.js");
 require("../common/constants.cjs");
-require("../chunks/keyboard_list_navigation-x3D6RcC7.js");
+require("../chunks/keyboard_list_navigation-fJnl_Iox.js");
 require("../chunks/dropdown_constants-2pGCXy7m.js");
-require("../chunks/sr_only_close_button-gKr0Vlbz.js");
+require("../chunks/sr_only_close_button-xGrHFjwA.js");
 require("./icon.cjs");
-require("../chunks/icon_constants-bvhFNOPu.js");
+require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");
 require("./popover.cjs");
-require("../chunks/popover_constants-h9MD6WUt.js");
+require("../chunks/popover_constants-XnGWXaxX.js");
 require("tippy.js");
-require("../chunks/modal-OaWxzqNt.js");
+require("../chunks/modal-VgxXAQFP.js");
 require("./lazy-show.cjs");
 require("../chunks/list_item_constants-EiqkqZvP.js");
 const _sfc_main$2 = {
@@ -128,12 +128,18 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     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")]),
+    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]]);
+  }, 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 = {
@@ -229,13 +235,19 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     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"])])]),
+    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]]);
+  }, 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 = {
@@ -479,58 +491,52 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   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"))
+    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, "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);
+      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]]);
 exports.DtSplitButton = split_button;

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","name","components","DtButton","props","active","type","Boolean","default","ariaLabel","String","iconPosition","labelClass","Array","Object","loading","tooltipText","assertiveOnFocus","disabled","importance","kind","size","data","BUTTON_ICON_SIZES","_createBlock","_component_dt_button","$props","class","icon","_renderSlot","_ctx","$slots","$data","SPLIT_BUTTON_ICON_SIZES","xs","sm","md","lg","xl","DtIconChevronDown","id","getUniqueString","_createVNode","_component_dt_icon_chevron_down","SplitButtonOmega","DtDropdown","SplitButtonAlpha","inheritAttrs","alphaActive","alphaAriaLabel","alphaIconPosition","validator","position","keys","ICON_POSITION_MODIFIERS","includes","alphaLabelClass","alphaLoading","alphaTooltipText","undefined","dropdownPlacement","i","BUTTON_IMPORTANCE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","omegaActive","omegaAriaLabel","omegaId","omegaTooltipText","s","BUTTON_SIZE_MODIFIERS","width","emits","isDropdownOpen","computed","alphaButtonProps","$attrs","omegaButtonProps","created","validateProps","updated","methods","validateAlphaButtonProps","validateOmegaButtonProps","hasSlotContent","alphaIcon","console","warn","omega","_createElementBlock","style","_component_split_button_alpha","_mergeProps","$options","ref","onClick","$emit","_withCtx","iconSize","dropdownList","_component_dt_dropdown","placement","onOpened","_cache","open","anchor","attrs","_component_split_button_omega","list","close","key"],"mappings":"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"}
+{"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":";;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAKA,cAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,UAAAC,WAAQ;AAAA,EACT;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,mBAAAC,WAAiB;AAAA;EAEpB;AACH;;;;8CAnIEC,IAAAA,YAsBY,sBAAA;AAAA,IApBV,WAAQ;AAAA,IACP,QAAQ,OAAM;AAAA,IACd,cAAY,OAAS;AAAA,IACrB,sBAAoB,OAAgB;AAAA,IACpC,oEAAiD,OAAI,IAAA,EAAA;AAAA,IACrD,UAAU,OAAQ;AAAA,IAClB,iBAAe,OAAY;AAAA,IAC3B,YAAY,OAAU;AAAA,IACtB,MAAM,OAAI;AAAA,IACV,eAAa,OAAU;AAAA,IACvB,SAAS,OAAO;AAAA,IAChB,MAAM,OAAI;AAAA;IAEA,kBACT,MAGE;AAAA,MAHFC,eAGE,KAAA,QAAA,QAAA;AAAA,QADC,MAAM,MAAiB,kBAAC,OAAI,IAAA;AAAA;;yBAGjC,MAAuB;AAAA,MAAvBA,eAAuB,KAAA,QAAA,SAAA;AAAA;;;4BApBT,OAAW,WAAA;AAAA;;;ACFjB,MAAC,0BAA0B;AAAA,EACrC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;ACwBA,MAAKJ,cAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY;AAAA,IACV,UAAAC,WAAQ;AAAA,IACR,mBAAAI,KAAiB;AAAA,EAClB;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAASC,aAAAA,gBAAiB;AAAA,IAC3B;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AACH;;;;;8CA5GEH,IAAAA,YAoBY,sBAAA;AAAA,IAnBT,IAAI,OAAE;AAAA,IAEP,WAAQ;AAAA,IACP,QAAQ,OAAM;AAAA,IACd,cAAY,OAAS;AAAA,IACrB,oEAAiD,OAAI,IAAA,EAAA;AAAA,IACrD,UAAU,OAAQ;AAAA,IAClB,YAAY,OAAU;AAAA,IACtB,MAAM,OAAI;AAAA,IACV,MAAM,OAAI;AAAA;IAEA,kBACT,MAKO;AAAA,MALPC,eAKO,KAAA,QAAA,QAAA;AAAA,QAHJ,MAAM,MAAuB,wBAAC,OAAI,IAAA;AAAA,SAFrC,MAKO;AAAA,QADLG,IAAAA,YAA8D,iCAAA;AAAA,UAAvC,MAAM,MAAuB,wBAAC,OAAI,IAAA;AAAA;;;;;4BAf/C,OAAW,WAAA;AAAA;;;AC+E7B,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,gBACAC,SAAU;AAAA,IACV;AAAA,EACD;AAAA,EAED,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,aAAa,OAAO,KAAKC,kCAAuB,EAAE,SAAS,QAAQ;AAAA,IAChF;AAAA;AAAA;AAAA;AAAA,IAKD,iBAAiB;AAAA,MACf,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,MAAM,OAAO,KAAKC,sCAA2B,EAAE,SAAS,CAAC;AAAA,IACtE;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,MAAM,OAAO,KAAKC,gCAAqB,EAAE,SAAS,CAAC;AAAA,IAChE;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,MAAM,OAAO,KAAKC,gCAAqB,EAAE,SAAS,CAAC;AAAA,IAChE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,gBAAgB;AAAA;EAEnB;AAAA,EAED,UAAU;AAAA,IACR,mBAAoB;AAClB,aAAO;AAAA,QACL,QAAQ,KAAK;AAAA,QACb,WAAW,KAAK;AAAA,QAChB,kBAAkB,KAAK;AAAA,QACvB,UAAU,KAAK;AAAA,QACf,cAAc,KAAK;AAAA,QACnB,YAAY,KAAK;AAAA,QACjB,SAAS,KAAK;AAAA,QACd,YAAY,KAAK;AAAA,QACjB,MAAM,KAAK;AAAA,QACX,MAAM,KAAK;AAAA,QACX,aAAa,KAAK;AAAA,QAClB,OAAO,KAAK,OAAO;AAAA;IAEtB;AAAA,IAED,mBAAoB;AAClB,aAAO;AAAA,QACL,IAAI,KAAK;AAAA,QACT,QAAQ,KAAK;AAAA,QACb,WAAW,KAAK;AAAA,QAChB,UAAU,KAAK;AAAA,QACf,YAAY,KAAK;AAAA,QACjB,MAAM,KAAK;AAAA,QACX,MAAM,KAAK;AAAA,QACX,aAAa,KAAK;AAAA,QAClB,OAAO,KAAK,OAAO;AAAA;IAEtB;AAAA,EACF;AAAA,EAED,UAAW;AACT,SAAK,cAAa;AAAA,EACnB;AAAA,EAED,UAAW;AACT,SAAK,cAAa;AAAA,EACnB;AAAA,EAED,SAAS;AAAA,IACP,gBAAiB;AACf,WAAK,yBAAwB;AAC7B,WAAK,yBAAwB;AAAA,IAC9B;AAAA,IAED,2BAA4B;AAC1B,UAAIC,aAAc,eAAC,KAAK,OAAO,OAAO;AAAG;AAEzC,UAAIA,aAAAA,eAAe,KAAK,OAAO,SAAS,KAAK,CAAC,KAAK,kBAAkB;AACnE,gBAAQ,KAAK,sEAAsE;AAAA,MACrF;AAAA,IACD;AAAA,IAED,2BAA4B;AAC1B,UAAIA,aAAc,eAAC,KAAK,OAAO,KAAK;AAAG;AAEvC,UAAI,CAAC,KAAK,kBAAkB;AAC1B,gBAAQ,KAAK,kEAAkE;AAAA,MACjF;AAAA,IACD;AAAA,EACF;AACH;;;;;0BAvVEC,IAkEO,mBAAA,QAAA;AAAA,IAjEL,WAAQ;AAAA,IACR,OAAM;AAAA,IACL,mCAAS,OAAK,MAAA,CAAA;AAAA;IAEfP,IAAAA,YAcqB,+BAdrBQ,eAcqB,SAbK,kBAAA;AAAA,MACxB,KAAI;AAAA,MACH,+CAAO,KAAK,MAAA,eAAA;AAAA;MAEF,MAAIC,IAAAA,QAEb,CAGE,EAAA,MALqB,SAAQ,MAAA;AAAA,QAE/BZ,IAGE,WAAA,KAAA,QAAA,aAAA,EADC,MAAM,UAAQ;AAAA;2BAInB,MAAuB;AAAA,QAAvBA,eAAuB,KAAA,QAAA,SAAA;AAAA;;;IAGzBA,IAAAA,WA4CO,0BA5CP,MA4CO;AAAA,MA1CG,KAAA,OAAO,iCADfD,IA4Bc,YAAA,wBAAA;AAAA;QA1BX,WAAW,OAAiB;AAAA,QAC5B,+CAAO,MAAc,iBAAA;AAAA,QACrB,UAAQ,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,UAAQ,MAAA,iBAAiB;AAAA;QAEvB,QAAMa,IAAAA,QACf,CAYqB,UAbC;AAAA,UACtBT,IAAA,YAYqB,+BAZrBQ,eAYqB,EAXN,GAAA,UAAU,SAAgB,oBAAA;AAAA,YACtC,QAAQ,MAAc;AAAA,YACtB,+CAAO,KAAK,MAAA,eAAA;AAAA;YAEF,MAAIC,IAAAA,QAEb,CAGE,EAAA,MALqB,SAAQ,MAAA;AAAA,cAE/BZ,IAGE,WAAA,KAAA,QAAA,aAAA,EADC,MAAM,UAAQ;AAAA;;;;QAKZ,MAAIY,IAAA,QAEb,CAGE,EALe,YAAK;AAAA,UAEtBZ,IAGE,WAAA,KAAA,QAAA,gBAAA,EADC,OAAY;AAAA;;gDAKnBD,gBAYqB,+BAZrBY,IAYqB,WAAA,EAAA,KAAA,EAAA,GAVX,SAAgB,kBAAA;AAAA,QACvB,+CAAO,KAAK,MAAA,eAAA;AAAA;QAEF,MAAIC,IAAAA,QAEb,CAGE,EAAA,MALqB,SAAQ,MAAA;AAAA,UAE/BZ,IAGE,WAAA,KAAA,QAAA,aAAA,EADC,MAAM,UAAQ;AAAA;;;;;;;;;"}