@dialpad/dialtone 9.72.0 → 9.73.0-beta.1

package/dist/vue2/components/datepicker/modules/month-year-picker.vue.cjs

@@ -1,4 +1,5 @@
 "use strict";
+const vue2 = require("@dialpad/dialtone-icons/vue2");
 const dateFns = require("date-fns");
 const utils = require("../utils.cjs");
 const datepicker_constants = require("../datepicker_constants.cjs");
@@ -6,10 +7,17 @@ const stack = require("../../stack/stack.vue.cjs");
 const tooltip = require("../../tooltip/tooltip.vue.cjs");
 const button = require("../../button/button.vue.cjs");
 const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
-const icon = require("../../icon/icon.vue.cjs");
 const _sfc_main = {
   name: "DtDatepickerMonthYearPicker",
-  components: { DtButton: button, DtTooltip: tooltip, DtStack: stack, DtIcon: icon },
+  components: {
+    DtButton: button,
+    DtTooltip: tooltip,
+    DtStack: stack,
+    DtIconChevronLeft: vue2.DtIconChevronLeft,
+    DtIconChevronsLeft: vue2.DtIconChevronsLeft,
+    DtIconChevronRight: vue2.DtIconChevronRight,
+    DtIconChevronsRight: vue2.DtIconChevronsRight
+  },
   props: {
     locale: {
       type: String,
@@ -184,25 +192,25 @@ var _sfc_render = function render() {
       return _vm.changeYear(-1);
     }, "keydown": function($event) {
       return _vm.handleKeyDown($event);
-    } } }, [_c("dt-icon", { attrs: { "name": "chevrons-left", "size": "200" } })], 1)];
+    } } }, [_c("dt-icon-chevrons-left", { attrs: { "size": "200" } })], 1)];
   }, proxy: true }]) }), _c("dt-tooltip", { attrs: { "message": _vm.prevMonthLabel, "placement": "top", "fallback-placements": ["top-end", "auto"] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
     return [_c("dt-button", { ref: _vm.refNames[1], staticClass: "d-datepicker__nav-btn", attrs: { "id": "prevMonthButton", "size": "xs", "importance": "clear", "kind": "muted", "circle": true, "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.prevMonthLabel} ${_vm.formattedMonth(_vm.selectMonth - 1)}` }, on: { "click": function($event) {
       return _vm.changeMonth(-1);
     }, "keydown": function($event) {
       return _vm.handleKeyDown($event);
-    } } }, [_c("dt-icon", { attrs: { "name": "chevron-left", "size": "200" } })], 1)];
+    } } }, [_c("dt-icon-chevron-left", { attrs: { "size": "200" } })], 1)];
   }, proxy: true }]) })], 1), _c("div", { staticClass: "d-datepicker__month-year-title", attrs: { "id": "calendar-heading" } }, [_vm._v(" " + _vm._s(_vm.formattedMonth(_vm.selectMonth)) + " " + _vm._s(_vm.selectYear) + " ")]), _c("dt-stack", { staticClass: "d-datepicker__nav", attrs: { "as": "nav", "direction": "row", "gap": "200" } }, [_c("dt-tooltip", { attrs: { "message": _vm.nextMonthLabel, "placement": "top", "fallback-placements": ["top-start", "auto"] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
     return [_c("dt-button", { ref: _vm.refNames[2], staticClass: "d-datepicker__nav-btn", attrs: { "id": "nextMonthButton", "size": "xs", "importance": "clear", "circle": true, "kind": "muted", "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.nextMonthLabel} ${_vm.formattedMonth(_vm.selectMonth + 1)}` }, on: { "click": function($event) {
       return _vm.changeMonth(1);
     }, "keydown": function($event) {
       return _vm.handleKeyDown($event);
-    } } }, [_c("dt-icon", { attrs: { "name": "chevron-right", "size": "200" } })], 1)];
+    } } }, [_c("dt-icon-chevron-right", { attrs: { "size": "200" } })], 1)];
   }, proxy: true }]) }), _c("dt-tooltip", { attrs: { "message": _vm.nextYearLabel, "placement": "top", "fallback-placements": ["top-end", "auto"] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
     return [_c("dt-button", { ref: _vm.refNames[3], staticClass: "d-datepicker__nav-btn", attrs: { "id": "nextYearButton", "size": "xs", "kind": "muted", "circle": true, "importance": "clear", "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.nextYearLabel} ${_vm.selectYear + 1}` }, on: { "click": function($event) {
       return _vm.changeYear(1);
     }, "keydown": function($event) {
       return _vm.handleKeyDown($event);
-    } } }, [_c("dt-icon", { attrs: { "name": "chevrons-right", "size": "200" } })], 1)];
+    } } }, [_c("dt-icon-chevrons-right", { attrs: { "size": "200" } })], 1)];
   }, proxy: true }]) })], 1)], 1);
 };
 var _sfc_staticRenderFns = [];

