@dialpad/dialtone-vue 2.126.0 → 2.127.1

package/dist/lib/button.js

@@ -1,62 +1,68 @@
-import c from "vue";
-import { n as u } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
-import { a as o } from "../chunks/link_constants-vIUB92L4.js";
-const a = {
+import Vue from "vue";
+import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
+import { LINK_KIND_MODIFIERS } from "../chunks/link_constants-nWVlXQBs.js";
+const BUTTON_SIZE_MODIFIERS = {
   xs: "d-btn--xs",
   sm: "d-btn--sm",
   md: "",
   lg: "d-btn--lg",
   xl: "d-btn--xl"
-}, l = {
+};
+const BUTTON_KIND_MODIFIERS = {
   default: "",
   muted: "d-btn--muted",
   danger: "d-btn--danger",
   inverted: "d-btn--inverted"
-}, r = {
+};
+const BUTTON_IMPORTANCE_MODIFIERS = {
   clear: "",
   primary: "d-btn--primary",
   outlined: "d-btn--outlined"
-}, m = ["submit", "reset", "button"], d = {
+};
+const BUTTON_TYPES = ["submit", "reset", "button"];
+const ICON_POSITION_MODIFIERS = {
   left: "d-btn__icon--left",
   right: "d-btn__icon--right",
   top: "d-btn__icon--top",
   bottom: "d-btn__icon--bottom"
-}, b = [
+};
+const INVALID_COMBINATION = [
   {
-    circle: !0,
+    circle: true,
     kind: "default",
     importance: "primary",
-    message: s(!0, "default", "primary")
+    message: _invalidCombinationMessage(true, "default", "primary")
   },
   {
-    circle: !0,
+    circle: true,
     kind: "danger",
     importance: "outlined",
-    message: s(!0, "danger", "outlined")
+    message: _invalidCombinationMessage(true, "danger", "outlined")
   },
   {
-    circle: !0,
+    circle: true,
     kind: "muted",
     importance: "primary",
-    message: s(!0, "muted", "primary")
+    message: _invalidCombinationMessage(true, "muted", "primary")
   },
   {
-    circle: !1,
+    circle: false,
     kind: "muted",
     importance: "primary",
-    message: s(!1, "muted", "primary")
+    message: _invalidCombinationMessage(false, "muted", "primary")
   }
-], p = {
+];
+const BUTTON_ICON_SIZES = {
   xs: "200",
   sm: "200",
   md: "300",
   lg: "400",
   xl: "500"
 };
-function s(e, t, i) {
-  return `You cannot have a ${e ? "circle " : ""}button with kind: ${t} and importance: ${i} as it does not exist in our design system. See https://dialtone.dialpad.com/components/button.html for a list of available button styles`;
+function _invalidCombinationMessage(circle, kind, importance) {
+  return `You cannot have a ${circle ? "circle " : ""}button with kind: ${kind} and importance: ${importance} as it does not exist in our design system. See https://dialtone.dialpad.com/components/button.html for a list of available button styles`;
 }
-const f = {
+const _sfc_main = {
   name: "DtButton",
   props: {
     /**
@@ -65,7 +71,7 @@ const f = {
      */
     circle: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * The position of the icon slot within the button.
@@ -74,7 +80,7 @@ const f = {
     iconPosition: {
       type: String,
       default: "left",
-      validator: (e) => Object.keys(d).includes(e)
+      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position)
     },
     /**
      * The fill and outline of the button associated with its visual importance.
@@ -83,7 +89,7 @@ const f = {
     importance: {
       type: String,
       default: "primary",
-      validator: (e) => Object.keys(r).includes(e)
+      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i)
     },
     /**
      * Whether the button should be styled as a link or not.
@@ -92,7 +98,7 @@ const f = {
      */
     link: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * The color of the link and button if the button is styled as a link.
@@ -102,7 +108,7 @@ const f = {
     linkKind: {
       type: String,
       default: "default",
-      validator: (e) => Object.keys(o).includes(e)
+      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk)
     },
     /**
      * HTML button disabled attribute
@@ -117,7 +123,7 @@ const f = {
      */
     disabled: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * HTML button type attribute
@@ -133,7 +139,7 @@ const f = {
     type: {
       type: String,
       default: "button",
-      validator: (e) => m.includes(e)
+      validator: (t) => BUTTON_TYPES.includes(t)
     },
     /**
      * Button width, accepts
@@ -153,7 +159,7 @@ const f = {
     size: {
       type: String,
       default: "md",
-      validator: (e) => Object.keys(a).includes(e)
+      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s)
     },
     /**
      * Used to customize the label container
@@ -168,7 +174,7 @@ const f = {
      */
     loading: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * The color of the button.
@@ -177,7 +183,7 @@ const f = {
     kind: {
       type: String,
       default: "default",
-      validator: (e) => Object.keys(l).includes(e)
+      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k)
     },
     /**
      * Determines whether a screenreader reads live updates of
@@ -187,7 +193,7 @@ const f = {
      */
     assertiveOnFocus: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Determines whether the button should have active styling
@@ -196,7 +202,7 @@ const f = {
      */
     active: {
       type: Boolean,
-      default: !1
+      default: false
     }
   },
   emits: [
@@ -224,50 +230,61 @@ const f = {
   ],
   data() {
     return {
-      ICON_POSITION_MODIFIERS: d,
+      ICON_POSITION_MODIFIERS,
       // whether the button is currently in focus
-      isInFocus: !1
+      isInFocus: false
     };
   },
   computed: {
     buttonListeners() {
-      return this.assertiveOnFocus ? {
+      if (!this.assertiveOnFocus) {
+        return this.$listeners;
+      }
+      return {
         ...this.$listeners,
         focusin: (e) => {
-          this.isInFocus = !0;
+          this.isInFocus = true;
         },
         focusout: (e) => {
-          this.isInFocus = !1;
+          this.isInFocus = false;
         }
-      } : this.$listeners;
+      };
     },
     computedAriaLive() {
       return this.assertiveOnFocus && this.isInFocus ? "assertive" : this.$attrs.ariaLive;
     },
     iconSize() {
-      return p[this.size];
+      return BUTTON_ICON_SIZES[this.size];
     }
   },
   watch: {
     $props: {
-      deep: !0,
-      immediate: !0,
+      deep: true,
+      immediate: true,
       handler() {
-        process.env.NODE_ENV !== "production" && (this.circle && this.link && c.util.warn("You cannot enable circle and link at the same time", this), this.isInvalidPropCombination(this.circle, this.kind, this.importance));
+        if (process.env.NODE_ENV === "production")
+          return;
+        if (this.circle && this.link) {
+          Vue.util.warn("You cannot enable circle and link at the same time", this);
+        }
+        this.isInvalidPropCombination(this.circle, this.kind, this.importance);
       }
     }
   },
   methods: {
     buttonClasses() {
-      return this.link ? [
-        "d-link",
-        o[this.linkKind],
-        a[this.size]
-      ] : [
+      if (this.link) {
+        return [
+          "d-link",
+          LINK_KIND_MODIFIERS[this.linkKind],
+          BUTTON_SIZE_MODIFIERS[this.size]
+        ];
+      }
+      return [
         "d-btn",
-        r[this.importance],
-        l[this.kind],
-        a[this.size],
+        BUTTON_IMPORTANCE_MODIFIERS[this.importance],
+        BUTTON_KIND_MODIFIERS[this.kind],
+        BUTTON_SIZE_MODIFIERS[this.size],
         {
           "d-btn--circle": this.circle,
           "d-btn--loading": this.loading,
@@ -277,11 +294,14 @@ const f = {
         }
       ];
     },
-    isInvalidPropCombination(e, t, i) {
-      for (const n of b)
-        if (e === n.circle && t === n.kind && i === n.importance)
-          return console.warn(n.message), !1;
-      return !0;
+    isInvalidPropCombination(circle, kind, importance) {
+      for (const row of INVALID_COMBINATION) {
+        if (circle === row.circle && kind === row.kind && importance === row.importance) {
+          console.warn(row.message);
+          return false;
+        }
+      }
+      return true;
     },
     shouldRenderIcon() {
       return this.$scopedSlots.icon && !this.link;
@@ -294,35 +314,37 @@ const f = {
     }
   }
 };
-var _ = function() {
-  var t = this, i = t._self._c;
-  return i("button", t._g({ class: [
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("button", _vm._g({ class: [
     "base-button__button",
-    t.buttonClasses()
-  ], style: { width: t.width }, attrs: { "data-qa": "dt-button", type: t.type, disabled: t.disabled, "aria-live": t.computedAriaLive, "aria-label": t.loading ? "loading" : t.$attrs["aria-label"] } }, t.buttonListeners), [t.shouldRenderIcon() ? i("span", { class: [
+    _vm.buttonClasses()
+  ], style: { width: _vm.width }, attrs: { "data-qa": "dt-button", "type": _vm.type, "disabled": _vm.disabled, "aria-live": _vm.computedAriaLive, "aria-label": _vm.loading ? "loading" : _vm.$attrs["aria-label"] } }, _vm.buttonListeners), [_vm.shouldRenderIcon() ? _c("span", { class: [
     "base-button__icon",
     "d-btn__icon",
-    t.ICON_POSITION_MODIFIERS[t.iconPosition]
-  ], attrs: { "data-qa": "dt-button-icon" } }, [t._t("icon", null, { iconSize: t.iconSize })], 2) : t._e(), t.$slots.default ? i("span", { class: ["d-btn__label", "base-button__label", t.labelClass], attrs: { "data-qa": "dt-button-label" } }, [t._t("default")], 2) : t._e()]);
-}, h = [], I = /* @__PURE__ */ u(
-  f,
-  _,
-  h,
-  !1,
+    _vm.ICON_POSITION_MODIFIERS[_vm.iconPosition]
+  ], attrs: { "data-qa": "dt-button-icon" } }, [_vm._t("icon", null, { "iconSize": _vm.iconSize })], 2) : _vm._e(), _vm.$slots.default ? _c("span", { class: ["d-btn__label", "base-button__label", _vm.labelClass], attrs: { "data-qa": "dt-button-label" } }, [_vm._t("default")], 2) : _vm._e()]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
   null,
   null,
   null,
   null
 );
-const g = I.exports;
+const DtButton = __component__.exports;
 export {
-  p as BUTTON_ICON_SIZES,
-  r as BUTTON_IMPORTANCE_MODIFIERS,
-  l as BUTTON_KIND_MODIFIERS,
-  a as BUTTON_SIZE_MODIFIERS,
-  m as BUTTON_TYPES,
-  g as DtButton,
-  d as ICON_POSITION_MODIFIERS,
-  b as INVALID_COMBINATION
+  BUTTON_ICON_SIZES,
+  BUTTON_IMPORTANCE_MODIFIERS,
+  BUTTON_KIND_MODIFIERS,
+  BUTTON_SIZE_MODIFIERS,
+  BUTTON_TYPES,
+  DtButton,
+  ICON_POSITION_MODIFIERS,
+  INVALID_COMBINATION
 };
 //# sourceMappingURL=button.js.map

package/dist/lib/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../components/button/button_constants.js","../../components/button/button.vue"],"sourcesContent":["export const BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-btn--xs',\n  sm: 'd-btn--sm',\n  md: '',\n  lg: 'd-btn--lg',\n  xl: 'd-btn--xl',\n};\n\nexport const BUTTON_KIND_MODIFIERS = {\n  default: '',\n  muted: 'd-btn--muted',\n  danger: 'd-btn--danger',\n  inverted: 'd-btn--inverted',\n};\n\nexport const BUTTON_IMPORTANCE_MODIFIERS = {\n  clear: '',\n  primary: 'd-btn--primary',\n  outlined: 'd-btn--outlined',\n};\n\nexport const BUTTON_TYPES = ['submit', 'reset', 'button'];\n\nexport const ICON_POSITION_MODIFIERS = {\n  left: 'd-btn__icon--left',\n  right: 'd-btn__icon--right',\n  top: 'd-btn__icon--top',\n  bottom: 'd-btn__icon--bottom',\n};\n\nexport const INVALID_COMBINATION = [\n  {\n    circle: true,\n    kind: 'default',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'default', 'primary'),\n  },\n  {\n    circle: true,\n    kind: 'danger',\n    importance: 'outlined',\n    message: _invalidCombinationMessage(true, 'danger', 'outlined'),\n  },\n  {\n    circle: true,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'muted', 'primary'),\n  },\n  {\n    circle: false,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(false, 'muted', 'primary'),\n  },\n];\n\nexport const BUTTON_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '300',\n  lg: '400',\n  xl: '500',\n};\n\nfunction _invalidCombinationMessage (circle, kind, importance) {\n  return `You cannot have a ${circle ? 'circle ' : ''}button \\\nwith kind: ${kind} and importance: ${importance} as it \\\ndoes not exist in our design system. \\\nSee https://dialtone.dialpad.com/components/button.html for a \\\nlist of available button styles`;\n}\n\nexport default {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n  BUTTON_ICON_SIZES,\n};\n","<template>\n  <button\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n    v-on=\"buttonListeners\"\n  >\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        'd-btn__icon',\n        ICON_POSITION_MODIFIERS[iconPosition],\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"$slots.default\"\n      data-qa=\"dt-button-label\"\n      :class=\"['d-btn__label', 'base-button__label', labelClass]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport Vue from 'vue';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS } from '@/components/link';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  name: 'DtButton',\n\n  props: {\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @values left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\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     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, warning, danger, success, muted, inverted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\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     * 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     * 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     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\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 a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n    };\n  },\n\n  computed: {\n\n    buttonListeners () {\n      if (!this.assertiveOnFocus) {\n        return this.$listeners;\n      }\n      return {\n        ...this.$listeners,\n        focusin: (e) => {\n          this.isInFocus = true;\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n        },\n      };\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[this.size];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          Vue.util.warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          LINK_KIND_MODIFIERS[this.linkKind],\n          BUTTON_SIZE_MODIFIERS[this.size],\n        ];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[this.size],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          console.warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    shouldRenderIcon () {\n      return this.$scopedSlots.icon && !this.link;\n    },\n\n    isIconOnly () {\n      return this.shouldRenderIcon() && !this.$slots.default;\n    },\n\n    isVerticalIconLayout () {\n      return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"names":["BUTTON_SIZE_MODIFIERS","BUTTON_KIND_MODIFIERS","BUTTON_IMPORTANCE_MODIFIERS","BUTTON_TYPES","ICON_POSITION_MODIFIERS","INVALID_COMBINATION","_invalidCombinationMessage","BUTTON_ICON_SIZES","circle","kind","importance","_sfc_main","position","i","lk","LINK_KIND_MODIFIERS","t","s","k","Vue","row"],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../components/button/button_constants.js","../../components/button/button.vue"],"sourcesContent":["export const BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-btn--xs',\n  sm: 'd-btn--sm',\n  md: '',\n  lg: 'd-btn--lg',\n  xl: 'd-btn--xl',\n};\n\nexport const BUTTON_KIND_MODIFIERS = {\n  default: '',\n  muted: 'd-btn--muted',\n  danger: 'd-btn--danger',\n  inverted: 'd-btn--inverted',\n};\n\nexport const BUTTON_IMPORTANCE_MODIFIERS = {\n  clear: '',\n  primary: 'd-btn--primary',\n  outlined: 'd-btn--outlined',\n};\n\nexport const BUTTON_TYPES = ['submit', 'reset', 'button'];\n\nexport const ICON_POSITION_MODIFIERS = {\n  left: 'd-btn__icon--left',\n  right: 'd-btn__icon--right',\n  top: 'd-btn__icon--top',\n  bottom: 'd-btn__icon--bottom',\n};\n\nexport const INVALID_COMBINATION = [\n  {\n    circle: true,\n    kind: 'default',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'default', 'primary'),\n  },\n  {\n    circle: true,\n    kind: 'danger',\n    importance: 'outlined',\n    message: _invalidCombinationMessage(true, 'danger', 'outlined'),\n  },\n  {\n    circle: true,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'muted', 'primary'),\n  },\n  {\n    circle: false,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(false, 'muted', 'primary'),\n  },\n];\n\nexport const BUTTON_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '300',\n  lg: '400',\n  xl: '500',\n};\n\nfunction _invalidCombinationMessage (circle, kind, importance) {\n  return `You cannot have a ${circle ? 'circle ' : ''}button \\\nwith kind: ${kind} and importance: ${importance} as it \\\ndoes not exist in our design system. \\\nSee https://dialtone.dialpad.com/components/button.html for a \\\nlist of available button styles`;\n}\n\nexport default {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n  BUTTON_ICON_SIZES,\n};\n","<template>\n  <button\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n    v-on=\"buttonListeners\"\n  >\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        'd-btn__icon',\n        ICON_POSITION_MODIFIERS[iconPosition],\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"$slots.default\"\n      data-qa=\"dt-button-label\"\n      :class=\"['d-btn__label', 'base-button__label', labelClass]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport Vue from 'vue';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS } from '@/components/link';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  name: 'DtButton',\n\n  props: {\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @values left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\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     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, warning, danger, success, muted, inverted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\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     * 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     * 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     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\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 a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n    };\n  },\n\n  computed: {\n\n    buttonListeners () {\n      if (!this.assertiveOnFocus) {\n        return this.$listeners;\n      }\n      return {\n        ...this.$listeners,\n        focusin: (e) => {\n          this.isInFocus = true;\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n        },\n      };\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[this.size];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          Vue.util.warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          LINK_KIND_MODIFIERS[this.linkKind],\n          BUTTON_SIZE_MODIFIERS[this.size],\n        ];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[this.size],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          console.warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    shouldRenderIcon () {\n      return this.$scopedSlots.icon && !this.link;\n    },\n\n    isIconOnly () {\n      return this.shouldRenderIcon() && !this.$slots.default;\n    },\n\n    isVerticalIconLayout () {\n      return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;;AAAY,MAAC,wBAAwB;AAAA,EACnC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEY,MAAC,wBAAwB;AAAA,EACnC,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,UAAU;AACZ;AAEY,MAAC,8BAA8B;AAAA,EACzC,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU;AACZ;AAEY,MAAC,eAAe,CAAC,UAAU,SAAS,QAAQ;AAE5C,MAAC,0BAA0B;AAAA,EACrC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AACV;AAEY,MAAC,sBAAsB;AAAA,EACjC;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAAS,2BAA2B,MAAM,WAAW,SAAS;AAAA,EAC/D;AAAA,EACD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAAS,2BAA2B,MAAM,UAAU,UAAU;AAAA,EAC/D;AAAA,EACD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAAS,2BAA2B,MAAM,SAAS,SAAS;AAAA,EAC7D;AAAA,EACD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAAS,2BAA2B,OAAO,SAAS,SAAS;AAAA,EAC9D;AACH;AAEY,MAAC,oBAAoB;AAAA,EAC/B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAAS,2BAA4B,QAAQ,MAAM,YAAY;AAC7D,SAAO,qBAAqB,SAAS,YAAY,EAAE,qBACxC,IAAI,oBAAoB,UAAU;AAI/C;ACTA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,aAAA,OAAA,KAAA,uBAAA,EAAA,SAAA,QAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAA,2BAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,OAAA,OAAA,KAAA,mBAAA,EAAA,SAAA,EAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,aAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAA,qBAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAA,qBAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA;AAAA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IAEA,kBAAA;AACA,UAAA,CAAA,KAAA,kBAAA;AACA,eAAA,KAAA;AAAA,MACA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QACA,SAAA,CAAA,MAAA;AACA,eAAA,YAAA;AAAA,QACA;AAAA,QAEA,UAAA,CAAA,MAAA;AACA,eAAA,YAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAA,KAAA,oBAAA,KAAA,YAAA,cAAA,KAAA,OAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,aAAA,kBAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AACA,YAAA,QAAA,IAAA,aAAA;AAAA;AAEA,YAAA,KAAA,UAAA,KAAA,MAAA;AACA,cAAA,KAAA,KAAA,sDAAA,IAAA;AAAA,QACA;AAEA,aAAA,yBAAA,KAAA,QAAA,KAAA,MAAA,KAAA,UAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,gBAAA;AACA,UAAA,KAAA,MAAA;AACA,eAAA;AAAA,UACA;AAAA,UACA,oBAAA,KAAA,QAAA;AAAA,UACA,sBAAA,KAAA,IAAA;AAAA,QACA;AAAA,MACA;AACA,aAAA;AAAA,QACA;AAAA,QACA,4BAAA,KAAA,UAAA;AAAA,QACA,sBAAA,KAAA,IAAA;AAAA,QACA,sBAAA,KAAA,IAAA;AAAA,QACA;AAAA,UACA,iBAAA,KAAA;AAAA,UACA,kBAAA,KAAA;AAAA,UACA,oBAAA,KAAA,WAAA;AAAA,UACA,mBAAA,KAAA,qBAAA;AAAA,UACA,iBAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,yBAAA,QAAA,MAAA,YAAA;AACA,iBAAA,OAAA,qBAAA;AACA,YAAA,WAAA,IAAA,UAAA,SAAA,IAAA,QAAA,eAAA,IAAA,YAAA;AACA,kBAAA,KAAA,IAAA,OAAA;AACA,iBAAA;AAAA,QACA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAA,KAAA,aAAA,QAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,iBAAA,KAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,IAEA,uBAAA;AACA,aAAA,CAAA,KAAA,WAAA,KAAA,CAAA,OAAA,QAAA,EAAA,SAAA,KAAA,YAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/callbar-button-with-popover.cjs

@@ -0,0 +1,250 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const common_utils = require("../common/utils.cjs");
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
+const lib_callbarButton = require("./callbar-button.cjs");
+const lib_popover = require("./popover.cjs");
+const lib_button = require("./button.cjs");
+const lib_icon = require("./icon.cjs");
+require("../common/constants.cjs");
+require("vue");
+require("./tooltip.cjs");
+require("../chunks/popover_constants-JwBF9h1Z.js");
+require("tippy.js");
+require("./lazy-show.cjs");
+require("@linusborg/vue-simple-portal");
+require("../chunks/modal-VgxXAQFP.js");
+require("../chunks/sr_only_close_button-ZaGdAHz7.js");
+require("../chunks/link_constants-Huj7D_hm.js");
+require("@dialpad/dialtone-icons/vue2");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+const _sfc_main = {
+  name: "DtRecipeCallbarButtonWithPopover",
+  components: { DtRecipeCallbarButton: lib_callbarButton.DtRecipeCallbarButton, DtPopover: lib_popover.DtPopover, DtButton: lib_button.DtButton, DtIcon: lib_icon.DtIcon },
+  /* inheritAttrs: false is generally an option we want to set on library
+    components. This allows any attributes passed in that are not recognized
+    as props to be passed down to another element or component using v-bind:$attrs
+    more info: https://vuejs.org/v2/api/#inheritAttrs */
+  inheritAttrs: false,
+  props: {
+    /**
+     * Id for the item.
+     */
+    id: {
+      type: String,
+      default() {
+        return common_utils.default.getUniqueString();
+      }
+    },
+    /**
+     * Aria label for the button. If empty, it takes its value from the default slot.
+     */
+    ariaLabel: {
+      type: String,
+      default: null,
+      validator: (label) => {
+        return label || (void 0).$slots.default;
+      }
+    },
+    /**
+     * Aria label for the arrow. Cannot be empty.
+     */
+    arrowButtonLabel: {
+      type: String,
+      required: true,
+      validator: (label) => {
+        return !!label;
+      }
+    },
+    /**
+     * The direction the popover displays relative to the anchor.
+     * @values 'bottom', 'bottom-start', 'bottom-end',
+     *         'right', 'right-start', 'right-end',
+     *         'left', 'left-start', 'left-end',
+     *         'top', 'top-start', 'top-end'
+     * @default 'top'
+     */
+    placement: {
+      type: String,
+      default: "top"
+    },
+    /**
+     * The element that is focused when the popover is opened. This can be an
+     * HTMLElement within the popover, a string starting with '#' which will
+     * find the element by ID. 'first' which will automatically focus
+     * the first element, or 'dialog' which will focus the dialog window itself.
+     * If the dialog is modal this prop cannot be 'none'.
+     */
+    initialFocusElement: {
+      type: String,
+      default: "first"
+    },
+    /**
+     * Determines visibility for close button
+     */
+    showCloseButton: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Determines whether the button should be disabled
+     * default is false.
+     * @values true, false
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Forces showing the arrow, even if the button is disabled.
+     * default is false
+     * @values true, false
+     */
+    forceShowArrow: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Determines whether the button should have active styling
+     * default is false.
+     * @values true, false
+     * @see https://dialtone.dialpad.com/components/button/
+     */
+    active: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Determines whether the button should have danger styling
+     * default is false.
+     * @values true, false
+     * @see https://dialtone.dialpad.com/components/button/
+     */
+    danger: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Additional class name for the button wrapper element.
+     */
+    buttonClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Additional class name for the button text.
+     */
+    textClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /*
+     * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.
+     */
+    buttonWidthSize: {
+      type: String,
+      default: "xl",
+      validator: (size) => lib_callbarButton.CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(size)
+    },
+    /**
+     * Additional class name for the popover content wrapper element.
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * To auto open the modal popover.
+     */
+    openPopover: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: [
+    /**
+     * Emitted when the arrow is clicked
+     */
+    "arrow-click",
+    /**
+     * Native click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click",
+    /**
+     * Emitted when modal popover is opened or closed.
+     */
+    "opened"
+  ],
+  data() {
+    return {
+      open: false
+    };
+  },
+  computed: {
+    showArrowButton() {
+      return this.forceShowArrow || !this.disabled;
+    },
+    isCompactMode() {
+      return this.buttonWidthSize === "sm" || this.buttonWidthSize === "md";
+    },
+    showPopover() {
+      if (!this.openPopover || this.open) {
+        this.syncOpenState();
+        return false;
+      }
+      return this.toggleOpen();
+    }
+  },
+  methods: {
+    arrowClick(ev) {
+      this.$emit("arrow-click", ev);
+      return this.toggleOpen();
+    },
+    toggleOpen() {
+      return this.open = !this.open;
+    },
+    syncOpenState() {
+      this.open = this.openPopover;
+    },
+    buttonClick(ev) {
+      if (!this.$listeners.click) {
+        this.arrowClick(ev);
+      } else {
+        this.$emit("click", ev);
+      }
+    },
+    onModalIsOpened(isOpened) {
+      this.open = isOpened;
+      this.$emit("opened", isOpened);
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "dt-recipe--callbar-button-with-popover" }, [_c("dt-recipe-callbar-button", { staticClass: "dt-recipe--callbar-button-with-popover--main-button", attrs: { "aria-label": _vm.ariaLabel, "disabled": _vm.disabled, "active": _vm.active, "danger": _vm.danger, "button-class": _vm.buttonClass, "button-width-size": _vm.buttonWidthSize, "text-class": _vm.textClass }, on: { "click": _vm.buttonClick } }, [_vm._t("icon", null, { "slot": "icon" }), _vm._t("tooltip", null, { "slot": "tooltip" }), _vm._t("default")], 2), _vm.showArrowButton ? _c("dt-popover", _vm._b({ staticClass: "dt-recipe--callbar-button-with-popover--popover-wrapper", attrs: { "id": _vm.id, "modal": false, "open": _vm.open, "placement": _vm.placement, "initial-focus-element": _vm.initialFocusElement, "show-close-button": _vm.showCloseButton, "offset": [0, 16], "padding": "none", "dialog-class": ["dt-recipe--callbar-button-with-popover--popover", _vm.contentClass], "header-class": "d-d-flex d-ai-center d-fw-normal d-px12", "open-popover": _vm.showPopover }, on: { "opened": _vm.onModalIsOpened }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("dt-button", { class: [
+      "dt-recipe--callbar-button-with-popover--arrow",
+      { "dt-recipe--callbar-button-with-popover--arrow--large": !_vm.isCompactMode }
+    ], attrs: { "circle": "", "importance": "clear", "size": "lg", "width": "2rem", "aria-label": _vm.arrowButtonLabel, "active": _vm.open }, on: { "click": _vm.arrowClick }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+      return [_c("dt-icon", { staticClass: "dt-recipe--callbar-button-with-popover--arrow__icon", attrs: { "name": "chevron-up", "size": "200" } })];
+    }, proxy: true }], null, false, 982444464) })];
+  }, proxy: true }], null, false, 3818376870) }, "dt-popover", _vm.$attrs, false), [_vm._t("content", null, { "slot": "content" }), _vm._t("headerContent", null, { "slot": "headerContent" }), _vm._t("footerContent", null, { "slot": "footerContent" })], 2) : _vm._e()], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const callbar_button_with_popover = __component__.exports;
+exports.DtRecipeCallbarButtonWithPopover = callbar_button_with_popover;
+//# sourceMappingURL=callbar-button-with-popover.cjs.map