@dialpad/dialtone/dist/vue3/lib/contact-centers-row/contact-centers-row.cjs.map

Dialpad's Dialtone design system monorepo

{"version":3,"file":"contact-centers-row.cjs","sources":["../../../recipes/leftbar/contact_centers_row/contact_centers_row.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-recipe-leftbar-row__container',\n      { 'd-recipe-leftbar-row__container--off-duty': $slots.timer },\n    ]\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <div\n      :class=\"leftbarContactCentersRowClasses\"\n      data-qa=\"dt-recipe-contact-centers-row\"\n    >\n      <a\n        class=\"d-recipe-leftbar-row__primary\"\n        :data-qa=\"$attrs['data-qa'] ?? 'd-recipe-leftbar-row-link'\"\n        :aria-label=\"getAriaLabel\"\n        :title=\"description\"\n        :href=\"$attrs.href ?? 'javascript:void(0)'\"\n        v-bind=\"removeClassStyleAttrs($attrs)\"\n        v-on=\"contactRowListeners\"\n        @click=\"$emit('click', $event)\"\n      >\n        <div class=\"d-recipe-leftbar-row__alpha\">\n          <dt-icon-headphones\n            size=\"300\"\n            data-qa=\"dt-recipe-leftbar-row-icon\"\n          />\n        </div>\n        <div\n          class=\"d-recipe-leftbar-row__label\"\n          :style=\"`flex-basis: ${labelWidth}`\"\n        >\n          <dt-emoji-text-wrapper\n            class=\"d-recipe-leftbar-row__description\"\n            data-qa=\"dt-recipe-leftbar-row-description\"\n            size=\"200\"\n          >\n            {{ description }}\n          </dt-emoji-text-wrapper>\n        </div>\n      </a>\n      <div\n        v-if=\"!hideActions\"\n        class=\"d-recipe-leftbar-row__omega\"\n      >\n        <slot name=\"right\" />\n        <div class=\"d-recipe-leftbar-row__action-container\">\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            class=\"d-recipe-leftbar-row__unread-badge\"\n            data-qa=\"dt-recipe-leftbar-row-unread-badge\"\n            kind=\"count\"\n            type=\"bulletin\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-button\n            class=\"d-recipe-leftbar-row__action\"\n            data-qa=\"dt-recipe-leftbar-row-action-button\"\n            :aria-label=\"menuButtonAriaLabel\"\n            importance=\"clear\"\n            size=\"xs\"\n            circle\n            @click.stop=\"$emit('click-menu', $event)\"\n          >\n            <template #icon>\n              <dt-icon-chevron-down size=\"100\" />\n            </template>\n          </dt-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"d-recipe-leftbar-row__bottom\">\n      <slot name=\"timer\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { extractVueListeners, safeConcatStrings, removeClassStyleAttrs, returnFirstEl, addClassStyleAttrs } from '@/common/utils';\nimport { DtBadge } from '@/components/badge';\nimport { DtButton } from '@/components/button';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtIconChevronDown from '@dialpad/dialtone-icons/vue3/chevron-down';\nimport DtIconHeadphones from '@dialpad/dialtone-icons/vue3/headphones';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeContactCentersRow',\n\n  components: {\n    DtButton,\n    DtBadge,\n    DtEmojiTextWrapper,\n    DtIconHeadphones,\n    DtIconChevronDown,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text displayed next to the icon. Required.\n     */\n    description: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Making this true will hide the unread count badge, the chevron button, and the right slot\n     */\n    hideActions: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages, could be a string to support '99+'\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Aria label for the menu button.\n     */\n    menuButtonAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event on the row itself\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Menu button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click-menu',\n  ],\n\n  data () {\n    return {\n      labelWidth: 'auto',\n    };\n  },\n\n  computed: {\n    leftbarContactCentersRowClasses () {\n      return [\n        'd-recipe-leftbar-row',\n        'd-recipe-leftbar-row--contact-centers',\n        {\n          'd-recipe-leftbar-row__unread-count': this.showUnreadCount,\n          'd-recipe-leftbar-row--selected': this.selected,\n        },\n      ];\n    },\n\n    getAriaLabel () {\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([this.description, this.unreadCountTooltip]);\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    showUnreadCount () {\n      return !!this.unreadCount;\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      async handler () {\n        await this.$nextTick();\n        this.adjustLabelWidth();\n      },\n    },\n  },\n\n  mounted () {\n    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n    this.resizeObserver.observe(returnFirstEl(this.$el));\n    this.adjustLabelWidth();\n  },\n\n  beforeUnmount: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n\n    adjustLabelWidth () {\n      const labelWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 12;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtBadge","DtEmojiTextWrapper","DtIconHeadphones","DtIconChevronDown","safeConcatStrings","extractVueListeners","returnFirstEl","removeClassStyleAttrs","addClassStyleAttrs","labelWidth","omegaWidth","alphaWidth","paddings","_hoisted_1","_hoisted_2","_hoisted_4","_hoisted_5","_openBlock","_createElementBlock","_mergeProps","_ctx","$options","_createElementVNode","_normalizeClass","$props","_toHandlers","_cache","$event","_createVNode","_component_dt_icon_headphones","_normalizeStyle","$data","_component_dt_emoji_text_wrapper","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","_hoisted_3","_renderSlot","_createBlock","_component_dt_badge","_component_dt_button","_withModifiers","_component_dt_icon_chevron_down"],"mappings":"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"}