package/dist/vue2/components/datepicker/modules/month-year-picker.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"month-year-picker.vue.cjs","sources":["../../../../components/datepicker/modules/month-year-picker.vue"],"sourcesContent":["<template>\n  <dt-stack\n    direction=\"row\"\n    class=\"d-datepicker__month-year\"\n    gap=\"300\"\n  >\n    <dt-stack\n      as=\"nav\"\n      direction=\"row\"\n      gap=\"200\"\n      class=\"d-datepicker__nav\"\n    >\n      <dt-tooltip\n        :message=\"prevYearLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-start', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevYearButton\"\n            :ref=\"refNames[0]\"\n            size=\"xs\"\n            importance=\"clear\"\n            kind=\"muted\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${prevYearLabel} ${selectYear - 1}`\"\n            @click=\"changeYear(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon\n              name=\"chevrons-left\"\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :message=\"prevMonthLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-end', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevMonthButton\"\n            :ref=\"refNames[1]\"\n            size=\"xs\"\n            importance=\"clear\"\n            kind=\"muted\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${prevMonthLabel} ${formattedMonth(selectMonth - 1)}`\"\n            @click=\"changeMonth(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon\n              name=\"chevron-left\"\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n    <div\n      id=\"calendar-heading\"\n      class=\"d-datepicker__month-year-title\"\n    >\n      {{ formattedMonth(selectMonth) }}\n\n      {{ selectYear }}\n    </div>\n    <dt-stack\n      as=\"nav\"\n      direction=\"row\"\n      gap=\"200\"\n      class=\"d-datepicker__nav\"\n    >\n      <dt-tooltip\n        :message=\"nextMonthLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-start', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextMonthButton\"\n            :ref=\"refNames[2]\"\n            size=\"xs\"\n            importance=\"clear\"\n            :circle=\"true\"\n            kind=\"muted\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${nextMonthLabel} ${formattedMonth(selectMonth + 1)}`\"\n            @click=\"changeMonth(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon\n              name=\"chevron-right\"\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :message=\"nextYearLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-end', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextYearButton\"\n            :ref=\"refNames[3]\"\n            size=\"xs\"\n            kind=\"muted\"\n            :circle=\"true\"\n            importance=\"clear\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${nextYearLabel} ${selectYear + 1}`\"\n            @click=\"changeYear(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon\n              name=\"chevrons-right\"\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n  </dt-stack>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { getYear, addMonths, getMonth, set, subMonths, getDate } from 'date-fns';\nimport { getCalendarDays, formatMonth } from '../utils';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants';\nimport DtStack from '@/components/stack/stack.vue';\nimport DtTooltip from '@/components/tooltip/tooltip.vue';\nimport DtButton from '@/components/button/button.vue';\n\nexport default {\n  name: 'DtDatepickerMonthYearPicker',\n\n  components: { DtButton, DtTooltip, DtStack, DtIcon },\n\n  props: {\n    locale: {\n      type: String,\n      required: true,\n    },\n\n    prevMonthLabel: {\n      type: String,\n      required: true,\n    },\n\n    nextMonthLabel: {\n      type: String,\n      required: true,\n    },\n\n    prevYearLabel: {\n      type: String,\n      required: true,\n    },\n\n    nextYearLabel: {\n      type: String,\n      required: true,\n    },\n\n    changeToLabel: {\n      type: String,\n      required: true,\n    },\n\n    selectedDate: {\n      type: Date,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Will retrieve the calendar days of the given date\n     *\n     * @event calendar-days\n     * @type {Array}\n     */\n    'calendar-days',\n\n    /**\n     * Will focus first day in calendar\n     *\n     * @event focus-first-day\n     */\n    'focus-first-day',\n\n    /**\n     * Will focus last day in calendar\n     *\n     * @event focus-last-day\n     */\n    'focus-last-day',\n\n    /**\n     * Will close the datepicker\n     *\n     * @event close-datepicker\n     */\n    'close-datepicker',\n  ],\n\n  data () {\n    return {\n      selectMonth: getMonth(this.selectedDate),\n      selectYear: getYear(this.selectedDate),\n      highlightedDay: null,\n      focusPicker: 0,\n      focusRefs: [],\n      refNames: ['prevYearButtonRef', 'prevMonthButtonRef', 'nextMonthButtonRef', 'nextYearButtonRef'],\n    };\n  },\n\n  computed: {\n    // Get days for the currently selected month and year and highlight the selected day\n    calendarDays () {\n      return getCalendarDays(this.selectMonth, this.selectYear, this.highlightedDay);\n    },\n\n    formattedMonth () {\n      return (month) => formatMonth(month, INTL_MONTH_FORMAT, this.locale);\n    },\n  },\n\n  watch: {\n    selectMonth: {\n      handler () {\n        this.highlightDay();\n        this.$emit('calendar-days', this.calendarDays);\n      },\n\n      immediate: true,\n    },\n\n    selectYear: {\n      handler () {\n        this.highlightDay();\n        this.$emit('calendar-days', this.calendarDays);\n      },\n\n      immediate: true,\n    },\n\n  },\n\n  mounted () {\n    this.setButtonsRef();\n    this.focusMonthYearPicker();\n  },\n\n  methods: {\n    setButtonsRef () {\n      this.focusRefs = this.refNames.map(refName => this.$refs[refName]);\n    },\n\n    focusMonthYearPicker () {\n      this.focusPicker = 0;\n      this.focusRefs[0].$el.focus();\n    },\n\n    handleKeyDown (event) {\n      switch (event.key) {\n        case 'ArrowLeft':\n          event.preventDefault();\n          if (this.focusPicker === 0) {\n            this.focusPicker = 3;\n            this.focusRefs[this.focusPicker].$el.focus();\n          } else {\n            this.focusPicker--;\n            this.focusRefs[this.focusPicker].$el.focus();\n          }\n          break;\n\n        case 'ArrowRight':\n          event.preventDefault();\n          if (this.focusPicker === 3) {\n            this.focusPicker = 0;\n            this.focusRefs[this.focusPicker].$el.focus();\n          } else {\n            this.focusPicker++;\n            this.focusRefs[this.focusPicker].$el.focus();\n          }\n          break;\n\n        case 'ArrowDown':\n          event.preventDefault();\n          this.$emit('focus-first-day');\n          break;\n\n        case 'Tab':\n          event.preventDefault();\n          this.$emit('focus-first-day');\n          break;\n\n        case 'Escape':\n          this.$emit('close-datepicker');\n          break;\n      }\n    },\n\n    highlightDay () {\n      const year = getYear(this.selectedDate);\n      const month = getMonth(this.selectedDate);\n\n      if (year !== this.selectYear || month !== this.selectMonth) {\n        this.highlightedDay = null;\n      } else {\n        this.highlightedDay = getDate(this.selectedDate);\n      }\n    },\n\n    changeMonth (value) {\n      // Adjust year when changing from January to December or vice versa\n      if ((this.selectMonth === 0 && value === -1) || (this.selectMonth === 11 && value === 1)) {\n        this.selectYear += value;\n      }\n\n      // Calculate the new date by adding or subtracting months\n      const initialDate = set(this.selectedDate, { month: this.selectMonth, year: this.selectYear });\n      const newDate = value === 1 ? addMonths(initialDate, 1) : subMonths(initialDate, 1);\n\n      // Update the selected month\n      this.selectMonth = getMonth(newDate);\n    },\n\n    changeYear (value) {\n      this.selectYear = this.selectYear + value;\n    },\n\n    goToNextMonth () {\n      this.changeMonth(1);\n    },\n\n    goToPrevMonth () {\n      this.changeMonth(-1);\n    },\n  },\n};\n</script>\n"],"names":["DtButton","DtTooltip","DtStack","DtIcon","getMonth","getYear","getCalendarDays","formatMonth","INTL_MONTH_FORMAT","getDate","set","addMonths","subMonths"],"mappings":"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"}
+{"version":3,"file":"month-year-picker.vue.cjs","sources":["../../../../components/datepicker/modules/month-year-picker.vue"],"sourcesContent":["<template>\n  <dt-stack\n    direction=\"row\"\n    class=\"d-datepicker__month-year\"\n    gap=\"300\"\n  >\n    <dt-stack\n      as=\"nav\"\n      direction=\"row\"\n      gap=\"200\"\n      class=\"d-datepicker__nav\"\n    >\n      <dt-tooltip\n        :message=\"prevYearLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-start', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevYearButton\"\n            :ref=\"refNames[0]\"\n            size=\"xs\"\n            importance=\"clear\"\n            kind=\"muted\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${prevYearLabel} ${selectYear - 1}`\"\n            @click=\"changeYear(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevrons-left\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :message=\"prevMonthLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-end', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevMonthButton\"\n            :ref=\"refNames[1]\"\n            size=\"xs\"\n            importance=\"clear\"\n            kind=\"muted\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${prevMonthLabel} ${formattedMonth(selectMonth - 1)}`\"\n            @click=\"changeMonth(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevron-left\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n    <div\n      id=\"calendar-heading\"\n      class=\"d-datepicker__month-year-title\"\n    >\n      {{ formattedMonth(selectMonth) }}\n\n      {{ selectYear }}\n    </div>\n    <dt-stack\n      as=\"nav\"\n      direction=\"row\"\n      gap=\"200\"\n      class=\"d-datepicker__nav\"\n    >\n      <dt-tooltip\n        :message=\"nextMonthLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-start', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextMonthButton\"\n            :ref=\"refNames[2]\"\n            size=\"xs\"\n            importance=\"clear\"\n            :circle=\"true\"\n            kind=\"muted\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${nextMonthLabel} ${formattedMonth(selectMonth + 1)}`\"\n            @click=\"changeMonth(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevron-right\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :message=\"nextYearLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-end', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextYearButton\"\n            :ref=\"refNames[3]\"\n            size=\"xs\"\n            kind=\"muted\"\n            :circle=\"true\"\n            importance=\"clear\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${nextYearLabel} ${selectYear + 1}`\"\n            @click=\"changeYear(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevrons-right\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n  </dt-stack>\n</template>\n\n<script>\nimport { DtIconChevronLeft, DtIconChevronsLeft, DtIconChevronRight, DtIconChevronsRight } from '@dialpad/dialtone-icons/vue2';\nimport { getYear, addMonths, getMonth, set, subMonths, getDate } from 'date-fns';\nimport { getCalendarDays, formatMonth } from '../utils';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants';\nimport DtStack from '@/components/stack/stack.vue';\nimport DtTooltip from '@/components/tooltip/tooltip.vue';\nimport DtButton from '@/components/button/button.vue';\n\nexport default {\n  name: 'DtDatepickerMonthYearPicker',\n\n  components: {\n    DtButton,\n    DtTooltip,\n    DtStack,\n    DtIconChevronLeft,\n    DtIconChevronsLeft,\n    DtIconChevronRight,\n    DtIconChevronsRight,\n  },\n\n  props: {\n    locale: {\n      type: String,\n      required: true,\n    },\n\n    prevMonthLabel: {\n      type: String,\n      required: true,\n    },\n\n    nextMonthLabel: {\n      type: String,\n      required: true,\n    },\n\n    prevYearLabel: {\n      type: String,\n      required: true,\n    },\n\n    nextYearLabel: {\n      type: String,\n      required: true,\n    },\n\n    changeToLabel: {\n      type: String,\n      required: true,\n    },\n\n    selectedDate: {\n      type: Date,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Will retrieve the calendar days of the given date\n     *\n     * @event calendar-days\n     * @type {Array}\n     */\n    'calendar-days',\n\n    /**\n     * Will focus first day in calendar\n     *\n     * @event focus-first-day\n     */\n    'focus-first-day',\n\n    /**\n     * Will focus last day in calendar\n     *\n     * @event focus-last-day\n     */\n    'focus-last-day',\n\n    /**\n     * Will close the datepicker\n     *\n     * @event close-datepicker\n     */\n    'close-datepicker',\n  ],\n\n  data () {\n    return {\n      selectMonth: getMonth(this.selectedDate),\n      selectYear: getYear(this.selectedDate),\n      highlightedDay: null,\n      focusPicker: 0,\n      focusRefs: [],\n      refNames: ['prevYearButtonRef', 'prevMonthButtonRef', 'nextMonthButtonRef', 'nextYearButtonRef'],\n    };\n  },\n\n  computed: {\n    // Get days for the currently selected month and year and highlight the selected day\n    calendarDays () {\n      return getCalendarDays(this.selectMonth, this.selectYear, this.highlightedDay);\n    },\n\n    formattedMonth () {\n      return (month) => formatMonth(month, INTL_MONTH_FORMAT, this.locale);\n    },\n  },\n\n  watch: {\n    selectMonth: {\n      handler () {\n        this.highlightDay();\n        this.$emit('calendar-days', this.calendarDays);\n      },\n\n      immediate: true,\n    },\n\n    selectYear: {\n      handler () {\n        this.highlightDay();\n        this.$emit('calendar-days', this.calendarDays);\n      },\n\n      immediate: true,\n    },\n\n  },\n\n  mounted () {\n    this.setButtonsRef();\n    this.focusMonthYearPicker();\n  },\n\n  methods: {\n    setButtonsRef () {\n      this.focusRefs = this.refNames.map(refName => this.$refs[refName]);\n    },\n\n    focusMonthYearPicker () {\n      this.focusPicker = 0;\n      this.focusRefs[0].$el.focus();\n    },\n\n    handleKeyDown (event) {\n      switch (event.key) {\n        case 'ArrowLeft':\n          event.preventDefault();\n          if (this.focusPicker === 0) {\n            this.focusPicker = 3;\n            this.focusRefs[this.focusPicker].$el.focus();\n          } else {\n            this.focusPicker--;\n            this.focusRefs[this.focusPicker].$el.focus();\n          }\n          break;\n\n        case 'ArrowRight':\n          event.preventDefault();\n          if (this.focusPicker === 3) {\n            this.focusPicker = 0;\n            this.focusRefs[this.focusPicker].$el.focus();\n          } else {\n            this.focusPicker++;\n            this.focusRefs[this.focusPicker].$el.focus();\n          }\n          break;\n\n        case 'ArrowDown':\n          event.preventDefault();\n          this.$emit('focus-first-day');\n          break;\n\n        case 'Tab':\n          event.preventDefault();\n          this.$emit('focus-first-day');\n          break;\n\n        case 'Escape':\n          this.$emit('close-datepicker');\n          break;\n      }\n    },\n\n    highlightDay () {\n      const year = getYear(this.selectedDate);\n      const month = getMonth(this.selectedDate);\n\n      if (year !== this.selectYear || month !== this.selectMonth) {\n        this.highlightedDay = null;\n      } else {\n        this.highlightedDay = getDate(this.selectedDate);\n      }\n    },\n\n    changeMonth (value) {\n      // Adjust year when changing from January to December or vice versa\n      if ((this.selectMonth === 0 && value === -1) || (this.selectMonth === 11 && value === 1)) {\n        this.selectYear += value;\n      }\n\n      // Calculate the new date by adding or subtracting months\n      const initialDate = set(this.selectedDate, { month: this.selectMonth, year: this.selectYear });\n      const newDate = value === 1 ? addMonths(initialDate, 1) : subMonths(initialDate, 1);\n\n      // Update the selected month\n      this.selectMonth = getMonth(newDate);\n    },\n\n    changeYear (value) {\n      this.selectYear = this.selectYear + value;\n    },\n\n    goToNextMonth () {\n      this.changeMonth(1);\n    },\n\n    goToPrevMonth () {\n      this.changeMonth(-1);\n    },\n  },\n};\n</script>\n"],"names":["DtButton","DtTooltip","DtStack","DtIconChevronLeft","DtIconChevronsLeft","DtIconChevronRight","DtIconChevronsRight","getMonth","getYear","getCalendarDays","formatMonth","INTL_MONTH_FORMAT","getDate","set","addMonths","subMonths"],"mappings":"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"}

