@dialpad/dialtone 9.133.0-next.2 → 9.134.0

package/dist/vue2/lib/combobox-with-popover/combobox-with-popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-with-popover.cjs","sources":["../../../recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue"],"sourcesContent":["<template>\n  <dt-combobox\n    ref=\"combobox\"\n    :loading=\"loading\"\n    :label=\"label\"\n    :label-visible=\"labelVisible\"\n    :size=\"size\"\n    :description=\"description\"\n    :empty-list=\"emptyList\"\n    :empty-state-message=\"emptyStateMessage\"\n    :show-list=\"isListShown\"\n    :on-beginning-of-list=\"onBeginningOfList\"\n    :on-end-of-list=\"onEndOfList\"\n    :list-rendered-outside=\"true\"\n    :list-id=\"listId\"\n    data-qa=\"dt-combobox\"\n    v-on=\"comboboxListeners\"\n  >\n    <template\n      #input=\"{ inputProps }\"\n    >\n      <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n      <div\n        :id=\"externalAnchor\"\n        ref=\"input\"\n        @focusin=\"onFocusIn\"\n        @keydown.up=\"openOnArrowKeyPress($event)\"\n        @keydown.down=\"openOnArrowKeyPress($event)\"\n      >\n        <slot\n          name=\"input\"\n          :input-props=\"inputProps\"\n          :on-input=\"handleDisplayList\"\n        />\n      </div>\n    </template>\n    <template #list=\"{ opened, listProps, clearHighlightIndex }\">\n      <dt-popover\n        ref=\"popover\"\n        :open.sync=\"isListShown\"\n        :hide-on-click=\"false\"\n        :max-height=\"maxHeight\"\n        :max-width=\"maxWidth\"\n        :offset=\"popoverOffset\"\n        :sticky=\"popoverSticky\"\n        placement=\"bottom-start\"\n        initial-focus-element=\"none\"\n        padding=\"none\"\n        role=\"listbox\"\n        :external-anchor=\"externalAnchor\"\n        :content-width=\"contentWidth\"\n        :content-appear=\"true\"\n        :content-tabindex=\"null\"\n        :modal=\"false\"\n        :auto-focus=\"false\"\n        :append-to=\"appendTo\"\n        :transition=\"transition\"\n        @opened=\"opened($event, arguments[1]);\"\n      >\n        <template\n          v-if=\"$slots.header\"\n          #headerContent\n        >\n          <div\n            ref=\"header\"\n          >\n            <slot name=\"header\" />\n          </div>\n        </template>\n\n        <template #content>\n          <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n          <div\n            ref=\"listWrapper\"\n            :class=\"[\n              'd-recipe-combobox-with-popover__list',\n              DROPDOWN_PADDING_CLASSES[padding],\n              listClass,\n            ]\"\n            @mouseleave=\"clearHighlightIndex\"\n            @focusout=\"clearHighlightIndex\"\n          >\n            <combobox-loading-list\n              v-if=\"loading\"\n              v-bind=\"listProps\"\n            />\n            <combobox-empty-list\n              v-else-if=\"emptyList && emptyStateMessage\"\n              v-bind=\"listProps\"\n              :message=\"emptyStateMessage\"\n            />\n            <slot\n              v-else\n              name=\"list\"\n              :list-props=\"listProps\"\n            />\n          </div>\n        </template>\n\n        <template\n          v-if=\"$slots.footer\"\n          #footerContent\n        >\n          <div\n            ref=\"footer\"\n          >\n            <slot name=\"footer\" />\n          </div>\n        </template>\n      </dt-popover>\n    </template>\n  </dt-combobox>\n</template>\n\n<script>\nimport ComboboxLoadingList from '@/components/combobox/combobox_loading-list.vue';\nimport ComboboxEmptyList from '@/components/combobox/combobox_empty-list.vue';\nimport { DtCombobox, COMBOBOX_LABEL_SIZES } from '@/components/combobox';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES, POPOVER_CONTENT_WIDTHS } from '@/components/popover';\nimport { getUniqueString } from '@/common/utils';\nimport { DROPDOWN_PADDING_CLASSES } from '@/components/dropdown';\n\nexport default {\n  name: 'DtRecipeComboboxWithPopover',\n\n  components: {\n    DtCombobox,\n    DtPopover,\n    ComboboxLoadingList,\n    ComboboxEmptyList,\n  },\n\n  props: {\n    /**\n     * String to use for the input label.\n     */\n    label: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n     * @values null, xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: null,\n      validator: (t) => Object.values(COMBOBOX_LABEL_SIZES).includes(t),\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * Leaving this null will have the combobox trigger on input focus by default.\n     * If you set this value, the default trigger behavior will be disabled and you can\n     * control it as you need.\n     */\n    showList: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Sets an ID on the list element of the component. Used by several aria attributes\n     * as well as when deriving the IDs for each item.\n     */\n    listId: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Additional class for the wrapper list element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A method that will be called when the selection goes past the beginning of the list.\n     */\n    onBeginningOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * A method that will be called when the selection goes past the end of the list.\n     */\n    onEndOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    maxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Vertical padding size around the list element.\n     */\n    padding: {\n      type: String,\n      default: 'small',\n      validator: (padding) => {\n        return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * Width configuration for the popover content. When its value is 'anchor',\n     * the popover content will have the same width as the anchor.\n     */\n    contentWidth: {\n      type: String,\n      default: null,\n      validator: contentWidth => POPOVER_CONTENT_WIDTHS.includes(contentWidth),\n    },\n\n    /**\n     * If the list should be shown by pressing up or down arrow key on the input element.\n     * This can be set when not passing showList prop.\n     */\n    openWithArrowKeys: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     *  Displaces the popover content box from its anchor element\n     *  by the specified number of pixels.\n     */\n    popoverOffset: {\n      type: Array,\n      default: () => [0, 4],\n    },\n\n    /**\n     * If the popover sticks to the input.\n     */\n    popoverSticky: {\n      type: [Boolean, String],\n      default: false,\n    },\n\n    /**\n     * Displays the list when the combobox is focused, before the user has typed anything.\n     * When this is enabled the list will not close after selection.\n     */\n    hasSuggestionList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Determines when to show the skeletons and also controls aria-busy attribute.\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.\n     */\n    emptyList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Message to show when the list is empty\n     */\n    emptyStateMessage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when 'escape' key is pressed\n     *\n     * @event escape\n     */\n    'escape',\n\n    /**\n     * Event fired when an item is highlighted\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Emitted when items are shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      DROPDOWN_PADDING_CLASSES,\n      isListShown: false,\n      isInputFocused: false,\n      isListFocused: false,\n      externalAnchor: getUniqueString(),\n    };\n  },\n\n  computed: {\n    comboboxListeners () {\n      return {\n        ...this.$listeners,\n\n        select: this.onSelect,\n\n        escape: this.onEscape,\n\n        highlight: this.onHighlight,\n      };\n    },\n  },\n\n  watch: {\n    showList: {\n      handler: function (show) {\n        if (show !== null) {\n          this.isListShown = show;\n        }\n      },\n\n      immediate: true,\n    },\n\n    isListShown (val) {\n      if (val) {\n        window.addEventListener('mousedown', this.onFocusOut);\n      } else {\n        window.removeEventListener('mousedown', this.onFocusOut);\n      }\n      this.onOpened(val);\n    },\n  },\n\n  methods: {\n    handleDisplayList (value) {\n      if (!this.hasSuggestionList && value) { this.showComboboxList(); }\n      if (!this.hasSuggestionList && !value) { this.closeComboboxList(); }\n    },\n\n    showComboboxList () {\n      if (this.showList != null) { return; }\n      this.isListShown = true;\n    },\n\n    closeComboboxList () {\n      if (this.showList != null) { return; }\n      this.isListShown = false;\n    },\n\n    onSelect (highlightIndex) {\n      if (this.loading) return;\n\n      this.$emit('select', highlightIndex);\n      if (!this.hasSuggestionList) {\n        // we don't display the list before the user has typed anything\n        this.closeComboboxList();\n      }\n    },\n\n    onEscape () {\n      this.$emit('escape');\n      this.closeComboboxList();\n    },\n\n    onHighlight (highlightIndex) {\n      if (this.loading) return;\n\n      this.$emit('highlight', highlightIndex);\n    },\n\n    onOpened (opened) {\n      this.$emit('opened', opened);\n    },\n\n    onFocusIn (e) {\n      if (this.hasSuggestionList && e && this.$refs.input?.querySelector('input') === e.target) {\n        // only trigger if we show suggestion list when focused, and\n        // it's the input specifically that was focused\n        this.showComboboxList();\n      }\n    },\n\n    onFocusOut (e) {\n      // Check if the focus change was to another target within the combobox component\n      const popoverEl = this.$refs.popover?.tip?.popper;\n      const comboboxEl = this.$refs.input;\n\n      if (e.composedPath()?.some(el => [popoverEl, comboboxEl].includes(el))) return;\n\n      // If outside the combobox then close\n      this.closeComboboxList();\n    },\n\n    openOnArrowKeyPress () {\n      if (this.showList !== null || this.isListShown || !this.openWithArrowKeys) { return; }\n\n      this.showComboboxList();\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtCombobox","DtPopover","ComboboxLoadingList","ComboboxEmptyList","t","COMBOBOX_LABEL_SIZES","getUniqueString","padding","DROPDOWN_PADDING_CLASSES","item","contentWidth","POPOVER_CONTENT_WIDTHS","appendTo","POPOVER_APPEND_TO_VALUES","show","val","value","highlightIndex","opened","_a","popoverEl","_b","comboboxEl","_c","el"],"mappings":"ghBA0HAA,EAAA,CACA,KAAA,8BAEA,WAAA,CACA,WAAAC,EAAA,QACA,UAAAC,EAAA,QACA,oBAAAC,EAAA,QACA,kBAAAC,EAAA,OACA,EAEA,MAAA,CAIA,MAAA,CACA,KAAA,OACA,SAAA,EACA,EAMA,aAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,KAAA,CACA,KAAA,OACA,QAAA,KACA,UAAAC,GAAA,OAAA,OAAAC,sBAAA,EAAA,SAAAD,CAAA,CACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,EACA,EAQA,SAAA,CACA,KAAA,QACA,QAAA,IACA,EAMA,OAAA,CACA,KAAA,OACA,SAAA,CAAA,OAAAE,EAAA,gBAAA,CAAA,CACA,EAKA,UAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,kBAAA,CACA,KAAA,SACA,QAAA,IACA,EAKA,YAAA,CACA,KAAA,SACA,QAAA,IACA,EAMA,UAAA,CACA,KAAA,OACA,QAAA,EACA,EAMA,SAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,QAAA,CACA,KAAA,OACA,QAAA,QACA,UAAAC,GACA,OAAA,KAAAC,0BAAA,EAAA,KAAAC,GAAAA,IAAAF,CAAA,CAEA,EAMA,aAAA,CACA,KAAA,OACA,QAAA,KACA,UAAAG,GAAAC,yBAAA,SAAAD,CAAA,CACA,EAMA,kBAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,cAAA,CACA,KAAA,MACA,QAAA,IAAA,CAAA,EAAA,CAAA,CACA,EAKA,cAAA,CACA,KAAA,CAAA,QAAA,MAAA,EACA,QAAA,EACA,EAMA,kBAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,QAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,UAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,kBAAA,CACA,KAAA,OACA,QAAA,EACA,EAOA,SAAA,CACA,KAAA,CAAA,YAAA,MAAA,EACA,QAAA,OACA,UAAAE,GACAC,EAAA,yBAAA,SAAAD,CAAA,GACAA,aAAA,WAEA,EAMA,WAAA,CACA,KAAA,OACA,QAAA,MACA,CACA,EAEA,MAAA,CAOA,SAOA,SAQA,YAQA,QACA,EAEA,MAAA,CACA,MAAA,CACA,yBAAAJ,EAAA,yBACA,YAAA,GACA,eAAA,GACA,cAAA,GACA,eAAAF,EAAAA,gBAAA,CACA,CACA,EAEA,SAAA,CACA,mBAAA,CACA,MAAA,CACA,GAAA,KAAA,WAEA,OAAA,KAAA,SAEA,OAAA,KAAA,SAEA,UAAA,KAAA,WACA,CACA,CACA,EAEA,MAAA,CACA,SAAA,CACA,QAAA,SAAAQ,EAAA,CACAA,IAAA,OACA,KAAA,YAAAA,EAEA,EAEA,UAAA,EACA,EAEA,YAAAC,EAAA,CACAA,EACA,OAAA,iBAAA,YAAA,KAAA,UAAA,EAEA,OAAA,oBAAA,YAAA,KAAA,UAAA,EAEA,KAAA,SAAAA,CAAA,CACA,CACA,EAEA,QAAA,CACA,kBAAAC,EAAA,CACA,CAAA,KAAA,mBAAAA,GAAA,KAAA,iBAAA,EACA,CAAA,KAAA,mBAAA,CAAAA,GAAA,KAAA,kBAAA,CACA,EAEA,kBAAA,CACA,KAAA,UAAA,OACA,KAAA,YAAA,GACA,EAEA,mBAAA,CACA,KAAA,UAAA,OACA,KAAA,YAAA,GACA,EAEA,SAAAC,EAAA,CACA,KAAA,UAEA,KAAA,MAAA,SAAAA,CAAA,EACA,KAAA,mBAEA,KAAA,kBAAA,EAEA,EAEA,UAAA,CACA,KAAA,MAAA,QAAA,EACA,KAAA,kBAAA,CACA,EAEA,YAAAA,EAAA,CACA,KAAA,SAEA,KAAA,MAAA,YAAAA,CAAA,CACA,EAEA,SAAAC,EAAA,CACA,KAAA,MAAA,SAAAA,CAAA,CACA,EAEA,UAAA,EAAA,OACA,KAAA,mBAAA,KAAAC,EAAA,KAAA,MAAA,QAAA,YAAAA,EAAA,cAAA,YAAA,EAAA,QAGA,KAAA,iBAAA,CAEA,EAEA,WAAA,EAAA,WAEA,MAAAC,GAAAC,GAAAF,EAAA,KAAA,MAAA,UAAA,YAAAA,EAAA,MAAA,YAAAE,EAAA,OACAC,EAAA,KAAA,MAAA,OAEAC,EAAA,EAAA,iBAAA,MAAAA,EAAA,KAAAC,GAAA,CAAAJ,EAAAE,CAAA,EAAA,SAAAE,CAAA,IAGA,KAAA,kBAAA,CACA,EAEA,qBAAA,CACA,KAAA,WAAA,MAAA,KAAA,aAAA,CAAA,KAAA,mBAEA,KAAA,iBAAA,CACA,CACA,CACA"}
+{"version":3,"file":"combobox-with-popover.cjs","sources":["../../../recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue"],"sourcesContent":["<template>\n  <dt-combobox\n    ref=\"combobox\"\n    :loading=\"loading\"\n    :label=\"label\"\n    :label-visible=\"labelVisible\"\n    :size=\"size\"\n    :description=\"description\"\n    :empty-list=\"emptyList\"\n    :empty-state-message=\"emptyStateMessage\"\n    :show-list=\"isListShown\"\n    :on-beginning-of-list=\"onBeginningOfList\"\n    :on-end-of-list=\"onEndOfList\"\n    :list-rendered-outside=\"true\"\n    :list-id=\"listId\"\n    data-qa=\"dt-combobox\"\n    v-on=\"comboboxListeners\"\n  >\n    <template\n      #input=\"{ inputProps }\"\n    >\n      <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n      <div\n        :id=\"externalAnchor\"\n        ref=\"input\"\n        @focusin=\"onFocusIn\"\n        @keydown.up=\"openOnArrowKeyPress($event)\"\n        @keydown.down=\"openOnArrowKeyPress($event)\"\n      >\n        <slot\n          name=\"input\"\n          :input-props=\"inputProps\"\n          :on-input=\"handleDisplayList\"\n        />\n      </div>\n    </template>\n    <template #list=\"{ opened, listProps, clearHighlightIndex }\">\n      <dt-popover\n        ref=\"popover\"\n        :open.sync=\"isListShown\"\n        :hide-on-click=\"false\"\n        :max-height=\"maxHeight\"\n        :max-width=\"maxWidth\"\n        :offset=\"popoverOffset\"\n        :sticky=\"popoverSticky\"\n        placement=\"bottom-start\"\n        initial-focus-element=\"none\"\n        padding=\"none\"\n        role=\"listbox\"\n        :external-anchor=\"externalAnchor\"\n        :content-width=\"contentWidth\"\n        :content-appear=\"true\"\n        :content-tabindex=\"null\"\n        :modal=\"false\"\n        :auto-focus=\"false\"\n        :append-to=\"appendTo\"\n        :transition=\"transition\"\n        @opened=\"opened($event, arguments[1]);\"\n      >\n        <template\n          v-if=\"$slots.header\"\n          #headerContent\n        >\n          <div\n            ref=\"header\"\n          >\n            <slot name=\"header\" />\n          </div>\n        </template>\n\n        <template #content>\n          <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n          <div\n            ref=\"listWrapper\"\n            :class=\"[\n              'd-recipe-combobox-with-popover__list',\n              DROPDOWN_PADDING_CLASSES[padding],\n              listClass,\n            ]\"\n            @mouseleave=\"clearHighlightIndex\"\n            @focusout=\"clearHighlightIndex\"\n          >\n            <combobox-loading-list\n              v-if=\"loading\"\n              v-bind=\"listProps\"\n            />\n            <combobox-empty-list\n              v-else-if=\"emptyList && emptyStateMessage\"\n              v-bind=\"listProps\"\n              :message=\"emptyStateMessage\"\n            />\n            <slot\n              v-else\n              name=\"list\"\n              :list-props=\"listProps\"\n            />\n          </div>\n        </template>\n\n        <template\n          v-if=\"$slots.footer\"\n          #footerContent\n        >\n          <div\n            ref=\"footer\"\n          >\n            <slot name=\"footer\" />\n          </div>\n        </template>\n      </dt-popover>\n    </template>\n  </dt-combobox>\n</template>\n\n<script>\nimport ComboboxLoadingList from '@/components/combobox/combobox_loading-list.vue';\nimport ComboboxEmptyList from '@/components/combobox/combobox_empty-list.vue';\nimport { DtCombobox, COMBOBOX_LABEL_SIZES } from '@/components/combobox';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES, POPOVER_CONTENT_WIDTHS } from '@/components/popover';\nimport { getUniqueString } from '@/common/utils';\nimport { DROPDOWN_PADDING_CLASSES } from '@/components/dropdown';\n\nexport default {\n  name: 'DtRecipeComboboxWithPopover',\n\n  components: {\n    DtCombobox,\n    DtPopover,\n    ComboboxLoadingList,\n    ComboboxEmptyList,\n  },\n\n  props: {\n    /**\n     * String to use for the input label.\n     */\n    label: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n     * @values null, xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: null,\n      validator: (t) => Object.values(COMBOBOX_LABEL_SIZES).includes(t),\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * Leaving this null will have the combobox trigger on input focus by default.\n     * If you set this value, the default trigger behavior will be disabled and you can\n     * control it as you need.\n     */\n    showList: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Sets an ID on the list element of the component. Used by several aria attributes\n     * as well as when deriving the IDs for each item.\n     */\n    listId: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Additional class for the wrapper list element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A method that will be called when the selection goes past the beginning of the list.\n     */\n    onBeginningOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * A method that will be called when the selection goes past the end of the list.\n     */\n    onEndOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    maxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Vertical padding size around the list element.\n     */\n    padding: {\n      type: String,\n      default: 'small',\n      validator: (padding) => {\n        return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * Width configuration for the popover content. When its value is 'anchor',\n     * the popover content will have the same width as the anchor.\n     */\n    contentWidth: {\n      type: String,\n      default: null,\n      validator: contentWidth => POPOVER_CONTENT_WIDTHS.includes(contentWidth),\n    },\n\n    /**\n     * If the list should be shown by pressing up or down arrow key on the input element.\n     * This can be set when not passing showList prop.\n     */\n    openWithArrowKeys: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     *  Displaces the popover content box from its anchor element\n     *  by the specified number of pixels.\n     */\n    popoverOffset: {\n      type: Array,\n      default: () => [0, 4],\n    },\n\n    /**\n     * If the popover sticks to the input.\n     */\n    popoverSticky: {\n      type: [Boolean, String],\n      default: false,\n    },\n\n    /**\n     * Displays the list when the combobox is focused, before the user has typed anything.\n     * When this is enabled the list will not close after selection.\n     */\n    hasSuggestionList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Determines when to show the skeletons and also controls aria-busy attribute.\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.\n     */\n    emptyList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Message to show when the list is empty\n     */\n    emptyStateMessage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when 'escape' key is pressed\n     *\n     * @event escape\n     */\n    'escape',\n\n    /**\n     * Event fired when an item is highlighted\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Emitted when items are shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      DROPDOWN_PADDING_CLASSES,\n      isListShown: false,\n      isInputFocused: false,\n      isListFocused: false,\n      externalAnchor: getUniqueString(),\n    };\n  },\n\n  computed: {\n    comboboxListeners () {\n      return {\n        ...this.$listeners,\n\n        select: this.onSelect,\n\n        escape: this.onEscape,\n\n        highlight: this.onHighlight,\n      };\n    },\n  },\n\n  watch: {\n    showList: {\n      handler: function (show) {\n        if (show !== null) {\n          this.isListShown = show;\n        }\n      },\n\n      immediate: true,\n    },\n\n    isListShown (val) {\n      if (val) {\n        window.addEventListener('mousedown', this.onFocusOut);\n      } else {\n        window.removeEventListener('mousedown', this.onFocusOut);\n      }\n      this.onOpened(val);\n    },\n  },\n\n  methods: {\n    handleDisplayList (value) {\n      if (!this.hasSuggestionList && value) { this.showComboboxList(); }\n      if (!this.hasSuggestionList && !value) { this.closeComboboxList(); }\n    },\n\n    showComboboxList () {\n      if (this.showList != null) { return; }\n      this.isListShown = true;\n    },\n\n    closeComboboxList () {\n      if (this.showList != null) { return; }\n      this.isListShown = false;\n    },\n\n    onSelect (highlightIndex) {\n      if (this.loading) return;\n\n      this.$emit('select', highlightIndex);\n      if (!this.hasSuggestionList) {\n        // we don't display the list before the user has typed anything\n        this.closeComboboxList();\n      }\n    },\n\n    onEscape () {\n      this.$emit('escape');\n      this.closeComboboxList();\n    },\n\n    onHighlight (highlightIndex) {\n      if (this.loading) return;\n\n      this.$emit('highlight', highlightIndex);\n    },\n\n    onOpened (opened) {\n      this.$emit('opened', opened);\n    },\n\n    onFocusIn (e) {\n      if (this.hasSuggestionList && e && this.$refs.input?.querySelector('input') === e.target) {\n        // only trigger if we show suggestion list when focused, and\n        // it's the input specifically that was focused\n        this.showComboboxList();\n      }\n    },\n\n    onFocusOut (e) {\n      // Check if the focus change was to another target within the combobox component\n      const popoverEl = this.$refs.popover?.tip?.popper;\n      const comboboxEl = this.$refs.input;\n\n      if (e.composedPath()?.some(el => [popoverEl, comboboxEl].includes(el))) return;\n\n      // If outside the combobox then close\n      this.closeComboboxList();\n    },\n\n    openOnArrowKeyPress () {\n      if (this.showList !== null || this.isListShown || !this.openWithArrowKeys) { return; }\n\n      this.showComboboxList();\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtCombobox","DtPopover","ComboboxLoadingList","ComboboxEmptyList","t","COMBOBOX_LABEL_SIZES","getUniqueString","padding","DROPDOWN_PADDING_CLASSES","item","contentWidth","POPOVER_CONTENT_WIDTHS","appendTo","POPOVER_APPEND_TO_VALUES","show","val","value","highlightIndex","opened","_a","popoverEl","_b","comboboxEl","_c","el"],"mappings":"ghBA0HAA,EAAA,CACA,KAAA,8BAEA,WAAA,CACA,WAAAC,EAAAA,QACA,UAAAC,EAAAA,QACA,oBAAAC,EAAAA,QACA,kBAAAC,EAAAA,OACA,EAEA,MAAA,CAIA,MAAA,CACA,KAAA,OACA,SAAA,EACA,EAMA,aAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,KAAA,CACA,KAAA,OACA,QAAA,KACA,UAAAC,GAAA,OAAA,OAAAC,sBAAA,EAAA,SAAAD,CAAA,CACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,EACA,EAQA,SAAA,CACA,KAAA,QACA,QAAA,IACA,EAMA,OAAA,CACA,KAAA,OACA,SAAA,CAAA,OAAAE,EAAAA,gBAAA,CAAA,CACA,EAKA,UAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,kBAAA,CACA,KAAA,SACA,QAAA,IACA,EAKA,YAAA,CACA,KAAA,SACA,QAAA,IACA,EAMA,UAAA,CACA,KAAA,OACA,QAAA,EACA,EAMA,SAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,QAAA,CACA,KAAA,OACA,QAAA,QACA,UAAAC,GACA,OAAA,KAAAC,0BAAA,EAAA,KAAAC,GAAAA,IAAAF,CAAA,CAEA,EAMA,aAAA,CACA,KAAA,OACA,QAAA,KACA,UAAAG,GAAAC,yBAAA,SAAAD,CAAA,CACA,EAMA,kBAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,cAAA,CACA,KAAA,MACA,QAAA,IAAA,CAAA,EAAA,CAAA,CACA,EAKA,cAAA,CACA,KAAA,CAAA,QAAA,MAAA,EACA,QAAA,EACA,EAMA,kBAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,QAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,UAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,kBAAA,CACA,KAAA,OACA,QAAA,EACA,EAOA,SAAA,CACA,KAAA,CAAA,YAAA,MAAA,EACA,QAAA,OACA,UAAAE,GACAC,EAAAA,yBAAA,SAAAD,CAAA,GACAA,aAAA,WAEA,EAMA,WAAA,CACA,KAAA,OACA,QAAA,MACA,CACA,EAEA,MAAA,CAOA,SAOA,SAQA,YAQA,QACA,EAEA,MAAA,CACA,MAAA,CACA,yBAAAJ,EAAAA,yBACA,YAAA,GACA,eAAA,GACA,cAAA,GACA,eAAAF,EAAAA,gBAAA,CACA,CACA,EAEA,SAAA,CACA,mBAAA,CACA,MAAA,CACA,GAAA,KAAA,WAEA,OAAA,KAAA,SAEA,OAAA,KAAA,SAEA,UAAA,KAAA,WACA,CACA,CACA,EAEA,MAAA,CACA,SAAA,CACA,QAAA,SAAAQ,EAAA,CACAA,IAAA,OACA,KAAA,YAAAA,EAEA,EAEA,UAAA,EACA,EAEA,YAAAC,EAAA,CACAA,EACA,OAAA,iBAAA,YAAA,KAAA,UAAA,EAEA,OAAA,oBAAA,YAAA,KAAA,UAAA,EAEA,KAAA,SAAAA,CAAA,CACA,CACA,EAEA,QAAA,CACA,kBAAAC,EAAA,CACA,CAAA,KAAA,mBAAAA,GAAA,KAAA,iBAAA,EACA,CAAA,KAAA,mBAAA,CAAAA,GAAA,KAAA,kBAAA,CACA,EAEA,kBAAA,CACA,KAAA,UAAA,OACA,KAAA,YAAA,GACA,EAEA,mBAAA,CACA,KAAA,UAAA,OACA,KAAA,YAAA,GACA,EAEA,SAAAC,EAAA,CACA,KAAA,UAEA,KAAA,MAAA,SAAAA,CAAA,EACA,KAAA,mBAEA,KAAA,kBAAA,EAEA,EAEA,UAAA,CACA,KAAA,MAAA,QAAA,EACA,KAAA,kBAAA,CACA,EAEA,YAAAA,EAAA,CACA,KAAA,SAEA,KAAA,MAAA,YAAAA,CAAA,CACA,EAEA,SAAAC,EAAA,CACA,KAAA,MAAA,SAAAA,CAAA,CACA,EAEA,UAAA,EAAA,OACA,KAAA,mBAAA,KAAAC,EAAA,KAAA,MAAA,QAAA,YAAAA,EAAA,cAAA,YAAA,EAAA,QAGA,KAAA,iBAAA,CAEA,EAEA,WAAA,EAAA,WAEA,MAAAC,GAAAC,GAAAF,EAAA,KAAA,MAAA,UAAA,YAAAA,EAAA,MAAA,YAAAE,EAAA,OACAC,EAAA,KAAA,MAAA,OAEAC,EAAA,EAAA,iBAAA,MAAAA,EAAA,KAAAC,GAAA,CAAAJ,EAAAE,CAAA,EAAA,SAAAE,CAAA,IAGA,KAAA,kBAAA,CACA,EAEA,qBAAA,CACA,KAAA,WAAA,MAAA,KAAA,aAAA,CAAA,KAAA,mBAEA,KAAA,iBAAA,CACA,CACA,CACA"}

