npm - @dialpad/dialtone - Versions diffs - 9.76.3 → 9.77.0 - Mend

@dialpad/dialtone 9.76.3 → 9.77.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (440) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
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-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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
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-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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
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-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 CHANGED Viewed

@@ -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
@@ -24,6 +28,11 @@ const _sfc_main = {
       type: String,
       default: ""
     },
+    /**
+     * The labels for the aria-label
+     * @type {Array}
+     * @required
+     */
     tabSetLabels: {
       type: Array,
       required: true
@@ -34,15 +43,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 }
       ]
     };
   },
@@ -128,7 +137,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 CHANGED Viewed

	@@ -1 +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 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 // IDs on dt-tab component need to be on string\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.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 // IDs on scrollToTab need to be on number\n const parseId = parseInt(id);\n // IDs on dt-tab component need to be on string\n this.selectedTab = id;\n this.$emit('selected-tabset', parseId);\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":";;;;;;~~AAoCA~~,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,YAAAA;AAAAA,IACA,OAAAC;AAAAA,~~IACA,QAAAC;AAAAA,~~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~~,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,OAAAC,uBAAA,wBAAA,oBAAA,~~MAAA~~,~~QAAA~~;AAAA,QACA,EAAA,~~OAAAA~~,uBAAA,wBAAA,oBAAA,~~MAAA~~,~~YAAA~~;AAAA,QACA,EAAA,~~OAAAA~~,uBAAA,wBAAA,QAAA,~~MAAA~~,~~eAAA~~;AAAA,QACA,EAAA,~~OAAAA~~,uBAAA,wBAAA,MAAA,~~MAAA~~,~~OAAA~~;AAAA,QACA,EAAA,~~OAAAA~~,uBAAA,wBAAA,UAAA,~~MAAA~~,~~SAAA~~;AAAA,QACA,EAAA,~~OAAAA~~,uBAAA,wBAAA,QAAA,~~MAAA~~,~~iBAAA~~;AAAA,QACA,EAAA,~~OAAAA~~,uBAAA,wBAAA,SAAA,~~MAAA~~,~~YAAA~~;AAAA,QACA,EAAA,~~OAAAA~~,uBAAA,wBAAA,SAAA,~~MAAA~~,~~QAAA~~;AAAA,QACA,EAAA,~~OAAAA~~,uBAAA,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,CAAAC,MAAA,WAAA;AAAA,QACA,GAAAA;AAAA,QACA,OAAA,KAAA,aAAA,KAAA;AAAA;AAAA,QAEA,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,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;AAEA,YAAA,UAAA,SAAA,EAAA;AAEA,WAAA,cAAA;AACA,WAAA,MAAA,mBAAA,OAAA;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;;;;;;;;;;;;;;;;;;;;;;;;;"}
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 <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 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 // IDs on dt-tab component need to be on string\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.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 // IDs on scrollToTab need to be on number\n const parseId = parseInt(id);\n // IDs on dt-tab component need to be on string\n this.selectedTab = id;\n this.$emit('selected-tabset', parseId);\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 CHANGED Viewed

@@ -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
@@ -23,6 +27,11 @@ const _sfc_main = {
       type: String,
       default: ""
     },
+    /**
+     * The labels for the aria-label
+     * @type {Array}
+     * @required
+     */
     tabSetLabels: {
       type: Array,
       required: true
@@ -33,15 +42,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 }
       ]
     };
   },
@@ -127,7 +136,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 CHANGED Viewed

	@@ -1 +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 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 // IDs on dt-tab component need to be on string\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.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 // IDs on scrollToTab need to be on number\n const parseId = parseInt(id);\n // IDs on dt-tab component need to be on string\n this.selectedTab = id;\n this.$emit('selected-tabset', parseId);\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~~,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;AAAA,QAEA,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,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;AAEA,YAAA,UAAA,SAAA,EAAA;AAEA,WAAA,cAAA;AACA,WAAA,MAAA,mBAAA,OAAA;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;;;;;;;;;;;;;;;;;;;;;;;;"}
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 <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 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 // IDs on dt-tab component need to be on string\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.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 // IDs on scrollToTab need to be on number\n const parseId = parseInt(id);\n // IDs on dt-tab component need to be on string\n this.selectedTab = id;\n this.$emit('selected-tabset', parseId);\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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"}

package/dist/vue2/components/empty_state/empty_state.vue.cjs CHANGED Viewed

@@ -1,16 +1,10 @@
 "use strict";
 const empty_state_constants = require("./empty_state_constants.cjs");
 const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
-const illustration = require("../illustration/illustration.vue.cjs");
-const icon = require("../icon/icon.vue.cjs");
 const stack = require("../stack/stack.vue.cjs");