package/dist/vue2/components/datepicker/modules/month-year-picker.vue.js

@@ -1,3 +1,4 @@
+import { DtIconChevronLeft, DtIconChevronsLeft, DtIconChevronRight, DtIconChevronsRight } from "@dialpad/dialtone-icons/vue2";
 import { getMonth, getYear, getDate, set, addMonths, subMonths } from "date-fns";
 import { getCalendarDays, formatMonth } from "../utils.js";
 import { INTL_MONTH_FORMAT } from "../datepicker_constants.js";
@@ -5,10 +6,17 @@ import DtStack from "../../stack/stack.vue.js";
 import DtTooltip from "../../tooltip/tooltip.vue.js";
 import DtButton from "../../button/button.vue.js";
 import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
-import DtIcon from "../../icon/icon.vue.js";
 const _sfc_main = {
   name: "DtDatepickerMonthYearPicker",
-  components: { DtButton, DtTooltip, DtStack, DtIcon },
+  components: {
+    DtButton,
+    DtTooltip,
+    DtStack,
+    DtIconChevronLeft,
+    DtIconChevronsLeft,
+    DtIconChevronRight,
+    DtIconChevronsRight
+  },
   props: {
     locale: {
       type: String,
@@ -183,25 +191,25 @@ var _sfc_render = function render() {
       return _vm.changeYear(-1);
     }, "keydown": function($event) {
       return _vm.handleKeyDown($event);
-    } } }, [_c("dt-icon", { attrs: { "name": "chevrons-left", "size": "200" } })], 1)];
+    } } }, [_c("dt-icon-chevrons-left", { attrs: { "size": "200" } })], 1)];
   }, proxy: true }]) }), _c("dt-tooltip", { attrs: { "message": _vm.prevMonthLabel, "placement": "top", "fallback-placements": ["top-end", "auto"] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
     return [_c("dt-button", { ref: _vm.refNames[1], staticClass: "d-datepicker__nav-btn", attrs: { "id": "prevMonthButton", "size": "xs", "importance": "clear", "kind": "muted", "circle": true, "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.prevMonthLabel} ${_vm.formattedMonth(_vm.selectMonth - 1)}` }, on: { "click": function($event) {
       return _vm.changeMonth(-1);
     }, "keydown": function($event) {
       return _vm.handleKeyDown($event);
-    } } }, [_c("dt-icon", { attrs: { "name": "chevron-left", "size": "200" } })], 1)];
+    } } }, [_c("dt-icon-chevron-left", { attrs: { "size": "200" } })], 1)];
   }, proxy: true }]) })], 1), _c("div", { staticClass: "d-datepicker__month-year-title", attrs: { "id": "calendar-heading" } }, [_vm._v(" " + _vm._s(_vm.formattedMonth(_vm.selectMonth)) + " " + _vm._s(_vm.selectYear) + " ")]), _c("dt-stack", { staticClass: "d-datepicker__nav", attrs: { "as": "nav", "direction": "row", "gap": "200" } }, [_c("dt-tooltip", { attrs: { "message": _vm.nextMonthLabel, "placement": "top", "fallback-placements": ["top-start", "auto"] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
     return [_c("dt-button", { ref: _vm.refNames[2], staticClass: "d-datepicker__nav-btn", attrs: { "id": "nextMonthButton", "size": "xs", "importance": "clear", "circle": true, "kind": "muted", "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.nextMonthLabel} ${_vm.formattedMonth(_vm.selectMonth + 1)}` }, on: { "click": function($event) {
       return _vm.changeMonth(1);
     }, "keydown": function($event) {
       return _vm.handleKeyDown($event);
-    } } }, [_c("dt-icon", { attrs: { "name": "chevron-right", "size": "200" } })], 1)];
+    } } }, [_c("dt-icon-chevron-right", { attrs: { "size": "200" } })], 1)];
   }, proxy: true }]) }), _c("dt-tooltip", { attrs: { "message": _vm.nextYearLabel, "placement": "top", "fallback-placements": ["top-end", "auto"] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
     return [_c("dt-button", { ref: _vm.refNames[3], staticClass: "d-datepicker__nav-btn", attrs: { "id": "nextYearButton", "size": "xs", "kind": "muted", "circle": true, "importance": "clear", "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.nextYearLabel} ${_vm.selectYear + 1}` }, on: { "click": function($event) {
       return _vm.changeYear(1);
     }, "keydown": function($event) {
       return _vm.handleKeyDown($event);
-    } } }, [_c("dt-icon", { attrs: { "name": "chevrons-right", "size": "200" } })], 1)];
+    } } }, [_c("dt-icon-chevrons-right", { attrs: { "size": "200" } })], 1)];
   }, proxy: true }]) })], 1)], 1);
 };
 var _sfc_staticRenderFns = [];

