@dialpad/dialtone-vue/dist/lib/callbar-button/callbar-button.cjs.map

Vue component library for Dialpad's design system Dialtone

{"version":3,"file":"callbar-button.cjs","sources":["../../../recipes/buttons/callbar_button/callbar_button.vue"],"sourcesContent":["<template>\n  <dt-tooltip\n    :id=\"id\"\n    :inverted=\"invertedTooltip\"\n    :delay=\"tooltipDelay\"\n    :show=\"showTooltip\"\n    :offset=\"[0, 24]\"\n  >\n    <template #anchor>\n      <span\n        :class=\"{ 'd-recipe-callbar-button--disabled': disabled }\"\n      >\n        <dt-button\n          :importance=\"buttonImportance\"\n          kind=\"muted\"\n          icon-position=\"top\"\n          :aria-disabled=\"disabled\"\n          :aria-label=\"ariaLabel\"\n          :label-class=\"callbarButtonTextClass\"\n          :width=\"buttonWidth\"\n          :class=\"callbarButtonClass\"\n          v-bind=\"$attrs\"\n          v-on=\"callbarButtonListeners\"\n        >\n          <slot />\n          <template #icon>\n            <slot name=\"icon\" />\n          </template>\n        </dt-button>\n      </span>\n    </template>\n    <slot name=\"tooltip\">\n      {{ tooltipText }}\n    </slot>\n  </dt-tooltip>\n</template>\n\n<script>\nimport { CALLBAR_BUTTON_VALID_WIDTH_SIZE } from './callbar_button_constants';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport utils from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeCallbarButton',\n\n  components: { DtButton, DtTooltip },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () {\n        return utils.getUniqueString();\n      },\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have danger styling\n     * default is false.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    danger: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should be disabled\n     * default is false.\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Aria label for the button. If empty, it takes its value from the default slot.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n      validator: (label) => {\n        return label || this.$slots.default;\n      },\n    },\n\n    /**\n     * Additional class name for the button wrapper element.\n     */\n    buttonClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the button text.\n     */\n    textClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /*\n     * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.\n     */\n    buttonWidthSize: {\n      type: String,\n      default: 'xl',\n      validator: size => CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(size),\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: '',\n    },\n\n    /**\n     * Whether the tooltip has an inverted background color.\n     * @values true, false\n     */\n    invertedTooltip: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Use this if you would like to manually override the logic for when the tooltip shows.\n     * Otherwise it will just show on hover/focus.\n     * @values null, true, false\n     */\n    showTooltip: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * The message that displays in the tooltip. This will be overridden by the tooltip slot.\n     */\n    tooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Whether there is a delay before the tooltip shows on hover/focus.\n     * @values true, false\n     */\n    tooltipDelay: {\n      type: Boolean,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    callbarButtonClass () {\n      return [\n        this.buttonClass,\n        'd-recipe-callbar-button',\n        {\n          'd-recipe-callbar-button--circle': this.circle,\n          'd-recipe-callbar-button--active': this.active,\n          'd-recipe-callbar-button--danger': this.danger,\n          'd-btn--disabled': this.disabled,\n        }];\n    },\n\n    callbarButtonTextClass () {\n      return [\n        'd-recipe-callbar-button__text',\n        this.textClass,\n      ];\n    },\n\n    buttonWidth () {\n      switch (this.buttonWidthSize) {\n        case 'sm':\n          return '4.5rem';\n        case 'md':\n          return '6rem';\n        default:\n          return '8.4rem';\n      }\n    },\n\n    buttonImportance () {\n      if (this.importance) {\n        return this.importance;\n      }\n      return this.circle ? 'outlined' : 'clear';\n    },\n\n    callbarButtonListeners () {\n      return {\n        ...this.$listeners,\n        click: (event) => this.$emit('click', event),\n      };\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtTooltip","utils","label","this","size","CALLBAR_BUTTON_VALID_WIDTH_SIZE","event"],"mappings":"sUA2CAA,EAAA,CACA,KAAA,wBAEA,WAAA,CAAA,SAAAC,EAAAA,QAAA,UAAAC,SAAA,EAEA,aAAA,GAEA,MAAA,CAIA,GAAA,CACA,KAAA,OACA,SAAA,CACA,OAAAC,EAAAA,QAAA,gBAAA,CACA,CACA,EAQA,OAAA,CACA,KAAA,QACA,QAAA,EACA,EAQA,OAAA,CACA,KAAA,QACA,QAAA,EACA,EAOA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAOA,OAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,UAAA,CACA,KAAA,OACA,QAAA,KACA,UAAAC,GACAA,GAAAC,SAAA,OAAA,OAEA,EAKA,YAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,UAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,gBAAA,CACA,KAAA,OACA,QAAA,KACA,UAAAC,GAAAC,kCAAA,SAAAD,CAAA,CACA,EAMA,WAAA,CACA,KAAA,OACA,QAAA,EACA,EAMA,gBAAA,CACA,KAAA,QACA,QAAA,EACA,EAOA,YAAA,CACA,KAAA,QACA,QAAA,IACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,MACA,EAMA,aAAA,CACA,KAAA,QACA,QAAA,MACA,CACA,EAEA,MAAA,CAOA,OACA,EAEA,SAAA,CACA,oBAAA,CACA,MAAA,CACA,KAAA,YACA,0BACA,CACA,kCAAA,KAAA,OACA,kCAAA,KAAA,OACA,kCAAA,KAAA,OACA,kBAAA,KAAA,QACA,CAAA,CACA,EAEA,wBAAA,CACA,MAAA,CACA,gCACA,KAAA,SACA,CACA,EAEA,aAAA,CACA,OAAA,KAAA,gBAAA,CACA,IAAA,KACA,MAAA,SACA,IAAA,KACA,MAAA,OACA,QACA,MAAA,QACA,CACA,EAEA,kBAAA,CACA,OAAA,KAAA,WACA,KAAA,WAEA,KAAA,OAAA,WAAA,OACA,EAEA,wBAAA,CACA,MAAA,CACA,GAAA,KAAA,WACA,MAAAE,GAAA,KAAA,MAAA,QAAAA,CAAA,CACA,CACA,CACA,CACA"}