package/dist/vue2/lib/combobox-with-popover/combobox-with-popover.js

@@ -2,16 +2,16 @@ import p from "../combobox/combobox-loading-list.js";
 import u from "../combobox/combobox-empty-list.js";
 import { getUniqueString as l } from "../../common/utils/index.js";
 import { n as d } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
-import f from "../combobox/combobox.js";
-import h from "../popover/popover.js";
-import { COMBOBOX_LABEL_SIZES as c } from "../combobox/combobox-constants.js";
+import { POPOVER_CONTENT_WIDTHS as f, POPOVER_APPEND_TO_VALUES as h } from "../popover/popover-constants.js";
+import c from "../popover/popover.js";
+import m from "../combobox/combobox.js";
 import { DROPDOWN_PADDING_CLASSES as a } from "../dropdown/dropdown-constants.js";
-import { POPOVER_CONTENT_WIDTHS as m, POPOVER_APPEND_TO_VALUES as b } from "../popover/popover-constants.js";
+import { COMBOBOX_LABEL_SIZES as b } from "../combobox/combobox-constants.js";
 const y = {
   name: "DtRecipeComboboxWithPopover",
   components: {
-    DtCombobox: f,
-    DtPopover: h,
+    DtCombobox: m,
+    DtPopover: c,
     ComboboxLoadingList: p,
     ComboboxEmptyList: u
   },
@@ -38,7 +38,7 @@ const y = {
     size: {
       type: String,
       default: null,
-      validator: (e) => Object.values(c).includes(e)
+      validator: (e) => Object.values(b).includes(e)
     },
     /**
      * Description for the input
@@ -119,7 +119,7 @@ const y = {
     contentWidth: {
       type: String,
       default: null,
-      validator: (e) => m.includes(e)
+      validator: (e) => f.includes(e)
     },
     /**
      * If the list should be shown by pressing up or down arrow key on the input element.
@@ -181,7 +181,7 @@ const y = {
     appendTo: {
       type: [HTMLElement, String],
       default: "body",
-      validator: (e) => b.includes(e) || e instanceof HTMLElement
+      validator: (e) => h.includes(e) || e instanceof HTMLElement
     },
     /**
      * Named transition when the content display is toggled.

package/dist/vue2/lib/contact-centers-row/contact-centers-row.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("../../common/utils/index.cjs"),d=require("@dialpad/dialtone-icons/vue2"),_=require("../../localization/index.cjs"),p=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),b=require("../button/button.cjs"),h=require("../badge/badge.cjs"),f=require("../emoji-text-wrapper/emoji-text-wrapper.cjs"),w={name:"DtRecipeContactCentersRow",components:{DtButton:b.default,DtBadge:h.default,DtEmojiTextWrapper:f.default,DtIconHeadphones:d.DtIconHeadphones,DtIconChevronDown:d.DtIconChevronDown},inheritAttrs:!1,props:{ariaLabel:{type:String,default:""},description:{type:String,required:!0},selected:{type:Boolean,default:!1},hideActions:{type:Boolean,default:!1},unreadCount:{type:String,default:null,validator(r){return r?/^\d+\+?$/.test(r):!0}}},emits:["click","click-menu"],data(){return{labelWidth:"auto",i18n:new _.DialtoneLocalization}},computed:{leftbarContactCentersRowClasses(){return["d-recipe-leftbar-row","d-recipe-leftbar-row--contact-centers",{"d-recipe-leftbar-row__unread-count":this.showUnreadCount,"d-recipe-leftbar-row--selected":this.selected}]},getAriaLabel(){const r=isNaN(this.unreadCount)?this.unreadCount:Number(this.unreadCount);return this.ariaLabel?this.ariaLabel:u.safeConcatStrings([this.description,this.i18n.$t("DIALTONE_UNREAD_MESSAGE_COUNT_TEXT",{unreadCount:r})])},showUnreadCount(){return!!this.unreadCount},menuButtonLabel(){return this.i18n.$t("DIALTONE_CONTACT_CENTERS_ROW_MENU_BUTTON_LABEL")}},watch:{$props:{deep:!0,async handler(){await this.$nextTick(),this.adjustLabelWidth()}}},mounted(){this.resizeObserver=new ResizeObserver(this.adjustLabelWidth),this.resizeObserver.observe(this.$el),this.adjustLabelWidth()},beforeDestroy:function(){this.resizeObserver.disconnect()},methods:{adjustLabelWidth(){var i,s,n,o,c,l;const r=((s=(i=this.$el)==null?void 0:i.querySelector(".d-recipe-leftbar-row__primary"))==null?void 0:s.clientWidth)||0,e=((o=(n=this.$el)==null?void 0:n.querySelector(".d-recipe-leftbar-row__omega"))==null?void 0:o.clientWidth)||0,t=((l=(c=this.$el)==null?void 0:c.querySelector(".d-recipe-leftbar-row__alpha"))==null?void 0:l.clientWidth)||0,a=12;this.labelWidth=r-(e+t+a)+"px"}}};var m=function(){var e=this,t=e._self._c;return t("div",{class:["d-recipe-leftbar-row__container",{"d-recipe-leftbar-row__container--off-duty":e.$slots.timer}]},[t("div",{class:e.leftbarContactCentersRowClasses,attrs:{"data-qa":"dt-recipe-contact-centers-row"}},[t("a",e._g(e._b({staticClass:"d-recipe-leftbar-row__primary",attrs:{"data-qa":e.$attrs["data-qa"]??"d-recipe-leftbar-row-link","aria-label":e.getAriaLabel,title:e.description,href:e.$attrs.href??"javascript:void(0)"}},"a",e.$attrs,!1),e.$listeners),[t("div",{staticClass:"d-recipe-leftbar-row__alpha"},[t("dt-icon-headphones",{attrs:{size:"300","data-qa":"dt-recipe-leftbar-row-icon"}})],1),t("div",{staticClass:"d-recipe-leftbar-row__label",style:`flex-basis: ${e.labelWidth}`},[t("dt-emoji-text-wrapper",{staticClass:"d-recipe-leftbar-row__description",attrs:{"data-qa":"dt-recipe-leftbar-row-description",size:"200"}},[e._v(" "+e._s(e.description)+" ")])],1)]),t("div",{directives:[{name:"show",rawName:"v-show",value:!e.hideActions,expression:"!hideActions"}],staticClass:"d-recipe-leftbar-row__omega"},[e._t("right"),t("div",{staticClass:"d-recipe-leftbar-row__action-container"},[e.showUnreadCount?t("dt-badge",{staticClass:"d-recipe-leftbar-row__unread-badge",attrs:{"data-qa":"dt-recipe-leftbar-row-unread-badge",kind:"count",type:"bulletin"}},[e._v(" "+e._s(e.unreadCount)+" ")]):e._e(),t("dt-button",{staticClass:"d-recipe-leftbar-row__action",attrs:{"data-qa":"dt-recipe-leftbar-row-action-button","aria-label":e.menuButtonLabel,title:e.menuButtonLabel,importance:"clear",size:"xs",circle:""},on:{click:function(a){return a.stopPropagation(),e.$emit("click-menu",a)}},scopedSlots:e._u([{key:"icon",fn:function(){return[t("dt-icon-chevron-down",{attrs:{size:"100"}})]},proxy:!0}])})],1)],2)]),t("div",{staticClass:"d-recipe-leftbar-row__bottom"},[e._t("timer")],2)])},C=[],v=p.n(w,m,C);const g=v.exports;exports.default=g;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("../../common/utils/index.cjs"),d=require("@dialpad/dialtone-icons/vue2"),_=require("../../localization/index.cjs"),p=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),b=require("../emoji-text-wrapper/emoji-text-wrapper.cjs"),h=require("../badge/badge.cjs"),f=require("../button/button.cjs"),w={name:"DtRecipeContactCentersRow",components:{DtButton:f.default,DtBadge:h.default,DtEmojiTextWrapper:b.default,DtIconHeadphones:d.DtIconHeadphones,DtIconChevronDown:d.DtIconChevronDown},inheritAttrs:!1,props:{ariaLabel:{type:String,default:""},description:{type:String,required:!0},selected:{type:Boolean,default:!1},hideActions:{type:Boolean,default:!1},unreadCount:{type:String,default:null,validator(r){return r?/^\d+\+?$/.test(r):!0}}},emits:["click","click-menu"],data(){return{labelWidth:"auto",i18n:new _.DialtoneLocalization}},computed:{leftbarContactCentersRowClasses(){return["d-recipe-leftbar-row","d-recipe-leftbar-row--contact-centers",{"d-recipe-leftbar-row__unread-count":this.showUnreadCount,"d-recipe-leftbar-row--selected":this.selected}]},getAriaLabel(){const r=isNaN(this.unreadCount)?this.unreadCount:Number(this.unreadCount);return this.ariaLabel?this.ariaLabel:u.safeConcatStrings([this.description,this.i18n.$t("DIALTONE_UNREAD_MESSAGE_COUNT_TEXT",{unreadCount:r})])},showUnreadCount(){return!!this.unreadCount},menuButtonLabel(){return this.i18n.$t("DIALTONE_CONTACT_CENTERS_ROW_MENU_BUTTON_LABEL")}},watch:{$props:{deep:!0,async handler(){await this.$nextTick(),this.adjustLabelWidth()}}},mounted(){this.resizeObserver=new ResizeObserver(this.adjustLabelWidth),this.resizeObserver.observe(this.$el),this.adjustLabelWidth()},beforeDestroy:function(){this.resizeObserver.disconnect()},methods:{adjustLabelWidth(){var i,s,n,o,c,l;const r=((s=(i=this.$el)==null?void 0:i.querySelector(".d-recipe-leftbar-row__primary"))==null?void 0:s.clientWidth)||0,e=((o=(n=this.$el)==null?void 0:n.querySelector(".d-recipe-leftbar-row__omega"))==null?void 0:o.clientWidth)||0,t=((l=(c=this.$el)==null?void 0:c.querySelector(".d-recipe-leftbar-row__alpha"))==null?void 0:l.clientWidth)||0,a=12;this.labelWidth=r-(e+t+a)+"px"}}};var m=function(){var e=this,t=e._self._c;return t("div",{class:["d-recipe-leftbar-row__container",{"d-recipe-leftbar-row__container--off-duty":e.$slots.timer}]},[t("div",{class:e.leftbarContactCentersRowClasses,attrs:{"data-qa":"dt-recipe-contact-centers-row"}},[t("a",e._g(e._b({staticClass:"d-recipe-leftbar-row__primary",attrs:{"data-qa":e.$attrs["data-qa"]??"d-recipe-leftbar-row-link","aria-label":e.getAriaLabel,title:e.description,href:e.$attrs.href??"javascript:void(0)"}},"a",e.$attrs,!1),e.$listeners),[t("div",{staticClass:"d-recipe-leftbar-row__alpha"},[t("dt-icon-headphones",{attrs:{size:"300","data-qa":"dt-recipe-leftbar-row-icon"}})],1),t("div",{staticClass:"d-recipe-leftbar-row__label",style:`flex-basis: ${e.labelWidth}`},[t("dt-emoji-text-wrapper",{staticClass:"d-recipe-leftbar-row__description",attrs:{"data-qa":"dt-recipe-leftbar-row-description",size:"200"}},[e._v(" "+e._s(e.description)+" ")])],1)]),t("div",{directives:[{name:"show",rawName:"v-show",value:!e.hideActions,expression:"!hideActions"}],staticClass:"d-recipe-leftbar-row__omega"},[e._t("right"),t("div",{staticClass:"d-recipe-leftbar-row__action-container"},[e.showUnreadCount?t("dt-badge",{staticClass:"d-recipe-leftbar-row__unread-badge",attrs:{"data-qa":"dt-recipe-leftbar-row-unread-badge",kind:"count",type:"bulletin"}},[e._v(" "+e._s(e.unreadCount)+" ")]):e._e(),t("dt-button",{staticClass:"d-recipe-leftbar-row__action",attrs:{"data-qa":"dt-recipe-leftbar-row-action-button","aria-label":e.menuButtonLabel,title:e.menuButtonLabel,importance:"clear",size:"xs",circle:""},on:{click:function(a){return a.stopPropagation(),e.$emit("click-menu",a)}},scopedSlots:e._u([{key:"icon",fn:function(){return[t("dt-icon-chevron-down",{attrs:{size:"100"}})]},proxy:!0}])})],1)],2)]),t("div",{staticClass:"d-recipe-leftbar-row__bottom"},[e._t("timer")],2)])},C=[],v=p.n(w,m,C);const g=v.exports;exports.default=g;
 //# sourceMappingURL=contact-centers-row.cjs.map

package/dist/vue2/lib/contact-centers-row/contact-centers-row.cjs.map

@@ -1 +1 @@
-{"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  >\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=\"$attrs\"\n        v-on=\"$listeners\"\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-show=\"!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 { safeConcatStrings } 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/vue2';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\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    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(this.$el);\n    this.adjustLabelWidth();\n  },\n\n  beforeDestroy: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    adjustLabelWidth () {\n      const labelWidth = this.$el?.querySelector('.d-recipe-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = this.$el?.querySelector('.d-recipe-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = 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","value","DialtoneLocalization","count","safeConcatStrings","labelWidth","_b","_a","omegaWidth","_d","_c","alphaWidth","_f","_e","paddings"],"mappings":"oaAqFAA,EAAA,CACA,KAAA,4BAEA,WAAA,CACA,SAAAC,EAAA,QACA,QAAAC,EAAA,QACA,mBAAAC,EAAA,QACA,iBAAAC,EAAA,iBACA,kBAAAC,EAAA,iBACA,EAEA,aAAA,GAEA,MAAA,CAIA,UAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,KACA,UAAAC,EAAA,CACA,OAAAA,EACA,WAAA,KAAAA,CAAA,EADA,EAEA,CACA,CACA,EAEA,MAAA,CAOA,QAQA,YACA,EAEA,MAAA,CACA,MAAA,CACA,WAAA,OACA,KAAA,IAAAC,EAAAA,oBACA,CACA,EAEA,SAAA,CACA,iCAAA,CACA,MAAA,CACA,uBACA,wCACA,CACA,qCAAA,KAAA,gBACA,iCAAA,KAAA,QACA,CACA,CACA,EAEA,cAAA,CACA,MAAAC,EAAA,MAAA,KAAA,WAAA,EAAA,KAAA,YAAA,OAAA,KAAA,WAAA,EACA,OAAA,KAAA,UACA,KAAA,UACAC,oBAAA,CACA,KAAA,YACA,KAAA,KAAA,GAAA,qCAAA,CAAA,YAAAD,EAAA,CACA,CAAA,CACA,EAEA,iBAAA,CACA,MAAA,CAAA,CAAA,KAAA,WACA,EAEA,iBAAA,CACA,OAAA,KAAA,KAAA,GAAA,gDAAA,CACA,CACA,EAEA,MAAA,CACA,OAAA,CACA,KAAA,GACA,MAAA,SAAA,CACA,MAAA,KAAA,YACA,KAAA,iBAAA,CACA,CACA,CACA,EAEA,SAAA,CACA,KAAA,eAAA,IAAA,eAAA,KAAA,gBAAA,EACA,KAAA,eAAA,QAAA,KAAA,GAAA,EACA,KAAA,iBAAA,CACA,EAEA,cAAA,UAAA,CACA,KAAA,eAAA,YACA,EAEA,QAAA,CACA,kBAAA,iBACA,MAAAE,IAAAC,GAAAC,EAAA,KAAA,MAAA,YAAAA,EAAA,cAAA,oCAAA,YAAAD,EAAA,cAAA,EACAE,IAAAC,GAAAC,EAAA,KAAA,MAAA,YAAAA,EAAA,cAAA,kCAAA,YAAAD,EAAA,cAAA,EACAE,IAAAC,GAAAC,EAAA,KAAA,MAAA,YAAAA,EAAA,cAAA,kCAAA,YAAAD,EAAA,cAAA,EACAE,EAAA,GACA,KAAA,WAAAT,GAAAG,EAAAG,EAAAG,GAAA,IACA,CACA,CACA"}
+{"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  >\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=\"$attrs\"\n        v-on=\"$listeners\"\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-show=\"!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 { safeConcatStrings } 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/vue2';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\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    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(this.$el);\n    this.adjustLabelWidth();\n  },\n\n  beforeDestroy: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    adjustLabelWidth () {\n      const labelWidth = this.$el?.querySelector('.d-recipe-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = this.$el?.querySelector('.d-recipe-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = 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","value","DialtoneLocalization","count","safeConcatStrings","labelWidth","_b","_a","omegaWidth","_d","_c","alphaWidth","_f","_e","paddings"],"mappings":"oaAqFAA,EAAA,CACA,KAAA,4BAEA,WAAA,CACA,SAAAC,EAAAA,QACA,QAAAC,EAAAA,QACA,mBAAAC,EAAAA,QACA,iBAAAC,EAAAA,iBACA,kBAAAC,EAAAA,iBACA,EAEA,aAAA,GAEA,MAAA,CAIA,UAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,KACA,UAAAC,EAAA,CACA,OAAAA,EACA,WAAA,KAAAA,CAAA,EADA,EAEA,CACA,CACA,EAEA,MAAA,CAOA,QAQA,YACA,EAEA,MAAA,CACA,MAAA,CACA,WAAA,OACA,KAAA,IAAAC,EAAAA,oBACA,CACA,EAEA,SAAA,CACA,iCAAA,CACA,MAAA,CACA,uBACA,wCACA,CACA,qCAAA,KAAA,gBACA,iCAAA,KAAA,QACA,CACA,CACA,EAEA,cAAA,CACA,MAAAC,EAAA,MAAA,KAAA,WAAA,EAAA,KAAA,YAAA,OAAA,KAAA,WAAA,EACA,OAAA,KAAA,UACA,KAAA,UACAC,oBAAA,CACA,KAAA,YACA,KAAA,KAAA,GAAA,qCAAA,CAAA,YAAAD,EAAA,CACA,CAAA,CACA,EAEA,iBAAA,CACA,MAAA,CAAA,CAAA,KAAA,WACA,EAEA,iBAAA,CACA,OAAA,KAAA,KAAA,GAAA,gDAAA,CACA,CACA,EAEA,MAAA,CACA,OAAA,CACA,KAAA,GACA,MAAA,SAAA,CACA,MAAA,KAAA,UAAA,EACA,KAAA,iBAAA,CACA,CACA,CACA,EAEA,SAAA,CACA,KAAA,eAAA,IAAA,eAAA,KAAA,gBAAA,EACA,KAAA,eAAA,QAAA,KAAA,GAAA,EACA,KAAA,iBAAA,CACA,EAEA,cAAA,UAAA,CACA,KAAA,eAAA,WAAA,CACA,EAEA,QAAA,CACA,kBAAA,iBACA,MAAAE,IAAAC,GAAAC,EAAA,KAAA,MAAA,YAAAA,EAAA,cAAA,oCAAA,YAAAD,EAAA,cAAA,EACAE,IAAAC,GAAAC,EAAA,KAAA,MAAA,YAAAA,EAAA,cAAA,kCAAA,YAAAD,EAAA,cAAA,EACAE,IAAAC,GAAAC,EAAA,KAAA,MAAA,YAAAA,EAAA,cAAA,kCAAA,YAAAD,EAAA,cAAA,EACAE,EAAA,GACA,KAAA,WAAAT,GAAAG,EAAAG,EAAAG,GAAA,IACA,CACA,CACA"}

package/dist/vue2/lib/contact-centers-row/contact-centers-row.js

@@ -1,18 +1,18 @@
 import { safeConcatStrings as l } from "../../common/utils/index.js";
-import { DtIconHeadphones as p, DtIconChevronDown as u } from "@dialpad/dialtone-icons/vue2";
+import { DtIconChevronDown as p, DtIconHeadphones as u } from "@dialpad/dialtone-icons/vue2";
 import { DialtoneLocalization as _ } from "../../localization/index.js";
 import { n as b } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
-import h from "../button/button.js";
+import h from "../emoji-text-wrapper/emoji-text-wrapper.js";
 import f from "../badge/badge.js";
-import m from "../emoji-text-wrapper/emoji-text-wrapper.js";
+import m from "../button/button.js";
 const w = {
   name: "DtRecipeContactCentersRow",
   components: {
-    DtButton: h,
+    DtButton: m,
     DtBadge: f,
-    DtEmojiTextWrapper: m,
-    DtIconHeadphones: p,
-    DtIconChevronDown: u
+    DtEmojiTextWrapper: h,
+    DtIconHeadphones: u,
+    DtIconChevronDown: p
   },
   inheritAttrs: !1,
   props: {

package/dist/vue2/lib/contact-centers-row/contact-centers-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"contact-centers-row.js","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  >\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=\"$attrs\"\n        v-on=\"$listeners\"\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-show=\"!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 { safeConcatStrings } 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/vue2';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\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    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(this.$el);\n    this.adjustLabelWidth();\n  },\n\n  beforeDestroy: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    adjustLabelWidth () {\n      const labelWidth = this.$el?.querySelector('.d-recipe-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = this.$el?.querySelector('.d-recipe-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = 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","value","DialtoneLocalization","count","safeConcatStrings","labelWidth","_b","_a","omegaWidth","_d","_c","alphaWidth","_f","_e","paddings"],"mappings":";;;;;;;AAqFA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,mBAAAC;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAAC,GAAA;AACA,eAAAA,IACA,WAAA,KAAAA,CAAA,IADA;AAAA,MAEA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,MAAA,IAAAC,EAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,kCAAA;AACA,aAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,UACA,sCAAA,KAAA;AAAA,UACA,kCAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,YAAAC,IAAA,MAAA,KAAA,WAAA,IAAA,KAAA,cAAA,OAAA,KAAA,WAAA;AACA,aAAA,KAAA,YACA,KAAA,YACAC,EAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA,KAAA,GAAA,sCAAA,EAAA,aAAAD,GAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,CAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,KAAA,GAAA,gDAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,MAAA,UAAA;AACA,cAAA,KAAA,aACA,KAAA,iBAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,iBAAA,IAAA,eAAA,KAAA,gBAAA,GACA,KAAA,eAAA,QAAA,KAAA,GAAA,GACA,KAAA,iBAAA;AAAA,EACA;AAAA,EAEA,eAAA,WAAA;AACA,SAAA,eAAA;EACA;AAAA,EAEA,SAAA;AAAA,IACA,mBAAA;;AACA,YAAAE,MAAAC,KAAAC,IAAA,KAAA,QAAA,gBAAAA,EAAA,cAAA,sCAAA,gBAAAD,EAAA,gBAAA,GACAE,MAAAC,KAAAC,IAAA,KAAA,QAAA,gBAAAA,EAAA,cAAA,oCAAA,gBAAAD,EAAA,gBAAA,GACAE,MAAAC,KAAAC,IAAA,KAAA,QAAA,gBAAAA,EAAA,cAAA,oCAAA,gBAAAD,EAAA,gBAAA,GACAE,IAAA;AACA,WAAA,aAAAT,KAAAG,IAAAG,IAAAG,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"contact-centers-row.js","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  >\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=\"$attrs\"\n        v-on=\"$listeners\"\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-show=\"!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 { safeConcatStrings } 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/vue2';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\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    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(this.$el);\n    this.adjustLabelWidth();\n  },\n\n  beforeDestroy: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    adjustLabelWidth () {\n      const labelWidth = this.$el?.querySelector('.d-recipe-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = this.$el?.querySelector('.d-recipe-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = 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","value","DialtoneLocalization","count","safeConcatStrings","labelWidth","_b","_a","omegaWidth","_d","_c","alphaWidth","_f","_e","paddings"],"mappings":";;;;;;;AAqFA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,mBAAAC;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAAC,GAAA;AACA,eAAAA,IACA,WAAA,KAAAA,CAAA,IADA;AAAA,MAEA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,MAAA,IAAAC,EAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,kCAAA;AACA,aAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,UACA,sCAAA,KAAA;AAAA,UACA,kCAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,YAAAC,IAAA,MAAA,KAAA,WAAA,IAAA,KAAA,cAAA,OAAA,KAAA,WAAA;AACA,aAAA,KAAA,YACA,KAAA,YACAC,EAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA,KAAA,GAAA,sCAAA,EAAA,aAAAD,GAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,CAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,KAAA,GAAA,gDAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,MAAA,UAAA;AACA,cAAA,KAAA,UAAA,GACA,KAAA,iBAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,iBAAA,IAAA,eAAA,KAAA,gBAAA,GACA,KAAA,eAAA,QAAA,KAAA,GAAA,GACA,KAAA,iBAAA;AAAA,EACA;AAAA,EAEA,eAAA,WAAA;AACA,SAAA,eAAA,WAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,mBAAA;;AACA,YAAAE,MAAAC,KAAAC,IAAA,KAAA,QAAA,gBAAAA,EAAA,cAAA,sCAAA,gBAAAD,EAAA,gBAAA,GACAE,MAAAC,KAAAC,IAAA,KAAA,QAAA,gBAAAA,EAAA,cAAA,oCAAA,gBAAAD,EAAA,gBAAA,GACAE,MAAAC,KAAAC,IAAA,KAAA,QAAA,gBAAAA,EAAA,cAAA,oCAAA,gBAAAD,EAAA,gBAAA,GACAE,IAAA;AACA,WAAA,aAAAT,KAAAG,IAAAG,IAAAG,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}

package/dist/vue2/lib/contact-info/contact-info.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"contact-info.cjs","sources":["../../../recipes/item_layout/contact_info/contact_info.vue"],"sourcesContent":["<template>\n  <dt-item-layout\n    :role=\"role\"\n    data-qa=\"contact-info\"\n    class=\"d-recipe-contact-info\"\n    content-class=\"d-recipe-contact-info__content\"\n    right-class=\"d-recipe-contact-info__right\"\n    unstyled\n  >\n    <template\n      v-if=\"showAvatar\"\n      #left\n    >\n      <button\n        class=\"d-recipe-contact-info__left\"\n        data-qa=\"contact-info-left\"\n        :aria-labelledby=\"avatarLabelledBy\"\n        @click=\"avatarClick\"\n      >\n        <span\n          v-if=\"avatarList\"\n          class=\"d-recipe-contact-info__avatars\"\n        >\n          <dt-avatar\n            v-for=\"(avatar, index) in avatarList\"\n            :key=\"index\"\n            :size=\"avatarSize\"\n            :seed=\"avatar.seed\"\n            :full-name=\"avatar.fullName\"\n            :image-src=\"avatar.src\"\n            image-alt=\"\"\n            :overlay-text=\"avatar.text\"\n            :avatar-class=\"[\n              {\n                'd-recipe-contact-info__avatar-stacked': index > 0,\n                'd-recipe-contact-info__avatar-halo': !!avatar.halo,\n              },\n            ]\"\n          >\n            <template #icon=\"{ iconSize }\">\n              <!-- @slot Slot for avatar icon in a list -->\n              <slot\n                name=\"avatarIcon\"\n                :icon-size=\"iconSize\"\n              />\n            </template>\n            <template\n              v-if=\"avatar.icon\"\n              #overlayIcon\n            >\n              <component :is=\"avatar.icon\" />\n            </template>\n          </dt-avatar>\n        </span>\n        <dt-avatar\n          v-else\n          :size=\"avatarSize\"\n          :full-name=\"avatarFullName\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :seed=\"avatarSeed\"\n          :color=\"avatarColor\"\n          :presence=\"presence\"\n        >\n          <template #icon=\"{ iconSize }\">\n            <!-- @slot Slot for avatar icon in a list -->\n            <slot\n              name=\"avatarIcon\"\n              :icon-size=\"iconSize\"\n            />\n          </template>\n        </dt-avatar>\n      </button>\n    </template>\n    <template #default>\n      <div\n        class=\"d-recipe-contact-info__header\"\n        data-qa=\"contact-info-header\"\n      >\n        <!-- @slot Slot for header information -->\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <template #subtitle>\n      <div\n        class=\"d-recipe-contact-info__subtitle\"\n        data-qa=\"contact-info-subtitle\"\n      >\n        <!-- @slot Slot for subtitle information -->\n        <slot name=\"subtitle\" />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.bottom\"\n      #bottom\n    >\n      <div\n        class=\"d-recipe-contact-info__bottom\"\n        data-qa=\"contact-info-bottom\"\n      >\n        <!-- @slot Slot for information at the bottom -->\n        <slot name=\"bottom\" />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.right\"\n      #right\n    >\n      <div data-qa=\"contact-info-right\">\n        <!-- @slot Slot for the right content -->\n        <slot name=\"right\" />\n      </div>\n    </template>\n  </dt-item-layout>\n</template>\n\n<script>\nimport DtItemLayout from '@/components/item_layout/item_layout.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\n\nexport default {\n  name: 'DtRecipeContactInfo',\n\n  components: {\n    DtAvatar,\n    DtItemLayout,\n  },\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Display avatar if `showAvatar` property is true.\n     */\n    showAvatar: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Optional avatar image url.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Avatar's full name, used to extract initials\n     * to display in avatar if `avatarSrc` and `avatarIcon` are empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    avatarSize: {\n      type: String,\n      default: 'lg',\n    },\n\n    /**\n     * The aria-labelledby of the button containing avatars\n     */\n    avatarLabelledBy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar color to display if `avatarSrc` is empty.\n     */\n    avatarColor: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Showing multiple avatars in contact info.\n     * The props of array items are: <br>\n     * `src` - avatar image url (optional) <br>\n     * `fullName` - full name, used to extract initials to display in avatar<br>\n     *  if `avatarSrc` and `avatarIcon` are empty<br>\n     * `seed` - determines uniqueness of avatar background <br>\n     * `text` - text that overlays the avatar (optional) <br>\n     * `icon` - icon that overlays the avatar (optional) <br>\n     * `halo` - halo highlight around the avatar. boolean true/false\n     */\n    avatarList: {\n      type: Array,\n      default: null,\n    },\n  },\n\n  emits: ['avatar-click'],\n\n  methods: {\n    avatarClick () {\n      this.$emit('avatar-click');\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtItemLayout"],"mappings":"wPA2HAA,EAAA,CACA,KAAA,sBAEA,WAAA,CACA,SAAAC,EAAA,QACA,aAAAC,EAAA,OACA,EAQA,MAAA,CAIA,KAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,WAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,UAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,WAAA,CACA,KAAA,OACA,QAAA,IACA,EAMA,eAAA,CACA,KAAA,OACA,QAAA,EACA,EAMA,WAAA,CACA,KAAA,OACA,QAAA,IACA,EAKA,iBAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,IACA,EAQA,SAAA,CACA,KAAA,OACA,QAAA,IACA,EAaA,WAAA,CACA,KAAA,MACA,QAAA,IACA,CACA,EAEA,MAAA,CAAA,cAAA,EAEA,QAAA,CACA,aAAA,CACA,KAAA,MAAA,cAAA,CACA,CACA,CACA"}
+{"version":3,"file":"contact-info.cjs","sources":["../../../recipes/item_layout/contact_info/contact_info.vue"],"sourcesContent":["<template>\n  <dt-item-layout\n    :role=\"role\"\n    data-qa=\"contact-info\"\n    class=\"d-recipe-contact-info\"\n    content-class=\"d-recipe-contact-info__content\"\n    right-class=\"d-recipe-contact-info__right\"\n    unstyled\n  >\n    <template\n      v-if=\"showAvatar\"\n      #left\n    >\n      <button\n        class=\"d-recipe-contact-info__left\"\n        data-qa=\"contact-info-left\"\n        :aria-labelledby=\"avatarLabelledBy\"\n        @click=\"avatarClick\"\n      >\n        <span\n          v-if=\"avatarList\"\n          class=\"d-recipe-contact-info__avatars\"\n        >\n          <dt-avatar\n            v-for=\"(avatar, index) in avatarList\"\n            :key=\"index\"\n            :size=\"avatarSize\"\n            :seed=\"avatar.seed\"\n            :full-name=\"avatar.fullName\"\n            :image-src=\"avatar.src\"\n            image-alt=\"\"\n            :overlay-text=\"avatar.text\"\n            :avatar-class=\"[\n              {\n                'd-recipe-contact-info__avatar-stacked': index > 0,\n                'd-recipe-contact-info__avatar-halo': !!avatar.halo,\n              },\n            ]\"\n          >\n            <template #icon=\"{ iconSize }\">\n              <!-- @slot Slot for avatar icon in a list -->\n              <slot\n                name=\"avatarIcon\"\n                :icon-size=\"iconSize\"\n              />\n            </template>\n            <template\n              v-if=\"avatar.icon\"\n              #overlayIcon\n            >\n              <component :is=\"avatar.icon\" />\n            </template>\n          </dt-avatar>\n        </span>\n        <dt-avatar\n          v-else\n          :size=\"avatarSize\"\n          :full-name=\"avatarFullName\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :seed=\"avatarSeed\"\n          :color=\"avatarColor\"\n          :presence=\"presence\"\n        >\n          <template #icon=\"{ iconSize }\">\n            <!-- @slot Slot for avatar icon in a list -->\n            <slot\n              name=\"avatarIcon\"\n              :icon-size=\"iconSize\"\n            />\n          </template>\n        </dt-avatar>\n      </button>\n    </template>\n    <template #default>\n      <div\n        class=\"d-recipe-contact-info__header\"\n        data-qa=\"contact-info-header\"\n      >\n        <!-- @slot Slot for header information -->\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <template #subtitle>\n      <div\n        class=\"d-recipe-contact-info__subtitle\"\n        data-qa=\"contact-info-subtitle\"\n      >\n        <!-- @slot Slot for subtitle information -->\n        <slot name=\"subtitle\" />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.bottom\"\n      #bottom\n    >\n      <div\n        class=\"d-recipe-contact-info__bottom\"\n        data-qa=\"contact-info-bottom\"\n      >\n        <!-- @slot Slot for information at the bottom -->\n        <slot name=\"bottom\" />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.right\"\n      #right\n    >\n      <div data-qa=\"contact-info-right\">\n        <!-- @slot Slot for the right content -->\n        <slot name=\"right\" />\n      </div>\n    </template>\n  </dt-item-layout>\n</template>\n\n<script>\nimport DtItemLayout from '@/components/item_layout/item_layout.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\n\nexport default {\n  name: 'DtRecipeContactInfo',\n\n  components: {\n    DtAvatar,\n    DtItemLayout,\n  },\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Display avatar if `showAvatar` property is true.\n     */\n    showAvatar: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Optional avatar image url.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Avatar's full name, used to extract initials\n     * to display in avatar if `avatarSrc` and `avatarIcon` are empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    avatarSize: {\n      type: String,\n      default: 'lg',\n    },\n\n    /**\n     * The aria-labelledby of the button containing avatars\n     */\n    avatarLabelledBy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar color to display if `avatarSrc` is empty.\n     */\n    avatarColor: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Showing multiple avatars in contact info.\n     * The props of array items are: <br>\n     * `src` - avatar image url (optional) <br>\n     * `fullName` - full name, used to extract initials to display in avatar<br>\n     *  if `avatarSrc` and `avatarIcon` are empty<br>\n     * `seed` - determines uniqueness of avatar background <br>\n     * `text` - text that overlays the avatar (optional) <br>\n     * `icon` - icon that overlays the avatar (optional) <br>\n     * `halo` - halo highlight around the avatar. boolean true/false\n     */\n    avatarList: {\n      type: Array,\n      default: null,\n    },\n  },\n\n  emits: ['avatar-click'],\n\n  methods: {\n    avatarClick () {\n      this.$emit('avatar-click');\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtItemLayout"],"mappings":"wPA2HAA,EAAA,CACA,KAAA,sBAEA,WAAA,CACA,SAAAC,EAAAA,QACA,aAAAC,EAAAA,OACA,EAQA,MAAA,CAIA,KAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,WAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,UAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,WAAA,CACA,KAAA,OACA,QAAA,IACA,EAMA,eAAA,CACA,KAAA,OACA,QAAA,EACA,EAMA,WAAA,CACA,KAAA,OACA,QAAA,IACA,EAKA,iBAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,IACA,EAQA,SAAA,CACA,KAAA,OACA,QAAA,IACA,EAaA,WAAA,CACA,KAAA,MACA,QAAA,IACA,CACA,EAEA,MAAA,CAAA,cAAA,EAEA,QAAA,CACA,aAAA,CACA,KAAA,MAAA,cAAA,CACA,CACA,CACA"}

package/dist/vue2/lib/contact-row/contact-row.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("../../common/utils/index.cjs"),s=require("@dialpad/dialtone-icons/vue2"),n=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),o=require("../avatar/avatar.cjs"),l=require("../general-row/general-row.cjs"),c=require("../emoji-text-wrapper/emoji-text-wrapper.cjs"),i={name:"DtRecipeContactRow",components:{DtAvatar:o.default,DtRecipeGeneralRow:l.default,DtEmojiTextWrapper:c.default,DtIconUser:s.DtIconUser},inheritAttrs:!1,props:{avatarSrc:{type:String,default:""},avatarPresence:{type:String,default:null},avatarSeed:{type:String,default:null},avatarColor:{type:String,default:null},presenceText:{type:String,default:""},name:{type:String,required:!0},userStatus:{type:String,default:""},muted:{type:Boolean,default:!1},unreadCount:{type:String,default:null},hasUnreads:{type:Boolean,default:!1},selected:{type:Boolean,default:!1},noInitials:{type:Boolean,default:!1},isTyping:{type:Boolean,default:!1},hasCallButton:{type:Boolean,default:!0}},emits:["click","call"],computed:{presenceFontColorClass(){return{active:"d-recipe-contact-row--active",busy:"d-recipe-contact-row--busy",away:"d-recipe-contact-row--away"}[this.avatarPresence]},contactDescription(){return r.safeConcatStrings([this.name,this.presenceText,this.userStatus])}}};var u=function(){var e=this,t=e._self._c;return t("dt-recipe-general-row",e._g(e._b({attrs:{"unread-count":e.unreadCount,description:e.contactDescription,"has-unreads":e.hasUnreads,selected:e.selected,"has-call-button":e.hasCallButton,muted:e.muted,"is-typing":e.isTyping,"data-qa":"contact-row"},scopedSlots:e._u([{key:"left",fn:function(){return[t("dt-avatar",{attrs:{"full-name":e.name,"image-src":e.avatarSrc,color:e.avatarColor,"image-alt":"",size:"sm",seed:e.avatarSeed,presence:e.avatarPresence},scopedSlots:e._u([e.noInitials?{key:"icon",fn:function(){return[t("dt-icon-user",{attrs:{size:"200"}})]},proxy:!0}:null],null,!0)})]},proxy:!0},{key:"label",fn:function(){return[t("dt-emoji-text-wrapper",{staticClass:"d-recipe-leftbar-row__description",attrs:{"data-qa":"dt-recipe-leftbar-row-description",size:"200"}},[e._v(" "+e._s(e.name)+" ")]),t("div",{staticClass:"d-recipe-leftbar-row__status"},[e.presenceText?t("span",{class:["d-recipe-leftbar-row__meta-context",e.presenceFontColorClass],attrs:{"data-qa":"dt-recipe-leftbar-row-presence-text"}},[e._v(" "+e._s(e.presenceText)+" ")]):e._e(),e.userStatus?t("dt-emoji-text-wrapper",{staticClass:"d-recipe-leftbar-row__meta-custom",attrs:{size:"100","element-type":"span","data-qa":"dt-recipe-leftbar-row-user-status"}},[e._v(" "+e._s(e.userStatus)+" ")]):e._e()],1)]},proxy:!0}])},"dt-recipe-general-row",e.$attrs,!1),e.$listeners))},p=[],d=n.n(i,u,p);const _=d.exports;exports.default=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("../../common/utils/index.cjs"),s=require("@dialpad/dialtone-icons/vue2"),n=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),o=require("../emoji-text-wrapper/emoji-text-wrapper.cjs"),l=require("../general-row/general-row.cjs"),c=require("../avatar/avatar.cjs"),i={name:"DtRecipeContactRow",components:{DtAvatar:c.default,DtRecipeGeneralRow:l.default,DtEmojiTextWrapper:o.default,DtIconUser:s.DtIconUser},inheritAttrs:!1,props:{avatarSrc:{type:String,default:""},avatarPresence:{type:String,default:null},avatarSeed:{type:String,default:null},avatarColor:{type:String,default:null},presenceText:{type:String,default:""},name:{type:String,required:!0},userStatus:{type:String,default:""},muted:{type:Boolean,default:!1},unreadCount:{type:String,default:null},hasUnreads:{type:Boolean,default:!1},selected:{type:Boolean,default:!1},noInitials:{type:Boolean,default:!1},isTyping:{type:Boolean,default:!1},hasCallButton:{type:Boolean,default:!0}},emits:["click","call"],computed:{presenceFontColorClass(){return{active:"d-recipe-contact-row--active",busy:"d-recipe-contact-row--busy",away:"d-recipe-contact-row--away"}[this.avatarPresence]},contactDescription(){return r.safeConcatStrings([this.name,this.presenceText,this.userStatus])}}};var u=function(){var e=this,t=e._self._c;return t("dt-recipe-general-row",e._g(e._b({attrs:{"unread-count":e.unreadCount,description:e.contactDescription,"has-unreads":e.hasUnreads,selected:e.selected,"has-call-button":e.hasCallButton,muted:e.muted,"is-typing":e.isTyping,"data-qa":"contact-row"},scopedSlots:e._u([{key:"left",fn:function(){return[t("dt-avatar",{attrs:{"full-name":e.name,"image-src":e.avatarSrc,color:e.avatarColor,"image-alt":"",size:"sm",seed:e.avatarSeed,presence:e.avatarPresence},scopedSlots:e._u([e.noInitials?{key:"icon",fn:function(){return[t("dt-icon-user",{attrs:{size:"200"}})]},proxy:!0}:null],null,!0)})]},proxy:!0},{key:"label",fn:function(){return[t("dt-emoji-text-wrapper",{staticClass:"d-recipe-leftbar-row__description",attrs:{"data-qa":"dt-recipe-leftbar-row-description",size:"200"}},[e._v(" "+e._s(e.name)+" ")]),t("div",{staticClass:"d-recipe-leftbar-row__status"},[e.presenceText?t("span",{class:["d-recipe-leftbar-row__meta-context",e.presenceFontColorClass],attrs:{"data-qa":"dt-recipe-leftbar-row-presence-text"}},[e._v(" "+e._s(e.presenceText)+" ")]):e._e(),e.userStatus?t("dt-emoji-text-wrapper",{staticClass:"d-recipe-leftbar-row__meta-custom",attrs:{size:"100","element-type":"span","data-qa":"dt-recipe-leftbar-row-user-status"}},[e._v(" "+e._s(e.userStatus)+" ")]):e._e()],1)]},proxy:!0}])},"dt-recipe-general-row",e.$attrs,!1),e.$listeners))},p=[],d=n.n(i,u,p);const _=d.exports;exports.default=_;
 //# sourceMappingURL=contact-row.cjs.map