package/dist/vue2/components/datepicker/modules/month-year-picker.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"month-year-picker.vue.js","sources":["../../../../components/datepicker/modules/month-year-picker.vue"],"sourcesContent":["<template>\n  <dt-stack\n    direction=\"row\"\n    class=\"d-datepicker__month-year\"\n    gap=\"300\"\n  >\n    <dt-stack\n      as=\"nav\"\n      direction=\"row\"\n      gap=\"200\"\n      class=\"d-datepicker__nav\"\n    >\n      <dt-tooltip\n        :message=\"prevYearLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-start', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevYearButton\"\n            :ref=\"refNames[0]\"\n            size=\"xs\"\n            importance=\"clear\"\n            kind=\"muted\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${prevYearLabel} ${selectYear - 1}`\"\n            @click=\"changeYear(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon\n              name=\"chevrons-left\"\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :message=\"prevMonthLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-end', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevMonthButton\"\n            :ref=\"refNames[1]\"\n            size=\"xs\"\n            importance=\"clear\"\n            kind=\"muted\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${prevMonthLabel} ${formattedMonth(selectMonth - 1)}`\"\n            @click=\"changeMonth(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon\n              name=\"chevron-left\"\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n    <div\n      id=\"calendar-heading\"\n      class=\"d-datepicker__month-year-title\"\n    >\n      {{ formattedMonth(selectMonth) }}\n\n      {{ selectYear }}\n    </div>\n    <dt-stack\n      as=\"nav\"\n      direction=\"row\"\n      gap=\"200\"\n      class=\"d-datepicker__nav\"\n    >\n      <dt-tooltip\n        :message=\"nextMonthLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-start', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextMonthButton\"\n            :ref=\"refNames[2]\"\n            size=\"xs\"\n            importance=\"clear\"\n            :circle=\"true\"\n            kind=\"muted\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${nextMonthLabel} ${formattedMonth(selectMonth + 1)}`\"\n            @click=\"changeMonth(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon\n              name=\"chevron-right\"\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :message=\"nextYearLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-end', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextYearButton\"\n            :ref=\"refNames[3]\"\n            size=\"xs\"\n            kind=\"muted\"\n            :circle=\"true\"\n            importance=\"clear\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${nextYearLabel} ${selectYear + 1}`\"\n            @click=\"changeYear(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon\n              name=\"chevrons-right\"\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n  </dt-stack>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { getYear, addMonths, getMonth, set, subMonths, getDate } from 'date-fns';\nimport { getCalendarDays, formatMonth } from '../utils';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants';\nimport DtStack from '@/components/stack/stack.vue';\nimport DtTooltip from '@/components/tooltip/tooltip.vue';\nimport DtButton from '@/components/button/button.vue';\n\nexport default {\n  name: 'DtDatepickerMonthYearPicker',\n\n  components: { DtButton, DtTooltip, DtStack, DtIcon },\n\n  props: {\n    locale: {\n      type: String,\n      required: true,\n    },\n\n    prevMonthLabel: {\n      type: String,\n      required: true,\n    },\n\n    nextMonthLabel: {\n      type: String,\n      required: true,\n    },\n\n    prevYearLabel: {\n      type: String,\n      required: true,\n    },\n\n    nextYearLabel: {\n      type: String,\n      required: true,\n    },\n\n    changeToLabel: {\n      type: String,\n      required: true,\n    },\n\n    selectedDate: {\n      type: Date,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Will retrieve the calendar days of the given date\n     *\n     * @event calendar-days\n     * @type {Array}\n     */\n    'calendar-days',\n\n    /**\n     * Will focus first day in calendar\n     *\n     * @event focus-first-day\n     */\n    'focus-first-day',\n\n    /**\n     * Will focus last day in calendar\n     *\n     * @event focus-last-day\n     */\n    'focus-last-day',\n\n    /**\n     * Will close the datepicker\n     *\n     * @event close-datepicker\n     */\n    'close-datepicker',\n  ],\n\n  data () {\n    return {\n      selectMonth: getMonth(this.selectedDate),\n      selectYear: getYear(this.selectedDate),\n      highlightedDay: null,\n      focusPicker: 0,\n      focusRefs: [],\n      refNames: ['prevYearButtonRef', 'prevMonthButtonRef', 'nextMonthButtonRef', 'nextYearButtonRef'],\n    };\n  },\n\n  computed: {\n    // Get days for the currently selected month and year and highlight the selected day\n    calendarDays () {\n      return getCalendarDays(this.selectMonth, this.selectYear, this.highlightedDay);\n    },\n\n    formattedMonth () {\n      return (month) => formatMonth(month, INTL_MONTH_FORMAT, this.locale);\n    },\n  },\n\n  watch: {\n    selectMonth: {\n      handler () {\n        this.highlightDay();\n        this.$emit('calendar-days', this.calendarDays);\n      },\n\n      immediate: true,\n    },\n\n    selectYear: {\n      handler () {\n        this.highlightDay();\n        this.$emit('calendar-days', this.calendarDays);\n      },\n\n      immediate: true,\n    },\n\n  },\n\n  mounted () {\n    this.setButtonsRef();\n    this.focusMonthYearPicker();\n  },\n\n  methods: {\n    setButtonsRef () {\n      this.focusRefs = this.refNames.map(refName => this.$refs[refName]);\n    },\n\n    focusMonthYearPicker () {\n      this.focusPicker = 0;\n      this.focusRefs[0].$el.focus();\n    },\n\n    handleKeyDown (event) {\n      switch (event.key) {\n        case 'ArrowLeft':\n          event.preventDefault();\n          if (this.focusPicker === 0) {\n            this.focusPicker = 3;\n            this.focusRefs[this.focusPicker].$el.focus();\n          } else {\n            this.focusPicker--;\n            this.focusRefs[this.focusPicker].$el.focus();\n          }\n          break;\n\n        case 'ArrowRight':\n          event.preventDefault();\n          if (this.focusPicker === 3) {\n            this.focusPicker = 0;\n            this.focusRefs[this.focusPicker].$el.focus();\n          } else {\n            this.focusPicker++;\n            this.focusRefs[this.focusPicker].$el.focus();\n          }\n          break;\n\n        case 'ArrowDown':\n          event.preventDefault();\n          this.$emit('focus-first-day');\n          break;\n\n        case 'Tab':\n          event.preventDefault();\n          this.$emit('focus-first-day');\n          break;\n\n        case 'Escape':\n          this.$emit('close-datepicker');\n          break;\n      }\n    },\n\n    highlightDay () {\n      const year = getYear(this.selectedDate);\n      const month = getMonth(this.selectedDate);\n\n      if (year !== this.selectYear || month !== this.selectMonth) {\n        this.highlightedDay = null;\n      } else {\n        this.highlightedDay = getDate(this.selectedDate);\n      }\n    },\n\n    changeMonth (value) {\n      // Adjust year when changing from January to December or vice versa\n      if ((this.selectMonth === 0 && value === -1) || (this.selectMonth === 11 && value === 1)) {\n        this.selectYear += value;\n      }\n\n      // Calculate the new date by adding or subtracting months\n      const initialDate = set(this.selectedDate, { month: this.selectMonth, year: this.selectYear });\n      const newDate = value === 1 ? addMonths(initialDate, 1) : subMonths(initialDate, 1);\n\n      // Update the selected month\n      this.selectMonth = getMonth(newDate);\n    },\n\n    changeYear (value) {\n      this.selectYear = this.selectYear + value;\n    },\n\n    goToNextMonth () {\n      this.changeMonth(1);\n    },\n\n    goToPrevMonth () {\n      this.changeMonth(-1);\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"month-year-picker.vue.js","sources":["../../../../components/datepicker/modules/month-year-picker.vue"],"sourcesContent":["<template>\n  <dt-stack\n    direction=\"row\"\n    class=\"d-datepicker__month-year\"\n    gap=\"300\"\n  >\n    <dt-stack\n      as=\"nav\"\n      direction=\"row\"\n      gap=\"200\"\n      class=\"d-datepicker__nav\"\n    >\n      <dt-tooltip\n        :message=\"prevYearLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-start', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevYearButton\"\n            :ref=\"refNames[0]\"\n            size=\"xs\"\n            importance=\"clear\"\n            kind=\"muted\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${prevYearLabel} ${selectYear - 1}`\"\n            @click=\"changeYear(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevrons-left\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :message=\"prevMonthLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-end', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevMonthButton\"\n            :ref=\"refNames[1]\"\n            size=\"xs\"\n            importance=\"clear\"\n            kind=\"muted\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${prevMonthLabel} ${formattedMonth(selectMonth - 1)}`\"\n            @click=\"changeMonth(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevron-left\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n    <div\n      id=\"calendar-heading\"\n      class=\"d-datepicker__month-year-title\"\n    >\n      {{ formattedMonth(selectMonth) }}\n\n      {{ selectYear }}\n    </div>\n    <dt-stack\n      as=\"nav\"\n      direction=\"row\"\n      gap=\"200\"\n      class=\"d-datepicker__nav\"\n    >\n      <dt-tooltip\n        :message=\"nextMonthLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-start', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextMonthButton\"\n            :ref=\"refNames[2]\"\n            size=\"xs\"\n            importance=\"clear\"\n            :circle=\"true\"\n            kind=\"muted\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${nextMonthLabel} ${formattedMonth(selectMonth + 1)}`\"\n            @click=\"changeMonth(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevron-right\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :message=\"nextYearLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-end', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextYearButton\"\n            :ref=\"refNames[3]\"\n            size=\"xs\"\n            kind=\"muted\"\n            :circle=\"true\"\n            importance=\"clear\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${nextYearLabel} ${selectYear + 1}`\"\n            @click=\"changeYear(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevrons-right\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n  </dt-stack>\n</template>\n\n<script>\nimport { DtIconChevronLeft, DtIconChevronsLeft, DtIconChevronRight, DtIconChevronsRight } from '@dialpad/dialtone-icons/vue2';\nimport { getYear, addMonths, getMonth, set, subMonths, getDate } from 'date-fns';\nimport { getCalendarDays, formatMonth } from '../utils';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants';\nimport DtStack from '@/components/stack/stack.vue';\nimport DtTooltip from '@/components/tooltip/tooltip.vue';\nimport DtButton from '@/components/button/button.vue';\n\nexport default {\n  name: 'DtDatepickerMonthYearPicker',\n\n  components: {\n    DtButton,\n    DtTooltip,\n    DtStack,\n    DtIconChevronLeft,\n    DtIconChevronsLeft,\n    DtIconChevronRight,\n    DtIconChevronsRight,\n  },\n\n  props: {\n    locale: {\n      type: String,\n      required: true,\n    },\n\n    prevMonthLabel: {\n      type: String,\n      required: true,\n    },\n\n    nextMonthLabel: {\n      type: String,\n      required: true,\n    },\n\n    prevYearLabel: {\n      type: String,\n      required: true,\n    },\n\n    nextYearLabel: {\n      type: String,\n      required: true,\n    },\n\n    changeToLabel: {\n      type: String,\n      required: true,\n    },\n\n    selectedDate: {\n      type: Date,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Will retrieve the calendar days of the given date\n     *\n     * @event calendar-days\n     * @type {Array}\n     */\n    'calendar-days',\n\n    /**\n     * Will focus first day in calendar\n     *\n     * @event focus-first-day\n     */\n    'focus-first-day',\n\n    /**\n     * Will focus last day in calendar\n     *\n     * @event focus-last-day\n     */\n    'focus-last-day',\n\n    /**\n     * Will close the datepicker\n     *\n     * @event close-datepicker\n     */\n    'close-datepicker',\n  ],\n\n  data () {\n    return {\n      selectMonth: getMonth(this.selectedDate),\n      selectYear: getYear(this.selectedDate),\n      highlightedDay: null,\n      focusPicker: 0,\n      focusRefs: [],\n      refNames: ['prevYearButtonRef', 'prevMonthButtonRef', 'nextMonthButtonRef', 'nextYearButtonRef'],\n    };\n  },\n\n  computed: {\n    // Get days for the currently selected month and year and highlight the selected day\n    calendarDays () {\n      return getCalendarDays(this.selectMonth, this.selectYear, this.highlightedDay);\n    },\n\n    formattedMonth () {\n      return (month) => formatMonth(month, INTL_MONTH_FORMAT, this.locale);\n    },\n  },\n\n  watch: {\n    selectMonth: {\n      handler () {\n        this.highlightDay();\n        this.$emit('calendar-days', this.calendarDays);\n      },\n\n      immediate: true,\n    },\n\n    selectYear: {\n      handler () {\n        this.highlightDay();\n        this.$emit('calendar-days', this.calendarDays);\n      },\n\n      immediate: true,\n    },\n\n  },\n\n  mounted () {\n    this.setButtonsRef();\n    this.focusMonthYearPicker();\n  },\n\n  methods: {\n    setButtonsRef () {\n      this.focusRefs = this.refNames.map(refName => this.$refs[refName]);\n    },\n\n    focusMonthYearPicker () {\n      this.focusPicker = 0;\n      this.focusRefs[0].$el.focus();\n    },\n\n    handleKeyDown (event) {\n      switch (event.key) {\n        case 'ArrowLeft':\n          event.preventDefault();\n          if (this.focusPicker === 0) {\n            this.focusPicker = 3;\n            this.focusRefs[this.focusPicker].$el.focus();\n          } else {\n            this.focusPicker--;\n            this.focusRefs[this.focusPicker].$el.focus();\n          }\n          break;\n\n        case 'ArrowRight':\n          event.preventDefault();\n          if (this.focusPicker === 3) {\n            this.focusPicker = 0;\n            this.focusRefs[this.focusPicker].$el.focus();\n          } else {\n            this.focusPicker++;\n            this.focusRefs[this.focusPicker].$el.focus();\n          }\n          break;\n\n        case 'ArrowDown':\n          event.preventDefault();\n          this.$emit('focus-first-day');\n          break;\n\n        case 'Tab':\n          event.preventDefault();\n          this.$emit('focus-first-day');\n          break;\n\n        case 'Escape':\n          this.$emit('close-datepicker');\n          break;\n      }\n    },\n\n    highlightDay () {\n      const year = getYear(this.selectedDate);\n      const month = getMonth(this.selectedDate);\n\n      if (year !== this.selectYear || month !== this.selectMonth) {\n        this.highlightedDay = null;\n      } else {\n        this.highlightedDay = getDate(this.selectedDate);\n      }\n    },\n\n    changeMonth (value) {\n      // Adjust year when changing from January to December or vice versa\n      if ((this.selectMonth === 0 && value === -1) || (this.selectMonth === 11 && value === 1)) {\n        this.selectYear += value;\n      }\n\n      // Calculate the new date by adding or subtracting months\n      const initialDate = set(this.selectedDate, { month: this.selectMonth, year: this.selectYear });\n      const newDate = value === 1 ? addMonths(initialDate, 1) : subMonths(initialDate, 1);\n\n      // Update the selected month\n      this.selectMonth = getMonth(newDate);\n    },\n\n    changeYear (value) {\n      this.selectYear = this.selectYear + value;\n    },\n\n    goToNextMonth () {\n      this.changeMonth(1);\n    },\n\n    goToPrevMonth () {\n      this.changeMonth(-1);\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":"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"}

package/dist/vue2/components/emoji_picker/modules/emoji_search.vue.cjs

@@ -1,13 +1,14 @@
 "use strict";
+const vue2 = require("@dialpad/dialtone-icons/vue2");
 const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
 const input = require("../../input/input.vue.cjs");
