@dialpad/dialtone 9.63.0 → 9.64.0

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

@@ -0,0 +1,544 @@
+import { resolveComponent, resolveDirective, withDirectives, openBlock, createBlock, normalizeClass, withCtx, renderSlot, createVNode, createElementBlock, normalizeStyle, mergeProps } from "vue";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
+import { DtButton, BUTTON_ICON_SIZES, ICON_POSITION_MODIFIERS, BUTTON_IMPORTANCE_MODIFIERS, BUTTON_KIND_MODIFIERS, BUTTON_SIZE_MODIFIERS } from "./button.js";
+import { DtIconChevronDown } from "@dialpad/dialtone-icons/vue3";
+import { getUniqueString, hasSlotContent } from "../common/utils.js";
+import { DtDropdown } from "../chunks/dropdown-oA-_Gotg.js";
+import "../chunks/link_constants-AfTWrr-n.js";
+import "../common/constants.js";
+import "../chunks/keyboard_list_navigation-ScXhrxya.js";
+import "../chunks/dropdown_constants-w1MXGC3Z.js";
+import "../chunks/sr_only_close_button-3EdsV-dH.js";
+import "./icon.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
+import "@dialpad/dialtone-icons/icons.json";
+import "./popover.js";
+import "../chunks/popover_constants-WsOUIY-m.js";
+import "tippy.js";
+import "../chunks/modal-XOr4kiNZ.js";
+import "./lazy-show.js";
+import "../chunks/list_item_constants-u1xcN9Dd.js";
+const _sfc_main$2 = {
+  name: "SplitButtonAlpha",
+  components: {
+    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
+    };
+  }
+};
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_button = resolveComponent("dt-button");
+  const _directive_dt_tooltip = resolveDirective("dt-tooltip");
+  return withDirectives((openBlock(), createBlock(_component_dt_button, {
+    "data-qa": "dt-split-button-alpha",
+    active: $props.active,
+    "aria-label": $props.ariaLabel,
+    "assertive-on-focus": $props.assertiveOnFocus,
+    class: 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: withCtx(() => [
+      renderSlot(_ctx.$slots, "icon", {
+        size: $data.BUTTON_ICON_SIZES[$props.size]
+      })
+    ]),
+    default: withCtx(() => [
+      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__ */ _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,
+    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: 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 = resolveComponent("dt-icon-chevron-down");
+  const _component_dt_button = resolveComponent("dt-button");
+  const _directive_dt_tooltip = resolveDirective("dt-tooltip");
+  return withDirectives((openBlock(), createBlock(_component_dt_button, {
+    id: $props.id,
+    "data-qa": "dt-split-button-omega",
+    active: $props.active,
+    "aria-label": $props.ariaLabel,
+    class: normalizeClass(`d-split-btn__omega d-split-btn__omega--${$props.size}`),
+    disabled: $props.disabled,
+    importance: $props.importance,
+    kind: $props.kind,
+    size: $props.size
+  }, {
+    icon: withCtx(() => [
+      renderSlot(_ctx.$slots, "icon", {
+        size: $data.SPLIT_BUTTON_ICON_SIZES[$props.size]
+      }, () => [
+        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__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const _sfc_main = {
+  name: "DtSplitButton",
+  components: {
+    SplitButtonOmega,
+    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(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(BUTTON_IMPORTANCE_MODIFIERS).includes(i)
+    },
+    /**
+     * The color of the button.
+     * @values default, muted, danger, inverted
+     */
+    kind: {
+      type: String,
+      default: "default",
+      validator: (k) => Object.keys(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(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 (hasSlotContent(this.$slots.default))
+        return;
+      if (hasSlotContent(this.$slots.alphaIcon) && !this.alphaTooltipText) {
+        console.warn("alpha-tooltip-text prop must be set if alpha button has an icon only");
+      }
+    },
+    validateOmegaButtonProps() {
+      if (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 = resolveComponent("split-button-alpha");
+  const _component_split_button_omega = resolveComponent("split-button-omega");
+  const _component_dt_dropdown = resolveComponent("dt-dropdown");
+  return openBlock(), createElementBlock("span", {
+    "data-qa": "dt-split-button",
+    class: "d-split-btn",
+    style: normalizeStyle({ width: $props.width })
+  }, [
+    createVNode(_component_split_button_alpha, mergeProps($options.alphaButtonProps, {
+      ref: "alphaButton",
+      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("alpha-clicked"))
+    }), {
+      icon: withCtx(({ size: iconSize }) => [
+        renderSlot(_ctx.$slots, "alphaIcon", { size: iconSize })
+      ]),
+      default: withCtx(() => [
+        renderSlot(_ctx.$slots, "default")
+      ]),
+      _: 3
+    }, 16),
+    renderSlot(_ctx.$slots, "omega", {}, () => [
+      _ctx.$slots.dropdownList ? (openBlock(), 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: withCtx((attrs) => [
+          createVNode(_component_split_button_omega, mergeProps({ ...attrs, ...$options.omegaButtonProps }, {
+            active: $data.isDropdownOpen,
+            onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("omega-clicked"))
+          }), {
+            icon: withCtx(({ size: iconSize }) => [
+              renderSlot(_ctx.$slots, "omegaIcon", { size: iconSize })
+            ]),
+            _: 2
+          }, 1040, ["active"])
+        ]),
+        list: withCtx(({ close }) => [
+          renderSlot(_ctx.$slots, "dropdownList", { close })
+        ]),
+        _: 3
+      }, 8, ["placement"])) : (openBlock(), createBlock(_component_split_button_omega, mergeProps({ key: 1 }, $options.omegaButtonProps, {
+        onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("omega-clicked"))
+      }), {
+        icon: withCtx(({ size: iconSize }) => [
+          renderSlot(_ctx.$slots, "omegaIcon", { size: iconSize })
+        ]),
+        _: 3
+      }, 16))
+    ])
+  ], 4);
+}
+const split_button = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  split_button as DtSplitButton,
+  SPLIT_BUTTON_ICON_SIZES
+};
+//# sourceMappingURL=split-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"split-button.js","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","_createBlock","_renderSlot","_createVNode","_createElementBlock","_mergeProps","_withCtx"],"mappings":"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"}