package/dist/vue2/lib/contact-row/contact-row.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"contact-row.cjs","sources":["../../../recipes/leftbar/contact_row/contact_row.vue"],"sourcesContent":["<template>\n  <dt-recipe-general-row\n    :unread-count=\"unreadCount\"\n    :description=\"contactDescription\"\n    :has-unreads=\"hasUnreads\"\n    :selected=\"selected\"\n    :has-call-button=\"hasCallButton\"\n    :muted=\"muted\"\n    :is-typing=\"isTyping\"\n    v-bind=\"$attrs\"\n    data-qa=\"contact-row\"\n    v-on=\"$listeners\"\n  >\n    <template #left>\n      <dt-avatar\n        :full-name=\"name\"\n        :image-src=\"avatarSrc\"\n        :color=\"avatarColor\"\n        image-alt=\"\"\n        size=\"sm\"\n        :seed=\"avatarSeed\"\n        :presence=\"avatarPresence\"\n      >\n        <template\n          v-if=\"noInitials\"\n          #icon\n        >\n          <dt-icon-user\n            size=\"200\"\n          />\n        </template>\n      </dt-avatar>\n    </template>\n    <template #label>\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        {{ name }}\n      </dt-emoji-text-wrapper>\n      <div class=\"d-recipe-leftbar-row__status\">\n        <span\n          v-if=\"presenceText\"\n          data-qa=\"dt-recipe-leftbar-row-presence-text\"\n          :class=\"['d-recipe-leftbar-row__meta-context', presenceFontColorClass]\"\n        >\n          {{ presenceText }}\n        </span>\n        <dt-emoji-text-wrapper\n          v-if=\"userStatus\"\n          size=\"100\"\n          element-type=\"span\"\n          data-qa=\"dt-recipe-leftbar-row-user-status\"\n          class=\"d-recipe-leftbar-row__meta-custom\"\n        >\n          {{ userStatus }}\n        </dt-emoji-text-wrapper>\n      </div>\n    </template>\n  </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport { DtEmojiTextWrapper } from '@/components/emoji_text_wrapper';\nimport { DtAvatar } from '@/components/avatar';\nimport { safeConcatStrings } from '@/common/utils';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n  name: 'DtRecipeContactRow',\n\n  components: {\n    DtAvatar,\n    DtRecipeGeneralRow,\n    DtEmojiTextWrapper,\n    DtIconUser,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Optional avatar image url.\n     * If not provided it will use the initial of the name.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * defer validation to avatar component.\n     * @values null, busy, away, offline, active\n     */\n    avatarPresence: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Avatar color to display if `avatarSrc` is empty.\n     */\n    avatarColor: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Text describing the user's presence, such as \"in a meeting\"\n     */\n    presenceText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Name of the contact\n     */\n    name: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Status as set by the user.\n     */\n    userStatus: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Gives a faded style to be used when muted\n     */\n    muted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n     * the unread count badge.\n     */\n    hasUnreads: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Initials will never be shown. Instead it will show a \"User\" icon.\n     */\n    noInitials: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows an \"is typing\" animation over the avatar when true.\n     */\n    isTyping: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the contact row should display a call button when hovered.\n     */\n    hasCallButton: {\n      type: Boolean,\n      default: 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     * Call button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'call',\n  ],\n\n  computed: {\n    presenceFontColorClass () {\n      const presenceFontColors = {\n        active: 'd-recipe-contact-row--active',\n        busy: 'd-recipe-contact-row--busy',\n        away: 'd-recipe-contact-row--away',\n      };\n\n      return presenceFontColors[this.avatarPresence];\n    },\n\n    contactDescription () {\n      return safeConcatStrings([this.name, this.presenceText, this.userStatus]);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtRecipeGeneralRow","DtEmojiTextWrapper","DtIconUser","safeConcatStrings"],"mappings":"sYAsEAA,EAAA,CACA,KAAA,qBAEA,WAAA,CACA,SAAAC,EAAA,QACA,mBAAAC,EAAA,QACA,mBAAAC,EAAA,QACA,WAAAC,EAAA,UACA,EAEA,aAAA,GAEA,MAAA,CAKA,UAAA,CACA,KAAA,OACA,QAAA,EACA,EASA,eAAA,CACA,KAAA,OACA,QAAA,IACA,EAKA,WAAA,CACA,KAAA,OACA,QAAA,IACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,IACA,EAKA,aAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,KAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,WAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,MAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,IACA,EAMA,WAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,WAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,cAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EAEA,MAAA,CAOA,QAQA,MACA,EAEA,SAAA,CACA,wBAAA,CAOA,MANA,CACA,OAAA,+BACA,KAAA,6BACA,KAAA,4BACA,EAEA,KAAA,cAAA,CACA,EAEA,oBAAA,CACA,OAAAC,EAAA,kBAAA,CAAA,KAAA,KAAA,KAAA,aAAA,KAAA,UAAA,CAAA,CACA,CACA,CACA"}
+{"version":3,"file":"contact-row.cjs","sources":["../../../recipes/leftbar/contact_row/contact_row.vue"],"sourcesContent":["<template>\n  <dt-recipe-general-row\n    :unread-count=\"unreadCount\"\n    :description=\"contactDescription\"\n    :has-unreads=\"hasUnreads\"\n    :selected=\"selected\"\n    :has-call-button=\"hasCallButton\"\n    :muted=\"muted\"\n    :is-typing=\"isTyping\"\n    v-bind=\"$attrs\"\n    data-qa=\"contact-row\"\n    v-on=\"$listeners\"\n  >\n    <template #left>\n      <dt-avatar\n        :full-name=\"name\"\n        :image-src=\"avatarSrc\"\n        :color=\"avatarColor\"\n        image-alt=\"\"\n        size=\"sm\"\n        :seed=\"avatarSeed\"\n        :presence=\"avatarPresence\"\n      >\n        <template\n          v-if=\"noInitials\"\n          #icon\n        >\n          <dt-icon-user\n            size=\"200\"\n          />\n        </template>\n      </dt-avatar>\n    </template>\n    <template #label>\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        {{ name }}\n      </dt-emoji-text-wrapper>\n      <div class=\"d-recipe-leftbar-row__status\">\n        <span\n          v-if=\"presenceText\"\n          data-qa=\"dt-recipe-leftbar-row-presence-text\"\n          :class=\"['d-recipe-leftbar-row__meta-context', presenceFontColorClass]\"\n        >\n          {{ presenceText }}\n        </span>\n        <dt-emoji-text-wrapper\n          v-if=\"userStatus\"\n          size=\"100\"\n          element-type=\"span\"\n          data-qa=\"dt-recipe-leftbar-row-user-status\"\n          class=\"d-recipe-leftbar-row__meta-custom\"\n        >\n          {{ userStatus }}\n        </dt-emoji-text-wrapper>\n      </div>\n    </template>\n  </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport { DtEmojiTextWrapper } from '@/components/emoji_text_wrapper';\nimport { DtAvatar } from '@/components/avatar';\nimport { safeConcatStrings } from '@/common/utils';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n  name: 'DtRecipeContactRow',\n\n  components: {\n    DtAvatar,\n    DtRecipeGeneralRow,\n    DtEmojiTextWrapper,\n    DtIconUser,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Optional avatar image url.\n     * If not provided it will use the initial of the name.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * defer validation to avatar component.\n     * @values null, busy, away, offline, active\n     */\n    avatarPresence: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Avatar color to display if `avatarSrc` is empty.\n     */\n    avatarColor: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Text describing the user's presence, such as \"in a meeting\"\n     */\n    presenceText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Name of the contact\n     */\n    name: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Status as set by the user.\n     */\n    userStatus: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Gives a faded style to be used when muted\n     */\n    muted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n     * the unread count badge.\n     */\n    hasUnreads: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Initials will never be shown. Instead it will show a \"User\" icon.\n     */\n    noInitials: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows an \"is typing\" animation over the avatar when true.\n     */\n    isTyping: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the contact row should display a call button when hovered.\n     */\n    hasCallButton: {\n      type: Boolean,\n      default: 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     * Call button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'call',\n  ],\n\n  computed: {\n    presenceFontColorClass () {\n      const presenceFontColors = {\n        active: 'd-recipe-contact-row--active',\n        busy: 'd-recipe-contact-row--busy',\n        away: 'd-recipe-contact-row--away',\n      };\n\n      return presenceFontColors[this.avatarPresence];\n    },\n\n    contactDescription () {\n      return safeConcatStrings([this.name, this.presenceText, this.userStatus]);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtRecipeGeneralRow","DtEmojiTextWrapper","DtIconUser","safeConcatStrings"],"mappings":"sYAsEAA,EAAA,CACA,KAAA,qBAEA,WAAA,CACA,SAAAC,EAAAA,QACA,mBAAAC,EAAAA,QACA,mBAAAC,EAAAA,QACA,WAAAC,EAAAA,UACA,EAEA,aAAA,GAEA,MAAA,CAKA,UAAA,CACA,KAAA,OACA,QAAA,EACA,EASA,eAAA,CACA,KAAA,OACA,QAAA,IACA,EAKA,WAAA,CACA,KAAA,OACA,QAAA,IACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,IACA,EAKA,aAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,KAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,WAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,MAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,IACA,EAMA,WAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,WAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,cAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EAEA,MAAA,CAOA,QAQA,MACA,EAEA,SAAA,CACA,wBAAA,CAOA,MANA,CACA,OAAA,+BACA,KAAA,6BACA,KAAA,4BACA,EAEA,KAAA,cAAA,CACA,EAEA,oBAAA,CACA,OAAAC,EAAAA,kBAAA,CAAA,KAAA,KAAA,KAAA,aAAA,KAAA,UAAA,CAAA,CACA,CACA,CACA"}