-const icon = require("../../icon/icon.vue.cjs");
 const button = require("../../button/button.vue.cjs");
 const _sfc_main = {
   name: "EmojiSearch",
   components: {
     DtInput: input,
-    DtIcon: icon,
+    DtIconSearch: vue2.DtIconSearch,
+    DtIconXCircle: vue2.DtIconXCircle,
     DtButton: button
   },
   props: {
@@ -58,11 +59,11 @@ var _sfc_render = function render() {
     if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
     return _vm.selectFirstEmoji.apply(null, arguments);
   }] }, scopedSlots: _vm._u([{ key: "leftIcon", fn: function() {
-    return [_c("dt-icon", { attrs: { "name": "search", "size": "200" } })];
+    return [_c("dt-icon-search", { attrs: { "size": "200" } })];
   }, proxy: true }, _vm.modelValue.length > 0 ? { key: "rightIcon", fn: function() {
     return [_c("dt-button", { staticClass: "d-mrn4", attrs: { "importance": "clear", "size": "xs", "circle": "", "kind": "muted" }, on: { "click": _vm.clearSearch }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-      return [_c("dt-icon", { attrs: { "name": "close", "size": "200" } })];
-    }, proxy: true }], null, false, 1154370889) })];
+      return [_c("dt-icon-close", { attrs: { "size": "200" } })];
+    }, proxy: true }], null, false, 4156074325) })];
   }, proxy: true } : null], null, true) })], 1);
 };
 var _sfc_staticRenderFns = [];

package/dist/vue2/components/emoji_picker/modules/emoji_search.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"emoji_search.vue.cjs","sources":["../../../../components/emoji_picker/modules/emoji_search.vue"],"sourcesContent":["<template>\n  <div class=\"d-emoji-picker__search d-emoji-picker__alignment\">\n    <dt-input\n      id=\"searchInput\"\n      ref=\"searchInputRef\"\n      :placeholder=\"searchPlaceholderLabel\"\n      :value=\"modelValue\"\n      @input=\"updateModelValue\"\n      @keydown.up=\"focusTabset\"\n      @keydown.down.prevent=\"focusEmojiSelector\"\n      @keydown.enter=\"selectFirstEmoji\"\n    >\n      <template #leftIcon>\n        <dt-icon\n          name=\"search\"\n          size=\"200\"\n        />\n      </template>\n      <template\n        v-if=\"modelValue.length > 0\"\n        #rightIcon\n      >\n        <dt-button\n          importance=\"clear\"\n          size=\"xs\"\n          class=\"d-mrn4\"\n          circle\n          kind=\"muted\"\n          @click=\"clearSearch\"\n        >\n          <template #icon>\n            <dt-icon\n              name=\"close\"\n              size=\"200\"\n            />\n          </template>\n        </dt-button>\n      </template>\n    </dt-input>\n  </div>\n</template>\n\n<script>\nimport { DtInput } from '@/components/input';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'EmojiSearch',\n\n  components: {\n    DtInput,\n    DtIcon,\n    DtButton,\n  },\n\n  props: {\n    searchPlaceholderLabel: {\n      type: String,\n      required: true,\n    },\n\n    modelValue: {\n      type: String,\n      default: '',\n    },\n  },\n\n  mounted () {\n    this.focusSearchInput();\n  },\n\n  methods: {\n    updateModelValue (value) {\n      this.$emit('update:model-value', value);\n    },\n\n    focusEmojiSelector () {\n      this.$emit('focus-emoji-selector');\n    },\n\n    focusTabset () {\n      this.$emit('focus-tabset');\n    },\n\n    selectFirstEmoji () {\n      this.$emit('select-first-emoji');\n    },\n\n    clearSearch () {\n      this.$emit('update:model-value', '');\n      this.focusSearchInput();\n    },\n\n    focusSearchInput () {\n      this.$refs.searchInputRef.focus();\n    },\n  },\n};\n</script>\n"],"names":["DtInput","DtIcon","DtButton"],"mappings":";;;;;AA+CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,SAAAA;AAAAA,IACA,QAAAC;AAAAA,IACA,UAAAC;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,wBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,iBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,iBAAA,OAAA;AACA,WAAA,MAAA,sBAAA,KAAA;AAAA,IACA;AAAA,IAEA,qBAAA;AACA,WAAA,MAAA,sBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,MAAA,cAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,WAAA,MAAA,oBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,MAAA,sBAAA,EAAA;AACA,WAAA,iBAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,WAAA,MAAA,eAAA;IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"emoji_search.vue.cjs","sources":["../../../../components/emoji_picker/modules/emoji_search.vue"],"sourcesContent":["<template>\n  <div class=\"d-emoji-picker__search d-emoji-picker__alignment\">\n    <dt-input\n      id=\"searchInput\"\n      ref=\"searchInputRef\"\n      :placeholder=\"searchPlaceholderLabel\"\n      :value=\"modelValue\"\n      @input=\"updateModelValue\"\n      @keydown.up=\"focusTabset\"\n      @keydown.down.prevent=\"focusEmojiSelector\"\n      @keydown.enter=\"selectFirstEmoji\"\n    >\n      <template #leftIcon>\n        <dt-icon-search\n          size=\"200\"\n        />\n      </template>\n      <template\n        v-if=\"modelValue.length > 0\"\n        #rightIcon\n      >\n        <dt-button\n          importance=\"clear\"\n          size=\"xs\"\n          class=\"d-mrn4\"\n          circle\n          kind=\"muted\"\n          @click=\"clearSearch\"\n        >\n          <template #icon>\n            <dt-icon-close\n              size=\"200\"\n            />\n          </template>\n        </dt-button>\n      </template>\n    </dt-input>\n  </div>\n</template>\n\n<script>\nimport { DtIconSearch, DtIconXCircle } from '@dialpad/dialtone-icons/vue2';\nimport { DtInput } from '@/components/input';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'EmojiSearch',\n\n  components: {\n    DtInput,\n    DtIconSearch,\n    DtIconXCircle,\n    DtButton,\n  },\n\n  props: {\n    searchPlaceholderLabel: {\n      type: String,\n      required: true,\n    },\n\n    modelValue: {\n      type: String,\n      default: '',\n    },\n  },\n\n  mounted () {\n    this.focusSearchInput();\n  },\n\n  methods: {\n    updateModelValue (value) {\n      this.$emit('update:model-value', value);\n    },\n\n    focusEmojiSelector () {\n      this.$emit('focus-emoji-selector');\n    },\n\n    focusTabset () {\n      this.$emit('focus-tabset');\n    },\n\n    selectFirstEmoji () {\n      this.$emit('select-first-emoji');\n    },\n\n    clearSearch () {\n      this.$emit('update:model-value', '');\n      this.focusSearchInput();\n    },\n\n    focusSearchInput () {\n      this.$refs.searchInputRef.focus();\n    },\n  },\n};\n</script>\n"],"names":["DtInput","DtIconSearch","DtIconXCircle","DtButton"],"mappings":";;;;;AA6CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,SAAAA;AAAAA,IACA,cAAAC,KAAA;AAAA,IACA,eAAAC,KAAA;AAAA,IACA,UAAAC;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,wBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,iBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,iBAAA,OAAA;AACA,WAAA,MAAA,sBAAA,KAAA;AAAA,IACA;AAAA,IAEA,qBAAA;AACA,WAAA,MAAA,sBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,MAAA,cAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,WAAA,MAAA,oBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,MAAA,sBAAA,EAAA;AACA,WAAA,iBAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,WAAA,MAAA,eAAA;IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/components/emoji_picker/modules/emoji_search.vue.js

@@ -1,12 +1,13 @@
+import { DtIconSearch, DtIconXCircle } from "@dialpad/dialtone-icons/vue2";
 import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
 import DtInput from "../../input/input.vue.js";
-import DtIcon from "../../icon/icon.vue.js";
 import DtButton from "../../button/button.vue.js";
 const _sfc_main = {
   name: "EmojiSearch",
   components: {
     DtInput,
-    DtIcon,
+    DtIconSearch,
+    DtIconXCircle,
     DtButton
   },
   props: {
@@ -57,11 +58,11 @@ var _sfc_render = function render() {
     if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
     return _vm.selectFirstEmoji.apply(null, arguments);
   }] }, scopedSlots: _vm._u([{ key: "leftIcon", fn: function() {
-    return [_c("dt-icon", { attrs: { "name": "search", "size": "200" } })];
+    return [_c("dt-icon-search", { attrs: { "size": "200" } })];
   }, proxy: true }, _vm.modelValue.length > 0 ? { key: "rightIcon", fn: function() {
     return [_c("dt-button", { staticClass: "d-mrn4", attrs: { "importance": "clear", "size": "xs", "circle": "", "kind": "muted" }, on: { "click": _vm.clearSearch }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-      return [_c("dt-icon", { attrs: { "name": "close", "size": "200" } })];
-    }, proxy: true }], null, false, 1154370889) })];
+      return [_c("dt-icon-close", { attrs: { "size": "200" } })];
+    }, proxy: true }], null, false, 4156074325) })];
   }, proxy: true } : null], null, true) })], 1);
 };
 var _sfc_staticRenderFns = [];