-const illustration_constants = require("../illustration/illustration_constants.cjs");
-const icon_constants = require("../icon/icon_constants.cjs");
 const _sfc_main = {
   name: "DtEmptyState",
   components: {
-    DtIllustration: illustration,
-    DtIcon: icon,
     DtStack: stack
   },
   props: {
@@ -23,28 +17,6 @@ const _sfc_main = {
       default: "lg",
       validator: (s) => Object.keys(empty_state_constants.EMPTY_STATE_SIZE_MODIFIERS).includes(s)
     },
-    /**
-     * The illustration name in kebab-case
-     * This only displays when size is 'lg' or 'md'
-     * This has priority over icon.
-     * @type {String}
-     */
-    illustrationName: {
-      type: String,
-      default: null,
-      validator: (name) => illustration_constants.ILLUSTRATION_NAMES.includes(name)
-    },
-    /**
-     * The icon name in kebab-case
-     * This will be shown in 'lg' and 'md' size only if illustrationName prop is not provided and
-     * Will always be shown in 'sm' size.
-     * @type {String}
-     */
-    iconName: {
-      type: String,
-      default: null,
-      validator: (name) => icon_constants.ICON_NAMES.includes(name)
-    },
     /**
      * Header text
      * @type {String}
@@ -60,36 +32,31 @@ const _sfc_main = {
     bodyText: {
       type: String,
       default: null
-    },
-    /**
-     * Whether to show the illustration
-     * @type {Boolean}
-     */
-    showIllustration: {
-      type: Boolean,
-      default: true
     }
   },
   computed: {
-    /**
-     * Illustration will always be shown in lg and md size
-     * Illustration will not be shown in sm size
-     */
-    showIllustrationComponent() {
-      return this.illustrationName && this.notSmSize;
+    hasIcon() {
+      return this.$scopedSlots.icon && this.$scopedSlots.icon();
+    },
+    hasIllustration() {
+      return this.$scopedSlots.illustration && this.$scopedSlots.illustration();
+    },
+    isSmallSize() {
+      return this.size === "sm";
     },
     /**
      * Icon will be shown in lg and md size only if illustration is not provided
      * Icon will always be shown in sm size
      */
     showIcon() {
-      if (!this.iconName) {
-        return false;
-      }
-      return !(this.illustrationName && this.notSmSize);
+      return this.hasIcon && (!this.hasIllustration || this.isSmallSize);
     },
-    notSmSize() {
-      return this.size !== "sm";
+    /**
+     * Illustration will always be shown in lg and md size
+     * Illustration will not be shown in sm size
+     */
+    showIllustration() {
+      return this.hasIllustration && !this.isSmallSize;
     },
     sizeClass() {
       return empty_state_constants.EMPTY_STATE_SIZE_MODIFIERS[this.size];
@@ -98,51 +65,24 @@ const _sfc_main = {
       return ["d-empty-state", this.sizeClass];
     },
     contentClass() {
-      switch (this.size) {
-        case "sm":
-          return "d-empty-state__content--sm";
-        case "md":
-          return "d-empty-state__content--md";
-        case "lg":
-          return "d-empty-state__content--lg";
-        default:
-          return "d-empty-state__content--lg";
-      }
+      return empty_state_constants.EMPTY_STATE_CONTENT_SIZE_MODIFIERS[this.size];
     },
     headlineClass() {
-      switch (this.size) {
-        case "sm":
-          return "d-headline--md";
-        case "md":
-          return "d-headline--xl";
-        case "lg":
-          return "d-headline--xxl";
-        default:
-          return "d-headline--xxl";
-      }
+      return empty_state_constants.EMPTY_STATE_HEADLINE_SIZE_MODIFIERS[this.size];
     },
     bodyClass() {
-      switch (this.size) {
-        case "sm":
-          return "d-body--sm";
-        case "md":
-          return "d-body--sm";
-        case "lg":
-          return "d-body--md";
-        default:
-          return "d-body--md";
-      }
+      return empty_state_constants.EMPTY_STATE_BODY_SIZE_MODIFIERS[this.size];
     }
   },
   mounted() {
     if (!this.bodyText && !this.$slots.body) {
-      console.warn("Dialtone Empty State component: You should provide either bodyText or content on body slot.");
+      console.error("DtEmptyState: You should provide either bodyText or content on body slot.");
     }
   }
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("dt-stack", { class: _vm.emptyStateClasses }, [_vm.showIllustration ? [_vm.showIcon ? _c("span", { staticClass: "d-empty-state__icon" }, [_c("dt-icon", { attrs: { "name": _vm.iconName, "size": "800" } })], 1) : _vm._e(), _vm.showIllustrationComponent ? _c("span", { staticClass: "d-empty-state__illustration" }, [_c("dt-illustration", { attrs: { "name": _vm.illustrationName } })], 1) : _vm._e()] : _vm._e(), _c("dt-stack", { class: ["d-empty-state__content", _vm.contentClass], attrs: { "gap": "450" } }, [_c("div", { class: ["d-empty-state__header-text", _vm.headlineClass] }, [_vm._v(" " + _vm._s(_vm.headerText) + " ")]), _vm.bodyText ? _c("p", { class: ["d-empty-state__body-text", _vm.bodyClass] }, [_vm._v(" " + _vm._s(_vm.bodyText) + " ")]) : _vm._e()]), _vm._t("body")], 2);
+  return _c("dt-stack", { class: _vm.emptyStateClasses }, [_vm.showIllustration ? _c("span", { staticClass: "d-empty-state__illustration" }, [_vm._t("illustration")], 2) : _vm._e(), _vm.showIcon ? _c("span", { staticClass: "d-empty-state__icon" }, [_vm._t("icon", null, { "iconSize": "800" })], 2) : _vm._e(), _c("dt-stack", { class: ["d-empty-state__content", _vm.contentClass], attrs: { "gap": "450" } }, [_c("div", { class: ["d-empty-state__header-text", _vm.headlineClass] }, [_vm._v(" " + _vm._s(_vm.headerText) + " ")]), _vm.bodyText ? _c("p", { class: ["d-empty-state__body-text", _vm.bodyClass] }, [_vm._v(" " + _vm._s(_vm.bodyText) + " ")]) : _vm._e()]), _vm._t("body")], 2);
 };
 var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer(