@dialpad/dialtone-vue 3.218.2 → 3.218.4

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

@@ -1,347 +1,260 @@
-import { DtIconChevronUp as h } from "@dialpad/dialtone-icons/vue3";
-import m, { addClassStyleAttrs as b, removeClassStyleAttrs as _, warnIfUnmounted as w, returnFirstEl as v } from "../../common/utils/index.js";
-import { DialtoneLocalization as C } from "../../localization/index.js";
-import { resolveComponent as a, openBlock as s, createElementBlock as y, mergeProps as c, createVNode as i, withCtx as l, renderSlot as n, createBlock as g, normalizeClass as B, createCommentVNode as S } from "vue";
-import { _ as A } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import k from "../button/button.js";
-import O from "../popover/popover.js";
-import T from "../callbar-button/callbar-button.js";
-import { CALLBAR_BUTTON_VALID_WIDTH_SIZE as L } from "../callbar-button/callbar-button-constants.js";
-const D = {
-  compatConfig: { MODE: 3 },
-  name: "DtRecipeCallbarButtonWithPopover",
-  components: { DtRecipeCallbarButton: T, DtPopover: O, DtButton: k, DtIconChevronUp: h },
-  /* 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: !1,
-  props: {
-    /**
-     * Id for the item.
-     */
-    id: {
-      type: String,
-      default() {
-        return m.getUniqueString();
-      }
-    },
-    /**
-     * Aria label for the button. If empty, it takes its value from the default slot.
-     */
-    ariaLabel: {
-      type: String,
-      default: null,
-      validator: (t) => t || (void 0).$slots.default
-    },
-    /**
-     * 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"
-    },
-    /**
-     *  Displaces the content box from its anchor element
-     *  by the specified number of pixels.
-     *  <a
-     *    class="d-link"
-     *    href="https://atomiks.github.io/tippyjs/v6/all-props/#offset"
-     *    target="_blank"
-     *  >
-     *    Tippy.js docs
-     *  </a>
-     */
-    offset: {
-      type: Array,
-      default: () => [0, 16]
-    },
-    /**
-     * 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: !0
-    },
-    /**
-     * Determines whether the button should be disabled
-     * default is false.
-     * @values true, false
-     */
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Forces showing the arrow, even if the button is disabled.
-     * default is false
-     * @values true, false
-     */
-    forceShowArrow: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * 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: !1
-    },
-    /**
-     * 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: !1
-    },
-    /**
-     * We need this declaration because of how Vue3 informs the component about a listener.
-     * Spoiler alert: it doesn't.
-     * Vue3 intends to work as a real pub-sub, meaning the publisher has not a clue of who the subscribers are.
-     * This makes it impossible from the regular declaration (emits: ['click']) to check whether
-     * we actually have a click handler or not.
-     * We're hacking it by adding an onClick prop: https://github.com/vuejs/core/issues/5220
-    */
-    onClick: {
-      type: Function,
-      default: null
-    },
-    /**
-     * 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: (t) => L.includes(t)
-    },
-    /**
-     * 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: !1
-    },
-    /**
-     * Whether the tooltip has an inverted background color.
-     * @values true, false
-     */
-    invertedTooltip: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Use this if you would like to manually override the logic for when the tooltip shows.
-     * Otherwise it will just show on hover/focus.
-     * @values null, true, false
-     */
-    showTooltip: {
-      type: Boolean,
-      default: null
-    },
-    /**
-     * The message that displays in the tooltip. This will be overridden by the tooltip slot.
-     */
-    tooltipText: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Whether there is a delay before the tooltip shows on hover/focus.
-     * @values true, false
-     */
-    tooltipDelay: {
-      type: Boolean,
-      default: void 0
-    }
-  },
-  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: !1,
-      i18n: new C()
-    };
-  },
-  computed: {
-    showArrowButton() {
-      return this.forceShowArrow || !this.disabled;
-    },
-    isCompactMode() {
-      return this.buttonWidthSize === "sm" || this.buttonWidthSize === "md";
-    },
-    showPopover() {
-      return !this.openPopover || this.open ? (this.syncOpenState(), !1) : this.toggleOpen();
-    },
-    arrowButtonLabel() {
-      return this.i18n.$t("DIALTONE_CALLBAR_BUTTON_WITH_POPOVER_ARROW_BUTTON_ARIA_LABEL");
-    }
-  },
-  mounted() {
-    w(v(this.$el), this.$options.name);
-  },
-  methods: {
-    removeClassStyleAttrs: _,
-    addClassStyleAttrs: b,
-    arrowClick(t) {
-      return this.$emit("arrow-click", t), this.toggleOpen();
-    },
-    toggleOpen() {
-      return this.open = !this.open;
-    },
-    syncOpenState() {
-      this.open = this.openPopover;
-    },
-    buttonClick(t) {
-      this.$props.onClick ? this.$emit("click", t) : this.arrowClick(t);
-    },
-    onModalIsOpened(t) {
-      this.open = t, this.$emit("opened", t);
-    }
-  }
+import e, { addClassStyleAttrs as t, removeClassStyleAttrs as n, returnFirstEl as r, warnIfUnmounted as i } from "../../common/utils/index.js";
+import { t as a } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import { DialtoneLocalization as o } from "../../localization/index.js";
+import s from "../button/button.js";
+import c from "../popover/popover.js";
+import { CALLBAR_BUTTON_VALID_WIDTH_SIZE as l } from "../callbar-button/callbar-button-constants.js";
+import u from "../callbar-button/callbar-button.js";
+import { createBlock as d, createCommentVNode as f, createElementBlock as p, createVNode as m, mergeProps as h, normalizeClass as g, openBlock as _, renderSlot as v, resolveComponent as y, withCtx as b } from "vue";
+import { DtIconChevronUp as x } from "@dialpad/dialtone-icons/vue3";
+//#region recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue
+var S = {
+	compatConfig: { MODE: 3 },
+	name: "DtRecipeCallbarButtonWithPopover",
+	components: {
+		DtRecipeCallbarButton: u,
+		DtPopover: c,
+		DtButton: s,
+		DtIconChevronUp: x
+	},
+	inheritAttrs: !1,
+	props: {
+		id: {
+			type: String,
+			default() {
+				return e.getUniqueString();
+			}
+		},
+		ariaLabel: {
+			type: String,
+			default: null,
+			validator: (e) => e || (void 0).$slots.default
+		},
+		placement: {
+			type: String,
+			default: "top"
+		},
+		offset: {
+			type: Array,
+			default: () => [0, 16]
+		},
+		initialFocusElement: {
+			type: String,
+			default: "first"
+		},
+		showCloseButton: {
+			type: Boolean,
+			default: !0
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		forceShowArrow: {
+			type: Boolean,
+			default: !1
+		},
+		active: {
+			type: Boolean,
+			default: !1
+		},
+		danger: {
+			type: Boolean,
+			default: !1
+		},
+		onClick: {
+			type: Function,
+			default: null
+		},
+		buttonClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: ""
+		},
+		textClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: ""
+		},
+		buttonWidthSize: {
+			type: String,
+			default: "xl",
+			validator: (e) => l.includes(e)
+		},
+		contentClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: ""
+		},
+		openPopover: {
+			type: Boolean,
+			default: !1
+		},
+		invertedTooltip: {
+			type: Boolean,
+			default: !1
+		},
+		showTooltip: {
+			type: Boolean,
+			default: null
+		},
+		tooltipText: {
+			type: String,
+			default: void 0
+		},
+		tooltipDelay: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	emits: [
+		"arrow-click",
+		"click",
+		"opened"
+	],
+	data() {
+		return {
+			open: !1,
+			i18n: new o()
+		};
+	},
+	computed: {
+		showArrowButton() {
+			return this.forceShowArrow || !this.disabled;
+		},
+		isCompactMode() {
+			return this.buttonWidthSize === "sm" || this.buttonWidthSize === "md";
+		},
+		showPopover() {
+			return !this.openPopover || this.open ? (this.syncOpenState(), !1) : this.toggleOpen();
+		},
+		arrowButtonLabel() {
+			return this.i18n.$t("DIALTONE_CALLBAR_BUTTON_WITH_POPOVER_ARROW_BUTTON_ARIA_LABEL");
+		}
+	},
+	mounted() {
+		i(r(this.$el), this.$options.name);
+	},
+	methods: {
+		removeClassStyleAttrs: n,
+		addClassStyleAttrs: t,
+		arrowClick(e) {
+			return this.$emit("arrow-click", e), this.toggleOpen();
+		},
+		toggleOpen() {
+			return this.open = !this.open;
+		},
+		syncOpenState() {
+			this.open = this.openPopover;
+		},
+		buttonClick(e) {
+			this.$props.onClick ? this.$emit("click", e) : this.arrowClick(e);
+		},
+		onModalIsOpened(e) {
+			this.open = e, this.$emit("opened", e);
+		}
+	}
 };