package/dist/vue2/components/emoji_picker/modules/emoji_search.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"emoji_search.vue.js","sources":["../../../../components/emoji_picker/modules/emoji_search.vue"],"sourcesContent":["<template>\n  <div class=\"d-emoji-picker__search d-emoji-picker__alignment\">\n    <dt-input\n      id=\"searchInput\"\n      ref=\"searchInputRef\"\n      :placeholder=\"searchPlaceholderLabel\"\n      :value=\"modelValue\"\n      @input=\"updateModelValue\"\n      @keydown.up=\"focusTabset\"\n      @keydown.down.prevent=\"focusEmojiSelector\"\n      @keydown.enter=\"selectFirstEmoji\"\n    >\n      <template #leftIcon>\n        <dt-icon\n          name=\"search\"\n          size=\"200\"\n        />\n      </template>\n      <template\n        v-if=\"modelValue.length > 0\"\n        #rightIcon\n      >\n        <dt-button\n          importance=\"clear\"\n          size=\"xs\"\n          class=\"d-mrn4\"\n          circle\n          kind=\"muted\"\n          @click=\"clearSearch\"\n        >\n          <template #icon>\n            <dt-icon\n              name=\"close\"\n              size=\"200\"\n            />\n          </template>\n        </dt-button>\n      </template>\n    </dt-input>\n  </div>\n</template>\n\n<script>\nimport { DtInput } from '@/components/input';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'EmojiSearch',\n\n  components: {\n    DtInput,\n    DtIcon,\n    DtButton,\n  },\n\n  props: {\n    searchPlaceholderLabel: {\n      type: String,\n      required: true,\n    },\n\n    modelValue: {\n      type: String,\n      default: '',\n    },\n  },\n\n  mounted () {\n    this.focusSearchInput();\n  },\n\n  methods: {\n    updateModelValue (value) {\n      this.$emit('update:model-value', value);\n    },\n\n    focusEmojiSelector () {\n      this.$emit('focus-emoji-selector');\n    },\n\n    focusTabset () {\n      this.$emit('focus-tabset');\n    },\n\n    selectFirstEmoji () {\n      this.$emit('select-first-emoji');\n    },\n\n    clearSearch () {\n      this.$emit('update:model-value', '');\n      this.focusSearchInput();\n    },\n\n    focusSearchInput () {\n      this.$refs.searchInputRef.focus();\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;;;AA+CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,wBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,iBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,iBAAA,OAAA;AACA,WAAA,MAAA,sBAAA,KAAA;AAAA,IACA;AAAA,IAEA,qBAAA;AACA,WAAA,MAAA,sBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,MAAA,cAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,WAAA,MAAA,oBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,MAAA,sBAAA,EAAA;AACA,WAAA,iBAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,WAAA,MAAA,eAAA;IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"emoji_search.vue.js","sources":["../../../../components/emoji_picker/modules/emoji_search.vue"],"sourcesContent":["<template>\n  <div class=\"d-emoji-picker__search d-emoji-picker__alignment\">\n    <dt-input\n      id=\"searchInput\"\n      ref=\"searchInputRef\"\n      :placeholder=\"searchPlaceholderLabel\"\n      :value=\"modelValue\"\n      @input=\"updateModelValue\"\n      @keydown.up=\"focusTabset\"\n      @keydown.down.prevent=\"focusEmojiSelector\"\n      @keydown.enter=\"selectFirstEmoji\"\n    >\n      <template #leftIcon>\n        <dt-icon-search\n          size=\"200\"\n        />\n      </template>\n      <template\n        v-if=\"modelValue.length > 0\"\n        #rightIcon\n      >\n        <dt-button\n          importance=\"clear\"\n          size=\"xs\"\n          class=\"d-mrn4\"\n          circle\n          kind=\"muted\"\n          @click=\"clearSearch\"\n        >\n          <template #icon>\n            <dt-icon-close\n              size=\"200\"\n            />\n          </template>\n        </dt-button>\n      </template>\n    </dt-input>\n  </div>\n</template>\n\n<script>\nimport { DtIconSearch, DtIconXCircle } from '@dialpad/dialtone-icons/vue2';\nimport { DtInput } from '@/components/input';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'EmojiSearch',\n\n  components: {\n    DtInput,\n    DtIconSearch,\n    DtIconXCircle,\n    DtButton,\n  },\n\n  props: {\n    searchPlaceholderLabel: {\n      type: String,\n      required: true,\n    },\n\n    modelValue: {\n      type: String,\n      default: '',\n    },\n  },\n\n  mounted () {\n    this.focusSearchInput();\n  },\n\n  methods: {\n    updateModelValue (value) {\n      this.$emit('update:model-value', value);\n    },\n\n    focusEmojiSelector () {\n      this.$emit('focus-emoji-selector');\n    },\n\n    focusTabset () {\n      this.$emit('focus-tabset');\n    },\n\n    selectFirstEmoji () {\n      this.$emit('select-first-emoji');\n    },\n\n    clearSearch () {\n      this.$emit('update:model-value', '');\n      this.focusSearchInput();\n    },\n\n    focusSearchInput () {\n      this.$refs.searchInputRef.focus();\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;;;AA6CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,wBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,iBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,iBAAA,OAAA;AACA,WAAA,MAAA,sBAAA,KAAA;AAAA,IACA;AAAA,IAEA,qBAAA;AACA,WAAA,MAAA,sBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,MAAA,cAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,WAAA,MAAA,oBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,MAAA,sBAAA,EAAA;AACA,WAAA,iBAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,WAAA,MAAA,eAAA;IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/components/emoji_picker/modules/emoji_tabset.vue.cjs

@@ -1,17 +1,21 @@
 "use strict";
+const vue2 = require("@dialpad/dialtone-icons/vue2");
+const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
 const tab_group = require("../../tabs/tab_group.vue.cjs");
 const tab = require("../../tabs/tab.vue.cjs");
-const icon = require("../../icon/icon.vue.cjs");
-const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
 const emoji_picker_constants = require("../emoji_picker_constants.cjs");
 const _sfc_main = {
   name: "EmojiTabset",
   components: {
     DtTabGroup: tab_group,
-    DtTab: tab,
-    DtIcon: icon
+    DtTab: tab
   },
   props: {
+    /**
+     * Whether to show the recently used tab or not
+     * @type {Boolean}
+     * @default false
+     */
     showRecentlyUsedTab: {
       type: Boolean,
       default: false
@@ -28,6 +32,11 @@ const _sfc_main = {
       type: String,
       default: ""
     },
+    /**
+     * The labels for the aria-label
+     * @type {Array}
+     * @required
+     */
     tabSetLabels: {
       type: Array,
       required: true
@@ -38,15 +47,15 @@ const _sfc_main = {
       selectedTab: "1",
       tabsetRef: [],
       TABS_DATA: [
-        { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: "clock" },
-        { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: "satisfied" },
-        { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.NATURE, icon: "living-thing" },
-        { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.FOOD, icon: "food" },
-        { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: "object" },
-        { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.TRAVEL, icon: "transportation" },
-        { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.OBJECTS, icon: "lightbulb" },
-        { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: "heart" },
-        { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.FLAGS, icon: "flag" }
+        { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: vue2.DtIconClock },
+        { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: vue2.DtIconSatisfied },
+        { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.NATURE, icon: vue2.DtIconLivingThing },
+        { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.FOOD, icon: vue2.DtIconFood },
+        { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: vue2.DtIconObject },
+        { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.TRAVEL, icon: vue2.DtIconTransportation },
+        { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.OBJECTS, icon: vue2.DtIconLightbulb },
+        { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: vue2.DtIconHeart },
+        { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.FLAGS, icon: vue2.DtIconFlag }
       ]
     };
   },
@@ -132,7 +141,7 @@ var _sfc_render = function render() {
         return _vm.selectTabset(tab2.id);
       }, "keydown": function($event) {
         return _vm.handleKeyDown($event, tab2.id);
-      } } }, [_c("dt-icon", { attrs: { "size": "400", "name": tab2.icon } })], 1);
+      } } }, [_c(tab2.icon, { tag: "component", attrs: { "size": "400" } })], 1);
     });
   }, proxy: true }]) })], 1);
 };

