@dialpad/dialtone-vue/dist/lib/callbar-button/callbar-button.js

Vue component library for Dialpad's design system Dialtone

import { CALLBAR_BUTTON_VALID_WIDTH_SIZE as l } from "./callbar-button-constants.js";
import r from "../../common/utils/index.js";
import { n } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import o from "../tooltip/tooltip.js";
import i from "../button/button.js";
const s = {
  name: "DtRecipeCallbarButton",
  components: { DtButton: i, DtTooltip: o },
  inheritAttrs: !1,
  props: {
    /**
     * Id for the item.
     */
    id: {
      type: String,
      default() {
        return r.getUniqueString();
      }
    },
    /**
     * 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
    },
    /**
     * Determines whether the button should be disabled
     * default is false.
     * @values true, false
     */
    disabled: {
      type: Boolean,
      default: !1
    },
    /**
     * Whether the button is a circle or not.
     * @values true, false
     * @see https://dialtone.dialpad.com/components/button/
     */
    circle: {
      type: Boolean,
      default: !1
    },
    /**
     * Aria label for the button. If empty, it takes its value from the default slot.
     */
    ariaLabel: {
      type: String,
      default: null,
      validator: (e) => e || (void 0).$slots.default
    },
    /**
     * 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: (e) => l.includes(e)
    },
    /**
     * The fill and outline of the button associated with its visual importance.
     * @values clear, outlined, primary
     */
    importance: {
      type: String,
      default: ""
    },
    /**
     * 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: [
    /**
     * Native click event
     *
     * @event click
     * @type {PointerEvent | KeyboardEvent}
     */
    "click"
  ],
  computed: {
    callbarButtonClass() {
      return [
        this.buttonClass,
        "d-recipe-callbar-button",
        {
          "d-recipe-callbar-button--circle": this.circle,
          "d-recipe-callbar-button--active": this.active,
          "d-recipe-callbar-button--danger": this.danger,
          "d-btn--disabled": this.disabled
        }
      ];
    },
    callbarButtonTextClass() {
      return [
        "d-recipe-callbar-button__text",
        this.textClass
      ];
    },
    buttonWidth() {
      switch (this.buttonWidthSize) {
        case "sm":
          return "4.5rem";
        case "md":
          return "6rem";
        default:
          return "8.4rem";
      }
    },
    buttonImportance() {
      return this.importance ? this.importance : this.circle ? "outlined" : "clear";
    },
    callbarButtonListeners() {
      return {
        ...this.$listeners,
        click: (e) => this.$emit("click", e)
      };
    }
  }
};
var u = function() {
  var t = this, a = t._self._c;
  return a("dt-tooltip", { attrs: { id: t.id, inverted: t.invertedTooltip, delay: t.tooltipDelay, show: t.showTooltip, offset: [0, 24] }, scopedSlots: t._u([{ key: "anchor", fn: function() {
    return [a("span", { class: { "d-recipe-callbar-button--disabled": t.disabled } }, [a("dt-button", t._g(t._b({ class: t.callbarButtonClass, attrs: { importance: t.buttonImportance, kind: "muted", "icon-position": "top", "aria-disabled": t.disabled, "aria-label": t.ariaLabel, "label-class": t.callbarButtonTextClass, width: t.buttonWidth }, scopedSlots: t._u([{ key: "icon", fn: function() {
      return [t._t("icon")];
    }, proxy: !0 }], null, !0) }, "dt-button", t.$attrs, !1), t.callbarButtonListeners), [t._t("default")], 2)], 1)];
  }, proxy: !0 }], null, !0) }, [t._t("tooltip", function() {
    return [t._v(" " + t._s(t.tooltipText) + " ")];
  })], 2);
}, d = [], c = /* @__PURE__ */ n(
  s,
  u,
  d
);
const h = c.exports;
export {
  h as default
};
//# sourceMappingURL=callbar-button.js.map