-function z(t, I, e, P, r, o) {
-  const d = a("dt-recipe-callbar-button"), p = a("dt-icon-chevron-up"), u = a("dt-button"), f = a("dt-popover");
-  return s(), y("div", c({ class: "d-recipe-callbar-button-with-popover" }, o.addClassStyleAttrs(t.$attrs)), [
-    i(d, {
-      "aria-label": e.ariaLabel,
-      disabled: e.disabled,
-      active: e.active,
-      danger: e.danger,
-      "button-class": e.buttonClass,
-      "button-width-size": e.buttonWidthSize,
-      "text-class": e.textClass,
-      "inverted-tooltip": e.invertedTooltip,
-      "show-tooltip": e.showTooltip,
-      "tooltip-text": e.tooltipText,
-      "tooltip-delay": e.tooltipDelay,
-      class: "d-recipe-callbar-button-with-popover--main-button",
-      onClick: o.buttonClick
-    }, {
-      icon: l(() => [
-        n(t.$slots, "icon")
-      ]),
-      tooltip: l(() => [
-        n(t.$slots, "tooltip")
-      ]),
-      default: l(() => [
-        n(t.$slots, "default")
-      ]),
-      _: 3
-    }, 8, ["aria-label", "disabled", "active", "danger", "button-class", "button-width-size", "text-class", "inverted-tooltip", "show-tooltip", "tooltip-text", "tooltip-delay", "onClick"]),
-    o.showArrowButton ? (s(), g(f, c({
-      key: 0,
-      id: e.id,
-      modal: !1,
-      open: r.open,
-      placement: e.placement,
-      "initial-focus-element": e.initialFocusElement,
-      "show-close-button": e.showCloseButton,
-      offset: e.offset,
-      padding: "none",
-      class: "d-recipe-callbar-button-with-popover__popover-wrapper",
-      "dialog-class": ["d-recipe-callbar-button-with-popover__popover", e.contentClass]
-    }, o.removeClassStyleAttrs(t.$attrs), {
-      "open-popover": o.showPopover,
-      onOpened: o.onModalIsOpened
-    }), {
-      anchor: l(() => [
-        i(u, {
-          active: r.open,
-          class: B([
-            "d-recipe-callbar-button-with-popover__arrow",
-            { "d-recipe-callbar-button-with-popover__arrow--large": !o.isCompactMode }
-          ]),
-          circle: !0,
-          importance: "clear",
-          size: "lg",
-          "aria-label": o.arrowButtonLabel,
-          title: o.arrowButtonLabel,
-          width: "2rem",
-          onClick: o.arrowClick
-        }, {
-          icon: l(() => [
-            i(p, {
-              class: "d-recipe-callbar-button-with-popover__arrow-icon",
-              size: "200"
-            })
-          ]),
-          _: 1
-        }, 8, ["active", "class", "aria-label", "title", "onClick"])
-      ]),
-      content: l(() => [
-        n(t.$slots, "content")
-      ]),
-      headerContent: l(() => [
-        n(t.$slots, "headerContent")
-      ]),
-      footerContent: l(() => [
-        n(t.$slots, "footerContent")
-      ]),
-      _: 3
-    }, 16, ["id", "open", "placement", "initial-focus-element", "show-close-button", "offset", "dialog-class", "open-popover", "onOpened"])) : S("", !0)
-  ], 16);
+function C(e, t, n, r, i, a) {
+	let o = y("dt-recipe-callbar-button"), s = y("dt-icon-chevron-up"), c = y("dt-button"), l = y("dt-popover");
+	return _(), p("div", h({ class: "d-recipe-callbar-button-with-popover" }, a.addClassStyleAttrs(e.$attrs)), [m(o, {
+		"aria-label": n.ariaLabel,
+		disabled: n.disabled,
+		active: n.active,
+		danger: n.danger,
+		"button-class": n.buttonClass,
+		"button-width-size": n.buttonWidthSize,
+		"text-class": n.textClass,
+		"inverted-tooltip": n.invertedTooltip,
+		"show-tooltip": n.showTooltip,
+		"tooltip-text": n.tooltipText,
+		"tooltip-delay": n.tooltipDelay,
+		class: "d-recipe-callbar-button-with-popover--main-button",
+		onClick: a.buttonClick
+	}, {
+		icon: b(() => [v(e.$slots, "icon")]),
+		tooltip: b(() => [v(e.$slots, "tooltip")]),
+		default: b(() => [v(e.$slots, "default")]),
+		_: 3
+	}, 8, [
+		"aria-label",
+		"disabled",
+		"active",
+		"danger",
+		"button-class",
+		"button-width-size",
+		"text-class",
+		"inverted-tooltip",
+		"show-tooltip",
+		"tooltip-text",
+		"tooltip-delay",
+		"onClick"
+	]), a.showArrowButton ? (_(), d(l, h({
+		key: 0,
+		id: n.id,
+		modal: !1,
+		open: i.open,
+		placement: n.placement,
+		"initial-focus-element": n.initialFocusElement,
+		"show-close-button": n.showCloseButton,
+		offset: n.offset,
+		padding: "none",
+		class: "d-recipe-callbar-button-with-popover__popover-wrapper",
+		"dialog-class": ["d-recipe-callbar-button-with-popover__popover", n.contentClass]
+	}, a.removeClassStyleAttrs(e.$attrs), {
+		"open-popover": a.showPopover,
+		onOpened: a.onModalIsOpened
+	}), {
+		anchor: b(() => [m(c, {
+			active: i.open,
+			class: g(["d-recipe-callbar-button-with-popover__arrow", { "d-recipe-callbar-button-with-popover__arrow--large": !a.isCompactMode }]),
+			circle: !0,
+			importance: "clear",
+			size: "lg",
+			"aria-label": a.arrowButtonLabel,
+			title: a.arrowButtonLabel,
+			width: "2rem",
+			onClick: a.arrowClick
+		}, {
+			icon: b(() => [m(s, {
+				class: "d-recipe-callbar-button-with-popover__arrow-icon",
+				size: "200"
+			})]),
+			_: 1
+		}, 8, [
+			"active",
+			"class",
+			"aria-label",
+			"title",
+			"onClick"
+		])]),
+		content: b(() => [v(e.$slots, "content")]),
+		headerContent: b(() => [v(e.$slots, "headerContent")]),
+		footerContent: b(() => [v(e.$slots, "footerContent")]),
+		_: 3
+	}, 16, [
+		"id",
+		"open",
+		"placement",
+		"initial-focus-element",
+		"show-close-button",
+		"offset",
+		"dialog-class",
+		"open-popover",
+		"onOpened"
+	])) : f("", !0)], 16);
 }
-const j = /* @__PURE__ */ A(D, [["render", z]]);
-export {
-  j as default
-};
-//# sourceMappingURL=callbar-button-with-popover.js.map
+var w = /* @__PURE__ */ a(S, [["render", C]]);
+//#endregion
+export { w as default };
+
+//# sourceMappingURL=callbar-button-with-popover.js.map