package/dist/vue2/components/emoji_picker/modules/emoji_tabset.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"emoji_tabset.vue.cjs","sources":["../../../../components/emoji_picker/modules/emoji_tabset.vue"],"sourcesContent":["<template>\n  <div class=\"d-emoji-picker__tabset\">\n    <dt-tab-group\n      size=\"sm\"\n      tab-list-class=\"d-emoji-picker__tabset-list\"\n      :selected=\"selectedTab\"\n    >\n      <template #tabs>\n        <dt-tab\n          v-for=\"(tab, index) in tabs\"\n          :id=\"tab.id\"\n          :ref=\"`tabsetRef-${index}`\"\n          :key=\"tab.id\"\n          :panel-id=\"tab.panelId\"\n          :label=\"tab.label\"\n          aria-controls=\"d-emoji-picker-list\"\n          :tabindex=\"index + 1\"\n          @click.capture.stop=\"selectTabset(tab.id)\"\n          @keydown=\"handleKeyDown($event, tab.id)\"\n        >\n          <dt-icon\n            size=\"400\"\n            :name=\"tab.icon\"\n          />\n        </dt-tab>\n      </template>\n    </dt-tab-group>\n  </div>\n</template>\n\n<script>\nimport DtTabGroup from '@/components/tabs/tab_group.vue';\nimport DtTab from '@/components/tabs/tab.vue';\nimport DtIcon from '@/components/icon/icon.vue';\nimport { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker';\n\nexport default {\n  name: 'EmojiTabset',\n\n  components: {\n    DtTabGroup,\n    DtTab,\n    DtIcon,\n  },\n\n  props: {\n    showRecentlyUsedTab: {\n      type: Boolean,\n      default: false,\n    },\n\n    scrollIntoTab: {\n      type: Number,\n      required: true,\n    },\n\n    isScrolling: {\n      type: Boolean,\n      default: false,\n    },\n\n    emojiFilter: {\n      type: String,\n      default: '',\n    },\n\n    tabSetLabels: {\n      type: Array,\n      required: true,\n    },\n  },\n\n  data () {\n    return {\n      selectedTab: '1',\n      tabsetRef: [],\n      TABS_DATA: [\n        { label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: 'clock' },\n        { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: 'satisfied' },\n        { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: 'living-thing' },\n        { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: 'food' },\n        { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: 'object' },\n        { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: 'transportation' },\n        { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: 'lightbulb' },\n        { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: 'heart' },\n        { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: 'flag' },\n      ],\n    };\n  },\n\n  computed: {\n    tabs () {\n      const tabsData = this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1);\n      return tabsData.map((tab, index) => ({\n        ...tab,\n        label: this.tabSetLabels[index],\n        id: (index + 1).toString(),\n        panelId: (index + 1).toString(),\n      }));\n    },\n\n    isSearching () {\n      return this.emojiFilter.length > 0;\n    },\n  },\n\n  watch: {\n    scrollIntoTab: function (newVal) {\n      if (!this.isScrolling && !this.isSearching) {\n        this.selectedTab = (newVal + 1).toString();\n      }\n    },\n\n    isSearching: function (newVal) {\n      if (newVal) {\n        this.selectedTab = null;\n      }\n    },\n  },\n\n  mounted () {\n    this.$nextTick(() => {\n      this.setTabsetRef();\n    });\n  },\n\n  methods: {\n    selectTabset (id) {\n      if (!this.isScrolling) {\n        this.selectedTab = id;\n      }\n      this.$emit('selected-tabset', id);\n    },\n\n    setTabsetRef () {\n      this.tabs.forEach((skin, index) => {\n        const refKey = `tabsetRef-${index}`;\n        if (this.$refs[refKey]) {\n          this.$set(this.tabsetRef, index, this.$refs[refKey][0].$el);\n        }\n      });\n    },\n\n    focusTabset () {\n      if (this.tabsetRef[0]) {\n        this.tabsetRef[0].focus();\n      }\n    },\n\n    // eslint-disable-next-line complexity\n    handleKeyDown (event, tabId) {\n      if (event.key === 'Enter') {\n        this.selectTabset(tabId);\n        if (this.tabsetRef[tabId - 1]) {\n          this.tabsetRef[tabId - 1].blur();\n        }\n      }\n\n      if (event.key === 'Tab') {\n        event.preventDefault();\n        if (event.shiftKey) {\n          this.$emit('focus-skin-selector');\n        } else {\n          this.$emit('focus-search-input');\n        }\n      }\n\n      if (event.key === 'ArrowDown') {\n        this.$emit('focus-search-input');\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtTabGroup","DtTab","DtIcon","EMOJI_PICKER_CATEGORIES","tab"],"mappings":"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"}
+{"version":3,"file":"emoji_tabset.vue.cjs","sources":["../../../../components/emoji_picker/modules/emoji_tabset.vue"],"sourcesContent":["<template>\n  <div class=\"d-emoji-picker__tabset\">\n    <dt-tab-group\n      size=\"sm\"\n      tab-list-class=\"d-emoji-picker__tabset-list\"\n      :selected=\"selectedTab\"\n    >\n      <template #tabs>\n        <dt-tab\n          v-for=\"(tab, index) in tabs\"\n          :id=\"tab.id\"\n          :ref=\"`tabsetRef-${index}`\"\n          :key=\"tab.id\"\n          :panel-id=\"tab.panelId\"\n          :label=\"tab.label\"\n          aria-controls=\"d-emoji-picker-list\"\n          :tabindex=\"index + 1\"\n          @click.capture.stop=\"selectTabset(tab.id)\"\n          @keydown=\"handleKeyDown($event, tab.id)\"\n        >\n          <component\n            :is=\"tab.icon\"\n            size=\"400\"\n          />\n        </dt-tab>\n      </template>\n    </dt-tab-group>\n  </div>\n</template>\n\n<script>\nimport { DtTab, DtTabGroup } from '@/components/tabs';\nimport { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker';\nimport {\n  DtIconClock,\n  DtIconSatisfied,\n  DtIconLivingThing,\n  DtIconFood,\n  DtIconObject,\n  DtIconTransportation,\n  DtIconLightbulb,\n  DtIconHeart,\n  DtIconFlag,\n} from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n  name: 'EmojiTabset',\n\n  components: {\n    DtTabGroup,\n    DtTab,\n  },\n\n  props: {\n    /**\n     * Whether to show the recently used tab or not\n     * @type {Boolean}\n     * @default false\n     */\n    showRecentlyUsedTab: {\n      type: Boolean,\n      default: false,\n    },\n\n    scrollIntoTab: {\n      type: Number,\n      required: true,\n    },\n\n    isScrolling: {\n      type: Boolean,\n      default: false,\n    },\n\n    emojiFilter: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The labels for the aria-label\n     * @type {Array}\n     * @required\n     */\n    tabSetLabels: {\n      type: Array,\n      required: true,\n    },\n  },\n\n  data () {\n    return {\n      selectedTab: '1',\n      tabsetRef: [],\n      TABS_DATA: [\n        { label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: DtIconClock },\n        { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: DtIconSatisfied },\n        { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: DtIconLivingThing },\n        { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: DtIconFood },\n        { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: DtIconObject },\n        { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: DtIconTransportation },\n        { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: DtIconLightbulb },\n        { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: DtIconHeart },\n        { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: DtIconFlag },\n      ],\n    };\n  },\n\n  computed: {\n    tabs () {\n      const tabsData = this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1);\n      return tabsData.map((tab, index) => ({\n        ...tab,\n        label: this.tabSetLabels[index],\n        id: (index + 1).toString(),\n        panelId: (index + 1).toString(),\n      }));\n    },\n\n    isSearching () {\n      return this.emojiFilter.length > 0;\n    },\n  },\n\n  watch: {\n    scrollIntoTab: function (newVal) {\n      if (!this.isScrolling && !this.isSearching) {\n        this.selectedTab = (newVal + 1).toString();\n      }\n    },\n\n    isSearching: function (newVal) {\n      if (newVal) {\n        this.selectedTab = null;\n      }\n    },\n  },\n\n  mounted () {\n    this.$nextTick(() => {\n      this.setTabsetRef();\n    });\n  },\n\n  methods: {\n    selectTabset (id) {\n      if (!this.isScrolling) {\n        this.selectedTab = id;\n      }\n      this.$emit('selected-tabset', id);\n    },\n\n    setTabsetRef () {\n      this.tabs.forEach((skin, index) => {\n        const refKey = `tabsetRef-${index}`;\n        if (this.$refs[refKey]) {\n          this.$set(this.tabsetRef, index, this.$refs[refKey][0].$el);\n        }\n      });\n    },\n\n    focusTabset () {\n      if (this.tabsetRef[0]) {\n        this.tabsetRef[0].focus();\n      }\n    },\n\n    // eslint-disable-next-line complexity\n    handleKeyDown (event, tabId) {\n      if (event.key === 'Enter') {\n        this.selectTabset(tabId);\n        if (this.tabsetRef[tabId - 1]) {\n          this.tabsetRef[tabId - 1].blur();\n        }\n      }\n\n      if (event.key === 'Tab') {\n        event.preventDefault();\n        if (event.shiftKey) {\n          this.$emit('focus-skin-selector');\n        } else {\n          this.$emit('focus-search-input');\n        }\n      }\n\n      if (event.key === 'ArrowDown') {\n        this.$emit('focus-search-input');\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtTabGroup","DtTab","EMOJI_PICKER_CATEGORIES","DtIconClock","DtIconSatisfied","DtIconLivingThing","DtIconFood","DtIconObject","DtIconTransportation","DtIconLightbulb","DtIconHeart","DtIconFlag","tab"],"mappings":"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"}

package/dist/vue2/components/emoji_picker/modules/emoji_tabset.vue.js

@@ -1,16 +1,20 @@
+import { DtIconClock, DtIconSatisfied, DtIconLivingThing, DtIconFood, DtIconObject, DtIconTransportation, DtIconLightbulb, DtIconHeart, DtIconFlag } from "@dialpad/dialtone-icons/vue2";
+import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
 import DtTabGroup from "../../tabs/tab_group.vue.js";
 import DtTab from "../../tabs/tab.vue.js";
-import DtIcon from "../../icon/icon.vue.js";
-import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
 import { EMOJI_PICKER_CATEGORIES } from "../emoji_picker_constants.js";
 const _sfc_main = {
   name: "EmojiTabset",
   components: {
     DtTabGroup,
-    DtTab,
-    DtIcon
+    DtTab
   },
   props: {
+    /**
+     * Whether to show the recently used tab or not
+     * @type {Boolean}
+     * @default false
+     */
     showRecentlyUsedTab: {
       type: Boolean,
       default: false
@@ -27,6 +31,11 @@ const _sfc_main = {
       type: String,
       default: ""
     },
+    /**
+     * The labels for the aria-label
+     * @type {Array}
+     * @required
+     */
     tabSetLabels: {
       type: Array,
       required: true
@@ -37,15 +46,15 @@ const _sfc_main = {
       selectedTab: "1",
       tabsetRef: [],
       TABS_DATA: [
-        { label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: "clock" },
-        { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: "satisfied" },
-        { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: "living-thing" },
-        { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: "food" },
-        { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: "object" },
-        { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: "transportation" },
-        { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: "lightbulb" },
-        { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: "heart" },
-        { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: "flag" }
+        { label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: DtIconClock },
+        { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: DtIconSatisfied },
+        { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: DtIconLivingThing },
+        { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: DtIconFood },
+        { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: DtIconObject },
+        { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: DtIconTransportation },
+        { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: DtIconLightbulb },
+        { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: DtIconHeart },
+        { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: DtIconFlag }
       ]
     };
   },
@@ -131,7 +140,7 @@ var _sfc_render = function render() {
         return _vm.selectTabset(tab.id);
       }, "keydown": function($event) {
         return _vm.handleKeyDown($event, tab.id);
-      } } }, [_c("dt-icon", { attrs: { "size": "400", "name": tab.icon } })], 1);
+      } } }, [_c(tab.icon, { tag: "component", attrs: { "size": "400" } })], 1);
     });
   }, proxy: true }]) })], 1);
 };