package/dist/vue2/lib/contact-row/contact-row.js

@@ -1,15 +1,15 @@
 import { safeConcatStrings as r } from "../../common/utils/index.js";
 import { DtIconUser as s } from "@dialpad/dialtone-icons/vue2";
 import { n } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
-import o from "../avatar/avatar.js";
+import o from "../emoji-text-wrapper/emoji-text-wrapper.js";
 import c from "../general-row/general-row.js";
-import l from "../emoji-text-wrapper/emoji-text-wrapper.js";
+import l from "../avatar/avatar.js";
 const i = {
   name: "DtRecipeContactRow",
   components: {
-    DtAvatar: o,
+    DtAvatar: l,
     DtRecipeGeneralRow: c,
-    DtEmojiTextWrapper: l,
+    DtEmojiTextWrapper: o,
     DtIconUser: s
   },
   inheritAttrs: !1,

package/dist/vue2/lib/datepicker/datepicker.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@dialpad/dialtone-icons/vue2"),n=require("date-fns"),c=require("./utils.cjs"),l=require("./datepicker-constants.cjs"),f=require("../../localization/index.cjs"),h=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),_=require("../button/button.cjs"),p=require("../tooltip/tooltip.cjs"),D=require("../stack/stack.cjs"),y=require("../../common/utils/index.cjs"),k={name:"DtDatepickerMonthYearPicker",components:{DtButton:_.default,DtTooltip:p.default,DtStack:D.default,DtIconChevronLeft:o.DtIconChevronLeft,DtIconChevronsLeft:o.DtIconChevronsLeft,DtIconChevronRight:o.DtIconChevronRight,DtIconChevronsRight:o.DtIconChevronsRight},props:{selectedDate:{type:Date,required:!0}},emits:["calendar-days","focus-first-day","focus-last-day","close-datepicker"],data(){return{selectMonth:n.getMonth(this.selectedDate),selectYear:n.getYear(this.selectedDate),highlightedDay:null,focusPicker:0,focusRefs:[],refNames:["prevYearButtonRef","prevMonthButtonRef","nextMonthButtonRef","nextYearButtonRef"],i18n:new f.DialtoneLocalization}},computed:{calendarDays(){return c.getCalendarDays(this.selectMonth,this.selectYear,this.highlightedDay)},formattedMonth(){return e=>c.formatMonth(e,l.INTL_MONTH_FORMAT,this.i18n.currentLocale)},previousYearAriaLabel(){return`${this.i18n.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${this.i18n.$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR")} ${this.selectYear-1}`},previousMonthAriaLabel(){return`${this.i18n.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${this.i18n.$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH")} ${this.formattedMonth(this.selectMonth-1)}`},nextYearAriaLabel(){return`${this.i18n.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${this.i18n.$t("DIALTONE_DATEPICKER_NEXT_YEAR")} ${this.selectYear+1}`},nextMonthAriaLabel(){return`${this.i18n.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${this.i18n.$t("DIALTONE_DATEPICKER_NEXT_MONTH")} ${this.formattedMonth(this.selectMonth+1)}`}},watch:{selectMonth:{handler(){this.highlightDay(),this.$emit("calendar-days",this.calendarDays)},immediate:!0},selectYear:{handler(){this.highlightDay(),this.$emit("calendar-days",this.calendarDays)},immediate:!0}},mounted(){this.setButtonsRef(),this.focusMonthYearPicker()},methods:{setButtonsRef(){this.focusRefs=this.refNames.map(e=>this.$refs[e])},focusMonthYearPicker(){this.focusPicker=0,this.focusRefs[0].$el.focus()},handleKeyDown(e){switch(e.key){case"ArrowLeft":e.preventDefault(),this.focusPicker===0?(this.focusPicker=3,this.focusRefs[this.focusPicker].$el.focus()):(this.focusPicker--,this.focusRefs[this.focusPicker].$el.focus());break;case"ArrowRight":e.preventDefault(),this.focusPicker===3?(this.focusPicker=0,this.focusRefs[this.focusPicker].$el.focus()):(this.focusPicker++,this.focusRefs[this.focusPicker].$el.focus());break;case"ArrowDown":e.preventDefault(),this.$emit("focus-first-day");break;case"Tab":e.preventDefault(),this.$emit("focus-first-day");break;case"Escape":this.$emit("close-datepicker");break}},highlightDay(){const e=n.getYear(this.selectedDate),t=n.getMonth(this.selectedDate);e!==this.selectYear||t!==this.selectMonth?this.highlightedDay=null:this.highlightedDay=n.getDate(this.selectedDate)},changeMonth(e){(this.selectMonth===0&&e===-1||this.selectMonth===11&&e===1)&&(this.selectYear+=e);const t=n.set(this.selectedDate,{month:this.selectMonth,year:this.selectYear}),s=e===1?n.addMonths(t,1):n.subMonths(t,1);this.selectMonth=n.getMonth(s)},changeYear(e){this.selectYear=this.selectYear+e},goToNextMonth(){this.changeMonth(1)},goToPrevMonth(){this.changeMonth(-1)}}};var m=function(){var t=this,s=t._self._c;return s("dt-stack",{staticClass:"d-datepicker__month-year",attrs:{direction:"row",gap:"300"}},[s("dt-stack",{staticClass:"d-datepicker__nav",attrs:{as:"nav",direction:"row",gap:"200"}},[s("dt-tooltip",{attrs:{"fallback-placements":["top-start","auto"],message:t.i18n.$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR"),placement:"top"},scopedSlots:t._u([{key:"anchor",fn:function(){return[s("dt-button",{ref:t.refNames[0],staticClass:"d-datepicker__nav-btn",attrs:{id:"prevYearButton","aria-label":t.previousYearAriaLabel,circle:!0,importance:"clear",kind:"muted",size:"xs",type:"button"},on:{click:function(a){return t.changeYear(-1)},keydown:function(a){return t.handleKeyDown(a)}}},[s("dt-icon-chevrons-left",{attrs:{size:"200"}})],1)]},proxy:!0}])}),s("dt-tooltip",{attrs:{"fallback-placements":["top-start","auto"],message:t.i18n.$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH"),placement:"top"},scopedSlots:t._u([{key:"anchor",fn:function(){return[s("dt-button",{ref:t.refNames[1],staticClass:"d-datepicker__nav-btn",attrs:{id:"prevMonthButton","aria-label":t.previousMonthAriaLabel,circle:!0,importance:"clear",kind:"muted",size:"xs",type:"button"},on:{click:function(a){return t.changeMonth(-1)},keydown:function(a){return t.handleKeyDown(a)}}},[s("dt-icon-chevron-left",{attrs:{size:"200"}})],1)]},proxy:!0}])})],1),s("div",{staticClass:"d-datepicker__month-year-title",attrs:{id:"calendar-heading"}},[t._v(" "+t._s(t.formattedMonth(t.selectMonth))+" "+t._s(t.selectYear)+" ")]),s("dt-stack",{staticClass:"d-datepicker__nav",attrs:{as:"nav",direction:"row",gap:"200"}},[s("dt-tooltip",{attrs:{"fallback-placements":["top-end","auto"],message:t.i18n.$t("DIALTONE_DATEPICKER_NEXT_MONTH"),placement:"top"},scopedSlots:t._u([{key:"anchor",fn:function(){return[s("dt-button",{ref:t.refNames[2],staticClass:"d-datepicker__nav-btn",attrs:{id:"nextMonthButton","aria-label":t.nextMonthAriaLabel,circle:!0,importance:"clear",kind:"muted",size:"xs",type:"button"},on:{click:function(a){return t.changeMonth(1)},keydown:function(a){return t.handleKeyDown(a)}}},[s("dt-icon-chevron-right",{attrs:{size:"200"}})],1)]},proxy:!0}])}),s("dt-tooltip",{attrs:{"fallback-placements":["top-end","auto"],message:t.i18n.$t("DIALTONE_DATEPICKER_NEXT_YEAR"),placement:"top"},scopedSlots:t._u([{key:"anchor",fn:function(){return[s("dt-button",{ref:t.refNames[3],staticClass:"d-datepicker__nav-btn",attrs:{id:"nextYearButton","aria-label":t.nextYearAriaLabel,circle:!0,importance:"clear",kind:"muted",size:"xs",type:"button"},on:{click:function(a){return t.changeYear(1)},keydown:function(a){return t.handleKeyDown(a)}}},[s("dt-icon-chevrons-right",{attrs:{size:"200"}})],1)]},proxy:!0}])})],1)],1)},$=[],v=h.n(k,m,$);const R=v.exports,b={name:"DtDatepickerCalendar",components:{DtButton:_.default},props:{calendarDays:{type:Array,required:!0}},emits:["select-date","focus-month-year-picker","close-datepicker"],data(){return{selectedDay:null,focusDay:0,daysRef:[],i18n:new f.DialtoneLocalization}},computed:{weekDays(){return c.getWeekDayNames(this.i18n.currentLocale,l.WEEK_START)}},watch:{calendarDays(){this.focusDay=0,this.selectedDay=null,this.daysRef=[],this.$nextTick(()=>{this.daysRef=[],this.setDayRef()})}},methods:{dayAriaLabel(e){return this.i18n.$t("DIALTONE_DATEPICKER_SELECT_DAY")+` ${c.formatDate(e.value,l.INTL_MONTH_FORMAT,this.i18n.currentLocale)}`},setDayRef(){this.calendarDays.forEach((e,t)=>{e.days.forEach((s,a)=>{const i=`buttonRef_${t}_${a}`,r=this.$refs[i];r&&s.currentMonth&&this.daysRef.push({el:r[0],day:s})})})},handleKeyDown(e){switch(e.key){case"ArrowUp":e.preventDefault(),this.focusDay-=7;try{this.daysRef[this.focusDay].el.$el.focus()}catch{const t=c.calculatePrevFocusDate(this.daysRef[this.focusDay+7].day.value);this.$emit("go-to-prev-month"),this.$nextTick(()=>{this.setDayRef(),this.daysRef[t-1].el.$el.focus(),this.focusDay+=t-1})}break;case"ArrowDown":e.preventDefault(),this.focusDay+=7;try{this.daysRef[this.focusDay].el.$el.focus()}catch{const t=c.calculateNextFocusDate(this.daysRef[this.focusDay-7].day.value);this.$emit("go-to-next-month"),this.$nextTick(()=>{this.setDayRef(),this.daysRef[t-1].el.$el.focus(),this.focusDay+=t-1})}break;case"ArrowLeft":e.preventDefault(),this.focusDay>0?(this.focusDay-=1,this.daysRef[this.focusDay].el.$el.focus()):(this.$emit("go-to-prev-month"),this.$nextTick(()=>{this.focusLastDay()}));break;case"ArrowRight":e.preventDefault(),this.focusDay<this.daysRef.length-1?(this.focusDay+=1,this.daysRef[this.focusDay].el.$el.focus()):(this.$emit("go-to-next-month"),this.$nextTick(()=>{this.focusFirstDay()}));break;case"Tab":e.preventDefault(),this.$emit("focus-month-year-picker");break;case"Escape":this.$emit("close-datepicker");break}},focusFirstDay(){this.focusDay=0,this.$nextTick(()=>{this.daysRef[this.focusDay].el.$el.focus()})},focusLastDay(){this.$nextTick(()=>{this.focusDay=this.daysRef.length-1,this.daysRef[this.focusDay].el.$el.focus()})},selectDay(e){e.currentMonth&&(this.selectedDay=e.text,this.$emit("select-date",e.value))}}};var g=function(){var t=this,s=t._self._c;return s("table",{staticClass:"d-datepicker__calendar",attrs:{"aria-labelledby":"calendar-heading"}},[s("thead",[s("tr",t._l(t.weekDays,function(a){return s("th",{key:a,staticClass:"d-datepicker__cell d-datepicker__cell--header",attrs:{scope:"col"}},[s("span",{staticClass:"d-datepicker__weekday",attrs:{title:a,"aria-label":a}},[t._v(" "+t._s(a))])])}),0)]),s("tbody",t._l(t.calendarDays,function(a,i){return s("tr",{key:i},t._l(a.days,function(r,u){return s("td",{key:i+u,staticClass:"d-datepicker__cell",attrs:{role:"listbox"}},[s("dt-button",{ref:`buttonRef_${i}_${u}`,refInFor:!0,staticClass:"d-datepicker__day",class:{"d-datepicker__day--disabled":!r.currentMonth,"d-datepicker__day--selected":t.selectedDay?r.text===t.selectedDay&&r.currentMonth:r.selected},attrs:{circle:!0,size:"sm",importance:"clear",disabled:!r.currentMonth,type:"button","aria-selected":t.selectedDay?r.text===t.selectedDay&&r.currentMonth:r.selected,"aria-label":t.dayAriaLabel(r),role:"option"},on:{click:function(d){return t.selectDay(r)},keydown:function(d){return t.handleKeyDown(d)}}},[t._v(" "+t._s(r.text)+" ")])],1)}),0)}),0)])},E=[],T=h.n(b,g,E);const M=T.exports,A={name:"DtDatepicker",components:{DtStack:D.default,MonthYearPicker:R,Calendar:M},props:{selectedDate:{type:Date,default:()=>new Date}},emits:["selected-date","close-datepicker"],data(){return{calendarDays:[]}},mounted(){y.warnIfUnmounted(this.$el,this.$options.name)},methods:{updateCalendarDays(e){this.calendarDays=e}}};var C=function(){var t=this,s=t._self._c;return s("dt-stack",{staticClass:"d-datepicker",attrs:{gap:"400"}},[s("div",{staticClass:"d-datepicker__hd"},[s("month-year-picker",{ref:"monthYearPicker",attrs:{"selected-date":t.selectedDate},on:{"calendar-days":t.updateCalendarDays,"focus-first-day":function(a){return t.$refs.calendar.focusFirstDay()},"focus-last-day":function(a){return t.$refs.calendar.focusLastDay()},"close-datepicker":function(a){return t.$emit("close-datepicker")}}})],1),s("div",{staticClass:"d-datepicker__bd"},[s("calendar",{ref:"calendar",attrs:{"calendar-days":t.calendarDays},on:{"select-date":function(a){return t.$emit("selected-date",a)},"focus-month-year-picker":function(a){return t.$refs.monthYearPicker.focusMonthYearPicker()},"close-datepicker":function(a){return t.$emit("close-datepicker")},"go-to-next-month":function(a){return t.$refs.monthYearPicker.goToNextMonth()},"go-to-prev-month":function(a){return t.$refs.monthYearPicker.goToPrevMonth()}}})],1)])},I=[],P=h.n(A,C,I);const L=P.exports;exports.default=L;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@dialpad/dialtone-icons/vue2"),n=require("date-fns"),c=require("./utils.cjs"),l=require("./datepicker-constants.cjs"),f=require("../../localization/index.cjs"),h=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),_=require("../stack/stack.cjs"),p=require("../tooltip/tooltip.cjs"),D=require("../button/button.cjs"),y=require("../../common/utils/index.cjs"),k={name:"DtDatepickerMonthYearPicker",components:{DtButton:D.default,DtTooltip:p.default,DtStack:_.default,DtIconChevronLeft:o.DtIconChevronLeft,DtIconChevronsLeft:o.DtIconChevronsLeft,DtIconChevronRight:o.DtIconChevronRight,DtIconChevronsRight:o.DtIconChevronsRight},props:{selectedDate:{type:Date,required:!0}},emits:["calendar-days","focus-first-day","focus-last-day","close-datepicker"],data(){return{selectMonth:n.getMonth(this.selectedDate),selectYear:n.getYear(this.selectedDate),highlightedDay:null,focusPicker:0,focusRefs:[],refNames:["prevYearButtonRef","prevMonthButtonRef","nextMonthButtonRef","nextYearButtonRef"],i18n:new f.DialtoneLocalization}},computed:{calendarDays(){return c.getCalendarDays(this.selectMonth,this.selectYear,this.highlightedDay)},formattedMonth(){return e=>c.formatMonth(e,l.INTL_MONTH_FORMAT,this.i18n.currentLocale)},previousYearAriaLabel(){return`${this.i18n.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${this.i18n.$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR")} ${this.selectYear-1}`},previousMonthAriaLabel(){return`${this.i18n.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${this.i18n.$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH")} ${this.formattedMonth(this.selectMonth-1)}`},nextYearAriaLabel(){return`${this.i18n.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${this.i18n.$t("DIALTONE_DATEPICKER_NEXT_YEAR")} ${this.selectYear+1}`},nextMonthAriaLabel(){return`${this.i18n.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${this.i18n.$t("DIALTONE_DATEPICKER_NEXT_MONTH")} ${this.formattedMonth(this.selectMonth+1)}`}},watch:{selectMonth:{handler(){this.highlightDay(),this.$emit("calendar-days",this.calendarDays)},immediate:!0},selectYear:{handler(){this.highlightDay(),this.$emit("calendar-days",this.calendarDays)},immediate:!0}},mounted(){this.setButtonsRef(),this.focusMonthYearPicker()},methods:{setButtonsRef(){this.focusRefs=this.refNames.map(e=>this.$refs[e])},focusMonthYearPicker(){this.focusPicker=0,this.focusRefs[0].$el.focus()},handleKeyDown(e){switch(e.key){case"ArrowLeft":e.preventDefault(),this.focusPicker===0?(this.focusPicker=3,this.focusRefs[this.focusPicker].$el.focus()):(this.focusPicker--,this.focusRefs[this.focusPicker].$el.focus());break;case"ArrowRight":e.preventDefault(),this.focusPicker===3?(this.focusPicker=0,this.focusRefs[this.focusPicker].$el.focus()):(this.focusPicker++,this.focusRefs[this.focusPicker].$el.focus());break;case"ArrowDown":e.preventDefault(),this.$emit("focus-first-day");break;case"Tab":e.preventDefault(),this.$emit("focus-first-day");break;case"Escape":this.$emit("close-datepicker");break}},highlightDay(){const e=n.getYear(this.selectedDate),t=n.getMonth(this.selectedDate);e!==this.selectYear||t!==this.selectMonth?this.highlightedDay=null:this.highlightedDay=n.getDate(this.selectedDate)},changeMonth(e){(this.selectMonth===0&&e===-1||this.selectMonth===11&&e===1)&&(this.selectYear+=e);const t=n.set(this.selectedDate,{month:this.selectMonth,year:this.selectYear}),s=e===1?n.addMonths(t,1):n.subMonths(t,1);this.selectMonth=n.getMonth(s)},changeYear(e){this.selectYear=this.selectYear+e},goToNextMonth(){this.changeMonth(1)},goToPrevMonth(){this.changeMonth(-1)}}};var m=function(){var t=this,s=t._self._c;return s("dt-stack",{staticClass:"d-datepicker__month-year",attrs:{direction:"row",gap:"300"}},[s("dt-stack",{staticClass:"d-datepicker__nav",attrs:{as:"nav",direction:"row",gap:"200"}},[s("dt-tooltip",{attrs:{"fallback-placements":["top-start","auto"],message:t.i18n.$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR"),placement:"top"},scopedSlots:t._u([{key:"anchor",fn:function(){return[s("dt-button",{ref:t.refNames[0],staticClass:"d-datepicker__nav-btn",attrs:{id:"prevYearButton","aria-label":t.previousYearAriaLabel,circle:!0,importance:"clear",kind:"muted",size:"xs",type:"button"},on:{click:function(a){return t.changeYear(-1)},keydown:function(a){return t.handleKeyDown(a)}}},[s("dt-icon-chevrons-left",{attrs:{size:"200"}})],1)]},proxy:!0}])}),s("dt-tooltip",{attrs:{"fallback-placements":["top-start","auto"],message:t.i18n.$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH"),placement:"top"},scopedSlots:t._u([{key:"anchor",fn:function(){return[s("dt-button",{ref:t.refNames[1],staticClass:"d-datepicker__nav-btn",attrs:{id:"prevMonthButton","aria-label":t.previousMonthAriaLabel,circle:!0,importance:"clear",kind:"muted",size:"xs",type:"button"},on:{click:function(a){return t.changeMonth(-1)},keydown:function(a){return t.handleKeyDown(a)}}},[s("dt-icon-chevron-left",{attrs:{size:"200"}})],1)]},proxy:!0}])})],1),s("div",{staticClass:"d-datepicker__month-year-title",attrs:{id:"calendar-heading"}},[t._v(" "+t._s(t.formattedMonth(t.selectMonth))+" "+t._s(t.selectYear)+" ")]),s("dt-stack",{staticClass:"d-datepicker__nav",attrs:{as:"nav",direction:"row",gap:"200"}},[s("dt-tooltip",{attrs:{"fallback-placements":["top-end","auto"],message:t.i18n.$t("DIALTONE_DATEPICKER_NEXT_MONTH"),placement:"top"},scopedSlots:t._u([{key:"anchor",fn:function(){return[s("dt-button",{ref:t.refNames[2],staticClass:"d-datepicker__nav-btn",attrs:{id:"nextMonthButton","aria-label":t.nextMonthAriaLabel,circle:!0,importance:"clear",kind:"muted",size:"xs",type:"button"},on:{click:function(a){return t.changeMonth(1)},keydown:function(a){return t.handleKeyDown(a)}}},[s("dt-icon-chevron-right",{attrs:{size:"200"}})],1)]},proxy:!0}])}),s("dt-tooltip",{attrs:{"fallback-placements":["top-end","auto"],message:t.i18n.$t("DIALTONE_DATEPICKER_NEXT_YEAR"),placement:"top"},scopedSlots:t._u([{key:"anchor",fn:function(){return[s("dt-button",{ref:t.refNames[3],staticClass:"d-datepicker__nav-btn",attrs:{id:"nextYearButton","aria-label":t.nextYearAriaLabel,circle:!0,importance:"clear",kind:"muted",size:"xs",type:"button"},on:{click:function(a){return t.changeYear(1)},keydown:function(a){return t.handleKeyDown(a)}}},[s("dt-icon-chevrons-right",{attrs:{size:"200"}})],1)]},proxy:!0}])})],1)],1)},$=[],v=h.n(k,m,$);const R=v.exports,b={name:"DtDatepickerCalendar",components:{DtButton:D.default},props:{calendarDays:{type:Array,required:!0}},emits:["select-date","focus-month-year-picker","close-datepicker"],data(){return{selectedDay:null,focusDay:0,daysRef:[],i18n:new f.DialtoneLocalization}},computed:{weekDays(){return c.getWeekDayNames(this.i18n.currentLocale,l.WEEK_START)}},watch:{calendarDays(){this.focusDay=0,this.selectedDay=null,this.daysRef=[],this.$nextTick(()=>{this.daysRef=[],this.setDayRef()})}},methods:{dayAriaLabel(e){return this.i18n.$t("DIALTONE_DATEPICKER_SELECT_DAY")+` ${c.formatDate(e.value,l.INTL_MONTH_FORMAT,this.i18n.currentLocale)}`},setDayRef(){this.calendarDays.forEach((e,t)=>{e.days.forEach((s,a)=>{const i=`buttonRef_${t}_${a}`,r=this.$refs[i];r&&s.currentMonth&&this.daysRef.push({el:r[0],day:s})})})},handleKeyDown(e){switch(e.key){case"ArrowUp":e.preventDefault(),this.focusDay-=7;try{this.daysRef[this.focusDay].el.$el.focus()}catch{const t=c.calculatePrevFocusDate(this.daysRef[this.focusDay+7].day.value);this.$emit("go-to-prev-month"),this.$nextTick(()=>{this.setDayRef(),this.daysRef[t-1].el.$el.focus(),this.focusDay+=t-1})}break;case"ArrowDown":e.preventDefault(),this.focusDay+=7;try{this.daysRef[this.focusDay].el.$el.focus()}catch{const t=c.calculateNextFocusDate(this.daysRef[this.focusDay-7].day.value);this.$emit("go-to-next-month"),this.$nextTick(()=>{this.setDayRef(),this.daysRef[t-1].el.$el.focus(),this.focusDay+=t-1})}break;case"ArrowLeft":e.preventDefault(),this.focusDay>0?(this.focusDay-=1,this.daysRef[this.focusDay].el.$el.focus()):(this.$emit("go-to-prev-month"),this.$nextTick(()=>{this.focusLastDay()}));break;case"ArrowRight":e.preventDefault(),this.focusDay<this.daysRef.length-1?(this.focusDay+=1,this.daysRef[this.focusDay].el.$el.focus()):(this.$emit("go-to-next-month"),this.$nextTick(()=>{this.focusFirstDay()}));break;case"Tab":e.preventDefault(),this.$emit("focus-month-year-picker");break;case"Escape":this.$emit("close-datepicker");break}},focusFirstDay(){this.focusDay=0,this.$nextTick(()=>{this.daysRef[this.focusDay].el.$el.focus()})},focusLastDay(){this.$nextTick(()=>{this.focusDay=this.daysRef.length-1,this.daysRef[this.focusDay].el.$el.focus()})},selectDay(e){e.currentMonth&&(this.selectedDay=e.text,this.$emit("select-date",e.value))}}};var g=function(){var t=this,s=t._self._c;return s("table",{staticClass:"d-datepicker__calendar",attrs:{"aria-labelledby":"calendar-heading"}},[s("thead",[s("tr",t._l(t.weekDays,function(a){return s("th",{key:a,staticClass:"d-datepicker__cell d-datepicker__cell--header",attrs:{scope:"col"}},[s("span",{staticClass:"d-datepicker__weekday",attrs:{title:a,"aria-label":a}},[t._v(" "+t._s(a))])])}),0)]),s("tbody",t._l(t.calendarDays,function(a,i){return s("tr",{key:i},t._l(a.days,function(r,u){return s("td",{key:i+u,staticClass:"d-datepicker__cell",attrs:{role:"listbox"}},[s("dt-button",{ref:`buttonRef_${i}_${u}`,refInFor:!0,staticClass:"d-datepicker__day",class:{"d-datepicker__day--disabled":!r.currentMonth,"d-datepicker__day--selected":t.selectedDay?r.text===t.selectedDay&&r.currentMonth:r.selected},attrs:{circle:!0,size:"sm",importance:"clear",disabled:!r.currentMonth,type:"button","aria-selected":t.selectedDay?r.text===t.selectedDay&&r.currentMonth:r.selected,"aria-label":t.dayAriaLabel(r),role:"option"},on:{click:function(d){return t.selectDay(r)},keydown:function(d){return t.handleKeyDown(d)}}},[t._v(" "+t._s(r.text)+" ")])],1)}),0)}),0)])},E=[],T=h.n(b,g,E);const M=T.exports,A={name:"DtDatepicker",components:{DtStack:_.default,MonthYearPicker:R,Calendar:M},props:{selectedDate:{type:Date,default:()=>new Date}},emits:["selected-date","close-datepicker"],data(){return{calendarDays:[]}},mounted(){y.warnIfUnmounted(this.$el,this.$options.name)},methods:{updateCalendarDays(e){this.calendarDays=e}}};var C=function(){var t=this,s=t._self._c;return s("dt-stack",{staticClass:"d-datepicker",attrs:{gap:"400"}},[s("div",{staticClass:"d-datepicker__hd"},[s("month-year-picker",{ref:"monthYearPicker",attrs:{"selected-date":t.selectedDate},on:{"calendar-days":t.updateCalendarDays,"focus-first-day":function(a){return t.$refs.calendar.focusFirstDay()},"focus-last-day":function(a){return t.$refs.calendar.focusLastDay()},"close-datepicker":function(a){return t.$emit("close-datepicker")}}})],1),s("div",{staticClass:"d-datepicker__bd"},[s("calendar",{ref:"calendar",attrs:{"calendar-days":t.calendarDays},on:{"select-date":function(a){return t.$emit("selected-date",a)},"focus-month-year-picker":function(a){return t.$refs.monthYearPicker.focusMonthYearPicker()},"close-datepicker":function(a){return t.$emit("close-datepicker")},"go-to-next-month":function(a){return t.$refs.monthYearPicker.goToNextMonth()},"go-to-prev-month":function(a){return t.$refs.monthYearPicker.goToPrevMonth()}}})],1)])},I=[],P=h.n(A,C,I);const L=P.exports;exports.default=L;
 //# sourceMappingURL=datepicker.cjs.map