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

Vue component library for Dialpad's design system Dialtone

{"version":3,"file":"contact-centers-row.cjs","names":[],"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=\"menuButtonLabel\"\n            :title=\"menuButtonLabel\"\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';\nimport { DtIconChevronDown, DtIconHeadphones } from '@dialpad/dialtone-icons/vue3';\nimport { DialtoneLocalization } from '@/localization';\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      validator (value) {\n        if (!value) return true;\n        return /^\\d+\\+?$/.test(value);\n      },\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      i18n: new DialtoneLocalization(),\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      const count = isNaN(this.unreadCount) ? this.unreadCount : Number(this.unreadCount);\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([\n          this.description,\n          this.i18n.$t('DIALTONE_UNREAD_MESSAGE_COUNT_TEXT', { unreadCount: count }),\n        ]);\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    showUnreadCount () {\n      return !!this.unreadCount;\n    },\n\n    menuButtonLabel () {\n      return this.i18n.$t('DIALTONE_CONTACT_CENTERS_ROW_MENU_BUTTON_LABEL');\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"],"mappings":"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"}