package/dist/vue2/components/emoji_picker/modules/emoji_tabset.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"emoji_tabset.vue.js","sources":["../../../../components/emoji_picker/modules/emoji_tabset.vue"],"sourcesContent":["<template>\n  <div class=\"d-emoji-picker__tabset\">\n    <dt-tab-group\n      size=\"sm\"\n      tab-list-class=\"d-emoji-picker__tabset-list\"\n      :selected=\"selectedTab\"\n    >\n      <template #tabs>\n        <dt-tab\n          v-for=\"(tab, index) in tabs\"\n          :id=\"tab.id\"\n          :ref=\"`tabsetRef-${index}`\"\n          :key=\"tab.id\"\n          :panel-id=\"tab.panelId\"\n          :label=\"tab.label\"\n          aria-controls=\"d-emoji-picker-list\"\n          :tabindex=\"index + 1\"\n          @click.capture.stop=\"selectTabset(tab.id)\"\n          @keydown=\"handleKeyDown($event, tab.id)\"\n        >\n          <dt-icon\n            size=\"400\"\n            :name=\"tab.icon\"\n          />\n        </dt-tab>\n      </template>\n    </dt-tab-group>\n  </div>\n</template>\n\n<script>\nimport DtTabGroup from '@/components/tabs/tab_group.vue';\nimport DtTab from '@/components/tabs/tab.vue';\nimport DtIcon from '@/components/icon/icon.vue';\nimport { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker';\n\nexport default {\n  name: 'EmojiTabset',\n\n  components: {\n    DtTabGroup,\n    DtTab,\n    DtIcon,\n  },\n\n  props: {\n    showRecentlyUsedTab: {\n      type: Boolean,\n      default: false,\n    },\n\n    scrollIntoTab: {\n      type: Number,\n      required: true,\n    },\n\n    isScrolling: {\n      type: Boolean,\n      default: false,\n    },\n\n    emojiFilter: {\n      type: String,\n      default: '',\n    },\n\n    tabSetLabels: {\n      type: Array,\n      required: true,\n    },\n  },\n\n  data () {\n    return {\n      selectedTab: '1',\n      tabsetRef: [],\n      TABS_DATA: [\n        { label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: 'clock' },\n        { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: 'satisfied' },\n        { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: 'living-thing' },\n        { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: 'food' },\n        { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: 'object' },\n        { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: 'transportation' },\n        { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: 'lightbulb' },\n        { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: 'heart' },\n        { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: 'flag' },\n      ],\n    };\n  },\n\n  computed: {\n    tabs () {\n      const tabsData = this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1);\n      return tabsData.map((tab, index) => ({\n        ...tab,\n        label: this.tabSetLabels[index],\n        id: (index + 1).toString(),\n        panelId: (index + 1).toString(),\n      }));\n    },\n\n    isSearching () {\n      return this.emojiFilter.length > 0;\n    },\n  },\n\n  watch: {\n    scrollIntoTab: function (newVal) {\n      if (!this.isScrolling && !this.isSearching) {\n        this.selectedTab = (newVal + 1).toString();\n      }\n    },\n\n    isSearching: function (newVal) {\n      if (newVal) {\n        this.selectedTab = null;\n      }\n    },\n  },\n\n  mounted () {\n    this.$nextTick(() => {\n      this.setTabsetRef();\n    });\n  },\n\n  methods: {\n    selectTabset (id) {\n      if (!this.isScrolling) {\n        this.selectedTab = id;\n      }\n      this.$emit('selected-tabset', id);\n    },\n\n    setTabsetRef () {\n      this.tabs.forEach((skin, index) => {\n        const refKey = `tabsetRef-${index}`;\n        if (this.$refs[refKey]) {\n          this.$set(this.tabsetRef, index, this.$refs[refKey][0].$el);\n        }\n      });\n    },\n\n    focusTabset () {\n      if (this.tabsetRef[0]) {\n        this.tabsetRef[0].focus();\n      }\n    },\n\n    // eslint-disable-next-line complexity\n    handleKeyDown (event, tabId) {\n      if (event.key === 'Enter') {\n        this.selectTabset(tabId);\n        if (this.tabsetRef[tabId - 1]) {\n          this.tabsetRef[tabId - 1].blur();\n        }\n      }\n\n      if (event.key === 'Tab') {\n        event.preventDefault();\n        if (event.shiftKey) {\n          this.$emit('focus-skin-selector');\n        } else {\n          this.$emit('focus-search-input');\n        }\n      }\n\n      if (event.key === 'ArrowDown') {\n        this.$emit('focus-search-input');\n      }\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;;;;AAoCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IAEA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IAEA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IAEA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,WAAA,CAAA;AAAA,MACA,WAAA;AAAA,QACA,EAAA,OAAA,wBAAA,oBAAA,MAAA,QAAA;AAAA,QACA,EAAA,OAAA,wBAAA,oBAAA,MAAA,YAAA;AAAA,QACA,EAAA,OAAA,wBAAA,QAAA,MAAA,eAAA;AAAA,QACA,EAAA,OAAA,wBAAA,MAAA,MAAA,OAAA;AAAA,QACA,EAAA,OAAA,wBAAA,UAAA,MAAA,SAAA;AAAA,QACA,EAAA,OAAA,wBAAA,QAAA,MAAA,iBAAA;AAAA,QACA,EAAA,OAAA,wBAAA,SAAA,MAAA,YAAA;AAAA,QACA,EAAA,OAAA,wBAAA,SAAA,MAAA,QAAA;AAAA,QACA,EAAA,OAAA,wBAAA,OAAA,MAAA,OAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,OAAA;AACA,YAAA,WAAA,KAAA,sBAAA,KAAA,YAAA,KAAA,UAAA,MAAA,CAAA;AACA,aAAA,SAAA,IAAA,CAAA,KAAA,WAAA;AAAA,QACA,GAAA;AAAA,QACA,OAAA,KAAA,aAAA,KAAA;AAAA,QACA,KAAA,QAAA,GAAA,SAAA;AAAA,QACA,UAAA,QAAA,GAAA,SAAA;AAAA,MACA,EAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,KAAA,YAAA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,eAAA,SAAA,QAAA;AACA,UAAA,CAAA,KAAA,eAAA,CAAA,KAAA,aAAA;AACA,aAAA,eAAA,SAAA,GAAA,SAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,aAAA,SAAA,QAAA;AACA,UAAA,QAAA;AACA,aAAA,cAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,UAAA,MAAA;AACA,WAAA,aAAA;AAAA,IACA,CAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,aAAA,IAAA;AACA,UAAA,CAAA,KAAA,aAAA;AACA,aAAA,cAAA;AAAA,MACA;AACA,WAAA,MAAA,mBAAA,EAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,WAAA,KAAA,QAAA,CAAA,MAAA,UAAA;AACA,cAAA,SAAA,aAAA,KAAA;AACA,YAAA,KAAA,MAAA,MAAA,GAAA;AACA,eAAA,KAAA,KAAA,WAAA,OAAA,KAAA,MAAA,MAAA,EAAA,CAAA,EAAA,GAAA;AAAA,QACA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,UAAA,KAAA,UAAA,CAAA,GAAA;AACA,aAAA,UAAA,CAAA,EAAA,MAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA,IAGA,cAAA,OAAA,OAAA;AACA,UAAA,MAAA,QAAA,SAAA;AACA,aAAA,aAAA,KAAA;AACA,YAAA,KAAA,UAAA,QAAA,CAAA,GAAA;AACA,eAAA,UAAA,QAAA,CAAA,EAAA,KAAA;AAAA,QACA;AAAA,MACA;AAEA,UAAA,MAAA,QAAA,OAAA;AACA,cAAA,eAAA;AACA,YAAA,MAAA,UAAA;AACA,eAAA,MAAA,qBAAA;AAAA,QACA,OAAA;AACA,eAAA,MAAA,oBAAA;AAAA,QACA;AAAA,MACA;AAEA,UAAA,MAAA,QAAA,aAAA;AACA,aAAA,MAAA,oBAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"emoji_tabset.vue.js","sources":["../../../../components/emoji_picker/modules/emoji_tabset.vue"],"sourcesContent":["<template>\n  <div class=\"d-emoji-picker__tabset\">\n    <dt-tab-group\n      size=\"sm\"\n      tab-list-class=\"d-emoji-picker__tabset-list\"\n      :selected=\"selectedTab\"\n    >\n      <template #tabs>\n        <dt-tab\n          v-for=\"(tab, index) in tabs\"\n          :id=\"tab.id\"\n          :ref=\"`tabsetRef-${index}`\"\n          :key=\"tab.id\"\n          :panel-id=\"tab.panelId\"\n          :label=\"tab.label\"\n          aria-controls=\"d-emoji-picker-list\"\n          :tabindex=\"index + 1\"\n          @click.capture.stop=\"selectTabset(tab.id)\"\n          @keydown=\"handleKeyDown($event, tab.id)\"\n        >\n          <component\n            :is=\"tab.icon\"\n            size=\"400\"\n          />\n        </dt-tab>\n      </template>\n    </dt-tab-group>\n  </div>\n</template>\n\n<script>\nimport { DtTab, DtTabGroup } from '@/components/tabs';\nimport { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker';\nimport {\n  DtIconClock,\n  DtIconSatisfied,\n  DtIconLivingThing,\n  DtIconFood,\n  DtIconObject,\n  DtIconTransportation,\n  DtIconLightbulb,\n  DtIconHeart,\n  DtIconFlag,\n} from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n  name: 'EmojiTabset',\n\n  components: {\n    DtTabGroup,\n    DtTab,\n  },\n\n  props: {\n    /**\n     * Whether to show the recently used tab or not\n     * @type {Boolean}\n     * @default false\n     */\n    showRecentlyUsedTab: {\n      type: Boolean,\n      default: false,\n    },\n\n    scrollIntoTab: {\n      type: Number,\n      required: true,\n    },\n\n    isScrolling: {\n      type: Boolean,\n      default: false,\n    },\n\n    emojiFilter: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The labels for the aria-label\n     * @type {Array}\n     * @required\n     */\n    tabSetLabels: {\n      type: Array,\n      required: true,\n    },\n  },\n\n  data () {\n    return {\n      selectedTab: '1',\n      tabsetRef: [],\n      TABS_DATA: [\n        { label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: DtIconClock },\n        { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: DtIconSatisfied },\n        { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: DtIconLivingThing },\n        { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: DtIconFood },\n        { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: DtIconObject },\n        { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: DtIconTransportation },\n        { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: DtIconLightbulb },\n        { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: DtIconHeart },\n        { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: DtIconFlag },\n      ],\n    };\n  },\n\n  computed: {\n    tabs () {\n      const tabsData = this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1);\n      return tabsData.map((tab, index) => ({\n        ...tab,\n        label: this.tabSetLabels[index],\n        id: (index + 1).toString(),\n        panelId: (index + 1).toString(),\n      }));\n    },\n\n    isSearching () {\n      return this.emojiFilter.length > 0;\n    },\n  },\n\n  watch: {\n    scrollIntoTab: function (newVal) {\n      if (!this.isScrolling && !this.isSearching) {\n        this.selectedTab = (newVal + 1).toString();\n      }\n    },\n\n    isSearching: function (newVal) {\n      if (newVal) {\n        this.selectedTab = null;\n      }\n    },\n  },\n\n  mounted () {\n    this.$nextTick(() => {\n      this.setTabsetRef();\n    });\n  },\n\n  methods: {\n    selectTabset (id) {\n      if (!this.isScrolling) {\n        this.selectedTab = id;\n      }\n      this.$emit('selected-tabset', id);\n    },\n\n    setTabsetRef () {\n      this.tabs.forEach((skin, index) => {\n        const refKey = `tabsetRef-${index}`;\n        if (this.$refs[refKey]) {\n          this.$set(this.tabsetRef, index, this.$refs[refKey][0].$el);\n        }\n      });\n    },\n\n    focusTabset () {\n      if (this.tabsetRef[0]) {\n        this.tabsetRef[0].focus();\n      }\n    },\n\n    // eslint-disable-next-line complexity\n    handleKeyDown (event, tabId) {\n      if (event.key === 'Enter') {\n        this.selectTabset(tabId);\n        if (this.tabsetRef[tabId - 1]) {\n          this.tabsetRef[tabId - 1].blur();\n        }\n      }\n\n      if (event.key === 'Tab') {\n        event.preventDefault();\n        if (event.shiftKey) {\n          this.$emit('focus-skin-selector');\n        } else {\n          this.$emit('focus-search-input');\n        }\n      }\n\n      if (event.key === 'ArrowDown') {\n        this.$emit('focus-search-input');\n      }\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":"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"}